@rotki/ui-library 2.12.1 → 2.13.0

package/dist/components/color-picker/RuiColorBoard.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent, reactive, ref, computed, getCurrentInstance, onMounted, createElementBlock, openBlock, mergeProps, unref, createElementVNode, normalizeClass, normalizeStyle } from "vue";
+import { defineComponent, useTemplateRef, reactive, ref, getCurrentInstance, computed, onMounted, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, normalizeStyle } from "vue";
 import { get, set, clamp } from "@vueuse/shared";
 import { useElementDrag, Color } from "./utils.js";
 import { whenever } from "@vueuse/core";
+const _hoisted_1 = ["aria-valuetext"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiColorBoard",
@@ -13,32 +14,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:board"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
-    function hueToHex(hue) {
-      return new Color({ h: hue, s: 1, v: 1 }).hexString;
-    }
+    const wrapper = useTemplateRef("wrapper");
     const state = reactive({
-      hexString: hueToHex(props.color.hue),
-      saturation: props.color.saturation,
-      brightness: props.color.brightness
+      hexString: hueToHex(__props.color.hue),
+      saturation: __props.color.saturation,
+      brightness: __props.color.brightness
     });
     const cursorTop = ref(0);
     const cursorLeft = ref(0);
+    const instance = getCurrentInstance();
+    const { handleClick, onMouseDown } = useElementDrag(emitColor);
     const cursorStyle = computed(() => ({
       top: `${get(cursorTop) * 100}%`,
       left: `${get(cursorLeft) * 100}%`
     }));
-    const wrapper = ref();
+    function hueToHex(hue) {
+      return new Color({ h: hue, s: 1, v: 1 }).hexString;
+    }
     function updatePosition() {
       set(cursorLeft, state.saturation);
       set(cursorTop, 1 - state.brightness);
     }
-    const instance = getCurrentInstance();
-    const {
-      handleClick,
-      onMouseDown
-    } = useElementDrag(emitColor);
     function emitColor(x, y) {
       if (!instance)
         return;
@@ -59,11 +56,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       state.brightness = brightness;
       emit("update:board", { saturation, brightness });
     }
-    onMounted(() => {
-      updatePosition();
-    });
     whenever(
-      () => props.color,
+      () => __props.color,
       (value) => {
         state.hexString = hueToHex(value.hue);
         state.saturation = value.saturation;
@@ -72,10 +66,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { deep: true }
     );
+    onMounted(() => {
+      updatePosition();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "wrapper",
         ref: wrapper,
+        role: "slider",
+        "aria-label": "Color saturation and brightness",
+        "aria-valuetext": `Saturation ${Math.round(unref(state).saturation * 100)}%, Brightness ${Math.round(unref(state).brightness * 100)}%`,
         class: ["rui-color-board", _ctx.$style.saturation]
       }, _ctx.$attrs, {
         style: { backgroundColor: unref(state).hexString },
@@ -92,7 +92,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.cursor),
           style: normalizeStyle(unref(cursorStyle))
         }, null, 6)
-      ], 16);
+      ], 16, _hoisted_1);
     };
   }
 });

