@rotki/ui-library 2.14.1 → 2.16.0

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

@@ -0,0 +1,84 @@
+import { roundTwoDecimal, useElementDrag } from "./utils.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onMounted, openBlock, ref, unref, useModel, useTemplateRef, watch } from "vue";
+import { clamp, get, set } from "@vueuse/shared";
+//#region src/components/color-picker/RuiColorHue.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-valuenow"];
+var MAX_HUE = 360;
+var CURSOR_WIDTH = 16;
+var RuiColorHue_vue_vue_type_script_setup_true_lang_default = /* @__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 = useTemplateRef("barElement");
+		const cursorLeft = ref("");
+		const { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);
+		const cursorStyle = computed(() => ({ left: get(cursorLeft) }));
+		function getLimit(width) {
+			const lowerLimit = CURSOR_WIDTH / 2;
+			const upperLimit = width - lowerLimit;
+			return {
+				lowerLimit,
+				upperLimit,
+				availableWidth: upperLimit - lowerLimit
+			};
+		}
+		function updatePosition() {
+			set(cursorLeft, getCursorLeft());
+		}
+		function getCursorLeft() {
+			const el = get(barElement);
+			if (!el) return "0";
+			const actualWidth = el.getBoundingClientRect().width;
+			const { lowerLimit, availableWidth } = getLimit(actualWidth);
+			const hueVal = get(modelValue);
+			return `calc(${roundTwoDecimal((hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE) / MAX_HUE * (availableWidth / actualWidth) * 100)}% + ${lowerLimit}px)`;
+		}
+		function emitHue(x) {
+			const el = get(barElement);
+			if (!el) return;
+			const rect = el.getBoundingClientRect();
+			let calculatedX = x - rect.left;
+			const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);
+			calculatedX = clamp(calculatedX, lowerLimit, upperLimit);
+			set(modelValue, Math.round((calculatedX - lowerLimit) / availableWidth * MAX_HUE));
+		}
+		watch(modelValue, () => {
+			updatePosition();
+		});
+		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",
+				"data-id": "color-hue",
+				class: "relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum"
+			}, _ctx.$attrs, {
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(handleClick)($event)),
+				onMousedown: _cache[1] || (_cache[1] = ($event) => unref(onMouseDown)($event)),
+				onTouchstart: _cache[2] || (_cache[2] = ($event) => unref(onTouchStart)($event))
+			}), [createElementVNode("div", {
+				"data-id": "cursor",
+				class: "absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full",
+				style: normalizeStyle(unref(cursorStyle))
+			}, null, 4)], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiColorHue_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiColorHue.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorHue.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 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());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\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) * MAX_HUE));\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    data-id=\"color-hue\"\n    class=\"relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;AAmBA,IAAM,UAAU;AAChB,IAAM,eAAe;;;;;;;;;;;EALrB,MAAM,aAAa,SAAmB,SAAA,aAAoB;EAE1D,MAAM,aAAa,eAA4B,aAAa;EAI5D,MAAM,aAAa,IAAY,GAAG;EAElC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,QAAQ;EAE1E,MAAM,cAAc,gBAAkC,EACpD,MAAM,IAAI,WAAW,EACtB,EAAE;EAEH,SAAS,SAAS,OAAsB;GACtC,MAAM,aAAa,eAAe;GAClC,MAAM,aAAa,QAAQ;AAG3B,UAAO;IAAE;IAAY;IAAY,gBAFV,aAAa;IAEa;;EAGnD,SAAS,iBAAuB;AAC9B,OAAI,YAAY,eAAe,CAAC;;EAGlC,SAAS,gBAAwB;GAC/B,MAAM,KAAK,IAAI,WAAW;AAC1B,OAAI,CAAC,GACH,QAAO;GAGT,MAAM,cADO,GAAG,uBAAuB,CACd;GACzB,MAAM,EAAE,YAAY,mBAAmB,SAAS,YAAY;GAE5D,MAAM,SAAS,IAAI,WAAW;AAI9B,UAAO,QADY,iBAFH,WAAW,UAAU,UAAU,SAAS,WAEV,WAAY,iBAAiB,eAAe,IAAI,CACpE,MAAM,WAAW;;EAG7C,SAAS,QAAQ,GAAiB;GAChC,MAAM,KAAK,IAAI,WAAW;AAC1B,OAAI,CAAC,GACH;GAEF,MAAM,OAAO,GAAG,uBAAuB;GACvC,IAAI,cAAc,IAAI,KAAK;GAE3B,MAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,MAAM;AACvE,iBAAc,MAAM,aAAa,YAAY,WAAW;AAExD,OAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,QAAQ,CAAC;;AAGtF,QAAM,kBAAkB;AACtB,mBAAgB;IAChB;AAEF,kBAAgB;AACd,mBAAgB;IAChB;;uBAIA,mBAmBM,OAnBN,WAmBM;aAlBA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,iBAAe,WAAA;IAChB,iBAAc;IACd,iBAAc;IACd,WAAQ;IACR,OAAM;MACEA,KAAAA,QAAM;IACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,aAAY,CAAC,OAAM;QAEhC,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,OAAK,eAAE,MAAA,YAAW,CAAA"}

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

@@ -0,0 +1,7 @@
+import RuiColorInput_vue_vue_type_script_setup_true_lang_default from "./RuiColorInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-picker/RuiColorInput.vue
+var RuiColorInput_default = RuiColorInput_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiColorInput_default as default };
+
+//# sourceMappingURL=RuiColorInput.js.map

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

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

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

@@ -0,0 +1,132 @@
+import RuiIcon_default from "../icons/RuiIcon.js";
+import RuiButton_default from "../buttons/button/RuiButton.js";
+import RuiTextField_default from "../forms/text-field/RuiTextField.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, reactive, ref, renderList, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { clamp, get as get$1, set as set$1 } from "@vueuse/shared";
+import tinycolor from "tinycolor2";
+//#region src/components/color-picker/RuiColorInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col items-center gap-1 w-[16rem]" };
+var _hoisted_2 = { class: "w-full" };
+var _hoisted_3 = {
+	key: 1,
+	class: "flex flex-1 gap-1"
+};
+var _hoisted_4 = { class: "uppercase text-rui-text-secondary text-sm" };
+var MAX_RGB = 255;
+var DEFAULT_HEX = "000000";
+var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiColorInput",
+	inheritAttrs: false,
+	__name: "RuiColorInput",
+	props: {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const VALID_HEX_LENGTHS = [
+			3,
+			4,
+			6
+		];
+		const inputType = ref("hex");
+		const state = reactive({
+			color: get$1(modelValue),
+			hex: get$1(modelValue).hex,
+			rgb: get$1(modelValue).rgb
+		});
+		function applyRgbValue(value, key) {
+			if (!state.rgb || !state.color) return;
+			const clamped = clamp(Number(value), 0, MAX_RGB);
+			state.rgb[key] = clamped;
+			const [r, g, b] = state.rgb;
+			state.color.hex = tinycolor({
+				r,
+				g,
+				b
+			}).toHex();
+		}
+		const onBlurChange = useDebounceFn((format, event, key) => {
+			if (!state.color) return;
+			const target = event.target;
+			if (!(target instanceof HTMLInputElement)) return;
+			const value = target.value;
+			if (format === "hex") {
+				const hex = value.replace("#", "");
+				if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length)) state.color.hex = hex;
+				else state.color.hex = DEFAULT_HEX;
+			} else if (key !== void 0) applyRgbValue(value, key);
+			set$1(modelValue, state.color);
+		}, 100);
+		const onInputChange = useDebounceFn((format, value, key) => {
+			if (!value) return;
+			if (format === "hex") {
+				const hex = value.replace("#", "");
+				if (tinycolor(hex).isValid() && state.color && hex.length === 6) state.color.hex = hex;
+			} else if (key !== void 0) applyRgbValue(value, key);
+			set$1(modelValue, state.color);
+		}, 300);
+		function onInputTypeChange() {
+			set$1(inputType, get$1(inputType) === "rgb" ? "hex" : "rgb");
+		}
+		watch(() => {
+			const color = get$1(modelValue);
+			return [color.hex, ...color.rgb];
+		}, () => {
+			const color = get$1(modelValue);
+			state.color = color;
+			state.hex = color.hex;
+			state.rgb = color.rgb;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				"data-id": "color-input",
+				class: "flex justify-center gap-2"
+			}, _ctx.$attrs), [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [unref(inputType) === "hex" ? (openBlock(), createBlock(RuiTextField_default, {
+				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_default, {
+					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_default, {
+				class: "h-10",
+				variant: "text",
+				onClick: _cache[3] || (_cache[3] = ($event) => onInputTypeChange())
+			}, {
+				default: withCtx(() => [createVNode(RuiIcon_default, { name: "lu-chevrons-up-down" })]),
+				_: 1
+			})], 16);
+		};
+	}
+});
+//#endregion
+export { RuiColorInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiColorInput.vue_vue_type_script_setup_true_lang.js.map

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

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

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

@@ -0,0 +1,7 @@
+import RuiColorPicker_vue_vue_type_script_setup_true_lang_default from "./RuiColorPicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-picker/RuiColorPicker.vue
+var RuiColorPicker_default = RuiColorPicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiColorPicker_default as default };
+
+//# sourceMappingURL=RuiColorPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorPicker.js","names":[],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { 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    data-id=\"color-picker\"\n    class=\"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"],"mappings":""}

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

@@ -0,0 +1,57 @@
+import { Color } from "./utils.js";
+import RuiColorBoard_default from "./RuiColorBoard.js";
+import RuiColorDisplay_default from "./RuiColorDisplay.js";
+import RuiColorHue_default from "./RuiColorHue.js";
+import RuiColorInput_default from "./RuiColorInput.js";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, reactive, unref, useModel, watch } from "vue";
+import { whenever } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/color-picker/RuiColorPicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col gap-5 p-4" };
+var _hoisted_2 = { class: "flex items-center gap-4" };
+var RuiColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiColorPicker",
+	inheritAttrs: false,
+	__name: "RuiColorPicker",
+	props: {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const state = reactive({ color: new Color(get$1(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);
+		});
+		watch(() => state.color.hex, (hex) => {
+			set$1(modelValue, hex);
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				role: "application",
+				"aria-label": "Color picker",
+				"data-id": "color-picker",
+				class: "relative select-none bg-initial"
+			}, _ctx.$attrs), [createVNode(RuiColorBoard_default, {
+				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(RuiColorDisplay_default, { color: unref(state).color.hexString }, null, 8, ["color"]), createVNode(RuiColorHue_default, {
+				modelValue: unref(state).color.hue,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(state).color.hue = $event),
+				class: "flex-1"
+			}, null, 8, ["modelValue"])]), createVNode(RuiColorInput_default, {
+				modelValue: unref(state).color,
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(state).color = $event)
+			}, null, 8, ["modelValue"])])], 16);
+		};
+	}
+});
+//#endregion
+export { RuiColorPicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { 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    data-id=\"color-picker\"\n    class=\"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,aAAa,SAAmB,SAAA,aAAiB;EAEvD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,MAAI,WAAW,CAAC,EAClC,CAAC;EAEF,SAAS,cAAc,EACrB,YACA,cAIO;AACP,SAAM,MAAM,aAAa;AACzB,SAAM,MAAM,aAAa;;AAG3B,WACE,aACC,UAAkB;AACjB,OAAI,MAAM,MAAM,QAAQ,MACtB,OAAM,QAAQ,IAAI,MAAM,MAAM;IAEnC;AAED,cACQ,MAAM,MAAM,MACjB,QAAgB;AACf,SAAI,YAAY,IAAI;KAEtB,EAAE,WAAW,MAAM,CACpB;;uBAIC,mBAsBM,OAtBN,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACR,OAAM;MACEA,KAAAA,OAAM,EAAA,CAEd,YAGE,uBAAA;IAFC,OAAO,MAAA,MAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,OAAM;2BAErC,mBAUM,OAVN,YAUM,CATJ,mBAMM,OANN,YAMM,CALJ,YAAkD,yBAAA,EAAhC,OAAO,MAAA,MAAK,CAAC,MAAM,WAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,EACrC,YAGE,qBAAA;gBAFS,MAAA,MAAK,CAAC,MAAM;uEAAZ,MAAK,CAAC,MAAM,MAAG;IACxB,OAAM;kCAIV,YAAuC,uBAAA;gBAAf,MAAA,MAAK,CAAC;uEAAN,MAAK,CAAC,QAAK"}

package/dist/components/color-picker/utils.d.ts

@@ -10,13 +10,12 @@ export declare class Color {
     hueValue: number;
     saturationValue: number;
     brightnessValue: number;
-    hslSaturationValue: number;
-    lightnessValue: number;
     constructor(input?: ColorInput);
-    initAlpha: () => void;
-    initLightness: () => void;
-    initRgb: () => void;
-    initHsb: () => void;
+    initAlpha(): void;
+    initRgb(): void;
+    initHsb(): void;
+    updateFromHsv(h: number, s: number, v: number): void;
+    updateFromRgb(r: number, g: number, b: number): void;
     toString(format?: ColorFormat): string;
     get hexString(): string;
     get hex(): string;
@@ -35,10 +34,14 @@ export declare class Color {
     get blue(): number;
     get rgb(): [number, number, number];
 }
-export declare function useElementDrag(handler: (x: number, y: number) => any): {
+type DragHandler = (x: number, y: number) => void;
+interface DragEvents {
     handleClick: (e: {
         clientX: number;
         clientY: number;
     }) => void;
     onMouseDown: (e: MouseEvent) => void;
-};
+    onTouchStart: (e: TouchEvent) => void;
+}
+export declare function useElementDrag(handler: DragHandler): DragEvents;
+export {};