@yh-ui/components 0.1.0

package/dist/color-picker/src/color-picker.vue.d.ts

@@ -0,0 +1,55 @@
+interface EyeDropper {
+    open(): Promise<{
+        sRGBHex: string;
+    }>;
+    abort(): void;
+}
+declare global {
+    interface Window {
+        EyeDropper: new () => EyeDropper;
+    }
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly showAlpha: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly colorFormat: {
+        readonly type: import("vue").PropType<"hex" | "rgb" | "hsl" | "hsv">;
+        readonly default: "hex";
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<"large" | "default" | "small">;
+        readonly default: "default";
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly predefine: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: () => never[];
+    };
+    readonly popperClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    readonly disabled: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly size: "small" | "default" | "large";
+    readonly modelValue: string;
+    readonly popperClass: string;
+    readonly showAlpha: boolean;
+    readonly colorFormat: "hex" | "rgb" | "hsl" | "hsv";
+    readonly predefine: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/color-picker/src/hue-slider.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    h: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (h: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((h: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/color-picker/src/hue-slider.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  h: { type: Number, required: true }
+});
+const emit = defineEmits(["update"]);
+const sliderRef = ref();
+const handleStyle = computed(() => ({
+  left: `${props.h / 360 * 100}%`
+}));
+const handleDrag = (event) => {
+  if (!sliderRef.value) return;
+  const rect = sliderRef.value.getBoundingClientRect();
+  const clientX = event.clientX ?? event.touches[0].clientX;
+  let left = (clientX - rect.left) / rect.width * 100;
+  left = Math.max(0, Math.min(100, left));
+  emit("update", Math.round(left / 100 * 360));
+};
+const handleMouseDown = (event) => {
+  handleDrag(event);
+  const onMouseMove = (e) => handleDrag(e);
+  const onMouseUp = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+};
+</script>
+
+<template>
+  <div ref="sliderRef" class="yh-color-hue-slider" @mousedown="handleMouseDown">
+    <div class="yh-color-hue-slider__handle" :style="handleStyle"></div>
+  </div>
+</template>
+
+<style>
+.yh-color-hue-slider {
+  position: relative;
+  width: 100%;
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  cursor: pointer;
+}
+.yh-color-hue-slider__handle {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+</style>

package/dist/color-picker/src/hue-slider.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    h: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (h: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((h: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/color-picker/src/sv-panel.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    h: number;
+    s: number;
+    v: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (s: number, v: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((s: number, v: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/color-picker/src/sv-panel.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  h: { type: Number, required: true },
+  s: { type: Number, required: true },
+  v: { type: Number, required: true }
+});
+const emit = defineEmits(["update"]);
+const panelRef = ref();
+const cursorStyle = computed(() => ({
+  left: `${props.s}%`,
+  top: `${100 - props.v}%`
+}));
+const backgroundStyle = computed(() => ({
+  backgroundColor: `hsl(${props.h}, 100%, 50%)`
+}));
+const handleDrag = (event) => {
+  if (!panelRef.value) return;
+  const rect = panelRef.value.getBoundingClientRect();
+  const clientX = event.clientX ?? event.touches[0].clientX;
+  const clientY = event.clientY ?? event.touches[0].clientY;
+  let left = (clientX - rect.left) / rect.width * 100;
+  let top = (clientY - rect.top) / rect.height * 100;
+  left = Math.max(0, Math.min(100, left));
+  top = Math.max(0, Math.min(100, top));
+  emit("update", Math.round(left), Math.round(100 - top));
+};
+const handleMouseDown = (event) => {
+  handleDrag(event);
+  const onMouseMove = (e) => handleDrag(e);
+  const onMouseUp = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+};
+</script>
+
+<template>
+  <div
+    ref="panelRef"
+    class="yh-color-sv-panel"
+    :style="backgroundStyle"
+    @mousedown="handleMouseDown"
+  >
+    <div class="yh-color-sv-panel__white"></div>
+    <div class="yh-color-sv-panel__black"></div>
+    <div class="yh-color-sv-panel__cursor" :style="cursorStyle"></div>
+  </div>
+</template>
+
+<style>
+.yh-color-sv-panel {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  cursor: crosshair;
+  background-color: red;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.yh-color-sv-panel__white, .yh-color-sv-panel__black {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.yh-color-sv-panel__white {
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+.yh-color-sv-panel__black {
+  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+}
+.yh-color-sv-panel__cursor {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  transform: translate(-3px, -3px);
+}
+</style>

package/dist/color-picker/src/sv-panel.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    h: number;
+    s: number;
+    v: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (s: number, v: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((s: number, v: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/color-picker/src/utils.cjs

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rgbToHsv = exports.rgbToHex = exports.parseColor = exports.hsvToRgb = exports.hexToRgb = exports.getLuminance = exports.getContrastRatio = exports.formatColor = void 0;
+const hsvToRgb = (h, s, v) => {
+  s /= 100;
+  v /= 100;
+  let r = 0,
+    g = 0,
+    b = 0;
+  const i = Math.floor(h / 60);
+  const f = h / 60 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0:
+      r = v;
+      g = t;
+      b = p;
+      break;
+    case 1:
+      r = q;
+      g = v;
+      b = p;
+      break;
+    case 2:
+      r = p;
+      g = v;
+      b = t;
+      break;
+    case 3:
+      r = p;
+      g = q;
+      b = v;
+      break;
+    case 4:
+      r = t;
+      g = p;
+      b = v;
+      break;
+    case 5:
+      r = v;
+      g = p;
+      b = q;
+      break;
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+};
+exports.hsvToRgb = hsvToRgb;
+const rgbToHex = (r, g, b) => {
+  const toHex = n => n.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+};
+exports.rgbToHex = rgbToHex;
+const hexToRgb = hex => {
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (hex.length === 4) {
+    r = parseInt(hex[1] + hex[1], 16);
+    g = parseInt(hex[2] + hex[2], 16);
+    b = parseInt(hex[3] + hex[3], 16);
+  } else if (hex.length === 7) {
+    r = parseInt(hex.substring(1, 3), 16);
+    g = parseInt(hex.substring(3, 5), 16);
+    b = parseInt(hex.substring(5, 7), 16);
+  }
+  return {
+    r,
+    g,
+    b
+  };
+};
+exports.hexToRgb = hexToRgb;
+const rgbToHsv = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h = 0,
+    s,
+    v = max;
+  const d = max - min;
+  s = max === 0 ? 0 : d / max;
+  if (max !== min) {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    v: Math.round(v * 100)
+  };
+};
+exports.rgbToHsv = rgbToHsv;
+const parseColor = color => {
+  if (!color) return {
+    h: 0,
+    s: 100,
+    v: 100,
+    a: 1
+  };
+  if (color.startsWith("#")) {
+    const rgb = hexToRgb(color);
+    const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+    return {
+      ...hsv,
+      a: 1
+    };
+  }
+  const matchRgba = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (matchRgba) {
+    const hsv = rgbToHsv(parseInt(matchRgba[1]), parseInt(matchRgba[2]), parseInt(matchRgba[3]));
+    return {
+      ...hsv,
+      a: matchRgba[4] ? parseFloat(matchRgba[4]) : 1
+    };
+  }
+  return {
+    h: 0,
+    s: 100,
+    v: 100,
+    a: 1
+  };
+};
+exports.parseColor = parseColor;
+const formatColor = (hsv, format) => {
+  const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
+  if (format === "hex") return rgbToHex(rgb.r, rgb.g, rgb.b);
+  if (format === "rgb") {
+    return hsv.a < 1 ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${hsv.a})` : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+  }
+  return rgbToHex(rgb.r, rgb.g, rgb.b);
+};
+exports.formatColor = formatColor;
+const getLuminance = (r, g, b) => {
+  const [lr, lg, lb] = [r, g, b].map(v => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+};
+exports.getLuminance = getLuminance;
+const getContrastRatio = (lum1, lum2) => {
+  const l1 = Math.max(lum1, lum2);
+  const l2 = Math.min(lum1, lum2);
+  return (l1 + 0.05) / (l2 + 0.05);
+};
+exports.getContrastRatio = getContrastRatio;

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

@@ -0,0 +1,34 @@
+/**
+ * Color logic for ColorPicker
+ */
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+export declare const hsvToRgb: (h: number, s: number, v: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const rgbToHsv: (r: number, g: number, b: number) => {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const parseColor: (color: string) => {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export declare const formatColor: (hsv: HSV, format: string) => string;
+export declare const getLuminance: (r: number, g: number, b: number) => number;
+export declare const getContrastRatio: (lum1: number, lum2: number) => number;

package/dist/color-picker/src/utils.mjs

@@ -0,0 +1,126 @@
+export const hsvToRgb = (h, s, v) => {
+  s /= 100;
+  v /= 100;
+  let r = 0, g = 0, b = 0;
+  const i = Math.floor(h / 60);
+  const f = h / 60 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0:
+      r = v;
+      g = t;
+      b = p;
+      break;
+    case 1:
+      r = q;
+      g = v;
+      b = p;
+      break;
+    case 2:
+      r = p;
+      g = v;
+      b = t;
+      break;
+    case 3:
+      r = p;
+      g = q;
+      b = v;
+      break;
+    case 4:
+      r = t;
+      g = p;
+      b = v;
+      break;
+    case 5:
+      r = v;
+      g = p;
+      b = q;
+      break;
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+};
+export const rgbToHex = (r, g, b) => {
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+};
+export const hexToRgb = (hex) => {
+  let r = 0, g = 0, b = 0;
+  if (hex.length === 4) {
+    r = parseInt(hex[1] + hex[1], 16);
+    g = parseInt(hex[2] + hex[2], 16);
+    b = parseInt(hex[3] + hex[3], 16);
+  } else if (hex.length === 7) {
+    r = parseInt(hex.substring(1, 3), 16);
+    g = parseInt(hex.substring(3, 5), 16);
+    b = parseInt(hex.substring(5, 7), 16);
+  }
+  return { r, g, b };
+};
+export const rgbToHsv = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h = 0, s, v = max;
+  const d = max - min;
+  s = max === 0 ? 0 : d / max;
+  if (max !== min) {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    v: Math.round(v * 100)
+  };
+};
+export const parseColor = (color) => {
+  if (!color) return { h: 0, s: 100, v: 100, a: 1 };
+  if (color.startsWith("#")) {
+    const rgb = hexToRgb(color);
+    const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+    return { ...hsv, a: 1 };
+  }
+  const matchRgba = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (matchRgba) {
+    const hsv = rgbToHsv(parseInt(matchRgba[1]), parseInt(matchRgba[2]), parseInt(matchRgba[3]));
+    return { ...hsv, a: matchRgba[4] ? parseFloat(matchRgba[4]) : 1 };
+  }
+  return { h: 0, s: 100, v: 100, a: 1 };
+};
+export const formatColor = (hsv, format) => {
+  const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
+  if (format === "hex") return rgbToHex(rgb.r, rgb.g, rgb.b);
+  if (format === "rgb") {
+    return hsv.a < 1 ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${hsv.a})` : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+  }
+  return rgbToHex(rgb.r, rgb.g, rgb.b);
+};
+export const getLuminance = (r, g, b) => {
+  const [lr, lg, lb] = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+};
+export const getContrastRatio = (lum1, lum2) => {
+  const l1 = Math.max(lum1, lum2);
+  const l2 = Math.min(lum1, lum2);
+  return (l1 + 0.05) / (l2 + 0.05);
+};