npm - @rotki/ui-library - Versions diffs - 2.26.1 → 3.0.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (420) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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":"~~;;;;;;;;;;;;;;;~~AAeA,IAAM,UAAU;AAEhB,IAAM,cAAc;;;;;;;;;;;EAJpB,MAAM,aAAa,SAAkB,SAAA,YAAmB;EAGxD,MAAM,oBAAoB;GAAC;GAAG;GAAG;EAAC;~~EAGlC~~,MAAM,YAAY,IAAiB,KAAK;EACxC,MAAM,QAAQ,SAAS;GACrB,OAAO,MAAI,UAAU;GACrB,KAAK,MAAI,UAAU,CAAC,CAAC;GACrB,KAAK,MAAI,UAAU,CAAC,CAAC;EACvB,CAAC;EAED,SAAS,cAAc,OAAe,KAAmB;GACvD,IAAI,CAAC,MAAM,OAAO,CAAC,MAAM,OACvB;GAEF,MAAM,UAAU,MAAM,OAAO,KAAK,GAAG,GAAG,OAAO;GAC/C,MAAM,IAAI,OAAO;GACjB,MAAM,CAAC,GAAG,GAAG,KAAK,MAAM;GACxB,MAAM,MAAM,MAAM,UAAU;IAAE;IAAG;IAAG;GAAE,CAAC,CAAC,CAAC,MAAM;EACjD;EAEA,MAAM,eAAe,eAAe,QAAqB,OAAc,QAAiB;GACtF,IAAI,CAAC,MAAM,OACT;GAEF,MAAM,SAAS,MAAM;GACrB,IAAI,EAAE,kBAAkB,mBACtB;GAEF,MAAM,QAAQ,OAAO;GACrB,IAAI,WAAW,OAAO;IACpB,MAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;IACjC,IAAI,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,kBAAkB,SAAS,IAAI,MAAM,GACnE,MAAM,MAAM,MAAM;SACf,MAAM,MAAM,MAAM;GACzB,OACK,IAAI,QAAQ,KAAA,GACf,cAAc,OAAO,GAAG;GAG1B,MAAI,YAAY,MAAM,KAAK;EAC7B,GAAG,GAAG;EAEN,MAAM,gBAAgB,eAAe,QAAqB,OAAe,QAAiB;GACxF,IAAI,CAAC,OACH;GAEF,IAAI,WAAW,OAAO;IACpB,MAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;IACjC,IAAI,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,MAAM,SAAS,IAAI,WAAW,GAC5D,MAAM,MAAM,MAAM;GACtB,OACK,IAAI,QAAQ,KAAA,GACf,cAAc,OAAO,GAAG;GAG1B,MAAI,YAAY,MAAM,KAAK;EAC7B,GAAG,GAAG;EAEN,SAAS,~~oBAA0B~~;~~GACjC~~,~~MAAI~~,~~WAAW~~,~~MAAI,~~SAAS,~~MAAM~~,~~QAAQ~~,~~QAAQ~~,KAAK;~~EACzD~~;EAEA,YACQ;GACJ,MAAM,QAAQ,MAAI,UAAU;GAC5B,OAAO,CAAC,MAAM,KAAK,GAAG,MAAM,GAAG;EACjC,SACM;GACJ,MAAM,QAAQ,MAAI,UAAU;GAC5B,MAAM,QAAQ;GACd,MAAM,MAAM,MAAM;GAClB,MAAM,MAAM,MAAM;EACpB,CACF;;GAIE,OAAA,UAAA,GAAA,mBAsDM,OAtDN,WAsDM;IArDJ,WAAQ;IACR,OAAM;GACEA,GAAAA,KAAAA,MAAM,GAAA,~~CAEd~~,~~mBAyCM~~,~~OAzCN~~,~~YAyCM~~,~~CAxCJ~~,~~mBAmCM~~,~~OAnCN~~,~~YAmCM~~,~~CAjCI~~,MAAA,SAAA,MAAS,SADjB,UAAA,GAAA,YAee,sBAAA;;IAbJ,YAAA,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,CAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAG,SAOG,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,aAAA,CAAa,CAAC,MAAA,SAAA,GAAW,MAAM,EAAA;IANpD,~~SAAQ;IACR,~~OAAM;IACN,WAAU;IACV,OAAM;IACN,OAAA;IACA,gBAAA;IAEC,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,CAAY,CAAC,MAAA,SAAA,GAAW,MAAM;;IAE1B,SAAO,~~cACsB~~,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,~~CAAtC~~,~~mBAAsC~~,QAAA,~~EAAhC~~,OAAM,~~gBAAe~~,GAAC,~~OAAG~~,EAAA,CAAA,EAAA,CAAA;;~~GAGnC~~,GAAA,GAAA,CAAA,YAAA,CAAA,MAAA,UAAA,GAAA,mBAiBM,OAjBN,YAiBM,EAbJ,UAAA,IAAA,GAAA,mBAYE,UAAA,MAAA,WAXiB,MAAA,KAAA,CAAK,CAAC,MAAf,GAAG,MAAC;IADd,OAAA,UAAA,GAAA,YAYE,sBAAA;KAVC,KAAK;KACL,eAAa,EAAE,SAAQ;KACxB,~~SAAQ;KACR,~~OAAM;KACN,WAAU;KACV,OAAM;~~KACN~~,OAAA;KACA,gBAAA;KACC,wBAAkB,WAAE,MAAA,aAAA,CAAa,CAAC,MAAA,SAAA,GAAW,QAAQ,CAAC;KACtD,SAAI,WAAE,MAAA,YAAA,CAAY,CAAC,MAAA,SAAA,GAAW,QAAQ,CAAC;;;;;;GAK9C,CAAA,GAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAA,mBAEM,OAFN,YAEM,gBADD,MAAA,SAAA,CAAS,GAAA,CAAA,CAAA,CAAA,GAGhB,YAMY,mBAAA;IALV,OAAM;IACN,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,kBAAiB;;IAEzB,SAAA,cAAsC,CAAtC,YAAsC,iBAAA,EAA7B,MAAK,sBAAqB,CAAA,CAAA,CAAA"}
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 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":";;;;;;;;;;;;AAeA,IAAM,UAAU;AAEhB,IAAM,cAAc;;;;;;;;;;;EAJpB,MAAM,aAAa,SAAkB,SAAA,YAAmB;EAGxD,MAAM,oBAAoB;GAAC;GAAG;GAAG;EAAC;EAElC,MAAM,eAAe;GAAC;GAAO;GAAS;EAAM;EAE5C,MAAM,YAAY,IAAiB,KAAK;EACxC,MAAM,QAAQ,SAAS;GACrB,OAAO,MAAI,UAAU;GACrB,KAAK,MAAI,UAAU,CAAC,CAAC;GACrB,KAAK,MAAI,UAAU,CAAC,CAAC;EACvB,CAAC;EAED,SAAS,cAAc,OAAe,KAAmB;GACvD,IAAI,CAAC,MAAM,OAAO,CAAC,MAAM,OACvB;GAEF,MAAM,UAAU,MAAM,OAAO,KAAK,GAAG,GAAG,OAAO;GAC/C,MAAM,IAAI,OAAO;GACjB,MAAM,CAAC,GAAG,GAAG,KAAK,MAAM;GACxB,MAAM,MAAM,MAAM,UAAU;IAAE;IAAG;IAAG;GAAE,CAAC,CAAC,CAAC,MAAM;EACjD;EAEA,MAAM,eAAe,eAAe,QAAqB,OAAc,QAAiB;GACtF,IAAI,CAAC,MAAM,OACT;GAEF,MAAM,SAAS,MAAM;GACrB,IAAI,EAAE,kBAAkB,mBACtB;GAEF,MAAM,QAAQ,OAAO;GACrB,IAAI,WAAW,OAAO;IACpB,MAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;IACjC,IAAI,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,kBAAkB,SAAS,IAAI,MAAM,GACnE,MAAM,MAAM,MAAM;SACf,MAAM,MAAM,MAAM;GACzB,OACK,IAAI,QAAQ,KAAA,GACf,cAAc,OAAO,GAAG;GAG1B,MAAI,YAAY,MAAM,KAAK;EAC7B,GAAG,GAAG;EAEN,MAAM,gBAAgB,eAAe,QAAqB,OAAe,QAAiB;GACxF,IAAI,CAAC,OACH;GAEF,IAAI,WAAW,OAAO;IACpB,MAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;IACjC,IAAI,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,MAAM,SAAS,IAAI,WAAW,GAC5D,MAAM,MAAM,MAAM;GACtB,OACK,IAAI,QAAQ,KAAA,GACf,cAAc,OAAO,GAAG;GAG1B,MAAI,YAAY,MAAM,KAAK;EAC7B,GAAG,GAAG;EAEN,SAAS,kBAAkB,OAA8B;GACvD,IAAI,UAAU,SAAS,UAAU,OAC/B,MAAI,WAAW,KAAK;EACxB;EAEA,YACQ;GACJ,MAAM,QAAQ,MAAI,UAAU;GAC5B,OAAO,CAAC,MAAM,KAAK,GAAG,MAAM,GAAG;EACjC,SACM;GACJ,MAAM,QAAQ,MAAI,UAAU;GAC5B,MAAM,QAAQ;GACd,MAAM,MAAM,MAAM;GAClB,MAAM,MAAM,MAAM;EACpB,CACF;;GAIE,OAAA,UAAA,GAAA,mBAsDM,OAtDN,WAsDM;IArDJ,WAAQ;IACR,OAAM;GACEA,GAAAA,KAAAA,MAAM,GAAA,CAGd,YAaU,iBAAA;IAZP,eAAa,MAAA,SAAA;IACd,SAAQ;IACR,MAAA;IACA,WAAQ;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,kBAAkB,MAAM;;IAE7C,SAAA,cAES,CAFT,YAES,gBAAA,EAFD,OAAM,MAAK,GAAA;KAAC,SAAA,cAEpB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFoB,gBAAA,SAEpB,EAAA,CAAA,EAAA,CAAA;;IACA,CAAA,GAAA,YAES,gBAAA,EAFD,OAAM,MAAK,GAAA;KAAC,SAAA,cAEpB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFoB,gBAAA,SAEpB,EAAA,CAAA,EAAA,CAAA;;;;GAGM,GAAA,GAAA,CAAA,aAAA,CAAA,GAAA,MAAA,SAAA,MAAS,SADjB,UAAA,GAAA,YAee,sBAAA;;IAbJ,YAAA,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,CAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAG,SAOG,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,aAAA,CAAa,CAAC,MAAA,SAAA,GAAW,MAAM,EAAA;IANpD,OAAM;IACN,WAAU;IACV,OAAM;IACN,cAAW;IACX,OAAA;IACA,gBAAA;IAEC,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,CAAY,CAAC,MAAA,SAAA,GAAW,MAAM;;IAE1B,SAAO,cAC8B,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAA9C,mBAA8C,QAAA,EAAxC,OAAM,0BAAyB,GAAC,KAAC,EAAA,CAAA,EAAA,CAAA;;GAG3C,GAAA,GAAA,CAAA,YAAA,CAAA,MAAA,UAAA,GAAA,mBAiBM,OAjBN,YAiBM,EAbJ,UAAA,IAAA,GAAA,mBAYE,UAAA,MAAA,WAXiB,MAAA,KAAA,CAAK,CAAC,MAAf,GAAG,MAAC;IADd,OAAA,UAAA,GAAA,YAYE,sBAAA;KAVC,KAAK;KACL,eAAa,EAAE,SAAQ;KACxB,OAAM;KACN,WAAU;KACV,OAAM;KACL,cAAY,aAAa;KAC1B,OAAA;KACA,gBAAA;KACC,wBAAkB,WAAE,MAAA,aAAA,CAAa,CAAC,MAAA,SAAA,GAAW,QAAQ,CAAC;KACtD,SAAI,WAAE,MAAA,YAAA,CAAY,CAAC,MAAA,SAAA,GAAW,QAAQ,CAAC"}

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

	@@ -1 +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":""}
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' });\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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' });\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 CHANGED Viewed

	@@ -1 +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 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 ? {} : 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":""}
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 } 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,25 +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 { 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 = {
@@ -59,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: () => [] },
@@ -107,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");
@@ -148,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,
@@ -232,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,
@@ -386,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,
@@ -395,16 +393,31 @@ 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()
 				}, {
 					...unref(getNonRootAttrs)(_ctx.$attrs, ["onClick", "class"]),
-					...__props.readonly ? {} : attrs
+					...__props.readonly ? {} : unref(activatorHandlers)(attrs)
 				}, {
 					"data-id": "activator",
 					"aria-invalid": unref(hasError),
@@ -412,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",
@@ -441,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)()),
@@ -452,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()),
@@ -485,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,
@@ -530,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",
@@ -559,7 +560,8 @@ var RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"success-messages",
 				"error-messages",
 				"show-details",
-				"persistent"
+				"persistent",
+				"menu-label"
 			]);
 		};
 	}