@rotki/ui-library 2.15.0 → 2.16.0

package/dist/components/color-picker/utils.js

@@ -1,199 +1,184 @@
-import tinycolor from "tinycolor2";
 import { onUnmounted } from "vue";
+import tinycolor from "tinycolor2";
+//#region src/components/color-picker/utils.ts
+var MAX_HUE = 360;
+var ALPHA_SCALE = 100;
 function roundTwoDecimal(num) {
-  return Math.round(num * 100) / 100;
-}
-class Color {
-  instance;
-  alphaValue = 0;
-  // rgb
-  redValue = 0;
-  greenValue = 0;
-  blueValue = 0;
-  // HSV
-  hueValue = 0;
-  saturationValue = 0;
-  brightnessValue = 0;
-  // HSL
-  hslSaturationValue = 0;
-  lightnessValue = 0;
-  constructor(input) {
-    this.instance = tinycolor(input);
-    this.initRgb();
-    this.initHsb();
-    this.initLightness();
-    this.initAlpha();
-  }
-  initAlpha = () => {
-    const initAlpha = this.instance.getAlpha();
-    this.alphaValue = Math.min(1, initAlpha) * 100;
-  };
-  initLightness = () => {
-    const { l, s } = this.instance.toHsl();
-    this.hslSaturationValue = roundTwoDecimal(s);
-    this.lightnessValue = roundTwoDecimal(l);
-  };
-  initRgb = () => {
-    const { b, g, r } = this.instance.toRgb();
-    this.redValue = roundTwoDecimal(r);
-    this.greenValue = roundTwoDecimal(g);
-    this.blueValue = roundTwoDecimal(b);
-  };
-  initHsb = () => {
-    const { h, s, v } = this.instance.toHsv();
-    this.hueValue = Math.min(360, Math.ceil(h));
-    this.saturationValue = roundTwoDecimal(s);
-    this.brightnessValue = roundTwoDecimal(v);
-  };
-  toString(format) {
-    return this.instance.toString(format);
-  }
-  get hexString() {
-    return this.instance.toHexString();
-  }
-  get hex() {
-    return this.instance.toHex();
-  }
-  set hex(hexString) {
-    this.instance = tinycolor(hexString);
-    this.initHsb();
-    this.initRgb();
-    this.initAlpha();
-    this.initLightness();
-  }
-  set hue(value) {
-    if (this.saturation === 0 && this.brightness === 0) {
-      this.saturationValue = 1;
-      this.brightnessValue = 1;
-    }
-    this.instance = tinycolor({
-      a: this.alphaValue / 100,
-      h: roundTwoDecimal(value),
-      s: this.saturation,
-      v: this.brightness
-    });
-    this.initRgb();
-    this.initLightness();
-    this.hueValue = roundTwoDecimal(value);
-  }
-  get hue() {
-    return this.hueValue;
-  }
-  set saturation(value) {
-    this.instance = tinycolor({
-      a: this.alphaValue / 100,
-      h: this.hue,
-      s: roundTwoDecimal(value),
-      v: this.brightness
-    });
-    this.initRgb();
-    this.initLightness();
-    this.saturationValue = roundTwoDecimal(value);
-  }
-  get saturation() {
-    return this.saturationValue;
-  }
-  set brightness(value) {
-    this.instance = tinycolor({
-      a: this.alphaValue / 100,
-      h: this.hue,
-      s: this.saturation,
-      v: roundTwoDecimal(value)
-    });
-    this.initRgb();
-    this.initLightness();
-    this.brightnessValue = roundTwoDecimal(value);
-  }
-  get brightness() {
-    return this.brightnessValue;
-  }
-  set red(value) {
-    const rgb = this.instance.toRgb();
-    this.instance = tinycolor({
-      ...rgb,
-      a: this.alphaValue / 100,
-      r: roundTwoDecimal(value)
-    });
-    this.initHsb();
-    this.initLightness();
-    this.redValue = roundTwoDecimal(value);
-  }
-  get red() {
-    return this.redValue;
-  }
-  set green(value) {
-    const rgb = this.instance.toRgb();
-    this.instance = tinycolor({
-      ...rgb,
-      a: this.alphaValue / 100,
-      g: roundTwoDecimal(value)
-    });
-    this.initHsb();
-    this.initLightness();
-    this.greenValue = roundTwoDecimal(value);
-  }
-  get green() {
-    return this.greenValue;
-  }
-  set blue(value) {
-    const rgb = this.instance.toRgb();
-    this.instance = tinycolor({
-      ...rgb,
-      a: this.alphaValue / 100,
-      b: roundTwoDecimal(value)
-    });
-    this.initHsb();
-    this.initLightness();
-    this.blueValue = roundTwoDecimal(value);
-  }
-  get blue() {
-    return this.blueValue;
-  }
-  get rgb() {
-    return [this.red, this.green, this.blue];
-  }
+	return Math.round(num * 100) / 100;
 }
