@rotki/ui-library 2.27.0 → 3.0.0-beta.1

package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +1,15 @@
-import RuiIcon_default from "../icons/RuiIcon.js";
-import RuiButton_default from "../buttons/button/RuiButton.js";
 import RuiTextField_default from "../forms/text-field/RuiTextField.js";
-import { Fragment, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, reactive, ref, renderList, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import RuiTab_default from "../tabs/tab/RuiTab.js";
+import RuiTabs_default from "../tabs/tabs/RuiTabs.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, reactive, ref, renderList, unref, useModel, watch, withCtx } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import { clamp, get as get$1, set as set$1 } from "@vueuse/shared";
 import tinycolor from "tinycolor2";
 //#region src/components/color-picker/RuiColorInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex flex-col items-center gap-1 w-[16rem]" };
-var _hoisted_2 = { class: "w-full" };
-var _hoisted_3 = {
+var _hoisted_1 = {
 	key: 1,
-	class: "flex flex-1 gap-1"
+	class: "flex gap-1"
 };
-var _hoisted_4 = { class: "uppercase text-rui-text-secondary text-sm" };
 var MAX_RGB = 255;
 var DEFAULT_HEX = "000000";
 var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -31,6 +28,11 @@ var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			4,
 			6
 		];
+		const RGB_CHANNELS = [
+			"Red",
+			"Green",
+			"Blue"
+		];
 		const inputType = ref("hex");
 		const state = reactive({
 			color: get$1(modelValue),
@@ -68,8 +70,8 @@ var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			} else if (key !== void 0) applyRgbValue(value, key);
 			set$1(modelValue, state.color);
 		}, 300);
-		function onInputTypeChange() {
-			set$1(inputType, get$1(inputType) === "rgb" ? "hex" : "rgb");
+		function onInputTypeChange(value) {
+			if (value === "hex" || value === "rgb") set$1(inputType, value);
 		}
 		watch(() => {
 			const color = get$1(modelValue);
@@ -83,46 +85,55 @@ var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-id": "color-input",
-				class: "flex justify-center gap-2"
-			}, _ctx.$attrs), [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [unref(inputType) === "hex" ? (openBlock(), createBlock(RuiTextField_default, {
+				class: "flex flex-col gap-2 w-full"
+			}, _ctx.$attrs), [createVNode(RuiTabs_default, {
+				"model-value": unref(inputType),
+				variant: "segmented",
+				grow: "",
+				"data-id": "color-format",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => onInputTypeChange($event))
+			}, {
+				default: withCtx(() => [createVNode(RuiTab_default, { value: "hex" }, {
+					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Hex ", -1)])]),
+					_: 1
+				}), createVNode(RuiTab_default, { value: "rgb" }, {
+					default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" RGB ", -1)])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value"]), unref(inputType) === "hex" ? (openBlock(), createBlock(RuiTextField_default, {
 				key: 0,
 				modelValue: unref(state).hex,
-				"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => unref(state).hex = $event), _cache[1] || (_cache[1] = ($event) => unref(onInputChange)(unref(inputType), $event))],
-				variant: "outlined",
-				class: "flex-1 w-full [&_input]:uppercase",
+				"onUpdate:modelValue": [_cache[1] || (_cache[1] = ($event) => unref(state).hex = $event), _cache[2] || (_cache[2] = ($event) => unref(onInputChange)(unref(inputType), $event))],
+				class: "w-full [&_input]:uppercase",
 				maxlength: "6",
 				color: "primary",
+				"aria-label": "Hex color",
 				dense: "",
 				"hide-details": "",
-				onBlur: _cache[2] || (_cache[2] = ($event) => unref(onBlurChange)(unref(inputType), $event))
+				onBlur: _cache[3] || (_cache[3] = ($event) => unref(onBlurChange)(unref(inputType), $event))
 			}, {
-				prepend: withCtx(() => [..._cache[4] || (_cache[4] = [createElementVNode("span", { class: "text-rui-text" }, " # ", -1)])]),
+				prepend: withCtx(() => [..._cache[6] || (_cache[6] = [createElementVNode("span", { class: "text-rui-text-secondary" }, "#", -1)])]),
 				_: 1
-			}, 8, ["modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).rgb, (v, i) => {
+			}, 8, ["modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).rgb, (v, i) => {
 				return openBlock(), createBlock(RuiTextField_default, {
 					key: i,
 					"model-value": v.toString(),
-					variant: "outlined",
 					class: "[&_input]:text-center w-full",
 					maxlength: "3",
 					color: "primary",
+					"aria-label": RGB_CHANNELS[i],
 					dense: "",
 					"hide-details": "",
 					"onUpdate:modelValue": ($event) => unref(onInputChange)(unref(inputType), $event, i),
 					onBlur: ($event) => unref(onBlurChange)(unref(inputType), $event, i)
 				}, null, 8, [
 					"model-value",
+					"aria-label",
 					"onUpdate:modelValue",
 					"onBlur"
 				]);
-			}), 128))]))]), createElementVNode("div", _hoisted_4, toDisplayString(unref(inputType)), 1)]), createVNode(RuiButton_default, {
-				class: "h-10",
-				variant: "text",
-				onClick: _cache[3] || (_cache[3] = ($event) => onInputTypeChange())
-			}, {
-				default: withCtx(() => [createVNode(RuiIcon_default, { name: "lu-chevrons-up-down" })]),
-				_: 1
-			})], 16);
+			}), 128))]))], 16);
 		};
 	}
 });