package/dist/components/color-picker/RuiColorBoard.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.vue2.js","sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst props = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'update:board', event: { saturation: number; brightness: number }): void;\n}>();\n\nfunction hueToHex(hue: number) {\n  return new Color({ h: hue, s: 1, v: 1 }).hexString;\n}\n\nconst state = reactive({\n  hexString: hueToHex(props.color.hue),\n  saturation: props.color.saturation,\n  brightness: props.color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst cursorStyle = computed(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nconst wrapper = ref<HTMLElement>();\n\nfunction updatePosition() {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, (1 - state.brightness));\n}\n\nconst instance = getCurrentInstance();\n\nconst {\n  handleClick,\n  onMouseDown,\n} = useElementDrag(emitColor);\n\nfunction emitColor(x: number, y: number) {\n  if (!instance)\n    return;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return;\n\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nonMounted(() => {\n  updatePosition();\n});\n\nwhenever(\n  () => props.color,\n  (value) => {\n    state.hexString = hueToHex(value.hue);\n    state.saturation = value.saturation;\n    state.brightness = value.brightness;\n    updatePosition();\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    class=\"rui-color-board\"\n    :class=\"$style.saturation\"\n    v-bind=\"$attrs\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n  >\n    <div :class=\"$style.saturation__white\" />\n    <div :class=\"$style.saturation__black\" />\n    <div\n      :class=\"$style.cursor\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.saturation {\n  @apply relative w-full h-40 overflow-hidden cursor-pointer;\n\n  &__white,\n  &__black {\n    @apply absolute top-0 left-0 right-0 bottom-0 to-transparent;\n  }\n\n  &__black {\n    @apply bg-gradient-to-t from-black;\n  }\n\n  &__white {\n    @apply bg-gradient-to-r from-white;\n  }\n}\n\n.cursor {\n  @apply absolute w-5 h-5 transform -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full;\n\n  &:after {\n    content: '';\n    @apply absolute w-full h-full rounded-full border-2 border-black/15;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_unref","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;AASA,UAAM,QAAQ;AAId,UAAM,OAAO;AAIb,aAAS,SAAS,KAAa;AAC7B,aAAO,IAAI,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,EAAA,CAAG,EAAE;AAAA,IAC3C;AAEA,UAAM,QAAQ,SAAS;AAAA,MACrB,WAAW,SAAS,MAAM,MAAM,GAAG;AAAA,MACnC,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,MAAM;AAAA,IAAA,CACzB;AAED,UAAM,YAAY,IAAY,CAAC;AAC/B,UAAM,aAAa,IAAY,CAAC;AAEhC,UAAM,cAAc,SAAS,OAAO;AAAA,MAClC,KAAK,GAAG,IAAI,SAAS,IAAI,GAAG;AAAA,MAC5B,MAAM,GAAG,IAAI,UAAU,IAAI,GAAG;AAAA,IAAA,EAC9B;AAEF,UAAM,UAAU,IAAA;AAEhB,aAAS,iBAAiB;AACxB,UAAI,YAAY,MAAM,UAAU;AAChC,UAAI,WAAY,IAAI,MAAM,UAAW;AAAA,IACvC;AAEA,UAAM,WAAW,mBAAA;AAEjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IAAA,IACE,eAAe,SAAS;AAE5B,aAAS,UAAU,GAAW,GAAW;AACvC,UAAI,CAAC;AACH;AAEF,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH;AAEF,YAAM,EAAE,OAAO,QAAQ,MAAM,QAAQ;AACrC,UAAI,cAAc,IAAI;AACtB,UAAI,cAAc,IAAI;AAEtB,oBAAc,MAAM,aAAa,GAAG,KAAK;AACzC,oBAAc,MAAM,aAAa,GAAG,MAAM;AAE1C,YAAM,aAAa,cAAc;AACjC,YAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,CAAC;AAE1D,UAAI,YAAY,cAAc,KAAK;AACnC,UAAI,WAAW,cAAc,MAAM;AAEnC,YAAM,aAAa;AACnB,YAAM,aAAa;AAEnB,WAAK,gBAAgB,EAAE,YAAY,WAAA,CAAY;AAAA,IACjD;AAEA,cAAU,MAAM;AACd,qBAAA;AAAA,IACF,CAAC;AAED;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,UAAU;AACT,cAAM,YAAY,SAAS,MAAM,GAAG;AACpC,cAAM,aAAa,MAAM;AACzB,cAAM,aAAa,MAAM;AACzB,uBAAA;AAAA,MACF;AAAA,MACA,EAAE,MAAM,KAAA;AAAA,IAAK;;AAKb,aAAAA,UAAA,GAAAC,mBAeM,OAfNC,WAeM;AAAA,iBAdA;AAAA,QAAJ,KAAI;AAAA,QACJ,OAAK,CAAC,mBACEC,KAAAA,OAAO,UAAU;AAAA,MAAA,GACjBC,KAAAA,QAAM;AAAA,QACb,OAAK,EAAA,iBAAqBC,MAAA,KAAA,EAAM,UAAA;AAAA,QAChC,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,WAAA,EAAY,MAAM;AAAA,QACzB,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,WAAA,EAAY,MAAM;AAAA,MAAA;QAE9BC,mBAAyC,OAAA;AAAA,UAAnC,OAAKC,eAAEJ,KAAAA,OAAO,iBAAiB;AAAA,QAAA;QACrCG,mBAAyC,OAAA;AAAA,UAAnC,OAAKC,eAAEJ,KAAAA,OAAO,iBAAiB;AAAA,QAAA;QACrCG,mBAGE,OAAA;AAAA,UAFC,OAAKC,eAAEJ,KAAAA,OAAO,MAAM;AAAA,UACpB,sBAAOE,MAAA,WAAA,CAAW;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiColorBoard.vue2.js","sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst instance = getCurrentInstance();\n\nconst { handleClick, onMouseDown } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return new Color({ h: hue, s: 1, v: 1 }).hexString;\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  if (!instance)\n    return;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return;\n\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwhenever(\n  () => color,\n  (value) => {\n    state.hexString = hueToHex(value.hue);\n    state.saturation = value.saturation;\n    state.brightness = value.brightness;\n    updatePosition();\n  },\n  { deep: true },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    class=\"rui-color-board\"\n    :class=\"$style.saturation\"\n    v-bind=\"$attrs\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n  >\n    <div :class=\"$style.saturation__white\" />\n    <div :class=\"$style.saturation__black\" />\n    <div\n      :class=\"$style.cursor\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.saturation {\n  @apply relative w-full h-40 overflow-hidden cursor-pointer;\n\n  &__white,\n  &__black {\n    @apply absolute top-0 left-0 right-0 bottom-0 to-transparent;\n  }\n\n  &__black {\n    @apply bg-gradient-to-t from-black;\n  }\n\n  &__white {\n    @apply bg-gradient-to-r from-white;\n  }\n}\n\n.cursor {\n  @apply absolute w-5 h-5 transform -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full;\n\n  &:after {\n    content: '';\n    @apply absolute w-full h-full rounded-full border-2 border-black/15;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_unref","$style","$attrs","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/components/color-picker/RuiColorDisplay.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, createBlock, openBlock, mergeProps, withCtx, createElementVNode, createElementBlock, createCommentVNode, normalizeClass, unref, normalizeStyle } from "vue";
+import { defineComponent, toRef, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, unref, createElementBlock, createCommentVNode, normalizeStyle } from "vue";
 import RuiTooltip from "../overlays/tooltip/RuiTooltip.vue.js";
 import { useClipboard } from "@vueuse/core";
 const _hoisted_1 = {
@@ -15,9 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     color: {}
   },
   setup(__props) {
-    const props = __props;
-    const { color } = toRefs(props);
-    const { copy, copied } = useClipboard({ source: color });
+    const { copy, copied } = useClipboard({ source: toRef(() => __props.color) });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(RuiTooltip, mergeProps({
         popper: { placement: "top" },
@@ -28,7 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: "w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer",
             "data-cy": "color-display",
-            style: normalizeStyle({ background: unref(color) }),
+            style: normalizeStyle({ background: __props.color }),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)())
           }, null, 4)
         ]),

package/dist/components/color-picker/RuiColorDisplay.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorDisplay.vue.js","sources":["../../../src/components/color-picker/RuiColorDisplay.vue"],"sourcesContent":["<script setup lang='ts'>\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\n\ndefineOptions({\n  name: 'RuiColorDisplay',\n  inheritAttrs: false,\n});\n\nconst props = defineProps<{\n  color: string;\n}>();\n\nconst { color } = toRefs(props);\n\nconst { copy, copied } = useClipboard({ source: color });\n</script>\n\n<template>\n  <RuiTooltip\n    :popper=\"{ placement: 'top' }\"\n    :close-delay=\"400\"\n    tooltip-class=\"text-center\"\n    v-bind=\"$attrs\"\n  >\n    <template #activator>\n      <div\n        class=\"w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer\"\n        data-cy=\"color-display\"\n        :style=\"{ background: color }\"\n        @click=\"copy()\"\n      />\n    </template>\n    <div :class=\"{ 'h-0 overflow-hidden': copied }\">\n      Click to copy\n    </div>\n    <div\n      v-if=\"copied\"\n      class=\"text-rui-success\"\n    >\n      COPIED!\n    </div>\n  </RuiTooltip>\n</template>\n"],"names":["_openBlock","_createBlock","_mergeProps","$attrs","_createElementVNode","_unref","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;;AAQA,UAAM,QAAQ;AAId,UAAM,EAAE,MAAA,IAAU,OAAO,KAAK;AAE9B,UAAM,EAAE,MAAM,OAAA,IAAW,aAAa,EAAE,QAAQ,OAAO;;AAIrD,aAAAA,UAAA,GAAAC,YAuBa,YAvBbC,WAuBa;AAAA,QAtBV,QAAQ,EAAA,WAAA,MAAA;AAAA,QACR,eAAa;AAAA,QACd,iBAAc;AAAA,MAAA,GACNC,KAAAA,MAAM,GAAA;AAAA,QAEH,mBACT,MAKE;AAAA,UALFC,mBAKE,OAAA;AAAA,YAJA,OAAM;AAAA,YACN,WAAQ;AAAA,YACP,oCAAqBC,MAAA,KAAA,GAAK;AAAA,YAC1B,+CAAOA,MAAA,IAAA,EAAA;AAAA,UAAI;;yBAGhB,MAEM;AAAA,UAFND,mBAEM,OAAA;AAAA,YAFA,+CAAgCC,MAAA,MAAA,GAAM;AAAA,UAAA,GAAI,mBAEhD,CAAA;AAAA,UAEQA,MAAA,MAAA,kBADRC,mBAKM,OALN,YAGC,WAED;;;;;;;"}
+{"version":3,"file":"RuiColorDisplay.vue.js","sources":["../../../src/components/color-picker/RuiColorDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\n\ndefineOptions({\n  name: 'RuiColorDisplay',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: string;\n}>();\n\nconst { copy, copied } = useClipboard({ source: toRef(() => color) });\n</script>\n\n<template>\n  <RuiTooltip\n    :popper=\"{ placement: 'top' }\"\n    :close-delay=\"400\"\n    tooltip-class=\"text-center\"\n    v-bind=\"$attrs\"\n  >\n    <template #activator>\n      <div\n        class=\"w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer\"\n        data-cy=\"color-display\"\n        :style=\"{ background: color }\"\n        @click=\"copy()\"\n      />\n    </template>\n    <div :class=\"{ 'h-0 overflow-hidden': copied }\">\n      Click to copy\n    </div>\n    <div\n      v-if=\"copied\"\n      class=\"text-rui-success\"\n    >\n      COPIED!\n    </div>\n  </RuiTooltip>\n</template>\n"],"names":["_openBlock","_createBlock","_mergeProps","$attrs","_createElementVNode","_unref","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;;AAYA,UAAM,EAAE,MAAM,OAAA,IAAW,aAAa,EAAE,QAAQ,MAAM,MAAM,QAAA,KAAK,GAAG;;AAIlE,aAAAA,UAAA,GAAAC,YAuBa,YAvBbC,WAuBa;AAAA,QAtBV,QAAQ,EAAA,WAAA,MAAA;AAAA,QACR,eAAa;AAAA,QACd,iBAAc;AAAA,MAAA,GACNC,KAAAA,MAAM,GAAA;AAAA,QAEH,mBACT,MAKE;AAAA,UALFC,mBAKE,OAAA;AAAA,YAJA,OAAM;AAAA,YACN,WAAQ;AAAA,YACP,oCAAqB,QAAA,OAAK;AAAA,YAC1B,+CAAOC,MAAA,IAAA,EAAA;AAAA,UAAI;;yBAGhB,MAEM;AAAA,UAFND,mBAEM,OAAA;AAAA,YAFA,+CAAgCC,MAAA,MAAA,GAAM;AAAA,UAAA,GAAI,mBAEhD,CAAA;AAAA,UAEQA,MAAA,MAAA,kBADRC,mBAKM,OALN,YAGC,WAED;;;;;;;"}

package/dist/components/color-picker/RuiColorHue.vue2.js

@@ -1,6 +1,7 @@
-import { defineComponent, useModel, ref, computed, getCurrentInstance, onMounted, watch, createElementBlock, openBlock, mergeProps, unref, createElementVNode, normalizeStyle, normalizeClass } from "vue";
+import { defineComponent, useModel, useTemplateRef, ref, getCurrentInstance, computed, watch, onMounted, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeStyle, normalizeClass } from "vue";
 import { get, set, clamp } from "@vueuse/shared";
 import { useElementDrag, roundTwoDecimal } from "./utils.js";
+const _hoisted_1 = ["aria-valuenow"];
 const cursorWidth = 16;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -15,21 +16,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     const modelValue = useModel(__props, "modelValue");
-    const barElement = ref();
+    const barElement = useTemplateRef("barElement");
+    const cursorLeft = ref("");
+    const instance = getCurrentInstance();
+    const { handleClick, onMouseDown } = useElementDrag(emitHue);
+    const cursorStyle = computed(() => ({
+      left: get(cursorLeft)
+    }));
     function getLimit(width) {
       const lowerLimit = cursorWidth / 2;
       const upperLimit = width - lowerLimit;
       const availableWidth = upperLimit - lowerLimit;
       return { lowerLimit, upperLimit, availableWidth };
     }
-    const cursorLeft = ref("");
     function updatePosition() {
       set(cursorLeft, getCursorLeft().toString());
     }
-    const cursorStyle = computed(() => ({
-      left: get(cursorLeft)
-    }));
-    const instance = getCurrentInstance();
     function getCursorLeft() {
       if (!instance)
         return 0;
@@ -56,20 +58,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       calculatedX = clamp(calculatedX, lowerLimit, upperLimit);
       set(modelValue, Math.round((calculatedX - lowerLimit) / availableWidth * 360));
     }
-    const {
-      handleClick,
-      onMouseDown
-    } = useElementDrag(emitHue);
-    onMounted(() => {
+    watch(modelValue, () => {
       updatePosition();
     });
-    watch(modelValue, () => {
+    onMounted(() => {
       updatePosition();
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "barElement",
         ref: barElement,
+        role: "slider",
+        "aria-label": "Hue",
+        "aria-valuenow": modelValue.value,
+        "aria-valuemin": "0",
+        "aria-valuemax": "360",
         class: [_ctx.$style.bar, "rui-color-hue"]
       }, _ctx.$attrs, {
         onClick: _cache[0] || (_cache[0] = ($event) => unref(handleClick)($event)),
@@ -79,7 +82,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.cursor),
           style: normalizeStyle(unref(cursorStyle))
         }, null, 6)
-      ], 16);
+      ], 16, _hoisted_1);
     };
   }
 });

