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

package/lib/components/VItemGroup/VItemGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VItemGroup/VItemGroup.ts"],"names":["Proxyable","Themeable","mixins","consoleWarn","BaseItemGroup","extend","name","props","activeClass","type","String","default","mandatory","Boolean","max","Number","multiple","tag","data","internalLazyValue","value","undefined","items","computed","classes","themeClasses","selectedIndex","selectedItem","indexOf","selectedItems","filter","item","index","toggleMethod","getValue","selectedValues","internalValue","Array","isArray","v","includes","watch","created","methods","genData","class","i","onClick","updateInternalValue","register","push","$on","length","updateMandatory","updateItem","unregister","_isDestroyed","splice","valueIndex","isActive","updateItemsState","$nextTick","forEach","updateMultiple","updateSingle","last","slice","reverse","find","disabled","defaultValue","findIndex","val","isSame","render","h","$slots","provide","itemGroup"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VItemGroup.sass'\n\n// Mixins\nimport Groupable from '../../mixins/groupable'\nimport Proxyable from '../../mixins/proxyable'\nimport Themeable from '../../mixins/themeable'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport { consoleWarn } from '../../util/console'\n\n// Types\nimport { VNode } from 'vue/types'\n\nexport type GroupableInstance = InstanceType<typeof Groupable> & {\n  id?: string\n  to?: any\n  value?: any\n }\n\nexport const BaseItemGroup = mixins(\n  Proxyable,\n  Themeable\n).extend({\n  name: 'base-item-group',\n\n  props: {\n    activeClass: {\n      type: String,\n      default: 'v-item--active',\n    },\n    mandatory: Boolean,\n    max: {\n      type: [Number, String],\n      default: null,\n    },\n    multiple: Boolean,\n    tag: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  data () {\n    return {\n      // As long as a value is defined, show it\n      // Otherwise, check if multiple\n      // to determine which default to provide\n      internalLazyValue: this.value !== undefined\n        ? this.value\n        : this.multiple ? [] : undefined,\n      items: [] as GroupableInstance[],\n    }\n  },\n\n  computed: {\n    classes (): Record<string, boolean> {\n      return {\n        'v-item-group': true,\n        ...this.themeClasses,\n      }\n    },\n    selectedIndex (): number {\n      return (this.selectedItem && this.items.indexOf(this.selectedItem)) || -1\n    },\n    selectedItem (): GroupableInstance | undefined {\n      if (this.multiple) return undefined\n\n      return this.selectedItems[0]\n    },\n    selectedItems (): GroupableInstance[] {\n      return this.items.filter((item, index) => {\n        return this.toggleMethod(this.getValue(item, index))\n      })\n    },\n    selectedValues (): any[] {\n      if (this.internalValue == null) return []\n\n      return Array.isArray(this.internalValue)\n        ? this.internalValue\n        : [this.internalValue]\n    },\n    toggleMethod (): (v: any) => boolean {\n      if (!this.multiple) {\n        return (v: any) => this.internalValue === v\n      }\n\n      const internalValue = this.internalValue\n      if (Array.isArray(internalValue)) {\n        return (v: any) => internalValue.includes(v)\n      }\n\n      return () => false\n    },\n  },\n\n  watch: {\n    internalValue: 'updateItemsState',\n    items: 'updateItemsState',\n  },\n\n  created () {\n    if (this.multiple && !Array.isArray(this.internalValue)) {\n      consoleWarn('Model must be bound to an array if the multiple property is true.', this)\n    }\n  },\n\n  methods: {\n\n    genData (): object {\n      return {\n        class: this.classes,\n      }\n    },\n    getValue (item: GroupableInstance, i: number): unknown {\n      return item.value == null || item.value === ''\n        ? i\n        : item.value\n    },\n    onClick (item: GroupableInstance) {\n      this.updateInternalValue(\n        this.getValue(item, this.items.indexOf(item))\n      )\n    },\n    register (item: GroupableInstance) {\n      const index = this.items.push(item) - 1\n\n      item.$on('change', () => this.onClick(item))\n\n      // If no value provided and mandatory,\n      // assign first registered item\n      if (this.mandatory && !this.selectedValues.length) {\n        this.updateMandatory()\n      }\n\n      this.updateItem(item, index)\n    },\n    unregister (item: GroupableInstance) {\n      if (this._isDestroyed) return\n\n      const index = this.items.indexOf(item)\n      const value = this.getValue(item, index)\n\n      this.items.splice(index, 1)\n\n      const valueIndex = this.selectedValues.indexOf(value)\n\n      // Items is not selected, do nothing\n      if (valueIndex < 0) return\n\n      // If not mandatory, use regular update process\n      if (!this.mandatory) {\n        return this.updateInternalValue(value)\n      }\n\n      // Remove the value\n      if (this.multiple && Array.isArray(this.internalValue)) {\n        this.internalValue = this.internalValue.filter(v => v !== value)\n      } else {\n        this.internalValue = undefined\n      }\n\n      // If mandatory and we have no selection\n      // add the last item as value\n      /* istanbul ignore else */\n      if (!this.selectedItems.length) {\n        this.updateMandatory(true)\n      }\n    },\n    updateItem (item: GroupableInstance, index: number) {\n      const value = this.getValue(item, index)\n\n      item.isActive = this.toggleMethod(value)\n    },\n    // https://github.com/vuetifyjs/vuetify/issues/5352\n    updateItemsState () {\n      this.$nextTick(() => {\n        if (this.mandatory &&\n          !this.selectedItems.length\n        ) {\n          return this.updateMandatory()\n        }\n\n        // TODO: Make this smarter so it\n        // doesn't have to iterate every\n        // child in an update\n        this.items.forEach(this.updateItem)\n      })\n    },\n    updateInternalValue (value: any) {\n      this.multiple\n        ? this.updateMultiple(value)\n        : this.updateSingle(value)\n    },\n    updateMandatory (last?: boolean) {\n      if (!this.items.length) return\n\n      const items = this.items.slice()\n\n      if (last) items.reverse()\n\n      const item = items.find(item => !item.disabled)\n\n      // If no tabs are available\n      // aborts mandatory value\n      if (!item) return\n\n      const index = this.items.indexOf(item)\n\n      this.updateInternalValue(\n        this.getValue(item, index)\n      )\n    },\n    updateMultiple (value: any) {\n      const defaultValue = Array.isArray(this.internalValue)\n        ? this.internalValue\n        : []\n      const internalValue = defaultValue.slice()\n      const index = internalValue.findIndex(val => val === value)\n\n      if (\n        this.mandatory &&\n        // Item already exists\n        index > -1 &&\n        // value would be reduced below min\n        internalValue.length - 1 < 1\n      ) return\n\n      if (\n        // Max is set\n        this.max != null &&\n        // Item doesn't exist\n        index < 0 &&\n        // value would be increased above max\n        internalValue.length + 1 > this.max\n      ) return\n\n      index > -1\n        ? internalValue.splice(index, 1)\n        : internalValue.push(value)\n\n      this.internalValue = internalValue\n    },\n    updateSingle (value: any) {\n      const isSame = value === this.internalValue\n\n      if (this.mandatory && isSame) return\n\n      this.internalValue = isSame ? undefined : value\n    },\n  },\n\n  render (h): VNode {\n    return h(this.tag, this.genData(), this.$slots.default)\n  },\n})\n\nexport default BaseItemGroup.extend({\n  name: 'v-item-group',\n\n  provide (): object {\n    return {\n      itemGroup: this,\n    }\n  },\n})\n"],"file":"VItemGroup.mjs"}
+{"version":3,"sources":["../../../src/components/VItemGroup/VItemGroup.tsx"],"names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","defineComponent","VItemGroupSymbol","Symbol","for","VItemGroup","name","props","selectedClass","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","default"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y,uCAEzB;;SACSC,e;AAET,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,OAAO,MAAMC,UAAU,GAAGJ,eAAe,CAAC;AACxCK,EAAAA,IAAI,EAAE,YADkC;AAGxCC,EAAAA,KAAK,EAAE,EACL,GAAGX,cAAc,CAAC;AAChBY,MAAAA,aAAa,EAAE;AADC,KAAD,CADZ;AAIL,OAAGV,YAAY,EAJV;AAKL,OAAGC,cAAc;AALZ,GAHiC;AAWxCU,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAgB;AADhC,GAXiC;;AAexCC,EAAAA,KAAK,CAAEJ,KAAF,QAAoB;AAAA,QAAX;AAAEK,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBb,YAAY,CAACO,KAAD,CAArC;AACA,UAAM;AAAEO,MAAAA,UAAF;AAAcC,MAAAA,MAAd;AAAsBC,MAAAA,IAAtB;AAA4BC,MAAAA,IAA5B;AAAkCC,MAAAA;AAAlC,QAA+CrB,QAAQ,CAACU,KAAD,EAAQL,gBAAR,CAA7D;AAEA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,cADK,EAELW,YAAY,CAACH,KAFR;AAFJ;AAAA,0CAODE,KAAK,CAACO,OAPL,qBAOD,oBAAAP,KAAK,EAAW;AAChBE,UAAAA,UADgB;AAEhBC,UAAAA,MAFgB;AAGhBC,UAAAA,IAHgB;AAIhBC,UAAAA,IAJgB;AAKhBC,UAAAA,QAAQ,EAAEA,QAAQ,CAACR;AALH,SAAX,CAPJ;AAAA;AAAA,KAAP;AAgBD;;AAnCuC,CAAD,CAAlC","sourcesContent":["// Styles\nimport './VItemGroup.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VItemGroupSymbol = Symbol.for('vuetify:v-item-group')\n\nexport const VItemGroup = defineComponent({\n  name: 'VItemGroup',\n\n  props: {\n    ...makeGroupProps({\n      selectedClass: 'v-item--selected',\n    }),\n    ...makeTagProps(),\n    ...makeThemeProps(),\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, VItemGroupSymbol)\n\n    return () => (\n      <props.tag\n        class={[\n          'v-item-group',\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 VItemGroup = InstanceType<typeof VItemGroup>\n"],"file":"VItemGroup.mjs"}

package/lib/components/VItemGroup/VItemGroup.sass

@@ -1,7 +1,8 @@
-@import './_variables.scss'
+@forward './variables'
+@use './variables' as *
 
 .v-item-group
   flex: 0 1 auto
-  position: relative
   max-width: 100%
+  position: relative
   transition: $item-group-transition

package/lib/components/VItemGroup/_variables.scss

@@ -1,3 +1,4 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
-$item-group-transition: $primary-transition !default;
+// Defaults
+$item-group-transition: 0.2s settings.$standard-easing !default;

package/lib/components/VItemGroup/index.mjs

@@ -1,10 +1,3 @@
-import VItem from "./VItem.mjs";
-import VItemGroup from "./VItemGroup.mjs";
-export { VItem, VItemGroup };
-export default {
-  $_vuetify_subcomponents: {
-    VItem,
-    VItemGroup
-  }
-};
+export { VItemGroup } from "./VItemGroup.mjs";
+export { VItem } from "./VItem.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VItemGroup/index.ts"],"names":["VItem","VItemGroup","$_vuetify_subcomponents"],"mappings":"OAAOA,K;OACAC,U;AAEP,SACED,KADF,EAEEC,UAFF;AAKA,eAAe;AACbC,EAAAA,uBAAuB,EAAE;AACvBF,IAAAA,KADuB;AAEvBC,IAAAA;AAFuB;AADZ,CAAf","sourcesContent":["import VItem from './VItem'\nimport VItemGroup from './VItemGroup'\n\nexport {\n  VItem,\n  VItemGroup,\n}\n\nexport default {\n  $_vuetify_subcomponents: {\n    VItem,\n    VItemGroup,\n  },\n}\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VItemGroup/index.ts"],"names":["VItemGroup","VItem"],"mappings":"SAASA,U;SACAC,K","sourcesContent":["export { VItemGroup } from './VItemGroup'\nexport { VItem } from './VItem'\n"],"file":"index.mjs"}

