@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VGrid/VGrid.sass

@@ -1,8 +1,9 @@
-@import './index'
+@use '../../styles/settings'
+@use './mixins' as *
 
 .v-container
-  +make-container
-  +make-container-max-widths
+  @include make-container
+  @include make-container-max-widths
 
   &--fluid
     max-width: 100%
@@ -14,17 +15,17 @@
   +make-row
 
   & + .row
-    margin-top: $grid-gutter / 2
+    margin-top: settings.$grid-gutter * .5
 
     &--dense
-      margin-top: $form-grid-gutter / 2
+      margin-top: settings.$form-grid-gutter * .5
 
   &--dense
-    margin: -$form-grid-gutter / 2
+    margin: -(settings.$form-grid-gutter) * .5
 
     > .v-col,
     > [class*="v-col-"]
-      padding: $form-grid-gutter / 2
+      padding: settings.$form-grid-gutter * .5
 
   // Remove the negative margin from default .v-row, then the horizontal padding
   // from all immediate children columns (to prevent runaway style inheritance).
@@ -37,4 +38,4 @@
 // Columns
 //
 // Common styles for small and large grid columns
-+make-grid-columns
+@include make-grid-columns

package/lib/components/VGrid/VRow.mjs

@@ -1,10 +1,10 @@
 // Styles
-import "./VGrid.sass"; // Composables
+import "./VGrid.css"; // Composables
 
 import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 
-import { capitalize, computed, defineComponent, h } from 'vue';
-import { makeProps } from "../../util/index.mjs"; // Types
+import { capitalize, computed, h } from 'vue';
+import { defineComponent } from "../../util/index.mjs"; // Types
 
 const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
 
@@ -61,17 +61,17 @@ function breakpointClass(type, prop, val) {
   if (prop) {
     // alignSm -> Sm
     const breakpoint = prop.replace(type, '');
-    className += "-".concat(breakpoint);
+    className += `-${breakpoint}`;
   } // .align-items-sm-center
 
 
-  className += "-".concat(val);
+  className += `-${val}`;
   return className.toLowerCase();
 }
 
