@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VChip/VChip.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 @use './mixins' as *
@@ -8,8 +7,11 @@
   cursor: default
   display: inline-flex
   font-weight: $chip-font-weight
+  max-width: $chip-max-width
+  overflow: hidden
   position: relative
   text-decoration: none
+  white-space: $chip-white-space
   vertical-align: middle
 
   @at-root
@@ -26,6 +28,9 @@
   &--link
     cursor: pointer
 
+  &--filter
+    user-select: none
+
   &--label
     @include tools.rounded($chip-label-border-radius)
 
@@ -48,6 +53,9 @@
   .v-icon
     font-size: inherit
 
+.v-chip__filter
+  transition: $chip-filter-transition
+
 .v-chip__overlay
   @include tools.absolute()
   background-color: currentColor

package/lib/components/VChip/_mixins.scss

@@ -11,24 +11,35 @@
     $height: map.get($chip-sizes, "height") + (6 * $multiplier);
     $padding: math.round(math.div($height, $chip-padding-ratio));
 
-    .v-chip--size-#{$sizeName} {
+    .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 - 8};
+        --v-avatar-height: #{$height - 6};
 
         @at-root #{selector.append('.v-chip--pill', &)} {
           --v-avatar-height: #{$height};
         }
       }
 
+      .v-chip__filter,
       .v-chip__prepend,
-      .v-chip__filter {
-        margin-inline-start: -$padding * .5;
+      > .v-avatar--start,
+      > .v-icon--start {
         margin-inline-end: $padding * .5;
+      }
+
+      .v-chip__filter,
+      .v-chip__prepend,
+      .v-icon--start {
+        margin-inline-start: -$padding * .5;
+      }
+
+      .v-avatar--start {
+        margin-inline-start: -$padding * .7;
 
         @at-root #{selector.append('.v-chip--pill', &)} {
           margin-inline-start: -$padding;
@@ -36,12 +47,21 @@
       }
 
       .v-chip__append,
-      .v-chip__close {
-        margin-inline-end: -$padding * .5;
+      .v-chip__close,
+      > .v-avatar--end,
+      > .v-icon--end {
         margin-inline-start: $padding * .5;
+        margin-inline-end: -$padding * .5;
+      }
 
+      .v-avatar--end,
+      .v-icon--end {
         @at-root #{selector.append('.v-chip--pill', &)} {
           margin-inline-end: -$padding;
+
+          + .v-chip__close {
+            margin-inline-start: $padding;
+          }
         }
       }
     }

package/lib/components/VChip/_variables.scss

@@ -4,16 +4,12 @@
 @use '../../styles/tools';
 
 // Defaults
-$chip-append-margin-inline-end: 0 !default;
-$chip-append-margin-inline-start: 8px !default;
 $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-margin-inline-end: -4px !default;
-$chip-close-margin-inline-start: 8px !default;
 $chip-close-size: 18px !default;
 $chip-color: rgb(var(--v-theme-on-surface-variant)) !default;
 $chip-density: ("default": 0, "comfortable": -2, "compact": -3) !default;
@@ -24,9 +20,12 @@ $chip-font-weight: 400 !default;
 $chip-height: 32px !default;
 $chip-icon-font-size: 1.25rem !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: 0.26 !default;
