@rotki/ui-library 2.8.1 → 2.8.3

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,18 @@
+const saturation = "_saturation_ea4je_1";
+const saturation__white = "_saturation__white_ea4je_4";
+const saturation__black = "_saturation__black_ea4je_4";
+const cursor = "_cursor_ea4je_14";
+const style0 = {
+  saturation,
+  saturation__white,
+  saturation__black,
+  cursor
+};
+export {
+  cursor,
+  style0 as default,
+  saturation,
+  saturation__black,
+  saturation__white
+};
+//# sourceMappingURL=RuiColorBoard.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorBoard.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

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

@@ -0,0 +1,49 @@
+import { defineComponent, toRefs, createBlock, openBlock, mergeProps, withCtx, createElementVNode, createElementBlock, createCommentVNode, normalizeClass, unref, normalizeStyle } from "vue";
+import RuiTooltip from "../overlays/tooltip/RuiTooltip.vue.js";
+import { useClipboard } from "@vueuse/core";
+const _hoisted_1 = {
+  key: 0,
+  class: "text-rui-success"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiColorDisplay",
+    inheritAttrs: false
+  },
+  __name: "RuiColorDisplay",
+  props: {
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { color } = toRefs(props);
+    const { copy, copied } = useClipboard({ source: color });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(RuiTooltip, mergeProps({
+        popper: { placement: "top" },
+        "close-delay": 400,
+        "tooltip-class": "text-center"
+      }, _ctx.$attrs), {
+        activator: withCtx(() => [
+          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) }),
+            onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)())
+          }, null, 4)
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass({ "h-0 overflow-hidden": unref(copied) })
+          }, " Click to copy ", 2),
+          unref(copied) ? (openBlock(), createElementBlock("div", _hoisted_1, " COPIED! ")) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiColorDisplay.vue.js.map

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

@@ -0,0 +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;;;;;;;"}

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

@@ -0,0 +1,5 @@
+import _sfc_main from "./RuiColorDisplay.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiColorDisplay.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorDisplay.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,11 @@
+import _sfc_main from "./RuiColorHue.vue2.js";
+import style0 from "./RuiColorHue.vue3.js";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const cssModules = {
+  "$style": style0
+};
+const RuiColorHue = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  RuiColorHue as default
+};
+//# sourceMappingURL=RuiColorHue.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorHue.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,89 @@
+import { defineComponent, useModel, ref, computed, getCurrentInstance, onMounted, watch, createElementBlock, openBlock, mergeProps, unref, createElementVNode, normalizeStyle, normalizeClass } from "vue";
+import { get, set, clamp } from "@vueuse/shared";
+import { useElementDrag, roundTwoDecimal } from "./utils.js";
+const cursorWidth = 16;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiColorHue",
+    inheritAttrs: false
+  },
+  __name: "RuiColorHue",
+  props: {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    const barElement = ref();
+    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;
+      const el = instance.vnode.el;
+      const rect = el?.getBoundingClientRect();
+      if (!rect)
+        return 0;
+      const actualWidth = rect.width;
+      const { lowerLimit, availableWidth } = getLimit(actualWidth);
+      const hueVal = get(modelValue);
+      const usedHue = hueVal === 360 ? 360 : hueVal % 360;
+      const percentage = roundTwoDecimal(usedHue / 360 * (availableWidth / actualWidth) * 100);
+      return `calc(${percentage}% + ${lowerLimit}px)`;
+    }
+    function emitHue(x) {
+      if (!instance)
+        return;
+      const el = instance.vnode.el;
+      const rect = el?.getBoundingClientRect();
+      if (!rect)
+        return;
+      let calculatedX = x - rect.left;
+      const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);
+      calculatedX = clamp(calculatedX, lowerLimit, upperLimit);
+      set(modelValue, Math.round((calculatedX - lowerLimit) / availableWidth * 360));
+    }
+    const {
+      handleClick,
+      onMouseDown
+    } = useElementDrag(emitHue);
+    onMounted(() => {
+      updatePosition();
+    });
+    watch(modelValue, () => {
+      updatePosition();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "barElement",
+        ref: barElement,
+        class: [_ctx.$style.bar, "rui-color-hue"]
+      }, _ctx.$attrs, {
+        onClick: _cache[0] || (_cache[0] = ($event) => unref(handleClick)($event)),
+        onMousedown: _cache[1] || (_cache[1] = ($event) => unref(onMouseDown)($event))
+      }), [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.cursor),
+          style: normalizeStyle(unref(cursorStyle))
+        }, null, 6)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiColorHue.vue2.js.map

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,12 @@
+const bar = "_bar_12tja_1";
+const cursor = "_cursor_12tja_6";
+const style0 = {
+  bar,
+  cursor
+};
+export {
+  bar,
+  cursor,
+  style0 as default
+};
+//# sourceMappingURL=RuiColorHue.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorHue.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -1,4 +1,4 @@
-import type { Color } from './utils';
+import type { Color } from './utils.js';
 type __VLS_ModelProps = {
     modelValue: Color;
 };

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

