@rotki/ui-library 2.8.1 → 2.8.3

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

@@ -0,0 +1,182 @@
+import tinycolor from "tinycolor2";
+import { onUnmounted } from "vue";
+function roundTwoDecimal(num) {
+  return Math.round(num * 100) / 100;
+}
+class Color {
+  instance;
+  alphaValue = 0;
+  // rgb
+  redValue = 0;
+  greenValue = 0;
+  blueValue = 0;
+  // HSV
+  hueValue = 0;
+  saturationValue = 0;
+  brightnessValue = 0;
+  // HSL
+  hslSaturationValue = 0;
+  lightnessValue = 0;
+  constructor(input) {
+    this.instance = tinycolor(input);
+    this.initRgb();
+    this.initHsb();
+    this.initLightness();
+    this.initAlpha();
+  }
+  initAlpha = () => {
+    const initAlpha = this.instance.getAlpha();
+    this.alphaValue = Math.min(1, initAlpha) * 100;
+  };
+  initLightness = () => {
+    const { l, s } = this.instance.toHsl();
+    this.hslSaturationValue = roundTwoDecimal(s);
+    this.lightnessValue = roundTwoDecimal(l);
+  };
+  initRgb = () => {
+    const { b, g, r } = this.instance.toRgb();
+    this.redValue = roundTwoDecimal(r);
+    this.greenValue = roundTwoDecimal(g);
+    this.blueValue = roundTwoDecimal(b);
+  };
+  initHsb = () => {
+    const { h, s, v } = this.instance.toHsv();
+    this.hueValue = Math.min(360, Math.ceil(h));
+    this.saturationValue = roundTwoDecimal(s);
+    this.brightnessValue = roundTwoDecimal(v);
+  };
+  toString(format) {
+    return this.instance.toString(format);
+  }
+  get hexString() {
+    return this.instance.toHexString();
+  }
+  get hex() {
+    return this.instance.toHex();
+  }
+  set hex(hexString) {
+    this.instance = tinycolor(hexString);
+    this.initHsb();
+    this.initRgb();
+    this.initAlpha();
+    this.initLightness();
+  }
+  set hue(value) {
+    if (this.saturation === 0 && this.brightness === 0) {
+      this.saturationValue = 1;
+      this.brightnessValue = 1;
+    }
+    this.instance = tinycolor({
+      a: this.alphaValue / 100,
+      h: roundTwoDecimal(value),
+      s: this.saturation,
+      v: this.brightness
+    });
+    this.initRgb();
+    this.initLightness();
+    this.hueValue = roundTwoDecimal(value);
+  }
+  get hue() {
+    return this.hueValue;
+  }
+  set saturation(value) {
+    this.instance = tinycolor({
+      a: this.alphaValue / 100,
+      h: this.hue,
+      s: roundTwoDecimal(value),
+      v: this.brightness
+    });
+    this.initRgb();
+    this.initLightness();
+    this.saturationValue = roundTwoDecimal(value);
+  }
+  get saturation() {
+    return this.saturationValue;
+  }
+  set brightness(value) {
+    this.instance = tinycolor({
+      a: this.alphaValue / 100,
+      h: this.hue,
+      s: this.saturation,
+      v: roundTwoDecimal(value)
+    });
+    this.initRgb();
+    this.initLightness();
+    this.brightnessValue = roundTwoDecimal(value);
+  }
+  get brightness() {
+    return this.brightnessValue;
+  }
+  set red(value) {
+    const rgb = this.instance.toRgb();
+    this.instance = tinycolor({
+      ...rgb,
+      a: this.alphaValue / 100,
+      r: roundTwoDecimal(value)
+    });
+    this.initHsb();
+    this.initLightness();
+    this.redValue = roundTwoDecimal(value);
+  }
+  get red() {
+    return this.redValue;
+  }
+  set green(value) {
+    const rgb = this.instance.toRgb();
+    this.instance = tinycolor({
+      ...rgb,
+      a: this.alphaValue / 100,
+      g: roundTwoDecimal(value)
+    });
+    this.initHsb();
+    this.initLightness();
+    this.greenValue = roundTwoDecimal(value);
+  }
+  get green() {
+    return this.greenValue;
+  }
+  set blue(value) {
+    const rgb = this.instance.toRgb();
+    this.instance = tinycolor({
+      ...rgb,
+      a: this.alphaValue / 100,
+      b: roundTwoDecimal(value)
+    });
+    this.initHsb();
+    this.initLightness();
+    this.blueValue = roundTwoDecimal(value);
+  }
+  get blue() {
+    return this.blueValue;
+  }
+  get rgb() {
+    return [this.red, this.green, this.blue];
+  }
+}
+function useElementDrag(handler) {
+  function handleClick(e) {
+    handler(e.clientX, e.clientY);
+  }
+  function onMouseDown(e) {
+    e.preventDefault();
+    window.addEventListener("mousemove", handleClick);
+    window.addEventListener("mouseup", handleMouseUp);
+  }
+  function handleMouseUp() {
+    window.removeEventListener("mousemove", handleClick);
+    window.removeEventListener("mouseup", handleMouseUp);
+  }
+  onUnmounted(() => {
+    handleMouseUp();
+  });
+  return {
+    handleClick,
+    onMouseDown
+  };
+}
+export {
+  Color,
+  roundTwoDecimal,
+  useElementDrag
+};
+//# sourceMappingURL=utils.js.map

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

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

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

@@ -1,4 +1,4 @@
-import type { TimeAccuracy } from '../../consts/time-accuracy';
+import type { TimeAccuracy } from '../../consts/time-accuracy.js';
 type DateFormat = 'year-first' | 'month-first' | 'day-first';
 type DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';
 type ModelValueType<T extends DateTimeModelType> = T extends 'date' ? Date | undefined : T extends 'epoch-ms' ? number | undefined : T extends 'epoch' ? number | undefined : Date | number | undefined;

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

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

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

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