routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+53
@@ -0,0 +1,53 @@
|
||||
@layer vuetify-components {
|
||||
.v-icon {
|
||||
--v-icon-size-multiplier: 1;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
font-feature-settings: "liga";
|
||||
height: 1em;
|
||||
justify-content: center;
|
||||
letter-spacing: normal;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
opacity: var(--v-icon-opacity, 1);
|
||||
text-indent: 0;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
min-width: 1em;
|
||||
}
|
||||
.v-icon--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-icon--disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.38;
|
||||
}
|
||||
.v-icon--size-x-small {
|
||||
font-size: calc(var(--v-icon-size-multiplier) * 1em);
|
||||
}
|
||||
.v-icon--size-small {
|
||||
font-size: calc(var(--v-icon-size-multiplier) * 1.25em);
|
||||
}
|
||||
.v-icon--size-default {
|
||||
font-size: calc(var(--v-icon-size-multiplier) * 1.5em);
|
||||
}
|
||||
.v-icon--size-large {
|
||||
font-size: calc(var(--v-icon-size-multiplier) * 1.75em);
|
||||
}
|
||||
.v-icon--size-x-large {
|
||||
font-size: calc(var(--v-icon-size-multiplier) * 2em);
|
||||
}
|
||||
.v-icon__svg {
|
||||
fill: currentColor;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-icon--start {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
.v-icon--end {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
+247
@@ -0,0 +1,247 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
export declare const makeVIconProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
size?: unknown;
|
||||
color?: unknown;
|
||||
disabled?: unknown;
|
||||
start?: unknown;
|
||||
end?: unknown;
|
||||
icon?: unknown;
|
||||
opacity?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
start: unknown extends Defaults["start"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"]>;
|
||||
default: unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"];
|
||||
};
|
||||
end: unknown extends Defaults["end"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"]>;
|
||||
default: unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
opacity: unknown extends Defaults["opacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["opacity"] ? string | number : string | number | Defaults["opacity"]>;
|
||||
default: unknown extends Defaults["opacity"] ? string | number : Defaults["opacity"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
export declare const VIcon: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
disabled: boolean;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
disabled: boolean;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
disabled: boolean;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
disabled: boolean;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
disabled: boolean;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
disabled: boolean;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
icon: import("vue").PropType<IconValue>;
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
icon: import("vue").PropType<IconValue>;
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
}>>;
|
||||
export type VIcon = InstanceType<typeof VIcon>;
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VIcon.css";
|
||||
|
||||
// Composables
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { IconValue, useIcon } from "../../composables/icons.js";
|
||||
import { makeSizeProps, useSize } from "../../composables/size.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, useTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { shallowRef, Text } from 'vue';
|
||||
import { convertToUnit, flattenFragments, genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVIconProps = propsFactory({
|
||||
color: String,
|
||||
disabled: Boolean,
|
||||
start: Boolean,
|
||||
end: Boolean,
|
||||
icon: IconValue,
|
||||
opacity: [String, Number],
|
||||
...makeComponentProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps({
|
||||
tag: 'i'
|
||||
}),
|
||||
...makeThemeProps()
|
||||
}, 'VIcon');
|
||||
export const VIcon = genericComponent()({
|
||||
name: 'VIcon',
|
||||
props: makeVIconProps(),
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const slotIcon = shallowRef();
|
||||
const {
|
||||
themeClasses
|
||||
} = useTheme();
|
||||
const {
|
||||
iconData
|
||||
} = useIcon(() => slotIcon.value || props.icon);
|
||||
const {
|
||||
sizeClasses
|
||||
} = useSize(props);
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.color);
|
||||
useRender(() => {
|
||||
const slotValue = slots.default?.();
|
||||
if (slotValue) {
|
||||
slotIcon.value = flattenFragments(slotValue).filter(node => node.type === Text && node.children && typeof node.children === 'string')[0]?.children;
|
||||
}
|
||||
const hasClick = !!(attrs.onClick || attrs.onClickOnce);
|
||||
return _createVNode(iconData.value.component, {
|
||||
"tag": props.tag,
|
||||
"icon": iconData.value.icon,
|
||||
"class": _normalizeClass(['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
|
||||
'v-icon--clickable': hasClick,
|
||||
'v-icon--disabled': props.disabled,
|
||||
'v-icon--start': props.start,
|
||||
'v-icon--end': props.end
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-icon-opacity': props.opacity
|
||||
}, !sizeClasses.value ? {
|
||||
fontSize: convertToUnit(props.size),
|
||||
height: convertToUnit(props.size),
|
||||
width: convertToUnit(props.size)
|
||||
} : undefined, textColorStyles.value, props.style]),
|
||||
"role": hasClick ? 'button' : undefined,
|
||||
"aria-hidden": !hasClick,
|
||||
"tabindex": hasClick ? props.disabled ? -1 : 0 : undefined
|
||||
}, {
|
||||
default: () => [slotValue]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VIcon.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+45
@@ -0,0 +1,45 @@
|
||||
@use 'sass:map'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-icon
|
||||
--v-icon-size-multiplier: 1
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
font-feature-settings: 'liga'
|
||||
height: $icon-size
|
||||
justify-content: center
|
||||
letter-spacing: $icon-letter-spacing
|
||||
line-height: $icon-line-height
|
||||
position: relative
|
||||
opacity: var(--v-icon-opacity, 1)
|
||||
text-indent: $icon-text-indent
|
||||
text-align: center
|
||||
user-select: none
|
||||
vertical-align: $icon-vertical-align
|
||||
width: $icon-size
|
||||
min-width: $icon-size
|
||||
|
||||
&--clickable
|
||||
cursor: pointer
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
opacity: $icon-disabled-opacity
|
||||
|
||||
@each $name in settings.$sizes
|
||||
&--size-#{$name}
|
||||
font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)})
|
||||
|
||||
.v-icon__svg
|
||||
fill: currentColor
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.v-icon--start
|
||||
margin-inline-end: $icon-margin-start
|
||||
|
||||
.v-icon--end
|
||||
margin-inline-start: $icon-margin-end
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VIcon
|
||||
$icon-disabled-opacity: 0.38 !default;
|
||||
$icon-left-margin-left: 8px !default;
|
||||
$icon-letter-spacing: normal !default;
|
||||
$icon-line-height: 1 !default;
|
||||
$icon-margin-end: 8px !default;
|
||||
$icon-margin-start: 8px !default;
|
||||
$icon-size: 1em !default;
|
||||
$icon-text-indent: 0 !default;
|
||||
$icon-vertical-align: middle !default;
|
||||
|
||||
// Lists
|
||||
$icon-sizes: () !default;
|
||||
$icon-sizes: tools.map-deep-merge(
|
||||
(
|
||||
'x-small': 1em,
|
||||
'small': 1.25em,
|
||||
'default': 1.5em,
|
||||
'large': 1.75em,
|
||||
'x-large': 2em,
|
||||
),
|
||||
$icon-sizes
|
||||
);
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VIcon } from './VIcon.js';
|
||||
export { VComponentIcon, VSvgIcon, VLigatureIcon, VClassIcon } from '../../composables/icons.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VIcon } from "./VIcon.js";
|
||||
export { VComponentIcon, VSvgIcon, VLigatureIcon, VClassIcon } from "../../composables/icons.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VIcon","VComponentIcon","VSvgIcon","VLigatureIcon","VClassIcon"],"sources":["../../../src/components/VIcon/index.ts"],"sourcesContent":["export { VIcon } from './VIcon'\nexport { VComponentIcon, VSvgIcon, VLigatureIcon, VClassIcon } from '@/composables/icons'\n"],"mappings":"SAASA,KAAK;AAAA,SACLC,cAAc,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,UAAU","ignoreList":[]}
|
||||
Reference in New Issue
Block a user