vuetify 3.5.0 → 3.5.2

package/lib/components/VSelectionControl/VSelectionControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","makeSelectionControlGroupProps","VSelectionControlGroupSymbol","useBackgroundColor","useTextColor","makeComponentProps","useDensity","useProxiedModel","Ripple","computed","inject","nextTick","ref","shallowRef","filterInputAttrs","genericComponent","getUid","matchesSelector","propsFactory","useRender","wrapInArray","makeVSelectionControlProps","label","String","baseColor","trueValue","falseValue","value","useSelectionControl","props","group","undefined","densityClasses","modelValue","isMultiple","multiple","Array","isArray","model","get","val","some","v","valueComparator","set","readonly","currentValue","newVal","filter","item","textColorClasses","textColorStyles","error","disabled","color","backgroundColorClasses","backgroundColorStyles","icon","trueIcon","falseIcon","VSelectionControl","name","directives","inheritAttrs","emits","setup","_ref","attrs","slots","uid","isFocused","isFocusVisible","input","id","isInteractive","onForceUpdate","checked","onFocus","e","target","onBlur","onInput","forceUpdate","for","rootAttrs","inputAttrs","inputNode","_createVNode","_mergeProps","type","inline","class","style","default","_withDirectives","_Fragment","_resolveDirective","ripple","stopPropagation"],"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Composables\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { useDensity } from '@/composables/density'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject, nextTick, ref, shallowRef } from 'vue'\nimport {\n  filterInputAttrs,\n  genericComponent,\n  getUid,\n  matchesSelector,\n  propsFactory,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { CSSProperties, ExtractPropTypes, Ref, VNode, WritableComputedRef } from 'vue'\nimport type { IconValue } from '@/composables/icons'\nimport type { EventProp, GenericProps } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<boolean>\n  textColorClasses: Ref<string[]>\n  textColorStyles: Ref<CSSProperties>\n  backgroundColorClasses: Ref<string[]>\n  backgroundColorStyles: Ref<CSSProperties>\n  inputNode: VNode\n  icon: IconValue | undefined\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport type VSelectionControlSlots = {\n  default: {\n    backgroundColorClasses: Ref<string[]>\n    backgroundColorStyles: Ref<CSSProperties>\n  }\n  label: { label: string | undefined, props: Record<string, unknown> }\n  input: SelectionControlSlot\n}\n\nexport const makeVSelectionControlProps = propsFactory({\n  label: String,\n  baseColor: String,\n  trueValue: null,\n  falseValue: null,\n  value: null,\n\n  ...makeComponentProps(),\n  ...makeSelectionControlGroupProps(),\n}, 'VSelectionControl')\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeVSelectionControlProps>> & {\n    'onUpdate:modelValue': EventProp | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? wrapInArray(val).some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      if (props.readonly) return\n\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    if (props.error || props.disabled) return undefined\n\n    return model.value ? props.color : props.baseColor\n  }))\n  const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => model.value ? props.trueIcon : props.falseIcon)\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    backgroundColorClasses,\n    backgroundColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>(\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (value: T) => void\n  },\n  slots: VSelectionControlSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeVSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      group,\n      densityClasses,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      backgroundColorClasses,\n      backgroundColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const isFocused = shallowRef(false)\n    const isFocusVisible = shallowRef(false)\n    const input = ref<HTMLInputElement>()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isInteractive = computed(() => !props.disabled && !props.readonly)\n\n    group?.onForceUpdate(() => {\n      if (input.value) {\n        input.value.checked = model.value\n      }\n    })\n\n    function onFocus (e: FocusEvent) {\n      if (!isInteractive.value) return\n\n      isFocused.value = true\n      if (matchesSelector(e.target as HTMLElement, ':focus-visible') !== false) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    function onInput (e: Event) {\n      if (!isInteractive.value) return\n\n      if (props.readonly && group) {\n        nextTick(() => group.forceUpdate())\n      }\n      model.value = (e.target as HTMLInputElement).checked\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      const inputNode = (\n        <input\n          ref={ input }\n          checked={ model.value }\n          disabled={ !!props.disabled }\n          id={ id.value }\n          onBlur={ onBlur }\n          onFocus={ onFocus }\n          onInput={ onInput }\n          aria-disabled={ !!props.disabled }\n          type={ props.type }\n          value={ trueValue.value }\n          name={ props.name }\n          aria-checked={ props.type === 'checkbox' ? model.value : undefined }\n          { ...inputAttrs }\n        />\n      )\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': props.inline,\n            },\n            densityClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          style={ props.style }\n        >\n          <div\n            class={[\n              'v-selection-control__wrapper',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n          >\n            { slots.default?.({\n              backgroundColorClasses,\n              backgroundColorStyles,\n            })}\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { slots.input?.({\n                model,\n                textColorClasses,\n                textColorStyles,\n                backgroundColorClasses,\n                backgroundColorStyles,\n                inputNode,\n                icon: icon.value,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              } satisfies SelectionControlSlot) ?? (\n                <>\n                  { icon.value && <VIcon key=\"icon\" icon={ icon.value } /> }\n\n                  { inputNode }\n                </>\n              )}\n            </div>\n          </div>\n\n          { label && (\n            <VLabel for={ id.value } clickable onClick={ (e: Event) => e.stopPropagation() }>\n              { label }\n            </VLabel>\n          )}\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,KAAK;AAAA,SACLC,MAAM;AAAA,SACNC,8BAA8B,EAAEC,4BAA4B,gEAErE;AAAA,SACSC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,kBAAkB;AAAA,SAClBC,UAAU;AAAA,SACVC,eAAe,8CAExB;AAAA,SACSC,MAAM,6CAEf;AACA,SAASC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAA,SAE/DC,gBAAgB,EAChBC,gBAAgB,EAChBC,MAAM,EACNC,eAAe,EACfC,YAAY,EACZC,SAAS,EACTC,WAAW,gCAGb;AA6BA,OAAO,MAAMC,0BAA0B,GAAGH,YAAY,CAAC;EACrDI,KAAK,EAAEC,MAAM;EACbC,SAAS,EAAED,MAAM;EACjBE,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE,IAAI;EAEX,GAAGtB,kBAAkB,CAAC,CAAC;EACvB,GAAGJ,8BAA8B,CAAC;AACpC,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,SAAS2B,mBAAmBA,CACjCC,KAEC,EACD;EACA,MAAMC,KAAK,GAAGpB,MAAM,CAACR,4BAA4B,EAAE6B,SAAS,CAAC;EAC7D,MAAM;IAAEC;EAAe,CAAC,GAAG1B,UAAU,CAACuB,KAAK,CAAC;EAC5C,MAAMI,UAAU,GAAG1B,eAAe,CAACsB,KAAK,EAAE,YAAY,CAAC;EACvD,MAAMJ,SAAS,GAAGhB,QAAQ,CAAC,MACzBoB,KAAK,CAACJ,SAAS,KAAKM,SAAS,GAAGF,KAAK,CAACJ,SAAS,GAC7CI,KAAK,CAACF,KAAK,KAAKI,SAAS,GAAGF,KAAK,CAACF,KAAK,GACvC,IACH,CAAC;EACF,MAAMD,UAAU,GAAGjB,QAAQ,CAAC,MAAMoB,KAAK,CAACH,UAAU,KAAKK,SAAS,GAAGF,KAAK,CAACH,UAAU,GAAG,KAAK,CAAC;EAC5F,MAAMQ,UAAU,GAAGzB,QAAQ,CAAC,MAC1B,CAAC,CAACoB,KAAK,CAACM,QAAQ,IACfN,KAAK,CAACM,QAAQ,IAAI,IAAI,IAAIC,KAAK,CAACC,OAAO,CAACJ,UAAU,CAACN,KAAK,CAC1D,CAAC;EACF,MAAMW,KAAK,GAAG7B,QAAQ,CAAC;IACrB8B,GAAGA,CAAA,EAAI;MACL,MAAMC,GAAG,GAAGV,KAAK,GAAGA,KAAK,CAACG,UAAU,CAACN,KAAK,GAAGM,UAAU,CAACN,KAAK;MAE7D,OAAOO,UAAU,CAACP,KAAK,GACnBP,WAAW,CAACoB,GAAG,CAAC,CAACC,IAAI,CAAEC,CAAM,IAAKb,KAAK,CAACc,eAAe,CAACD,CAAC,EAAEjB,SAAS,CAACE,KAAK,CAAC,CAAC,GAC5EE,KAAK,CAACc,eAAe,CAACH,GAAG,EAAEf,SAAS,CAACE,KAAK,CAAC;IACjD,CAAC;IACDiB,GAAGA,CAAEJ,GAAY,EAAE;MACjB,IAAIX,KAAK,CAACgB,QAAQ,EAAE;MAEpB,MAAMC,YAAY,GAAGN,GAAG,GAAGf,SAAS,CAACE,KAAK,GAAGD,UAAU,CAACC,KAAK;MAE7D,IAAIoB,MAAM,GAAGD,YAAY;MAEzB,IAAIZ,UAAU,CAACP,KAAK,EAAE;QACpBoB,MAAM,GAAGP,GAAG,GACR,CAAC,GAAGpB,WAAW,CAACa,UAAU,CAACN,KAAK,CAAC,EAAEmB,YAAY,CAAC,GAChD1B,WAAW,CAACa,UAAU,CAACN,KAAK,CAAC,CAACqB,MAAM,CAAEC,IAAS,IAAK,CAACpB,KAAK,CAACc,eAAe,CAACM,IAAI,EAAExB,SAAS,CAACE,KAAK,CAAC,CAAC;MACxG;MAEA,IAAIG,KAAK,EAAE;QACTA,KAAK,CAACG,UAAU,CAACN,KAAK,GAAGoB,MAAM;MACjC,CAAC,MAAM;QACLd,UAAU,CAACN,KAAK,GAAGoB,MAAM;MAC3B;IACF;EACF,CAAC,CAAC;EACF,MAAM;IAAEG,gBAAgB;IAAEC;EAAgB,CAAC,GAAG/C,YAAY,CAACK,QAAQ,CAAC,MAAM;IACxE,IAAIoB,KAAK,CAACuB,KAAK,IAAIvB,KAAK,CAACwB,QAAQ,EAAE,OAAOtB,SAAS;IAEnD,OAAOO,KAAK,CAACX,KAAK,GAAGE,KAAK,CAACyB,KAAK,GAAGzB,KAAK,CAACL,SAAS;EACpD,CAAC,CAAC,CAAC;EACH,MAAM;IAAE+B,sBAAsB;IAAEC;EAAsB,CAAC,GAAGrD,kBAAkB,CAACM,QAAQ,CAAC,MAAM;IAC1F,OACE6B,KAAK,CAACX,KAAK,IACX,CAACE,KAAK,CAACuB,KAAK,IACZ,CAACvB,KAAK,CAACwB,QAAQ,GACbxB,KAAK,CAACyB,KAAK,GAAGvB,SAAS;EAC7B,CAAC,CAAC,CAAC;EACH,MAAM0B,IAAI,GAAGhD,QAAQ,CAAC,MAAM6B,KAAK,CAACX,KAAK,GAAGE,KAAK,CAAC6B,QAAQ,GAAG7B,KAAK,CAAC8B,SAAS,CAAC;EAE3E,OAAO;IACL7B,KAAK;IACLE,cAAc;IACdP,SAAS;IACTC,UAAU;IACVY,KAAK;IACLY,gBAAgB;IAChBC,eAAe;IACfI,sBAAsB;IACtBC,qBAAqB;IACrBC;EACF,CAAC;AACH;AAEA,OAAO,MAAMG,iBAAiB,GAAG7C,gBAAgB,CAMF,CAAC,CAAC;EAC/C8C,IAAI,EAAE,mBAAmB;EAEzBC,UAAU,EAAE;IAAEtD;EAAO,CAAC;EAEtBuD,YAAY,EAAE,KAAK;EAEnBlC,KAAK,EAAER,0BAA0B,CAAC,CAAC;EAEnC2C,KAAK,EAAE;IACL,mBAAmB,EAAGrC,KAAU,IAAK;EACvC,CAAC;EAEDsC,KAAKA,CAAEpC,KAAK,EAAAqC,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAM;MACJpC,KAAK;MACLE,cAAc;MACdyB,IAAI;MACJnB,KAAK;MACLY,gBAAgB;MAChBC,eAAe;MACfI,sBAAsB;MACtBC,qBAAqB;MACrB/B;IACF,CAAC,GAAGG,mBAAmB,CAACC,KAAK,CAAC;IAC9B,MAAMwC,GAAG,GAAGrD,MAAM,CAAC,CAAC;IACpB,MAAMsD,SAAS,GAAGzD,UAAU,CAAC,KAAK,CAAC;IACnC,MAAM0D,cAAc,GAAG1D,UAAU,CAAC,KAAK,CAAC;IACxC,MAAM2D,KAAK,GAAG5D,GAAG,CAAmB,CAAC;IACrC,MAAM6D,EAAE,GAAGhE,QAAQ,CAAC,MAAMoB,KAAK,CAAC4C,EAAE,IAAK,SAAQJ,GAAI,EAAC,CAAC;IACrD,MAAMK,aAAa,GAAGjE,QAAQ,CAAC,MAAM,CAACoB,KAAK,CAACwB,QAAQ,IAAI,CAACxB,KAAK,CAACgB,QAAQ,CAAC;IAExEf,KAAK,EAAE6C,aAAa,CAAC,MAAM;MACzB,IAAIH,KAAK,CAAC7C,KAAK,EAAE;QACf6C,KAAK,CAAC7C,KAAK,CAACiD,OAAO,GAAGtC,KAAK,CAACX,KAAK;MACnC;IACF,CAAC,CAAC;IAEF,SAASkD,OAAOA,CAAEC,CAAa,EAAE;MAC/B,IAAI,CAACJ,aAAa,CAAC/C,KAAK,EAAE;MAE1B2C,SAAS,CAAC3C,KAAK,GAAG,IAAI;MACtB,IAAIV,eAAe,CAAC6D,CAAC,CAACC,MAAM,EAAiB,gBAAgB,CAAC,KAAK,KAAK,EAAE;QACxER,cAAc,CAAC5C,KAAK,GAAG,IAAI;MAC7B;IACF;IAEA,SAASqD,MAAMA,CAAA,EAAI;MACjBV,SAAS,CAAC3C,KAAK,GAAG,KAAK;MACvB4C,cAAc,CAAC5C,KAAK,GAAG,KAAK;IAC9B;IAEA,SAASsD,OAAOA,CAAEH,CAAQ,EAAE;MAC1B,IAAI,CAACJ,aAAa,CAAC/C,KAAK,EAAE;MAE1B,IAAIE,KAAK,CAACgB,QAAQ,IAAIf,KAAK,EAAE;QAC3BnB,QAAQ,CAAC,MAAMmB,KAAK,CAACoD,WAAW,CAAC,CAAC,CAAC;MACrC;MACA5C,KAAK,CAACX,KAAK,GAAImD,CAAC,CAACC,MAAM,CAAsBH,OAAO;IACtD;IAEAzD,SAAS,CAAC,MAAM;MACd,MAAMG,KAAK,GAAG8C,KAAK,CAAC9C,KAAK,GACrB8C,KAAK,CAAC9C,KAAK,CAAC;QACZA,KAAK,EAAEO,KAAK,CAACP,KAAK;QAClBO,KAAK,EAAE;UAAEsD,GAAG,EAAEV,EAAE,CAAC9C;QAAM;MACzB,CAAC,CAAC,GACAE,KAAK,CAACP,KAAK;MACf,MAAM,CAAC8D,SAAS,EAAEC,UAAU,CAAC,GAAGvE,gBAAgB,CAACqD,KAAK,CAAC;MAEvD,MAAMmB,SAAS,GAAAC,YAAA,UAAAC,WAAA;QAAA,OAELhB,KAAK;QAAA,WACDlC,KAAK,CAACX,KAAK;QAAA,YACV,CAAC,CAACE,KAAK,CAACwB,QAAQ;QAAA,MACtBoB,EAAE,CAAC9C,KAAK;QAAA,UACJqD,MAAM;QAAA,WACLH,OAAO;QAAA,WACPI,OAAO;QAAA,iBACD,CAAC,CAACpD,KAAK,CAACwB,QAAQ;QAAA,QACzBxB,KAAK,CAAC4D,IAAI;QAAA,SACThE,SAAS,CAACE,KAAK;QAAA,QAChBE,KAAK,CAACgC,IAAI;QAAA,gBACFhC,KAAK,CAAC4D,IAAI,KAAK,UAAU,GAAGnD,KAAK,CAACX,KAAK,GAAGI;MAAS,GAC7DsD,UAAU,QAElB;MAED,OAAAE,YAAA,QAAAC,WAAA;QAAA,SAEW,CACL,qBAAqB,EACrB;UACE,4BAA4B,EAAElD,KAAK,CAACX,KAAK;UACzC,+BAA+B,EAAEE,KAAK,CAACwB,QAAQ;UAC/C,4BAA4B,EAAExB,KAAK,CAACuB,KAAK;UACzC,8BAA8B,EAAEkB,SAAS,CAAC3C,KAAK;UAC/C,oCAAoC,EAAE4C,cAAc,CAAC5C,KAAK;UAC1D,6BAA6B,EAAEE,KAAK,CAAC6D;QACvC,CAAC,EACD1D,cAAc,CAACL,KAAK,EACpBE,KAAK,CAAC8D,KAAK;MACZ,GACIP,SAAS;QAAA,SACNvD,KAAK,CAAC+D;MAAK,KAAAL,YAAA;QAAA,SAGV,CACL,8BAA8B,EAC9BrC,gBAAgB,CAACvB,KAAK,CACvB;QAAA,SACOwB,eAAe,CAACxB;MAAK,IAE3ByC,KAAK,CAACyB,OAAO,GAAG;QAChBtC,sBAAsB;QACtBC;MACF,CAAC,CAAC,EAAAsC,eAAA,CAAAP,YAAA;QAAA,SAGO,CACL,4BAA4B;MAC7B,IAOCnB,KAAK,CAACI,KAAK,GAAG;QACdlC,KAAK;QACLY,gBAAgB;QAChBC,eAAe;QACfI,sBAAsB;QACtBC,qBAAqB;QACrB8B,SAAS;QACT7B,IAAI,EAAEA,IAAI,CAAC9B,KAAK;QAChBE,KAAK,EAAE;UACLgD,OAAO;UACPG,MAAM;UACNP,EAAE,EAAEA,EAAE,CAAC9C;QACT;MACF,CAAgC,CAAC,IAAA4D,YAAA,CAAAQ,SAAA,SAE3BtC,IAAI,CAAC9B,KAAK,IAAA4D,YAAA,CAAAxF,KAAA;QAAA;QAAA,QAA6B0D,IAAI,CAAC9B;MAAK,QAAK,EAEtD2D,SAAS,EAEd,MAAAU,iBAAA,YAzBUnE,KAAK,CAACoE,MAAM,IAAI,CACzB,CAACpE,KAAK,CAACwB,QAAQ,IAAI,CAACxB,KAAK,CAACgB,QAAQ,EAClC,IAAI,EACJ,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,OAyBHvB,KAAK,IAAAiE,YAAA,CAAAvF,MAAA;QAAA,OACSyE,EAAE,CAAC9C,KAAK;QAAA;QAAA,WAAwBmD,CAAQ,IAAKA,CAAC,CAACoB,eAAe,CAAC;MAAC;QAAAL,OAAA,EAAAA,CAAA,MAC1EvE,KAAK;MAAA,EAEV;IAGP,CAAC,CAAC;IAEF,OAAO;MACLgD,SAAS;MACTE;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","makeSelectionControlGroupProps","VSelectionControlGroupSymbol","useBackgroundColor","useTextColor","makeComponentProps","useDensity","useProxiedModel","Ripple","computed","inject","nextTick","ref","shallowRef","filterInputAttrs","genericComponent","getUid","matchesSelector","propsFactory","useRender","wrapInArray","makeVSelectionControlProps","label","String","baseColor","trueValue","falseValue","value","useSelectionControl","props","group","undefined","densityClasses","modelValue","isMultiple","multiple","Array","isArray","model","get","val","some","v","valueComparator","set","readonly","currentValue","newVal","filter","item","textColorClasses","textColorStyles","error","disabled","color","backgroundColorClasses","backgroundColorStyles","icon","trueIcon","falseIcon","VSelectionControl","name","directives","inheritAttrs","emits","setup","_ref","attrs","slots","uid","isFocused","isFocusVisible","input","id","isInteractive","onForceUpdate","checked","onFocus","e","target","onBlur","onClickLabel","stopPropagation","onInput","forceUpdate","for","rootAttrs","inputAttrs","inputNode","_createVNode","_mergeProps","type","inline","class","style","default","_withDirectives","_Fragment","_resolveDirective","ripple"],"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Composables\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { useDensity } from '@/composables/density'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject, nextTick, ref, shallowRef } from 'vue'\nimport {\n  filterInputAttrs,\n  genericComponent,\n  getUid,\n  matchesSelector,\n  propsFactory,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { CSSProperties, ExtractPropTypes, Ref, VNode, WritableComputedRef } from 'vue'\nimport type { IconValue } from '@/composables/icons'\nimport type { EventProp, GenericProps } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<boolean>\n  textColorClasses: Ref<string[]>\n  textColorStyles: Ref<CSSProperties>\n  backgroundColorClasses: Ref<string[]>\n  backgroundColorStyles: Ref<CSSProperties>\n  inputNode: VNode\n  icon: IconValue | undefined\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport type VSelectionControlSlots = {\n  default: {\n    backgroundColorClasses: Ref<string[]>\n    backgroundColorStyles: Ref<CSSProperties>\n  }\n  label: { label: string | undefined, props: Record<string, unknown> }\n  input: SelectionControlSlot\n}\n\nexport const makeVSelectionControlProps = propsFactory({\n  label: String,\n  baseColor: String,\n  trueValue: null,\n  falseValue: null,\n  value: null,\n\n  ...makeComponentProps(),\n  ...makeSelectionControlGroupProps(),\n}, 'VSelectionControl')\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeVSelectionControlProps>> & {\n    'onUpdate:modelValue': EventProp | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? wrapInArray(val).some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      if (props.readonly) return\n\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    if (props.error || props.disabled) return undefined\n\n    return model.value ? props.color : props.baseColor\n  }))\n  const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => model.value ? props.trueIcon : props.falseIcon)\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    backgroundColorClasses,\n    backgroundColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>(\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (value: T) => void\n  },\n  slots: VSelectionControlSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeVSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      group,\n      densityClasses,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      backgroundColorClasses,\n      backgroundColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const isFocused = shallowRef(false)\n    const isFocusVisible = shallowRef(false)\n    const input = ref<HTMLInputElement>()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isInteractive = computed(() => !props.disabled && !props.readonly)\n\n    group?.onForceUpdate(() => {\n      if (input.value) {\n        input.value.checked = model.value\n      }\n    })\n\n    function onFocus (e: FocusEvent) {\n      if (!isInteractive.value) return\n\n      isFocused.value = true\n      if (matchesSelector(e.target as HTMLElement, ':focus-visible') !== false) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    function onClickLabel (e: Event) {\n      e.stopPropagation()\n    }\n\n    function onInput (e: Event) {\n      if (!isInteractive.value) return\n\n      if (props.readonly && group) {\n        nextTick(() => group.forceUpdate())\n      }\n      model.value = (e.target as HTMLInputElement).checked\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      const inputNode = (\n        <input\n          ref={ input }\n          checked={ model.value }\n          disabled={ !!props.disabled }\n          id={ id.value }\n          onBlur={ onBlur }\n          onFocus={ onFocus }\n          onInput={ onInput }\n          aria-disabled={ !!props.disabled }\n          type={ props.type }\n          value={ trueValue.value }\n          name={ props.name }\n          aria-checked={ props.type === 'checkbox' ? model.value : undefined }\n          { ...inputAttrs }\n        />\n      )\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': props.inline,\n            },\n            densityClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          style={ props.style }\n        >\n          <div\n            class={[\n              'v-selection-control__wrapper',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n          >\n            { slots.default?.({\n              backgroundColorClasses,\n              backgroundColorStyles,\n            })}\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { slots.input?.({\n                model,\n                textColorClasses,\n                textColorStyles,\n                backgroundColorClasses,\n                backgroundColorStyles,\n                inputNode,\n                icon: icon.value,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              } satisfies SelectionControlSlot) ?? (\n                <>\n                  { icon.value && <VIcon key=\"icon\" icon={ icon.value } /> }\n\n                  { inputNode }\n                </>\n              )}\n            </div>\n          </div>\n\n          { label && (\n            <VLabel for={ id.value } onClick={ onClickLabel }>\n              { label }\n            </VLabel>\n          )}\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,KAAK;AAAA,SACLC,MAAM;AAAA,SACNC,8BAA8B,EAAEC,4BAA4B,gEAErE;AAAA,SACSC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,kBAAkB;AAAA,SAClBC,UAAU;AAAA,SACVC,eAAe,8CAExB;AAAA,SACSC,MAAM,6CAEf;AACA,SAASC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAA,SAE/DC,gBAAgB,EAChBC,gBAAgB,EAChBC,MAAM,EACNC,eAAe,EACfC,YAAY,EACZC,SAAS,EACTC,WAAW,gCAGb;AA6BA,OAAO,MAAMC,0BAA0B,GAAGH,YAAY,CAAC;EACrDI,KAAK,EAAEC,MAAM;EACbC,SAAS,EAAED,MAAM;EACjBE,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE,IAAI;EAEX,GAAGtB,kBAAkB,CAAC,CAAC;EACvB,GAAGJ,8BAA8B,CAAC;AACpC,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,SAAS2B,mBAAmBA,CACjCC,KAEC,EACD;EACA,MAAMC,KAAK,GAAGpB,MAAM,CAACR,4BAA4B,EAAE6B,SAAS,CAAC;EAC7D,MAAM;IAAEC;EAAe,CAAC,GAAG1B,UAAU,CAACuB,KAAK,CAAC;EAC5C,MAAMI,UAAU,GAAG1B,eAAe,CAACsB,KAAK,EAAE,YAAY,CAAC;EACvD,MAAMJ,SAAS,GAAGhB,QAAQ,CAAC,MACzBoB,KAAK,CAACJ,SAAS,KAAKM,SAAS,GAAGF,KAAK,CAACJ,SAAS,GAC7CI,KAAK,CAACF,KAAK,KAAKI,SAAS,GAAGF,KAAK,CAACF,KAAK,GACvC,IACH,CAAC;EACF,MAAMD,UAAU,GAAGjB,QAAQ,CAAC,MAAMoB,KAAK,CAACH,UAAU,KAAKK,SAAS,GAAGF,KAAK,CAACH,UAAU,GAAG,KAAK,CAAC;EAC5F,MAAMQ,UAAU,GAAGzB,QAAQ,CAAC,MAC1B,CAAC,CAACoB,KAAK,CAACM,QAAQ,IACfN,KAAK,CAACM,QAAQ,IAAI,IAAI,IAAIC,KAAK,CAACC,OAAO,CAACJ,UAAU,CAACN,KAAK,CAC1D,CAAC;EACF,MAAMW,KAAK,GAAG7B,QAAQ,CAAC;IACrB8B,GAAGA,CAAA,EAAI;MACL,MAAMC,GAAG,GAAGV,KAAK,GAAGA,KAAK,CAACG,UAAU,CAACN,KAAK,GAAGM,UAAU,CAACN,KAAK;MAE7D,OAAOO,UAAU,CAACP,KAAK,GACnBP,WAAW,CAACoB,GAAG,CAAC,CAACC,IAAI,CAAEC,CAAM,IAAKb,KAAK,CAACc,eAAe,CAACD,CAAC,EAAEjB,SAAS,CAACE,KAAK,CAAC,CAAC,GAC5EE,KAAK,CAACc,eAAe,CAACH,GAAG,EAAEf,SAAS,CAACE,KAAK,CAAC;IACjD,CAAC;IACDiB,GAAGA,CAAEJ,GAAY,EAAE;MACjB,IAAIX,KAAK,CAACgB,QAAQ,EAAE;MAEpB,MAAMC,YAAY,GAAGN,GAAG,GAAGf,SAAS,CAACE,KAAK,GAAGD,UAAU,CAACC,KAAK;MAE7D,IAAIoB,MAAM,GAAGD,YAAY;MAEzB,IAAIZ,UAAU,CAACP,KAAK,EAAE;QACpBoB,MAAM,GAAGP,GAAG,GACR,CAAC,GAAGpB,WAAW,CAACa,UAAU,CAACN,KAAK,CAAC,EAAEmB,YAAY,CAAC,GAChD1B,WAAW,CAACa,UAAU,CAACN,KAAK,CAAC,CAACqB,MAAM,CAAEC,IAAS,IAAK,CAACpB,KAAK,CAACc,eAAe,CAACM,IAAI,EAAExB,SAAS,CAACE,KAAK,CAAC,CAAC;MACxG;MAEA,IAAIG,KAAK,EAAE;QACTA,KAAK,CAACG,UAAU,CAACN,KAAK,GAAGoB,MAAM;MACjC,CAAC,MAAM;QACLd,UAAU,CAACN,KAAK,GAAGoB,MAAM;MAC3B;IACF;EACF,CAAC,CAAC;EACF,MAAM;IAAEG,gBAAgB;IAAEC;EAAgB,CAAC,GAAG/C,YAAY,CAACK,QAAQ,CAAC,MAAM;IACxE,IAAIoB,KAAK,CAACuB,KAAK,IAAIvB,KAAK,CAACwB,QAAQ,EAAE,OAAOtB,SAAS;IAEnD,OAAOO,KAAK,CAACX,KAAK,GAAGE,KAAK,CAACyB,KAAK,GAAGzB,KAAK,CAACL,SAAS;EACpD,CAAC,CAAC,CAAC;EACH,MAAM;IAAE+B,sBAAsB;IAAEC;EAAsB,CAAC,GAAGrD,kBAAkB,CAACM,QAAQ,CAAC,MAAM;IAC1F,OACE6B,KAAK,CAACX,KAAK,IACX,CAACE,KAAK,CAACuB,KAAK,IACZ,CAACvB,KAAK,CAACwB,QAAQ,GACbxB,KAAK,CAACyB,KAAK,GAAGvB,SAAS;EAC7B,CAAC,CAAC,CAAC;EACH,MAAM0B,IAAI,GAAGhD,QAAQ,CAAC,MAAM6B,KAAK,CAACX,KAAK,GAAGE,KAAK,CAAC6B,QAAQ,GAAG7B,KAAK,CAAC8B,SAAS,CAAC;EAE3E,OAAO;IACL7B,KAAK;IACLE,cAAc;IACdP,SAAS;IACTC,UAAU;IACVY,KAAK;IACLY,gBAAgB;IAChBC,eAAe;IACfI,sBAAsB;IACtBC,qBAAqB;IACrBC;EACF,CAAC;AACH;AAEA,OAAO,MAAMG,iBAAiB,GAAG7C,gBAAgB,CAMF,CAAC,CAAC;EAC/C8C,IAAI,EAAE,mBAAmB;EAEzBC,UAAU,EAAE;IAAEtD;EAAO,CAAC;EAEtBuD,YAAY,EAAE,KAAK;EAEnBlC,KAAK,EAAER,0BAA0B,CAAC,CAAC;EAEnC2C,KAAK,EAAE;IACL,mBAAmB,EAAGrC,KAAU,IAAK;EACvC,CAAC;EAEDsC,KAAKA,CAAEpC,KAAK,EAAAqC,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAM;MACJpC,KAAK;MACLE,cAAc;MACdyB,IAAI;MACJnB,KAAK;MACLY,gBAAgB;MAChBC,eAAe;MACfI,sBAAsB;MACtBC,qBAAqB;MACrB/B;IACF,CAAC,GAAGG,mBAAmB,CAACC,KAAK,CAAC;IAC9B,MAAMwC,GAAG,GAAGrD,MAAM,CAAC,CAAC;IACpB,MAAMsD,SAAS,GAAGzD,UAAU,CAAC,KAAK,CAAC;IACnC,MAAM0D,cAAc,GAAG1D,UAAU,CAAC,KAAK,CAAC;IACxC,MAAM2D,KAAK,GAAG5D,GAAG,CAAmB,CAAC;IACrC,MAAM6D,EAAE,GAAGhE,QAAQ,CAAC,MAAMoB,KAAK,CAAC4C,EAAE,IAAK,SAAQJ,GAAI,EAAC,CAAC;IACrD,MAAMK,aAAa,GAAGjE,QAAQ,CAAC,MAAM,CAACoB,KAAK,CAACwB,QAAQ,IAAI,CAACxB,KAAK,CAACgB,QAAQ,CAAC;IAExEf,KAAK,EAAE6C,aAAa,CAAC,MAAM;MACzB,IAAIH,KAAK,CAAC7C,KAAK,EAAE;QACf6C,KAAK,CAAC7C,KAAK,CAACiD,OAAO,GAAGtC,KAAK,CAACX,KAAK;MACnC;IACF,CAAC,CAAC;IAEF,SAASkD,OAAOA,CAAEC,CAAa,EAAE;MAC/B,IAAI,CAACJ,aAAa,CAAC/C,KAAK,EAAE;MAE1B2C,SAAS,CAAC3C,KAAK,GAAG,IAAI;MACtB,IAAIV,eAAe,CAAC6D,CAAC,CAACC,MAAM,EAAiB,gBAAgB,CAAC,KAAK,KAAK,EAAE;QACxER,cAAc,CAAC5C,KAAK,GAAG,IAAI;MAC7B;IACF;IAEA,SAASqD,MAAMA,CAAA,EAAI;MACjBV,SAAS,CAAC3C,KAAK,GAAG,KAAK;MACvB4C,cAAc,CAAC5C,KAAK,GAAG,KAAK;IAC9B;IAEA,SAASsD,YAAYA,CAAEH,CAAQ,EAAE;MAC/BA,CAAC,CAACI,eAAe,CAAC,CAAC;IACrB;IAEA,SAASC,OAAOA,CAAEL,CAAQ,EAAE;MAC1B,IAAI,CAACJ,aAAa,CAAC/C,KAAK,EAAE;MAE1B,IAAIE,KAAK,CAACgB,QAAQ,IAAIf,KAAK,EAAE;QAC3BnB,QAAQ,CAAC,MAAMmB,KAAK,CAACsD,WAAW,CAAC,CAAC,CAAC;MACrC;MACA9C,KAAK,CAACX,KAAK,GAAImD,CAAC,CAACC,MAAM,CAAsBH,OAAO;IACtD;IAEAzD,SAAS,CAAC,MAAM;MACd,MAAMG,KAAK,GAAG8C,KAAK,CAAC9C,KAAK,GACrB8C,KAAK,CAAC9C,KAAK,CAAC;QACZA,KAAK,EAAEO,KAAK,CAACP,KAAK;QAClBO,KAAK,EAAE;UAAEwD,GAAG,EAAEZ,EAAE,CAAC9C;QAAM;MACzB,CAAC,CAAC,GACAE,KAAK,CAACP,KAAK;MACf,MAAM,CAACgE,SAAS,EAAEC,UAAU,CAAC,GAAGzE,gBAAgB,CAACqD,KAAK,CAAC;MAEvD,MAAMqB,SAAS,GAAAC,YAAA,UAAAC,WAAA;QAAA,OAELlB,KAAK;QAAA,WACDlC,KAAK,CAACX,KAAK;QAAA,YACV,CAAC,CAACE,KAAK,CAACwB,QAAQ;QAAA,MACtBoB,EAAE,CAAC9C,KAAK;QAAA,UACJqD,MAAM;QAAA,WACLH,OAAO;QAAA,WACPM,OAAO;QAAA,iBACD,CAAC,CAACtD,KAAK,CAACwB,QAAQ;QAAA,QACzBxB,KAAK,CAAC8D,IAAI;QAAA,SACTlE,SAAS,CAACE,KAAK;QAAA,QAChBE,KAAK,CAACgC,IAAI;QAAA,gBACFhC,KAAK,CAAC8D,IAAI,KAAK,UAAU,GAAGrD,KAAK,CAACX,KAAK,GAAGI;MAAS,GAC7DwD,UAAU,QAElB;MAED,OAAAE,YAAA,QAAAC,WAAA;QAAA,SAEW,CACL,qBAAqB,EACrB;UACE,4BAA4B,EAAEpD,KAAK,CAACX,KAAK;UACzC,+BAA+B,EAAEE,KAAK,CAACwB,QAAQ;UAC/C,4BAA4B,EAAExB,KAAK,CAACuB,KAAK;UACzC,8BAA8B,EAAEkB,SAAS,CAAC3C,KAAK;UAC/C,oCAAoC,EAAE4C,cAAc,CAAC5C,KAAK;UAC1D,6BAA6B,EAAEE,KAAK,CAAC+D;QACvC,CAAC,EACD5D,cAAc,CAACL,KAAK,EACpBE,KAAK,CAACgE,KAAK;MACZ,GACIP,SAAS;QAAA,SACNzD,KAAK,CAACiE;MAAK,KAAAL,YAAA;QAAA,SAGV,CACL,8BAA8B,EAC9BvC,gBAAgB,CAACvB,KAAK,CACvB;QAAA,SACOwB,eAAe,CAACxB;MAAK,IAE3ByC,KAAK,CAAC2B,OAAO,GAAG;QAChBxC,sBAAsB;QACtBC;MACF,CAAC,CAAC,EAAAwC,eAAA,CAAAP,YAAA;QAAA,SAGO,CACL,4BAA4B;MAC7B,IAOCrB,KAAK,CAACI,KAAK,GAAG;QACdlC,KAAK;QACLY,gBAAgB;QAChBC,eAAe;QACfI,sBAAsB;QACtBC,qBAAqB;QACrBgC,SAAS;QACT/B,IAAI,EAAEA,IAAI,CAAC9B,KAAK;QAChBE,KAAK,EAAE;UACLgD,OAAO;UACPG,MAAM;UACNP,EAAE,EAAEA,EAAE,CAAC9C;QACT;MACF,CAAgC,CAAC,IAAA8D,YAAA,CAAAQ,SAAA,SAE3BxC,IAAI,CAAC9B,KAAK,IAAA8D,YAAA,CAAA1F,KAAA;QAAA;QAAA,QAA6B0D,IAAI,CAAC9B;MAAK,QAAK,EAEtD6D,SAAS,EAEd,MAAAU,iBAAA,YAzBUrE,KAAK,CAACsE,MAAM,IAAI,CACzB,CAACtE,KAAK,CAACwB,QAAQ,IAAI,CAACxB,KAAK,CAACgB,QAAQ,EAClC,IAAI,EACJ,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,OAyBHvB,KAAK,IAAAmE,YAAA,CAAAzF,MAAA;QAAA,OACSyE,EAAE,CAAC9C,KAAK;QAAA,WAAasD;MAAY;QAAAc,OAAA,EAAAA,CAAA,MAC3CzE,KAAK;MAAA,EAEV;IAGP,CAAC,CAAC;IAEF,OAAO;MACLgD,SAAS;MACTE;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/VTable/VTable.css

@@ -45,7 +45,6 @@
 }
 
 .v-table {
-  --v-table-header-height: 56px;
   border-radius: inherit;
   line-height: 1.5;
   max-width: 100%;
@@ -67,44 +66,32 @@
   transition-property: box-shadow, opacity, background, height;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+.v-table > .v-table__wrapper > table > tbody > tr > td,
+.v-table > .v-table__wrapper > table > thead > tr > td,
+.v-table > .v-table__wrapper > table > tfoot > tr > td {
+  height: var(--v-table-row-height);
+}
 .v-table > .v-table__wrapper > table > tbody > tr > th,
 .v-table > .v-table__wrapper > table > thead > tr > th,
 .v-table > .v-table__wrapper > table > tfoot > tr > th {
+  height: var(--v-table-header-height);
   font-weight: 500;
   user-select: none;
   text-align: start;
 }
-.v-table--density-default > .v-table__wrapper > table > tbody > tr > th,
-.v-table--density-default > .v-table__wrapper > table > thead > tr > th,
-.v-table--density-default > .v-table__wrapper > table > tfoot > tr > th {
-  height: calc(var(--v-table-header-height) + 0px);
-}
-.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
-.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
-.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
-  height: calc(var(--v-table-row-height, 52px) + 0px);
+.v-table--density-default {
+  --v-table-header-height: 56px;
+  --v-table-row-height: 52px;
 }
 
-.v-table--density-comfortable > .v-table__wrapper > table > tbody > tr > th,
-.v-table--density-comfortable > .v-table__wrapper > table > thead > tr > th,
-.v-table--density-comfortable > .v-table__wrapper > table > tfoot > tr > th {
-  height: calc(var(--v-table-header-height) - 8px);
-}
-.v-table--density-comfortable > .v-table__wrapper > table > tbody > tr > td,
-.v-table--density-comfortable > .v-table__wrapper > table > thead > tr > td,
-.v-table--density-comfortable > .v-table__wrapper > table > tfoot > tr > td {
-  height: calc(var(--v-table-row-height, 52px) - 8px);
+.v-table--density-comfortable {
+  --v-table-header-height: 48px;
+  --v-table-row-height: 44px;
 }
 
-.v-table--density-compact > .v-table__wrapper > table > tbody > tr > th,
-.v-table--density-compact > .v-table__wrapper > table > thead > tr > th,
-.v-table--density-compact > .v-table__wrapper > table > tfoot > tr > th {
-  height: calc(var(--v-table-header-height) - 16px);
-}
-.v-table--density-compact > .v-table__wrapper > table > tbody > tr > td,
-.v-table--density-compact > .v-table__wrapper > table > thead > tr > td,
-.v-table--density-compact > .v-table__wrapper > table > tfoot > tr > td {
-  height: calc(var(--v-table-row-height, 52px) - 16px);
+.v-table--density-compact {
+  --v-table-header-height: 40px;
+  --v-table-row-height: 36px;
 }
 
 .v-table__wrapper {

package/lib/components/VTable/VTable.sass

@@ -69,8 +69,6 @@
 
 // Block
 .v-table
-  --v-table-header-height: #{$table-header-height}
-
   border-radius: inherit
   // Do not inherit line-height
   line-height: $table-line-height
@@ -94,24 +92,19 @@
             transition-property: $table-transition-property
             transition-timing-function: $table-transition-timing-function
 
+          > td
+            height: var(--v-table-row-height)
+
           > th
+            height: var(--v-table-header-height)
             font-weight: $table-header-font-weight
             user-select: none
             text-align: start
 
   @at-root
     @include tools.density('v-table', $table-density) using ($modifier)
-      > .v-table__wrapper
-        > table
-          > tbody,
-          > thead,
-          > tfoot
-            > tr
-              > th
-                height: calc(var(--v-table-header-height) + $modifier)
-
-              > td
-                height: calc($table-row-height + $modifier)
+      --v-table-header-height: #{$table-header-height + $modifier}
+      --v-table-row-height: #{$table-row-height + $modifier}
 
 // Elements
 .v-table__wrapper

package/lib/components/VTable/_variables.scss

@@ -11,7 +11,7 @@ $table-header-height: 56px !default;
 $table-header-font-weight: 500 !default;
 $table-header-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;
 $table-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
-$table-row-height: var(--v-table-row-height, 52px) !default;
+$table-row-height: 52px !default;
 $table-row-font-size: tools.map-deep-get(settings.$typography, 'subtitle-2', 'size') !default;
 $table-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
 $table-border: thin solid $table-border-color !default;

package/lib/components/VWindow/VWindow.css

@@ -20,7 +20,7 @@
   padding: 0 16px;
   pointer-events: none;
 }
-.v-window__controls * {
+.v-window__controls > * {
   pointer-events: auto;
 }
 .v-window--show-arrows-on-hover {

package/lib/components/VWindow/VWindow.sass

@@ -22,7 +22,7 @@
     padding: $window-controls-padding
     pointer-events: none
 
-    *
+    > *
       pointer-events: auto
 
   &--show-arrows-on-hover

package/lib/components/index.d.mts

@@ -26104,7 +26104,6 @@ declare const VDatePicker: {
         style: vue.StyleValue;
         title: string;
         disabled: boolean;
-        range: boolean;
         tag: string;
         landscape: boolean;
         nextIcon: string;
@@ -26138,7 +26137,7 @@ declare const VDatePicker: {
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
         bgColor?: string | undefined;
-        allowedDates?: Function | unknown[] | undefined;
+        allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
         displayValue?: unknown;
     } & {
         "onUpdate:month"?: ((date: any) => any) | undefined;
@@ -26154,7 +26153,6 @@ declare const VDatePicker: {
         style: vue.StyleValue;
         title: string;
         disabled: boolean;
-        range: boolean;
         tag: string;
         landscape: boolean;
         nextIcon: string;
@@ -26188,7 +26186,7 @@ declare const VDatePicker: {
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
         bgColor?: string | undefined;
-        allowedDates?: Function | unknown[] | undefined;
+        allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
         displayValue?: unknown;
     } & {
         "onUpdate:month"?: ((date: any) => any) | undefined;
@@ -26200,7 +26198,6 @@ declare const VDatePicker: {
         style: vue.StyleValue;
         title: string;
         disabled: boolean;
-        range: boolean;
         tag: string;
         landscape: boolean;
         rounded: string | number | boolean;
@@ -26241,7 +26238,6 @@ declare const VDatePicker: {
         style: vue.StyleValue;
         title: string;
         disabled: boolean;
-        range: boolean;
         tag: string;
         landscape: boolean;
         nextIcon: string;
@@ -26275,7 +26271,7 @@ declare const VDatePicker: {
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
         bgColor?: string | undefined;
-        allowedDates?: Function | unknown[] | undefined;
+        allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
         displayValue?: unknown;
     } & {
         "onUpdate:month"?: ((date: any) => any) | undefined;
@@ -26287,7 +26283,6 @@ declare const VDatePicker: {
         style: vue.StyleValue;
         title: string;
         disabled: boolean;
-        range: boolean;
         tag: string;
         landscape: boolean;
         rounded: string | number | boolean;
@@ -26309,7 +26304,6 @@ declare const VDatePicker: {
     style: vue.StyleValue;
     title: string;
     disabled: boolean;
-    range: boolean;
     tag: string;
     landscape: boolean;
     nextIcon: string;
@@ -26343,7 +26337,7 @@ declare const VDatePicker: {
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
     bgColor?: string | undefined;
-    allowedDates?: Function | unknown[] | undefined;
+    allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
     displayValue?: unknown;
 } & {
     "onUpdate:month"?: ((date: any) => any) | undefined;
@@ -26360,7 +26354,6 @@ declare const VDatePicker: {
     style: vue.StyleValue;
     title: string;
     disabled: boolean;
-    range: boolean;
     tag: string;
     landscape: boolean;
     rounded: string | number | boolean;
@@ -26389,13 +26382,13 @@ declare const VDatePicker: {
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T, Multiple extends boolean = false>(props: {
-    modelValue?: (Multiple extends true ? T[] : T) | undefined;
-    'onUpdate:modelValue'?: ((value: Multiple extends true ? T[] : T) => void) | undefined;
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T, Multiple extends number | boolean | "range" | (string & {}) = false, TModel = Multiple extends string | number | true ? T[] : T>(props: {
+    modelValue?: TModel | undefined;
+    'onUpdate:modelValue'?: ((value: TModel) => void) | undefined;
     multiple?: Multiple | undefined;
 }, slots: VDatePickerSlots) => GenericProps<{
-    modelValue?: (Multiple extends true ? T[] : T) | undefined;
-    'onUpdate:modelValue'?: ((value: Multiple extends true ? T[] : T) => void) | undefined;
+    modelValue?: TModel | undefined;
+    'onUpdate:modelValue'?: ((value: TModel) => void) | undefined;
     multiple?: Multiple | undefined;
 }, VDatePickerSlots>) & FilterPropsOptions<{
     modelValue: null;
@@ -26439,7 +26432,7 @@ declare const VDatePicker: {
     hideHeader: BooleanConstructor;
     max: vue.PropType<unknown>;
     min: vue.PropType<unknown>;
-    allowedDates: (FunctionConstructor | ArrayConstructor)[];
+    allowedDates: vue.PropType<unknown[] | ((date: unknown) => boolean)>;
     disabled: BooleanConstructor;
     displayValue: vue.PropType<unknown>;
     month: (StringConstructor | NumberConstructor)[];
@@ -26463,8 +26456,7 @@ declare const VDatePicker: {
         default: () => number[];
     };
     hideWeekdays: BooleanConstructor;
-    multiple: vue.PropType<string | number | boolean>;
-    range: BooleanConstructor;
+    multiple: vue.PropType<number | boolean | "range" | (string & {})>;
     showWeek: BooleanConstructor;
     active: {
         type: vue.PropType<string | string[]>;
@@ -26533,7 +26525,7 @@ declare const VDatePicker: {
     hideHeader: BooleanConstructor;
     max: vue.PropType<unknown>;
     min: vue.PropType<unknown>;
-    allowedDates: (FunctionConstructor | ArrayConstructor)[];
+    allowedDates: vue.PropType<unknown[] | ((date: unknown) => boolean)>;
     disabled: BooleanConstructor;
     displayValue: vue.PropType<unknown>;
     month: (StringConstructor | NumberConstructor)[];
@@ -26557,8 +26549,7 @@ declare const VDatePicker: {
         default: () => number[];
     };
     hideWeekdays: BooleanConstructor;
-    multiple: vue.PropType<string | number | boolean>;
-    range: BooleanConstructor;
+    multiple: vue.PropType<number | boolean | "range" | (string & {})>;
     showWeek: BooleanConstructor;
     active: {
         type: vue.PropType<string | string[]>;
@@ -26944,7 +26935,6 @@ type VDatePickerHeader = InstanceType<typeof VDatePickerHeader>;
 declare const VDatePickerMonth: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
         disabled: boolean;
-        range: boolean;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -26953,11 +26943,11 @@ declare const VDatePickerMonth: {
         max?: unknown;
         min?: unknown;
         color?: string | undefined;
-        multiple?: string | number | boolean | undefined;
+        multiple?: number | boolean | "range" | (string & {}) | undefined;
         month?: string | number | undefined;
         year?: string | number | undefined;
         modelValue?: unknown[] | undefined;
-        allowedDates?: Function | unknown[] | undefined;
+        allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
         displayValue?: unknown;
     } & {
         $children?: {} | vue.VNodeChild | {
@@ -26987,16 +26977,15 @@ declare const VDatePickerMonth: {
             i: number;
         }) => vue.VNodeChild) | undefined;
     } & {
-        "onUpdate:modelValue"?: ((date: any) => any) | undefined;
-        "onUpdate:month"?: ((date: any) => any) | undefined;
-        "onUpdate:year"?: ((date: any) => any) | undefined;
+        "onUpdate:modelValue"?: ((date: unknown) => any) | undefined;
+        "onUpdate:month"?: ((date: number) => any) | undefined;
+        "onUpdate:year"?: ((date: number) => any) | undefined;
     }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        'update:modelValue': (date: any) => true;
-        'update:month': (date: any) => true;
-        'update:year': (date: any) => true;
+        'update:modelValue': (date: unknown) => true;
+        'update:month': (date: number) => true;
+        'update:year': (date: number) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         disabled: boolean;
-        range: boolean;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -27005,11 +26994,11 @@ declare const VDatePickerMonth: {
         max?: unknown;
         min?: unknown;
         color?: string | undefined;
-        multiple?: string | number | boolean | undefined;
+        multiple?: number | boolean | "range" | (string & {}) | undefined;
         month?: string | number | undefined;
         year?: string | number | undefined;
         modelValue?: unknown[] | undefined;
-        allowedDates?: Function | unknown[] | undefined;
+        allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
         displayValue?: unknown;
     } & {
         $children?: {} | vue.VNodeChild | {
@@ -27039,12 +27028,11 @@ declare const VDatePickerMonth: {
             i: number;
         }) => vue.VNodeChild) | undefined;
     } & {
-        "onUpdate:modelValue"?: ((date: any) => any) | undefined;
-        "onUpdate:month"?: ((date: any) => any) | undefined;
-        "onUpdate:year"?: ((date: any) => any) | undefined;
+        "onUpdate:modelValue"?: ((date: unknown) => any) | undefined;
+        "onUpdate:month"?: ((date: number) => any) | undefined;
+        "onUpdate:year"?: ((date: number) => any) | undefined;
     }, {
         disabled: boolean;
-        range: boolean;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -27068,7 +27056,6 @@ declare const VDatePickerMonth: {
         Defaults: {};
     }, {
         disabled: boolean;
-        range: boolean;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -27077,11 +27064,11 @@ declare const VDatePickerMonth: {
         max?: unknown;
         min?: unknown;
         color?: string | undefined;
-        multiple?: string | number | boolean | undefined;
+        multiple?: number | boolean | "range" | (string & {}) | undefined;
         month?: string | number | undefined;
         year?: string | number | undefined;
         modelValue?: unknown[] | undefined;
-        allowedDates?: Function | unknown[] | undefined;
+        allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
         displayValue?: unknown;
     } & {
         $children?: {} | vue.VNodeChild | {
@@ -27111,12 +27098,11 @@ declare const VDatePickerMonth: {
             i: number;
         }) => vue.VNodeChild) | undefined;
     } & {
-        "onUpdate:modelValue"?: ((date: any) => any) | undefined;
-        "onUpdate:month"?: ((date: any) => any) | undefined;
-        "onUpdate:year"?: ((date: any) => any) | undefined;
+        "onUpdate:modelValue"?: ((date: unknown) => any) | undefined;
+        "onUpdate:month"?: ((date: number) => any) | undefined;
+        "onUpdate:year"?: ((date: number) => any) | undefined;
     }, () => JSX.Element, {}, {}, {}, {
         disabled: boolean;
-        range: boolean;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -27127,7 +27113,6 @@ declare const VDatePickerMonth: {
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
     disabled: boolean;
-    range: boolean;
     showAdjacentMonths: boolean;
     weekdays: number[];
     hideWeekdays: boolean;
@@ -27136,11 +27121,11 @@ declare const VDatePickerMonth: {
     max?: unknown;
     min?: unknown;
     color?: string | undefined;
-    multiple?: string | number | boolean | undefined;
+    multiple?: number | boolean | "range" | (string & {}) | undefined;
     month?: string | number | undefined;
     year?: string | number | undefined;
     modelValue?: unknown[] | undefined;
-    allowedDates?: Function | unknown[] | undefined;
+    allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
     displayValue?: unknown;
 } & {
     $children?: {} | vue.VNodeChild | {
@@ -27170,16 +27155,15 @@ declare const VDatePickerMonth: {
         i: number;
     }) => vue.VNodeChild) | undefined;
 } & {
-    "onUpdate:modelValue"?: ((date: any) => any) | undefined;
-    "onUpdate:month"?: ((date: any) => any) | undefined;
-    "onUpdate:year"?: ((date: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((date: unknown) => any) | undefined;
+    "onUpdate:month"?: ((date: number) => any) | undefined;
+    "onUpdate:year"?: ((date: number) => any) | undefined;
 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:modelValue': (date: any) => true;
-    'update:month': (date: any) => true;
-    'update:year': (date: any) => true;
+    'update:modelValue': (date: unknown) => true;
+    'update:month': (date: number) => true;
+    'update:year': (date: number) => true;
 }, string, {
     disabled: boolean;
-    range: boolean;
     showAdjacentMonths: boolean;
     weekdays: number[];
     hideWeekdays: boolean;
@@ -27195,10 +27179,10 @@ declare const VDatePickerMonth: {
         [key: string]: any;
     }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
-    allowedDates: (FunctionConstructor | ArrayConstructor)[];
+    allowedDates: PropType<unknown[] | ((date: unknown) => boolean)>;
     disabled: BooleanConstructor;
     displayValue: PropType<unknown>;
-    modelValue: PropType<unknown[] | undefined>;
+    modelValue: PropType<unknown[]>;
     month: (StringConstructor | NumberConstructor)[];
     max: PropType<unknown>;
     min: PropType<unknown>;
@@ -27223,14 +27207,13 @@ declare const VDatePickerMonth: {
     };
     color: StringConstructor;
     hideWeekdays: BooleanConstructor;
-    multiple: PropType<string | number | boolean>;
-    range: BooleanConstructor;
+    multiple: PropType<number | boolean | "range" | (string & {})>;
     showWeek: BooleanConstructor;
 }, vue.ExtractPropTypes<{
-    allowedDates: (FunctionConstructor | ArrayConstructor)[];
+    allowedDates: PropType<unknown[] | ((date: unknown) => boolean)>;
     disabled: BooleanConstructor;
     displayValue: PropType<unknown>;
-    modelValue: PropType<unknown[] | undefined>;
+    modelValue: PropType<unknown[]>;
     month: (StringConstructor | NumberConstructor)[];
     max: PropType<unknown>;
     min: PropType<unknown>;
@@ -27255,8 +27238,7 @@ declare const VDatePickerMonth: {
     };
     color: StringConstructor;
     hideWeekdays: BooleanConstructor;
-    multiple: PropType<string | number | boolean>;
-    range: BooleanConstructor;
+    multiple: PropType<number | boolean | "range" | (string & {})>;
     showWeek: BooleanConstructor;
 }>>;
 type VDatePickerMonth = InstanceType<typeof VDatePickerMonth>;
@@ -35561,10 +35543,10 @@ type VKbd = InstanceType<typeof VKbd>;
 declare const VLabel: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
         style: vue.StyleValue;
-        clickable: boolean;
     } & {
         text?: string | undefined;
         class?: any;
+        onClick?: ((args_0: MouseEvent) => void) | undefined;
         theme?: string | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -35577,10 +35559,10 @@ declare const VLabel: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         style: vue.StyleValue;
-        clickable: boolean;
     } & {
         text?: string | undefined;
         class?: any;
+        onClick?: ((args_0: MouseEvent) => void) | undefined;
         theme?: string | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -35593,7 +35575,6 @@ declare const VLabel: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     }, {
         style: vue.StyleValue;
-        clickable: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
@@ -35607,10 +35588,10 @@ declare const VLabel: {
         Defaults: {};
     }, {
         style: vue.StyleValue;
-        clickable: boolean;
     } & {
         text?: string | undefined;
         class?: any;
+        onClick?: ((args_0: MouseEvent) => void) | undefined;
         theme?: string | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -35623,17 +35604,16 @@ declare const VLabel: {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     }, {}, {}, {}, {}, {
         style: vue.StyleValue;
-        clickable: boolean;
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
     style: vue.StyleValue;
-    clickable: boolean;
 } & {
     text?: string | undefined;
     class?: any;
+    onClick?: ((args_0: MouseEvent) => void) | undefined;
     theme?: string | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -35646,7 +35626,6 @@ declare const VLabel: {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     style: vue.StyleValue;
-    clickable: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
@@ -35659,7 +35638,7 @@ declare const VLabel: {
         default: null;
     };
     text: StringConstructor;
-    clickable: BooleanConstructor;
+    onClick: vue.PropType<(args_0: MouseEvent) => void>;
 }, vue.ExtractPropTypes<{
     theme: StringConstructor;
     class: vue.PropType<any>;
@@ -35668,7 +35647,7 @@ declare const VLabel: {
         default: null;
     };
     text: StringConstructor;
-    clickable: BooleanConstructor;
+    onClick: vue.PropType<(args_0: MouseEvent) => void>;
 }>>;
 type VLabel = InstanceType<typeof VLabel>;