package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, ColorFormat } from './utils';\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\ndefineOptions({\n  name: 'RuiColorInput',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Color>({ required: true });\n\nconst MAX_RGB = 255;\nconst VALID_HEX_LENGTHS = [3, 4, 6];\nconst DEFAULT_HEX = '000000';\n\nconst inputType = ref<ColorFormat>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction applyRgbValue(value: string, key: number): void {\n  if (!state.rgb || !state.color)\n    return;\n\n  const clamped = clamp(Number(value), 0, MAX_RGB);\n  state.rgb[key] = clamped;\n  const [r, g, b] = state.rgb;\n  state.color.hex = tinycolor({ r, g, b }).toHex();\n}\n\nconst onBlurChange = useDebounceFn((format: ColorFormat, event: Event, key?: number) => {\n  if (!state.color)\n    return;\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length))\n      state.color.hex = hex;\n    else state.color.hex = DEFAULT_HEX;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 100);\n\nconst onInputChange = useDebounceFn((format: ColorFormat, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && state.color && hex.length === 6)\n      state.color.hex = hex;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(): void {\n  set(inputType, get(inputType) === 'rgb' ? 'hex' : 'rgb');\n}\n\nwatch(\n  () => {\n    const color = get(modelValue);\n    return [color.hex, ...color.rgb] as const;\n  },\n  () => {\n    const color = get(modelValue);\n    state.color = color;\n    state.hex = color.hex;\n    state.rgb = color.rgb;\n  },\n);\n</script>\n\n<template>\n  <div\n    data-id=\"color-input\"\n    class=\"flex justify-center gap-2\"\n    v-bind=\"$attrs\"\n  >\n    <div class=\"flex flex-col items-center gap-1 w-[16rem]\">\n      <div class=\"w-full\">\n        <RuiTextField\n          v-if=\"inputType === 'hex'\"\n          v-model=\"state.hex\"\n          variant=\"outlined\"\n          class=\"flex-1 w-full [&_input]:uppercase\"\n          maxlength=\"6\"\n          color=\"primary\"\n          dense\n          hide-details\n          @update:model-value=\"onInputChange(inputType, $event)\"\n          @blur=\"onBlurChange(inputType, $event)\"\n        >\n          <template #prepend>\n            <span class=\"text-rui-text\"> # </span>\n          </template>\n        </RuiTextField>\n        <div\n          v-else\n          class=\"flex flex-1 gap-1\"\n        >\n          <RuiTextField\n            v-for=\"(v, i) in state.rgb\"\n            :key=\"i\"\n            :model-value=\"v.toString()\"\n            variant=\"outlined\"\n            class=\"[&_input]:text-center w-full\"\n            maxlength=\"3\"\n            color=\"primary\"\n            dense\n            hide-details\n            @update:model-value=\"onInputChange(inputType, $event, i)\"\n            @blur=\"onBlurChange(inputType, $event, i)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"uppercase text-rui-text-secondary text-sm\">\n        {{ inputType }}\n      </div>\n    </div>\n    <RuiButton\n      class=\"h-10\"\n      variant=\"text\"\n      @click=\"onInputTypeChange()\"\n    >\n      <RuiIcon name=\"lu-chevrons-up-down\" />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiColorInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, ColorFormat } from './utils';\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiTab from '@/components/tabs/tab/RuiTab.vue';\nimport RuiTabs from '@/components/tabs/tabs/RuiTabs.vue';\n\ndefineOptions({\n  name: 'RuiColorInput',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Color>({ required: true });\n\nconst MAX_RGB = 255;\nconst VALID_HEX_LENGTHS = [3, 4, 6];\nconst DEFAULT_HEX = '000000';\nconst RGB_CHANNELS = ['Red', 'Green', 'Blue'];\n\nconst inputType = ref<ColorFormat>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction applyRgbValue(value: string, key: number): void {\n  if (!state.rgb || !state.color)\n    return;\n\n  const clamped = clamp(Number(value), 0, MAX_RGB);\n  state.rgb[key] = clamped;\n  const [r, g, b] = state.rgb;\n  state.color.hex = tinycolor({ r, g, b }).toHex();\n}\n\nconst onBlurChange = useDebounceFn((format: ColorFormat, event: Event, key?: number) => {\n  if (!state.color)\n    return;\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length))\n      state.color.hex = hex;\n    else state.color.hex = DEFAULT_HEX;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 100);\n\nconst onInputChange = useDebounceFn((format: ColorFormat, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && state.color && hex.length === 6)\n      state.color.hex = hex;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(value: string | number): void {\n  if (value === 'hex' || value === 'rgb')\n    set(inputType, value);\n}\n\nwatch(\n  () => {\n    const color = get(modelValue);\n    return [color.hex, ...color.rgb] as const;\n  },\n  () => {\n    const color = get(modelValue);\n    state.color = color;\n    state.hex = color.hex;\n    state.rgb = color.rgb;\n  },\n);\n</script>\n\n<template>\n  <div\n    data-id=\"color-input\"\n    class=\"flex flex-col gap-2 w-full\"\n    v-bind=\"$attrs\"\n  >\n    <!-- the format is a choice between two views of one value, which is what a segmented control is for -->\n    <RuiTabs\n      :model-value=\"inputType\"\n      variant=\"segmented\"\n      grow\n      data-id=\"color-format\"\n      @update:model-value=\"onInputTypeChange($event)\"\n    >\n      <RuiTab value=\"hex\">\n        Hex\n      </RuiTab>\n      <RuiTab value=\"rgb\">\n        RGB\n      </RuiTab>\n    </RuiTabs>\n    <RuiTextField\n      v-if=\"inputType === 'hex'\"\n      v-model=\"state.hex\"\n      class=\"w-full [&_input]:uppercase\"\n      maxlength=\"6\"\n      color=\"primary\"\n      aria-label=\"Hex color\"\n      dense\n      hide-details\n      @update:model-value=\"onInputChange(inputType, $event)\"\n      @blur=\"onBlurChange(inputType, $event)\"\n    >\n      <template #prepend>\n        <span class=\"text-rui-text-secondary\">#</span>\n      </template>\n    </RuiTextField>\n    <div\n      v-else\n      class=\"flex gap-1\"\n    >\n      <RuiTextField\n        v-for=\"(v, i) in state.rgb\"\n        :key=\"i\"\n        :model-value=\"v.toString()\"\n        class=\"[&_input]:text-center w-full\"\n        maxlength=\"3\"\n        color=\"primary\"\n        :aria-label=\"RGB_CHANNELS[i]\"\n        dense\n        hide-details\n        @update:model-value=\"onInputChange(inputType, $event, i)\"\n        @blur=\"onBlurChange(inputType, $event, i)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/color-picker/RuiColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.js","names":[],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n\nconst rootStyle = tv({ base: 'relative select-none bg-initial' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorPicker.js","names":[],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n\nconst rootStyle = tv({ base: 'relative select-none' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -32,7 +32,7 @@ var RuiColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		watch(() => state.color.hex, (hex) => {
 			set$1(modelValue, hex);
 		}, { immediate: true });
-		const rootStyle = tv({ base: "relative select-none bg-initial" });
+		const rootStyle = tv({ base: "relative select-none" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				role: "application",

package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n\nconst rootStyle = tv({ base: 'relative select-none bg-initial' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,aAAa,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,MAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,MAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,kCAAkC,CAAC;;GAI9D,OAAA,UAAA,GAAA,mBAsBM,OAtBN,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErC,YAGE,uBAAA;IAFC,OAAO,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErC,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GAAA,mBAUM,OAVN,YAUM,CATJ,mBAMM,OANN,YAMM,CALJ,YAAkD,yBAAA,EAAhC,OAAO,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrC,YAGE,qBAAA;IAFS,YAAA,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIV,GAAA,MAAA,GAAA,CAAA,YAAA,CAAA,CAAA,CAAA,GAAA,YAAuC,uBAAA;IAAf,YAAA,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}
+{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n\nconst rootStyle = tv({ base: 'relative select-none' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,aAAa,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,MAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,MAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;;GAInD,OAAA,UAAA,GAAA,mBAsBM,OAtBN,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErC,YAGE,uBAAA;IAFC,OAAO,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErC,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GAAA,mBAUM,OAVN,YAUM,CATJ,mBAMM,OANN,YAMM,CALJ,YAAkD,yBAAA,EAAhC,OAAO,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrC,YAGE,qBAAA;IAFS,YAAA,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIV,GAAA,MAAA,GAAA,CAAA,YAAA,CAAA,CAAA,CAAA,GAAA,YAAuC,uBAAA;IAAf,YAAA,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}

package/dist/components/date-time-picker/RuiDateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ComponentPublicInstance } from 'vue';\nimport type { DateTimePickerAction, DateTimeSegmentType } from '@/components/date-time-picker/types';\nimport type { TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { dateTimePickerStyles, type DateTimePickerVariant } from '@/components/date-time-picker/date-time-picker-styles';\nimport RuiDateTimePickerMenu from '@/components/date-time-picker/RuiDateTimePickerMenu.vue';\nimport { useDateTimeSelection } from '@/components/date-time-picker/use-date-time-selection';\nimport { useInputHandler } from '@/components/date-time-picker/use-input-handler';\nimport { useKeyboardHandler } from '@/components/date-time-picker/use-keyboard-handler';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ntype DateFormat = 'year-first' | 'month-first' | 'day-first';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> = T extends 'date'\n  ? Date | undefined\n  : T extends 'epoch-ms'\n    ? number | undefined\n    : T extends 'epoch'\n      ? number | undefined\n      : Date | number | undefined;\n\nexport interface RuiDateTimePickerProps {\n  minDate?: Date | number;\n  maxDate?: Date | number | 'now';\n  format?: DateFormat;\n  type?: DateTimeModelType;\n  accuracy?: 'minute' | 'second' | 'millisecond';\n  disabled?: boolean;\n  allowEmpty?: boolean;\n  readonly?: boolean;\n  dense?: boolean;\n  label?: string;\n  variant?: DateTimePickerVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n  /**\n   * Renders the timezone selector in the menu. Off by default: the value is\n   * emitted as a date or an epoch, so the picked timezone does not survive a\n   * round trip and most consumers work in local time.\n   */\n  showTimezone?: boolean;\n  /**\n   * Actions rendered in the menu footer. `clear` is only rendered when the\n   * picker is `allowEmpty`. Pass an empty array to drop the footer entirely.\n   */\n  actions?: DateTimePickerAction[];\n  /**\n   * Focuses the field once it is mounted. The native attribute is ignored for\n   * an input inserted into an already loaded document, which is the usual case\n   * for a picker revealed by an editor or a dialog.\n   */\n  autofocus?: boolean;\n  /**\n   * Accepts an entry that stops short of the full format, filling the segments\n   * it never reached from one end of the day: `start` gives a bare date\n   * 00:00:00.000 and `end` gives it 23:59:59.999. Meant for a range, where the\n   * two bounds want opposite ends. Left unset, an entry missing its time is not\n   * a value and nothing is emitted.\n   *\n   * The fill runs when the user is done with the field - leaving it, pressing\n   * enter, or closing the calendar - and is written back into the segments, so\n   * what it decided on is on screen.\n   *\n   * Spelled out rather than written as `PartialTimeMode`: a consumer that hands\n   * this whole interface to its own `defineProps` needs every member resolvable\n   * by the SFC compiler, which does not follow the type into the package.\n   */\n  partialTime?: 'start' | 'end';\n}\n\ndefineOptions({\n  name: 'RuiDateTimePicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<ModelValueType<DateTimeModelType>>({ required: true });\nconst menuOpen = defineModel<boolean>('menuOpen', { default: false });\n\nconst {\n  disabled = false,\n  readonly = false,\n  allowEmpty = false,\n  dense = false,\n  type = 'epoch-ms',\n  hideDetails = false,\n  label,\n  variant = 'default',\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\n  showTimezone = false,\n  actions = ['now'],\n  autofocus = false,\n  partialTime,\n} = defineProps<RuiDateTimePickerProps>();\n\ndefineSlots<{\n  'menu-content': () => any;\n}>();\n\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\n\nconst baseFormats: Record<DateFormat, string> = {\n  'day-first': 'DD/MM/YYYY HH:mm',\n  'month-first': 'MM/DD/YYYY HH:mm',\n  'year-first': 'YYYY/MM/DD HH:mm',\n};\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\nconst cursorPosition = ref<number>(0);\nconst currentValue = ref<number>();\n\nconst { t } = useRuiI8n();\n\nconst keys = RUI_I18N_KEYS.dateTimePicker;\n\nconst fieldLabel = computed<string>(() => label ?? t(keys.label, 'Pick a date'));\nconst clearLabel = computed<string>(() => t(keys.clearValue, 'Clear the date'));\nconst toggleLabel = computed<string>(() => (get(isOpen)\n  ? t(keys.closeCalendar, 'Close the calendar')\n  : t(keys.openCalendar, 'Open the calendar')));\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<ComponentPublicInstance>('menuWrapperRef');\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst anyFocused = computed<boolean>(() => get(activatorFocusedWithin) || get(menuWrapperFocusedWithin));\n\nconst dateFormat = computed<string>(() => {\n  const fmt = baseFormats[format];\n  if (accuracy === 'second') {\n    return fmt.replace('HH:mm', 'HH:mm:ss');\n  }\n  else if (accuracy === 'millisecond') {\n    return fmt.replace('HH:mm', 'HH:mm:ss.SSS');\n  }\n  return fmt;\n});\n\nconst {\n  clear: clearSelection,\n  commitPartialTime,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  modelDay,\n  modelHour,\n  modelMillisecond,\n  modelMinute,\n  modelMonth,\n  modelSecond,\n  selectedTime,\n  modelTimezone,\n  modelYear,\n  setNow,\n  setToday,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  dateFormat,\n  maxDate,\n  minDate,\n  modelValue,\n  partialTime,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\n\nconst {\n  clear: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\n  pasteRejected,\n  selectFirstSegment,\n  setSegment,\n} = useKeyboardHandler({\n  accuracy,\n  currentValue,\n  cursorPosition,\n  dateFormat,\n  disabled,\n  getCurrent,\n  getDateTime,\n  readonly,\n  setValue,\n  textInput,\n  timezone: modelTimezone,\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst isOutlined = computed<boolean>(() => variant === 'outlined');\n\n/** True once any segment holds a digit, even a partially typed date. */\nconst anySegmentSet = computed<boolean>(() => [\n  modelYear,\n  modelMonth,\n  modelDay,\n  modelHour,\n  modelMinute,\n  modelSecond,\n  modelMillisecond,\n].some(segment => isDefined(segment)));\n\n/**\n * The field's text.\n *\n * An untouched field shows its format through the placeholder rather than\n * holding the tokens as its value, where a screen reader reads them as content\n * and select-all copies them. The tokens stay while the field is focused: that\n * is when the segment machinery highlights them, and collapsing the value\n * mid-edit would blank the field under the cursor. The guard is \"no segment\n * set\" rather than `valueSet`, so blurring a half-typed date keeps what was\n * entered on screen.\n */\nconst formattedDisplay = computed<string>(() => {\n  if (!get(anySegmentSet) && !get(searchInputFocused)) {\n    return '';\n  }\n\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(modelYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(modelMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(modelDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(modelHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(modelMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(modelSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(modelMillisecond, 3) },\n  ];\n\n  for (const { pattern, value } of replacements) {\n    if (value !== undefined) {\n      result = result.replace(pattern, value);\n    }\n  }\n\n  return result;\n});\n\n/**\n * An untouched field holds no value until focus expands the format tokens into\n * it. That patch overwrites the input's value, and writing a value drops any\n * selection with it, so the highlight `handleFocus` just set is gone by the\n * time the tokens are on screen and the caret ends up after them. Re-select\n * the first segment once the tokens have actually landed.\n */\nwatch(formattedDisplay, (value, previous) => {\n  if (previous === '' && value !== '' && get(searchInputFocused))\n    selectFirstSegment();\n}, { flush: 'post' });\n\nconst timeSelection = computed<TimePickerSelection>({\n  get() {\n    const type = getCurrentSegment()?.type;\n\n    if (type === 'mm') {\n      return 'minute';\n    }\n    else if (type === 'ss') {\n      return 'second';\n    }\n    else if (type === 'SSS') {\n      return 'millisecond';\n    }\n    return 'hour';\n  },\n  set(value: TimePickerSelection) {\n    let segmentType: DateTimeSegmentType = 'HH';\n    if (value === 'minute') {\n      segmentType = 'mm';\n    }\n    else if (value === 'second') {\n      segmentType = 'ss';\n    }\n    else if (value === 'millisecond') {\n      segmentType = 'SSS';\n    }\n\n    setSegment(segmentType);\n  },\n});\n\nconst float = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(isOutlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float))\n    return '';\n  const resolved = get(fieldLabel);\n  return required ? `${resolved} ﹡` : resolved;\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  filled: variant === 'filled',\n  outlined: get(isOutlined),\n  float: get(float),\n  showLabel: !!get(legendText),\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst pasteMessage = computed<string>(() => (get(pasteRejected)\n  ? t(keys.pasteUnreadable, 'Could not read a date from the pasted text')\n  : ''));\n\n/**\n * The paste message goes first: the details show one message, and it answers\n * what the user just did, which a standing validation error does not.\n */\nconst combinedErrorMessages = computed<string[]>(() => {\n  const paste = get(pasteMessage) ? [get(pasteMessage)] : [];\n  if (!errorMessages)\n    return [...paste, ...get(internalErrorMessages)];\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...paste, ...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n  return isDefined(digit) ? get(digit).toString().padStart(padding, '0') : undefined;\n}\n\nasync function setInputFocus(): Promise<void> {\n  await nextTick(() => {\n    set(searchInputFocused, true);\n  });\n}\n\nfunction clear(segmentType?: string): void {\n  if (!segmentType) {\n    clearSelection();\n    set(currentValue, undefined);\n    return;\n  }\n\n  clearSegment(segmentType);\n}\n\n/**\n * An entry left incomplete is completed once the user is done with the field,\n * never while they are still filling it in: a half typed hour is not a segment\n * they left out. Leaving the field counts, unless the calendar is open, since\n * then the focus is only moving into it and the menu closing covers that.\n */\nfunction onBlur(): void {\n  handleBlur();\n  if (!get(isOpen))\n    commitPartialTime();\n}\n\nwatch(isOpen, (open) => {\n  if (!open && !get(searchInputFocused))\n    commitPartialTime();\n});\n\n/**\n * Selects the clicked segment before opening the menu, so the selection is not\n * lost to the DOM changes that opening brings.\n */\nfunction handleInputClick(event: MouseEvent): void {\n  handleClick(event);\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\n/**\n * The menu is teleported to the body, so it never sits next to the field in\n * the tab sequence. Opening it from the keyboard therefore moves focus into\n * the calendar; opening it with the mouse leaves focus in the field, which is\n * what `disable-auto-focus` on the menu is there for.\n */\nconst focusCalendarOnOpen = ref<boolean>(false);\n\n/**\n * Asks for focus to move into the calendar. The menu is teleported and mounts\n * a frame later, so the watcher below waits for the wrapper to appear rather\n * than guessing at a number of ticks.\n */\nfunction focusCalendar(): void {\n  set(focusCalendarOnOpen, true);\n}\n\nwatch(menuWrapperRef, (menu) => {\n  if (!menu || !get(focusCalendarOnOpen))\n    return;\n\n  set(focusCalendarOnOpen, false);\n  nextTick(() => {\n    const el = menu.$el as HTMLElement | undefined;\n    el?.querySelector<HTMLButtonElement>('[role=\"gridcell\"][tabindex=\"0\"]')?.focus({ preventScroll: true });\n  });\n});\n\n/** Moves focus to the field. Exposed so a consumer can drive it from a ref. */\nfunction focus(): void {\n  get(textInput)?.focus({ preventScroll: true });\n}\n\nfunction focusField(): void {\n  nextTick(focus);\n}\n\nonMounted(() => {\n  if (autofocus && !disabled)\n    focusField();\n});\n\n/** Escape inside the calendar closes it and hands focus back to the field. */\nfunction closeFromMenu(): void {\n  set(isOpen, false);\n  focusField();\n}\n\n/**\n * The menu used to be mouse-only: the activator carried no key handlers, so\n * there was no way to reach the calendar from the keyboard. Alt+ArrowDown\n * opens it and Escape closes it, following the combobox convention, and the\n * append chevron is a real button for anyone who tabs to it instead.\n *\n * Enter and Escape are the other ways to be done with the field, and the keys\n * a consumer tends to close its editor on. Escape reaches that point only once\n * the calendar is already shut, and discards nothing, since the segments stay\n * on screen either way, so it commits what was entered rather than dropping it\n * when the field goes. Both write the value before the key carries on\n * bubbling, so it survives that close.\n */\nfunction onKeyDown(event: KeyboardEvent): void {\n  if (disabled || readonly)\n    return;\n\n  if (event.altKey && event.key === 'ArrowDown') {\n    event.preventDefault();\n    set(isOpen, true);\n    focusCalendar();\n    return;\n  }\n\n  if (event.key === 'Escape' && get(isOpen)) {\n    set(isOpen, false);\n    return;\n  }\n\n  if (event.key === 'Enter' || event.key === 'Escape')\n    commitPartialTime();\n\n  handleKeyDown(event);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nconst menuActions = computed<DateTimePickerAction[]>(\n  () => actions.filter(action => action !== 'clear' || allowEmpty),\n);\n\nconst anyMenuOpen = computed<boolean>(() => get(isOpen) || get(calendarMenuOpen));\n\nwatch(anyMenuOpen, (value) => {\n  set(menuOpen, value);\n});\n\ndefineExpose({\n  focus,\n});\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"getRootAttrs($attrs, [])\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :options=\"MENU_OPTIONS\"\n    :dense=\"dense\"\n    :hint=\"hint\"\n    :disabled=\"disabled\"\n    :success-messages=\"successMessages\"\n    :error-messages=\"combinedErrorMessages\"\n    :close-on-content-click=\"false\"\n    :show-details=\"!hideDetails\"\n    :persistent=\"calendarMenuOpen\"\n    full-width\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : activatorHandlers(attrs)),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        @mouseenter=\"isHovered = true\"\n        @mouseleave=\"isHovered = false\"\n        @click=\"setInputFocus()\"\n      >\n        <span\n          v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n          data-id=\"label\"\n          :class=\"[\n            ui.label(),\n            { 'pr-2': !valueSet && !open && isOutlined },\n          ]\"\n        >\n          {{ fieldLabel }}\n          <span\n            v-if=\"required\"\n            data-id=\"required-indicator\"\n            :class=\"ui.required()\"\n          >\n            ﹡\n          </span>\n        </span>\n\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-text-secondary transition\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.value()\">\n          <input\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-none flex-1 min-w-0\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            spellcheck=\"false\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"fieldLabel\"\n            :aria-required=\"required || undefined\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"onBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"onKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n          <!-- The details line is not a live region, so a rejected paste is announced from here -->\n          <span\n            class=\"sr-only\"\n            aria-live=\"polite\"\n            data-id=\"paste-status\"\n          >\n            {{ pasteMessage }}\n          </span>\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          color=\"error\"\n          :aria-label=\"clearLabel\"\n          :class=\"[\n            ui.clear(),\n            anyFocused && '!visible',\n            { 'mr-2': !dense },\n          ]\"\n          @click.stop.prevent=\"clear()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"18\"\n          />\n        </RuiButton>\n\n        <!-- Out of the tab sequence, following the combobox pattern: the button only duplicates\n             Alt+ArrowDown on the field, so leaving it in cost two stops to cross one date field\n             and four to cross a from/to pair, for nothing a keyboard user could not already do.\n             It stays a real button, so it keeps its label and its expanded state for anyone\n             reaching it by any other means. -->\n        <button\n          v-if=\"!disabled && !readonly\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          :aria-label=\"toggleLabel\"\n          :aria-expanded=\"isOpen\"\n          aria-haspopup=\"dialog\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </button>\n        <span\n          v-else\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset\n        v-if=\"isOutlined\"\n        :class=\"ui.fieldset()\"\n      >\n        <legend :class=\"ui.legend()\">\n          {{ legendText }}\n        </legend>\n      </fieldset>\n    </template>\n    <template #default>\n      <RuiDateTimePickerMenu\n        ref=\"menuWrapperRef\"\n        v-model:selected-date=\"selectedDate\"\n        v-model:selected-time=\"selectedTime\"\n        v-model:selected-hour=\"modelHour\"\n        v-model:selected-minute=\"modelMinute\"\n        v-model:selected-second=\"modelSecond\"\n        v-model:selected-millisecond=\"modelMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"modelTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        :show-timezone=\"showTimezone\"\n        :actions=\"menuActions\"\n        @keydown.escape=\"closeFromMenu()\"\n        @set-now=\"setNow()\"\n        @set-today=\"setToday()\"\n        @clear=\"clear()\"\n      >\n        <slot name=\"menu-content\" />\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ComponentPublicInstance } from 'vue';\nimport type { DateTimePickerAction, DateTimeSegmentType } from '@/components/date-time-picker/types';\nimport type { TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { dateTimePickerStyles } from '@/components/date-time-picker/date-time-picker-styles';\nimport RuiDateTimePickerMenu from '@/components/date-time-picker/RuiDateTimePickerMenu.vue';\nimport { useDateTimeSelection } from '@/components/date-time-picker/use-date-time-selection';\nimport { useInputHandler } from '@/components/date-time-picker/use-input-handler';\nimport { useKeyboardHandler } from '@/components/date-time-picker/use-keyboard-handler';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ntype DateFormat = 'year-first' | 'month-first' | 'day-first';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> = T extends 'date'\n  ? Date | undefined\n  : T extends 'epoch-ms'\n    ? number | undefined\n    : T extends 'epoch'\n      ? number | undefined\n      : Date | number | undefined;\n\nexport interface RuiDateTimePickerProps {\n  minDate?: Date | number;\n  maxDate?: Date | number | 'now';\n  format?: DateFormat;\n  type?: DateTimeModelType;\n  accuracy?: 'minute' | 'second' | 'millisecond';\n  disabled?: boolean;\n  allowEmpty?: boolean;\n  readonly?: boolean;\n  dense?: boolean;\n  label?: string;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n  /**\n   * Renders the timezone selector in the menu. Off by default: the value is\n   * emitted as a date or an epoch, so the picked timezone does not survive a\n   * round trip and most consumers work in local time.\n   */\n  showTimezone?: boolean;\n  /**\n   * Actions rendered in the menu footer. `clear` is only rendered when the\n   * picker is `allowEmpty`. Pass an empty array to drop the footer entirely.\n   */\n  actions?: DateTimePickerAction[];\n  /**\n   * Focuses the field once it is mounted. The native attribute is ignored for\n   * an input inserted into an already loaded document, which is the usual case\n   * for a picker revealed by an editor or a dialog.\n   */\n  autofocus?: boolean;\n  /**\n   * Accepts an entry that stops short of the full format, filling the segments\n   * it never reached from one end of the day: `start` gives a bare date\n   * 00:00:00.000 and `end` gives it 23:59:59.999. Meant for a range, where the\n   * two bounds want opposite ends. Left unset, an entry missing its time is not\n   * a value and nothing is emitted.\n   *\n   * The fill runs when the user is done with the field - leaving it, pressing\n   * enter, or closing the calendar - and is written back into the segments, so\n   * what it decided on is on screen.\n   *\n   * Spelled out rather than written as `PartialTimeMode`: a consumer that hands\n   * this whole interface to its own `defineProps` needs every member resolvable\n   * by the SFC compiler, which does not follow the type into the package.\n   */\n  partialTime?: 'start' | 'end';\n}\n\ndefineOptions({\n  name: 'RuiDateTimePicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<ModelValueType<DateTimeModelType>>({ required: true });\nconst menuOpen = defineModel<boolean>('menuOpen', { default: false });\n\nconst {\n  disabled = false,\n  readonly = false,\n  allowEmpty = false,\n  dense = false,\n  type = 'epoch-ms',\n  hideDetails = false,\n  label,\n  labelPlacement = undefined,\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\n  showTimezone = false,\n  actions = ['now'],\n  autofocus = false,\n  partialTime,\n} = defineProps<RuiDateTimePickerProps>();\n\ndefineSlots<{\n  'menu-content': () => any;\n}>();\n\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\n\nconst baseFormats: Record<DateFormat, string> = {\n  'day-first': 'DD/MM/YYYY HH:mm',\n  'month-first': 'MM/DD/YYYY HH:mm',\n  'year-first': 'YYYY/MM/DD HH:mm',\n};\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\nconst cursorPosition = ref<number>(0);\nconst currentValue = ref<number>();\n\nconst { t } = useRuiI8n();\n\nconst keys = RUI_I18N_KEYS.dateTimePicker;\n\nconst fieldLabel = computed<string>(() => label ?? t(keys.label, 'Pick a date'));\nconst inputId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst clearLabel = computed<string>(() => t(keys.clearValue, 'Clear the date'));\nconst toggleLabel = computed<string>(() => (get(isOpen)\n  ? t(keys.closeCalendar, 'Close the calendar')\n  : t(keys.openCalendar, 'Open the calendar')));\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<ComponentPublicInstance>('menuWrapperRef');\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst anyFocused = computed<boolean>(() => get(activatorFocusedWithin) || get(menuWrapperFocusedWithin));\n\nconst dateFormat = computed<string>(() => {\n  const fmt = baseFormats[format];\n  if (accuracy === 'second') {\n    return fmt.replace('HH:mm', 'HH:mm:ss');\n  }\n  else if (accuracy === 'millisecond') {\n    return fmt.replace('HH:mm', 'HH:mm:ss.SSS');\n  }\n  return fmt;\n});\n\nconst {\n  clear: clearSelection,\n  commitPartialTime,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  modelDay,\n  modelHour,\n  modelMillisecond,\n  modelMinute,\n  modelMonth,\n  modelSecond,\n  selectedTime,\n  modelTimezone,\n  modelYear,\n  setNow,\n  setToday,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  dateFormat,\n  maxDate,\n  minDate,\n  modelValue,\n  partialTime,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\n\nconst {\n  clear: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\n  pasteRejected,\n  selectFirstSegment,\n  setSegment,\n} = useKeyboardHandler({\n  accuracy,\n  currentValue,\n  cursorPosition,\n  dateFormat,\n  disabled,\n  getCurrent,\n  getDateTime,\n  readonly,\n  setValue,\n  textInput,\n  timezone: modelTimezone,\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\n/** True once any segment holds a digit, even a partially typed date. */\nconst anySegmentSet = computed<boolean>(() => [\n  modelYear,\n  modelMonth,\n  modelDay,\n  modelHour,\n  modelMinute,\n  modelSecond,\n  modelMillisecond,\n].some(segment => isDefined(segment)));\n\n/**\n * The field's text.\n *\n * An untouched field shows its format through the placeholder rather than\n * holding the tokens as its value, where a screen reader reads them as content\n * and select-all copies them. The tokens stay while the field is focused: that\n * is when the segment machinery highlights them, and collapsing the value\n * mid-edit would blank the field under the cursor. The guard is \"no segment\n * set\" rather than `valueSet`, so blurring a half-typed date keeps what was\n * entered on screen.\n */\nconst formattedDisplay = computed<string>(() => {\n  if (!get(anySegmentSet) && !get(searchInputFocused)) {\n    return '';\n  }\n\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(modelYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(modelMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(modelDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(modelHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(modelMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(modelSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(modelMillisecond, 3) },\n  ];\n\n  for (const { pattern, value } of replacements) {\n    if (value !== undefined) {\n      result = result.replace(pattern, value);\n    }\n  }\n\n  return result;\n});\n\n/**\n * An untouched field holds no value until focus expands the format tokens into\n * it. That patch overwrites the input's value, and writing a value drops any\n * selection with it, so the highlight `handleFocus` just set is gone by the\n * time the tokens are on screen and the caret ends up after them. Re-select\n * the first segment once the tokens have actually landed.\n */\nwatch(formattedDisplay, (value, previous) => {\n  if (previous === '' && value !== '' && get(searchInputFocused))\n    selectFirstSegment();\n}, { flush: 'post' });\n\nconst timeSelection = computed<TimePickerSelection>({\n  get() {\n    const type = getCurrentSegment()?.type;\n\n    if (type === 'mm') {\n      return 'minute';\n    }\n    else if (type === 'ss') {\n      return 'second';\n    }\n    else if (type === 'SSS') {\n      return 'millisecond';\n    }\n    return 'hour';\n  },\n  set(value: TimePickerSelection) {\n    let segmentType: DateTimeSegmentType = 'HH';\n    if (value === 'minute') {\n      segmentType = 'mm';\n    }\n    else if (value === 'second') {\n      segmentType = 'ss';\n    }\n    else if (value === 'millisecond') {\n      segmentType = 'SSS';\n    }\n\n    setSegment(segmentType);\n  },\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst pasteMessage = computed<string>(() => (get(pasteRejected)\n  ? t(keys.pasteUnreadable, 'Could not read a date from the pasted text')\n  : ''));\n\n/**\n * The paste message goes first: the details show one message, and it answers\n * what the user just did, which a standing validation error does not.\n */\nconst combinedErrorMessages = computed<string[]>(() => {\n  const paste = get(pasteMessage) ? [get(pasteMessage)] : [];\n  if (!errorMessages)\n    return [...paste, ...get(internalErrorMessages)];\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...paste, ...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n  return isDefined(digit) ? get(digit).toString().padStart(padding, '0') : undefined;\n}\n\nasync function setInputFocus(): Promise<void> {\n  await nextTick(() => {\n    set(searchInputFocused, true);\n  });\n}\n\nfunction clear(segmentType?: string): void {\n  if (!segmentType) {\n    clearSelection();\n    set(currentValue, undefined);\n    return;\n  }\n\n  clearSegment(segmentType);\n}\n\n/**\n * An entry left incomplete is completed once the user is done with the field,\n * never while they are still filling it in: a half typed hour is not a segment\n * they left out. Leaving the field counts, unless the calendar is open, since\n * then the focus is only moving into it and the menu closing covers that.\n */\nfunction onBlur(): void {\n  handleBlur();\n  if (!get(isOpen))\n    commitPartialTime();\n}\n\nwatch(isOpen, (open) => {\n  if (!open && !get(searchInputFocused))\n    commitPartialTime();\n});\n\n/**\n * Selects the clicked segment before opening the menu, so the selection is not\n * lost to the DOM changes that opening brings.\n */\nfunction handleInputClick(event: MouseEvent): void {\n  handleClick(event);\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\n/**\n * The menu is teleported to the body, so it never sits next to the field in\n * the tab sequence. Opening it from the keyboard therefore moves focus into\n * the calendar; opening it with the mouse leaves focus in the field, which is\n * what `disable-auto-focus` on the menu is there for.\n */\nconst focusCalendarOnOpen = ref<boolean>(false);\n\n/**\n * Asks for focus to move into the calendar. The menu is teleported and mounts\n * a frame later, so the watcher below waits for the wrapper to appear rather\n * than guessing at a number of ticks.\n */\nfunction focusCalendar(): void {\n  set(focusCalendarOnOpen, true);\n}\n\nwatch(menuWrapperRef, (menu) => {\n  if (!menu || !get(focusCalendarOnOpen))\n    return;\n\n  set(focusCalendarOnOpen, false);\n  nextTick(() => {\n    const el = menu.$el as HTMLElement | undefined;\n    el?.querySelector<HTMLButtonElement>('[role=\"gridcell\"][tabindex=\"0\"]')?.focus({ preventScroll: true });\n  });\n});\n\n/** Moves focus to the field. Exposed so a consumer can drive it from a ref. */\nfunction focus(): void {\n  get(textInput)?.focus({ preventScroll: true });\n}\n\nfunction focusField(): void {\n  nextTick(focus);\n}\n\nonMounted(() => {\n  if (autofocus && !disabled)\n    focusField();\n});\n\n/** Escape inside the calendar closes it and hands focus back to the field. */\nfunction closeFromMenu(): void {\n  set(isOpen, false);\n  focusField();\n}\n\n/**\n * The menu used to be mouse-only: the activator carried no key handlers, so\n * there was no way to reach the calendar from the keyboard. Alt+ArrowDown\n * opens it and Escape closes it, following the combobox convention, and the\n * append chevron is a real button for anyone who tabs to it instead.\n *\n * Enter and Escape are the other ways to be done with the field, and the keys\n * a consumer tends to close its editor on. Escape reaches that point only once\n * the calendar is already shut, and discards nothing, since the segments stay\n * on screen either way, so it commits what was entered rather than dropping it\n * when the field goes. Both write the value before the key carries on\n * bubbling, so it survives that close.\n */\nfunction onKeyDown(event: KeyboardEvent): void {\n  if (disabled || readonly)\n    return;\n\n  if (event.altKey && event.key === 'ArrowDown') {\n    event.preventDefault();\n    set(isOpen, true);\n    focusCalendar();\n    return;\n  }\n\n  if (event.key === 'Escape' && get(isOpen)) {\n    set(isOpen, false);\n    return;\n  }\n\n  if (event.key === 'Enter' || event.key === 'Escape')\n    commitPartialTime();\n\n  handleKeyDown(event);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nconst menuActions = computed<DateTimePickerAction[]>(\n  () => actions.filter(action => action !== 'clear' || allowEmpty),\n);\n\nconst anyMenuOpen = computed<boolean>(() => get(isOpen) || get(calendarMenuOpen));\n\nwatch(anyMenuOpen, (value) => {\n  set(menuOpen, value);\n});\n\ndefineExpose({\n  focus,\n});\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"getRootAttrs($attrs, [])\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :class-names=\"{ details: 'px-0', content: 'p-0' }\"\n    :options=\"MENU_OPTIONS\"\n    :dense=\"dense\"\n    :hint=\"hint\"\n    :disabled=\"disabled\"\n    :success-messages=\"successMessages\"\n    :error-messages=\"combinedErrorMessages\"\n    :close-on-content-click=\"false\"\n    :show-details=\"!hideDetails\"\n    :persistent=\"calendarMenuOpen\"\n    :menu-label=\"fieldLabel\"\n    role=\"dialog\"\n    full-width\n    disable-auto-focus\n  >\n    <template #label>\n      <RuiFieldLabel\n        :for=\"inputId\"\n        :text=\"fieldLabel\"\n        :hidden=\"placement === 'hidden'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      />\n    </template>\n    <template #activator=\"{ attrs }\">\n      <div\n        ref=\"activator\"\n        :class=\"ui.activator()\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(readonly ? {} : activatorHandlers(attrs)),\n        }\"\n        data-id=\"activator\"\n        :aria-invalid=\"hasError\"\n        @mouseenter=\"isHovered = true\"\n        @mouseleave=\"isHovered = false\"\n        @click=\"setInputFocus()\"\n      >\n        <span :class=\"ui.iconPrepend()\">\n          <RuiIcon\n            class=\"text-rui-neutral-500 dark:text-rui-neutral-400 transition\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"ui.value()\">\n          <input\n            :id=\"inputId\"\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-hidden flex-1 min-w-0\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            spellcheck=\"false\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            :aria-required=\"required || undefined\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"onBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"onKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n          <!-- The details line is not a live region, so a rejected paste is announced from here -->\n          <span\n            class=\"sr-only\"\n            aria-live=\"polite\"\n            data-id=\"paste-status\"\n          >\n            {{ pasteMessage }}\n          </span>\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled && !readonly\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          :aria-label=\"clearLabel\"\n          :class=\"[\n            ui.clear(),\n            anyFocused && 'visible!',\n            { 'mr-2': !dense },\n          ]\"\n          @click.stop.prevent=\"clear()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n\n        <!-- Out of the tab sequence, following the combobox pattern: the button only duplicates\n             Alt+ArrowDown on the field, so leaving it in cost two stops to cross one date field\n             and four to cross a from/to pair, for nothing a keyboard user could not already do.\n             It stays a real button, so it keeps its label and its expanded state for anyone\n             reaching it by any other means. -->\n        <button\n          v-if=\"!disabled && !readonly\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          :aria-label=\"toggleLabel\"\n          :aria-expanded=\"isOpen\"\n          aria-haspopup=\"dialog\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-chevron-down\"\n          />\n        </button>\n        <span\n          v-else\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n        >\n          <RuiIcon\n            :class=\"ui.icon()\"\n            :size=\"dense ? 16 : 20\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset :class=\"ui.fieldset()\" />\n    </template>\n    <template #default>\n      <RuiDateTimePickerMenu\n        ref=\"menuWrapperRef\"\n        v-model:selected-date=\"selectedDate\"\n        v-model:selected-time=\"selectedTime\"\n        v-model:selected-hour=\"modelHour\"\n        v-model:selected-minute=\"modelMinute\"\n        v-model:selected-second=\"modelSecond\"\n        v-model:selected-millisecond=\"modelMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"modelTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        :show-timezone=\"showTimezone\"\n        :actions=\"menuActions\"\n        @keydown.escape=\"closeFromMenu()\"\n        @set-now=\"setNow()\"\n        @set-today=\"setToday()\"\n        @clear=\"clear()\"\n      >\n        <!-- only when given, or the panel draws an empty third column with its divider -->\n        <template\n          v-if=\"$slots['menu-content']\"\n          #default\n        >\n          <slot name=\"menu-content\" />\n        </template>\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}

package/dist/components/date-time-picker/RuiDateTimePicker.vue.d.ts

@@ -1,5 +1,5 @@
 import type { DateTimePickerAction } from './types.js';
-import { type DateTimePickerVariant } from './date-time-picker-styles.js';
+import { type LabelPlacement } from '../../composables/defaults/field.js';
 type DateFormat = 'year-first' | 'month-first' | 'day-first';
 type DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';
 type ModelValueType<T extends DateTimeModelType> = T extends 'date' ? Date | undefined : T extends 'epoch-ms' ? number | undefined : T extends 'epoch' ? number | undefined : Date | number | undefined;
@@ -14,7 +14,8 @@ export interface RuiDateTimePickerProps {
     readonly?: boolean;
     dense?: boolean;
     label?: string;
-    variant?: DateTimePickerVariant;
+    /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */
+    labelPlacement?: LabelPlacement;
     hint?: string;
     errorMessages?: string | string[];
     successMessages?: string | string[];

package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { useLabelPlacement } from "../../composables/defaults/field.js";
 import { useRuiI8n } from "../../composables/use-rui-i18n.js";
 import { cn } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
@@ -5,26 +6,27 @@ import RuiButton_default from "../buttons/button/RuiButton.js";
 import { useFormTextDetail } from "../../utils/form-text-detail.js";
 import { Placement } from "../../composables/floating.js";
 import RuiMenu_default from "../overlays/menu/RuiMenu.js";
+import RuiFieldLabel_default from "../forms/field-label/RuiFieldLabel.js";
 import { getNonRootAttrs, getRootAttrs } from "../../utils/helpers.js";
 import { dateTimePickerStyles } from "./date-time-picker-styles.js";
+import { activatorHandlers } from "../overlays/menu/activator-handlers.js";
 import { RUI_I18N_KEYS } from "../../i18n/keys.js";
 import RuiDateTimePickerMenu_default from "./RuiDateTimePickerMenu.js";
 import { useDateTimeSelection } from "./use-date-time-selection.js";
 import { useInputHandler } from "./use-input-handler.js";
 import { useKeyboardHandler } from "./use-keyboard-handler.js";
-import { activatorHandlers } from "../overlays/menu/activator-handlers.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { isDefined, useFocus, useFocusWithin } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/date-time-picker/RuiDateTimePicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-invalid"];
 var _hoisted_2 = [
+	"id",
 	"disabled",
 	"value",
 	"placeholder",
 	"readonly",
 	"aria-invalid",
-	"aria-label",
 	"aria-required"
 ];
 var _hoisted_3 = {
@@ -60,7 +62,7 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			default: false
 		},
 		label: {},
-		variant: { default: "default" },
+		labelPlacement: { default: () => void 0 },
 		hint: {},
 		errorMessages: { default: () => [] },
 		successMessages: { default: () => [] },
@@ -108,6 +110,8 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const { t } = useRuiI8n();
 		const keys = RUI_I18N_KEYS.dateTimePicker;
 		const fieldLabel = computed(() => __props.label ?? t(keys.label, "Pick a date"));
+		const inputId = useId();
+		const placement = useLabelPlacement(() => __props.labelPlacement);
 		const clearLabel = computed(() => t(keys.clearValue, "Clear the date"));
 		const toggleLabel = computed(() => get$1(isOpen) ? t(keys.closeCalendar, "Close the calendar") : t(keys.openCalendar, "Open the calendar"));
 		const textInput = useTemplateRef("textInput");
@@ -149,7 +153,6 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			timezone: modelTimezone
 		});
 		const { hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
-		const isOutlined = computed(() => __props.variant === "outlined");
 		/** True once any segment holds a digit, even a partially typed date. */
 		const anySegmentSet = computed(() => [
 			modelYear,
@@ -233,17 +236,7 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				setSegment(segmentType);
 			}
 		});
-		const float = computed(() => (get$1(isOpen) || get$1(valueSet) || get$1(searchInputFocused)) && get$1(isOutlined));
-		const legendText = computed(() => {
-			if (!get$1(float)) return "";
-			const resolved = get$1(fieldLabel);
-			return __props.required ? `${resolved} ﹡` : resolved;
-		});
 		const ui = computed(() => dateTimePickerStyles({
-			filled: __props.variant === "filled",
-			outlined: get$1(isOutlined),
-			float: get$1(float),
-			showLabel: !!get$1(legendText),
 			opened: get$1(isOpen),
 			hovered: get$1(isHovered),
 			dense: __props.dense,
@@ -387,6 +380,10 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"onUpdate:modelValue": _cache[26] || (_cache[26] = ($event) => isRef(isOpen) ? isOpen.value = $event : null)
 			}, unref(getRootAttrs)(_ctx.$attrs, []), {
 				class: unref(ui).wrapper({ class: unref(cn)(_ctx.$attrs.class) }),
+				"class-names": {
+					details: "px-0",
+					content: "p-0"
+				},
 				options: MENU_OPTIONS,
 				dense: __props.dense,
 				hint: __props.hint,
@@ -396,10 +393,25 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"close-on-content-click": false,
 				"show-details": !__props.hideDetails,
 				persistent: unref(calendarMenuOpen),
+				"menu-label": unref(fieldLabel),
+				role: "dialog",
 				"full-width": "",
 				"disable-auto-focus": ""
 			}), {
-				activator: withCtx(({ attrs, open }) => [createElementVNode("div", mergeProps({
+				label: withCtx(() => [createVNode(RuiFieldLabel_default, {
+					for: unref(inputId),
+					text: unref(fieldLabel),
+					hidden: unref(placement) === "hidden",
+					required: __props.required,
+					disabled: __props.disabled
+				}, null, 8, [
+					"for",
+					"text",
+					"hidden",
+					"required",
+					"disabled"
+				])]),
+				activator: withCtx(({ attrs }) => [createElementVNode("div", mergeProps({
 					ref_key: "activator",
 					ref: activator,
 					class: unref(ui).activator()
@@ -413,26 +425,18 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 					onMouseleave: _cache[11] || (_cache[11] = ($event) => isHovered.value = false),
 					onClick: _cache[12] || (_cache[12] = ($event) => setInputFocus())
 				}), [
-					unref(isOutlined) && (unref(searchInputFocused) || open || unref(valueSet)) ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						"data-id": "label",
-						class: normalizeClass([unref(ui).label(), { "pr-2": !unref(valueSet) && !open && unref(isOutlined) }])
-					}, [createTextVNode(toDisplayString(unref(fieldLabel)) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						"data-id": "required-indicator",
-						class: normalizeClass(unref(ui).required())
-					}, " ﹡ ", 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
 					createElementVNode("span", { class: normalizeClass(unref(ui).iconPrepend()) }, [createVNode(RuiIcon_default, {
-						class: "text-rui-text-secondary transition",
-						size: __props.dense ? 16 : 24,
+						class: "text-rui-neutral-500 dark:text-rui-neutral-400 transition",
+						size: __props.dense ? 16 : 20,
 						name: "lu-calendar-days"
 					}, null, 8, ["size"])], 2),
 					createElementVNode("div", { class: normalizeClass(unref(ui).value()) }, [createElementVNode("input", {
+						id: unref(inputId),
 						ref_key: "textInput",
 						ref: textInput,
 						disabled: __props.disabled,
 						value: unref(formattedDisplay),
-						class: "bg-transparent outline-none flex-1 min-w-0",
+						class: "bg-transparent outline-hidden flex-1 min-w-0",
 						type: "text",
 						inputmode: "numeric",
 						spellcheck: "false",
@@ -442,7 +446,6 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						placeholder: unref(dateFormat),
 						readonly: __props.readonly,
 						"aria-invalid": unref(hasError),
-						"aria-label": unref(fieldLabel),
 						"aria-required": __props.required || void 0,
 						onMousedown: _cache[0] || (_cache[0] = ($event) => unref(handleMouseDown)($event)),
 						onFocus: _cache[1] || (_cache[1] = ($event) => unref(handleFocus)()),
@@ -453,29 +456,28 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						onPaste: _cache[6] || (_cache[6] = ($event) => unref(handlePaste)($event)),
 						onInput: _cache[7] || (_cache[7] = ($event) => unref(handleInput)($event))
 					}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, toDisplayString(unref(pasteMessage)), 1)], 2),
-					__props.allowEmpty && unref(valueSet) && !__props.disabled ? (openBlock(), createBlock(RuiButton_default, {
-						key: 1,
+					__props.allowEmpty && unref(valueSet) && !__props.disabled && !__props.readonly ? (openBlock(), createBlock(RuiButton_default, {
+						key: 0,
 						variant: "text",
 						icon: "",
 						"data-id": "clear-button",
 						size: "sm",
-						color: "error",
 						"aria-label": unref(clearLabel),
 						class: normalizeClass([
 							unref(ui).clear(),
-							unref(anyFocused) && "!visible",
+							unref(anyFocused) && "visible!",
 							{ "mr-2": !__props.dense }
 						]),
 						onClick: _cache[8] || (_cache[8] = withModifiers(($event) => clear(), ["stop", "prevent"]))
 					}, {
 						default: withCtx(() => [createVNode(RuiIcon_default, {
 							name: "lu-x",
-							size: "18"
+							size: "16"
 						})]),
 						_: 1
 					}, 8, ["aria-label", "class"])) : createCommentVNode("", true),
 					!__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
-						key: 2,
+						key: 1,
 						type: "button",
 						tabindex: "-1",
 						class: normalizeClass(unref(ui).iconWrapper()),
@@ -486,21 +488,18 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						onClick: _cache[9] || (_cache[9] = ($event) => arrowClicked($event))
 					}, [createVNode(RuiIcon_default, {
 						class: normalizeClass(unref(ui).icon()),
-						size: __props.dense ? 16 : 24,
+						size: __props.dense ? 16 : 20,
 						name: "lu-chevron-down"
 					}, null, 8, ["class", "size"])], 10, _hoisted_4)) : (openBlock(), createElementBlock("span", {
-						key: 3,
+						key: 2,
 						class: normalizeClass(unref(ui).iconWrapper()),
 						"data-id": "append"
 					}, [createVNode(RuiIcon_default, {
 						class: normalizeClass(unref(ui).icon()),
-						size: __props.dense ? 16 : 24,
+						size: __props.dense ? 16 : 20,
 						name: "lu-chevron-down"
 					}, null, 8, ["class", "size"])], 2))
-				], 16, _hoisted_1), unref(isOutlined) ? (openBlock(), createElementBlock("fieldset", {
-					key: 0,
-					class: normalizeClass(unref(ui).fieldset())
-				}, [createElementVNode("legend", { class: normalizeClass(unref(ui).legend()) }, toDisplayString(unref(legendText)), 3)], 2)) : createCommentVNode("", true)]),
+				], 16, _hoisted_1), createElementVNode("fieldset", { class: normalizeClass(unref(ui).fieldset()) }, null, 2)]),
 				default: withCtx(() => [createVNode(RuiDateTimePickerMenu_default, {
 					ref_key: "menuWrapperRef",
 					ref: menuWrapperRef,
@@ -531,10 +530,11 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 					onSetNow: _cache[23] || (_cache[23] = ($event) => unref(setNow)()),
 					onSetToday: _cache[24] || (_cache[24] = ($event) => unref(setToday)()),
 					onClear: _cache[25] || (_cache[25] = ($event) => clear())
-				}, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "menu-content")]),
-					_: 3
-				}, 8, [
+				}, createSlots({ _: 2 }, [_ctx.$slots["menu-content"] ? {
+					name: "default",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "menu-content")]),
+					key: "0"
+				} : void 0]), 1032, [
 					"selected-date",
 					"selected-time",
 					"selected-hour",
@@ -560,7 +560,8 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"success-messages",
 				"error-messages",
 				"show-details",
-				"persistent"
+				"persistent",
+				"menu-label"
 			]);
 		};
 	}