@vuetify/nightly 3.8.4-master.2025-05-13 → 3.8.5-dev.2025-05-14

package/lib/labs/VColorInput/VColorInput.js

@@ -0,0 +1,129 @@
+import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+// Styles
+import "./VColorInput.css";
+
+// Components
+import { makeVColorPickerProps, VColorPicker } from "../../components/VColorPicker/VColorPicker.js";
+import { makeVConfirmEditProps, VConfirmEdit } from "../../components/VConfirmEdit/VConfirmEdit.js";
+import { VIcon } from "../../components/VIcon/VIcon.js";
+import { VMenu } from "../../components/VMenu/VMenu.js";
+import { makeVTextFieldProps, VTextField } from "../../components/VTextField/VTextField.js"; // Composables
+import { makeFocusProps, useFocus } from "../../composables/focus.js";
+import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
+import { computed, shallowRef } from 'vue';
+import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
+export const makeVColorInputProps = propsFactory({
+  pip: Boolean,
+  pipIcon: {
+    type: String,
+    default: '$color'
+  },
+  ...makeFocusProps(),
+  ...makeVConfirmEditProps(),
+  ...makeVTextFieldProps(),
+  ...omit(makeVColorPickerProps(), ['width'])
+}, 'VColorInput');
+export const VColorInput = genericComponent()({
+  name: 'VColorInput',
+  props: makeVColorInputProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const model = useProxiedModel(props, 'modelValue');
+    const menu = shallowRef(false);
+    const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const display = computed(() => model.value || null);
+    function onKeydown(e) {
+      if (e.key !== 'Enter') return;
+      if (!menu.value || !isFocused.value) {
+        menu.value = true;
+        return;
+      }
+      const target = e.target;
+      model.value = target.value;
+    }
+    function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      menu.value = true;
+    }
+    function onSave() {
+      menu.value = false;
+    }
+    useRender(() => {
+      const confirmEditProps = VConfirmEdit.filterProps(props);
+      const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
+      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']));
+      const hasPrepend = !!(slots.prepend || props.pipIcon);
+      return _createVNode(VTextField, _mergeProps(textFieldProps, {
+        "class": ['v-color-input', props.class],
+        "style": props.style,
+        "modelValue": display.value,
+        "onKeydown": isInteractive.value ? onKeydown : undefined,
+        "focused": menu.value || isFocused.value,
+        "onFocus": focus,
+        "onBlur": blur,
+        "onClick:control": isInteractive.value ? onClick : undefined,
+        "onClick:prependInner": isInteractive.value ? onClick : undefined,
+        "onClick:appendInner": isInteractive.value ? onClick : undefined,
+        "onUpdate:modelValue": val => {
+          model.value = val;
+        }
+      }), {
+        ...slots,
+        prepend: props.pipIcon ? arg => _createVNode(_Fragment, null, [hasPrepend && _createVNode(VIcon, {
+          "color": props.pip ? model.value : undefined,
+          "icon": props.pipIcon
+        }, null), slots.prepend?.(arg)]) : undefined,
+        default: () => _createVNode(_Fragment, null, [_createVNode(VMenu, {
+          "modelValue": menu.value,
+          "onUpdate:modelValue": $event => menu.value = $event,
+          "activator": "parent",
+          "min-width": "0",
+          "closeOnContentClick": false,
+          "openOnClick": false
+        }, {
+          default: () => [_createVNode(VConfirmEdit, _mergeProps(confirmEditProps, {
+            "modelValue": model.value,
+            "onUpdate:modelValue": $event => model.value = $event,
+            "onSave": onSave
+          }), {
+            default: _ref2 => {
+              let {
+                actions,
+                model: proxyModel,
+                save,
+                cancel,
+                isPristine
+              } = _ref2;
+              return _createVNode(VColorPicker, _mergeProps(colorPickerProps, {
+                "modelValue": proxyModel.value,
+                "onUpdate:modelValue": val => {
+                  proxyModel.value = val;
+                  model.value = val;
+                },
+                "onMousedown": e => e.preventDefault()
+              }), {
+                actions: !props.hideActions ? () => slots.actions?.({
+                  save,
+                  cancel,
+                  isPristine
+                }) ?? actions() : undefined
+              });
+            }
+          })]
+        }), slots.default?.()])
+      });
+    });
+  }
+});
+//# sourceMappingURL=VColorInput.js.map