-export default defineComponent({
+export const VRow = defineComponent({
   name: 'VRow',
-  props: makeProps({
+  props: {
     dense: Boolean,
     noGutters: Boolean,
     align: {
@@ -93,11 +93,12 @@ export default defineComponent({
     },
     ...alignContentProps,
     ...makeTagProps()
-  }),
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const classes = computed(() => {
       const classList = []; // Loop through `align`, `justify`, `alignContent` breakpoint props
 
@@ -114,15 +115,19 @@ export default defineComponent({
       classList.push({
         'v-row--no-gutters': props.noGutters,
         'v-row--dense': props.dense,
-        ["align-".concat(props.align)]: props.align,
-        ["justify-".concat(props.justify)]: props.justify,
-        ["align-content-".concat(props.alignContent)]: props.alignContent
+        [`align-${props.align}`]: props.align,
+        [`justify-${props.justify}`]: props.justify,
+        [`align-content-${props.alignContent}`]: props.alignContent
       });
       return classList;
     });
-    return () => h(props.tag, {
-      class: ['v-row', classes.value]
-    }, slots.default == null ? void 0 : slots.default());
+    return () => {
+      var _slots$default;
+
+      return h(props.tag, {
+        class: ['v-row', classes.value]
+      }, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots));
+    };
   }
 
 });

package/lib/components/VGrid/VRow.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VGrid/VRow.ts"],"names":["makeTagProps","capitalize","computed","defineComponent","h","makeProps","breakpoints","ALIGNMENT","makeRowProps","prefix","def","reduce","props","val","alignValidator","str","includes","alignProps","type","String","default","validator","justifyValidator","justifyProps","alignContentValidator","alignContentProps","propMap","align","Object","keys","justify","alignContent","classMap","breakpointClass","prop","className","undefined","breakpoint","replace","toLowerCase","name","dense","Boolean","noGutters","setup","slots","classes","classList","forEach","value","push","tag","class"],"mappings":"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","sourcesContent":["// Styles\nimport './VGrid.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { capitalize, computed, defineComponent, h } from 'vue'\nimport { makeProps } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nconst breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs\n\nconst ALIGNMENT = ['start', 'end', 'center'] as const\n\nfunction makeRowProps (prefix: string, def: () => Prop<string, null>) {\n  return breakpoints.reduce((props, val) => {\n    props[prefix + capitalize(val)] = def()\n    return props\n  }, {} as Dictionary<Prop<string, null>>)\n}\n\nconst alignValidator = (str: any) => [...ALIGNMENT, 'baseline', 'stretch'].includes(str)\nconst alignProps = makeRowProps('align', () => ({\n  type: String,\n  default: null,\n  validator: alignValidator,\n}))\n\nconst justifyValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around'].includes(str)\nconst justifyProps = makeRowProps('justify', () => ({\n  type: String,\n  default: null,\n  validator: justifyValidator,\n}))\n\nconst alignContentValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around', 'stretch'].includes(str)\nconst alignContentProps = makeRowProps('alignContent', () => ({\n  type: String,\n  default: null,\n  validator: alignContentValidator,\n}))\n\nconst propMap = {\n  align: Object.keys(alignProps),\n  justify: Object.keys(justifyProps),\n  alignContent: Object.keys(alignContentProps),\n}\n\nconst classMap = {\n  align: 'align',\n  justify: 'justify',\n  alignContent: 'align-content',\n}\n\nfunction breakpointClass (type: keyof typeof propMap, prop: string, val: string) {\n  let className = classMap[type]\n  if (val == null) {\n    return undefined\n  }\n  if (prop) {\n    // alignSm -> Sm\n    const breakpoint = prop.replace(type, '')\n    className += `-${breakpoint}`\n  }\n  // .align-items-sm-center\n  className += `-${val}`\n  return className.toLowerCase()\n}\n\nexport default defineComponent({\n  name: 'VRow',\n\n  props: makeProps({\n    dense: Boolean,\n    noGutters: Boolean,\n    align: {\n      type: String,\n      default: null,\n      validator: alignValidator,\n    },\n    ...alignProps,\n    justify: {\n      type: String,\n      default: null,\n      validator: justifyValidator,\n    },\n    ...justifyProps,\n    alignContent: {\n      type: String,\n      default: null,\n      validator: alignContentValidator,\n    },\n    ...alignContentProps,\n    ...makeTagProps(),\n  }),\n\n  setup (props, { slots }) {\n    const classes = computed(() => {\n      const classList: any[] = []\n\n      // Loop through `align`, `justify`, `alignContent` breakpoint props\n      let type: keyof typeof propMap\n      for (type in propMap) {\n        propMap[type].forEach(prop => {\n          const value: string = (props as any)[prop]\n          const className = breakpointClass(type, prop, value)\n          if (className) classList!.push(className)\n        })\n      }\n\n      classList.push({\n        'v-row--no-gutters': props.noGutters,\n        'v-row--dense': props.dense,\n        [`align-${props.align}`]: props.align,\n        [`justify-${props.justify}`]: props.justify,\n        [`align-content-${props.alignContent}`]: props.alignContent,\n      })\n\n      return classList\n    })\n\n    return () => h(props.tag, {\n      class: ['v-row', classes.value],\n    }, slots.default?.())\n  },\n})\n"],"file":"VRow.mjs"}
+{"version":3,"sources":["../../../src/components/VGrid/VRow.ts"],"names":["makeTagProps","capitalize","computed","h","defineComponent","breakpoints","ALIGNMENT","makeRowProps","prefix","def","reduce","props","val","alignValidator","str","includes","alignProps","type","String","default","validator","justifyValidator","justifyProps","alignContentValidator","alignContentProps","propMap","align","Object","keys","justify","alignContent","classMap","breakpointClass","prop","className","undefined","breakpoint","replace","toLowerCase","VRow","name","dense","Boolean","noGutters","setup","slots","classes","classList","forEach","value","push","tag","class"],"mappings":"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","sourcesContent":["// Styles\nimport './VGrid.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { capitalize, computed, h } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nconst breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs\n\nconst ALIGNMENT = ['start', 'end', 'center'] as const\n\nfunction makeRowProps (prefix: string, def: () => Prop<string, null>) {\n  return breakpoints.reduce((props, val) => {\n    props[prefix + capitalize(val)] = def()\n    return props\n  }, {} as Record<string, Prop<string, null>>)\n}\n\nconst alignValidator = (str: any) => [...ALIGNMENT, 'baseline', 'stretch'].includes(str)\nconst alignProps = makeRowProps('align', () => ({\n  type: String,\n  default: null,\n  validator: alignValidator,\n}))\n\nconst justifyValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around'].includes(str)\nconst justifyProps = makeRowProps('justify', () => ({\n  type: String,\n  default: null,\n  validator: justifyValidator,\n}))\n\nconst alignContentValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around', 'stretch'].includes(str)\nconst alignContentProps = makeRowProps('alignContent', () => ({\n  type: String,\n  default: null,\n  validator: alignContentValidator,\n}))\n\nconst propMap = {\n  align: Object.keys(alignProps),\n  justify: Object.keys(justifyProps),\n  alignContent: Object.keys(alignContentProps),\n}\n\nconst classMap = {\n  align: 'align',\n  justify: 'justify',\n  alignContent: 'align-content',\n}\n\nfunction breakpointClass (type: keyof typeof propMap, prop: string, val: string) {\n  let className = classMap[type]\n  if (val == null) {\n    return undefined\n  }\n  if (prop) {\n    // alignSm -> Sm\n    const breakpoint = prop.replace(type, '')\n    className += `-${breakpoint}`\n  }\n  // .align-items-sm-center\n  className += `-${val}`\n  return className.toLowerCase()\n}\n\nexport const VRow = defineComponent({\n  name: 'VRow',\n\n  props: {\n    dense: Boolean,\n    noGutters: Boolean,\n    align: {\n      type: String,\n      default: null,\n      validator: alignValidator,\n    },\n    ...alignProps,\n    justify: {\n      type: String,\n      default: null,\n      validator: justifyValidator,\n    },\n    ...justifyProps,\n    alignContent: {\n      type: String,\n      default: null,\n      validator: alignContentValidator,\n    },\n    ...alignContentProps,\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const classes = computed(() => {\n      const classList: any[] = []\n\n      // Loop through `align`, `justify`, `alignContent` breakpoint props\n      let type: keyof typeof propMap\n      for (type in propMap) {\n        propMap[type].forEach(prop => {\n          const value: string = (props as any)[prop]\n          const className = breakpointClass(type, prop, value)\n          if (className) classList!.push(className)\n        })\n      }\n\n      classList.push({\n        'v-row--no-gutters': props.noGutters,\n        'v-row--dense': props.dense,\n        [`align-${props.align}`]: props.align,\n        [`justify-${props.justify}`]: props.justify,\n        [`align-content-${props.alignContent}`]: props.alignContent,\n      })\n\n      return classList\n    })\n\n    return () => h(props.tag, {\n      class: ['v-row', classes.value],\n    }, slots.default?.())\n  },\n})\n"],"file":"VRow.mjs"}

package/lib/components/VGrid/VSpacer.mjs

@@ -1,3 +1,3 @@
 import { createSimpleFunctional } from "../../util/index.mjs";
-export default createSimpleFunctional('flex-grow-1', 'div', 'VSpacer');
+export const VSpacer = createSimpleFunctional('flex-grow-1', 'div', 'VSpacer');
 //# sourceMappingURL=VSpacer.mjs.map

package/lib/components/VGrid/VSpacer.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VGrid/VSpacer.ts"],"names":["createSimpleFunctional"],"mappings":"SAASA,sB;AAET,eAAeA,sBAAsB,CAAC,aAAD,EAAgB,KAAhB,EAAuB,SAAvB,CAArC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport default createSimpleFunctional('flex-grow-1', 'div', 'VSpacer')\n"],"file":"VSpacer.mjs"}
+{"version":3,"sources":["../../../src/components/VGrid/VSpacer.ts"],"names":["createSimpleFunctional","VSpacer"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,OAAO,GAAGD,sBAAsB,CAAC,aAAD,EAAgB,KAAhB,EAAuB,SAAvB,CAAtC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VSpacer = createSimpleFunctional('flex-grow-1', 'div', 'VSpacer')\n"],"file":"VSpacer.mjs"}

package/lib/components/VGrid/_mixins.sass

@@ -1,49 +1,54 @@
-=make-container($padding-x: $container-padding-x)
+@use 'sass:map'
+@use 'sass:math'
+@use '../../styles/settings'
+@use '../../styles/tools'
+
+@mixin make-container($padding-x: settings.$container-padding-x)
   width: 100%
   padding: $padding-x
   margin-right: auto
   margin-left: auto
 
 // For each breakpoint, define the maximum width of the container in a media query
-=make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
+@mixin make-container-max-widths($max-widths: settings.$container-max-widths, $breakpoints: settings.$grid-breakpoints)
   @each $breakpoint, $container-max-width in $max-widths
-    +media-breakpoint-up($breakpoint, $breakpoints)
+    +tools.media-breakpoint-up($breakpoint, $breakpoints)
       max-width: $container-max-width
 
-=make-row($gutter: $grid-gutter)
+@mixin make-row($gutter: settings.$grid-gutter)
   display: flex
   flex-wrap: wrap
   flex: 1 1 auto
-  margin: -$gutter / 2
+  margin: -$gutter * .5
 
-=make-col-ready($gutter: $grid-gutter)
+@mixin make-col-ready($gutter: settings.$grid-gutter)
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%
-  padding: $gutter / 2
+  padding: $gutter * .5
 
-=make-col($size, $columns: $grid-columns)
-  flex: 0 0 percentage($size / $columns)
+@mixin make-col($size, $columns: settings.$grid-columns)
+  flex: 0 0 math.percentage(math.div($size, $columns))
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage($size / $columns)
+  max-width: math.percentage(math.div($size, $columns))
 
-=make-col-offset($size, $columns: $grid-columns)
-  $num: $size / $columns
-  +ltr()
-    margin-left: if($num == 0, 0, percentage($num))
-  +rtl()
-    margin-right: if($num == 0, 0, percentage($num))
+@mixin make-col-offset($size, $columns: settings.$grid-columns)
+  $num: math.div($size, $columns)
+  +tools.ltr()
+    margin-left: if($num == 0, 0, math.percentage($num))
+  +tools.rtl()
+    margin-right: if($num == 0, 0, math.percentage($num))
 
-=make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter, $breakpoints: $grid-breakpoints)
+@mixin make-grid-columns($columns: settings.$grid-columns, $gutter: settings.$grid-gutter, $breakpoints: settings.$grid-breakpoints)
   // Common properties for all breakpoints
   %grid-column
     width: 100%
-    padding: $gutter / 2
-  @each $breakpoint in map-keys($breakpoints)
-    $infix: breakpoint-infix($breakpoint, $breakpoints)
+    padding: $gutter * .5
+  @each $breakpoint in map.keys($breakpoints)
+    $infix: tools.breakpoint-infix($breakpoint, $breakpoints)
     // Allow columns to stretch full width below their breakpoints
     @for $i from 1 through $columns
       .v-col#{$infix}-#{$i}
@@ -51,7 +56,7 @@
     .v-col#{$infix},
     .v-col#{$infix}-auto
       @extend %grid-column
-    +media-breakpoint-up($breakpoint, $breakpoints)
+    +tools.media-breakpoint-up($breakpoint, $breakpoints)
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .v-col#{$infix}
         flex-basis: 0

package/lib/components/VGrid/index.mjs

@@ -1,5 +1,5 @@
-export { default as VContainer } from "./VContainer.mjs";
-export { default as VCol } from "./VCol.mjs";
-export { default as VRow } from "./VRow.mjs";
-export { default as VSpacer } from "./VSpacer.mjs";
+export { VContainer } from "./VContainer.mjs";
+export { VCol } from "./VCol.mjs";
+export { VRow } from "./VRow.mjs";
+export { VSpacer } from "./VSpacer.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VGrid/index.ts"],"names":["default","VContainer","VCol","VRow","VSpacer"],"mappings":"SAASA,OAAO,IAAIC,U;SACXD,OAAO,IAAIE,I;SACXF,OAAO,IAAIG,I;SACXH,OAAO,IAAII,O","sourcesContent":["export { default as VContainer } from './VContainer'\nexport { default as VCol } from './VCol'\nexport { default as VRow } from './VRow'\nexport { default as VSpacer } from './VSpacer'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VGrid/index.ts"],"names":["VContainer","VCol","VRow","VSpacer"],"mappings":"SAASA,U;SACAC,I;SACAC,I;SACAC,O","sourcesContent":["export { VContainer } from './VContainer'\nexport { VCol } from './VCol'\nexport { VRow } from './VRow'\nexport { VSpacer } from './VSpacer'\n"],"file":"index.mjs"}

package/lib/components/VHover/VHover.mjs

@@ -1,72 +1,42 @@
-// @ts-nocheck
+// Composables
+import { makeDelayProps, useDelay } from "../../composables/delay.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
-/* eslint-disable */
-// Mixins
-import Delayable from "../../mixins/delayable.mjs";
-import Toggleable from "../../mixins/toggleable/index.mjs"; // Utilities
-
-import mixins from "../../util/mixins.mjs";
-import { consoleWarn } from "../../util/console.mjs"; // Types
-
-export default mixins(Delayable, Toggleable
-/* @vue/component */
-).extend({
-  name: 'v-hover',
+import { defineComponent } from "../../util/index.mjs";
+export const VHover = defineComponent({
+  name: 'VHover',
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    value: {
+    disabled: Boolean,
+    modelValue: {
       type: Boolean,
       default: undefined
-    }
-  },
-  methods: {
-    onMouseEnter() {
-      this.runDelay('open');
     },
-
-    onMouseLeave() {
-      this.runDelay('close');
-    }
-
+    ...makeDelayProps()
+  },
+  emits: {
+    'update:modelValue': value => true
   },
 
-  render() {
-    if (!this.$scopedSlots.default && this.value === undefined) {
-      consoleWarn('v-hover is missing a default scopedSlot or bound value', this);
-      return null;
-    }
-
-    let element;
-    /* istanbul ignore else */
-
-    if (this.$scopedSlots.default) {
-      element = this.$scopedSlots.default({
-        hover: this.isActive
-      });
-    }
-
-    if (Array.isArray(element) && element.length === 1) {
-      element = element[0];
-    }
-
-    if (!element || Array.isArray(element) || !element.tag) {
-      consoleWarn('v-hover should only contain a single element', this);
-      return element;
-    }
-
-    if (!this.disabled) {
-      element.data = element.data || {};
-
-      this._g(element.data, {
-        mouseenter: this.onMouseEnter,
-        mouseleave: this.onMouseLeave
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isHovering = useProxiedModel(props, 'modelValue');
+    const {
+      runOpenDelay,
+      runCloseDelay
+    } = useDelay(props, value => !props.disabled && (isHovering.value = value));
+    return () => {
+      var _slots$default;
+
+      return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+        isHovering: isHovering.value,
+        props: {
+          onMouseenter: runOpenDelay,
+          onMouseleave: runCloseDelay
+        }
       });
-    }
-
-    return element;
+    };
   }
 
 });

package/lib/components/VHover/VHover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VHover/VHover.ts"],"names":["Delayable","Toggleable","mixins","consoleWarn","extend","name","props","disabled","type","Boolean","default","value","undefined","methods","onMouseEnter","runDelay","onMouseLeave","render","$scopedSlots","element","hover","isActive","Array","isArray","length","tag","data","_g","mouseenter","mouseleave"],"mappings":"AAAA;;AACA;AAEA;OACOA,S;OACAC,U,2CAEP;;OACOC,M;SACEC,W,kCAET;;AAGA,eAAeD,MAAM,CACnBF,SADmB,EAEnBC;AACA;AAHmB,CAAN,CAIbG,MAJa,CAIN;AACPC,EAAAA,IAAI,EAAE,SADC;AAGPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEC,OADE;AAERC,MAAAA,OAAO,EAAE;AAFD,KADL;AAKLC,IAAAA,KAAK,EAAE;AACLH,MAAAA,IAAI,EAAEC,OADD;AAELC,MAAAA,OAAO,EAAEE;AAFJ;AALF,GAHA;AAcPC,EAAAA,OAAO,EAAE;AACPC,IAAAA,YAAY,GAAI;AACd,WAAKC,QAAL,CAAc,MAAd;AACD,KAHM;;AAIPC,IAAAA,YAAY,GAAI;AACd,WAAKD,QAAL,CAAc,OAAd;AACD;;AANM,GAdF;;AAuBPE,EAAAA,MAAM,GAAW;AACf,QAAI,CAAC,KAAKC,YAAL,CAAkBR,OAAnB,IAA8B,KAAKC,KAAL,KAAeC,SAAjD,EAA4D;AAC1DT,MAAAA,WAAW,CAAC,wDAAD,EAA2D,IAA3D,CAAX;AAEA,aAAO,IAAP;AACD;;AAED,QAAIgB,OAAJ;AAEA;;AACA,QAAI,KAAKD,YAAL,CAAkBR,OAAtB,EAA+B;AAC7BS,MAAAA,OAAO,GAAG,KAAKD,YAAL,CAAkBR,OAAlB,CAA0B;AAAEU,QAAAA,KAAK,EAAE,KAAKC;AAAd,OAA1B,CAAV;AACD;;AAED,QAAIC,KAAK,CAACC,OAAN,CAAcJ,OAAd,KAA0BA,OAAO,CAACK,MAAR,KAAmB,CAAjD,EAAoD;AAClDL,MAAAA,OAAO,GAAGA,OAAO,CAAC,CAAD,CAAjB;AACD;;AAED,QAAI,CAACA,OAAD,IAAYG,KAAK,CAACC,OAAN,CAAcJ,OAAd,CAAZ,IAAsC,CAACA,OAAO,CAACM,GAAnD,EAAwD;AACtDtB,MAAAA,WAAW,CAAC,8CAAD,EAAiD,IAAjD,CAAX;AAEA,aAAOgB,OAAP;AACD;;AAED,QAAI,CAAC,KAAKZ,QAAV,EAAoB;AAClBY,MAAAA,OAAO,CAACO,IAAR,GAAeP,OAAO,CAACO,IAAR,IAAgB,EAA/B;;AACA,WAAKC,EAAL,CAAQR,OAAO,CAACO,IAAhB,EAAsB;AACpBE,QAAAA,UAAU,EAAE,KAAKd,YADG;AAEpBe,QAAAA,UAAU,EAAE,KAAKb;AAFG,OAAtB;AAID;;AAED,WAAOG,OAAP;AACD;;AAxDM,CAJM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Mixins\nimport Delayable from '../../mixins/delayable'\nimport Toggleable from '../../mixins/toggleable'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport { consoleWarn } from '../../util/console'\n\n// Types\nimport { VNode, ScopedSlotChildren } from 'vue/types/vnode'\n\nexport default mixins(\n  Delayable,\n  Toggleable\n  /* @vue/component */\n).extend({\n  name: 'v-hover',\n\n  props: {\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    value: {\n      type: Boolean,\n      default: undefined,\n    },\n  },\n\n  methods: {\n    onMouseEnter () {\n      this.runDelay('open')\n    },\n    onMouseLeave () {\n      this.runDelay('close')\n    },\n  },\n\n  render (): VNode {\n    if (!this.$scopedSlots.default && this.value === undefined) {\n      consoleWarn('v-hover is missing a default scopedSlot or bound value', this)\n\n      return null as any\n    }\n\n    let element: VNode | ScopedSlotChildren\n\n    /* istanbul ignore else */\n    if (this.$scopedSlots.default) {\n      element = this.$scopedSlots.default({ hover: this.isActive })\n    }\n\n    if (Array.isArray(element) && element.length === 1) {\n      element = element[0]\n    }\n\n    if (!element || Array.isArray(element) || !element.tag) {\n      consoleWarn('v-hover should only contain a single element', this)\n\n      return element as any\n    }\n\n    if (!this.disabled) {\n      element.data = element.data || {}\n      this._g(element.data, {\n        mouseenter: this.onMouseEnter,\n        mouseleave: this.onMouseLeave,\n      })\n    }\n\n    return element\n  },\n})\n"],"file":"VHover.mjs"}
+{"version":3,"sources":["../../../src/components/VHover/VHover.tsx"],"names":["makeDelayProps","useDelay","useProxiedModel","defineComponent","VHover","name","props","disabled","Boolean","modelValue","type","default","undefined","emits","value","setup","slots","isHovering","runOpenDelay","runCloseDelay","onMouseenter","onMouseleave"],"mappings":"AAAA;SACSA,c,EAAgBC,Q;SAChBC,e,8CAET;;SACSC,e;AAET,OAAO,MAAMC,MAAM,GAAGD,eAAe,CAAC;AACpCE,EAAAA,IAAI,EAAE,QAD8B;AAGpCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,UAAU,EAAE;AACVC,MAAAA,IAAI,EAAEF,OADI;AAEVG,MAAAA,OAAO,EAAEC;AAFC,KAFP;AAOL,OAAGZ,cAAc;AAPZ,GAH6B;AAapCa,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAoB;AADpC,GAb6B;;AAiBpCC,EAAAA,KAAK,CAAET,KAAF,QAAoB;AAAA,QAAX;AAAEU,MAAAA;AAAF,KAAW;AACvB,UAAMC,UAAU,GAAGf,eAAe,CAACI,KAAD,EAAQ,YAAR,CAAlC;AACA,UAAM;AAAEY,MAAAA,YAAF;AAAgBC,MAAAA;AAAhB,QAAkClB,QAAQ,CAACK,KAAD,EAAQQ,KAAK,IAAI,CAACR,KAAK,CAACC,QAAP,KAAoBU,UAAU,CAACH,KAAX,GAAmBA,KAAvC,CAAjB,CAAhD;AAEA,WAAO;AAAA;;AAAA,+BAAME,KAAK,CAACL,OAAZ,qBAAM,oBAAAK,KAAK,EAAW;AAC3BC,QAAAA,UAAU,EAAEA,UAAU,CAACH,KADI;AAE3BR,QAAAA,KAAK,EAAE;AACLc,UAAAA,YAAY,EAAEF,YADT;AAELG,UAAAA,YAAY,EAAEF;AAFT;AAFoB,OAAX,CAAX;AAAA,KAAP;AAOD;;AA5BmC,CAAD,CAA9B","sourcesContent":["// Composables\nimport { makeDelayProps, useDelay } from '@/composables/delay'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VHover = defineComponent({\n  name: 'VHover',\n\n  props: {\n    disabled: Boolean,\n    modelValue: {\n      type: Boolean,\n      default: undefined,\n    },\n\n    ...makeDelayProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isHovering = useProxiedModel(props, 'modelValue')\n    const { runOpenDelay, runCloseDelay } = useDelay(props, value => !props.disabled && (isHovering.value = value))\n\n    return () => slots.default?.({\n      isHovering: isHovering.value,\n      props: {\n        onMouseenter: runOpenDelay,\n        onMouseleave: runCloseDelay,\n      },\n    })\n  },\n})\n"],"file":"VHover.mjs"}

package/lib/components/VHover/index.mjs

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

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

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

package/lib/components/VIcon/VIcon.css

@@ -0,0 +1,65 @@
+.v-icon {
+  --v-icon-size-multiplier: 1;
+  align-items: center;
+  display: inline-flex;
+  font-feature-settings: "liga";
+  height: 1em;
+  justify-content: center;
+  letter-spacing: normal;
+  line-height: 1;
+  position: relative;
+  text-indent: 0;
+  user-select: none;
+  vertical-align: middle;
+  width: 1em;
+}
+.v-icon--clickable {
+  cursor: pointer;
+}
+.v-icon--size-x-small {
+  font-size: calc(var(--v-icon-size-multiplier) * 1em);
+}
+.v-icon--size-small {
+  font-size: calc(var(--v-icon-size-multiplier) * 1.25em);
+}
+.v-icon--size-default {
+  font-size: calc(var(--v-icon-size-multiplier) * 1.5em);
+}
+.v-icon--size-large {
+  font-size: calc(var(--v-icon-size-multiplier) * 1.75em);
+}
+.v-icon--size-x-large {
+  font-size: calc(var(--v-icon-size-multiplier) * 2em);
+}
+
+.v-icon__svg {
+  fill: currentColor;
+  width: 100%;
+  height: 100%;
+}
+
+.v-icon--start {
+  margin-inline-end: 8px;
+}
+.v-btn:not(.v-btn--icon) .v-icon--start {
+  margin-inline-start: calc(var(--v-btn-height) / -9);
+  margin-inline-end: calc(var(--v-btn-height) / 4.5);
+}
+.v-btn.v-btn--stacked .v-icon--start {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin-bottom: 4px;
+}
+
+.v-icon--end {
+  margin-inline-start: 8px;
+}
+.v-btn:not(.v-btn--icon) .v-icon--end {
+  margin-inline-start: calc(var(--v-btn-height) / 4.5);
+  margin-inline-end: calc(var(--v-btn-height) / -9);
+}
+.v-btn.v-btn--stacked .v-icon--end {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin-top: 4px;
+}

package/lib/components/VIcon/VIcon.mjs

@@ -1,52 +1,59 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VIcon.sass"; // Composables
+import "./VIcon.css"; // Composables
 
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { useIcon } from "../../composables/icons.mjs";
-import { useTextColor } from "../../composables/color.mjs"; // Utilities
+import { useTextColor } from "../../composables/color.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
 
-import { computed, defineComponent, toRef } from 'vue';
-import { convertToUnit, flattenFragments, makeProps } from "../../util/index.mjs"; // Types
+import { computed, toRef } from 'vue';
+import { convertToUnit, defineComponent, flattenFragments, propsFactory } from "../../util/index.mjs"; // Types
 
-export default defineComponent({
-  name: 'VIcon',
-  props: makeProps({
-    color: String,
-    disabled: Boolean,
-    left: Boolean,
-    right: Boolean,
-    icon: {
-      type: [String, Object]
-    },
-    ...makeSizeProps(),
-    ...makeTagProps({
-      tag: 'i'
-    })
+export const makeVIconProps = propsFactory({
+  color: String,
+  start: Boolean,
+  end: Boolean,
+  icon: {
+    type: [String, Object]
+  },
+  ...makeSizeProps(),
+  ...makeTagProps({
+    tag: 'i'
   }),
+  ...makeThemeProps()
+}, 'v-icon');
+export const VIcon = defineComponent({
+  name: 'VIcon',
+  props: makeVIconProps(),
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
     let slotIcon;
 
     if (slots.default) {
       slotIcon = computed(() => {
-        var _flattenFragments$fil;
+        var _slots$default, _flattenFragments$fil;
 
-        const slot = slots.default == null ? void 0 : slots.default();
+        const slot = (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots);
         if (!slot) return;
         return (_flattenFragments$fil = flattenFragments(slot).filter(node => node.children && typeof node.children === 'string')[0]) == null ? void 0 : _flattenFragments$fil.children;
       });
     }
 
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       iconData
     } = useIcon(slotIcon || props);
     const {
       sizeClasses
-    } = useSize(props, 'v-icon');
+    } = useSize(props);
     const {
       textColorClasses,
       textColorStyles
@@ -55,10 +62,10 @@ export default defineComponent({
       return _createVNode(iconData.value.component, {
         "tag": props.tag,
         "icon": iconData.value.icon,
-        "class": ['v-icon', 'notranslate', sizeClasses.value, textColorClasses.value, {
-          'v-icon--disabled': props.disabled,
-          'v-icon--left': props.left,
-          'v-icon--right': props.right
+        "class": ['v-icon', 'notranslate', sizeClasses.value, textColorClasses.value, themeClasses.value, {
+          'v-icon--clickable': !!attrs.onClick,
+          'v-icon--start': props.start,
+          'v-icon--end': props.end
         }],
         "style": [!sizeClasses.value ? {
           fontSize: convertToUnit(props.size),
@@ -66,7 +73,7 @@ export default defineComponent({
           height: convertToUnit(props.size)
         } : undefined, textColorStyles.value],
         "aria-hidden": "true"
-      }, null, 8, ["tag", "icon", "class", "style"]);
+      }, null);
     };
   }
 

package/lib/components/VIcon/VIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VIcon/VIcon.tsx"],"names":["makeSizeProps","useSize","makeTagProps","useIcon","useTextColor","computed","defineComponent","toRef","convertToUnit","flattenFragments","makeProps","name","props","color","String","disabled","Boolean","left","right","icon","type","Object","tag","setup","slots","slotIcon","default","slot","filter","node","children","iconData","sizeClasses","textColorClasses","textColorStyles","value","fontSize","size","width","height","undefined"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,a,EAAeC,O;SACfC,Y;SACAC,O;SACAC,Y,uCAET;;AACA,SAASC,QAAT,EAAgCC,eAAhC,EAAiDC,KAAjD,QAA8D,KAA9D;SACSC,a,EAAeC,gB,EAAkBC,S,gCAE1C;;AAIA,eAAeJ,eAAe,CAAC;AAC7BK,EAAAA,IAAI,EAAE,OADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,KAAK,EAAEC,MADQ;AAEfC,IAAAA,QAAQ,EAAEC,OAFK;AAGfC,IAAAA,IAAI,EAAED,OAHS;AAIfE,IAAAA,KAAK,EAAEF,OAJQ;AAKfG,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,CAACN,MAAD,EAASO,MAAT;AADF,KALS;AAQf,OAAGrB,aAAa,EARD;AASf,OAAGE,YAAY,CAAC;AAAEoB,MAAAA,GAAG,EAAE;AAAP,KAAD;AATA,GAAD,CAHa;;AAe7BC,EAAAA,KAAK,CAAEX,KAAF,EAAS;AAAEY,IAAAA;AAAF,GAAT,EAAoB;AACvB,QAAIC,QAAJ;;AACA,QAAID,KAAK,CAACE,OAAV,EAAmB;AACjBD,MAAAA,QAAQ,GAAGpB,QAAQ,CAAC,MAAM;AAAA;;AACxB,cAAMsB,IAAI,GAAGH,KAAK,CAACE,OAAT,oBAAGF,KAAK,CAACE,OAAN,EAAb;AACA,YAAI,CAACC,IAAL,EAAW;AAEX,wCAAOlB,gBAAgB,CAACkB,IAAD,CAAhB,CAAuBC,MAAvB,CAA8BC,IAAI,IACvCA,IAAI,CAACC,QAAL,IAAiB,OAAOD,IAAI,CAACC,QAAZ,KAAyB,QADrC,EAEL,CAFK,CAAP,qBAAO,sBAEDA,QAFN;AAGD,OAPkB,CAAnB;AAQD;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAe5B,OAAO,CAACsB,QAAQ,IAAIb,KAAb,CAA5B;AACA,UAAM;AAAEoB,MAAAA;AAAF,QAAkB/B,OAAO,CAACW,KAAD,EAAQ,QAAR,CAA/B;AACA,UAAM;AAAEqB,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwC9B,YAAY,CAACG,KAAK,CAACK,KAAD,EAAQ,OAAR,CAAN,CAA1D;AAEA,WAAO,MAAM;AACX;AAAA,eAEUA,KAAK,CAACU,GAFhB;AAAA,gBAGWS,QAAQ,CAACI,KAAT,CAAehB,IAH1B;AAAA,iBAIW,CACL,QADK,EAEL,aAFK,EAGLa,WAAW,CAACG,KAHP,EAILF,gBAAgB,CAACE,KAJZ,EAKL;AACE,8BAAoBvB,KAAK,CAACG,QAD5B;AAEE,0BAAgBH,KAAK,CAACK,IAFxB;AAGE,2BAAiBL,KAAK,CAACM;AAHzB,SALK,CAJX;AAAA,iBAeW,CACL,CAACc,WAAW,CAACG,KAAb,GAAsB;AACpBC,UAAAA,QAAQ,EAAE5B,aAAa,CAACI,KAAK,CAACyB,IAAP,CADH;AAEpBC,UAAAA,KAAK,EAAE9B,aAAa,CAACI,KAAK,CAACyB,IAAP,CAFA;AAGpBE,UAAAA,MAAM,EAAE/B,aAAa,CAACI,KAAK,CAACyB,IAAP;AAHD,SAAtB,GAIKG,SALA,EAMLN,eAAe,CAACC,KANX,CAfX;AAAA,uBAuBgB;AAvBhB;AA0BD,KA3BD;AA4BD;;AA5D4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VIcon.sass'\n\n// Composables\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { useIcon } from '@/composables/icons'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ComputedRef, defineComponent, toRef } from 'vue'\nimport { convertToUnit, flattenFragments, makeProps } from '@/util'\n\n// Types\nimport type { IconValue } from '@/composables/icons'\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'VIcon',\n\n  props: makeProps({\n    color: String,\n    disabled: Boolean,\n    left: Boolean,\n    right: Boolean,\n    icon: {\n      type: [String, Object] as PropType<IconValue>,\n    },\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'i' }),\n  }),\n\n  setup (props, { slots }) {\n    let slotIcon: ComputedRef<string | undefined> | undefined\n    if (slots.default) {\n      slotIcon = computed(() => {\n        const slot = slots.default?.()\n        if (!slot) return\n\n        return flattenFragments(slot).filter(node =>\n          node.children && typeof node.children === 'string'\n        )[0]?.children as string\n      })\n    }\n\n    const { iconData } = useIcon(slotIcon || props)\n    const { sizeClasses } = useSize(props, 'v-icon')\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n\n    return () => {\n      return (\n        <iconData.value.component\n          tag={ props.tag }\n          icon={ iconData.value.icon }\n          class={[\n            'v-icon',\n            'notranslate',\n            sizeClasses.value,\n            textColorClasses.value,\n            {\n              'v-icon--disabled': props.disabled,\n              'v-icon--left': props.left,\n              'v-icon--right': props.right,\n            },\n          ]}\n          style={[\n            !sizeClasses.value ? ({\n              fontSize: convertToUnit(props.size),\n              width: convertToUnit(props.size),\n              height: convertToUnit(props.size),\n            }) : undefined,\n            textColorStyles.value,\n          ]}\n          aria-hidden=\"true\"\n        />\n      )\n    }\n  },\n})\n"],"file":"VIcon.mjs"}
+{"version":3,"sources":["../../../src/components/VIcon/VIcon.tsx"],"names":["makeSizeProps","useSize","makeTagProps","useIcon","useTextColor","makeThemeProps","provideTheme","computed","toRef","convertToUnit","defineComponent","flattenFragments","propsFactory","makeVIconProps","color","String","start","Boolean","end","icon","type","Object","tag","VIcon","name","props","setup","attrs","slots","slotIcon","default","slot","filter","node","children","themeClasses","iconData","sizeClasses","textColorClasses","textColorStyles","value","onClick","fontSize","size","width","height","undefined"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,a,EAAeC,O;SACfC,Y;SACAC,O;SACAC,Y;SACAC,c,EAAgBC,Y,uCAEzB;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,a,EAAeC,e,EAAiBC,gB,EAAkBC,Y,gCAE3D;;AAIA,OAAO,MAAMC,cAAc,GAAGD,YAAY,CAAC;AACzCE,EAAAA,KAAK,EAAEC,MADkC;AAEzCC,EAAAA,KAAK,EAAEC,OAFkC;AAGzCC,EAAAA,GAAG,EAAED,OAHoC;AAIzCE,EAAAA,IAAI,EAAE;AACJC,IAAAA,IAAI,EAAE,CAACL,MAAD,EAASM,MAAT;AADF,GAJmC;AAQzC,KAAGrB,aAAa,EARyB;AASzC,KAAGE,YAAY,CAAC;AAAEoB,IAAAA,GAAG,EAAE;AAAP,GAAD,CAT0B;AAUzC,KAAGjB,cAAc;AAVwB,CAAD,EAWvC,QAXuC,CAAnC;AAaP,OAAO,MAAMkB,KAAK,GAAGb,eAAe,CAAC;AACnCc,EAAAA,IAAI,EAAE,OAD6B;AAGnCC,EAAAA,KAAK,EAAEZ,cAAc,EAHc;;AAKnCa,EAAAA,KAAK,CAAED,KAAF,QAA2B;AAAA,QAAlB;AAAEE,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAkB;AAC9B,QAAIC,QAAJ;;AACA,QAAID,KAAK,CAACE,OAAV,EAAmB;AACjBD,MAAAA,QAAQ,GAAGtB,QAAQ,CAAC,MAAM;AAAA;;AACxB,cAAMwB,IAAI,qBAAGH,KAAK,CAACE,OAAT,qBAAG,oBAAAF,KAAK,CAAlB;AACA,YAAI,CAACG,IAAL,EAAW;AAEX,wCAAOpB,gBAAgB,CAACoB,IAAD,CAAhB,CAAuBC,MAAvB,CAA8BC,IAAI,IACvCA,IAAI,CAACC,QAAL,IAAiB,OAAOD,IAAI,CAACC,QAAZ,KAAyB,QADrC,EAEL,CAFK,CAAP,qBAAO,sBAEDA,QAFN;AAGD,OAPkB,CAAnB;AAQD;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAmB7B,YAAY,CAACmB,KAAD,CAArC;AACA,UAAM;AAAEW,MAAAA;AAAF,QAAejC,OAAO,CAAC0B,QAAQ,IAAIJ,KAAb,CAA5B;AACA,UAAM;AAAEY,MAAAA;AAAF,QAAkBpC,OAAO,CAACwB,KAAD,CAA/B;AACA,UAAM;AAAEa,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwCnC,YAAY,CAACI,KAAK,CAACiB,KAAD,EAAQ,OAAR,CAAN,CAA1D;AAEA,WAAO,MAAM;AACX;AAAA,eAEUA,KAAK,CAACH,GAFhB;AAAA,gBAGWc,QAAQ,CAACI,KAAT,CAAerB,IAH1B;AAAA,iBAIW,CACL,QADK,EAEL,aAFK,EAGLkB,WAAW,CAACG,KAHP,EAILF,gBAAgB,CAACE,KAJZ,EAKLL,YAAY,CAACK,KALR,EAML;AACE,+BAAqB,CAAC,CAACb,KAAK,CAACc,OAD/B;AAEE,2BAAiBhB,KAAK,CAACT,KAFzB;AAGE,yBAAeS,KAAK,CAACP;AAHvB,SANK,CAJX;AAAA,iBAgBW,CACL,CAACmB,WAAW,CAACG,KAAb,GAAsB;AACpBE,UAAAA,QAAQ,EAAEjC,aAAa,CAACgB,KAAK,CAACkB,IAAP,CADH;AAEpBC,UAAAA,KAAK,EAAEnC,aAAa,CAACgB,KAAK,CAACkB,IAAP,CAFA;AAGpBE,UAAAA,MAAM,EAAEpC,aAAa,CAACgB,KAAK,CAACkB,IAAP;AAHD,SAAtB,GAIKG,SALA,EAMLP,eAAe,CAACC,KANX,CAhBX;AAAA,uBAwBgB;AAxBhB;AA2BD,KA5BD;AA6BD;;AApDkC,CAAD,CAA7B","sourcesContent":["// Styles\nimport './VIcon.sass'\n\n// Composables\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { useIcon } from '@/composables/icons'\nimport { useTextColor } from '@/composables/color'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, flattenFragments, propsFactory } from '@/util'\n\n// Types\nimport type { IconValue } from '@/composables/icons'\nimport type { ComputedRef, PropType } from 'vue'\n\nexport const makeVIconProps = propsFactory({\n  color: String,\n  start: Boolean,\n  end: Boolean,\n  icon: {\n    type: [String, Object] as PropType<IconValue>,\n  },\n\n  ...makeSizeProps(),\n  ...makeTagProps({ tag: 'i' }),\n  ...makeThemeProps(),\n}, 'v-icon')\n\nexport const VIcon = defineComponent({\n  name: 'VIcon',\n\n  props: makeVIconProps(),\n\n  setup (props, { attrs, slots }) {\n    let slotIcon: ComputedRef<string | undefined> | undefined\n    if (slots.default) {\n      slotIcon = computed(() => {\n        const slot = slots.default?.()\n        if (!slot) return\n\n        return flattenFragments(slot).filter(node =>\n          node.children && typeof node.children === 'string'\n        )[0]?.children as string\n      })\n    }\n\n    const { themeClasses } = provideTheme(props)\n    const { iconData } = useIcon(slotIcon || props)\n    const { sizeClasses } = useSize(props)\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n\n    return () => {\n      return (\n        <iconData.value.component\n          tag={ props.tag }\n          icon={ iconData.value.icon }\n          class={[\n            'v-icon',\n            'notranslate',\n            sizeClasses.value,\n            textColorClasses.value,\n            themeClasses.value,\n            {\n              'v-icon--clickable': !!attrs.onClick,\n              'v-icon--start': props.start,\n              'v-icon--end': props.end,\n            },\n          ]}\n          style={[\n            !sizeClasses.value ? ({\n              fontSize: convertToUnit(props.size),\n              width: convertToUnit(props.size),\n              height: convertToUnit(props.size),\n            }) : undefined,\n            textColorStyles.value,\n          ]}\n          aria-hidden=\"true\"\n        />\n      )\n    }\n  },\n})\n"],"file":"VIcon.mjs"}