package/lib/components/VKbd/VKbd.css

@@ -0,0 +1,9 @@
+.v-kbd {
+  background: rgb(var(--v-kbd-background-color));
+  border-radius: 3px;
+  color: rgb(var(--v-kbd-color));
+  font-size: 85%;
+  font-weight: normal;
+  padding: 0.2em 0.4rem;
+  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);
+}

package/lib/components/VKbd/VKbd.sass

@@ -0,0 +1,13 @@
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-kbd
+  background: rgb(var(--v-kbd-background-color))
+  border-radius: $kbd-border-radius
+  color: rgb(var(--v-kbd-color))
+  font-size: $kbd-font-size
+  font-weight: $kbd-font-weight
+  padding: $kbd-padding
+
+  @include tools.elevation($kbd-elevation)

package/lib/components/VKbd/_variables.scss

@@ -0,0 +1,6 @@
+// Defaults
+$kbd-border-radius: 3px !default;
+$kbd-elevation: 2 !default;
+$kbd-font-size: 85% !default;
+$kbd-font-weight: normal !default;
+$kbd-padding: .2em .4rem !default;

package/lib/components/VKbd/index.mjs

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

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

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

package/lib/components/VLabel/VLabel.css

@@ -0,0 +1,12 @@
+.v-label {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 1rem;
+  letter-spacing: 0.009375em;
+  min-width: 0;
+  opacity: var(--v-medium-emphasis-opacity);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/lib/components/VLabel/VLabel.mjs

@@ -1,66 +1,28 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VLabel.sass"; // Mixins
-
-import Colorable from "../../mixins/colorable/index.mjs";
-import Themeable, { functionalThemeClasses } from "../../mixins/themeable/index.mjs"; // Types
+import "./VLabel.css"; // Composables
 
-import mixins from "../../util/mixins.mjs"; // Helpers
+import { makeThemeProps } from "../../composables/theme.mjs"; // Utilities
 
-import { convertToUnit } from "../../util/helpers.mjs";
-/* @vue/component */
-
-export default mixins(Themeable).extend({
-  name: 'v-label',
-  functional: true,
+import { defineComponent } from "../../util/index.mjs";
+export const VLabel = defineComponent({
+  name: 'VLabel',
   props: {
-    absolute: Boolean,
-    color: {
-      type: String,
-      default: 'primary'
-    },
-    disabled: Boolean,
-    focused: Boolean,
-    for: String,
-    left: {
-      type: [Number, String],
-      default: 0
-    },
-    right: {
-      type: [Number, String],
-      default: 'auto'
-    },
-    value: Boolean
+    text: String,
+    ...makeThemeProps()
   },
 
-  render(h, ctx) {
-    const {
-      children,
-      listeners,
-      props
-    } = ctx;
-    const data = {
-      staticClass: 'v-label',
-      class: {
-        'v-label--active': props.value,
-        'v-label--is-disabled': props.disabled,
-        ...functionalThemeClasses(ctx)
-      },
-      attrs: {
-        for: props.for,
-        'aria-hidden': !props.for
-      },
-      on: listeners,
-      style: {
-        left: convertToUnit(props.left),
-        right: convertToUnit(props.right),
-        position: props.absolute ? 'absolute' : 'relative'
-      },
-      ref: 'label'
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => {
+      var _slots$default;
+
+      return _createVNode("label", {
+        "class": "v-label"
+      }, [props.text, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
     };
-    return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, data), children);
   }
 
 });

package/lib/components/VLabel/VLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLabel/VLabel.ts"],"names":["Colorable","Themeable","functionalThemeClasses","mixins","convertToUnit","extend","name","functional","props","absolute","Boolean","color","type","String","default","disabled","focused","for","left","Number","right","value","render","h","ctx","children","listeners","data","staticClass","class","attrs","on","style","position","ref","options","methods","setTextColor"],"mappings":"AAAA;;AACA;AAEA;AACA,uB,CAEA;;OACOA,S;OACAC,S,IAAaC,sB,4CAEpB;;OAEOC,M,+BAEP;;SACSC,a;AAET;;AACA,eAAeD,MAAM,CAACF,SAAD,CAAN,CAAkBI,MAAlB,CAAyB;AACtCC,EAAAA,IAAI,EAAE,SADgC;AAGtCC,EAAAA,UAAU,EAAE,IAH0B;AAKtCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC,MADD;AAELC,MAAAA,OAAO,EAAE;AAFJ,KAFF;AAMLC,IAAAA,QAAQ,EAAEL,OANL;AAOLM,IAAAA,OAAO,EAAEN,OAPJ;AAQLO,IAAAA,GAAG,EAAEJ,MARA;AASLK,IAAAA,IAAI,EAAE;AACJN,MAAAA,IAAI,EAAE,CAACO,MAAD,EAASN,MAAT,CADF;AAEJC,MAAAA,OAAO,EAAE;AAFL,KATD;AAaLM,IAAAA,KAAK,EAAE;AACLR,MAAAA,IAAI,EAAE,CAACO,MAAD,EAASN,MAAT,CADD;AAELC,MAAAA,OAAO,EAAE;AAFJ,KAbF;AAiBLO,IAAAA,KAAK,EAAEX;AAjBF,GAL+B;;AAyBtCY,EAAAA,MAAM,CAAEC,CAAF,EAAKC,GAAL,EAAiB;AACrB,UAAM;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,SAAZ;AAAuBlB,MAAAA;AAAvB,QAAiCgB,GAAvC;AACA,UAAMG,IAAI,GAAG;AACXC,MAAAA,WAAW,EAAE,SADF;AAEXC,MAAAA,KAAK,EAAE;AACL,2BAAmBrB,KAAK,CAACa,KADpB;AAEL,gCAAwBb,KAAK,CAACO,QAFzB;AAGL,WAAGb,sBAAsB,CAACsB,GAAD;AAHpB,OAFI;AAOXM,MAAAA,KAAK,EAAE;AACLb,QAAAA,GAAG,EAAET,KAAK,CAACS,GADN;AAEL,uBAAe,CAACT,KAAK,CAACS;AAFjB,OAPI;AAWXc,MAAAA,EAAE,EAAEL,SAXO;AAYXM,MAAAA,KAAK,EAAE;AACLd,QAAAA,IAAI,EAAEd,aAAa,CAACI,KAAK,CAACU,IAAP,CADd;AAELE,QAAAA,KAAK,EAAEhB,aAAa,CAACI,KAAK,CAACY,KAAP,CAFf;AAGLa,QAAAA,QAAQ,EAAEzB,KAAK,CAACC,QAAN,GAAiB,UAAjB,GAA8B;AAHnC,OAZI;AAiBXyB,MAAAA,GAAG,EAAE;AAjBM,KAAb;AAoBA,WAAOX,CAAC,CAAC,OAAD,EAAUvB,SAAS,CAACmC,OAAV,CAAkBC,OAAlB,CAA0BC,YAA1B,CAAuC7B,KAAK,CAACQ,OAAN,IAAiBR,KAAK,CAACG,KAA9D,EAAqEgB,IAArE,CAAV,EAAsFF,QAAtF,CAAR;AACD;;AAhDqC,CAAzB,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VLabel.sass'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Themeable, { functionalThemeClasses } from '../../mixins/themeable'\n\n// Types\nimport { VNode } from 'vue'\nimport mixins from '../../util/mixins'\n\n// Helpers\nimport { convertToUnit } from '../../util/helpers'\n\n/* @vue/component */\nexport default mixins(Themeable).extend({\n  name: 'v-label',\n\n  functional: true,\n\n  props: {\n    absolute: Boolean,\n    color: {\n      type: String,\n      default: 'primary',\n    },\n    disabled: Boolean,\n    focused: Boolean,\n    for: String,\n    left: {\n      type: [Number, String],\n      default: 0,\n    },\n    right: {\n      type: [Number, String],\n      default: 'auto',\n    },\n    value: Boolean,\n  },\n\n  render (h, ctx): VNode {\n    const { children, listeners, props } = ctx\n    const data = {\n      staticClass: 'v-label',\n      class: {\n        'v-label--active': props.value,\n        'v-label--is-disabled': props.disabled,\n        ...functionalThemeClasses(ctx),\n      },\n      attrs: {\n        for: props.for,\n        'aria-hidden': !props.for,\n      },\n      on: listeners,\n      style: {\n        left: convertToUnit(props.left),\n        right: convertToUnit(props.right),\n        position: props.absolute ? 'absolute' : 'relative',\n      },\n      ref: 'label',\n    }\n\n    return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, data), children)\n  },\n})\n"],"file":"VLabel.mjs"}
+{"version":3,"sources":["../../../src/components/VLabel/VLabel.tsx"],"names":["makeThemeProps","defineComponent","VLabel","name","props","text","String","setup","slots","default"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,c,uCAET;;SACSC,e;AAET,OAAO,MAAMC,MAAM,GAAGD,eAAe,CAAC;AACpCE,EAAAA,IAAI,EAAE,QAD8B;AAGpCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEC,MADD;AAGL,OAAGN,cAAc;AAHZ,GAH6B;;AASpCO,EAAAA,KAAK,CAAEH,KAAF,QAAoB;AAAA,QAAX;AAAEI,MAAAA;AAAF,KAAW;AACvB,WAAO;AAAA;;AAAA;AAAA,iBACQ;AADR,UAEDJ,KAAK,CAACC,IAFL,oBAIDG,KAAK,CAACC,OAJL,qBAID,oBAAAD,KAAK,CAJJ;AAAA,KAAP;AAOD;;AAjBmC,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VLabel.sass'\n\n// Composables\nimport { makeThemeProps } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VLabel = defineComponent({\n  name: 'VLabel',\n\n  props: {\n    text: String,\n\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    return () => (\n      <label class=\"v-label\">\n        { props.text }\n\n        { slots.default?.() }\n      </label>\n    )\n  },\n})\n\nexport type VLabel = InstanceType<typeof VLabel>\n"],"file":"VLabel.mjs"}

package/lib/components/VLabel/VLabel.sass

@@ -1,14 +1,16 @@
-@import './_variables.scss'
-
-// Theme
-+theme(v-label) using ($material)
-  color: map-deep-get($material, 'text', 'secondary')
-
-  &--is-disabled
-    color: map-deep-get($material, 'text', 'disabled')
+@forward './variables'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-label
+  align-items: center
+  cursor: pointer
+  display: $label-display
   font-size: $label-font-size
-  line-height: $label-line-height
-  min-height: $label-min-height
-  transition: .3s map-get($transition, 'swing')
+  letter-spacing: $label-letter-spacing
+  min-width: 0
+  opacity: var(--v-medium-emphasis-opacity)
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap

package/lib/components/VLabel/_variables.scss

@@ -1,5 +1,8 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
-$label-font-size: 16px !default;
-$label-line-height: 1 !default;
-$label-min-height: 8px !default;
+$label-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
+$label-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
+$label-display: inline-flex !default;
+$label-error-color: rgb(var(--v-theme-error)) !default;
+$label-font-size: 1rem !default;
+$label-letter-spacing: .009375em !default;

package/lib/components/VLabel/index.mjs

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

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

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

package/lib/components/VLayout/VLayout.css

@@ -0,0 +1,11 @@
+.v-layout {
+  --v-scrollbar-offset: 0px;
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+.v-layout--full-height {
+  --v-scrollbar-offset: inherit;
+  height: 100%;
+}

package/lib/components/VLayout/VLayout.mjs

@@ -1,29 +1,34 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VLayout.sass"; // Utilities
+import "./VLayout.css"; // Utilities
 
-import { defineComponent } from 'vue';
-import { makeProps, useRender } from "../../util/index.mjs"; // Composables
+import { defineComponent, useRender } from "../../util/index.mjs"; // Composables
 
 import { createLayout, makeLayoutProps } from "../../composables/layout.mjs";
-export default defineComponent({
+export const VLayout = defineComponent({
   name: 'VLayout',
-  props: makeProps(makeLayoutProps()),
+  props: makeLayoutProps(),
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       layoutClasses,
+      layoutStyles,
       getLayoutItem,
-      items
+      items,
+      layoutRef
     } = createLayout(props);
-    useRender(() => _createVNode("div", {
-      "class": layoutClasses.value,
-      "style": {
-        height: props.fullHeight ? '100vh' : undefined
-      }
-    }, [slots.default == null ? void 0 : slots.default()], 6));
+    useRender(() => {
+      var _slots$default;
+
+      return _createVNode("div", {
+        "ref": layoutRef,
+        "class": layoutClasses.value,
+        "style": layoutStyles.value
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+    });
     return {
       getLayoutItem,
       items

package/lib/components/VLayout/VLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLayout/VLayout.tsx"],"names":["defineComponent","makeProps","useRender","createLayout","makeLayoutProps","name","props","setup","slots","layoutClasses","getLayoutItem","items","value","height","fullHeight","undefined","default"],"mappings":";AAAA;AACA,wB,CAEA;;AACA,SAASA,eAAT,QAAgC,KAAhC;SACSC,S,EAAWC,S,gCAEpB;;SACSC,Y,EAAcC,e;AAEvB,eAAeJ,eAAe,CAAC;AAC7BK,EAAAA,IAAI,EAAE,SADuB;AAG7BC,EAAAA,KAAK,EAAEL,SAAS,CAACG,eAAe,EAAhB,CAHa;;AAK7BG,EAAAA,KAAK,CAAED,KAAF,EAAS;AAAEE,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA,aAAjB;AAAgCC,MAAAA;AAAhC,QAA0CR,YAAY,CAACG,KAAD,CAA5D;AAEAJ,IAAAA,SAAS,CAAC;AAAA,eAECO,aAAa,CAACG,KAFf;AAAA,eAGC;AACLC,QAAAA,MAAM,EAAEP,KAAK,CAACQ,UAAN,GAAmB,OAAnB,GAA6BC;AADhC;AAHD,QAMLP,KAAK,CAACQ,OAND,oBAMLR,KAAK,CAACQ,OAAN,EANK,KAAD,CAAT;AASA,WAAO;AACLN,MAAAA,aADK;AAELC,MAAAA;AAFK,KAAP;AAID;;AArB4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Utilities\nimport { defineComponent } from 'vue'\nimport { makeProps, useRender } from '@/util'\n\n// Composables\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\nexport default defineComponent({\n  name: 'VLayout',\n\n  props: makeProps(makeLayoutProps()),\n\n  setup (props, { slots }) {\n    const { layoutClasses, getLayoutItem, items } = createLayout(props)\n\n    useRender(() => (\n      <div\n        class={layoutClasses.value}\n        style={{\n          height: props.fullHeight ? '100vh' : undefined,\n        }}\n      >{ slots.default?.() }</div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n    }\n  },\n})\n"],"file":"VLayout.mjs"}
+{"version":3,"sources":["../../../src/components/VLayout/VLayout.tsx"],"names":["defineComponent","useRender","createLayout","makeLayoutProps","VLayout","name","props","setup","slots","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","value","default"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,e,EAAiBC,S,gCAE1B;;SACSC,Y,EAAcC,e;AAEvB,OAAO,MAAMC,OAAO,GAAGJ,eAAe,CAAC;AACrCK,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAEH,eAAe,EAHe;;AAKrCI,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA,YAAjB;AAA+BC,MAAAA,aAA/B;AAA8CC,MAAAA,KAA9C;AAAqDC,MAAAA;AAArD,QAAmEX,YAAY,CAACI,KAAD,CAArF;AAEAL,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,eACGY,SADH;AAAA,iBACuBJ,aAAa,CAACK,KADrC;AAAA,iBACqDJ,YAAY,CAACI;AADlE,4BAEJN,KAAK,CAACO,OAFF,qBAEJ,oBAAAP,KAAK,CAFD;AAAA,KAAD,CAAT;AAMA,WAAO;AACLG,MAAAA,aADK;AAELC,MAAAA;AAFK,KAAP;AAID;;AAlBoC,CAAD,CAA/B","sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\n// Composables\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\nexport const VLayout = defineComponent({\n  name: 'VLayout',\n\n  props: makeLayoutProps(),\n\n  setup (props, { slots }) {\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n\n    useRender(() => (\n      <div ref={ layoutRef } class={ layoutClasses.value } style={ layoutStyles.value }>\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n    }\n  },\n})\n\nexport type VLayout = InstanceType<typeof VLayout>\n"],"file":"VLayout.mjs"}

package/lib/components/VLayout/VLayout.sass

@@ -1,8 +1,10 @@
-@import './index'
-
 .v-layout
+  --v-scrollbar-offset: 0px
   position: relative
   display: flex
   flex: 1 1 auto
   overflow: hidden
-  z-index: 0
+
+  &--full-height
+    --v-scrollbar-offset: inherit
+    height: 100%

package/lib/components/VLayout/VLayoutItem.css

@@ -0,0 +1,8 @@
+.v-layout-item {
+  position: absolute;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.v-layout-item--absolute {
+  position: absolute;
+}

package/lib/components/VLayout/VLayoutItem.mjs

@@ -1,31 +1,50 @@
-import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
-// Composables
+import { createVNode as _createVNode } from "vue";
+// Styles
+import "./VLayoutItem.css"; // Composables
+
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs"; // Utilities
 
-import { computed, defineComponent, toRef } from 'vue';
-import { makeProps } from "../../util/index.mjs"; // Types
+import { computed, toRef } from 'vue';
+import { defineComponent } from "../../util/index.mjs"; // Types
 
-export default defineComponent({
+export const VLayoutItem = defineComponent({
   name: 'VLayoutItem',
-  props: makeProps({
+  props: {
     position: {
       type: String,
       required: true
     },
+    size: {
+      type: [Number, String],
+      default: 300
+    },
+    modelValue: Boolean,
     ...makeLayoutItemProps()
-  }),
+  },
 
-  setup(props, {
-    slots
-  }) {
-    const styles = useLayoutItem(props.name, toRef(props, 'priority'), computed(() => {
-      var _props$position;
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      priority: computed(() => parseInt(props.priority, 10)),
+      position: toRef(props, 'position'),
+      elementSize: toRef(props, 'size'),
+      layoutSize: toRef(props, 'size'),
+      active: toRef(props, 'modelValue'),
+      absolute: toRef(props, 'absolute')
+    });
+    return () => {
+      var _slots$default;
 
-      return (_props$position = props.position) != null ? _props$position : 'left';
-    }), toRef(props, 'size'));
-    return () => _createVNode("div", {
-      "style": styles.value
-    }, [], 4);
+      return _createVNode("div", {
+        "class": ['v-layout-item'],
+        "style": layoutItemStyles.value
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+    };
   }
 
 });

package/lib/components/VLayout/VLayoutItem.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLayout/VLayoutItem.tsx"],"names":["makeLayoutItemProps","useLayoutItem","computed","defineComponent","toRef","makeProps","name","props","position","type","String","required","setup","slots","styles","value"],"mappings":";AAAA;SACSA,mB,EAAqBC,a,wCAE9B;;AACA,SAASC,QAAT,EAAmBC,eAAnB,EAAoCC,KAApC,QAAiD,KAAjD;SACSC,S,gCAET;;AAGA,eAAeF,eAAe,CAAC;AAC7BG,EAAAA,IAAI,EAAE,aADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEC,MADE;AAERC,MAAAA,QAAQ,EAAE;AAFF,KADK;AAKf,OAAGX,mBAAmB;AALP,GAAD,CAHa;;AAW7BY,EAAAA,KAAK,CAAEL,KAAF,EAAS;AAAEM,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAMC,MAAM,GAAGb,aAAa,CAC1BM,KAAK,CAACD,IADoB,EAE1BF,KAAK,CAACG,KAAD,EAAQ,UAAR,CAFqB,EAG1BL,QAAQ,CAAC;AAAA;;AAAA,gCAAMK,KAAK,CAACC,QAAZ,8BAAwB,MAAxB;AAAA,KAAD,CAHkB,EAI1BJ,KAAK,CAACG,KAAD,EAAQ,MAAR,CAJqB,CAA5B;AAOA,WAAO;AAAA,eACQO,MAAM,CAACC;AADf,aAAP;AAGD;;AAtB4B,CAAD,CAA9B","sourcesContent":["// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\n\n// Utilities\nimport { computed, defineComponent, toRef } from 'vue'\nimport { makeProps } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport default defineComponent({\n  name: 'VLayoutItem',\n\n  props: makeProps({\n    position: {\n      type: String,\n      required: true,\n    } as Prop<'top' | 'right' | 'bottom' | 'left'>,\n    ...makeLayoutItemProps(),\n  }),\n\n  setup (props, { slots }) {\n    const styles = useLayoutItem(\n      props.name,\n      toRef(props, 'priority'),\n      computed(() => props.position ?? 'left'),\n      toRef(props, 'size')\n    )\n\n    return () => (\n      <div style={ styles.value } v-slots={ slots } />\n    )\n  },\n})\n"],"file":"VLayoutItem.mjs"}
+{"version":3,"sources":["../../../src/components/VLayout/VLayoutItem.tsx"],"names":["makeLayoutItemProps","useLayoutItem","computed","toRef","defineComponent","VLayoutItem","name","props","position","type","String","required","size","Number","default","modelValue","Boolean","setup","slots","layoutItemStyles","id","priority","parseInt","elementSize","layoutSize","active","absolute","value"],"mappings":";AAAA;AACA,2B,CAEA;;SACSA,mB,EAAqBC,a,wCAE9B;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,e,gCAET;;AAGA,OAAO,MAAMC,WAAW,GAAGD,eAAe,CAAC;AACzCE,EAAAA,IAAI,EAAE,aADmC;AAGzCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEC,MADE;AAERC,MAAAA,QAAQ,EAAE;AAFF,KADL;AAKLC,IAAAA,IAAI,EAAE;AACJH,MAAAA,IAAI,EAAE,CAACI,MAAD,EAASH,MAAT,CADF;AAEJI,MAAAA,OAAO,EAAE;AAFL,KALD;AASLC,IAAAA,UAAU,EAAEC,OATP;AAUL,OAAGhB,mBAAmB;AAVjB,GAHkC;;AAgBzCiB,EAAAA,KAAK,CAAEV,KAAF,QAAoB;AAAA,QAAX;AAAEW,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAuBlB,aAAa,CAAC;AACzCmB,MAAAA,EAAE,EAAEb,KAAK,CAACD,IAD+B;AAEzCe,MAAAA,QAAQ,EAAEnB,QAAQ,CAAC,MAAMoB,QAAQ,CAACf,KAAK,CAACc,QAAP,EAAiB,EAAjB,CAAf,CAFuB;AAGzCb,MAAAA,QAAQ,EAAEL,KAAK,CAACI,KAAD,EAAQ,UAAR,CAH0B;AAIzCgB,MAAAA,WAAW,EAAEpB,KAAK,CAACI,KAAD,EAAQ,MAAR,CAJuB;AAKzCiB,MAAAA,UAAU,EAAErB,KAAK,CAACI,KAAD,EAAQ,MAAR,CALwB;AAMzCkB,MAAAA,MAAM,EAAEtB,KAAK,CAACI,KAAD,EAAQ,YAAR,CAN4B;AAOzCmB,MAAAA,QAAQ,EAAEvB,KAAK,CAACI,KAAD,EAAQ,UAAR;AAP0B,KAAD,CAA1C;AAUA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,eADK,CAFJ;AAAA,iBAKKY,gBAAgB,CAACQ;AALtB,4BAODT,KAAK,CAACJ,OAPL,qBAOD,oBAAAI,KAAK,CAPJ;AAAA,KAAP;AAUD;;AArCwC,CAAD,CAAnC","sourcesContent":["// Styles\nimport './VLayoutItem.sass'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VLayoutItem = defineComponent({\n  name: 'VLayoutItem',\n\n  props: {\n    position: {\n      type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,\n      required: true,\n    },\n    size: {\n      type: [Number, String],\n      default: 300,\n    },\n    modelValue: Boolean,\n    ...makeLayoutItemProps(),\n  },\n\n  setup (props, { slots }) {\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      priority: computed(() => parseInt(props.priority, 10)),\n      position: toRef(props, 'position'),\n      elementSize: toRef(props, 'size'),\n      layoutSize: toRef(props, 'size'),\n      active: toRef(props, 'modelValue'),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    return () => (\n      <div\n        class={[\n          'v-layout-item',\n        ]}\n        style={ layoutItemStyles.value }\n      >\n        { slots.default?.() }\n      </div>\n    )\n  },\n})\n"],"file":"VLayoutItem.mjs"}

package/lib/components/VLayout/VLayoutItem.sass

@@ -0,0 +1,8 @@
+@use '../../styles/settings'
+
+.v-layout-item
+  position: absolute
+  transition: 0.2s settings.$standard-easing
+
+.v-layout-item--absolute
+  position: absolute

package/lib/components/VLayout/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLayout/index.ts"],"names":["default","VLayout","VLayoutItem"],"mappings":"SAASA,OAAO,IAAIC,O;SACXD,OAAO,IAAIE,W","sourcesContent":["export { default as VLayout } from './VLayout'\nexport { default as VLayoutItem } from './VLayoutItem'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VLayout/index.ts"],"names":["VLayout","VLayoutItem"],"mappings":"SAASA,O;SACAC,W","sourcesContent":["export { VLayout } from './VLayout'\nexport { VLayoutItem } from './VLayoutItem'\n"],"file":"index.mjs"}

package/lib/components/VLazy/VLazy.mjs

@@ -1,21 +1,20 @@
-// @ts-nocheck
-
-/* eslint-disable */
-// Mixins
-import Measurable from "../../mixins/measurable.mjs";
-import Toggleable from "../../mixins/toggleable/index.mjs"; // Directives
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+// Composables
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Directives
 
 import intersect from "../../directives/intersect/index.mjs"; // Utilities
 
-import mixins from "../../util/mixins.mjs";
-import { getSlot } from "../../util/helpers.mjs"; // Types
-
-export default mixins(Measurable, Toggleable).extend({
+import { defineComponent } from "../../util/index.mjs";
+export const VLazy = defineComponent({
   name: 'VLazy',
   directives: {
     intersect
   },
   props: {
+    modelValue: Boolean,
     options: {
       type: Object,
       // For more information on types, navigate to:
@@ -26,53 +25,44 @@ export default mixins(Measurable, Toggleable).extend({
         threshold: undefined
       })
     },
-    tag: {
-      type: String,
-      default: 'div'
-    },
-    transition: {
-      type: String,
-      default: 'fade-transition'
-    }
+    ...makeDimensionProps(),
+    ...makeTagProps(),
+    ...makeTransitionProps({
+      transition: 'fade-transition'
+    })
   },
-  computed: {
-    styles() {
-      return { ...this.measurableStyles
-      };
-    }
-
+  emits: {
+    'update:modelValue': value => true
   },
-  methods: {
-    genContent() {
-      const children = this.isActive && getSlot(this);
-      return this.transition ? this.$createElement('transition', {
-        props: {
-          name: this.transition
-        }
-      }, children) : children;
-    },
 
-    onObserve(entries, observer, isIntersecting) {
-      if (this.isActive) return;
-      this.isActive = isIntersecting;
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const isActive = useProxiedModel(props, 'modelValue');
+
+    function onIntersect(isIntersecting) {
+      if (isActive.value) return;
+      isActive.value = isIntersecting;
     }
 
-  },
+    return () => {
+      var _slots$default;
 
-  render(h) {
-    return h(this.tag, {
-      staticClass: 'v-lazy',
-      attrs: this.$attrs,
-      directives: [{
-        name: 'intersect',
-        value: {
-          handler: this.onObserve,
-          options: this.options
-        }
-      }],
-      on: this.$listeners,
-      style: this.styles
-    }, [this.genContent()]);
+      return _withDirectives(_createVNode(props.tag, {
+        "class": "v-lazy",
+        "style": dimensionStyles.value
+      }, {
+        default: () => [isActive.value && _createVNode(MaybeTransition, {
+          "transition": props.transition
+        }, {
+          default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+        })]
+      }), [[_resolveDirective("intersect"), onIntersect, props.options]]);
+    };
   }
 
 });