vuetify 3.0.0-beta.9 → 3.0.1

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

@@ -0,0 +1,196 @@
+// @ts-ignore
+import * as vue_router from 'vue-router';
+import * as vue from 'vue';
+import { JSXComponent, PropType } from 'vue';
+
+declare type Density = null | 'default' | 'comfortable' | 'compact';
+
+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<Density>;
+        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: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<Density>;
+        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;
+}, {
+    replace: boolean;
+    link: boolean;
+    filter: boolean;
+    exact: boolean;
+    label: boolean;
+    draggable: boolean;
+    disabled: boolean;
+    size: string | number;
+    tag: string;
+    rounded: string | number | boolean;
+    density: Density;
+    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,"file":"index.mjs","names":["VChip"],"sources":["../../../src/components/VChip/index.ts"],"sourcesContent":["export { VChip } from './VChip'\n"],"mappings":"SAASA,K"}
+{"version":3,"file":"index.mjs","names":["VChip"],"sources":["../../../src/components/VChip/index.ts"],"sourcesContent":["export { VChip } from './VChip'\n"],"mappings":"SAASA,KAAK"}

package/lib/components/VChipGroup/VChipGroup.mjs

@@ -1,15 +1,17 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VChipGroup.css"; // Composables
+import "./VChipGroup.css";
 
+// Composables
 import { makeGroupProps, useGroup } from "../../composables/group.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { makeVariantProps } from "../../composables/variant.mjs";
 import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
-
 import { deepEqual, defineComponent, useRender } from "../../util/index.mjs";