package/dist/components/color-picker/RuiColorHue.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorHue.vue2.js","sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = ref<HTMLElement>();\n\nconst cursorWidth = 16;\n\nfunction getLimit(width: number) {\n  const lowerLimit = cursorWidth / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nconst cursorLeft = ref<string>('');\n\nfunction updatePosition() {\n  set(cursorLeft, getCursorLeft().toString());\n}\n\nconst cursorStyle = computed(() => ({\n  left: get(cursorLeft),\n}));\n\nconst instance = getCurrentInstance();\n\nfunction getCursorLeft() {\n  if (!instance)\n    return 0;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return 0;\n\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === 360 ? 360 : hueVal % 360;\n\n  const percentage = roundTwoDecimal((usedHue / 360) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number) {\n  if (!instance)\n    return;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return;\n\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * 360));\n}\n\nconst {\n  handleClick,\n  onMouseDown,\n} = useElementDrag(emitHue);\n\nonMounted(() => {\n  updatePosition();\n});\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    :class=\"$style.bar\"\n    class=\"rui-color-hue\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n  >\n    <div\n      :class=\"$style.cursor\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.bar {\n  @apply relative w-full h-3.5 rounded-full cursor-pointer;\n\n  background: linear-gradient(\n    to right,\n    rgb(255, 0, 0) 0%,\n    rgb(255, 255, 0) 16.66%,\n    rgb(0, 255, 0) 33.33%,\n    rgb(0, 255, 255) 50%,\n    rgb(0, 0, 255) 66.66%,\n    rgb(255, 0, 255) 83.33%,\n    rgb(255, 0, 0) 100%\n  );\n}\n\n.cursor {\n  @apply absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full;\n}\n</style>\n"],"names":["_useModel","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_unref","_createElementVNode","_normalizeClass"],"mappings":";;;AAaA,MAAM,cAAc;;;;;;;;;;;;;AAJpB,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAEzD,UAAM,aAAa,IAAA;AAInB,aAAS,SAAS,OAAe;AAC/B,YAAM,aAAa,cAAc;AACjC,YAAM,aAAa,QAAQ;AAC3B,YAAM,iBAAiB,aAAa;AAEpC,aAAO,EAAE,YAAY,YAAY,eAAA;AAAA,IACnC;AAEA,UAAM,aAAa,IAAY,EAAE;AAEjC,aAAS,iBAAiB;AACxB,UAAI,YAAY,cAAA,EAAgB,SAAA,CAAU;AAAA,IAC5C;AAEA,UAAM,cAAc,SAAS,OAAO;AAAA,MAClC,MAAM,IAAI,UAAU;AAAA,IAAA,EACpB;AAEF,UAAM,WAAW,mBAAA;AAEjB,aAAS,gBAAgB;AACvB,UAAI,CAAC;AACH,eAAO;AAET,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH,eAAO;AAET,YAAM,cAAc,KAAK;AACzB,YAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;AAE3D,YAAM,SAAS,IAAI,UAAU;AAC7B,YAAM,UAAU,WAAW,MAAM,MAAM,SAAS;AAEhD,YAAM,aAAa,gBAAiB,UAAU,OAAQ,iBAAiB,eAAe,GAAG;AACzF,aAAO,QAAQ,UAAU,OAAO,UAAU;AAAA,IAC5C;AAEA,aAAS,QAAQ,GAAW;AAC1B,UAAI,CAAC;AACH;AAEF,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH;AAEF,UAAI,cAAc,IAAI,KAAK;AAE3B,YAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;AACtE,oBAAc,MAAM,aAAa,YAAY,UAAU;AAEvD,UAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,GAAG,CAAC;AAAA,IACjF;AAEA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IAAA,IACE,eAAe,OAAO;AAE1B,cAAU,MAAM;AACd,qBAAA;AAAA,IACF,CAAC;AAED,UAAM,YAAY,MAAM;AACtB,qBAAA;AAAA,IACF,CAAC;;AAIC,aAAAC,UAAA,GAAAC,mBAYM,OAZNC,WAYM;AAAA,iBAXA;AAAA,QAAJ,KAAI;AAAA,QACH,OAAK,CAAEC,KAAAA,OAAO,KACT,eAAe;AAAA,MAAA,GACbC,KAAAA,QAAM;AAAA,QACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,MAAA,WAAA,EAAY,MAAM;AAAA,QACzB,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,WAAA,EAAY,MAAM;AAAA,MAAA;QAE9BC,mBAGE,OAAA;AAAA,UAFC,OAAKC,eAAEJ,KAAAA,OAAO,MAAM;AAAA,UACpB,sBAAOE,MAAA,WAAA,CAAW;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiColorHue.vue2.js","sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst cursorWidth = 16;\nconst cursorLeft = ref<string>('');\n\nconst instance = getCurrentInstance();\n\nconst { handleClick, onMouseDown } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n} {\n  const lowerLimit = cursorWidth / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft().toString());\n}\n\nfunction getCursorLeft(): number | string {\n  if (!instance)\n    return 0;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return 0;\n\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === 360 ? 360 : hueVal % 360;\n\n  const percentage = roundTwoDecimal((usedHue / 360) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  if (!instance)\n    return;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return;\n\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * 360));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    :class=\"$style.bar\"\n    class=\"rui-color-hue\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n  >\n    <div\n      :class=\"$style.cursor\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.bar {\n  @apply relative w-full h-3.5 rounded-full cursor-pointer;\n\n  background: linear-gradient(\n    to right,\n    rgb(255, 0, 0) 0%,\n    rgb(255, 255, 0) 16.66%,\n    rgb(0, 255, 0) 33.33%,\n    rgb(0, 255, 255) 50%,\n    rgb(0, 0, 255) 66.66%,\n    rgb(255, 0, 255) 83.33%,\n    rgb(255, 0, 0) 100%\n  );\n}\n\n.cursor {\n  @apply absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full;\n}\n</style>\n"],"names":["_useModel","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_unref","_createElementVNode","_normalizeClass"],"mappings":";;;;AAaA,MAAM,cAAc;;;;;;;;;;;;;AAJpB,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAEzD,UAAM,aAAa,eAA4B,YAAY;AAG3D,UAAM,aAAa,IAAY,EAAE;AAEjC,UAAM,WAAW,mBAAA;AAEjB,UAAM,EAAE,aAAa,gBAAgB,eAAe,OAAO;AAE3D,UAAM,cAAc,SAA2B,OAAO;AAAA,MACpD,MAAM,IAAI,UAAU;AAAA,IAAA,EACpB;AAEF,aAAS,SAAS,OAIhB;AACA,YAAM,aAAa,cAAc;AACjC,YAAM,aAAa,QAAQ;AAC3B,YAAM,iBAAiB,aAAa;AAEpC,aAAO,EAAE,YAAY,YAAY,eAAA;AAAA,IACnC;AAEA,aAAS,iBAAuB;AAC9B,UAAI,YAAY,cAAA,EAAgB,SAAA,CAAU;AAAA,IAC5C;AAEA,aAAS,gBAAiC;AACxC,UAAI,CAAC;AACH,eAAO;AAET,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH,eAAO;AAET,YAAM,cAAc,KAAK;AACzB,YAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;AAE3D,YAAM,SAAS,IAAI,UAAU;AAC7B,YAAM,UAAU,WAAW,MAAM,MAAM,SAAS;AAEhD,YAAM,aAAa,gBAAiB,UAAU,OAAQ,iBAAiB,eAAe,GAAG;AACzF,aAAO,QAAQ,UAAU,OAAO,UAAU;AAAA,IAC5C;AAEA,aAAS,QAAQ,GAAiB;AAChC,UAAI,CAAC;AACH;AAEF,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH;AAEF,UAAI,cAAc,IAAI,KAAK;AAE3B,YAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;AACtE,oBAAc,MAAM,aAAa,YAAY,UAAU;AAEvD,UAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,GAAG,CAAC;AAAA,IACjF;AAEA,UAAM,YAAY,MAAM;AACtB,qBAAA;AAAA,IACF,CAAC;AAED,cAAU,MAAM;AACd,qBAAA;AAAA,IACF,CAAC;;AAIC,aAAAC,UAAA,GAAAC,mBAiBM,OAjBNC,WAiBM;AAAA,iBAhBA;AAAA,QAAJ,KAAI;AAAA,QACJ,MAAK;AAAA,QACL,cAAW;AAAA,QACV,iBAAe,WAAA;AAAA,QAChB,iBAAc;AAAA,QACd,iBAAc;AAAA,QACb,OAAK,CAAEC,KAAAA,OAAO,KACT,eAAe;AAAA,MAAA,GACbC,KAAAA,QAAM;AAAA,QACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,MAAA,WAAA,EAAY,MAAM;AAAA,QACzB,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,WAAA,EAAY,MAAM;AAAA,MAAA;QAE9BC,mBAGE,OAAA;AAAA,UAFC,OAAKC,eAAEJ,KAAAA,OAAO,MAAM;AAAA,UACpB,sBAAOE,MAAA,WAAA,CAAW;AAAA,QAAA;;;;;"}

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

