routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+398
@@ -0,0 +1,398 @@
|
||||
@layer vuetify-components {
|
||||
.v-chip {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
font-weight: 400;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-chip .v-icon {
|
||||
--v-icon-size-multiplier: 0.8571428571;
|
||||
}
|
||||
.v-chip.v-chip--size-x-small {
|
||||
--v-chip-size: 0.625rem;
|
||||
--v-chip-height: 20px;
|
||||
font-size: 0.625rem;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-small .v-avatar {
|
||||
--v-avatar-height: 14px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-x-small .v-avatar {
|
||||
--v-avatar-height: 20px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-small .v-avatar--start {
|
||||
margin-inline-start: -5.6px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--start {
|
||||
margin-inline-start: -8px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-small .v-avatar--end {
|
||||
margin-inline-start: 4px;
|
||||
margin-inline-end: -5.6px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--end {
|
||||
margin-inline-end: -8px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--end + .v-chip__close {
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-small .v-icon--start,
|
||||
.v-chip.v-chip--size-x-small .v-chip__filter {
|
||||
margin-inline-start: -4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-small .v-icon--end,
|
||||
.v-chip.v-chip--size-x-small .v-chip__close {
|
||||
margin-inline-start: 4px;
|
||||
margin-inline-end: -4px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-small .v-icon--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-x-small .v-avatar--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-x-small .v-chip__append + .v-chip__close {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
.v-chip.v-chip--size-small {
|
||||
--v-chip-size: 0.75rem;
|
||||
--v-chip-height: 26px;
|
||||
font-size: 0.75rem;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.v-chip.v-chip--size-small .v-avatar {
|
||||
--v-avatar-height: 20px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-small .v-avatar {
|
||||
--v-avatar-height: 26px;
|
||||
}
|
||||
.v-chip.v-chip--size-small .v-avatar--start {
|
||||
margin-inline-start: -7px;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-small .v-avatar--start {
|
||||
margin-inline-start: -10px;
|
||||
}
|
||||
.v-chip.v-chip--size-small .v-avatar--end {
|
||||
margin-inline-start: 5px;
|
||||
margin-inline-end: -7px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-small .v-avatar--end {
|
||||
margin-inline-end: -10px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-small .v-avatar--end + .v-chip__close {
|
||||
margin-inline-start: 15px;
|
||||
}
|
||||
.v-chip.v-chip--size-small .v-icon--start,
|
||||
.v-chip.v-chip--size-small .v-chip__filter {
|
||||
margin-inline-start: -5px;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
.v-chip.v-chip--size-small .v-icon--end,
|
||||
.v-chip.v-chip--size-small .v-chip__close {
|
||||
margin-inline-start: 5px;
|
||||
margin-inline-end: -5px;
|
||||
}
|
||||
.v-chip.v-chip--size-small .v-icon--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-small .v-avatar--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-small .v-chip__append + .v-chip__close {
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
.v-chip.v-chip--size-default {
|
||||
--v-chip-size: 0.875rem;
|
||||
--v-chip-height: 32px;
|
||||
font-size: 0.875rem;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.v-chip.v-chip--size-default .v-avatar {
|
||||
--v-avatar-height: 26px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-default .v-avatar {
|
||||
--v-avatar-height: 32px;
|
||||
}
|
||||
.v-chip.v-chip--size-default .v-avatar--start {
|
||||
margin-inline-start: -8.4px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-default .v-avatar--start {
|
||||
margin-inline-start: -12px;
|
||||
}
|
||||
.v-chip.v-chip--size-default .v-avatar--end {
|
||||
margin-inline-start: 6px;
|
||||
margin-inline-end: -8.4px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-default .v-avatar--end {
|
||||
margin-inline-end: -12px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-default .v-avatar--end + .v-chip__close {
|
||||
margin-inline-start: 18px;
|
||||
}
|
||||
.v-chip.v-chip--size-default .v-icon--start,
|
||||
.v-chip.v-chip--size-default .v-chip__filter {
|
||||
margin-inline-start: -6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
.v-chip.v-chip--size-default .v-icon--end,
|
||||
.v-chip.v-chip--size-default .v-chip__close {
|
||||
margin-inline-start: 6px;
|
||||
margin-inline-end: -6px;
|
||||
}
|
||||
.v-chip.v-chip--size-default .v-icon--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-default .v-avatar--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-default .v-chip__append + .v-chip__close {
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
.v-chip.v-chip--size-large {
|
||||
--v-chip-size: 1rem;
|
||||
--v-chip-height: 38px;
|
||||
font-size: 1rem;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.v-chip.v-chip--size-large .v-avatar {
|
||||
--v-avatar-height: 32px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-large .v-avatar {
|
||||
--v-avatar-height: 38px;
|
||||
}
|
||||
.v-chip.v-chip--size-large .v-avatar--start {
|
||||
margin-inline-start: -9.8px;
|
||||
margin-inline-end: 7px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-large .v-avatar--start {
|
||||
margin-inline-start: -14px;
|
||||
}
|
||||
.v-chip.v-chip--size-large .v-avatar--end {
|
||||
margin-inline-start: 7px;
|
||||
margin-inline-end: -9.8px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-large .v-avatar--end {
|
||||
margin-inline-end: -14px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-large .v-avatar--end + .v-chip__close {
|
||||
margin-inline-start: 21px;
|
||||
}
|
||||
.v-chip.v-chip--size-large .v-icon--start,
|
||||
.v-chip.v-chip--size-large .v-chip__filter {
|
||||
margin-inline-start: -7px;
|
||||
margin-inline-end: 7px;
|
||||
}
|
||||
.v-chip.v-chip--size-large .v-icon--end,
|
||||
.v-chip.v-chip--size-large .v-chip__close {
|
||||
margin-inline-start: 7px;
|
||||
margin-inline-end: -7px;
|
||||
}
|
||||
.v-chip.v-chip--size-large .v-icon--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-large .v-avatar--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-large .v-chip__append + .v-chip__close {
|
||||
margin-inline-start: 14px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-large {
|
||||
--v-chip-size: 1.125rem;
|
||||
--v-chip-height: 44px;
|
||||
font-size: 1.125rem;
|
||||
padding: 0 17px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-large .v-avatar {
|
||||
--v-avatar-height: 38px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-x-large .v-avatar {
|
||||
--v-avatar-height: 44px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-large .v-avatar--start {
|
||||
margin-inline-start: -11.9px;
|
||||
margin-inline-end: 8.5px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--start {
|
||||
margin-inline-start: -17px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-large .v-avatar--end {
|
||||
margin-inline-start: 8.5px;
|
||||
margin-inline-end: -11.9px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--end {
|
||||
margin-inline-end: -17px;
|
||||
}
|
||||
.v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--end + .v-chip__close {
|
||||
margin-inline-start: 25.5px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-large .v-icon--start,
|
||||
.v-chip.v-chip--size-x-large .v-chip__filter {
|
||||
margin-inline-start: -8.5px;
|
||||
margin-inline-end: 8.5px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-large .v-icon--end,
|
||||
.v-chip.v-chip--size-x-large .v-chip__close {
|
||||
margin-inline-start: 8.5px;
|
||||
margin-inline-end: -8.5px;
|
||||
}
|
||||
.v-chip.v-chip--size-x-large .v-icon--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-x-large .v-avatar--end + .v-chip__close,
|
||||
.v-chip.v-chip--size-x-large .v-chip__append + .v-chip__close {
|
||||
margin-inline-start: 17px;
|
||||
}
|
||||
.v-chip.v-chip--density-default {
|
||||
height: calc(var(--v-chip-height) + 0px);
|
||||
}
|
||||
.v-chip.v-chip--density-comfortable {
|
||||
height: calc(var(--v-chip-height) + -4px);
|
||||
}
|
||||
.v-chip.v-chip--density-compact {
|
||||
height: calc(var(--v-chip-height) + -8px);
|
||||
}
|
||||
.v-chip {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-chip:hover > .v-chip__overlay {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-chip:focus-visible > .v-chip__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-chip:focus > .v-chip__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-chip--active > .v-chip__overlay, .v-chip[aria-haspopup=menu][aria-expanded=true] > .v-chip__overlay {
|
||||
opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-chip--active:hover > .v-chip__overlay, .v-chip[aria-haspopup=menu][aria-expanded=true]:hover > .v-chip__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-chip--active:focus-visible > .v-chip__overlay, .v-chip[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-chip__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-chip--active:focus > .v-chip__overlay, .v-chip[aria-haspopup=menu][aria-expanded=true]:focus > .v-chip__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-chip {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.v-chip--variant-plain, .v-chip--variant-outlined, .v-chip--variant-text, .v-chip--variant-tonal {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.v-chip--variant-plain {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.v-chip--variant-plain:focus, .v-chip--variant-plain:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-chip--variant-plain .v-chip__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-chip--variant-elevated, .v-chip--variant-flat {
|
||||
background: rgb(var(--v-theme-surface-variant));
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
.v-chip--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-chip--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-chip--variant-outlined {
|
||||
border: thin solid currentColor;
|
||||
}
|
||||
.v-chip--variant-text .v-chip__overlay {
|
||||
background: currentColor;
|
||||
}
|
||||
.v-chip--variant-tonal .v-chip__underlay {
|
||||
background: currentColor;
|
||||
opacity: var(--v-activated-opacity);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-chip .v-chip__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-chip--border {
|
||||
border-width: thin;
|
||||
}
|
||||
.v-chip--link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-chip--link, .v-chip--filter {
|
||||
user-select: none;
|
||||
}
|
||||
.v-chip--label {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-chip__content {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
.v-autocomplete__selection .v-chip__content, .v-combobox__selection .v-chip__content, .v-select__selection .v-chip__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-chip__filter,
|
||||
.v-chip__prepend,
|
||||
.v-chip__append,
|
||||
.v-chip__close {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
.v-chip__close {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
border-style: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
flex: 0 1 auto;
|
||||
font-size: 18px;
|
||||
max-height: 18px;
|
||||
max-width: 18px;
|
||||
user-select: none;
|
||||
}
|
||||
.v-chip__close .v-icon {
|
||||
font-size: inherit;
|
||||
}
|
||||
.v-chip__filter {
|
||||
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-chip__overlay {
|
||||
background-color: currentColor;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.v-chip__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-chip--disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.v-chip--label {
|
||||
border-radius: 4px;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.v-chip:not(.v-chip--variant-text, .v-chip--variant-plain) {
|
||||
border: thin solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
+982
@@ -0,0 +1,982 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
import type { RippleDirectiveBinding } from '../../directives/ripple/index.js';
|
||||
export type VChipSlots = {
|
||||
default: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
};
|
||||
label: never;
|
||||
prepend: never;
|
||||
append: never;
|
||||
close: never;
|
||||
filter: never;
|
||||
};
|
||||
export declare const makeVChipProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
value?: unknown;
|
||||
disabled?: unknown;
|
||||
selectedClass?: unknown;
|
||||
size?: unknown;
|
||||
href?: unknown;
|
||||
replace?: unknown;
|
||||
to?: unknown;
|
||||
exact?: unknown;
|
||||
activeClass?: unknown;
|
||||
appendAvatar?: unknown;
|
||||
appendIcon?: unknown;
|
||||
baseColor?: unknown;
|
||||
closable?: unknown;
|
||||
closeIcon?: unknown;
|
||||
closeLabel?: unknown;
|
||||
draggable?: unknown;
|
||||
filter?: unknown;
|
||||
filterIcon?: unknown;
|
||||
label?: unknown;
|
||||
link?: unknown;
|
||||
pill?: unknown;
|
||||
prependAvatar?: unknown;
|
||||
prependIcon?: unknown;
|
||||
ripple?: unknown;
|
||||
text?: unknown;
|
||||
modelValue?: unknown;
|
||||
onClick?: unknown;
|
||||
onClickOnce?: 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>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
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<import("../../composables/variant.js").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<import("../../composables/variant.js").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">;
|
||||
};
|
||||
value: unknown extends Defaults["value"] ? null : {
|
||||
type: PropType<unknown extends Defaults["value"] ? any : any>;
|
||||
default: unknown extends Defaults["value"] ? any : any;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
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>;
|
||||
};
|
||||
href: unknown extends Defaults["href"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["href"] ? string : string | Defaults["href"]>;
|
||||
default: unknown extends Defaults["href"] ? string : string | Defaults["href"];
|
||||
};
|
||||
replace: unknown extends Defaults["replace"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"]>;
|
||||
default: unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"];
|
||||
};
|
||||
to: unknown extends Defaults["to"] ? PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric> : {
|
||||
type: PropType<unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | Defaults["to"]>;
|
||||
default: unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : Defaults["to"] | NonNullable<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
};
|
||||
exact: unknown extends Defaults["exact"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"]>;
|
||||
default: unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"];
|
||||
};
|
||||
activeClass: unknown extends Defaults["activeClass"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"]>;
|
||||
default: unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"];
|
||||
};
|
||||
appendAvatar: unknown extends Defaults["appendAvatar"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"]>;
|
||||
default: unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"];
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
|
||||
default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
|
||||
};
|
||||
closable: unknown extends Defaults["closable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["closable"] ? boolean : boolean | Defaults["closable"]>;
|
||||
default: unknown extends Defaults["closable"] ? boolean : boolean | Defaults["closable"];
|
||||
};
|
||||
closeIcon: unknown extends Defaults["closeIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["closeIcon"] ? IconValue : Defaults["closeIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["closeIcon"] ? IconValue : Defaults["closeIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
closeLabel: unknown extends Defaults["closeLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["closeLabel"] ? string : string | Defaults["closeLabel"]>;
|
||||
default: unknown extends Defaults["closeLabel"] ? string : string | Defaults["closeLabel"];
|
||||
};
|
||||
draggable: unknown extends Defaults["draggable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["draggable"] ? boolean : boolean | Defaults["draggable"]>;
|
||||
default: unknown extends Defaults["draggable"] ? boolean : boolean | Defaults["draggable"];
|
||||
};
|
||||
filter: unknown extends Defaults["filter"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["filter"] ? boolean : boolean | Defaults["filter"]>;
|
||||
default: unknown extends Defaults["filter"] ? boolean : boolean | Defaults["filter"];
|
||||
};
|
||||
filterIcon: unknown extends Defaults["filterIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["filterIcon"] ? IconValue : Defaults["filterIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["filterIcon"] ? IconValue : Defaults["filterIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
label: unknown extends Defaults["label"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["label"] ? boolean : boolean | Defaults["label"]>;
|
||||
default: unknown extends Defaults["label"] ? boolean : boolean | Defaults["label"];
|
||||
};
|
||||
link: unknown extends Defaults["link"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["link"] ? boolean : boolean | Defaults["link"]>;
|
||||
default: unknown extends Defaults["link"] ? boolean : boolean | Defaults["link"];
|
||||
};
|
||||
pill: unknown extends Defaults["pill"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["pill"] ? boolean : boolean | Defaults["pill"]>;
|
||||
default: unknown extends Defaults["pill"] ? boolean : boolean | Defaults["pill"];
|
||||
};
|
||||
prependAvatar: unknown extends Defaults["prependAvatar"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"]>;
|
||||
default: unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"];
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | Defaults["ripple"] | undefined>;
|
||||
default: unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : Defaults["ripple"] | NonNullable<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
|
||||
};
|
||||
onClick: unknown extends Defaults["onClick"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick"]>;
|
||||
default: unknown extends Defaults["onClick"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick"];
|
||||
};
|
||||
onClickOnce: unknown extends Defaults["onClickOnce"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClickOnce"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClickOnce"]>;
|
||||
default: unknown extends Defaults["onClickOnce"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClickOnce"];
|
||||
};
|
||||
};
|
||||
export declare const VChip: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
draggable: boolean;
|
||||
filter: boolean;
|
||||
filterIcon: IconValue;
|
||||
label: boolean;
|
||||
pill: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeClass?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
label?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: (() => import("vue").VNodeChild) | undefined;
|
||||
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'click:close': (e: MouseEvent) => true;
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
'group:selected': (val: {
|
||||
value: boolean;
|
||||
}) => true;
|
||||
click: (e: MouseEvent | KeyboardEvent) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
draggable: boolean;
|
||||
filter: boolean;
|
||||
filterIcon: IconValue;
|
||||
label: boolean;
|
||||
link: boolean;
|
||||
pill: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
modelValue: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
close: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
filter: () => 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;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
draggable: boolean;
|
||||
filter: boolean;
|
||||
filterIcon: IconValue;
|
||||
label: boolean;
|
||||
pill: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeClass?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
label?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: (() => import("vue").VNodeChild) | undefined;
|
||||
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
draggable: boolean;
|
||||
filter: boolean;
|
||||
filterIcon: IconValue;
|
||||
label: boolean;
|
||||
link: boolean;
|
||||
pill: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
modelValue: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
draggable: boolean;
|
||||
filter: boolean;
|
||||
filterIcon: IconValue;
|
||||
label: boolean;
|
||||
pill: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeClass?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
label?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: (() => import("vue").VNodeChild) | undefined;
|
||||
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'click:close': (e: MouseEvent) => true;
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
'group:selected': (val: {
|
||||
value: boolean;
|
||||
}) => true;
|
||||
click: (e: MouseEvent | KeyboardEvent) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
draggable: boolean;
|
||||
filter: boolean;
|
||||
filterIcon: IconValue;
|
||||
label: boolean;
|
||||
link: boolean;
|
||||
pill: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
modelValue: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
close: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
filter: () => 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)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
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<import("../../composables/variant.js").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">;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
activeClass: StringConstructor;
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: PropType<IconValue>;
|
||||
baseColor: StringConstructor;
|
||||
closable: BooleanConstructor;
|
||||
closeIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
closeLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
draggable: BooleanConstructor;
|
||||
filter: BooleanConstructor;
|
||||
filterIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
label: BooleanConstructor;
|
||||
link: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
pill: BooleanConstructor;
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: PropType<IconValue>;
|
||||
ripple: {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
onClick: PropType<(args_0: MouseEvent) => void>;
|
||||
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
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<import("../../composables/variant.js").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">;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
activeClass: StringConstructor;
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: PropType<IconValue>;
|
||||
baseColor: StringConstructor;
|
||||
closable: BooleanConstructor;
|
||||
closeIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
closeLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
draggable: BooleanConstructor;
|
||||
filter: BooleanConstructor;
|
||||
filterIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
label: BooleanConstructor;
|
||||
link: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
pill: BooleanConstructor;
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: PropType<IconValue>;
|
||||
ripple: {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
onClick: PropType<(args_0: MouseEvent) => void>;
|
||||
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||
}>>;
|
||||
export type VChip = InstanceType<typeof VChip>;
|
||||
+295
@@ -0,0 +1,295 @@
|
||||
import { createVNode as _createVNode, vShow as _vShow, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Fragment as _Fragment, mergeProps as _mergeProps } from "vue";
|
||||
/* eslint-disable complexity */
|
||||
// Styles
|
||||
import "./VChip.css";
|
||||
|
||||
// Components
|
||||
import { VExpandXTransition } from "../transitions/index.js";
|
||||
import { VAvatar } from "../VAvatar/index.js";
|
||||
import { VChipGroupSymbol } from "../VChipGroup/VChipGroup.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { VSlideGroupSymbol } from "../VSlideGroup/VSlideGroup.js"; // Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { makeGroupItemProps, useGroupItem } from "../../composables/group.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeRouterProps, useLink } from "../../composables/router.js";
|
||||
import { makeSizeProps, useSize } from "../../composables/size.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Directives
|
||||
import vRipple from "../../directives/ripple/index.js"; // Utilities
|
||||
import { computed, toDisplayString, toRef, watch } from 'vue';
|
||||
import { EventProp, genericComponent, propsFactory } from "../../util/index.js"; // Types
|
||||
export const makeVChipProps = propsFactory({
|
||||
activeClass: String,
|
||||
appendAvatar: String,
|
||||
appendIcon: IconValue,
|
||||
baseColor: String,
|
||||
closable: Boolean,
|
||||
closeIcon: {
|
||||
type: IconValue,
|
||||
default: '$delete'
|
||||
},
|
||||
closeLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.close'
|
||||
},
|
||||
draggable: Boolean,
|
||||
filter: Boolean,
|
||||
filterIcon: {
|
||||
type: IconValue,
|
||||
default: '$complete'
|
||||
},
|
||||
label: Boolean,
|
||||
link: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
pill: Boolean,
|
||||
prependAvatar: String,
|
||||
prependIcon: IconValue,
|
||||
ripple: {
|
||||
type: [Boolean, Object],
|
||||
default: true
|
||||
},
|
||||
text: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
onClick: EventProp(),
|
||||
onClickOnce: EventProp(),
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeElevationProps(),
|
||||
...makeGroupItemProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeRouterProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps({
|
||||
tag: 'span'
|
||||
}),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'tonal'
|
||||
})
|
||||
}, 'VChip');
|
||||
export const VChip = genericComponent()({
|
||||
name: 'VChip',
|
||||
directives: {
|
||||
vRipple
|
||||
},
|
||||
props: makeVChipProps(),
|
||||
emits: {
|
||||
'click:close': e => true,
|
||||
'update:modelValue': value => true,
|
||||
'group:selected': val => true,
|
||||
click: e => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
sizeClasses
|
||||
} = useSize(props);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const isActive = useProxiedModel(props, 'modelValue');
|
||||
const group = useGroupItem(props, VChipGroupSymbol, false);
|
||||
const slideGroup = useGroupItem(props, VSlideGroupSymbol, false);
|
||||
const link = useLink(props, attrs);
|
||||
const isLink = toRef(() => props.link !== false && link.isLink.value);
|
||||
const isClickable = computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
|
||||
const closeProps = toRef(() => ({
|
||||
'aria-label': t(props.closeLabel),
|
||||
disabled: props.disabled,
|
||||
onClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
isActive.value = false;
|
||||
emit('click:close', e);
|
||||
}
|
||||
}));
|
||||
watch(isActive, val => {
|
||||
if (val) {
|
||||
group?.register();
|
||||
slideGroup?.register();
|
||||
} else {
|
||||
group?.unregister();
|
||||
slideGroup?.unregister();
|
||||
}
|
||||
});
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(() => {
|
||||
const showColor = !group || group.isSelected.value;
|
||||
return {
|
||||
color: showColor ? props.color ?? props.baseColor : props.baseColor,
|
||||
variant: props.variant
|
||||
};
|
||||
});
|
||||
function onClick(e) {
|
||||
emit('click', e);
|
||||
if (!isClickable.value) return;
|
||||
link.navigate.value?.(e);
|
||||
group?.toggle();
|
||||
}
|
||||
function onKeyDown(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
const Tag = link.isLink.value ? 'a' : props.tag;
|
||||
const hasAppendMedia = !!(props.appendIcon || props.appendAvatar);
|
||||
const hasAppend = !!(hasAppendMedia || slots.append);
|
||||
const hasClose = !!(slots.close || props.closable);
|
||||
const hasFilter = !!(slots.filter || props.filter) && group;
|
||||
const hasPrependMedia = !!(props.prependIcon || props.prependAvatar);
|
||||
const hasPrepend = !!(hasPrependMedia || slots.prepend);
|
||||
return isActive.value && _withDirectives(_createVNode(Tag, _mergeProps(link.linkProps, {
|
||||
"class": ['v-chip', {
|
||||
'v-chip--disabled': props.disabled,
|
||||
'v-chip--label': props.label,
|
||||
'v-chip--link': isClickable.value,
|
||||
'v-chip--filter': hasFilter,
|
||||
'v-chip--pill': props.pill,
|
||||
[`${props.activeClass}`]: props.activeClass && link.isActive?.value
|
||||
}, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
|
||||
"style": [colorStyles.value, props.style],
|
||||
"disabled": props.disabled || undefined,
|
||||
"draggable": props.draggable,
|
||||
"tabindex": isClickable.value ? 0 : undefined,
|
||||
"onClick": onClick,
|
||||
"onKeydown": isClickable.value && !isLink.value && onKeyDown
|
||||
}), {
|
||||
default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && _createVNode(VExpandXTransition, {
|
||||
"key": "filter"
|
||||
}, {
|
||||
default: () => [_withDirectives(_createElementVNode("div", {
|
||||
"class": "v-chip__filter"
|
||||
}, [!slots.filter ? _createVNode(VIcon, {
|
||||
"key": "filter-icon",
|
||||
"icon": props.filterIcon
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "filter-defaults",
|
||||
"disabled": !props.filterIcon,
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
icon: props.filterIcon
|
||||
}
|
||||
}
|
||||
}, slots.filter)]), [[_vShow, group.isSelected.value]])]
|
||||
}), hasPrepend && _createElementVNode("div", {
|
||||
"key": "prepend",
|
||||
"class": "v-chip__prepend"
|
||||
}, [!slots.prepend ? _createElementVNode(_Fragment, null, [props.prependIcon && _createVNode(VIcon, {
|
||||
"key": "prepend-icon",
|
||||
"icon": props.prependIcon,
|
||||
"start": true
|
||||
}, null), props.prependAvatar && _createVNode(VAvatar, {
|
||||
"key": "prepend-avatar",
|
||||
"image": props.prependAvatar,
|
||||
"start": true
|
||||
}, null)]) : _createVNode(VDefaultsProvider, {
|
||||
"key": "prepend-defaults",
|
||||
"disabled": !hasPrependMedia,
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
image: props.prependAvatar,
|
||||
start: true
|
||||
},
|
||||
VIcon: {
|
||||
icon: props.prependIcon,
|
||||
start: true
|
||||
}
|
||||
}
|
||||
}, slots.prepend)]), _createElementVNode("div", {
|
||||
"class": "v-chip__content",
|
||||
"data-no-activator": ""
|
||||
}, [slots.default?.({
|
||||
isSelected: group?.isSelected.value,
|
||||
selectedClass: group?.selectedClass.value,
|
||||
select: group?.select,
|
||||
toggle: group?.toggle,
|
||||
value: group?.value.value,
|
||||
disabled: props.disabled
|
||||
}) ?? toDisplayString(props.text)]), hasAppend && _createElementVNode("div", {
|
||||
"key": "append",
|
||||
"class": "v-chip__append"
|
||||
}, [!slots.append ? _createElementVNode(_Fragment, null, [props.appendIcon && _createVNode(VIcon, {
|
||||
"key": "append-icon",
|
||||
"end": true,
|
||||
"icon": props.appendIcon
|
||||
}, null), props.appendAvatar && _createVNode(VAvatar, {
|
||||
"key": "append-avatar",
|
||||
"end": true,
|
||||
"image": props.appendAvatar
|
||||
}, null)]) : _createVNode(VDefaultsProvider, {
|
||||
"key": "append-defaults",
|
||||
"disabled": !hasAppendMedia,
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
end: true,
|
||||
image: props.appendAvatar
|
||||
},
|
||||
VIcon: {
|
||||
end: true,
|
||||
icon: props.appendIcon
|
||||
}
|
||||
}
|
||||
}, slots.append)]), hasClose && _createElementVNode("button", _mergeProps({
|
||||
"key": "close",
|
||||
"class": "v-chip__close",
|
||||
"type": "button",
|
||||
"data-testid": "close-chip"
|
||||
}, closeProps.value), [!slots.close ? _createVNode(VIcon, {
|
||||
"key": "close-icon",
|
||||
"icon": props.closeIcon,
|
||||
"size": "x-small"
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "close-defaults",
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
icon: props.closeIcon,
|
||||
size: 'x-small'
|
||||
}
|
||||
}
|
||||
}, slots.close)])]
|
||||
}), [[vRipple, isClickable.value && props.ripple, null]]);
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VChip.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+101
@@ -0,0 +1,101 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
@use './mixins' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-chip
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
font-weight: $chip-font-weight
|
||||
max-width: $chip-max-width
|
||||
min-width: 0
|
||||
overflow: hidden
|
||||
position: relative
|
||||
text-decoration: none
|
||||
white-space: $chip-white-space
|
||||
vertical-align: middle
|
||||
|
||||
.v-icon
|
||||
--v-icon-size-multiplier: #{$chip-icon-size-multiplier}
|
||||
|
||||
@at-root
|
||||
@include chip-sizes()
|
||||
@include chip-density('height', $chip-density)
|
||||
|
||||
@include tools.border($chip-border...)
|
||||
@include tools.states('.v-chip__overlay')
|
||||
@include tools.rounded($chip-border-radius)
|
||||
@include tools.variant($chip-variants...)
|
||||
|
||||
&--border
|
||||
border-width: $chip-border-thin-width
|
||||
|
||||
&--link
|
||||
cursor: pointer
|
||||
|
||||
&--link,
|
||||
&--filter
|
||||
user-select: none
|
||||
|
||||
&--label
|
||||
@include tools.rounded($chip-label-border-radius)
|
||||
|
||||
// Elements
|
||||
.v-chip__content
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
|
||||
.v-autocomplete__selection &,
|
||||
.v-combobox__selection &,
|
||||
.v-select__selection &
|
||||
overflow: hidden
|
||||
|
||||
.v-chip__filter,
|
||||
.v-chip__prepend,
|
||||
.v-chip__append,
|
||||
.v-chip__close
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
|
||||
.v-chip__close
|
||||
padding: 0
|
||||
margin: 0
|
||||
font: inherit
|
||||
overflow: visible
|
||||
text-transform: none
|
||||
background-color: transparent
|
||||
border-style: none
|
||||
color: inherit
|
||||
cursor: pointer
|
||||
flex: 0 1 auto
|
||||
font-size: $chip-close-size
|
||||
max-height: $chip-close-size
|
||||
max-width: $chip-close-size
|
||||
user-select: none
|
||||
|
||||
.v-icon
|
||||
font-size: inherit
|
||||
|
||||
.v-chip__filter
|
||||
transition: $chip-filter-transition
|
||||
|
||||
.v-chip__overlay
|
||||
background-color: currentColor
|
||||
border-radius: inherit
|
||||
pointer-events: none
|
||||
opacity: 0
|
||||
transition: opacity .2s ease-in-out
|
||||
@include tools.absolute()
|
||||
|
||||
.v-chip--disabled
|
||||
opacity: $chip-disabled-opacity
|
||||
pointer-events: none
|
||||
user-select: none
|
||||
|
||||
.v-chip--label
|
||||
border-radius: $chip-label-border-radius
|
||||
|
||||
@media (forced-colors: active)
|
||||
.v-chip
|
||||
&:not(&--variant-text, &--variant-plain)
|
||||
border: thin solid
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
@use 'sass:meta';
|
||||
@use 'sass:selector';
|
||||
@use '../../styles/settings';
|
||||
@use './variables' as *;
|
||||
|
||||
@mixin chip-sizes {
|
||||
@each $sizeName, $multiplier in settings.$size-scales {
|
||||
$size: map.get($chip-sizes, "font-size") + math.div(2 * $multiplier, 16);
|
||||
$height: map.get($chip-sizes, "height") + (6 * $multiplier);
|
||||
$padding: math.round(math.div($height, $chip-padding-ratio));
|
||||
|
||||
.v-chip.v-chip--size-#{$sizeName} {
|
||||
--v-chip-size: #{$size};
|
||||
--v-chip-height: #{$height};
|
||||
font-size: $size;
|
||||
padding: 0 $padding;
|
||||
|
||||
.v-avatar {
|
||||
--v-avatar-height: #{$height - 6};
|
||||
|
||||
@at-root #{selector.append('.v-chip--pill', &)} {
|
||||
--v-avatar-height: #{$height};
|
||||
}
|
||||
}
|
||||
|
||||
.v-avatar--start {
|
||||
margin-inline-start: -$padding * .7;
|
||||
margin-inline-end: $padding * .5;
|
||||
|
||||
@at-root #{selector.append('.v-chip--pill', &)} {
|
||||
margin-inline-start: -$padding;
|
||||
}
|
||||
}
|
||||
|
||||
.v-avatar--end {
|
||||
margin-inline-start: $padding * .5;
|
||||
margin-inline-end: -$padding * .7;
|
||||
|
||||
@at-root #{selector.append('.v-chip--pill', &)} {
|
||||
margin-inline-end: -$padding;
|
||||
}
|
||||
|
||||
+ .v-chip__close {
|
||||
@at-root #{selector.append('.v-chip--pill', &)} {
|
||||
margin-inline-start: $padding * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-icon--start,
|
||||
.v-chip__filter {
|
||||
margin-inline-start: -$padding * .5;
|
||||
margin-inline-end: $padding * .5;
|
||||
}
|
||||
|
||||
.v-icon--end,
|
||||
.v-chip__close {
|
||||
margin-inline-start: $padding * .5;
|
||||
margin-inline-end: -$padding * .5;
|
||||
}
|
||||
|
||||
.v-icon--end,
|
||||
.v-avatar--end,
|
||||
.v-chip__append {
|
||||
+ .v-chip__close {
|
||||
margin-inline-start: $padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-density($properties, $densities) {
|
||||
@each $density, $multiplier in $densities {
|
||||
$value: calc(var(--v-chip-height) + #{$multiplier * settings.$spacer});
|
||||
|
||||
&.v-chip--density-#{$density} {
|
||||
@if meta.type-of($properties) == "list" {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value;
|
||||
}
|
||||
} @else {
|
||||
#{$properties}: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
@use 'sass:math';
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// Defaults
|
||||
$chip-background: rgb(var(--v-theme-surface-variant)) !default;
|
||||
$chip-border-color: settings.$border-color-root !default;
|
||||
$chip-border-radius: map.get(settings.$rounded, "pill") !default;
|
||||
$chip-border-style: settings.$border-style-root !default;
|
||||
$chip-border-thin-width: thin !default;
|
||||
$chip-border-width: 0 !default;
|
||||
$chip-close-size: 18px !default;
|
||||
$chip-color: rgb(var(--v-theme-on-surface-variant)) !default;
|
||||
$chip-density: ("default": 0, "comfortable": -1, "compact": -2) !default;
|
||||
$chip-disabled-opacity: 0.3 !default;
|
||||
$chip-elevation: 1 !default;
|
||||
$chip-font-size: tools.map-deep-get(settings.$typography, "label-large", "size") !default;
|
||||
$chip-font-weight: 400 !default;
|
||||
$chip-height: 32px !default;
|
||||
$chip-icon-size-multiplier: calc(18/21) !default;
|
||||
$chip-label-border-radius: settings.$border-radius-root !default;
|
||||
$chip-max-width: 100% !default;
|
||||
$chip-overflow: hidden !default;
|
||||
$chip-padding-ratio: 2 + math.div(2, 3) !default;
|
||||
$chip-plain-opacity: .62 !default;
|
||||
$chip-filter-transition: .15s settings.$standard-easing !default;
|
||||
$chip-white-space: nowrap !default;
|
||||
|
||||
$chip-sizes: (
|
||||
"height": $chip-height,
|
||||
"font-size": $chip-font-size,
|
||||
) !default;
|
||||
|
||||
$chip-border: (
|
||||
$chip-border-color,
|
||||
$chip-border-style,
|
||||
$chip-border-width
|
||||
) !default;
|
||||
|
||||
$chip-variants: (
|
||||
$chip-background,
|
||||
$chip-color,
|
||||
$chip-elevation,
|
||||
$chip-plain-opacity,
|
||||
'v-chip'
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VChip } from './VChip.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VChip } from "./VChip.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VChip"],"sources":["../../../src/components/VChip/index.ts"],"sourcesContent":["export { VChip } from './VChip'\n"],"mappings":"SAASA,KAAK","ignoreList":[]}
|
||||
Reference in New Issue
Block a user