+var Color = class {
+	instance;
+	alphaValue = 0;
+	redValue = 0;
+	greenValue = 0;
+	blueValue = 0;
+	hueValue = 0;
+	saturationValue = 0;
+	brightnessValue = 0;
+	constructor(input) {
+		this.instance = tinycolor(input);
+		this.initRgb();
+		this.initHsb();
+		this.initAlpha();
+	}
+	initAlpha() {
+		const initAlpha = this.instance.getAlpha();
+		this.alphaValue = Math.min(1, initAlpha) * ALPHA_SCALE;
+	}
+	initRgb() {
+		const { b, g, r } = this.instance.toRgb();
+		this.redValue = roundTwoDecimal(r);
+		this.greenValue = roundTwoDecimal(g);
+		this.blueValue = roundTwoDecimal(b);
+	}
+	initHsb() {
+		const { h, s, v } = this.instance.toHsv();
+		this.hueValue = Math.min(MAX_HUE, Math.ceil(h));
+		this.saturationValue = roundTwoDecimal(s);
+		this.brightnessValue = roundTwoDecimal(v);
+	}
+	updateFromHsv(h, s, v) {
+		this.instance = tinycolor({
+			a: this.alphaValue / ALPHA_SCALE,
+			h: roundTwoDecimal(h),
+			s: roundTwoDecimal(s),
+			v: roundTwoDecimal(v)
+		});
+		this.initRgb();
+	}
+	updateFromRgb(r, g, b) {
+		this.instance = tinycolor({
+			a: this.alphaValue / ALPHA_SCALE,
+			r: roundTwoDecimal(r),
+			g: roundTwoDecimal(g),
+			b: roundTwoDecimal(b)
+		});
+		this.initHsb();
+	}
+	toString(format) {
+		return this.instance.toString(format);
+	}
+	get hexString() {
+		return this.instance.toHexString();
+	}
+	get hex() {
+		return this.instance.toHex();
+	}
+	set hex(hexString) {
+		this.instance = tinycolor(hexString);
+		this.initHsb();
+		this.initRgb();
+		this.initAlpha();
+	}
+	set hue(value) {
+		if (this.saturation === 0 && this.brightness === 0) {
+			this.saturationValue = 1;
+			this.brightnessValue = 1;
+		}
+		this.updateFromHsv(value, this.saturation, this.brightness);
+		this.hueValue = roundTwoDecimal(value);
+	}
+	get hue() {
+		return this.hueValue;
+	}
+	set saturation(value) {
+		this.updateFromHsv(this.hue, value, this.brightness);
+		this.saturationValue = roundTwoDecimal(value);
+	}
+	get saturation() {
+		return this.saturationValue;
+	}
+	set brightness(value) {
+		this.updateFromHsv(this.hue, this.saturation, value);
+		this.brightnessValue = roundTwoDecimal(value);
+	}
+	get brightness() {
+		return this.brightnessValue;
+	}
+	set red(value) {
+		this.updateFromRgb(value, this.green, this.blue);
+		this.redValue = roundTwoDecimal(value);
+	}
+	get red() {
+		return this.redValue;
+	}
+	set green(value) {
+		this.updateFromRgb(this.red, value, this.blue);
+		this.greenValue = roundTwoDecimal(value);
+	}
+	get green() {
+		return this.greenValue;
+	}
+	set blue(value) {
+		this.updateFromRgb(this.red, this.green, value);
+		this.blueValue = roundTwoDecimal(value);
+	}
+	get blue() {
+		return this.blueValue;
+	}
+	get rgb() {
+		return [
+			this.red,
+			this.green,
+			this.blue
+		];
+	}
+};
 function useElementDrag(handler) {
-  let rafId = null;
-  function handleClick(e) {
-    if (rafId !== null)
-      return;
-    rafId = requestAnimationFrame(() => {
-      handler(e.clientX, e.clientY);
-      rafId = null;
-    });
-  }
-  function cancelRaf() {
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId);
-      rafId = null;
-    }
-  }
-  function onMouseDown(e) {
-    e.preventDefault();
-    if (typeof window !== "undefined") {
-      window.addEventListener("mousemove", handleClick);
-      window.addEventListener("mouseup", handleMouseUp);
-    }
-  }
-  function handleMouseUp() {
-    cancelRaf();
-    if (typeof window !== "undefined") {
-      window.removeEventListener("mousemove", handleClick);
-      window.removeEventListener("mouseup", handleMouseUp);
-    }
-  }
-  onUnmounted(() => {
-    handleMouseUp();
-  });
-  return {
-    handleClick,
-    onMouseDown
-  };
+	let rafId = null;
+	function handleClick(e) {
+		if (rafId !== null) return;
+		rafId = requestAnimationFrame(() => {
+			handler(e.clientX, e.clientY);
+			rafId = null;
+		});
+	}
+	function handleTouchMove(e) {
+		e.preventDefault();
+		const touch = e.touches[0];
+		if (touch) handleClick(touch);
+	}
+	function cancelRaf() {
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	}
+	function cleanup() {
+		cancelRaf();
+		if (typeof window !== "undefined") {
+			window.removeEventListener("mousemove", handleClick);
+			window.removeEventListener("mouseup", cleanup);
+			window.removeEventListener("touchmove", handleTouchMove);
+			window.removeEventListener("touchend", cleanup);
+		}
+	}
+	function onMouseDown(e) {
+		e.preventDefault();
+		if (typeof window !== "undefined") {
+			window.addEventListener("mousemove", handleClick);
+			window.addEventListener("mouseup", cleanup);
+		}
+	}
+	function onTouchStart(e) {
+		e.preventDefault();
+		const touch = e.touches[0];
+		if (touch) handleClick(touch);
+		if (typeof window !== "undefined") {
+			window.addEventListener("touchmove", handleTouchMove, { passive: false });
+			window.addEventListener("touchend", cleanup);
+		}
+	}
+	onUnmounted(() => {
+		cleanup();
+	});
+	return {
+		handleClick,
+		onMouseDown,
+		onTouchStart
+	};
 }