@@ -0,0 +1,139 @@
+import { defineComponent, useModel, ref, reactive, createElementBlock, openBlock, mergeProps, createElementVNode, createVNode, createBlock, unref, withCtx, Fragment, renderList, toDisplayString } from "vue";
+import { get, clamp, set } from "@vueuse/shared";
+import tinycolor from "tinycolor2";
+import RuiButton from "../buttons/button/RuiButton.vue.js";
+import RuiTextField from "../forms/text-field/RuiTextField.vue.js";
+import RuiIcon from "../icons/RuiIcon.vue.js";
+import { useDebounceFn, whenever } from "@vueuse/core";
+const _hoisted_1 = { class: "flex flex-col items-center gap-1 w-[16rem]" };
+const _hoisted_2 = { class: "w-full" };
+const _hoisted_3 = {
+  key: 1,
+  class: "flex flex-1 gap-1"
+};
+const _hoisted_4 = { class: "uppercase text-rui-text-secondary text-sm" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiColorInput",
+    inheritAttrs: false
+  },
+  __name: "RuiColorInput",
+  props: {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    const inputType = ref("hex");
+    const state = reactive({
+      color: get(modelValue),
+      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;
+      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 if (key !== void 0 && state.rgb && state.color) {
+        let valueInNumber = Number(value);
+        valueInNumber = clamp(valueInNumber, 0, 255);
+        state.rgb[key] = valueInNumber;
+        const [r, g, b] = state.rgb;
+        state.color.hex = tinycolor({ r, g, b }).toHex();
+      }
+    }, 100);
+    const onInputChange = useDebounceFn((inputType2, value, key) => {
+      if (!value)
+        return;
+      if (inputType2 === "hex") {
+        const _hex = value.replace("#", "");
+        if (tinycolor(_hex).isValid() && state.color && _hex.length === 6)
+          state.color.hex = _hex;
+      } else if (key !== void 0 && state.rgb && state.color) {
+        let valueInNumber = Number(value);
+        valueInNumber = clamp(valueInNumber, 0, 255);
+        state.rgb[key] = valueInNumber;
+        const [r, g, b] = state.rgb;
+        state.color.hex = tinycolor({ r, g, b }).toHex();
+      }
+      set(modelValue, state.color);
+    }, 300);
+    whenever(
+      modelValue,
+      (value) => {
+        state.color = value;
+        state.hex = state.color.hex;
+        state.rgb = state.color.rgb;
+      },
+      { deep: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({ class: "rui-color-input flex justify-center gap-2" }, _ctx.$attrs), [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            unref(inputType) === "hex" ? (openBlock(), createBlock(RuiTextField, {
+              key: 0,
+              modelValue: unref(state).hex,
+              "onUpdate:modelValue": [
+                _cache[0] || (_cache[0] = ($event) => unref(state).hex = $event),
+                _cache[1] || (_cache[1] = ($event) => unref(onInputChange)(unref(inputType), $event))
+              ],
+              variant: "outlined",
+              class: "flex-1 w-full [&_input]:uppercase",
+              maxlength: "6",
+              color: "primary",
+              dense: "",
+              "hide-details": "",
+              onBlur: _cache[2] || (_cache[2] = ($event) => unref(onBlurChange)(unref(inputType), $event))
+            }, {
+              prepend: withCtx(() => [..._cache[4] || (_cache[4] = [
+                createElementVNode("span", { class: "text-rui-text" }, " # ", -1)
+              ])]),
+              _: 1
+            }, 8, ["modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_3, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).rgb, (v, i) => {
+                return openBlock(), createBlock(RuiTextField, {
+                  key: i,
+                  "model-value": v.toString(),
+                  variant: "outlined",
+                  class: "[&_input]:text-center w-full",
+                  maxlength: "3",
+                  color: "primary",
+                  dense: "",
+                  "hide-details": "",
+                  "onUpdate:modelValue": ($event) => unref(onInputChange)(unref(inputType), $event, i),
+                  onBlur: ($event) => unref(onBlurChange)(unref(inputType), $event, i)
+                }, null, 8, ["model-value", "onUpdate:modelValue", "onBlur"]);
+              }), 128))
+            ]))
+          ]),
+          createElementVNode("div", _hoisted_4, toDisplayString(unref(inputType)), 1)
+        ]),
+        createVNode(RuiButton, {
+          class: "h-10",
+          variant: "text",
+          onClick: _cache[3] || (_cache[3] = ($event) => onInputTypeChange())
+        }, {
+          default: withCtx(() => [
+            createVNode(RuiIcon, { name: "lu-chevrons-up-down" })
+          ]),
+          _: 1
+        })
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiColorInput.vue.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,5 @@
+import _sfc_main from "./RuiColorInput.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiColorInput.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorInput.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,72 @@
+import { defineComponent, toRefs, reactive, watch, createElementBlock, openBlock, mergeProps, createVNode, createElementVNode, unref } 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 { whenever } from "@vueuse/core";
+const _hoisted_1 = { class: "flex flex-col gap-5 p-4" };
+const _hoisted_2 = { class: "flex items-center gap-4" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiColorPicker",
+    inheritAttrs: false
+  },
+  __name: "RuiColorPicker",
+  props: {
+    modelValue: { default: "" }
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { modelValue } = toRefs(props);
+    const state = reactive({
+      color: new Color(get(modelValue))
+    });
+    function onBoardChange({ saturation, brightness }) {
+      state.color.saturation = saturation;
+      state.color.brightness = brightness;
+    }
+    whenever(
+      modelValue,
+      (value) => {
+        if (state.color.hex !== value)
+          state.color = new Color(value);
+      },
+      { deep: 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), [
+        createVNode(RuiColorBoard, {
+          color: unref(state).color,
+          "onUpdate:board": _cache[0] || (_cache[0] = ($event) => onBoardChange($event))
+        }, null, 8, ["color"]),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createVNode(_sfc_main$1, {
+              color: unref(state).color.hexString
+            }, null, 8, ["color"]),
+            createVNode(RuiColorHue, {
+              modelValue: unref(state).color.hue,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(state).color.hue = $event),
+              class: "flex-1"
+            }, null, 8, ["modelValue"])
+          ]),
+          createVNode(_sfc_main$2, {
+            modelValue: unref(state).color,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(state).color = $event)
+          }, null, 8, ["modelValue"])
+        ])
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiColorPicker.vue.js.map

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

@@ -0,0 +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;;;;;;"}

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

@@ -0,0 +1,5 @@
+import _sfc_main from "./RuiColorPicker.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiColorPicker.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorPicker.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}