vuetify 3.3.11 → 3.3.13

package/lib/components/VSelectionControl/VSelectionControl.mjs

@@ -1,4 +1,4 @@
-import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 // Styles
 import "./VSelectionControl.css";
 
@@ -125,6 +125,20 @@ export const VSelectionControl = genericComponent()({
         }
       }) : props.label;
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+      const inputNode = _createVNode("input", _mergeProps({
+        "ref": input,
+        "checked": model.value,
+        "disabled": !!(props.readonly || props.disabled),
+        "id": id.value,
+        "onBlur": onBlur,
+        "onFocus": onFocus,
+        "onInput": onInput,
+        "aria-disabled": !!(props.readonly || props.disabled),
+        "type": props.type,
+        "value": trueValue.value,
+        "name": props.name,
+        "aria-checked": props.type === 'checkbox' ? model.value : undefined
+      }, inputAttrs), null);
       return _createVNode("div", _mergeProps({
         "class": ['v-selection-control', {
           'v-selection-control--dirty': model.value,
@@ -141,32 +155,21 @@ export const VSelectionControl = genericComponent()({
         "style": textColorStyles.value
       }, [slots.default?.(), _withDirectives(_createVNode("div", {
         "class": ['v-selection-control__input']
-      }, [icon.value && _createVNode(VIcon, {
-        "key": "icon",
-        "icon": icon.value
-      }, null), _createVNode("input", _mergeProps({
-        "ref": input,
-        "checked": model.value,
-        "disabled": !!(props.readonly || props.disabled),
-        "id": id.value,
-        "onBlur": onBlur,
-        "onFocus": onFocus,
-        "onInput": onInput,
-        "aria-disabled": !!(props.readonly || props.disabled),
-        "type": props.type,
-        "value": trueValue.value,
-        "name": props.name,
-        "aria-checked": props.type === 'checkbox' ? model.value : undefined
-      }, inputAttrs), null), slots.input?.({
+      }, [slots.input?.({
         model,
         textColorClasses,
         textColorStyles,
+        inputNode,
+        icon: icon.value,
         props: {
           onFocus,
           onBlur,
           id: id.value
         }
-      })]), [[_resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && _createVNode(VLabel, {
+      }) ?? _createVNode(_Fragment, null, [icon.value && _createVNode(VIcon, {
+        "key": "icon",
+        "icon": icon.value
+      }, null), inputNode])]), [[_resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && _createVNode(VLabel, {
         "for": id.value,
         "clickable": true
       }, {

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

@@ -1 +1 @@
-{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","makeSelectionControlGroupProps","VSelectionControlGroupSymbol","useTextColor","makeComponentProps","useDensity","useProxiedModel","Ripple","computed","inject","nextTick","ref","shallowRef","filterInputAttrs","genericComponent","getUid","matchesSelector","propsFactory","useRender","wrapInArray","makeVSelectionControlProps","label","String","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","icon","trueIcon","falseIcon","VSelectionControl","name","directives","inheritAttrs","emits","setup","_ref","attrs","slots","uid","id","isFocused","isFocusVisible","input","onForceUpdate","checked","onFocus","e","target","onBlur","onInput","forceUpdate","for","rootAttrs","inputAttrs","_createVNode","_mergeProps","inline","class","style","default","_withDirectives","type","_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 { 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, WritableComputedRef } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  textColorClasses: Ref<string[]>\n  textColorStyles: Ref<CSSProperties>\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport type VSelectionControlSlots = {\n  default: never\n  label: { label: string | undefined, props: Record<string, unknown> }\n  input: SelectionControlSlot\n}\n\nexport const makeVSelectionControlProps = propsFactory({\n  label: 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': ((val: any) => void) | 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        ? 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    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    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>(\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (val: T) => any\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': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      group,\n      densityClasses,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = shallowRef(false)\n    const isFocusVisible = shallowRef(false)\n    const input = ref<HTMLInputElement>()\n\n    group?.onForceUpdate(() => {\n      if (input.value) {\n        input.value.checked = model.value\n      }\n    })\n\n    function onFocus (e: FocusEvent) {\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 (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      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\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              { icon.value && <VIcon key=\"icon\" icon={ icon.value } /> }\n\n              <input\n                ref={ input }\n                checked={ model.value }\n                disabled={ !!(props.readonly || props.disabled) }\n                id={ id.value }\n                onBlur={ onBlur }\n                onFocus={ onFocus }\n                onInput={ onInput }\n                aria-disabled={ !!(props.readonly || 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              { slots.input?.({\n                model,\n                textColorClasses,\n                textColorStyles,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              } as SelectionControlSlot)}\n            </div>\n          </div>\n\n          { label && (\n            <VLabel for={ id.value } clickable>\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,YAAY;AAAA,SACZC,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;AAqBA,OAAO,MAAMC,0BAA0B,GAAGH,YAAY,CAAC;EACrDI,KAAK,EAAEC,MAAM;EACbC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE,IAAI;EAEX,GAAGrB,kBAAkB,EAAE;EACvB,GAAGH,8BAA8B;AACnC,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,SAASyB,mBAAmBA,CACjCC,KAEC,EACD;EACA,MAAMC,KAAK,GAAGnB,MAAM,CAACP,4BAA4B,EAAE2B,SAAS,CAAC;EAC7D,MAAM;IAAEC;EAAe,CAAC,GAAGzB,UAAU,CAACsB,KAAK,CAAC;EAC5C,MAAMI,UAAU,GAAGzB,eAAe,CAACqB,KAAK,EAAE,YAAY,CAAC;EACvD,MAAMJ,SAAS,GAAGf,QAAQ,CAAC,MACzBmB,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,GAAGhB,QAAQ,CAAC,MAAMmB,KAAK,CAACH,UAAU,KAAKK,SAAS,GAAGF,KAAK,CAACH,UAAU,GAAG,KAAK,CAAC;EAC5F,MAAMQ,UAAU,GAAGxB,QAAQ,CAAC,MAC1B,CAAC,CAACmB,KAAK,CAACM,QAAQ,IACfN,KAAK,CAACM,QAAQ,IAAI,IAAI,IAAIC,KAAK,CAACC,OAAO,CAACJ,UAAU,CAACN,KAAK,CAC1D,CAAC;EACF,MAAMW,KAAK,GAAG5B,QAAQ,CAAC;IACrB6B,GAAGA,CAAA,EAAI;MACL,MAAMC,GAAG,GAAGV,KAAK,GAAGA,KAAK,CAACG,UAAU,CAACN,KAAK,GAAGM,UAAU,CAACN,KAAK;MAE7D,OAAOO,UAAU,CAACP,KAAK,GACnBa,GAAG,CAACC,IAAI,CAAEC,CAAM,IAAKb,KAAK,CAACc,eAAe,CAACD,CAAC,EAAEjB,SAAS,CAACE,KAAK,CAAC,CAAC,GAC/DE,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,GAAGnB,WAAW,CAACY,UAAU,CAACN,KAAK,CAAC,EAAEmB,YAAY,CAAC,GAChDzB,WAAW,CAACY,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,GAAG9C,YAAY,CAACK,QAAQ,CAAC,MAAM;IACxE,OACE4B,KAAK,CAACX,KAAK,IACX,CAACE,KAAK,CAACuB,KAAK,IACZ,CAACvB,KAAK,CAACwB,QAAQ,GACbxB,KAAK,CAACyB,KAAK,GAAGvB,SAAS;EAC7B,CAAC,CAAC,CAAC;EACH,MAAMwB,IAAI,GAAG7C,QAAQ,CAAC,MAAM4B,KAAK,CAACX,KAAK,GAAGE,KAAK,CAAC2B,QAAQ,GAAG3B,KAAK,CAAC4B,SAAS,CAAC;EAE3E,OAAO;IACL3B,KAAK;IACLE,cAAc;IACdP,SAAS;IACTC,UAAU;IACVY,KAAK;IACLY,gBAAgB;IAChBC,eAAe;IACfI;EACF,CAAC;AACH;AAEA,OAAO,MAAMG,iBAAiB,GAAG1C,gBAAgB,EAMD,CAAC;EAC/C2C,IAAI,EAAE,mBAAmB;EAEzBC,UAAU,EAAE;IAAEnD;EAAO,CAAC;EAEtBoD,YAAY,EAAE,KAAK;EAEnBhC,KAAK,EAAEP,0BAA0B,EAAE;EAEnCwC,KAAK,EAAE;IACL,mBAAmB,EAAGtB,GAAQ,IAAK;EACrC,CAAC;EAEDuB,KAAKA,CAAElC,KAAK,EAAAmC,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAM;MACJlC,KAAK;MACLE,cAAc;MACduB,IAAI;MACJjB,KAAK;MACLY,gBAAgB;MAChBC,eAAe;MACf1B;IACF,CAAC,GAAGG,mBAAmB,CAACC,KAAK,CAAC;IAC9B,MAAMsC,GAAG,GAAGlD,MAAM,EAAE;IACpB,MAAMmD,EAAE,GAAG1D,QAAQ,CAAC,MAAMmB,KAAK,CAACuC,EAAE,IAAK,SAAQD,GAAI,EAAC,CAAC;IACrD,MAAME,SAAS,GAAGvD,UAAU,CAAC,KAAK,CAAC;IACnC,MAAMwD,cAAc,GAAGxD,UAAU,CAAC,KAAK,CAAC;IACxC,MAAMyD,KAAK,GAAG1D,GAAG,EAAoB;IAErCiB,KAAK,EAAE0C,aAAa,CAAC,MAAM;MACzB,IAAID,KAAK,CAAC5C,KAAK,EAAE;QACf4C,KAAK,CAAC5C,KAAK,CAAC8C,OAAO,GAAGnC,KAAK,CAACX,KAAK;MACnC;IACF,CAAC,CAAC;IAEF,SAAS+C,OAAOA,CAAEC,CAAa,EAAE;MAC/BN,SAAS,CAAC1C,KAAK,GAAG,IAAI;MACtB,IAAIT,eAAe,CAACyD,CAAC,CAACC,MAAM,EAAiB,gBAAgB,CAAC,KAAK,KAAK,EAAE;QACxEN,cAAc,CAAC3C,KAAK,GAAG,IAAI;MAC7B;IACF;IAEA,SAASkD,MAAMA,CAAA,EAAI;MACjBR,SAAS,CAAC1C,KAAK,GAAG,KAAK;MACvB2C,cAAc,CAAC3C,KAAK,GAAG,KAAK;IAC9B;IAEA,SAASmD,OAAOA,CAAEH,CAAQ,EAAE;MAC1B,IAAI9C,KAAK,CAACgB,QAAQ,IAAIf,KAAK,EAAE;QAC3BlB,QAAQ,CAAC,MAAMkB,KAAK,CAACiD,WAAW,EAAE,CAAC;MACrC;MACAzC,KAAK,CAACX,KAAK,GAAIgD,CAAC,CAACC,MAAM,CAAsBH,OAAO;IACtD;IAEArD,SAAS,CAAC,MAAM;MACd,MAAMG,KAAK,GAAG2C,KAAK,CAAC3C,KAAK,GACrB2C,KAAK,CAAC3C,KAAK,CAAC;QACZA,KAAK,EAAEM,KAAK,CAACN,KAAK;QAClBM,KAAK,EAAE;UAAEmD,GAAG,EAAEZ,EAAE,CAACzC;QAAM;MACzB,CAAC,CAAC,GACAE,KAAK,CAACN,KAAK;MACf,MAAM,CAAC0D,SAAS,EAAEC,UAAU,CAAC,GAAGnE,gBAAgB,CAACkD,KAAK,CAAC;MAEvD,OAAAkB,YAAA,QAAAC,WAAA;QAAA,SAEW,CACL,qBAAqB,EACrB;UACE,4BAA4B,EAAE9C,KAAK,CAACX,KAAK;UACzC,+BAA+B,EAAEE,KAAK,CAACwB,QAAQ;UAC/C,4BAA4B,EAAExB,KAAK,CAACuB,KAAK;UACzC,8BAA8B,EAAEiB,SAAS,CAAC1C,KAAK;UAC/C,oCAAoC,EAAE2C,cAAc,CAAC3C,KAAK;UAC1D,6BAA6B,EAAEE,KAAK,CAACwD;QACvC,CAAC,EACDrD,cAAc,CAACL,KAAK,EACpBE,KAAK,CAACyD,KAAK;MACZ,GACIL,SAAS;QAAA,SACNpD,KAAK,CAAC0D;MAAK,KAAAJ,YAAA;QAAA,SAGV,CACL,8BAA8B,EAC9BjC,gBAAgB,CAACvB,KAAK,CACvB;QAAA,SACOwB,eAAe,CAACxB;MAAK,IAE3BuC,KAAK,CAACsB,OAAO,IAAI,EAAAC,eAAA,CAAAN,YAAA;QAAA,SAGV,CACL,4BAA4B;MAC7B,IAOC5B,IAAI,CAAC5B,KAAK,IAAAwD,YAAA,CAAAlF,KAAA;QAAA,OAAe,MAAM;QAAA,QAAQsD,IAAI,CAAC5B;MAAK,QAAK,EAAAwD,YAAA,UAAAC,WAAA;QAAA,OAGhDb,KAAK;QAAA,WACDjC,KAAK,CAACX,KAAK;QAAA,YACV,CAAC,EAAEE,KAAK,CAACgB,QAAQ,IAAIhB,KAAK,CAACwB,QAAQ,CAAC;QAAA,MAC1Ce,EAAE,CAACzC,KAAK;QAAA,UACJkD,MAAM;QAAA,WACLH,OAAO;QAAA,WACPI,OAAO;QAAA,iBACD,CAAC,EAAEjD,KAAK,CAACgB,QAAQ,IAAIhB,KAAK,CAACwB,QAAQ,CAAC;QAAA,QAC7CxB,KAAK,CAAC6D,IAAI;QAAA,SACTjE,SAAS,CAACE,KAAK;QAAA,QAChBE,KAAK,CAAC8B,IAAI;QAAA,gBACF9B,KAAK,CAAC6D,IAAI,KAAK,UAAU,GAAGpD,KAAK,CAACX,KAAK,GAAGI;MAAS,GAC7DmD,UAAU,UAGfhB,KAAK,CAACK,KAAK,GAAG;QACdjC,KAAK;QACLY,gBAAgB;QAChBC,eAAe;QACftB,KAAK,EAAE;UACL6C,OAAO;UACPG,MAAM;UACNT,EAAE,EAAEA,EAAE,CAACzC;QACT;MACF,CAAC,CAAyB,MAAAgE,iBAAA,YAjCf9D,KAAK,CAAC+D,MAAM,IAAI,CACzB,CAAC/D,KAAK,CAACwB,QAAQ,IAAI,CAACxB,KAAK,CAACgB,QAAQ,EAClC,IAAI,EACJ,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,OAiCHtB,KAAK,IAAA4D,YAAA,CAAAjF,MAAA;QAAA,OACSkE,EAAE,CAACzC,KAAK;QAAA;MAAA;QAAA6D,OAAA,EAAAA,CAAA,MAClBjE,KAAK;MAAA,EAEV;IAGP,CAAC,CAAC;IAEF,OAAO;MACL8C,SAAS;MACTE;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","makeSelectionControlGroupProps","VSelectionControlGroupSymbol","useTextColor","makeComponentProps","useDensity","useProxiedModel","Ripple","computed","inject","nextTick","ref","shallowRef","filterInputAttrs","genericComponent","getUid","matchesSelector","propsFactory","useRender","wrapInArray","makeVSelectionControlProps","label","String","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","icon","trueIcon","falseIcon","VSelectionControl","name","directives","inheritAttrs","emits","setup","_ref","attrs","slots","uid","id","isFocused","isFocusVisible","input","onForceUpdate","checked","onFocus","e","target","onBlur","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 { 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 { GenericProps } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  textColorClasses: Ref<string[]>\n  textColorStyles: 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: never\n  label: { label: string | undefined, props: Record<string, unknown> }\n  input: SelectionControlSlot\n}\n\nexport const makeVSelectionControlProps = propsFactory({\n  label: 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': ((val: any) => void) | 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        ? 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    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    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>(\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (val: T) => any\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': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      group,\n      densityClasses,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = shallowRef(false)\n    const isFocusVisible = shallowRef(false)\n    const input = ref<HTMLInputElement>()\n\n    group?.onForceUpdate(() => {\n      if (input.value) {\n        input.value.checked = model.value\n      }\n    })\n\n    function onFocus (e: FocusEvent) {\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 (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.readonly || props.disabled) }\n          id={ id.value }\n          onBlur={ onBlur }\n          onFocus={ onFocus }\n          onInput={ onInput }\n          aria-disabled={ !!(props.readonly || 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\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                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>\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":"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"}

package/lib/components/VSelectionControl/index.d.mts

@@ -41,6 +41,8 @@ type SelectionControlSlot = {
     model: WritableComputedRef<any>;
     textColorClasses: Ref<string[]>;
     textColorStyles: Ref<CSSProperties>;
+    inputNode: VNode;
+    icon: IconValue | undefined;
     props: {
         onBlur: (e: Event) => void;
         onFocus: (e: FocusEvent) => void;
@@ -81,42 +83,42 @@ declare const VSelectionControl: {
             ref_for?: boolean | undefined;
             ref_key?: string | undefined;
             theme?: string | undefined;
-            onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            onVnodeBeforeMount?: ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>) => void) | ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            onVnodeMounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            onVnodeMounted?: ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>) => void) | ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            onVnodeBeforeUpdate?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            onVnodeBeforeUpdate?: ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>, oldVNode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>) => void) | ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>, oldVNode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            onVnodeUpdated?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            onVnodeUpdated?: ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>, oldVNode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>) => void) | ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>, oldVNode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            onVnodeBeforeUnmount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            onVnodeBeforeUnmount?: ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>) => void) | ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            onVnodeUnmounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            onVnodeUnmounted?: ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
-            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }>) => void) | ((vnode: VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((val: any) => any) | undefined;
@@ -133,16 +135,16 @@ declare const VSelectionControl: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            default?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default?: (() => VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
             label?: ((arg: {
                 label: string | undefined;
                 props: Record<string, unknown>;
-            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }) => VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
-            input?: ((arg: SelectionControlSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            input?: ((arg: SelectionControlSlot) => VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
         }>;
@@ -192,16 +194,16 @@ declare const VSelectionControl: {
             ripple: boolean;
             valueComparator: typeof deepEqual;
         }, {}, string, vue.SlotsType<Partial<{
-            default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default: () => VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
             label: (arg: {
                 label: string | undefined;
                 props: Record<string, unknown>;
-            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            }) => VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
-            input: (arg: SelectionControlSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            input: (arg: SelectionControlSlot) => VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
         }>>> & {
@@ -299,16 +301,16 @@ declare const VSelectionControl: {
     ripple: boolean;
     valueComparator: typeof deepEqual;
 }, {}, string, vue.SlotsType<Partial<{
-    default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    default: () => VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
     label: (arg: {
         label: string | undefined;
         props: Record<string, unknown>;
-    }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    }) => VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
-    input: (arg: SelectionControlSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    input: (arg: SelectionControlSlot) => VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1>(props: {

package/lib/components/VSwitch/VSwitch.css

@@ -11,52 +11,56 @@
 
 .v-switch__track,
 .v-switch__thumb {
-  background-color: currentColor;
   transition: none;
 }
 .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__track,
 .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__thumb {
   background-color: rgb(var(--v-theme-error));
-}
-
-.v-selection-control--dirty .v-switch__thumb {
-  color: currentColor;
+  color: rgb(var(--v-theme-on-error));
 }
 
 .v-switch__track {
-  border-radius: 8px;
+  background-color: currentColor;
+  border-radius: 9999px;
   height: 14px;
   opacity: 0.6;
   width: 36px;
   cursor: pointer;
+  transition: 0.2s color cubic-bezier(0.4, 0, 0.2, 1);
 }
 .v-switch--inset .v-switch__track {
-  border-radius: 14px;
-  height: 28px;
-  width: 48px;
+  border-radius: 9999px;
+  height: 32px;
+  width: 52px;
 }
 
 .v-switch__thumb {
   align-items: center;
   border-radius: 50%;
-  color: rgb(var(--v-theme-surface));
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
   display: flex;
   height: 20px;
   justify-content: center;
   width: 20px;
   pointer-events: none;
-  transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
+  transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
   box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-switch--inset .v-switch__thumb {
+  height: 24px;
+  width: 24px;
+  transform: scale(0.6666666667);
   box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
-.v-switch:not(.v-switch--loading) .v-icon ~ .v-switch__thumb {
-  display: none;
+.v-switch--inset .v-switch__thumb--filled {
+  transform: none;
 }
-
-.v-switch--loading .v-selection-control__input > .v-icon {
-  display: none;
+.v-switch--inset .v-selection-control--dirty .v-switch__thumb {
+  transform: none;
+  transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
 }
 
 .v-switch .v-selection-control {
@@ -64,10 +68,13 @@
 }
 .v-switch .v-selection-control__input {
   border-radius: 50%;
-  transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
+  transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);
   transform: translateX(-10px);
   position: absolute;
 }
+.v-switch .v-selection-control__input .v-icon {
+  position: absolute;
+}
 .v-switch .v-selection-control--dirty .v-selection-control__input {
   transform: translateX(10px);
 }

package/lib/components/VSwitch/VSwitch.mjs

@@ -1,8 +1,10 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 // Styles
 import "./VSwitch.css";
 
 // Components
+import { VScaleTransition } from "../transitions/index.mjs";
+import { VIcon } from "../VIcon/index.mjs";
 import { makeVInputProps, VInput } from "../VInput/VInput.mjs";
 import { VProgressCircular } from "../VProgressCircular/index.mjs";
 import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs"; // Composables
@@ -107,25 +109,32 @@ export const VSwitch = genericComponent()({
             }, null),
             input: _ref3 => {
               let {
-                textColorClasses,
-                textColorStyles
+                inputNode,
+                icon
               } = _ref3;
-              return _createVNode("div", {
-                "class": ['v-switch__thumb', textColorClasses.value],
-                "style": textColorStyles.value
-              }, [props.loading && _createVNode(LoaderSlot, {
-                "name": "v-switch",
-                "active": true,
-                "color": isValid.value === false ? undefined : loaderColor.value
-              }, {
-                default: slotProps => slots.loader ? slots.loader(slotProps) : _createVNode(VProgressCircular, {
-                  "active": slotProps.isActive,
-                  "color": slotProps.color,
-                  "indeterminate": true,
-                  "size": "16",
-                  "width": "2"
-                }, null)
-              })]);
+              return _createVNode(_Fragment, null, [inputNode, _createVNode("div", {
+                "class": ['v-switch__thumb', {
+                  'v-switch__thumb--filled': icon || props.loading
+                }]
+              }, [_createVNode(VScaleTransition, null, {
+                default: () => [!props.loading ? icon && _createVNode(VIcon, {
+                  "key": icon,
+                  "icon": icon,
+                  "size": "x-small"
+                }, null) : _createVNode(LoaderSlot, {
+                  "name": "v-switch",
+                  "active": true,
+                  "color": isValid.value === false ? undefined : loaderColor.value
+                }, {
+                  default: slotProps => slots.loader ? slots.loader(slotProps) : _createVNode(VProgressCircular, {
+                    "active": slotProps.isActive,
+                    "color": slotProps.color,
+                    "indeterminate": true,
+                    "size": "16",
+                    "width": "2"
+                  }, null)
+                })]
+              })])]);
             }
           });
         }

package/lib/components/VSwitch/VSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.mjs","names":["makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","update:modelValue","val","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","filterProps","controlProps","_2","control","onClick","e","stopPropagation","preventDefault","input","click","_createVNode","_mergeProps","class","style","_ref2","messagesId","isDisabled","isReadonly","isValid","$event","undefined","_ref3","textColorClasses","textColorStyles","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & { loader: LoaderSlotProps }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = VInput.filterProps(props)\n      const [controlProps, _2] = VSelectionControl.filterProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick (e: Event) {\n        e.stopPropagation()\n        e.preventDefault()\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses, textColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\n                      style={ textColorStyles.value }\n                    >\n                      { props.loading && (\n                        <LoaderSlot\n                          name=\"v-switch\"\n                          active\n                          color={ isValid.value === false ? undefined : loaderColor.value }\n                        >\n                          { slotProps => (\n                            slots.loader\n                              ? slots.loader(slotProps)\n                              : (\n                                  <VProgressCircular\n                                    active={ slotProps.isActive }\n                                    color={ slotProps.color }\n                                    indeterminate\n                                    size=\"16\"\n                                    width=\"2\"\n                                  />\n                              )\n                          )}\n                        </LoaderSlot>\n                      )}\n                    </div>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}
+{"version":3,"file":"VSwitch.mjs","names":["VScaleTransition","VIcon","makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","update:modelValue","val","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","filterProps","controlProps","_2","control","onClick","e","stopPropagation","preventDefault","input","click","_createVNode","_mergeProps","class","style","_ref2","messagesId","isDisabled","isReadonly","isValid","$event","undefined","_ref3","inputNode","icon","_Fragment","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VIcon } from '@/components/VIcon'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & { loader: LoaderSlotProps }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = VInput.filterProps(props)\n      const [controlProps, _2] = VSelectionControl.filterProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick (e: Event) {\n        e.stopPropagation()\n        e.preventDefault()\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ inputNode, icon }) => (\n                    <>\n                      { inputNode }\n\n                      <div\n                        class={[\n                          'v-switch__thumb',\n                          { 'v-switch__thumb--filled': icon || props.loading },\n                        ]}\n                      >\n                        <VScaleTransition>\n                          { !props.loading ? (\n                            icon && <VIcon key={ icon as any } icon={ icon } size=\"x-small\" />\n                          ) : (\n                            <LoaderSlot\n                              name=\"v-switch\"\n                              active\n                              color={ isValid.value === false ? undefined : loaderColor.value }\n                            >\n                              { slotProps => (\n                                slots.loader\n                                  ? slots.loader(slotProps)\n                                  : (\n                                    <VProgressCircular\n                                      active={ slotProps.isActive }\n                                      color={ slotProps.color }\n                                      indeterminate\n                                      size=\"16\"\n                                      width=\"2\"\n                                    />\n                                  )\n                              )}\n                            </LoaderSlot>\n                          )}\n                        </VScaleTransition>\n                      </div>\n                    </>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}

package/lib/components/VSwitch/VSwitch.sass

@@ -15,22 +15,20 @@
 
 .v-switch__track,
 .v-switch__thumb
-  background-color: currentColor
   transition: none
 
   .v-selection-control--error:not(.v-selection-control--disabled) &
     background-color: $switch-error-background-color
-
-.v-switch__thumb
-  .v-selection-control--dirty &
-    color: currentColor
+    color: $switch-error-color
 
 .v-switch__track
+  background-color: currentColor
   border-radius: $switch-track-radius
   height: $switch-track-height
   opacity: $switch-track-opacity
   width: $switch-track-width
   cursor: pointer
+  transition: $switch-track-transition
 
   .v-switch--inset &
     border-radius: $switch-inset-track-border-radius
@@ -40,24 +38,32 @@
 .v-switch__thumb
   align-items: center
   border-radius: $switch-thumb-radius
-  color: rgb(var(--v-theme-surface))
+  background: $switch-thumb-background
+  color: $switch-thumb-color
   display: flex
   height: $switch-thumb-height
   justify-content: center
   width: $switch-thumb-width
   pointer-events: none
-  transition: $switch-control-input-transition
+  transition: .15s .05s transform settings.$decelerated-easing
+  position: relative
+  overflow: hidden
 
   @include tools.elevation($switch-thumb-elevation)
 
   .v-switch--inset &
+    height: $switch-inset-thumb-height
+    width: $switch-inset-thumb-width
+    transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height))
+
     @include tools.elevation(0)
 
-  .v-switch:not(.v-switch--loading) .v-icon ~ &
-    display: none
+    &--filled
+      transform: none
 
-.v-switch--loading .v-selection-control__input > .v-icon
-  display: none
+  .v-switch--inset .v-selection-control--dirty &
+    transform: none
+    transition: .15s .05s transform settings.$decelerated-easing
 
 .v-switch
   $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
@@ -71,6 +77,9 @@
     transform: translateX(-$switch-thumb-transform)
     position: absolute
 
+    .v-icon
+      position: absolute
+
   .v-selection-control--dirty
     .v-selection-control__input
       transform: translateX($switch-thumb-transform)

package/lib/components/VSwitch/_variables.scss

@@ -1,19 +1,31 @@
 @use '../../styles/settings';
 
 // VSwitch
-$switch-control-input-transition: .15s transform settings.$standard-easing !default;
+$switch-control-input-transition: .2s transform settings.$standard-easing !default;
 $switch-error-background-color: rgb(var(--v-theme-error)) !default;
-$switch-inset-track-border-radius: 14px !default;
-$switch-inset-track-height: 28px !default;
-$switch-inset-track-width: 48px !default;
+$switch-error-color: rgb(var(--v-theme-on-error)) !default;
+
+$switch-inset-thumb-height: 24px !default;
+$switch-inset-thumb-width: 24px !default;
+$switch-inset-thumb-off-height: 16px !default;
+$switch-inset-thumb-off-width: 16px !default;
+$switch-inset-track-border-radius: 9999px !default;
+$switch-inset-track-height: 32px !default;
+$switch-inset-track-width: 52px !default;
+
 $switch-label-margin-inline-start: 10px !default;
 $switch-loader-color: rgb(var(--v-theme-surface)) !default;
+
+$switch-thumb-background: rgb(var(--v-theme-surface)) !default;
+$switch-thumb-color: rgb(var(--v-theme-on-surface)) !default;
 $switch-thumb-elevation: 4 !default;
 $switch-thumb-height: 20px !default;
 $switch-thumb-width: 20px !default;
 $switch-thumb-offset: 2px !default;
 $switch-thumb-radius: 50% !default;
-$switch-track-radius: 8px !default;
+
+$switch-track-radius: 9999px !default;
+$switch-track-width: 36px !default;
 $switch-track-height: 14px !default;
 $switch-track-opacity: .6 !default;
-$switch-track-width: 36px !default;
+$switch-track-transition: .2s color settings.$standard-easing !default;

package/lib/components/VSwitch/index.d.mts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { ComponentPropsOptions, ExtractPropTypes, PropType, JSXComponent, WritableComputedRef, Ref, CSSProperties, ComputedRef } from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, PropType, JSXComponent, WritableComputedRef, Ref, CSSProperties, VNode, ComputedRef } from 'vue';
 
 interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
     filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
@@ -18,6 +18,8 @@ type SelectionControlSlot = {
     model: WritableComputedRef<any>;
     textColorClasses: Ref<string[]>;
     textColorStyles: Ref<CSSProperties>;
+    inputNode: VNode;
+    icon: IconValue | undefined;
     props: {
         onBlur: (e: Event) => void;
         onFocus: (e: FocusEvent) => void;

package/lib/components/VTextField/VTextField.css

@@ -5,8 +5,6 @@
   flex: 1;
   transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
   min-width: 0;
-  margin-top: var(--v-input-chips-margin-top);
-  margin-bottom: var(--v-input-chips-margin-bottom);
 }
 .v-text-field input:focus, .v-text-field input:active {
   outline: none;
@@ -25,6 +23,15 @@
   --v-field-padding-end: 0;
 }
 
+.v-text-field .v-field__input input {
+  margin-top: var(--v-input-chips-margin-top);
+  margin-bottom: var(--v-input-chips-margin-bottom);
+}
+.v-text-field input.v-field__input {
+  min-height: calc(max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom) + var(--v-input-chips-margin-bottom) + 2px) - var(--v-input-chips-margin-top) - var(--v-input-chips-margin-bottom));
+  padding-top: calc(var(--v-input-chips-margin-top) + var(--v-field-input-padding-top));
+  padding-bottom: calc(var(--v-input-chips-margin-bottom) + var(--v-field-input-padding-bottom));
+}
 .v-text-field .v-input__details {
   padding-inline-start: 16px;
   padding-inline-end: 16px;