package/lib/labs/VColorInput/VColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VColorInput.js","names":["makeVColorPickerProps","VColorPicker","makeVConfirmEditProps","VConfirmEdit","VIcon","VMenu","makeVTextFieldProps","VTextField","makeFocusProps","useFocus","useProxiedModel","computed","shallowRef","genericComponent","omit","propsFactory","useRender","makeVColorInputProps","pip","Boolean","pipIcon","type","String","default","VColorInput","name","props","emits","val","setup","_ref","slots","isFocused","focus","blur","model","menu","isInteractive","disabled","readonly","display","value","onKeydown","e","key","target","onClick","preventDefault","stopPropagation","onSave","confirmEditProps","filterProps","colorPickerProps","textFieldProps","hasPrepend","prepend","_createVNode","_mergeProps","class","style","undefined","arg","_Fragment","$event","_ref2","actions","proxyModel","save","cancel","isPristine","hideActions"],"sources":["../../../src/labs/VColorInput/VColorInput.tsx"],"sourcesContent":["// Styles\nimport './VColorInput.sass'\n\n// Components\nimport { makeVColorPickerProps, VColorPicker } from '@/components/VColorPicker/VColorPicker'\nimport { makeVConfirmEditProps, VConfirmEdit } from '@/components/VConfirmEdit/VConfirmEdit'\nimport { VIcon } from '@/components/VIcon/VIcon'\nimport { VMenu } from '@/components/VMenu/VMenu'\nimport { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, shallowRef } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VTextFieldSlots } from '@/components/VTextField/VTextField'\n\nexport type VColorInputActionsSlot = {\n  save: () => void\n  cancel: () => void\n  isPristine: boolean\n}\n\nexport type VColorInputSlots = Omit<VTextFieldSlots, 'default'> & {\n  actions: VColorInputActionsSlot\n  default: never\n}\n\nexport const makeVColorInputProps = propsFactory({\n  pip: Boolean,\n  pipIcon: {\n    type: String,\n    default: '$color',\n  },\n\n  ...makeFocusProps(),\n  ...makeVConfirmEditProps(),\n  ...makeVTextFieldProps(),\n  ...omit(makeVColorPickerProps(), ['width']),\n}, 'VColorInput')\n\nexport const VColorInput = genericComponent<VColorInputSlots>()({\n  name: 'VColorInput',\n\n  props: makeVColorInputProps(),\n\n  emits: {\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { slots }) {\n    const { isFocused, focus, blur } = useFocus(props)\n    const model = useProxiedModel(props, 'modelValue')\n    const menu = shallowRef(false)\n\n    const isInteractive = computed(() => !props.disabled && !props.readonly)\n\n    const display = computed(() => model.value || null)\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key !== 'Enter') return\n\n      if (!menu.value || !isFocused.value) {\n        menu.value = true\n\n        return\n      }\n\n      const target = e.target as HTMLInputElement\n\n      model.value = target.value\n    }\n\n    function onClick (e: MouseEvent) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      menu.value = true\n    }\n\n    function onSave () {\n      menu.value = false\n    }\n\n    useRender(() => {\n      const confirmEditProps = VConfirmEdit.filterProps(props)\n      const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']))\n      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']))\n\n      const hasPrepend = !!(slots.prepend || props.pipIcon)\n\n      return (\n        <VTextField\n          { ...textFieldProps }\n          class={[\n            'v-color-input',\n            props.class,\n          ]}\n          style={ props.style }\n          modelValue={ display.value }\n          onKeydown={ isInteractive.value ? onKeydown : undefined }\n          focused={ menu.value || isFocused.value }\n          onFocus={ focus }\n          onBlur={ blur }\n          onClick:control={ isInteractive.value ? onClick : undefined }\n          onClick:prependInner={ isInteractive.value ? onClick : undefined }\n          onClick:appendInner={ isInteractive.value ? onClick : undefined }\n          onUpdate:modelValue={ val => {\n            model.value = val\n          }}\n        >\n          {{\n            ...slots,\n            prepend: props.pipIcon ? arg => (\n              <>\n               { hasPrepend && (\n                  <VIcon\n                    color={ props.pip ? model.value as string : undefined }\n                    icon={ props.pipIcon }\n                  />\n               )}\n\n                { slots.prepend?.(arg) }\n              </>\n            ) : undefined,\n            default: () => (\n              <>\n                <VMenu\n                  v-model={ menu.value }\n                  activator=\"parent\"\n                  min-width=\"0\"\n                  closeOnContentClick={ false }\n                  openOnClick={ false }\n                >\n                  <VConfirmEdit\n                    { ...confirmEditProps }\n                    v-model={ model.value }\n                    onSave={ onSave }\n                  >\n                    {{\n                      default: ({ actions, model: proxyModel, save, cancel, isPristine }) => {\n                        return (\n                          <VColorPicker\n                            { ...colorPickerProps }\n                            modelValue={ proxyModel.value }\n                            onUpdate:modelValue={ val => {\n                              proxyModel.value = val\n                              model.value = val\n                            }}\n                            onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                          >\n                            {{\n                              actions: !props.hideActions ? () => slots.actions?.({ save, cancel, isPristine }) ?? actions() : undefined,\n                            }}\n                          </VColorPicker>\n                        )\n                      },\n                    }}\n                  </VConfirmEdit>\n                </VMenu>\n\n                { slots.default?.() }\n              </>\n            ),\n          }}\n        </VTextField>\n      )\n    })\n  },\n})\n\nexport type VColorInput = InstanceType<typeof VColorInput>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VColorInput/VColorInput.sass

@@ -0,0 +1,7 @@
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  /* region INPUT */
+  .v-color-input
+    padding: 0

package/lib/labs/VColorInput/_variables.scss

@@ -0,0 +1,2 @@
+// Defaults
+$color-input-pip-default-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;

package/lib/labs/VColorInput/index.d.ts

@@ -0,0 +1 @@
+export { VColorInput } from './VColorInput.js';

package/lib/labs/VColorInput/index.js

@@ -0,0 +1,2 @@
+export { VColorInput } from "./VColorInput.js";
+//# sourceMappingURL=index.js.map

package/lib/labs/VColorInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VColorInput"],"sources":["../../../src/labs/VColorInput/index.ts"],"sourcesContent":["export { VColorInput } from './VColorInput'\n"],"mappings":"SAASA,WAAW","ignoreList":[]}