@@ -1,4 +1,4 @@
-import { defineComponent, useModel, ref, reactive, createElementBlock, openBlock, mergeProps, createElementVNode, createVNode, createBlock, unref, withCtx, Fragment, renderList, toDisplayString } from "vue";
+import { defineComponent, useModel, ref, reactive, openBlock, createElementBlock, mergeProps, createElementVNode, unref, createBlock, withCtx, Fragment, renderList, toDisplayString, createVNode } from "vue";
 import { get, clamp, set } from "@vueuse/shared";
 import tinycolor from "tinycolor2";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
@@ -31,19 +31,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       hex: get(modelValue).hex,
       rgb: get(modelValue).rgb
     });
-    function onInputTypeChange() {
-      set(inputType, get(inputType) === "rgb" ? "hex" : "rgb");
-    }
     const onBlurChange = useDebounceFn((inputType2, event, key) => {
       if (!state.color)
         return;
-      const value = event.target.value;
+      const target = event.target;
+      if (!(target instanceof HTMLInputElement))
+        return;
+      const value = target.value;
       if (inputType2 === "hex") {
         const _hex = value.replace("#", "");
         if (tinycolor(_hex).isValid() && [3, 4, 6].includes(_hex.length))
           state.color.hex = _hex;
-        else
-          state.color.hex = "000000";
+        else state.color.hex = "000000";
       } else if (key !== void 0 && state.rgb && state.color) {
         let valueInNumber = Number(value);
         valueInNumber = clamp(valueInNumber, 0, 255);
@@ -68,6 +67,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       set(modelValue, state.color);
     }, 300);
+    function onInputTypeChange() {
+      set(inputType, get(inputType) === "rgb" ? "hex" : "rgb");
+    }
     whenever(
       modelValue,
       (value) => {

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorInput.vue.js","sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } 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 inputType = ref<'hex' | 'rgb'>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction onInputTypeChange() {\n  set(inputType, get(inputType) === 'rgb' ? 'hex' : 'rgb');\n}\n\nconst onBlurChange = useDebounceFn((inputType: string, event: any, key?: number) => {\n  if (!state.color)\n    return;\n\n  const value = event.target.value;\n  if (inputType === 'hex') {\n    const _hex = value.replace('#', '');\n    if (tinycolor(_hex).isValid() && [3, 4, 6].includes(_hex.length))\n      state.color.hex = _hex;\n\n    else\n      state.color.hex = '000000';\n  }\n  else if (key !== undefined && state.rgb && state.color) {\n    let valueInNumber = Number(value);\n    valueInNumber = clamp(valueInNumber, 0, 255);\n\n    state.rgb[key] = valueInNumber;\n    const [r, g, b] = state.rgb;\n    state.color.hex = tinycolor({ r, g, b }).toHex();\n  }\n}, 100);\n\nconst onInputChange = useDebounceFn((inputType: string, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (inputType === '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 && state.rgb && state.color) {\n    let valueInNumber = Number(value);\n    valueInNumber = clamp(valueInNumber, 0, 255);\n\n    state.rgb[key] = valueInNumber;\n    const [r, g, b] = state.rgb;\n    state.color.hex = tinycolor({ r, g, b }).toHex();\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nwhenever(\n  modelValue,\n  (value) => {\n    state.color = value;\n    state.hex = state.color.hex;\n    state.rgb = state.color.rgb;\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <div\n    class=\"rui-color-input 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\">\n              #\n            </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"],"names":["_useModel","inputType","_openBlock","_createElementBlock","_mergeProps","$attrs","_createElementVNode","_unref","_createBlock","_Fragment","_toDisplayString","_createVNode"],"mappings":"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"}
+{"version":3,"file":"RuiColorInput.vue.js","sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } 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 inputType = ref<'hex' | 'rgb'>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nconst onBlurChange = useDebounceFn((inputType: string, 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 (inputType === 'hex') {\n    const _hex = value.replace('#', '');\n    if (tinycolor(_hex).isValid() && [3, 4, 6].includes(_hex.length))\n      state.color.hex = _hex;\n    else state.color.hex = '000000';\n  }\n  else if (key !== undefined && state.rgb && state.color) {\n    let valueInNumber = Number(value);\n    valueInNumber = clamp(valueInNumber, 0, 255);\n\n    state.rgb[key] = valueInNumber;\n    const [r, g, b] = state.rgb;\n    state.color.hex = tinycolor({ r, g, b }).toHex();\n  }\n}, 100);\n\nconst onInputChange = useDebounceFn((inputType: string, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (inputType === '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 && state.rgb && state.color) {\n    let valueInNumber = Number(value);\n    valueInNumber = clamp(valueInNumber, 0, 255);\n\n    state.rgb[key] = valueInNumber;\n    const [r, g, b] = state.rgb;\n    state.color.hex = tinycolor({ r, g, b }).toHex();\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(): void {\n  set(inputType, get(inputType) === 'rgb' ? 'hex' : 'rgb');\n}\n\nwhenever(\n  modelValue,\n  (value) => {\n    state.color = value;\n    state.hex = state.color.hex;\n    state.rgb = state.color.rgb;\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <div\n    class=\"rui-color-input 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"],"names":["_useModel","inputType","_openBlock","_createElementBlock","_mergeProps","$attrs","_createElementVNode","_unref","_createBlock","_Fragment","_toDisplayString","_createVNode"],"mappings":"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"}

package/dist/components/color-picker/RuiColorPicker.vue.d.ts

@@ -1,12 +1,10 @@
-export interface Props {
+type __VLS_ModelProps = {
     modelValue?: string;
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:model-value"?: ((value: string) => any) | undefined;
-}>, {
-    modelValue: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,10 +1,10 @@
-import { defineComponent, toRefs, reactive, watch, createElementBlock, openBlock, mergeProps, createVNode, createElementVNode, unref } from "vue";
+import { defineComponent, useModel, reactive, watch, openBlock, createElementBlock, mergeProps, createVNode, unref, createElementVNode } from "vue";
 import RuiColorBoard from "./RuiColorBoard.vue.js";
 import _sfc_main$1 from "./RuiColorDisplay.vue.js";
 import RuiColorHue from "./RuiColorHue.vue.js";
 import _sfc_main$2 from "./RuiColorInput.vue.js";
 import { Color } from "./utils.js";
-import { get } from "@vueuse/shared";
+import { get, set } from "@vueuse/shared";
 import { whenever } from "@vueuse/core";
 const _hoisted_1 = { class: "flex flex-col gap-5 p-4" };
 const _hoisted_2 = { class: "flex items-center gap-4" };
@@ -15,17 +15,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "RuiColorPicker",
   props: {
-    modelValue: { default: "" }
+    "modelValue": { default: "" },
+    "modelModifiers": {}
   },
-  emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { modelValue } = toRefs(props);
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
     const state = reactive({
       color: new Color(get(modelValue))
     });
-    function onBoardChange({ saturation, brightness }) {
+    function onBoardChange({
+      saturation,
+      brightness
+    }) {
       state.color.saturation = saturation;
       state.color.brightness = brightness;
     }
@@ -34,14 +36,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       (value) => {
         if (state.color.hex !== value)
           state.color = new Color(value);
+      }
+    );
+    watch(
+      () => state.color.hex,
+      (hex) => {
+        set(modelValue, hex);
       },
-      { deep: true }
+      { immediate: true }
     );
-    watch(state, (state2) => {
-      emit("update:model-value", state2.color.hex);
-    }, { immediate: true, deep: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({ class: "rui-color-picker relative select-none bg-initial" }, _ctx.$attrs), [
+      return openBlock(), createElementBlock("div", mergeProps({
+        role: "application",
+        "aria-label": "Color picker",
+        class: "rui-color-picker relative select-none bg-initial"
+      }, _ctx.$attrs), [
         createVNode(RuiColorBoard, {
           color: unref(state).color,
           "onUpdate:board": _cache[0] || (_cache[0] = ($event) => onBoardChange($event))

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.vue.js","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 { Color } from './utils';\n\nexport interface Props {\n  modelValue?: string;\n}\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), { modelValue: '' });\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: string): void;\n}>();\n\nconst { modelValue } = toRefs(props);\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({ saturation, brightness }: { saturation: number; brightness: number }) {\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  { deep: true },\n);\n\nwatch(state, (state) => {\n  emit('update:model-value', state.color.hex);\n}, { immediate: true, deep: true });\n</script>\n\n<template>\n  <div\n    class=\"rui-color-picker relative select-none bg-initial\"\n    v-bind=\"$attrs\"\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"],"names":["state","_openBlock","_createElementBlock","_mergeProps","$attrs","_createVNode","_unref","_createElementVNode","RuiColorDisplay","RuiColorInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,QAAQ;AAEd,UAAM,OAAO;AAIb,UAAM,EAAE,WAAA,IAAe,OAAO,KAAK;AAEnC,UAAM,QAAQ,SAAS;AAAA,MACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC;AAAA,IAAA,CACjC;AAED,aAAS,cAAc,EAAE,YAAY,cAA0D;AAC7F,YAAM,MAAM,aAAa;AACzB,YAAM,MAAM,aAAa;AAAA,IAC3B;AAEA;AAAA,MACE;AAAA,MACA,CAAC,UAAkB;AACjB,YAAI,MAAM,MAAM,QAAQ;AACtB,gBAAM,QAAQ,IAAI,MAAM,KAAK;AAAA,MACjC;AAAA,MACA,EAAE,MAAM,KAAA;AAAA,IAAK;AAGf,UAAM,OAAO,CAACA,WAAU;AACtB,WAAK,sBAAsBA,OAAM,MAAM,GAAG;AAAA,IAC5C,GAAG,EAAE,WAAW,MAAM,MAAM,MAAM;;AAIhC,aAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM,EAlBJ,OAAM,mDAAA,GACEC,KAAAA,MAAM,GAAA;AAAA,QAEdC,YAGE,eAAA;AAAA,UAFC,OAAOC,MAAA,KAAA,EAAM;AAAA,UACb,kBAAY,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,cAAc,MAAM;AAAA,QAAA;QAErCC,mBAUM,OAVN,YAUM;AAAA,UATJA,mBAMM,OANN,YAMM;AAAA,YALJF,YAAkDG,aAAA;AAAA,cAAhC,OAAOF,MAAA,KAAA,EAAM,MAAM;AAAA,YAAA;YACrCD,YAGE,aAAA;AAAA,0BAFSC,MAAA,KAAA,EAAM,MAAM;AAAA,2EAAZA,MAAA,KAAA,EAAM,MAAM,MAAG;AAAA,cACxB,OAAM;AAAA,YAAA;;UAIVD,YAAuCI,aAAA;AAAA,YAAf,YAAAH,MAAA,KAAA,EAAM;AAAA,YAAN,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAAA,MAAA,KAAA,EAAM,QAAK;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiColorPicker.vue.js","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 { 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</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    class=\"rui-color-picker relative select-none bg-initial\"\n    v-bind=\"$attrs\"\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"],"names":["_useModel","_openBlock","_createElementBlock","_mergeProps","$attrs","_createVNode","_unref","_createElementVNode","RuiColorDisplay","RuiColorInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,UAAM,aAAaA,SAAmB,SAAA,YAAgB;AAEtD,UAAM,QAAQ,SAAS;AAAA,MACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC;AAAA,IAAA,CACjC;AAED,aAAS,cAAc;AAAA,MACrB;AAAA,MACA;AAAA,IAAA,GAIO;AACP,YAAM,MAAM,aAAa;AACzB,YAAM,MAAM,aAAa;AAAA,IAC3B;AAEA;AAAA,MACE;AAAA,MACA,CAAC,UAAkB;AACjB,YAAI,MAAM,MAAM,QAAQ;AACtB,gBAAM,QAAQ,IAAI,MAAM,KAAK;AAAA,MACjC;AAAA,IAAA;AAGF;AAAA,MACE,MAAM,MAAM,MAAM;AAAA,MAClB,CAAC,QAAgB;AACf,YAAI,YAAY,GAAG;AAAA,MACrB;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;;AAKlB,aAAAC,UAAA,GAAAC,mBAqBM,OArBNC,WAqBM;AAAA,QApBJ,MAAK;AAAA,QACL,cAAW;AAAA,QACX,OAAM;AAAA,MAAA,GACEC,KAAAA,MAAM,GAAA;AAAA,QAEdC,YAGE,eAAA;AAAA,UAFC,OAAOC,MAAA,KAAA,EAAM;AAAA,UACb,kBAAY,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,cAAc,MAAM;AAAA,QAAA;QAErCC,mBAUM,OAVN,YAUM;AAAA,UATJA,mBAMM,OANN,YAMM;AAAA,YALJF,YAAkDG,aAAA;AAAA,cAAhC,OAAOF,MAAA,KAAA,EAAM,MAAM;AAAA,YAAA;YACrCD,YAGE,aAAA;AAAA,0BAFSC,MAAA,KAAA,EAAM,MAAM;AAAA,2EAAZA,MAAA,KAAA,EAAM,MAAM,MAAG;AAAA,cACxB,OAAM;AAAA,YAAA;;UAIVD,YAAuCI,aAAA;AAAA,YAAf,YAAAH,MAAA,KAAA,EAAM;AAAA,YAAN,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAAA,MAAA,KAAA,EAAM,QAAK;AAAA,UAAA;;;;;;"}

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

@@ -154,17 +154,34 @@ class Color {
   }
 }
 function useElementDrag(handler) {
+  let rafId = null;
   function handleClick(e) {
-    handler(e.clientX, e.clientY);
+    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();
-    window.addEventListener("mousemove", handleClick);
-    window.addEventListener("mouseup", handleMouseUp);
+    if (typeof window !== "undefined") {
+      window.addEventListener("mousemove", handleClick);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
   }
   function handleMouseUp() {
-    window.removeEventListener("mousemove", handleClick);
-    window.removeEventListener("mouseup", handleMouseUp);
+    cancelRaf();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("mousemove", handleClick);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
   }
   onUnmounted(() => {
     handleMouseUp();

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  function handleClick(e: { clientX: number; clientY: number }) {\n    handler(e.clientX, e.clientY);\n  }\n\n  function onMouseDown(e: MouseEvent) {\n    e.preventDefault();\n\n    window.addEventListener('mousemove', handleClick);\n    window.addEventListener('mouseup', handleMouseUp);\n  }\n\n  function handleMouseUp() {\n    window.removeEventListener('mousemove', handleClick);\n    window.removeEventListener('mouseup', handleMouseUp);\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","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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"}

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

@@ -20,60 +20,18 @@ export interface RuiDateTimePickerProps {
     required?: boolean;
 }
 type __VLS_Props = RuiDateTimePickerProps;
-declare const props: Readonly<{}> & {
-    readonly disabled: boolean;
-    readonly readonly: boolean;
-    readonly allowEmpty: boolean;
-    readonly dense: boolean;
-    readonly type: DateTimeModelType;
-    readonly hideDetails: boolean;
-    readonly label: string;
-    readonly variant: "default" | "outlined" | "filled";
-    readonly hint: string | undefined;
-    readonly maxDate: number | Date | "now" | undefined;
-    readonly minDate: number | Date | undefined;
-    readonly format: DateFormat;
-    readonly accuracy: "minute" | "second" | "millisecond";
-    readonly errorMessages: string | string[];
-    readonly successMessages: string | string[];
-    readonly required: boolean;
-} & {
-    readonly disabled: boolean;
-    readonly dense: boolean;
-    readonly readonly: boolean;
-    readonly required: boolean;
-    readonly hideDetails: boolean;
-    readonly allowEmpty: boolean;
-};
 type __VLS_Slots = {
     'menu-content': () => any;
 };
 type __VLS_ModelProps = {
-    modelValue: ModelValueType<typeof props.type>;
+    modelValue: ModelValueType<DateTimeModelType>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number | Date | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number | Date | undefined) => any) | undefined;
-}>, {
-    label: string;
-    disabled: boolean;
-    dense: boolean;
-    readonly: boolean;
-    variant: "default" | "filled" | "outlined";
-    type: DateTimeModelType;
-    errorMessages: string | string[];
-    successMessages: string | string[];
-    hint: string;
-    required: boolean;
-    hideDetails: boolean;
-    maxDate: Date | number | "now";
-    minDate: Date | number;
-    allowEmpty: boolean;
-    accuracy: "minute" | "second" | "millisecond";
-    format: DateFormat;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;