-export {
-  Color,
-  roundTwoDecimal,
-  useElementDrag
-};
-//# sourceMappingURL=utils.js.map
+//#endregion
+export { Color, roundTwoDecimal, useElementDrag };
+
+//# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/color-picker/utils.ts"],"sourcesContent":["import tinycolor, { type ColorInput } from 'tinycolor2';\n\nexport type ColorFormat = 'rgb' | 'hex';\n\nexport function roundTwoDecimal(num: number) {\n  return Math.round(num * 100) / 100;\n}\n\nexport class Color {\n  instance: tinycolor.Instance;\n  alphaValue = 0;\n\n  // rgb\n  redValue = 0;\n  greenValue = 0;\n  blueValue = 0;\n\n  // HSV\n  hueValue = 0;\n  saturationValue = 0;\n  brightnessValue = 0;\n\n  // HSL\n  hslSaturationValue = 0;\n  lightnessValue = 0;\n\n  constructor(input?: ColorInput) {\n    this.instance = tinycolor(input);\n\n    this.initRgb();\n    this.initHsb();\n    this.initLightness();\n    this.initAlpha();\n  }\n\n  initAlpha = () => {\n    const initAlpha = this.instance.getAlpha();\n    this.alphaValue = Math.min(1, initAlpha) * 100;\n  };\n\n  initLightness = () => {\n    const { l, s } = this.instance.toHsl();\n    this.hslSaturationValue = roundTwoDecimal(s);\n    this.lightnessValue = roundTwoDecimal(l);\n  };\n\n  initRgb = () => {\n    const { b, g, r } = this.instance.toRgb();\n\n    this.redValue = roundTwoDecimal(r);\n    this.greenValue = roundTwoDecimal(g);\n    this.blueValue = roundTwoDecimal(b);\n  };\n\n  initHsb = () => {\n    const { h, s, v } = this.instance.toHsv();\n\n    this.hueValue = Math.min(360, Math.ceil(h));\n    this.saturationValue = roundTwoDecimal(s);\n    this.brightnessValue = roundTwoDecimal(v);\n  };\n\n  toString(format?: ColorFormat) {\n    return this.instance.toString(format);\n  }\n\n  get hexString() {\n    return this.instance.toHexString();\n  };\n\n  get hex() {\n    return this.instance.toHex();\n  }\n\n  set hex(hexString: string) {\n    this.instance = tinycolor(hexString);\n    this.initHsb();\n    this.initRgb();\n    this.initAlpha();\n    this.initLightness();\n  }\n\n  set hue(value: number) {\n    if (this.saturation === 0 && this.brightness === 0) {\n      this.saturationValue = 1;\n      this.brightnessValue = 1;\n    }\n    this.instance = tinycolor({\n      a: this.alphaValue / 100,\n      h: roundTwoDecimal(value),\n      s: this.saturation,\n      v: this.brightness,\n    });\n\n    this.initRgb();\n    this.initLightness();\n    this.hueValue = roundTwoDecimal(value);\n  }\n\n  get hue() {\n    return this.hueValue;\n  }\n\n  set saturation(value: number) {\n    this.instance = tinycolor({\n      a: this.alphaValue / 100,\n      h: this.hue,\n      s: roundTwoDecimal(value),\n      v: this.brightness,\n    });\n\n    this.initRgb();\n    this.initLightness();\n    this.saturationValue = roundTwoDecimal(value);\n  }\n\n  get saturation() {\n    return this.saturationValue;\n  }\n\n  set brightness(value: number) {\n    this.instance = tinycolor({\n      a: this.alphaValue / 100,\n      h: this.hue,\n      s: this.saturation,\n      v: roundTwoDecimal(value),\n    });\n\n    this.initRgb();\n    this.initLightness();\n    this.brightnessValue = roundTwoDecimal(value);\n  }\n\n  get brightness() {\n    return this.brightnessValue;\n  }\n\n  set red(value: number) {\n    const rgb = this.instance.toRgb();\n    this.instance = tinycolor({\n      ...rgb,\n      a: this.alphaValue / 100,\n      r: roundTwoDecimal(value),\n    });\n\n    this.initHsb();\n    this.initLightness();\n    this.redValue = roundTwoDecimal(value);\n  }\n\n  get red() {\n    return this.redValue;\n  }\n\n  set green(value: number) {\n    const rgb = this.instance.toRgb();\n    this.instance = tinycolor({\n      ...rgb,\n      a: this.alphaValue / 100,\n      g: roundTwoDecimal(value),\n    });\n\n    this.initHsb();\n    this.initLightness();\n    this.greenValue = roundTwoDecimal(value);\n  }\n\n  get green() {\n    return this.greenValue;\n  }\n\n  set blue(value: number) {\n    const rgb = this.instance.toRgb();\n    this.instance = tinycolor({\n      ...rgb,\n      a: this.alphaValue / 100,\n      b: roundTwoDecimal(value),\n    });\n\n    this.initHsb();\n    this.initLightness();\n    this.blueValue = roundTwoDecimal(value);\n  }\n\n  get blue() {\n    return this.blueValue;\n  }\n\n  get rgb(): [number, number, number] {\n    return [this.red, this.green, this.blue];\n  }\n}\n\nexport function useElementDrag(handler: (x: number, y: number) => any) {\n  let rafId: number | null = null;\n\n  function handleClick(e: { clientX: number; clientY: number }): void {\n    if (rafId !== null)\n      return;\n\n    rafId = requestAnimationFrame(() => {\n      handler(e.clientX, e.clientY);\n      rafId = null;\n    });\n  }\n\n  function cancelRaf(): void {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n  }\n\n  function onMouseDown(e: MouseEvent): void {\n    e.preventDefault();\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('mousemove', handleClick);\n      window.addEventListener('mouseup', handleMouseUp);\n    }\n  }\n\n  function handleMouseUp(): void {\n    cancelRaf();\n    if (typeof window !== 'undefined') {\n      window.removeEventListener('mousemove', handleClick);\n      window.removeEventListener('mouseup', handleMouseUp);\n    }\n  }\n\n  onUnmounted(() => {\n    handleMouseUp();\n  });\n\n  return {\n    handleClick,\n    onMouseDown,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/color-picker/utils.ts"],"sourcesContent":["import tinycolor, { type ColorInput } from 'tinycolor2';\n\nexport type ColorFormat = 'rgb' | 'hex';\n\nconst MAX_HUE = 360;\nconst ALPHA_SCALE = 100;\n\nexport function roundTwoDecimal(num: number): number {\n  return Math.round(num * 100) / 100;\n}\n\nexport class Color {\n  instance: tinycolor.Instance;\n  alphaValue = 0;\n\n  // rgb\n  redValue = 0;\n  greenValue = 0;\n  blueValue = 0;\n\n  // HSV\n  hueValue = 0;\n  saturationValue = 0;\n  brightnessValue = 0;\n\n  constructor(input?: ColorInput) {\n    this.instance = tinycolor(input);\n\n    this.initRgb();\n    this.initHsb();\n    this.initAlpha();\n  }\n\n  initAlpha(): void {\n    const initAlpha = this.instance.getAlpha();\n    this.alphaValue = Math.min(1, initAlpha) * ALPHA_SCALE;\n  }\n\n  initRgb(): void {\n    const { b, g, r } = this.instance.toRgb();\n\n    this.redValue = roundTwoDecimal(r);\n    this.greenValue = roundTwoDecimal(g);\n    this.blueValue = roundTwoDecimal(b);\n  }\n\n  initHsb(): void {\n    const { h, s, v } = this.instance.toHsv();\n\n    this.hueValue = Math.min(MAX_HUE, Math.ceil(h));\n    this.saturationValue = roundTwoDecimal(s);\n    this.brightnessValue = roundTwoDecimal(v);\n  }\n\n  updateFromHsv(h: number, s: number, v: number): void {\n    this.instance = tinycolor({\n      a: this.alphaValue / ALPHA_SCALE,\n      h: roundTwoDecimal(h),\n      s: roundTwoDecimal(s),\n      v: roundTwoDecimal(v),\n    });\n    this.initRgb();\n  }\n\n  updateFromRgb(r: number, g: number, b: number): void {\n    this.instance = tinycolor({\n      a: this.alphaValue / ALPHA_SCALE,\n      r: roundTwoDecimal(r),\n      g: roundTwoDecimal(g),\n      b: roundTwoDecimal(b),\n    });\n    this.initHsb();\n  }\n\n  toString(format?: ColorFormat): string {\n    return this.instance.toString(format);\n  }\n\n  get hexString(): string {\n    return this.instance.toHexString();\n  }\n\n  get hex(): string {\n    return this.instance.toHex();\n  }\n\n  set hex(hexString: string) {\n    this.instance = tinycolor(hexString);\n    this.initHsb();\n    this.initRgb();\n    this.initAlpha();\n  }\n\n  set hue(value: number) {\n    if (this.saturation === 0 && this.brightness === 0) {\n      this.saturationValue = 1;\n      this.brightnessValue = 1;\n    }\n    this.updateFromHsv(value, this.saturation, this.brightness);\n    this.hueValue = roundTwoDecimal(value);\n  }\n\n  get hue(): number {\n    return this.hueValue;\n  }\n\n  set saturation(value: number) {\n    this.updateFromHsv(this.hue, value, this.brightness);\n    this.saturationValue = roundTwoDecimal(value);\n  }\n\n  get saturation(): number {\n    return this.saturationValue;\n  }\n\n  set brightness(value: number) {\n    this.updateFromHsv(this.hue, this.saturation, value);\n    this.brightnessValue = roundTwoDecimal(value);\n  }\n\n  get brightness(): number {\n    return this.brightnessValue;\n  }\n\n  set red(value: number) {\n    this.updateFromRgb(value, this.green, this.blue);\n    this.redValue = roundTwoDecimal(value);\n  }\n\n  get red(): number {\n    return this.redValue;\n  }\n\n  set green(value: number) {\n    this.updateFromRgb(this.red, value, this.blue);\n    this.greenValue = roundTwoDecimal(value);\n  }\n\n  get green(): number {\n    return this.greenValue;\n  }\n\n  set blue(value: number) {\n    this.updateFromRgb(this.red, this.green, value);\n    this.blueValue = roundTwoDecimal(value);\n  }\n\n  get blue(): number {\n    return this.blueValue;\n  }\n\n  get rgb(): [number, number, number] {\n    return [this.red, this.green, this.blue];\n  }\n}\n\ntype DragHandler = (x: number, y: number) => void;\n\ninterface DragEvents {\n  handleClick: (e: { clientX: number; clientY: number }) => void;\n  onMouseDown: (e: MouseEvent) => void;\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport function useElementDrag(handler: DragHandler): DragEvents {\n  let rafId: number | null = null;\n\n  function handleClick(e: { clientX: number; clientY: number }): void {\n    if (rafId !== null)\n      return;\n\n    rafId = requestAnimationFrame(() => {\n      handler(e.clientX, e.clientY);\n      rafId = null;\n    });\n  }\n\n  function handleTouchMove(e: TouchEvent): void {\n    e.preventDefault();\n    const touch = e.touches[0];\n    if (touch)\n      handleClick(touch);\n  }\n\n  function cancelRaf(): void {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n  }\n\n  function cleanup(): void {\n    cancelRaf();\n    if (typeof window !== 'undefined') {\n      window.removeEventListener('mousemove', handleClick);\n      window.removeEventListener('mouseup', cleanup);\n      window.removeEventListener('touchmove', handleTouchMove);\n      window.removeEventListener('touchend', cleanup);\n    }\n  }\n\n  function onMouseDown(e: MouseEvent): void {\n    e.preventDefault();\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('mousemove', handleClick);\n      window.addEventListener('mouseup', cleanup);\n    }\n  }\n\n  function onTouchStart(e: TouchEvent): void {\n    e.preventDefault();\n    const touch = e.touches[0];\n    if (touch)\n      handleClick(touch);\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('touchmove', handleTouchMove, { passive: false });\n      window.addEventListener('touchend', cleanup);\n    }\n  }\n\n  onUnmounted(() => {\n    cleanup();\n  });\n\n  return {\n    handleClick,\n    onMouseDown,\n    onTouchStart,\n  };\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default from "./RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/date-time-picker/RuiDateTimePicker.vue
+var RuiDateTimePicker_default = RuiDateTimePicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiDateTimePicker_default as default };
+
+//# sourceMappingURL=RuiDateTimePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { 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 { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\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\ndefineOptions({\n  name: 'RuiDateTimePicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<ModelValueType<DateTimeModelType>>({ required: true });\n\nconst {\n  disabled = false,\n  readonly = false,\n  allowEmpty = false,\n  dense = false,\n  type = 'epoch-ms',\n  hideDetails = false,\n  label = 'Pick a date',\n  variant = 'default',\n  hint,\n  maxDate,\n  minDate,\n  format = 'day-first',\n  accuracy = 'minute',\n  errorMessages = [],\n  successMessages = [],\n  required = false,\n} = defineProps<RuiDateTimePickerProps>();\n\ndefineSlots<{\n  'menu-content': () => any;\n}>();\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 cursorPosition = ref<number>(0);\nconst currentValue = ref<number>();\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('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 {\n  clear: clearSelection,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  selectedDay,\n  selectedHour,\n  selectedMillisecond,\n  selectedMinute,\n  selectedMonth,\n  selectedSecond,\n  selectedTime,\n  selectedTimezone,\n  selectedYear,\n  setNow,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy,\n  allowEmpty,\n  maxDate,\n  minDate,\n  modelValue,\n  type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\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: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\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});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst isOutlined = computed<boolean>(() => variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 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\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) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof dateTimePickerStyles>>(() => dateTimePickerStyles({\n  filled: variant === 'filled',\n  outlined: get(isOutlined),\n  float: get(float),\n  opened: get(isOpen),\n  dense,\n  disabled,\n  readonly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  if (!errorMessages)\n    return get(internalErrorMessages);\n\n  const propErrors = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  return [...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\nfunction handleInputClick(event: MouseEvent): void {\n  // Handle segment selection first, before any DOM changes from menu opening\n  handleClick(event);\n  // Open menu if not already open\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"getRootAttrs($attrs)\"\n    :class=\"ui.wrapper()\"\n    placement=\"bottom-start\"\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        :tabindex=\"disabled || readonly ? -1 : 0\"\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          {{ label }}\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            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"handleBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"handleKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\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          tabindex=\"-1\"\n          color=\"error\"\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        <span\n          :class=\"ui.iconWrapper()\"\n          data-id=\"append\"\n          @click=\"arrowClicked($event)\"\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=\"selectedHour\"\n        v-model:selected-minute=\"selectedMinute\"\n        v-model:selected-second=\"selectedSecond\"\n        v-model:selected-millisecond=\"selectedMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"selectedTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        @set-now=\"setNow()\"\n      >\n        <slot name=\"menu-content\" />\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}

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

@@ -1,3 +1,4 @@
+import { type DateTimePickerVariant } from '../../components/date-time-picker/date-time-picker-styles.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;
@@ -12,7 +13,7 @@ export interface RuiDateTimePickerProps {
     readonly?: boolean;
     dense?: boolean;
     label?: string;
-    variant?: 'default' | 'filled' | 'outlined';
+    variant?: DateTimePickerVariant;
     hint?: string;
     errorMessages?: string | string[];
     successMessages?: string | string[];