-$chip-rounded-border-radius: settings.$border-radius-root !default;
+$chip-filter-transition: .15s settings.$standard-easing !default;
+$chip-white-space: nowrap !default;
 
 $chip-sizes: (
   "height": $chip-height,

package/lib/components/VChip/index.d.ts

@@ -0,0 +1,195 @@
+import * as vue_router from 'vue-router';
+import * as vue from 'vue';
+import { JSXComponent, PropType } from 'vue';
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VChip: vue.DefineComponent<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    href: StringConstructor;
+    replace: BooleanConstructor;
+    to: vue.PropType<vue_router.RouteLocationRaw>;
+    exact: BooleanConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    activeClass: StringConstructor;
+    appendAvatar: StringConstructor;
+    appendIcon: vue.PropType<IconValue>;
+    closable: BooleanConstructor;
+    closeIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    draggable: BooleanConstructor;
+    filter: BooleanConstructor;
+    filterIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: BooleanConstructor;
+    link: BooleanConstructor;
+    pill: BooleanConstructor;
+    prependAvatar: StringConstructor;
+    prependIcon: vue.PropType<IconValue>;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => false | JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'click:close': (e: Event) => true;
+    'update:active': (value: boolean) => true;
+    'update:modelValue': (value: boolean) => true;
+    'group:selected': (val: {
+        value: boolean;
+    }) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    href: StringConstructor;
+    replace: BooleanConstructor;
+    to: vue.PropType<vue_router.RouteLocationRaw>;
+    exact: BooleanConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    value: null;
+    disabled: BooleanConstructor;
+    selectedClass: StringConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    activeClass: StringConstructor;
+    appendAvatar: StringConstructor;
+    appendIcon: vue.PropType<IconValue>;
+    closable: BooleanConstructor;
+    closeIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    draggable: BooleanConstructor;
+    filter: BooleanConstructor;
+    filterIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: BooleanConstructor;
+    link: BooleanConstructor;
+    pill: BooleanConstructor;
+    prependAvatar: StringConstructor;
+    prependIcon: vue.PropType<IconValue>;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onGroup:selected"?: ((val: {
+        value: boolean;
+    }) => any) | undefined;
+    "onClick:close"?: ((e: Event) => any) | undefined;
+    "onUpdate:active"?: ((value: boolean) => any) | undefined;
+}, {
+    replace: boolean;
+    link: boolean;
+    filter: boolean;
+    exact: boolean;
+    label: boolean;
+    draggable: boolean;
+    disabled: boolean;
+    size: string | number;
+    tag: string;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    modelValue: boolean;
+    ripple: boolean;
+    closable: boolean;
+    closeIcon: IconValue;
+    closeLabel: string;
+    filterIcon: string;
+    pill: boolean;
+}>;
+declare type VChip = InstanceType<typeof VChip>;
+
+export { VChip };

package/lib/components/VChip/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VChip/index.ts"],"names":["VChip"],"mappings":"SAASA,K","sourcesContent":["export { VChip } from './VChip'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VChip"],"sources":["../../../src/components/VChip/index.ts"],"sourcesContent":["export { VChip } from './VChip'\n"],"mappings":"SAASA,K"}

package/lib/components/VChipGroup/VChipGroup.mjs

@@ -8,7 +8,7 @@ import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { makeVariantProps } from "../../composables/variant.mjs";
 import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
-import { deepEqual, defineComponent } from "../../util/index.mjs";
+import { deepEqual, defineComponent, useRender } from "../../util/index.mjs";
 import { toRef } from 'vue'; // Types
 
 export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