-import { toRef } from 'vue'; // Types
+import { toRef } from 'vue';
+
+// Types
 
 export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
 export const VChipGroup = defineComponent({
@@ -33,7 +35,6 @@ export const VChipGroup = defineComponent({
   emits: {
     'update:modelValue': value => true
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -57,7 +58,6 @@ export const VChipGroup = defineComponent({
     });
     useRender(() => {
       var _slots$default;
-
       return _createVNode(props.tag, {
         "class": ['v-chip-group', {
           'v-chip-group--column': props.column
@@ -74,6 +74,5 @@ export const VChipGroup = defineComponent({
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VChipGroup.mjs.map

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

@@ -1 +1 @@
-{"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"}
+{"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;;AAEA;AAAA,SACSA,cAAc,EAAEC,QAAQ;AAAA,SACxBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB;AAAA,SAChBC,eAAe,0CAExB;AAAA,SACSC,SAAS,EAAEC,eAAe,EAAEC,SAAS;AAC9C,SAASC,KAAK,QAAQ,KAAK;;AAE3B;;AAGA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAG,CAAC,sBAAsB,CAAC;AAElE,OAAO,MAAMC,UAAU,GAAGN,eAAe,CAAC;EACxCO,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACLC,MAAM,EAAEC,OAAO;IACfC,MAAM,EAAED,OAAO;IACfE,eAAe,EAAE;MACfC,IAAI,EAAEC,QAAsC;MAC5CC,OAAO,EAAEhB;IACX,CAAC;IAED,GAAGP,cAAc,CAAC;MAAEwB,aAAa,EAAE;IAAmB,CAAC,CAAC;IACxD,GAAGtB,YAAY,EAAE;IACjB,GAAGC,cAAc,EAAE;IACnB,GAAGE,gBAAgB,CAAC;MAAEoB,OAAO,EAAE;IAAQ,CAAC;EAC1C,CAAC;EAEDC,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EAEDC,KAAK,CAAEZ,KAAK,QAAa;IAAA,IAAX;MAAEa;IAAM,CAAC;IACrB,MAAM;MAAEC;IAAa,CAAC,GAAG1B,YAAY,CAACY,KAAK,CAAC;IAC5C,MAAM;MAAEe,UAAU;MAAEC,MAAM;MAAEC,IAAI;MAAEC,IAAI;MAAEC;IAAS,CAAC,GAAGlC,QAAQ,CAACe,KAAK,EAAEL,gBAAgB,CAAC;IAEtFL,eAAe,CAAC;MACd8B,KAAK,EAAE;QACLC,KAAK,EAAE3B,KAAK,CAACM,KAAK,EAAE,OAAO,CAAC;QAC5BG,MAAM,EAAET,KAAK,CAACM,KAAK,EAAE,QAAQ,CAAC;QAC9BS,OAAO,EAAEf,KAAK,CAACM,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFP,SAAS,CAAC;MAAA;MAAA;QAAA,SAEC,CACL,cAAc,EACd;UACE,sBAAsB,EAAEO,KAAK,CAACC;QAChC,CAAC,EACDa,YAAY,CAACH,KAAK;MACnB;QAAA,kCAECE,KAAK,CAACN,OAAO,qBAAb,oBAAAM,KAAK,EAAW;UAChBE,UAAU;UACVC,MAAM;UACNC,IAAI;UACJC,IAAI;UACJC,QAAQ,EAAEA,QAAQ,CAACR;QACrB,CAAC,CAAC;MAAA;IAAA,CAEL,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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,"file":"index.mjs","names":["VChipGroup"],"sources":["../../../src/components/VChipGroup/index.ts"],"sourcesContent":["export { VChipGroup } from './VChipGroup'\n"],"mappings":"SAASA,U"}
+{"version":3,"file":"index.mjs","names":["VChipGroup"],"sources":["../../../src/components/VChipGroup/index.ts"],"sourcesContent":["export { VChipGroup } from './VChipGroup'\n"],"mappings":"SAASA,UAAU"}

package/lib/components/VCode/VCode.css

@@ -1,7 +1,9 @@
 .v-code {
-  background-color: rgb(var(--v-code-background-color));
-  border-radius: 3px;
-  font-size: 85%;
+  background-color: rgb(var(--v-theme-code));
+  color: rgb(var(--v-theme-on-code));
+  border-radius: 4px;
+  line-height: 1.8;
+  font-size: 0.9em;
   font-weight: normal;
   padding: 0.2em 0.4em;
 }

package/lib/components/VCode/VCode.sass

@@ -1,8 +1,10 @@
 @use './variables' as *
 
 .v-code
-  background-color: rgb($code-background-color)
+  background-color: $code-background-color
+  color: $code-color
   border-radius: $code-border-radius
+  line-height: $code-line-height
   font-size: $code-font-size
   font-weight: $code-font-weight
   padding: $code-padding

package/lib/components/VCode/_variables.scss

@@ -1,5 +1,7 @@
-$code-background-color: var(--v-code-background-color) !default;
-$code-border-radius: 3px !default;
-$code-font-size: 85% !default;
+$code-background-color: rgb(var(--v-theme-code)) !default;
+$code-color: rgb(var(--v-theme-on-code)) !default;
+$code-border-radius: 4px !default;
+$code-line-height: 1.8 !default;
+$code-font-size: 0.9em !default;
 $code-font-weight: normal !default;
 $code-padding: .2em .4em !default;

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

@@ -0,0 +1,20 @@
+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;
+}>;
+declare type VCode = InstanceType<typeof VCode>;
+
+export { VCode };

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

@@ -1 +1 @@
-{"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"}
+{"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\nexport type VCode = InstanceType<typeof VCode>\n"],"mappings":"AAAA;AAAqB,SAEZA,sBAAsB;AAE/B,OAAO,MAAMC,KAAK,GAAGD,sBAAsB,CAAC,QAAQ,CAAC"}

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));
 }

package/lib/components/VColorPicker/VColorPicker.mjs

@@ -1,21 +1,22 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPicker.css"; // Components
+import "./VColorPicker.css";
 
+// Components
 import { VColorPickerCanvas } from "./VColorPickerCanvas.mjs";
 import { VColorPickerEdit } from "./VColorPickerEdit.mjs";
 import { VColorPickerPreview } from "./VColorPickerPreview.mjs";
 import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs";
 import { VSheet } from "../VSheet/index.mjs"; // Composables
-
 import { makeElevationProps } from "../../composables/elevation.mjs";
 import { makeRoundedProps } from "../../composables/rounded.mjs";
 import { makeThemeProps } from "../../composables/theme.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
-
 import { defineComponent, HSVAtoCSS, useRender } from "../../util/index.mjs";
 import { extractColor, modes, nullColor, parseColor } from "./util/index.mjs";
-import { onMounted, ref } from 'vue'; // Types
+import { onMounted, ref } from 'vue';
+
+// Types
 
 export const VColorPicker = defineComponent({
   name: 'VColorPicker',
@@ -64,87 +65,79 @@ export const VColorPicker = defineComponent({
     'update:modelValue': color => true,
     'update:mode': mode => true
   },
-
   setup(props) {
     const mode = useProxiedModel(props, 'mode');
     const lastPickedColor = ref(null);
     const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
       let c = parseColor(v);
       if (!c) return null;
-
       if (lastPickedColor.value) {
-        c = { ...c,
+        c = {
+          ...c,
           h: lastPickedColor.value.h
         };
         lastPickedColor.value = null;
       }
-
       return c;
     }, v => {
       if (!v) return null;
       return extractColor(v, props.modelValue);
     });
-
     const updateColor = hsva => {
       currentColor.value = hsva;
       lastPickedColor.value = hsva;
     };
-
     onMounted(() => {
       if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
     });
-    useRender(() => {
-      var _currentColor$value;
-
-      return _createVNode(VSheet, {
-        "rounded": props.rounded,
-        "elevation": props.elevation,
-        "theme": props.theme,
-        "class": ['v-color-picker'],
-        "style": {
-          '--v-color-picker-color-hsv': HSVAtoCSS({ ...((_currentColor$value = currentColor.value) != null ? _currentColor$value : nullColor),
-            a: 1
-          })
-        },
-        "maxWidth": props.width
-      }, {
-        default: () => [!props.hideCanvas && _createVNode(VColorPickerCanvas, {
-          "key": "canvas",
-          "color": currentColor.value,
-          "onUpdate:color": updateColor,
-          "disabled": props.disabled,
-          "dotSize": props.dotSize,
-          "width": props.width,
-          "height": props.canvasHeight
-        }, null), (!props.hideSliders || !props.hideInputs) && _createVNode("div", {
-          "key": "controls",
-          "class": "v-color-picker__controls"
-        }, [!props.hideSliders && _createVNode(VColorPickerPreview, {
-          "key": "preview",
-          "color": currentColor.value,
-          "onUpdate:color": updateColor,
-          "hideAlpha": !mode.value.endsWith('a'),
-          "disabled": props.disabled
-        }, null), !props.hideInputs && _createVNode(VColorPickerEdit, {
-          "key": "edit",
-          "modes": props.modes,
-          "mode": mode.value,
-          "onUpdate:mode": m => mode.value = m,
-          "color": currentColor.value,
-          "onUpdate:color": updateColor,
-          "disabled": props.disabled
-        }, null)]), props.showSwatches && _createVNode(VColorPickerSwatches, {
-          "key": "swatches",
-          "color": currentColor.value,
-          "onUpdate:color": updateColor,
-          "maxHeight": props.swatchesMaxHeight,
-          "swatches": props.swatches,
-          "disabled": props.disabled
-        }, null)]
-      });
-    });
+    useRender(() => _createVNode(VSheet, {
+      "rounded": props.rounded,
+      "elevation": props.elevation,
+      "theme": props.theme,
+      "class": ['v-color-picker'],
+      "style": {
+        '--v-color-picker-color-hsv': HSVAtoCSS({
+          ...(currentColor.value ?? nullColor),
+          a: 1
+        })
+      },
+      "maxWidth": props.width
+    }, {
+      default: () => [!props.hideCanvas && _createVNode(VColorPickerCanvas, {
+        "key": "canvas",
+        "color": currentColor.value,
+        "onUpdate:color": updateColor,
+        "disabled": props.disabled,
+        "dotSize": props.dotSize,
+        "width": props.width,
+        "height": props.canvasHeight
+      }, null), (!props.hideSliders || !props.hideInputs) && _createVNode("div", {
+        "key": "controls",
+        "class": "v-color-picker__controls"
+      }, [!props.hideSliders && _createVNode(VColorPickerPreview, {
+        "key": "preview",
+        "color": currentColor.value,
+        "onUpdate:color": updateColor,
+        "hideAlpha": !mode.value.endsWith('a'),
+        "disabled": props.disabled
+      }, null), !props.hideInputs && _createVNode(VColorPickerEdit, {
+        "key": "edit",
+        "modes": props.modes,
+        "mode": mode.value,
+        "onUpdate:mode": m => mode.value = m,
+        "color": currentColor.value,
+        "onUpdate:color": updateColor,
+        "disabled": props.disabled
+      }, null)]), props.showSwatches && _createVNode(VColorPickerSwatches, {
+        "key": "swatches",
+        "color": currentColor.value,
+        "onUpdate:color": updateColor,
+        "maxHeight": props.swatchesMaxHeight,
+        "swatches": props.swatches,
+        "disabled": props.disabled
+      }, null)]
+    }));
     return {};
   }
-
 });
 //# sourceMappingURL=VColorPicker.mjs.map