routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+202
@@ -0,0 +1,202 @@
|
||||
@layer vuetify-components {
|
||||
.v-icon-btn {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-icon-btn--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-icon-btn {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.v-icon-btn:hover > .v-icon-btn__overlay {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-icon-btn:focus-visible > .v-icon-btn__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-icon-btn:focus > .v-icon-btn__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-icon-btn--active > .v-icon-btn__overlay, .v-icon-btn[aria-haspopup=menu][aria-expanded=true] > .v-icon-btn__overlay {
|
||||
opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-icon-btn--active:hover > .v-icon-btn__overlay, .v-icon-btn[aria-haspopup=menu][aria-expanded=true]:hover > .v-icon-btn__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-icon-btn--active:focus-visible > .v-icon-btn__overlay, .v-icon-btn[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-icon-btn__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-icon-btn--active:focus > .v-icon-btn__overlay, .v-icon-btn[aria-haspopup=menu][aria-expanded=true]:focus > .v-icon-btn__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-icon-btn--variant-plain, .v-icon-btn--variant-outlined, .v-icon-btn--variant-text, .v-icon-btn--variant-tonal {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.v-icon-btn--variant-plain {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.v-icon-btn--variant-plain:focus, .v-icon-btn--variant-plain:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-icon-btn--variant-plain .v-icon-btn__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-icon-btn--variant-elevated, .v-icon-btn--variant-flat {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: inherit;
|
||||
}
|
||||
.v-icon-btn--variant-elevated {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
|
||||
}
|
||||
.v-icon-btn--variant-flat {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-icon-btn--variant-outlined {
|
||||
border: thin solid currentColor;
|
||||
}
|
||||
.v-icon-btn--variant-text .v-icon-btn__overlay {
|
||||
background: currentColor;
|
||||
}
|
||||
.v-icon-btn--variant-tonal .v-icon-btn__underlay {
|
||||
background: currentColor;
|
||||
opacity: var(--v-activated-opacity);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-icon-btn .v-icon-btn__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-icon-btn {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
height: var(--v-icon-btn-height);
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition-property: width, height, transform;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
vertical-align: middle;
|
||||
width: var(--v-icon-btn-width);
|
||||
}
|
||||
@supports selector(:focus-visible) {
|
||||
.v-icon-btn::after {
|
||||
pointer-events: none;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.v-icon-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-icon-btn:focus-visible::after {
|
||||
opacity: calc(0.25 * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-icon-btn--disabled, .v-icon-btn--loading, .v-icon-btn--readonly {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-icon-btn--disabled {
|
||||
opacity: 0.26;
|
||||
}
|
||||
.v-icon-btn--start {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
.v-icon-btn--end {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
.v-icon-btn__content {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: inline-flex;
|
||||
transition: inherit;
|
||||
transition-property: transform;
|
||||
transform: rotate(var(--v-icon-btn-rotate, 0deg));
|
||||
}
|
||||
.v-icon-btn--loading .v-icon-btn__content {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-icon-btn__content .v-icon {
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: opacity, font-size, width, height;
|
||||
transform-origin: center;
|
||||
}
|
||||
.v-icon-btn__loader {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.v-icon-btn__overlay,
|
||||
.v-icon-btn__underlay {
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-icon-btn__overlay,
|
||||
.v-icon-btn__underlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-icon-btn__overlay {
|
||||
background-color: currentColor;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.v-icon-btn--active:not(:hover) .v-icon-btn__overlay {
|
||||
--v-activated-opacity: 0;
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-icon-btn:focus-visible {
|
||||
outline: 2px solid;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.v-icon-btn:not(.v-icon-btn--active):hover, .v-icon-btn:not(.v-icon-btn--active):focus {
|
||||
color: highlight;
|
||||
}
|
||||
.v-icon-btn--active:not(.v-icon-btn--disabled), .v-icon-btn--active:not(.v-icon-btn--disabled)[class*=bg-] {
|
||||
outline-color: canvastext;
|
||||
background: highlight;
|
||||
color: highlighttext;
|
||||
}
|
||||
.v-icon-btn--disabled {
|
||||
color: graytext;
|
||||
}
|
||||
.v-icon-btn__overlay, .v-icon-btn__underlay,
|
||||
.v-icon-btn .v-icon {
|
||||
forced-color-adjust: preserve-parent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
+608
@@ -0,0 +1,608 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
import type { IconValue } from '../../composables/icons.js';
|
||||
import type { Variant } from '../../composables/variant.js';
|
||||
export type VIconBtnSlots = {
|
||||
default: never;
|
||||
loader: never;
|
||||
};
|
||||
export type VIconBtnSizes = 'x-small' | 'small' | 'default' | 'large' | 'x-large';
|
||||
export declare const makeVIconBtnProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
active?: unknown;
|
||||
activeColor?: unknown;
|
||||
activeIcon?: unknown;
|
||||
activeVariant?: unknown;
|
||||
baseVariant?: unknown;
|
||||
disabled?: unknown;
|
||||
height?: unknown;
|
||||
width?: unknown;
|
||||
hideOverlay?: unknown;
|
||||
icon?: unknown;
|
||||
iconColor?: unknown;
|
||||
loading?: unknown;
|
||||
opacity?: unknown;
|
||||
readonly?: unknown;
|
||||
rotate?: unknown;
|
||||
size?: unknown;
|
||||
sizes?: unknown;
|
||||
text?: unknown;
|
||||
iconSize?: unknown;
|
||||
iconSizes?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: 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>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: 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>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
activeIcon: unknown extends Defaults["activeIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["activeIcon"] ? IconValue : Defaults["activeIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["activeIcon"] ? IconValue : Defaults["activeIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
activeVariant: unknown extends Defaults["activeVariant"] ? PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal"> : {
|
||||
type: PropType<unknown extends Defaults["activeVariant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["activeVariant"]>;
|
||||
default: unknown extends Defaults["activeVariant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["activeVariant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
baseVariant: unknown extends Defaults["baseVariant"] ? {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["baseVariant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["baseVariant"]>;
|
||||
default: unknown extends Defaults["baseVariant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["baseVariant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
hideOverlay: unknown extends Defaults["hideOverlay"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideOverlay"] ? boolean : boolean | Defaults["hideOverlay"]>;
|
||||
default: unknown extends Defaults["hideOverlay"] ? boolean : boolean | Defaults["hideOverlay"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
iconColor: unknown extends Defaults["iconColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["iconColor"] ? string : string | Defaults["iconColor"]>;
|
||||
default: unknown extends Defaults["iconColor"] ? string : string | Defaults["iconColor"];
|
||||
};
|
||||
loading: unknown extends Defaults["loading"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["loading"] ? boolean : boolean | Defaults["loading"]>;
|
||||
default: unknown extends Defaults["loading"] ? boolean : boolean | Defaults["loading"];
|
||||
};
|
||||
opacity: unknown extends Defaults["opacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["opacity"] ? string | number : string | number | Defaults["opacity"]>;
|
||||
default: unknown extends Defaults["opacity"] ? string | number : Defaults["opacity"] | NonNullable<string | number>;
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"]>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"];
|
||||
};
|
||||
rotate: unknown extends Defaults["rotate"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["rotate"] ? string | number : string | number | Defaults["rotate"]>;
|
||||
default: unknown extends Defaults["rotate"] ? string | number : Defaults["rotate"] | NonNullable<string | number>;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: PropType<VIconBtnSizes | number | string>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<VIconBtnSizes | number | string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
sizes: unknown extends Defaults["sizes"] ? {
|
||||
type: PropType<[VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
} : Omit<{
|
||||
type: PropType<[VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["sizes"] ? [VIconBtnSizes, number][] : [VIconBtnSizes, number][] | Defaults["sizes"]>;
|
||||
default: unknown extends Defaults["sizes"] ? [VIconBtnSizes, number][] : [VIconBtnSizes, number][] | Defaults["sizes"];
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["text"] ? string | number | boolean : string | number | boolean | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string | number | boolean : Defaults["text"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
iconSize: unknown extends Defaults["iconSize"] ? PropType<string | number> : {
|
||||
type: PropType<unknown extends Defaults["iconSize"] ? string | number : string | number | Defaults["iconSize"]>;
|
||||
default: unknown extends Defaults["iconSize"] ? string | number : Defaults["iconSize"] | NonNullable<string | number>;
|
||||
};
|
||||
iconSizes: unknown extends Defaults["iconSizes"] ? {
|
||||
type: PropType<[VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
} : Omit<{
|
||||
type: PropType<[VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["iconSizes"] ? [VIconBtnSizes, number][] : [VIconBtnSizes, number][] | Defaults["iconSizes"]>;
|
||||
default: unknown extends Defaults["iconSizes"] ? [VIconBtnSizes, number][] : [VIconBtnSizes, number][] | Defaults["iconSizes"];
|
||||
};
|
||||
};
|
||||
export declare const VIconBtn: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
baseVariant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
hideOverlay: boolean;
|
||||
loading: boolean;
|
||||
readonly: boolean;
|
||||
size: string | number;
|
||||
sizes: [VIconBtnSizes, number][];
|
||||
iconSizes: [VIconBtnSizes, number][];
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeColor?: string | undefined;
|
||||
activeIcon?: IconValue | undefined;
|
||||
activeVariant?: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | undefined;
|
||||
height?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
rotate?: string | number | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:active"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:active': (value: boolean) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
active: boolean;
|
||||
baseVariant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
hideOverlay: boolean;
|
||||
loading: boolean;
|
||||
readonly: boolean;
|
||||
size: string | number;
|
||||
sizes: [VIconBtnSizes, number][];
|
||||
text: string | number | boolean;
|
||||
iconSizes: [VIconBtnSizes, number][];
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: () => 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;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
baseVariant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
hideOverlay: boolean;
|
||||
loading: boolean;
|
||||
readonly: boolean;
|
||||
size: string | number;
|
||||
sizes: [VIconBtnSizes, number][];
|
||||
iconSizes: [VIconBtnSizes, number][];
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeColor?: string | undefined;
|
||||
activeIcon?: IconValue | undefined;
|
||||
activeVariant?: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | undefined;
|
||||
height?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
rotate?: string | number | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:active"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
active: boolean;
|
||||
baseVariant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
hideOverlay: boolean;
|
||||
loading: boolean;
|
||||
readonly: boolean;
|
||||
size: string | number;
|
||||
sizes: [VIconBtnSizes, number][];
|
||||
text: string | number | boolean;
|
||||
iconSizes: [VIconBtnSizes, number][];
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
baseVariant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
hideOverlay: boolean;
|
||||
loading: boolean;
|
||||
readonly: boolean;
|
||||
size: string | number;
|
||||
sizes: [VIconBtnSizes, number][];
|
||||
iconSizes: [VIconBtnSizes, number][];
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeColor?: string | undefined;
|
||||
activeIcon?: IconValue | undefined;
|
||||
activeVariant?: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | undefined;
|
||||
height?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
iconColor?: string | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
rotate?: string | number | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:active"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:active': (value: boolean) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
active: boolean;
|
||||
baseVariant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
hideOverlay: boolean;
|
||||
loading: boolean;
|
||||
readonly: boolean;
|
||||
size: string | number;
|
||||
sizes: [VIconBtnSizes, number][];
|
||||
text: string | number | boolean;
|
||||
iconSizes: [VIconBtnSizes, number][];
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: () => 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: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
activeIcon: PropType<IconValue>;
|
||||
activeVariant: PropType<Variant>;
|
||||
baseVariant: {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
hideOverlay: BooleanConstructor;
|
||||
icon: PropType<IconValue>;
|
||||
iconColor: StringConstructor;
|
||||
loading: BooleanConstructor;
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
readonly: BooleanConstructor;
|
||||
rotate: (NumberConstructor | StringConstructor)[];
|
||||
size: {
|
||||
type: PropType<VIconBtnSizes | number | string>;
|
||||
default: string;
|
||||
};
|
||||
sizes: {
|
||||
type: PropType<[VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
iconSize: PropType<VIconBtnSizes | number | string>;
|
||||
iconSizes: {
|
||||
type: PropType<[VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
activeIcon: PropType<IconValue>;
|
||||
activeVariant: PropType<Variant>;
|
||||
baseVariant: {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
hideOverlay: BooleanConstructor;
|
||||
icon: PropType<IconValue>;
|
||||
iconColor: StringConstructor;
|
||||
loading: BooleanConstructor;
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
readonly: BooleanConstructor;
|
||||
rotate: (NumberConstructor | StringConstructor)[];
|
||||
size: {
|
||||
type: PropType<VIconBtnSizes | number | string>;
|
||||
default: string;
|
||||
};
|
||||
sizes: {
|
||||
type: PropType<[VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
iconSize: PropType<VIconBtnSizes | number | string>;
|
||||
iconSizes: {
|
||||
type: PropType<[VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
};
|
||||
}>>;
|
||||
export type VIconBtn = InstanceType<typeof VIconBtn>;
|
||||
+178
@@ -0,0 +1,178 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VIconBtn.css";
|
||||
|
||||
// Components
|
||||
import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../../components/VIcon/index.js";
|
||||
import { VProgressCircular } from "../../components/VProgressCircular/index.js"; // Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { makeIconSizeProps, useIconSizes } from "../../composables/iconSizes.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Utilities
|
||||
import { toDisplayString } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVIconBtnProps = propsFactory({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
activeColor: String,
|
||||
activeIcon: [String, Function, Object],
|
||||
activeVariant: String,
|
||||
baseVariant: {
|
||||
type: String,
|
||||
default: 'tonal'
|
||||
},
|
||||
disabled: Boolean,
|
||||
height: [Number, String],
|
||||
width: [Number, String],
|
||||
hideOverlay: Boolean,
|
||||
icon: [String, Function, Object],
|
||||
iconColor: String,
|
||||
loading: Boolean,
|
||||
opacity: [Number, String],
|
||||
readonly: Boolean,
|
||||
rotate: [Number, String],
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 'default'
|
||||
},
|
||||
sizes: {
|
||||
type: Array,
|
||||
default: () => [['x-small', 16], ['small', 24], ['default', 40], ['large', 48], ['x-large', 56]]
|
||||
},
|
||||
text: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeElevationProps(),
|
||||
...makeIconSizeProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps({
|
||||
tag: 'button'
|
||||
}),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'flat'
|
||||
})
|
||||
}, 'VIconBtn');
|
||||
export const VIconBtn = genericComponent()({
|
||||
name: 'VIconBtn',
|
||||
props: makeVIconBtnProps(),
|
||||
emits: {
|
||||
'update:active': value => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const isActive = useProxiedModel(props, 'active');
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(() => ({
|
||||
color: (() => {
|
||||
if (props.disabled) return undefined;
|
||||
if (!isActive.value) return props.color;
|
||||
// Use an inline fallback as opposed to setting a default color
|
||||
// because non-toggle buttons are default flat whereas toggle
|
||||
// buttons are default tonal and active flat. The exact use
|
||||
// case for this is a toggle button with no active color.
|
||||
return props.activeColor ?? props.color ?? 'surface-variant';
|
||||
})(),
|
||||
variant: (() => {
|
||||
if (isActive.value === undefined) return props.variant;
|
||||
if (isActive.value) return props.activeVariant ?? props.variant;
|
||||
return props.baseVariant ?? props.variant;
|
||||
})()
|
||||
}));
|
||||
const btnSizeMap = new Map(props.sizes);
|
||||
function onClick() {
|
||||
if (props.disabled || props.readonly || isActive.value === undefined || props.tag === 'a' && attrs.href) return;
|
||||
isActive.value = !isActive.value;
|
||||
}
|
||||
useRender(() => {
|
||||
const icon = isActive.value ? props.activeIcon ?? props.icon : props.icon;
|
||||
const _btnSize = props.size;
|
||||
const hasNamedSize = btnSizeMap.has(_btnSize);
|
||||
const btnSize = hasNamedSize ? btnSizeMap.get(_btnSize) : _btnSize;
|
||||
const btnHeight = props.height ?? btnSize;
|
||||
const btnWidth = props.width ?? btnSize;
|
||||
const {
|
||||
iconSize
|
||||
} = useIconSizes(props, () => new Map(props.iconSizes).get(_btnSize));
|
||||
const iconProps = {
|
||||
icon,
|
||||
size: iconSize.value,
|
||||
color: props.iconColor,
|
||||
opacity: props.opacity
|
||||
};
|
||||
return _createVNode(props.tag, {
|
||||
"type": props.tag === 'button' ? 'button' : undefined,
|
||||
"class": _normalizeClass([{
|
||||
'v-icon-btn': true,
|
||||
'v-icon-btn--active': isActive.value,
|
||||
'v-icon-btn--disabled': props.disabled,
|
||||
'v-icon-btn--loading': props.loading,
|
||||
'v-icon-btn--readonly': props.readonly,
|
||||
[`v-icon-btn--${props.size}`]: true
|
||||
}, themeClasses.value, colorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, variantClasses.value, props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-icon-btn-rotate': convertToUnit(props.rotate, 'deg'),
|
||||
'--v-icon-btn-height': convertToUnit(btnHeight),
|
||||
'--v-icon-btn-width': convertToUnit(btnWidth)
|
||||
}, colorStyles.value, props.style]),
|
||||
"tabindex": props.disabled || props.readonly ? -1 : 0,
|
||||
"onClick": onClick
|
||||
}, {
|
||||
default: () => [genOverlays(!props.hideOverlay, 'v-icon-btn'), _createElementVNode("div", {
|
||||
"class": "v-icon-btn__content",
|
||||
"data-no-activator": ""
|
||||
}, [!slots.default && icon ? _createVNode(VIcon, _mergeProps({
|
||||
"key": "content-icon"
|
||||
}, iconProps), null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "content-defaults",
|
||||
"disabled": !icon,
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
...iconProps
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => slots.default?.() ?? toDisplayString(props.text)
|
||||
})]), !!props.loading && _createElementVNode("span", {
|
||||
"key": "loader",
|
||||
"class": "v-icon-btn__loader"
|
||||
}, [slots.loader?.() ?? _createVNode(VProgressCircular, {
|
||||
"color": typeof props.loading === 'boolean' ? undefined : props.loading,
|
||||
"indeterminate": "disable-shrink",
|
||||
"width": "2",
|
||||
"size": iconSize.value
|
||||
}, null)])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VIconBtn.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+144
@@ -0,0 +1,144 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
@use './variables' as *;
|
||||
|
||||
@include tools.layer('components') {
|
||||
.v-icon-btn {
|
||||
@include tools.border($icon-btn-border...);
|
||||
@include tools.rounded($icon-btn-border-radius);
|
||||
@include tools.states('.v-icon-btn__overlay');
|
||||
@include tools.variant($icon-btn-variants...);
|
||||
|
||||
& {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
font-size: $icon-btn-font-size;
|
||||
font-weight: $icon-btn-font-weight;
|
||||
line-height: $icon-btn-line-height;
|
||||
height: #{$icon-btn-height};
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition-property: width, height, transform;
|
||||
transition: 0.2s settings.$standard-easing;
|
||||
vertical-align: middle;
|
||||
width: #{$icon-btn-width};
|
||||
|
||||
@supports selector(:focus-visible) {
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-in-out;
|
||||
@include tools.absolute(true);
|
||||
}
|
||||
|
||||
&:focus-visible::after {
|
||||
opacity: calc(.25 * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&--loading,
|
||||
&--readonly {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: $icon-btn-disabled-opacity;
|
||||
}
|
||||
|
||||
&--start {
|
||||
margin-inline-end: $icon-btn-margin-start;
|
||||
}
|
||||
|
||||
&--end {
|
||||
margin-inline-start: $icon-btn-margin-end;
|
||||
}
|
||||
}
|
||||
|
||||
.v-icon-btn__content {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: inline-flex;
|
||||
transition: inherit;
|
||||
transition-property: transform;
|
||||
transform: rotate(var(--v-icon-btn-rotate, 0deg));
|
||||
|
||||
.v-icon-btn--loading & {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
transition: 0.2s settings.$standard-easing;
|
||||
transition-property: opacity, font-size, width, height;
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
.v-icon-btn__loader {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v-icon-btn__overlay,
|
||||
.v-icon-btn__underlay {
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
|
||||
@include tools.absolute();
|
||||
}
|
||||
|
||||
.v-icon-btn__overlay {
|
||||
background-color: currentColor;
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-in-out;
|
||||
|
||||
.v-icon-btn--active:not(:hover) & {
|
||||
--v-activated-opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tools.layer('trumps') {
|
||||
@media (forced-colors: active) {
|
||||
.v-icon-btn {
|
||||
&:focus-visible {
|
||||
outline: 2px solid;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:not(&--active):hover,
|
||||
&:not(&--active):focus {
|
||||
color: highlight;
|
||||
}
|
||||
|
||||
&--active:not(&--disabled),
|
||||
&--active:not(&--disabled)[class*="bg-"] {
|
||||
outline-color: canvastext;
|
||||
background: highlight;
|
||||
color: highlighttext;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: graytext;
|
||||
}
|
||||
|
||||
&__overlay,
|
||||
&__underlay,
|
||||
.v-icon {
|
||||
forced-color-adjust: preserve-parent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VIconBtn
|
||||
$icon-btn-background: rgb(var(--v-theme-surface)) !default;
|
||||
$icon-btn-color: inherit !default;
|
||||
$icon-btn-border-color: settings.$border-color-root !default;
|
||||
$icon-btn-border-radius: map.get(settings.$rounded, 'circle') !default;
|
||||
$icon-btn-border-style: settings.$border-style-root !default;
|
||||
$icon-btn-border-thin-width: thin !default;
|
||||
$icon-btn-border-width: 0 !default;
|
||||
$icon-btn-disabled-opacity: 0.26 !default;
|
||||
$icon-btn-elevation: 1 !default;
|
||||
$icon-btn-font-size: tools.map-deep-get(settings.$typography, 'label-large', 'size') !default;
|
||||
$icon-btn-font-weight: tools.map-deep-get(settings.$typography, 'label-large', 'weight') !default;
|
||||
$icon-btn-line-height: normal !default;
|
||||
$icon-btn-height: var(--v-icon-btn-height) !default;
|
||||
$icon-btn-width: var(--v-icon-btn-width) !default;
|
||||
$icon-btn-margin-start: 8px !default;
|
||||
$icon-btn-margin-end: 8px !default;
|
||||
$icon-btn-plain-opacity: .62 !default;
|
||||
|
||||
$icon-btn-border: (
|
||||
$icon-btn-border-color,
|
||||
$icon-btn-border-style,
|
||||
$icon-btn-border-width,
|
||||
$icon-btn-border-thin-width
|
||||
) !default;
|
||||
|
||||
$icon-btn-variants: (
|
||||
$icon-btn-background,
|
||||
$icon-btn-color,
|
||||
$icon-btn-elevation,
|
||||
$icon-btn-plain-opacity,
|
||||
'v-icon-btn'
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VIconBtn } from './VIconBtn.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VIconBtn } from "./VIconBtn.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VIconBtn"],"sources":["../../../src/labs/VIconBtn/index.ts"],"sourcesContent":["export { VIconBtn } from './VIconBtn'\n"],"mappings":"SAASA,QAAQ","ignoreList":[]}
|
||||
Reference in New Issue
Block a user