@@ -27,7 +27,7 @@ export const VChipGroup = defineComponent({
     ...makeTagProps(),
     ...makeThemeProps(),
     ...makeVariantProps({
-      variant: 'contained-text'
+      variant: 'tonal'
     })
   },
   emits: {
@@ -55,7 +55,7 @@ export const VChipGroup = defineComponent({
         variant: toRef(props, 'variant')
       }
     });
-    return () => {
+    useRender(() => {
       var _slots$default;
 
       return _createVNode(props.tag, {
@@ -71,7 +71,8 @@ export const VChipGroup = defineComponent({
           selected: selected.value
         })]
       });
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VChipGroup/VChipGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VChipGroup/VChipGroup.tsx"],"names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","deepEqual","defineComponent","toRef","VChipGroupSymbol","Symbol","for","VChipGroup","name","props","column","Boolean","filter","valueComparator","type","Function","default","selectedClass","variant","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","VChip","color"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y;SAChBC,gB;SACAC,e,0CAET;;SACSC,S,EAAWC,e;AACpB,SAASC,KAAT,QAAsB,KAAtB,C,CAEA;;AAGA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,OAAO,MAAMC,UAAU,GAAGL,eAAe,CAAC;AACxCM,EAAAA,IAAI,EAAE,YADkC;AAGxCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAEC,OADH;AAELC,IAAAA,MAAM,EAAED,OAFH;AAGLE,IAAAA,eAAe,EAAE;AACfC,MAAAA,IAAI,EAAEC,QADS;AAEfC,MAAAA,OAAO,EAAEf;AAFM,KAHZ;AAQL,OAAGP,cAAc,CAAC;AAAEuB,MAAAA,aAAa,EAAE;AAAjB,KAAD,CARZ;AASL,OAAGrB,YAAY,EATV;AAUL,OAAGC,cAAc,EAVZ;AAWL,OAAGE,gBAAgB,CAAC;AAAEmB,MAAAA,OAAO,EAAE;AAAX,KAAD;AAXd,GAHiC;AAiBxCC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAgB;AADhC,GAjBiC;;AAqBxCC,EAAAA,KAAK,CAAEZ,KAAF,QAAoB;AAAA,QAAX;AAAEa,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBzB,YAAY,CAACW,KAAD,CAArC;AACA,UAAM;AAAEe,MAAAA,UAAF;AAAcC,MAAAA,MAAd;AAAsBC,MAAAA,IAAtB;AAA4BC,MAAAA,IAA5B;AAAkCC,MAAAA;AAAlC,QAA+CjC,QAAQ,CAACc,KAAD,EAAQL,gBAAR,CAA7D;AAEAJ,IAAAA,eAAe,CAAC;AACd6B,MAAAA,KAAK,EAAE;AACLC,QAAAA,KAAK,EAAE3B,KAAK,CAACM,KAAD,EAAQ,OAAR,CADP;AAELG,QAAAA,MAAM,EAAET,KAAK,CAACM,KAAD,EAAQ,QAAR,CAFR;AAGLS,QAAAA,OAAO,EAAEf,KAAK,CAACM,KAAD,EAAQ,SAAR;AAHT;AADO,KAAD,CAAf;AAQA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,cADK,EAEL;AACE,kCAAwBA,KAAK,CAACC;AADhC,SAFK,EAKLa,YAAY,CAACH,KALR;AAFJ;AAAA,0CAUDE,KAAK,CAACN,OAVL,qBAUD,oBAAAM,KAAK,EAAW;AAChBE,UAAAA,UADgB;AAEhBC,UAAAA,MAFgB;AAGhBC,UAAAA,IAHgB;AAIhBC,UAAAA,IAJgB;AAKhBC,UAAAA,QAAQ,EAAEA,QAAQ,CAACR;AALH,SAAX,CAVJ;AAAA;AAAA,KAAP;AAmBD;;AApDuC,CAAD,CAAlC","sourcesContent":["// Styles\nimport './VChipGroup.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { deepEqual, defineComponent } from '@/util'\nimport { toRef } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group')\n\nexport const VChipGroup = defineComponent({\n  name: 'VChipGroup',\n\n  props: {\n    column: Boolean,\n    filter: Boolean,\n    valueComparator: {\n      type: Function as PropType<typeof deepEqual>,\n      default: deepEqual,\n    },\n\n    ...makeGroupProps({ selectedClass: 'v-chip--selected' }),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'contained-text' } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isSelected, select, next, prev, selected } = useGroup(props, VChipGroupSymbol)\n\n    provideDefaults({\n      VChip: {\n        color: toRef(props, 'color'),\n        filter: toRef(props, 'filter'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    return () => (\n      <props.tag\n        class={[\n          'v-chip-group',\n          {\n            'v-chip-group--column': props.column,\n          },\n          themeClasses.value,\n        ]}\n      >\n        { slots.default?.({\n          isSelected,\n          select,\n          next,\n          prev,\n          selected: selected.value,\n        }) }\n      </props.tag>\n    )\n  },\n})\n\nexport type VChipGroup = InstanceType<typeof VChipGroup>\n"],"file":"VChipGroup.mjs"}
+{"version":3,"file":"VChipGroup.mjs","names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","deepEqual","defineComponent","useRender","toRef","VChipGroupSymbol","Symbol","for","VChipGroup","name","props","column","Boolean","filter","valueComparator","type","Function","default","selectedClass","variant","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","VChip","color"],"sources":["../../../src/components/VChipGroup/VChipGroup.tsx"],"sourcesContent":["// Styles\nimport './VChipGroup.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { deepEqual, defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group')\n\nexport const VChipGroup = defineComponent({\n  name: 'VChipGroup',\n\n  props: {\n    column: Boolean,\n    filter: Boolean,\n    valueComparator: {\n      type: Function as PropType<typeof deepEqual>,\n      default: deepEqual,\n    },\n\n    ...makeGroupProps({ selectedClass: 'v-chip--selected' }),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'tonal' } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isSelected, select, next, prev, selected } = useGroup(props, VChipGroupSymbol)\n\n    provideDefaults({\n      VChip: {\n        color: toRef(props, 'color'),\n        filter: toRef(props, 'filter'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-chip-group',\n          {\n            'v-chip-group--column': props.column,\n          },\n          themeClasses.value,\n        ]}\n      >\n        { slots.default?.({\n          isSelected,\n          select,\n          next,\n          prev,\n          selected: selected.value,\n        }) }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VChipGroup = InstanceType<typeof VChipGroup>\n"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y;SAChBC,gB;SACAC,e,0CAET;;SACSC,S,EAAWC,e,EAAiBC,S;AACrC,SAASC,KAAT,QAAsB,KAAtB,C,CAEA;;AAGA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,OAAO,MAAMC,UAAU,GAAGN,eAAe,CAAC;EACxCO,IAAI,EAAE,YADkC;EAGxCC,KAAK,EAAE;IACLC,MAAM,EAAEC,OADH;IAELC,MAAM,EAAED,OAFH;IAGLE,eAAe,EAAE;MACfC,IAAI,EAAEC,QADS;MAEfC,OAAO,EAAEhB;IAFM,CAHZ;IAQL,GAAGP,cAAc,CAAC;MAAEwB,aAAa,EAAE;IAAjB,CAAD,CARZ;IASL,GAAGtB,YAAY,EATV;IAUL,GAAGC,cAAc,EAVZ;IAWL,GAAGE,gBAAgB,CAAC;MAAEoB,OAAO,EAAE;IAAX,CAAD;EAXd,CAHiC;EAiBxCC,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAgB;EADhC,CAjBiC;;EAqBxCC,KAAK,CAAEZ,KAAF,QAAoB;IAAA,IAAX;MAAEa;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmB1B,YAAY,CAACY,KAAD,CAArC;IACA,MAAM;MAAEe,UAAF;MAAcC,MAAd;MAAsBC,IAAtB;MAA4BC,IAA5B;MAAkCC;IAAlC,IAA+ClC,QAAQ,CAACe,KAAD,EAAQL,gBAAR,CAA7D;IAEAL,eAAe,CAAC;MACd8B,KAAK,EAAE;QACLC,KAAK,EAAE3B,KAAK,CAACM,KAAD,EAAQ,OAAR,CADP;QAELG,MAAM,EAAET,KAAK,CAACM,KAAD,EAAQ,QAAR,CAFR;QAGLS,OAAO,EAAEf,KAAK,CAACM,KAAD,EAAQ,SAAR;MAHT;IADO,CAAD,CAAf;IAQAP,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,cADK,EAEL;UACE,wBAAwBO,KAAK,CAACC;QADhC,CAFK,EAKLa,YAAY,CAACH,KALR;MAFD;QAAA,kCAUJE,KAAK,CAACN,OAVF,qBAUJ,oBAAAM,KAAK,EAAW;UAChBE,UADgB;UAEhBC,MAFgB;UAGhBC,IAHgB;UAIhBC,IAJgB;UAKhBC,QAAQ,EAAEA,QAAQ,CAACR;QALH,CAAX,CAVD;MAAA;IAAA,CAAD,CAAT;IAoBA,OAAO,EAAP;EACD;;AAtDuC,CAAD,CAAlC"}

package/lib/components/VChipGroup/VChipGroup.sass

@@ -1,4 +1,4 @@
-@import './_variables.scss'
+@use './variables' as *
 
 // Block
 .v-chip-group

package/lib/components/VChipGroup/_variables.scss

@@ -1,4 +1,4 @@
-// Defaults
+// VChipGroup
 $chip-group-selected-opacity: var(--v-activated-opacity) !default;
 $chip-group-padding: 4px 0 !default;
 $chip-group-margin: 4px 8px 4px 0 !default;

package/lib/components/VChipGroup/index.d.ts

@@ -0,0 +1,89 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+declare function deepEqual(a: any, b: any): boolean;
+
+declare const VChipGroup: vue.DefineComponent<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: {
+        type: PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    column: BooleanConstructor;
+    filter: BooleanConstructor;
+    valueComparator: {
+        type: PropType<typeof deepEqual>;
+        default: typeof deepEqual;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: any) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: {
+        type: PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    column: BooleanConstructor;
+    filter: BooleanConstructor;
+    valueComparator: {
+        type: PropType<typeof deepEqual>;
+        default: typeof deepEqual;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}, {
+    filter: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    tag: string;
+    column: boolean;
+    variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    modelValue: any;
+    selectedClass: string;
+    valueComparator: typeof deepEqual;
+}>;
+declare type VChipGroup = InstanceType<typeof VChipGroup>;
+
+export { VChipGroup };

package/lib/components/VChipGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VChipGroup/index.ts"],"names":["VChipGroup"],"mappings":"SAASA,U","sourcesContent":["export { VChipGroup } from './VChipGroup'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VChipGroup"],"sources":["../../../src/components/VChipGroup/index.ts"],"sourcesContent":["export { VChipGroup } from './VChipGroup'\n"],"mappings":"SAASA,U"}

package/lib/components/VCode/VCode.sass

@@ -1,8 +1,7 @@
-@forward './variables'
 @use './variables' as *
 
 .v-code
-  background-color: rgb(var(--v-code-background-color))
+  background-color: rgb($code-background-color)
   border-radius: $code-border-radius
   font-size: $code-font-size
   font-weight: $code-font-weight

package/lib/components/VCode/_variables.scss

@@ -1,4 +1,4 @@
-// Defaults
+$code-background-color: var(--v-code-background-color) !default;
 $code-border-radius: 3px !default;
 $code-font-size: 85% !default;
 $code-font-weight: normal !default;

package/lib/components/VCode/index.d.ts

@@ -0,0 +1,19 @@
+import * as vue from 'vue';
+
+declare const VCode: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tag: string;
+}>;
+
+export { VCode };

package/lib/components/VCode/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VCode/index.ts"],"names":["createSimpleFunctional","VCode"],"mappings":"AAAA;SAESA,sB;AAET,OAAO,MAAMC,KAAK,GAAGD,sBAAsB,CAAC,QAAD,CAApC","sourcesContent":["import './VCode.sass'\n\nimport { createSimpleFunctional } from '@/util'\n\nexport const VCode = createSimpleFunctional('v-code')\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["createSimpleFunctional","VCode"],"sources":["../../../src/components/VCode/index.ts"],"sourcesContent":["import './VCode.sass'\n\nimport { createSimpleFunctional } from '@/util'\n\nexport const VCode = createSimpleFunctional('v-code')\n"],"mappings":"AAAA;SAESA,sB;AAET,OAAO,MAAMC,KAAK,GAAGD,sBAAsB,CAAC,QAAD,CAApC"}

package/lib/components/VColorPicker/VColorPicker.css

@@ -3,7 +3,7 @@
   contain: content;
 }
 .v-color-picker.v-sheet {
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
   border-radius: 4px;
 }
 
@@ -14,8 +14,8 @@
 }
 
 .v-color-picker--flat {
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb {
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }