@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VChip/_mixins.scss

@@ -1,8 +1,15 @@
+@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 $size-scales {
-    $size: map-get($chip-sizes, "font-size") + (2 * $multiplier) / 16;
-    $height: map-get($chip-sizes, "height") + (8 * $multiplier);
-    $padding: round($height / $chip-padding-ratio);
+  @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--size-#{$sizeName} {
       --v-chip-size: #{$size};
@@ -13,25 +20,27 @@
       .v-avatar {
         --v-avatar-height: #{$height - 8};
 
-        @at-root #{selector-append('.v-chip--pill', &)} {
+        @at-root #{selector.append('.v-chip--pill', &)} {
           --v-avatar-height: #{$height};
         }
       }
 
-      .v-chip__prepend {
-        margin-inline-start: -$padding / 2;
-        margin-inline-end: $padding / 2;
+      .v-chip__prepend,
+      .v-chip__filter {
+        margin-inline-start: -$padding * .5;
+        margin-inline-end: $padding * .5;
 
-        @at-root #{selector-append('.v-chip--pill', &)} {
+        @at-root #{selector.append('.v-chip--pill', &)} {
           margin-inline-start: -$padding;
         }
       }
 
-      .v-chip__append {
-        margin-inline-end: -$padding / 2;
-        margin-inline-start: $padding / 2;
+      .v-chip__append,
+      .v-chip__close {
+        margin-inline-end: -$padding * .5;
+        margin-inline-start: $padding * .5;
 
-        @at-root #{selector-append('.v-chip--pill', &)} {
+        @at-root #{selector.append('.v-chip--pill', &)} {
           margin-inline-end: -$padding;
         }
       }
@@ -41,10 +50,10 @@
 
 @mixin chip-density($properties, $densities) {
   @each $density, $multiplier in $densities {
-    $value: calc(var(--v-chip-height) + #{$multiplier * $spacer});
+    $value: calc(var(--v-chip-height) + #{$multiplier * settings.$spacer});
 
     &.v-chip--density-#{$density} {
-      @if type-of($properties) == "list" {
+      @if meta.type-of($properties) == "list" {
         @each $property in $properties {
           #{$property}: $value;
         }

package/lib/components/VChip/_variables.scss

@@ -1,42 +1,38 @@
+@use 'sass:math';
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
 // Defaults
 $chip-append-margin-inline-end: 0 !default;
 $chip-append-margin-inline-start: 8px !default;
-$chip-background: rgba(var(--v-theme-on-surface), var(--v-activated-opacity)) !default;
-$chip-border-color: $border-color-root !default;
-$chip-border-radius: map-get($rounded, "pill") !default;
-$chip-border-style: $border-style-root !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: currentColor !default;
+$chip-color: rgb(var(--v-theme-on-surface-variant)) !default;
 $chip-density: ("default": 0, "comfortable": -2, "compact": -3) !default;
 $chip-disabled-opacity: 0.3 !default;
-$chip-elevation: 0 !default;
-$chip-font-size: map-deep-get($typography, "button", "size") !default;
+$chip-elevation: 1 !default;
+$chip-font-size: tools.map-deep-get(settings.$typography, "button", "size") !default;
+$chip-font-weight: 400 !default;
 $chip-height: 32px !default;
-$chip-icon-density: ("default": 3, "comfortable": 0, "compact": -2) !default;
-$chip-icon-font-size: 24px !default;
-$chip-icon-size: 48px !default;
-$chip-label-border-radius: 8px !default;
-$chip-link-focus-opacity: 0.3 !default;
-$chip-padding-ratio: 2 + 2/3 !default;
+$chip-icon-font-size: 1.25rem !default;
+$chip-label-border-radius: settings.$border-radius-root !default;
+$chip-padding-ratio: 2 + math.div(2, 3) !default;
 $chip-plain-opacity: 0.26 !default;
-$chip-prepend-margin-inline-end: 8px !default;
-$chip-prepend-margin-inline-start: -12px !default;
-$chip-rounded-border-radius: $border-radius-root !default;
+$chip-rounded-border-radius: settings.$border-radius-root !default;
 
 $chip-sizes: (
   "height": $chip-height,
   "font-size": $chip-font-size,
 ) !default;
 
-$chip-icon-sizes: (
-  "font-size": $chip-icon-font-size,
-  "size": $chip-icon-size,
-) !default;
-
 $chip-border: (
   $chip-border-color,
   $chip-border-style,

package/lib/components/VChip/index.mjs

@@ -1,2 +1,2 @@
-export { default as VChip } from "./VChip.mjs";
+export { VChip } from "./VChip.mjs";
 //# sourceMappingURL=index.mjs.map

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

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

package/lib/components/VChipGroup/VChipGroup.css

@@ -0,0 +1,18 @@
+.v-chip-group {
+  display: flex;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  padding: 4px 0;
+}
+.v-chip-group .v-chip {
+  margin: 4px 8px 4px 0;
+}
+.v-chip-group .v-chip.v-chip--selected:not(.v-chip--disabled) .v-chip__overlay {
+  opacity: var(--v-activated-opacity);
+}
+
+.v-chip-group--column {
+  flex-wrap: wrap;
+  white-space: normal;
+}

package/lib/components/VChipGroup/VChipGroup.mjs

@@ -1,50 +1,78 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VChipGroup.sass"; // Extensions
-
-import { BaseSlideGroup } from "../VSlideGroup/VSlideGroup.mjs"; // Mixins
-
-import Colorable from "../../mixins/colorable/index.mjs"; // Utilities
+import "./VChipGroup.css"; // Composables
 
-import mixins from "../../util/mixins.mjs";
-/* @vue/component */
+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
 
-export default mixins(BaseSlideGroup, Colorable).extend({
-  name: 'v-chip-group',
-
-  provide() {
-    return {
-      chipGroup: this
-    };
-  },
+import { deepEqual, defineComponent } from "../../util/index.mjs";
+import { toRef } from 'vue'; // Types
 
+export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
+export const VChipGroup = defineComponent({
+  name: 'VChipGroup',
   props: {
-    column: Boolean
+    column: Boolean,
+    filter: Boolean,
+    valueComparator: {
+      type: Function,
+      default: deepEqual
+    },
+    ...makeGroupProps({
+      selectedClass: 'v-chip--selected'
+    }),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'contained-text'
+    })
   },
-  computed: {
-    classes() {
-      return { ...BaseSlideGroup.options.computed.classes.call(this),
-        'v-chip-group': true,
-        'v-chip-group--column': this.column
-      };
-    }
-
+  emits: {
+    'update:modelValue': value => true
   },
-  watch: {
-    column(val) {
-      if (val) this.scrollOffset = 0;
-      this.$nextTick(this.onResize);
-    }
 
-  },
-  methods: {
-    genData() {
-      return this.setTextColor(this.color, { ...BaseSlideGroup.options.methods.genData.call(this)
-      });
-    }
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      isSelected,
+      select,
+      next,
+      prev,
+      selected
+    } = useGroup(props, VChipGroupSymbol);
+    provideDefaults({
+      VChip: {
+        color: toRef(props, 'color'),
+        filter: toRef(props, 'filter'),
+        variant: toRef(props, 'variant')
+      }
+    });
+    return () => {
+      var _slots$default;
 
+      return _createVNode(props.tag, {
+        "class": ['v-chip-group', {
+          'v-chip-group--column': props.column
+        }, themeClasses.value]
+      }, {
+        default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+          isSelected,
+          select,
+          next,
+          prev,
+          selected: selected.value
+        })]
+      });
+    };
   }
+
 });
 //# sourceMappingURL=VChipGroup.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VChipGroup/VChipGroup.ts"],"names":["BaseSlideGroup","Colorable","mixins","extend","name","provide","chipGroup","props","column","Boolean","computed","classes","options","call","watch","val","scrollOffset","$nextTick","onResize","methods","genData","setTextColor","color"],"mappings":"AAAA;;AACA;AAEA;AACA,2B,CAEA;;SACSA,c,0CAET;;OACOC,S,0CAEP;;OACOC,M;AAEP;;AACA,eAAeA,MAAM,CACnBF,cADmB,EAEnBC,SAFmB,CAAN,CAGbE,MAHa,CAGN;AACPC,EAAAA,IAAI,EAAE,cADC;;AAGPC,EAAAA,OAAO,GAAI;AACT,WAAO;AACLC,MAAAA,SAAS,EAAE;AADN,KAAP;AAGD,GAPM;;AASPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAEC;AADH,GATA;AAaPC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAI;AACT,aAAO,EACL,GAAGX,cAAc,CAACY,OAAf,CAAuBF,QAAvB,CAAgCC,OAAhC,CAAwCE,IAAxC,CAA6C,IAA7C,CADE;AAEL,wBAAgB,IAFX;AAGL,gCAAwB,KAAKL;AAHxB,OAAP;AAKD;;AAPO,GAbH;AAuBPM,EAAAA,KAAK,EAAE;AACLN,IAAAA,MAAM,CAAEO,GAAF,EAAO;AACX,UAAIA,GAAJ,EAAS,KAAKC,YAAL,GAAoB,CAApB;AAET,WAAKC,SAAL,CAAe,KAAKC,QAApB;AACD;;AALI,GAvBA;AA+BPC,EAAAA,OAAO,EAAE;AACPC,IAAAA,OAAO,GAAI;AACT,aAAO,KAAKC,YAAL,CAAkB,KAAKC,KAAvB,EAA8B,EACnC,GAAGtB,cAAc,CAACY,OAAf,CAAuBO,OAAvB,CAA+BC,OAA/B,CAAuCP,IAAvC,CAA4C,IAA5C;AADgC,OAA9B,CAAP;AAGD;;AALM;AA/BF,CAHM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VChipGroup.sass'\n\n// Extensions\nimport { BaseSlideGroup } from '../VSlideGroup/VSlideGroup'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n/* @vue/component */\nexport default mixins(\n  BaseSlideGroup,\n  Colorable\n).extend({\n  name: 'v-chip-group',\n\n  provide () {\n    return {\n      chipGroup: this,\n    }\n  },\n\n  props: {\n    column: Boolean,\n  },\n\n  computed: {\n    classes () {\n      return {\n        ...BaseSlideGroup.options.computed.classes.call(this),\n        'v-chip-group': true,\n        'v-chip-group--column': this.column,\n      }\n    },\n  },\n\n  watch: {\n    column (val) {\n      if (val) this.scrollOffset = 0\n\n      this.$nextTick(this.onResize)\n    },\n  },\n\n  methods: {\n    genData () {\n      return this.setTextColor(this.color, {\n        ...BaseSlideGroup.options.methods.genData.call(this),\n      })\n    },\n  },\n})\n"],"file":"VChipGroup.mjs"}
+{"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"}

package/lib/components/VChipGroup/VChipGroup.sass

@@ -2,26 +2,20 @@
 
 // Block
 .v-chip-group
+  display: flex
+  max-width: 100%
+  min-width: 0
+  overflow-x: auto
+  padding: $chip-group-padding
+
   .v-chip
     margin: $chip-group-margin
 
-  .v-chip--active
-    color: inherit
-
-    &.v-chip--no-color
-      &:after
-        opacity: $chip-group-no-color-opacity
-
-      &:focus:after
-        opacity: $chip-group-no-color-focus-opacity
-
-// Element
-.v-chip-group .v-slide-group__content
-  padding: $chip-group-content-padding
+    &.v-chip--selected:not(.v-chip--disabled)
+      .v-chip__overlay
+        opacity: $chip-group-selected-opacity
 
 // Modifiers
 .v-chip-group--column
-  .v-slide-group__content
-    white-space: normal
-    flex-wrap: wrap
-    max-width: 100%
+  flex-wrap: wrap
+  white-space: normal

package/lib/components/VChipGroup/_variables.scss

@@ -1,6 +1,4 @@
-@import '../../styles/styles.sass';
-
-$chip-group-content-padding: 4px 0 !default;
+// Defaults
+$chip-group-selected-opacity: var(--v-activated-opacity) !default;
+$chip-group-padding: 4px 0 !default;
 $chip-group-margin: 4px 8px 4px 0 !default;
-$chip-group-no-color-focus-opacity: .32 !default;
-$chip-group-no-color-opacity: .22 !default;

package/lib/components/VChipGroup/index.mjs

@@ -1,4 +1,2 @@
-import VChipGroup from "./VChipGroup.mjs";
-export { VChipGroup };
-export default VChipGroup;
+export { VChipGroup } from "./VChipGroup.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VChipGroup/index.ts"],"names":["VChipGroup"],"mappings":"OAAOA,U;AAEP,SAASA,UAAT;AACA,eAAeA,UAAf","sourcesContent":["import VChipGroup from './VChipGroup'\n\nexport { VChipGroup }\nexport default VChipGroup\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VChipGroup/index.ts"],"names":["VChipGroup"],"mappings":"SAASA,U","sourcesContent":["export { VChipGroup } from './VChipGroup'\n"],"file":"index.mjs"}

package/lib/components/VCode/VCode.css

@@ -0,0 +1,7 @@
+.v-code {
+  background-color: rgb(var(--v-code-background-color));
+  border-radius: 3px;
+  font-size: 85%;
+  font-weight: normal;
+  padding: 0.2em 0.4em;
+}

package/lib/components/VCode/VCode.sass

@@ -1,5 +1,5 @@
-// Imports
-@import './index'
+@forward './variables'
+@use './variables' as *
 
 .v-code
   background-color: rgb(var(--v-code-background-color))

package/lib/components/VCode/index.mjs

@@ -1,4 +1,4 @@
-import "./VCode.sass";
+import "./VCode.css";
 import { createSimpleFunctional } from "../../util/index.mjs";
 export const VCode = createSimpleFunctional('v-code');
 //# sourceMappingURL=index.mjs.map

package/lib/components/VColorPicker/VColorPicker.css

@@ -0,0 +1,21 @@
+.v-color-picker {
+  align-self: flex-start;
+  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);
+  border-radius: 4px;
+}
+
+.v-color-picker__controls {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.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);
+}
+.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);
+}