vuetify 3.3.16 → 3.3.18

package/lib/labs/VDateRangePicker/index.d.mts

@@ -22,11 +22,11 @@ declare const VDateRangeCard: {
             inputMode?: "calendar" | "keyboard" | undefined;
             disabled?: string | boolean | string[] | undefined;
             multiple?: boolean | undefined;
+            variant?: string | undefined;
             modelValue?: any[] | undefined;
-            collapseIcon?: string | undefined;
-            expandIcon?: string | undefined;
             nextIcon?: string | undefined;
             prevIcon?: string | undefined;
+            modeIcon?: string | undefined;
             viewMode?: "month" | "year" | undefined;
             showAdjacentMonths?: boolean | undefined;
             hideWeekdays?: boolean | undefined;
@@ -147,12 +147,12 @@ declare const VDateRangeCard: {
                 type: StringConstructor[];
                 default: string;
             };
-            expandIcon: {
+            modeIcon: {
                 type: StringConstructor[];
                 default: string;
             };
-            collapseIcon: {
-                type: StringConstructor[];
+            variant: {
+                type: StringConstructor;
                 default: string;
             };
             viewMode: {
@@ -182,11 +182,11 @@ declare const VDateRangeCard: {
             inputMode: "calendar" | "keyboard";
             disabled: string | boolean | string[];
             multiple: boolean;
+            variant: string;
             modelValue: any[];
-            collapseIcon: string;
-            expandIcon: string;
             nextIcon: string;
             prevIcon: string;
+            modeIcon: string;
             viewMode: "month" | "year";
             showAdjacentMonths: boolean;
             hideWeekdays: boolean;
@@ -256,12 +256,12 @@ declare const VDateRangeCard: {
             type: StringConstructor[];
             default: string;
         };
-        expandIcon: {
+        modeIcon: {
             type: StringConstructor[];
             default: string;
         };
-        collapseIcon: {
-            type: StringConstructor[];
+        variant: {
+            type: StringConstructor;
             default: string;
         };
         viewMode: {
@@ -327,12 +327,12 @@ declare const VDateRangeCard: {
         type: StringConstructor[];
         default: string;
     };
-    expandIcon: {
+    modeIcon: {
         type: StringConstructor[];
         default: string;
     };
-    collapseIcon: {
-        type: StringConstructor[];
+    variant: {
+        type: StringConstructor;
         default: string;
     };
     viewMode: {
@@ -362,11 +362,11 @@ declare const VDateRangeCard: {
     inputMode: "calendar" | "keyboard";
     disabled: string | boolean | string[];
     multiple: boolean;
+    variant: string;
     modelValue: any[];
-    collapseIcon: string;
-    expandIcon: string;
     nextIcon: string;
     prevIcon: string;
+    modeIcon: string;
     viewMode: "month" | "year";
     showAdjacentMonths: boolean;
     hideWeekdays: boolean;
@@ -416,12 +416,12 @@ declare const VDateRangeCard: {
         type: StringConstructor[];
         default: string;
     };
-    expandIcon: {
+    modeIcon: {
         type: StringConstructor[];
         default: string;
     };
-    collapseIcon: {
-        type: StringConstructor[];
+    variant: {
+        type: StringConstructor;
         default: string;
     };
     viewMode: {
@@ -477,12 +477,12 @@ declare const VDateRangeCard: {
         type: StringConstructor[];
         default: string;
     };
-    expandIcon: {
+    modeIcon: {
         type: StringConstructor[];
         default: string;
     };
-    collapseIcon: {
-        type: StringConstructor[];
+    variant: {
+        type: StringConstructor;
         default: string;
     };
     viewMode: {
@@ -590,6 +590,7 @@ declare const VDateRangePicker: {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((date: any) => any) | undefined;
+            bgColor?: string | undefined;
             "onUpdate:displayDate"?: ((date: any) => any) | undefined;
             "onUpdate:inputMode"?: ((input: string) => any) | undefined;
             "onUpdate:viewMode"?: ((mode: "month" | "year") => any) | undefined;
@@ -653,6 +654,7 @@ declare const VDateRangePicker: {
             side?: string | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
+            bgColor?: string | undefined;
             hoverDate?: any;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -762,6 +764,7 @@ declare const VDateRangePicker: {
         side?: string | undefined;
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
+        bgColor?: string | undefined;
         hoverDate?: any;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -824,6 +827,7 @@ declare const VDateRangePicker: {
     side?: string | undefined;
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
+    bgColor?: string | undefined;
     hoverDate?: any;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -933,36 +937,37 @@ declare const VDateRangePicker: {
     };
     showInputSwitch: BooleanConstructor;
     range: null;
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: vue.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
     location: vue.PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
     height: (StringConstructor | NumberConstructor)[];
-    width: (StringConstructor | NumberConstructor)[];
-    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
-    position: {
-        type: vue.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
-        validator: (v: any) => boolean;
-    };
+    width: (StringConstructor | NumberConstructor)[];
+    class: vue.PropType<any>;
     style: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
-    class: vue.PropType<any>;
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
-    theme: StringConstructor;
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
-    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    bgColor: StringConstructor;
     landscape: BooleanConstructor;
     viewMode: {
         type: vue.PropType<"month" | "year">;
@@ -1029,36 +1034,37 @@ declare const VDateRangePicker: {
     };
     showInputSwitch: BooleanConstructor;
     range: null;
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: vue.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
     location: vue.PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
     height: (StringConstructor | NumberConstructor)[];
-    width: (StringConstructor | NumberConstructor)[];
-    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
-    position: {
-        type: vue.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
-        validator: (v: any) => boolean;
-    };
+    width: (StringConstructor | NumberConstructor)[];
+    class: vue.PropType<any>;
     style: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
-    class: vue.PropType<any>;
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
-    theme: StringConstructor;
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
-    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    bgColor: StringConstructor;
     landscape: BooleanConstructor;
     viewMode: {
         type: vue.PropType<"month" | "year">;

package/lib/labs/VOtpInput/VOtpInput.mjs

@@ -140,7 +140,7 @@ export const VOtpInput = genericComponent()({
       scoped: true
     });
     watch(model, val => {
-      if (val.length === props.length) emit('finish', val.join(''));
+      if (val.length === Number(props.length)) emit('finish', val.join(''));
     }, {
       deep: true
     });

package/lib/labs/VOtpInput/VOtpInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VOtpInput.mjs","names":["makeVFieldProps","VField","VOverlay","VProgressCircular","provideDefaults","makeDimensionProps","useDimension","makeFocusProps","useFocus","useLocale","useProxiedModel","computed","ref","watch","filterInputAttrs","focusChild","genericComponent","IN_BROWSER","only","propsFactory","useRender","makeVOtpInputProps","autofocus","Boolean","divider","String","focusAll","label","type","default","length","Number","modelValue","undefined","placeholder","variant","VOtpInput","name","props","emits","finish","val","setup","_ref","attrs","emit","slots","dimensionStyles","isFocused","focus","blur","model","split","join","t","fields","Array","fill","focusIndex","contentRef","inputRef","current","value","onInput","array","slice","target","requestAnimationFrame","onKeydown","e","index","includes","key","preventDefault","select","onPaste","stopPropagation","clipboardData","getData","reset","onFocus","onBlur","disabled","error","scoped","deep","window","rootAttrs","inputAttrs","_createVNode","_mergeProps","class","style","map","_","i","_Fragment","event","loading","loader","some","input"],"sources":["../../../src/labs/VOtpInput/VOtpInput.tsx"],"sourcesContent":["// Styles\nimport './VOtpInput.sass'\n\n// Components\nimport { makeVFieldProps, VField } from '@/components/VField/VField'\nimport { VOverlay } from '@/components/VOverlay/VOverlay'\nimport { VProgressCircular } from '@/components/VProgressCircular/VProgressCircular'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, watch } from 'vue'\nimport { filterInputAttrs, focusChild, genericComponent, IN_BROWSER, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VOtpInputSlots = {\n  default: never\n  loader: never\n}\n\nexport const makeVOtpInputProps = propsFactory({\n  autofocus: Boolean,\n  divider: String,\n  focusAll: Boolean,\n  label: {\n    type: String,\n    default: '$vuetify.input.otp',\n  },\n  length: {\n    type: [Number, String],\n    default: 6,\n  },\n  modelValue: {\n    type: [Number, String],\n    default: undefined,\n  },\n  placeholder: String,\n  type: {\n    type: String as PropType<'text' | 'password' | 'number'>,\n    default: 'text',\n  },\n\n  ...makeDimensionProps(),\n  ...makeFocusProps(),\n  ...only(makeVFieldProps({\n    variant: 'outlined' as const,\n  }), [\n    'baseColor',\n    'bgColor',\n    'class',\n    'color',\n    'disabled',\n    'error',\n    'loading',\n    'rounded',\n    'style',\n    'theme',\n    'variant',\n  ]),\n}, 'VOtpInput')\n\nexport const VOtpInput = genericComponent<VOtpInputSlots>()({\n  name: 'VOtpInput',\n\n  props: makeVOtpInputProps(),\n\n  emits: {\n    finish: (val: string) => true,\n    'update:focused': (val: boolean) => true,\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { dimensionStyles } = useDimension(props)\n    const { isFocused, focus, blur } = useFocus(props)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      '',\n      val => String(val).split(''),\n      val => val.join('')\n    )\n    const { t } = useLocale()\n\n    const fields = computed(() => Array(Number(props.length)).fill(0))\n    const focusIndex = ref(-1)\n    const contentRef = ref<HTMLElement>()\n    const inputRef = ref<HTMLInputElement[]>([])\n    const current = computed(() => inputRef.value[focusIndex.value])\n\n    function onInput () {\n      const array = model.value.slice()\n      const value = current.value.value\n\n      array[focusIndex.value] = value\n\n      model.value = array\n\n      let target: any = null\n\n      if (focusIndex.value > model.value.length) {\n        target = model.value.length + 1\n      } else if (focusIndex.value + 1 !== Number(props.length)) {\n        target = 'next'\n      } else {\n        requestAnimationFrame(() => current.value?.blur())\n      }\n\n      if (target) focusChild(contentRef.value!, target)\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const array = model.value.slice()\n      const index = focusIndex.value\n      let target: 'next' | 'prev' | 'first' | 'last' | number | null = null\n\n      if (![\n        'ArrowLeft',\n        'ArrowRight',\n        'Backspace',\n        'Delete',\n      ].includes(e.key)) return\n\n      e.preventDefault()\n\n      if (e.key === 'ArrowLeft') {\n        target = 'prev'\n      } else if (e.key === 'ArrowRight') {\n        target = 'next'\n      } else if (['Backspace', 'Delete'].includes(e.key)) {\n        array[focusIndex.value] = ''\n\n        model.value = array\n\n        if (focusIndex.value > 0 && e.key === 'Backspace') {\n          target = 'prev'\n        } else {\n          requestAnimationFrame(() => {\n            inputRef.value[index].select()\n          })\n        }\n      }\n\n      requestAnimationFrame(() => {\n        if (target != null) {\n          focusChild(contentRef.value!, target)\n        }\n      })\n    }\n\n    function onPaste (index: number, e: ClipboardEvent) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      model.value = (e?.clipboardData?.getData('Text') ?? '').split('')\n\n      inputRef.value?.[index].blur()\n    }\n\n    function reset () {\n      model.value = []\n    }\n\n    function onFocus (e: FocusEvent, index: number) {\n      focus()\n\n      focusIndex.value = index\n    }\n\n    function onBlur () {\n      blur()\n\n      focusIndex.value = -1\n    }\n\n    provideDefaults({\n      VField: {\n        disabled: computed(() => props.disabled),\n        error: computed(() => props.error),\n        variant: computed(() => props.variant),\n      },\n    }, { scoped: true })\n\n    watch(model, val => {\n      if (val.length === props.length) emit('finish', val.join(''))\n    }, { deep: true })\n\n    watch(focusIndex, val => {\n      if (val < 0) return\n\n      IN_BROWSER && window.requestAnimationFrame(() => {\n        inputRef.value[val].select()\n      })\n    })\n\n    useRender(() => {\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      return (\n        <div\n          class={[\n            'v-otp-input',\n            {\n              'v-otp-input--divided': !!props.divider,\n            },\n            props.class,\n          ]}\n          style={[\n            props.style,\n          ]}\n          { ...rootAttrs }\n        >\n          <div\n            ref={ contentRef }\n            class=\"v-otp-input__content\"\n            style={[\n              dimensionStyles.value,\n            ]}\n          >\n            { fields.value.map((_, i) => (\n              <>\n                { props.divider && i !== 0 && (\n                  <span class=\"v-otp-input__divider\">{ props.divider }</span>\n                )}\n\n                <VField\n                  focused={ (isFocused.value && props.focusAll) || focusIndex.value === i }\n                  key={ i }\n                >\n                  {{\n                    ...slots,\n                    default: () => {\n                      return (\n                        <input\n                          ref={ val => inputRef.value[i] = val as HTMLInputElement }\n                          aria-label={ t(props.label, i + 1) }\n                          autofocus={ i === 0 && props.autofocus }\n                          autocomplete=\"one-time-code\"\n                          class={[\n                            'v-otp-input__field',\n                          ]}\n                          inputmode=\"text\"\n                          min={ props.type === 'number' ? 0 : undefined }\n                          maxlength=\"1\"\n                          placeholder={ props.placeholder }\n                          type={ props.type }\n                          value={ model.value[i] }\n                          onInput={ onInput }\n                          onFocus={ e => onFocus(e, i) }\n                          onBlur={ onBlur }\n                          onKeydown={ onKeydown }\n                          onPaste={ event => onPaste(i, event) }\n                        />\n                      )\n                    },\n                  }}\n                </VField>\n              </>\n            ))}\n\n            <input\n              class=\"v-otp-input-input\"\n              type=\"hidden\"\n              { ...inputAttrs }\n              value={ model.value.join('') }\n            />\n\n            <VOverlay\n              contained\n              content-class=\"v-otp-input__loader\"\n              model-value={ !!props.loading }\n              persistent\n            >\n              { slots.loader?.() ?? (\n                <VProgressCircular\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  size=\"24\"\n                  width=\"2\"\n                />\n              )}\n            </VOverlay>\n\n            { slots.default?.() }\n          </div>\n        </div>\n      )\n    })\n\n    return {\n      blur: () => {\n        inputRef.value?.some(input => input.blur())\n      },\n      focus: () => {\n        inputRef.value?.[0].focus()\n      },\n      reset,\n      isFocused,\n    }\n  },\n})\n\nexport type VOtpInput = InstanceType<typeof VOtpInput>\n"],"mappings":"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"}
+{"version":3,"file":"VOtpInput.mjs","names":["makeVFieldProps","VField","VOverlay","VProgressCircular","provideDefaults","makeDimensionProps","useDimension","makeFocusProps","useFocus","useLocale","useProxiedModel","computed","ref","watch","filterInputAttrs","focusChild","genericComponent","IN_BROWSER","only","propsFactory","useRender","makeVOtpInputProps","autofocus","Boolean","divider","String","focusAll","label","type","default","length","Number","modelValue","undefined","placeholder","variant","VOtpInput","name","props","emits","finish","val","setup","_ref","attrs","emit","slots","dimensionStyles","isFocused","focus","blur","model","split","join","t","fields","Array","fill","focusIndex","contentRef","inputRef","current","value","onInput","array","slice","target","requestAnimationFrame","onKeydown","e","index","includes","key","preventDefault","select","onPaste","stopPropagation","clipboardData","getData","reset","onFocus","onBlur","disabled","error","scoped","deep","window","rootAttrs","inputAttrs","_createVNode","_mergeProps","class","style","map","_","i","_Fragment","event","loading","loader","some","input"],"sources":["../../../src/labs/VOtpInput/VOtpInput.tsx"],"sourcesContent":["// Styles\nimport './VOtpInput.sass'\n\n// Components\nimport { makeVFieldProps, VField } from '@/components/VField/VField'\nimport { VOverlay } from '@/components/VOverlay/VOverlay'\nimport { VProgressCircular } from '@/components/VProgressCircular/VProgressCircular'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, watch } from 'vue'\nimport { filterInputAttrs, focusChild, genericComponent, IN_BROWSER, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VOtpInputSlots = {\n  default: never\n  loader: never\n}\n\nexport const makeVOtpInputProps = propsFactory({\n  autofocus: Boolean,\n  divider: String,\n  focusAll: Boolean,\n  label: {\n    type: String,\n    default: '$vuetify.input.otp',\n  },\n  length: {\n    type: [Number, String],\n    default: 6,\n  },\n  modelValue: {\n    type: [Number, String],\n    default: undefined,\n  },\n  placeholder: String,\n  type: {\n    type: String as PropType<'text' | 'password' | 'number'>,\n    default: 'text',\n  },\n\n  ...makeDimensionProps(),\n  ...makeFocusProps(),\n  ...only(makeVFieldProps({\n    variant: 'outlined' as const,\n  }), [\n    'baseColor',\n    'bgColor',\n    'class',\n    'color',\n    'disabled',\n    'error',\n    'loading',\n    'rounded',\n    'style',\n    'theme',\n    'variant',\n  ]),\n}, 'VOtpInput')\n\nexport const VOtpInput = genericComponent<VOtpInputSlots>()({\n  name: 'VOtpInput',\n\n  props: makeVOtpInputProps(),\n\n  emits: {\n    finish: (val: string) => true,\n    'update:focused': (val: boolean) => true,\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { dimensionStyles } = useDimension(props)\n    const { isFocused, focus, blur } = useFocus(props)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      '',\n      val => String(val).split(''),\n      val => val.join('')\n    )\n    const { t } = useLocale()\n\n    const fields = computed(() => Array(Number(props.length)).fill(0))\n    const focusIndex = ref(-1)\n    const contentRef = ref<HTMLElement>()\n    const inputRef = ref<HTMLInputElement[]>([])\n    const current = computed(() => inputRef.value[focusIndex.value])\n\n    function onInput () {\n      const array = model.value.slice()\n      const value = current.value.value\n\n      array[focusIndex.value] = value\n\n      model.value = array\n\n      let target: any = null\n\n      if (focusIndex.value > model.value.length) {\n        target = model.value.length + 1\n      } else if (focusIndex.value + 1 !== Number(props.length)) {\n        target = 'next'\n      } else {\n        requestAnimationFrame(() => current.value?.blur())\n      }\n\n      if (target) focusChild(contentRef.value!, target)\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const array = model.value.slice()\n      const index = focusIndex.value\n      let target: 'next' | 'prev' | 'first' | 'last' | number | null = null\n\n      if (![\n        'ArrowLeft',\n        'ArrowRight',\n        'Backspace',\n        'Delete',\n      ].includes(e.key)) return\n\n      e.preventDefault()\n\n      if (e.key === 'ArrowLeft') {\n        target = 'prev'\n      } else if (e.key === 'ArrowRight') {\n        target = 'next'\n      } else if (['Backspace', 'Delete'].includes(e.key)) {\n        array[focusIndex.value] = ''\n\n        model.value = array\n\n        if (focusIndex.value > 0 && e.key === 'Backspace') {\n          target = 'prev'\n        } else {\n          requestAnimationFrame(() => {\n            inputRef.value[index].select()\n          })\n        }\n      }\n\n      requestAnimationFrame(() => {\n        if (target != null) {\n          focusChild(contentRef.value!, target)\n        }\n      })\n    }\n\n    function onPaste (index: number, e: ClipboardEvent) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      model.value = (e?.clipboardData?.getData('Text') ?? '').split('')\n\n      inputRef.value?.[index].blur()\n    }\n\n    function reset () {\n      model.value = []\n    }\n\n    function onFocus (e: FocusEvent, index: number) {\n      focus()\n\n      focusIndex.value = index\n    }\n\n    function onBlur () {\n      blur()\n\n      focusIndex.value = -1\n    }\n\n    provideDefaults({\n      VField: {\n        disabled: computed(() => props.disabled),\n        error: computed(() => props.error),\n        variant: computed(() => props.variant),\n      },\n    }, { scoped: true })\n\n    watch(model, val => {\n      if (val.length === Number(props.length)) emit('finish', val.join(''))\n    }, { deep: true })\n\n    watch(focusIndex, val => {\n      if (val < 0) return\n\n      IN_BROWSER && window.requestAnimationFrame(() => {\n        inputRef.value[val].select()\n      })\n    })\n\n    useRender(() => {\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      return (\n        <div\n          class={[\n            'v-otp-input',\n            {\n              'v-otp-input--divided': !!props.divider,\n            },\n            props.class,\n          ]}\n          style={[\n            props.style,\n          ]}\n          { ...rootAttrs }\n        >\n          <div\n            ref={ contentRef }\n            class=\"v-otp-input__content\"\n            style={[\n              dimensionStyles.value,\n            ]}\n          >\n            { fields.value.map((_, i) => (\n              <>\n                { props.divider && i !== 0 && (\n                  <span class=\"v-otp-input__divider\">{ props.divider }</span>\n                )}\n\n                <VField\n                  focused={ (isFocused.value && props.focusAll) || focusIndex.value === i }\n                  key={ i }\n                >\n                  {{\n                    ...slots,\n                    default: () => {\n                      return (\n                        <input\n                          ref={ val => inputRef.value[i] = val as HTMLInputElement }\n                          aria-label={ t(props.label, i + 1) }\n                          autofocus={ i === 0 && props.autofocus }\n                          autocomplete=\"one-time-code\"\n                          class={[\n                            'v-otp-input__field',\n                          ]}\n                          inputmode=\"text\"\n                          min={ props.type === 'number' ? 0 : undefined }\n                          maxlength=\"1\"\n                          placeholder={ props.placeholder }\n                          type={ props.type }\n                          value={ model.value[i] }\n                          onInput={ onInput }\n                          onFocus={ e => onFocus(e, i) }\n                          onBlur={ onBlur }\n                          onKeydown={ onKeydown }\n                          onPaste={ event => onPaste(i, event) }\n                        />\n                      )\n                    },\n                  }}\n                </VField>\n              </>\n            ))}\n\n            <input\n              class=\"v-otp-input-input\"\n              type=\"hidden\"\n              { ...inputAttrs }\n              value={ model.value.join('') }\n            />\n\n            <VOverlay\n              contained\n              content-class=\"v-otp-input__loader\"\n              model-value={ !!props.loading }\n              persistent\n            >\n              { slots.loader?.() ?? (\n                <VProgressCircular\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  size=\"24\"\n                  width=\"2\"\n                />\n              )}\n            </VOverlay>\n\n            { slots.default?.() }\n          </div>\n        </div>\n      )\n    })\n\n    return {\n      blur: () => {\n        inputRef.value?.some(input => input.blur())\n      },\n      focus: () => {\n        inputRef.value?.[0].focus()\n      },\n      reset,\n      isFocused,\n    }\n  },\n})\n\nexport type VOtpInput = InstanceType<typeof VOtpInput>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,MAAM;AAAA,SACvBC,QAAQ;AAAA,SACRC,iBAAiB,oEAE1B;AAAA,SACSC,eAAe;AAAA,SACfC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,cAAc,EAAEC,QAAQ;AAAA,SACxBC,SAAS;AAAA,SACTC,eAAe,8CAExB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACjCC,gBAAgB,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,gCAElG;AASA,OAAO,MAAMC,kBAAkB,GAAGF,YAAY,CAAC;EAC7CG,SAAS,EAAEC,OAAO;EAClBC,OAAO,EAAEC,MAAM;EACfC,QAAQ,EAAEH,OAAO;EACjBI,KAAK,EAAE;IACLC,IAAI,EAAEH,MAAM;IACZI,OAAO,EAAE;EACX,CAAC;EACDC,MAAM,EAAE;IACNF,IAAI,EAAE,CAACG,MAAM,EAAEN,MAAM,CAAC;IACtBI,OAAO,EAAE;EACX,CAAC;EACDG,UAAU,EAAE;IACVJ,IAAI,EAAE,CAACG,MAAM,EAAEN,MAAM,CAAC;IACtBI,OAAO,EAAEI;EACX,CAAC;EACDC,WAAW,EAAET,MAAM;EACnBG,IAAI,EAAE;IACJA,IAAI,EAAEH,MAAkD;IACxDI,OAAO,EAAE;EACX,CAAC;EAED,GAAGxB,kBAAkB,EAAE;EACvB,GAAGE,cAAc,EAAE;EACnB,GAAGW,IAAI,CAAClB,eAAe,CAAC;IACtBmC,OAAO,EAAE;EACX,CAAC,CAAC,EAAE,CACF,WAAW,EACX,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,SAAS,EACT,OAAO,EACP,OAAO,EACP,SAAS,CACV;AACH,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMC,SAAS,GAAGpB,gBAAgB,EAAkB,CAAC;EAC1DqB,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEjB,kBAAkB,EAAE;EAE3BkB,KAAK,EAAE;IACLC,MAAM,EAAGC,GAAW,IAAK,IAAI;IAC7B,gBAAgB,EAAGA,GAAY,IAAK,IAAI;IACxC,mBAAmB,EAAGA,GAAW,IAAK;EACxC,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAH,IAAA;IAClC,MAAM;MAAEI;IAAgB,CAAC,GAAGzC,YAAY,CAACgC,KAAK,CAAC;IAC/C,MAAM;MAAEU,SAAS;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAG1C,QAAQ,CAAC8B,KAAK,CAAC;IAClD,MAAMa,KAAK,GAAGzC,eAAe,CAC3B4B,KAAK,EACL,YAAY,EACZ,EAAE,EACFG,GAAG,IAAIhB,MAAM,CAACgB,GAAG,CAAC,CAACW,KAAK,CAAC,EAAE,CAAC,EAC5BX,GAAG,IAAIA,GAAG,CAACY,IAAI,CAAC,EAAE,CAAC,CACpB;IACD,MAAM;MAAEC;IAAE,CAAC,GAAG7C,SAAS,EAAE;IAEzB,MAAM8C,MAAM,GAAG5C,QAAQ,CAAC,MAAM6C,KAAK,CAACzB,MAAM,CAACO,KAAK,CAACR,MAAM,CAAC,CAAC,CAAC2B,IAAI,CAAC,CAAC,CAAC,CAAC;IAClE,MAAMC,UAAU,GAAG9C,GAAG,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM+C,UAAU,GAAG/C,GAAG,EAAe;IACrC,MAAMgD,QAAQ,GAAGhD,GAAG,CAAqB,EAAE,CAAC;IAC5C,MAAMiD,OAAO,GAAGlD,QAAQ,CAAC,MAAMiD,QAAQ,CAACE,KAAK,CAACJ,UAAU,CAACI,KAAK,CAAC,CAAC;IAEhE,SAASC,OAAOA,CAAA,EAAI;MAClB,MAAMC,KAAK,GAAGb,KAAK,CAACW,KAAK,CAACG,KAAK,EAAE;MACjC,MAAMH,KAAK,GAAGD,OAAO,CAACC,KAAK,CAACA,KAAK;MAEjCE,KAAK,CAACN,UAAU,CAACI,KAAK,CAAC,GAAGA,KAAK;MAE/BX,KAAK,CAACW,KAAK,GAAGE,KAAK;MAEnB,IAAIE,MAAW,GAAG,IAAI;MAEtB,IAAIR,UAAU,CAACI,KAAK,GAAGX,KAAK,CAACW,KAAK,CAAChC,MAAM,EAAE;QACzCoC,MAAM,GAAGf,KAAK,CAACW,KAAK,CAAChC,MAAM,GAAG,CAAC;MACjC,CAAC,MAAM,IAAI4B,UAAU,CAACI,KAAK,GAAG,CAAC,KAAK/B,MAAM,CAACO,KAAK,CAACR,MAAM,CAAC,EAAE;QACxDoC,MAAM,GAAG,MAAM;MACjB,CAAC,MAAM;QACLC,qBAAqB,CAAC,MAAMN,OAAO,CAACC,KAAK,EAAEZ,IAAI,EAAE,CAAC;MACpD;MAEA,IAAIgB,MAAM,EAAEnD,UAAU,CAAC4C,UAAU,CAACG,KAAK,EAAGI,MAAM,CAAC;IACnD;IAEA,SAASE,SAASA,CAAEC,CAAgB,EAAE;MACpC,MAAML,KAAK,GAAGb,KAAK,CAACW,KAAK,CAACG,KAAK,EAAE;MACjC,MAAMK,KAAK,GAAGZ,UAAU,CAACI,KAAK;MAC9B,IAAII,MAA0D,GAAG,IAAI;MAErE,IAAI,CAAC,CACH,WAAW,EACX,YAAY,EACZ,WAAW,EACX,QAAQ,CACT,CAACK,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;MAEnBH,CAAC,CAACI,cAAc,EAAE;MAElB,IAAIJ,CAAC,CAACG,GAAG,KAAK,WAAW,EAAE;QACzBN,MAAM,GAAG,MAAM;MACjB,CAAC,MAAM,IAAIG,CAAC,CAACG,GAAG,KAAK,YAAY,EAAE;QACjCN,MAAM,GAAG,MAAM;MACjB,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAACK,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;QAClDR,KAAK,CAACN,UAAU,CAACI,KAAK,CAAC,GAAG,EAAE;QAE5BX,KAAK,CAACW,KAAK,GAAGE,KAAK;QAEnB,IAAIN,UAAU,CAACI,KAAK,GAAG,CAAC,IAAIO,CAAC,CAACG,GAAG,KAAK,WAAW,EAAE;UACjDN,MAAM,GAAG,MAAM;QACjB,CAAC,MAAM;UACLC,qBAAqB,CAAC,MAAM;YAC1BP,QAAQ,CAACE,KAAK,CAACQ,KAAK,CAAC,CAACI,MAAM,EAAE;UAChC,CAAC,CAAC;QACJ;MACF;MAEAP,qBAAqB,CAAC,MAAM;QAC1B,IAAID,MAAM,IAAI,IAAI,EAAE;UAClBnD,UAAU,CAAC4C,UAAU,CAACG,KAAK,EAAGI,MAAM,CAAC;QACvC;MACF,CAAC,CAAC;IACJ;IAEA,SAASS,OAAOA,CAAEL,KAAa,EAAED,CAAiB,EAAE;MAClDA,CAAC,CAACI,cAAc,EAAE;MAClBJ,CAAC,CAACO,eAAe,EAAE;MAEnBzB,KAAK,CAACW,KAAK,GAAG,CAACO,CAAC,EAAEQ,aAAa,EAAEC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE1B,KAAK,CAAC,EAAE,CAAC;MAEjEQ,QAAQ,CAACE,KAAK,GAAGQ,KAAK,CAAC,CAACpB,IAAI,EAAE;IAChC;IAEA,SAAS6B,KAAKA,CAAA,EAAI;MAChB5B,KAAK,CAACW,KAAK,GAAG,EAAE;IAClB;IAEA,SAASkB,OAAOA,CAAEX,CAAa,EAAEC,KAAa,EAAE;MAC9CrB,KAAK,EAAE;MAEPS,UAAU,CAACI,KAAK,GAAGQ,KAAK;IAC1B;IAEA,SAASW,MAAMA,CAAA,EAAI;MACjB/B,IAAI,EAAE;MAENQ,UAAU,CAACI,KAAK,GAAG,CAAC,CAAC;IACvB;IAEA1D,eAAe,CAAC;MACdH,MAAM,EAAE;QACNiF,QAAQ,EAAEvE,QAAQ,CAAC,MAAM2B,KAAK,CAAC4C,QAAQ,CAAC;QACxCC,KAAK,EAAExE,QAAQ,CAAC,MAAM2B,KAAK,CAAC6C,KAAK,CAAC;QAClChD,OAAO,EAAExB,QAAQ,CAAC,MAAM2B,KAAK,CAACH,OAAO;MACvC;IACF,CAAC,EAAE;MAAEiD,MAAM,EAAE;IAAK,CAAC,CAAC;IAEpBvE,KAAK,CAACsC,KAAK,EAAEV,GAAG,IAAI;MAClB,IAAIA,GAAG,CAACX,MAAM,KAAKC,MAAM,CAACO,KAAK,CAACR,MAAM,CAAC,EAAEe,IAAI,CAAC,QAAQ,EAAEJ,GAAG,CAACY,IAAI,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE;MAAEgC,IAAI,EAAE;IAAK,CAAC,CAAC;IAElBxE,KAAK,CAAC6C,UAAU,EAAEjB,GAAG,IAAI;MACvB,IAAIA,GAAG,GAAG,CAAC,EAAE;MAEbxB,UAAU,IAAIqE,MAAM,CAACnB,qBAAqB,CAAC,MAAM;QAC/CP,QAAQ,CAACE,KAAK,CAACrB,GAAG,CAAC,CAACiC,MAAM,EAAE;MAC9B,CAAC,CAAC;IACJ,CAAC,CAAC;IAEFtD,SAAS,CAAC,MAAM;MACd,MAAM,CAACmE,SAAS,EAAEC,UAAU,CAAC,GAAG1E,gBAAgB,CAAC8B,KAAK,CAAC;MAEvD,OAAA6C,YAAA,QAAAC,WAAA;QAAA,SAEW,CACL,aAAa,EACb;UACE,sBAAsB,EAAE,CAAC,CAACpD,KAAK,CAACd;QAClC,CAAC,EACDc,KAAK,CAACqD,KAAK,CACZ;QAAA,SACM,CACLrD,KAAK,CAACsD,KAAK;MACZ,GACIL,SAAS,IAAAE,YAAA;QAAA,OAGN9B,UAAU;QAAA,SACV,sBAAsB;QAAA,SACrB,CACLZ,eAAe,CAACe,KAAK;MACtB,IAECP,MAAM,CAACO,KAAK,CAAC+B,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAAN,YAAA,CAAAO,SAAA,SAElB1D,KAAK,CAACd,OAAO,IAAIuE,CAAC,KAAK,CAAC,IAAAN,YAAA;QAAA,SACZ;MAAsB,IAAGnD,KAAK,CAACd,OAAO,EACnD,EAAAiE,YAAA,CAAAxF,MAAA;QAAA,WAGY+C,SAAS,CAACc,KAAK,IAAIxB,KAAK,CAACZ,QAAQ,IAAKgC,UAAU,CAACI,KAAK,KAAKiC,CAAC;QAAA,OACjEA;MAAC;QAGL,GAAGjD,KAAK;QACRjB,OAAO,EAAEA,CAAA,KAAM;UACb,OAAA4D,YAAA;YAAA,OAEUhD,GAAG,IAAImB,QAAQ,CAACE,KAAK,CAACiC,CAAC,CAAC,GAAGtD,GAAuB;YAAA,cAC3Ca,CAAC,CAAChB,KAAK,CAACX,KAAK,EAAEoE,CAAC,GAAG,CAAC,CAAC;YAAA,aACtBA,CAAC,KAAK,CAAC,IAAIzD,KAAK,CAAChB,SAAS;YAAA,gBACzB,eAAe;YAAA,SACrB,CACL,oBAAoB,CACrB;YAAA,aACS,MAAM;YAAA,OACVgB,KAAK,CAACV,IAAI,KAAK,QAAQ,GAAG,CAAC,GAAGK,SAAS;YAAA,aACnC,GAAG;YAAA,eACCK,KAAK,CAACJ,WAAW;YAAA,QACxBI,KAAK,CAACV,IAAI;YAAA,SACTuB,KAAK,CAACW,KAAK,CAACiC,CAAC,CAAC;YAAA,WACZhC,OAAO;YAAA,WACPM,CAAC,IAAIW,OAAO,CAACX,CAAC,EAAE0B,CAAC,CAAC;YAAA,UACnBd,MAAM;YAAA,aACHb,SAAS;YAAA,WACX6B,KAAK,IAAItB,OAAO,CAACoB,CAAC,EAAEE,KAAK;UAAC;QAG1C;MAAC,IAIR,CAAC,EAAAR,YAAA,UAAAC,WAAA;QAAA,SAGM,mBAAmB;QAAA,QACpB;MAAQ,GACRF,UAAU;QAAA,SACPrC,KAAK,CAACW,KAAK,CAACT,IAAI,CAAC,EAAE;MAAC,WAAAoC,YAAA,CAAAvF,QAAA;QAAA;QAAA,iBAKd,qBAAqB;QAAA,eACrB,CAAC,CAACoC,KAAK,CAAC4D,OAAO;QAAA;MAAA;QAAArE,OAAA,EAAAA,CAAA,MAG3BiB,KAAK,CAACqD,MAAM,IAAI,IAAAV,YAAA,CAAAtF,iBAAA;UAAA,SAEN,OAAOmC,KAAK,CAAC4D,OAAO,KAAK,SAAS,GAAGjE,SAAS,GAAGK,KAAK,CAAC4D,OAAO;UAAA;UAAA,QAEjE,IAAI;UAAA,SACH;QAAG,QAEZ;MAAA,IAGDpD,KAAK,CAACjB,OAAO,IAAI;IAI3B,CAAC,CAAC;IAEF,OAAO;MACLqB,IAAI,EAAEA,CAAA,KAAM;QACVU,QAAQ,CAACE,KAAK,EAAEsC,IAAI,CAACC,KAAK,IAAIA,KAAK,CAACnD,IAAI,EAAE,CAAC;MAC7C,CAAC;MACDD,KAAK,EAAEA,CAAA,KAAM;QACXW,QAAQ,CAACE,KAAK,GAAG,CAAC,CAAC,CAACb,KAAK,EAAE;MAC7B,CAAC;MACD8B,KAAK;MACL/B;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/labs/VPicker/VPicker.css

@@ -46,7 +46,6 @@
   text-transform: uppercase;
   font-size: 0.75rem;
   grid-area: title;
-  color: rgb(var(--v-theme-on-surface), var(--v-disabled-opacity));
   padding-inline-start: 24px;
   padding-inline-end: 12px;
   padding-top: 16px;

package/lib/labs/VPicker/VPicker.mjs

@@ -4,12 +4,15 @@ import "./VPicker.css";
 
 // Components
 import { VPickerTitle } from "./VPickerTitle.mjs";
-import { makeVSheetProps, VSheet } from "../../components/VSheet/VSheet.mjs"; // Utilities
-import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { makeVSheetProps, VSheet } from "../../components/VSheet/VSheet.mjs"; // Composables
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
+import { toRef } from 'vue';
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVPickerProps = propsFactory({
+  bgColor: String,
   landscape: Boolean,
   title: String,
-  ...omit(makeVSheetProps(), ['color'])
+  ...makeVSheetProps()
 }, 'VPicker');
 export const VPicker = genericComponent()({
   name: 'VPicker',
@@ -18,23 +21,31 @@ export const VPicker = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
     useRender(() => {
       const [sheetProps] = VSheet.filterProps(props);
       const hasTitle = !!(props.title || slots.title);
       return _createVNode(VSheet, _mergeProps(sheetProps, {
+        "color": props.bgColor,
         "class": ['v-picker', {
           'v-picker--landscape': props.landscape,
           'v-picker--with-actions': !!slots.actions
         }, props.class],
         "style": props.style
       }), {
-        default: () => [hasTitle && _createVNode(VPickerTitle, {
+        default: () => [_createVNode("div", {
+          "class": [backgroundColorClasses.value],
+          "style": [backgroundColorStyles.value]
+        }, [hasTitle && _createVNode(VPickerTitle, {
           "key": "picker-title"
         }, {
           default: () => [slots.title?.() ?? props.title]
         }), slots.header && _createVNode("div", {
           "class": "v-picker__header"
-        }, [slots.header()]), _createVNode("div", {
+        }, [slots.header()])]), _createVNode("div", {
           "class": "v-picker__body"
         }, [slots.default?.()]), slots.actions?.()[0]?.children && _createVNode("div", {
           "class": "v-picker__actions"

package/lib/labs/VPicker/VPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VPicker.mjs","names":["VPickerTitle","makeVSheetProps","VSheet","genericComponent","omit","propsFactory","useRender","makeVPickerProps","landscape","Boolean","title","String","VPicker","name","props","setup","_ref","slots","sheetProps","filterProps","hasTitle","_createVNode","_mergeProps","actions","class","style","default","header","children"],"sources":["../../../src/labs/VPicker/VPicker.tsx"],"sourcesContent":["// Styles\nimport './VPicker.sass'\n\n// Components\nimport { VPickerTitle } from './VPickerTitle'\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Utilities\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nexport type VPickerSlots = {\n  header: never\n  default: never\n  actions: never\n  title: never\n}\n\nexport const makeVPickerProps = propsFactory({\n  landscape: Boolean,\n  title: String,\n\n  ...omit(makeVSheetProps(), ['color']),\n}, 'VPicker')\n\nexport const VPicker = genericComponent<VPickerSlots>()({\n  name: 'VPicker',\n\n  props: makeVPickerProps(),\n\n  setup (props, { slots }) {\n    useRender(() => {\n      const [sheetProps] = VSheet.filterProps(props)\n      const hasTitle = !!(props.title || slots.title)\n\n      return (\n        <VSheet\n          { ...sheetProps }\n          class={[\n            'v-picker',\n            {\n              'v-picker--landscape': props.landscape,\n              'v-picker--with-actions': !!slots.actions,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { hasTitle && (\n            <VPickerTitle key=\"picker-title\">\n              { slots.title?.() ?? props.title }\n            </VPickerTitle>\n          )}\n\n          { slots.header && (\n            <div class=\"v-picker__header\">\n              { slots.header() }\n            </div>\n          )}\n\n          <div class=\"v-picker__body\">\n            { slots.default?.() }\n          </div>\n\n          { slots.actions?.()[0]?.children && (\n            <div class=\"v-picker__actions\">\n              { slots.actions() }\n            </div>\n          )}\n        </VSheet>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VPicker = InstanceType<typeof VPicker>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,YAAY;AAAA,SACZC,eAAe,EAAEC,MAAM,8CAEhC;AAAA,SACSC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,gCAExD;AAQA,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAAC;EAC3CG,SAAS,EAAEC,OAAO;EAClBC,KAAK,EAAEC,MAAM;EAEb,GAAGP,IAAI,CAACH,eAAe,EAAE,EAAE,CAAC,OAAO,CAAC;AACtC,CAAC,EAAE,SAAS,CAAC;AAEb,OAAO,MAAMW,OAAO,GAAGT,gBAAgB,EAAgB,CAAC;EACtDU,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAEP,gBAAgB,EAAE;EAEzBQ,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBV,SAAS,CAAC,MAAM;MACd,MAAM,CAACY,UAAU,CAAC,GAAGhB,MAAM,CAACiB,WAAW,CAACL,KAAK,CAAC;MAC9C,MAAMM,QAAQ,GAAG,CAAC,EAAEN,KAAK,CAACJ,KAAK,IAAIO,KAAK,CAACP,KAAK,CAAC;MAE/C,OAAAW,YAAA,CAAAnB,MAAA,EAAAoB,WAAA,CAESJ,UAAU;QAAA,SACR,CACL,UAAU,EACV;UACE,qBAAqB,EAAEJ,KAAK,CAACN,SAAS;UACtC,wBAAwB,EAAE,CAAC,CAACS,KAAK,CAACM;QACpC,CAAC,EACDT,KAAK,CAACU,KAAK,CACZ;QAAA,SACOV,KAAK,CAACW;MAAK;QAAAC,OAAA,EAAAA,CAAA,MAEjBN,QAAQ,IAAAC,YAAA,CAAArB,YAAA;UAAA,OACU;QAAc;UAAA0B,OAAA,EAAAA,CAAA,MAC5BT,KAAK,CAACP,KAAK,IAAI,IAAII,KAAK,CAACJ,KAAK;QAAA,EAEnC,EAECO,KAAK,CAACU,MAAM,IAAAN,YAAA;UAAA,SACD;QAAkB,IACzBJ,KAAK,CAACU,MAAM,EAAE,EAEnB,EAAAN,YAAA;UAAA,SAEU;QAAgB,IACvBJ,KAAK,CAACS,OAAO,IAAI,IAGnBT,KAAK,CAACM,OAAO,IAAI,CAAC,CAAC,CAAC,EAAEK,QAAQ,IAAAP,YAAA;UAAA,SACnB;QAAmB,IAC1BJ,KAAK,CAACM,OAAO,EAAE,EAEpB;MAAA;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VPicker.mjs","names":["VPickerTitle","makeVSheetProps","VSheet","useBackgroundColor","toRef","genericComponent","propsFactory","useRender","makeVPickerProps","bgColor","String","landscape","Boolean","title","VPicker","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","sheetProps","filterProps","hasTitle","_createVNode","_mergeProps","actions","class","style","default","value","header","children"],"sources":["../../../src/labs/VPicker/VPicker.tsx"],"sourcesContent":["// Styles\nimport './VPicker.sass'\n\n// Components\nimport { VPickerTitle } from './VPickerTitle'\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nexport type VPickerSlots = {\n  header: never\n  default: never\n  actions: never\n  title: never\n}\n\nexport const makeVPickerProps = propsFactory({\n  bgColor: String,\n  landscape: Boolean,\n  title: String,\n\n  ...makeVSheetProps(),\n}, 'VPicker')\n\nexport const VPicker = genericComponent<VPickerSlots>()({\n  name: 'VPicker',\n\n  props: makeVPickerProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    useRender(() => {\n      const [sheetProps] = VSheet.filterProps(props)\n      const hasTitle = !!(props.title || slots.title)\n\n      return (\n        <VSheet\n          { ...sheetProps }\n          color={ props.bgColor }\n          class={[\n            'v-picker',\n            {\n              'v-picker--landscape': props.landscape,\n              'v-picker--with-actions': !!slots.actions,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          <div\n            class={[\n              backgroundColorClasses.value,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n            ]}\n          >\n            { hasTitle && (\n              <VPickerTitle key=\"picker-title\">\n                { slots.title?.() ?? props.title }\n              </VPickerTitle>\n            )}\n\n            { slots.header && (\n              <div class=\"v-picker__header\">\n                { slots.header() }\n              </div>\n            )}\n          </div>\n\n          <div class=\"v-picker__body\">\n            { slots.default?.() }\n          </div>\n\n          { slots.actions?.()[0]?.children && (\n            <div class=\"v-picker__actions\">\n              { slots.actions() }\n            </div>\n          )}\n        </VSheet>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VPicker = InstanceType<typeof VPicker>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,YAAY;AAAA,SACZC,eAAe,EAAEC,MAAM,8CAEhC;AAAA,SACSC,kBAAkB,uCAE3B;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAQA,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAAC;EAC3CG,OAAO,EAAEC,MAAM;EACfC,SAAS,EAAEC,OAAO;EAClBC,KAAK,EAAEH,MAAM;EAEb,GAAGT,eAAe;AACpB,CAAC,EAAE,SAAS,CAAC;AAEb,OAAO,MAAMa,OAAO,GAAGT,gBAAgB,EAAgB,CAAC;EACtDU,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAER,gBAAgB,EAAE;EAEzBS,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,sBAAsB;MAAEC;IAAsB,CAAC,GAAGlB,kBAAkB,CAACC,KAAK,CAACY,KAAK,EAAE,OAAO,CAAC,CAAC;IACnGT,SAAS,CAAC,MAAM;MACd,MAAM,CAACe,UAAU,CAAC,GAAGpB,MAAM,CAACqB,WAAW,CAACP,KAAK,CAAC;MAC9C,MAAMQ,QAAQ,GAAG,CAAC,EAAER,KAAK,CAACH,KAAK,IAAIM,KAAK,CAACN,KAAK,CAAC;MAE/C,OAAAY,YAAA,CAAAvB,MAAA,EAAAwB,WAAA,CAESJ,UAAU;QAAA,SACPN,KAAK,CAACP,OAAO;QAAA,SACd,CACL,UAAU,EACV;UACE,qBAAqB,EAAEO,KAAK,CAACL,SAAS;UACtC,wBAAwB,EAAE,CAAC,CAACQ,KAAK,CAACQ;QACpC,CAAC,EACDX,KAAK,CAACY,KAAK,CACZ;QAAA,SACOZ,KAAK,CAACa;MAAK;QAAAC,OAAA,EAAAA,CAAA,MAAAL,YAAA;UAAA,SAGV,CACLL,sBAAsB,CAACW,KAAK,CAC7B;UAAA,SACM,CACLV,qBAAqB,CAACU,KAAK;QAC5B,IAECP,QAAQ,IAAAC,YAAA,CAAAzB,YAAA;UAAA,OACU;QAAc;UAAA8B,OAAA,EAAAA,CAAA,MAC5BX,KAAK,CAACN,KAAK,IAAI,IAAIG,KAAK,CAACH,KAAK;QAAA,EAEnC,EAECM,KAAK,CAACa,MAAM,IAAAP,YAAA;UAAA,SACD;QAAkB,IACzBN,KAAK,CAACa,MAAM,EAAE,EAEnB,IAAAP,YAAA;UAAA,SAGQ;QAAgB,IACvBN,KAAK,CAACW,OAAO,IAAI,IAGnBX,KAAK,CAACQ,OAAO,IAAI,CAAC,CAAC,CAAC,EAAEM,QAAQ,IAAAR,YAAA;UAAA,SACnB;QAAmB,IAC1BN,KAAK,CAACQ,OAAO,EAAE,EAEpB;MAAA;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/labs/VPicker/VPicker.sass

@@ -1,4 +1,5 @@
 @use '../../styles/tools'
+@use './variables' as *
 
 .v-picker.v-sheet
   @include tools.elevation(2)
@@ -43,7 +44,6 @@
   text-transform: uppercase
   font-size: .75rem
   grid-area: title
-  color: rgb(var(--v-theme-on-surface), var(--v-disabled-opacity))
   padding-inline-start: 24px
   padding-inline-end: 12px
   padding-top: 16px

package/lib/labs/VPicker/index.d.mts

@@ -25,6 +25,7 @@ declare const VPicker: {
             height?: string | number | undefined;
             width?: string | number | undefined;
             border?: string | number | boolean | undefined;
+            color?: string | undefined;
             maxHeight?: string | number | undefined;
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
@@ -89,6 +90,7 @@ declare const VPicker: {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "v-slot:title"?: false | (() => vue.VNodeChild) | undefined;
+            bgColor?: string | undefined;
             "v-slot:header"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:actions"?: false | (() => vue.VNodeChild) | undefined;
         };
@@ -125,6 +127,7 @@ declare const VPicker: {
             height?: string | number | undefined;
             width?: string | number | undefined;
             border?: string | number | boolean | undefined;
+            color?: string | undefined;
             maxHeight?: string | number | undefined;
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
@@ -135,6 +138,7 @@ declare const VPicker: {
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
+            bgColor?: string | undefined;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 header?: (() => vue.VNodeChild) | undefined;
@@ -200,6 +204,7 @@ declare const VPicker: {
         height?: string | number | undefined;
         width?: string | number | undefined;
         border?: string | number | boolean | undefined;
+        color?: string | undefined;
         maxHeight?: string | number | undefined;
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
@@ -210,6 +215,7 @@ declare const VPicker: {
         elevation?: string | number | undefined;
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
+        bgColor?: string | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             header?: (() => vue.VNodeChild) | undefined;
@@ -241,6 +247,7 @@ declare const VPicker: {
     height?: string | number | undefined;
     width?: string | number | undefined;
     border?: string | number | boolean | undefined;
+    color?: string | undefined;
     maxHeight?: string | number | undefined;
     maxWidth?: string | number | undefined;
     minHeight?: string | number | undefined;
@@ -251,6 +258,7 @@ declare const VPicker: {
     elevation?: string | number | undefined;
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
+    bgColor?: string | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         header?: (() => vue.VNodeChild) | undefined;
@@ -288,69 +296,73 @@ declare const VPicker: {
         [key: string]: any;
     }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: vue.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
     location: vue.PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
     height: (StringConstructor | NumberConstructor)[];
-    width: (StringConstructor | NumberConstructor)[];
-    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
-    position: {
-        type: vue.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
-        validator: (v: any) => boolean;
-    };
+    width: (StringConstructor | NumberConstructor)[];
+    class: vue.PropType<any>;
     style: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
-    class: vue.PropType<any>;
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    color: StringConstructor;
+    bgColor: StringConstructor;
+    landscape: BooleanConstructor;
+    title: StringConstructor;
+}, vue.ExtractPropTypes<{
+    theme: StringConstructor;
     tag: {
         type: StringConstructor;
         default: string;
     };
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
-    theme: StringConstructor;
     rounded: {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
-    landscape: BooleanConstructor;
-    title: StringConstructor;
-}, vue.ExtractPropTypes<{
+    position: {
+        type: vue.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
     location: vue.PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
     height: (StringConstructor | NumberConstructor)[];
-    width: (StringConstructor | NumberConstructor)[];
-    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
-    position: {
-        type: vue.PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
-        validator: (v: any) => boolean;
-    };
+    width: (StringConstructor | NumberConstructor)[];
+    class: vue.PropType<any>;
     style: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
-    class: vue.PropType<any>;
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
-    theme: StringConstructor;
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
-    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    color: StringConstructor;
+    bgColor: StringConstructor;
     landscape: BooleanConstructor;
     title: StringConstructor;
 }>>;