@transsionfe/semi-ui-vue 0.0.1

package/lib/es/components/colorPicker/ColorChooseArea.vue.js

@@ -0,0 +1,101 @@
+import { defineComponent as M, ref as d, nextTick as S, onMounted as H, watch as x, computed as l, onUnmounted as $, createElementBlock as B, openBlock as A, unref as r, normalizeStyle as h, normalizeClass as v, createElementVNode as z, withModifiers as E } from "vue";
+import F from "@douyinfe/semi-foundation/colorPicker/ColorChooseAreaFoundation";
+import { hsvaToHslString as _, hsvaToRgba as k } from "@douyinfe/semi-foundation/colorPicker/utils/convert";
+import { round as p } from "@douyinfe/semi-foundation/colorPicker/utils/round";
+import { cssClasses as c } from "@douyinfe/semi-foundation/colorPicker/constants";
+import { useBaseComponent as L } from "../_utils/useBaseComponent.js";
+import { useFoundation as D } from "../../_utils/useFoundation.js";
+const N = ["aria-valuetext"], J = /* @__PURE__ */ M({
+  __name: "ColorChooseArea",
+  props: {
+    hsva: {},
+    onChange: { type: Function },
+    handleSize: {},
+    width: {},
+    height: {},
+    foundation: {},
+    className: {},
+    style: {}
+  },
+  setup(m) {
+    const e = m, t = d(null), n = d({
+      handlePosition: { x: 0, y: 0 },
+      isHandleGrabbing: !1
+    }), { adapter: f } = L(e, n), y = {
+      ...f,
+      getColorPickerFoundation: () => e.foundation,
+      handleMouseDown: (o) => {
+        n.value.isHandleGrabbing = !0, t.value && t.value.addEventListener(
+          "mousemove",
+          i.setHandlePositionByMousePosition
+        ), window.addEventListener("mouseup", i.handleMouseUp);
+      },
+      handleMouseUp: () => {
+        t.value && t.value.removeEventListener(
+          "mousemove",
+          i.setHandlePositionByMousePosition
+        ), window.removeEventListener("mouseup", i.handleMouseUp), n.value.isHandleGrabbing = !1;
+      },
+      getDOM: () => t.value,
+      notifyChange: (o) => e.onChange(o)
+    }, { foundation: i } = D(F, y), a = i;
+    S(() => {
+      try {
+        a && (n.value.handlePosition = a.getHandlePositionByHSVA());
+      } catch (o) {
+        console.warn("ColorChooseArea: Failed to initialize handle position", o);
+      }
+    }), H(() => {
+      if (t.value && a)
+        try {
+          n.value.handlePosition = a.getHandlePositionByHSVA();
+        } catch (o) {
+          console.warn("ColorChooseArea: Failed to update handle position in onMounted", o);
+        }
+    }), x(
+      () => e.hsva,
+      (o, u) => {
+        JSON.stringify(u) !== JSON.stringify(o) && (n.value.handlePosition = a.getHandlePositionByHSVA());
+      },
+      { deep: !0 }
+    );
+    const g = l(() => _({ h: e.hsva.h, s: 100, v: 100, a: 1 })), s = l(() => k(e.hsva)), C = l(() => ({
+      backgroundColor: g.value,
+      width: typeof e.width == "number" ? `${e.width}px` : e.width,
+      height: typeof e.height == "number" ? `${e.height}px` : e.height,
+      cursor: n.value.isHandleGrabbing ? "grabbing" : "pointer",
+      ...e.style
+    })), P = l(() => ({
+      width: typeof e.handleSize == "number" ? `${e.handleSize}px` : e.handleSize,
+      height: typeof e.handleSize == "number" ? `${e.handleSize}px` : e.handleSize,
+      left: typeof n.value.handlePosition.x == "number" ? `${n.value.handlePosition.x}px` : n.value.handlePosition.x,
+      top: typeof n.value.handlePosition.y == "number" ? `${n.value.handlePosition.y}px` : n.value.handlePosition.y,
+      backgroundColor: `rgba(${s.value.r},${s.value.g},${s.value.b},${s.value.a})`
+    })), b = (o) => {
+      a.setHandlePositionByMousePosition(o), a.handleMouseDown(o);
+    }, w = (o) => {
+      a.handleMouseDown(o);
+    };
+    return $(() => {
+      t.value && t.value.removeEventListener("mousemove", a.setHandlePositionByMousePosition), window.removeEventListener("mouseup", a.handleMouseUp);
+    }), (o, u) => (A(), B("div", {
+      ref_key: "areaRef",
+      ref: t,
+      class: v([`${r(c).PREFIX}-colorChooseArea`, e.className]),
+      style: h(C.value),
+      "aria-label": "Color",
+      "aria-valuetext": `Saturation ${r(p)(e.hsva.s)}%, Brightness ${r(p)(e.hsva.v)}%`,
+      onMousedown: b
+    }, [
+      z("div", {
+        class: v(`${r(c).PREFIX}-handle`),
+        style: h(P.value),
+        onMousedown: E(w, ["stop"])
+      }, null, 38)
+    ], 46, N));
+  }
+});
+export {
+  J as default
+};
+//# sourceMappingURL=ColorChooseArea.vue.js.map

package/lib/es/components/colorPicker/ColorChooseArea.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorChooseArea.vue.js","sources":["../../../../src/components/colorPicker/ColorChooseArea.vue"],"sourcesContent":["<template>\n    <div\n        ref=\"areaRef\"\n        :class=\"[`${cssClasses.PREFIX}-colorChooseArea`, props.className]\"\n        :style=\"areaStyle\"\n        aria-label=\"Color\"\n        :aria-valuetext=\"`Saturation ${round(props.hsva.s)}%, Brightness ${round(props.hsva.v)}%`\"\n        @mousedown=\"handleClick\"\n    >\n        <div :class=\"`${cssClasses.PREFIX}-handle`\" :style=\"handleStyle\" @mousedown.stop=\"handleHandleMouseDown\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';\nimport type { HsvaColor } from '@douyinfe/semi-foundation/colorPicker/interface';\nimport ColorChooseAreaFoundation from '@douyinfe/semi-foundation/colorPicker/ColorChooseAreaFoundation';\nimport type ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport { hsvaToHslString, hsvaToRgba } from '@douyinfe/semi-foundation/colorPicker/utils/convert';\nimport { round } from '@douyinfe/semi-foundation/colorPicker/utils/round';\nimport { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';\nimport { useFoundation, useBaseComponent } from '../_utils';\n\ninterface Props {\n    hsva: HsvaColor;\n    onChange: (newColor: { s: number; v: number }) => void;\n    handleSize: number;\n    width: number;\n    height: number;\n    foundation: ColorPickerFoundation;\n    className?: string;\n    style?: Record<string, any>;\n}\n\nconst props = defineProps<Props>();\n\nconst areaRef = ref<HTMLDivElement | null>(null);\n\nconst state = ref({\n    handlePosition: { x: 0, y: 0 },\n    isHandleGrabbing: false,\n});\n\nconst { adapter: baseAdapter } = useBaseComponent(props, state);\n\nconst adapter = {\n    ...baseAdapter,\n    getColorPickerFoundation: () => props.foundation,\n    handleMouseDown: (_e: MouseEvent) => {\n        state.value.isHandleGrabbing = true;\n        if (areaRef.value) {\n            areaRef.value.addEventListener(\n                'mousemove',\n                (colorChooseAreaFoundation as any).setHandlePositionByMousePosition\n            );\n        }\n        window.addEventListener('mouseup', (colorChooseAreaFoundation as any).handleMouseUp);\n    },\n    handleMouseUp: () => {\n        if (areaRef.value) {\n            areaRef.value.removeEventListener(\n                'mousemove',\n                (colorChooseAreaFoundation as any).setHandlePositionByMousePosition\n            );\n        }\n        window.removeEventListener('mouseup', (colorChooseAreaFoundation as any).handleMouseUp);\n        state.value.isHandleGrabbing = false;\n    },\n    getDOM: () => areaRef.value,\n    notifyChange: (newColor: { s: number; v: number }) => props.onChange(newColor),\n};\n\nconst { foundation: colorChooseAreaFoundation } = useFoundation(ColorChooseAreaFoundation as any, adapter as any);\nconst colorChooseAreaFoundationTyped = colorChooseAreaFoundation as InstanceType<typeof ColorChooseAreaFoundation>;\n\nnextTick(() => {\n    try {\n        if (colorChooseAreaFoundationTyped) {\n            state.value.handlePosition = colorChooseAreaFoundationTyped.getHandlePositionByHSVA();\n        }\n    } catch (e) {\n        console.warn('ColorChooseArea: Failed to initialize handle position', e);\n    }\n});\n\nonMounted(() => {\n    if (areaRef.value && colorChooseAreaFoundationTyped) {\n        try {\n            state.value.handlePosition = colorChooseAreaFoundationTyped.getHandlePositionByHSVA();\n        } catch (e) {\n            console.warn('ColorChooseArea: Failed to update handle position in onMounted', e);\n        }\n    }\n});\n\nwatch(\n    () => props.hsva,\n    (newHsva, oldHsva) => {\n        if (JSON.stringify(oldHsva) !== JSON.stringify(newHsva)) {\n            state.value.handlePosition = colorChooseAreaFoundationTyped.getHandlePositionByHSVA();\n        }\n    },\n    { deep: true }\n);\n\nconst areaBgStyle = computed(() => hsvaToHslString({ h: props.hsva.h, s: 100, v: 100, a: 1 }));\nconst currentColor = computed(() => hsvaToRgba(props.hsva));\n\nconst areaStyle = computed(() => ({\n    backgroundColor: areaBgStyle.value,\n    width: typeof props.width === 'number' ? `${props.width}px` : props.width,\n    height: typeof props.height === 'number' ? `${props.height}px` : props.height,\n    cursor: state.value.isHandleGrabbing ? 'grabbing' : 'pointer',\n    ...props.style,\n}));\n\nconst handleStyle = computed(() => ({\n    width: typeof props.handleSize === 'number' ? `${props.handleSize}px` : props.handleSize,\n    height: typeof props.handleSize === 'number' ? `${props.handleSize}px` : props.handleSize,\n    left:\n        typeof state.value.handlePosition.x === 'number'\n            ? `${state.value.handlePosition.x}px`\n            : state.value.handlePosition.x,\n    top:\n        typeof state.value.handlePosition.y === 'number'\n            ? `${state.value.handlePosition.y}px`\n            : state.value.handlePosition.y,\n    backgroundColor: `rgba(${currentColor.value.r},${currentColor.value.g},${currentColor.value.b},${currentColor.value.a})`,\n}));\n\nconst handleClick = (e: MouseEvent) => {\n    colorChooseAreaFoundationTyped.setHandlePositionByMousePosition(e);\n    colorChooseAreaFoundationTyped.handleMouseDown(e);\n};\n\nconst handleHandleMouseDown = (e: MouseEvent) => {\n    colorChooseAreaFoundationTyped.handleMouseDown(e);\n};\n\nonUnmounted(() => {\n    if (areaRef.value) {\n        areaRef.value.removeEventListener('mousemove', colorChooseAreaFoundationTyped.setHandlePositionByMousePosition);\n    }\n    window.removeEventListener('mouseup', colorChooseAreaFoundationTyped.handleMouseUp);\n});\n</script>\n"],"names":["props","__props","areaRef","ref","state","baseAdapter","useBaseComponent","adapter","_e","colorChooseAreaFoundation","newColor","useFoundation","ColorChooseAreaFoundation","colorChooseAreaFoundationTyped","nextTick","e","onMounted","watch","newHsva","oldHsva","areaBgStyle","computed","hsvaToHslString","currentColor","hsvaToRgba","areaStyle","handleStyle","handleClick","handleHandleMouseDown","onUnmounted","_createElementBlock","_unref","cssClasses","round","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/lib/es/components/colorPicker/ColorPicker.vue.js

@@ -0,0 +1,130 @@
+import { defineComponent as I, mergeModels as b, useModel as R, useSlots as S, computed as k, ref as X, watch as w, createBlock as $, openBlock as m, unref as r, mergeProps as M, withCtx as l, renderSlot as u, createElementBlock as x, normalizeStyle as v, normalizeClass as f, createVNode as z } from "vue";
+import A from "@douyinfe/semi-foundation/colorPicker/foundation";
+import { cssClasses as i } from "@douyinfe/semi-foundation/colorPicker/constants";
+import V from "./ColorPickerInner.vue.js";
+import D from "../popover/Popover.vue.js";
+/* empty css                      */
+import T from "classnames";
+import { colorStringToValue as j } from "./utils.js";
+import { useBaseComponent as q } from "../_utils/useBaseComponent.js";
+import { useFoundation as G } from "../../_utils/useFoundation.js";
+const H = {
+  name: "ColorPicker",
+  colorStringToValue: j
+}, oe = /* @__PURE__ */ I({
+  ...H,
+  props: /* @__PURE__ */ b({
+    eyeDropper: { type: Boolean, default: !0 },
+    defaultValue: { default: () => ({
+      hsva: { h: 176, s: 71, v: 77, a: 1 },
+      rgba: { r: 57, g: 197, b: 187, a: 1 },
+      hex: "#39c5bb"
+    }) },
+    value: {},
+    onChange: {},
+    alpha: { type: Boolean },
+    width: {},
+    height: {},
+    defaultFormat: { default: "hex" },
+    usePopover: { type: Boolean },
+    popoverProps: {},
+    className: {},
+    style: {}
+  }, {
+    modelValue: {
+      default: void 0
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ b(["change"], ["update:modelValue"]),
+  setup(h, { emit: F }) {
+    const t = R(h, "modelValue"), e = h, _ = F, B = S(), C = k(() => t.value !== void 0 || e.value !== void 0), g = () => t.value !== void 0 ? t.value : e.value !== void 0 ? e.value : e.defaultValue, p = X({
+      currentColor: g()
+    }), { adapter: d } = q(e, p), N = {
+      ...d,
+      getProp: (o) => o === "value" ? t.value ?? e.value : d.getProp(o),
+      getProps: () => ({
+        ...d.getProps(),
+        // 确保 value 使用最新的 modelValue（v-model）
+        value: t.value ?? e.value
+      }),
+      notifyChange: (o) => {
+        t.value !== void 0 && (t.value = o), e.value !== void 0 && _("change", o), C.value || (p.value.currentColor = o);
+      }
+    }, { foundation: E } = G(A, N), a = E, s = k(() => a ? a.getCurrentColor() : g());
+    w(
+      () => [t.value, e.value],
+      ([o, c]) => {
+        if (!a) return;
+        const n = o ?? c;
+        n && C.value && (p.value.currentColor = n);
+      },
+      { deep: !0, immediate: !0 }
+    );
+    const P = ({ s: o, v: c }) => {
+      a && a.handleChange(
+        {
+          s: o,
+          v: c,
+          a: s.value.hsva.a,
+          h: s.value.hsva.h
+        },
+        "hsva"
+      );
+    };
+    return (o, c) => {
+      var n, y;
+      return e.usePopover ? (m(), $(r(D), M({
+        key: 0,
+        "content-class-name": r(T)(`${r(i).PREFIX}-popover`, (n = e.popoverProps) == null ? void 0 : n.className)
+      }, { ...e.popoverProps, trigger: ((y = e.popoverProps) == null ? void 0 : y.trigger) ?? "click" }), {
+        content: l(() => [
+          z(V, {
+            class: f([`${r(i).PREFIX}`, e.className]),
+            style: v(e.style),
+            "current-color": s.value,
+            foundation: r(a),
+            props: e,
+            onColorChange: P
+          }, {
+            top: l(() => [
+              u(o.$slots, "top")
+            ]),
+            bottom: l(() => [
+              u(o.$slots, "bottom")
+            ]),
+            _: 3
+          }, 8, ["class", "style", "current-color", "foundation"])
+        ]),
+        default: l(() => [
+          B.default ? u(o.$slots, "default", { key: 0 }) : (m(), x("div", {
+            key: 1,
+            class: f(`${r(i).PREFIX}-popover-defaultChildren`),
+            style: v({ backgroundColor: s.value.hex })
+          }, null, 6))
+        ]),
+        _: 3
+      }, 16, ["content-class-name"])) : (m(), $(V, {
+        key: 1,
+        class: f([`${r(i).PREFIX}`, e.className]),
+        style: v(e.style),
+        "current-color": s.value,
+        foundation: r(a),
+        props: e,
+        onColorChange: P
+      }, {
+        top: l(() => [
+          u(o.$slots, "top")
+        ]),
+        bottom: l(() => [
+          u(o.$slots, "bottom")
+        ]),
+        _: 3
+      }, 8, ["class", "style", "current-color", "foundation"]));
+    };
+  }
+});
+export {
+  oe as default
+};
+//# sourceMappingURL=ColorPicker.vue.js.map

package/lib/es/components/colorPicker/ColorPicker.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.vue.js","sources":["../../../../src/components/colorPicker/ColorPicker.vue"],"sourcesContent":["<template>\n    <Popover\n        v-if=\"props.usePopover\"\n        :content-class-name=\"classNames(`${cssClasses.PREFIX}-popover`, props.popoverProps?.className)\"\n        v-bind=\"{ ...props.popoverProps, trigger: props.popoverProps?.trigger ?? 'click' }\"\n    >\n        <template #content>\n            <ColorPickerInner\n                :class=\"[`${cssClasses.PREFIX}`, props.className]\"\n                :style=\"props.style\"\n                :current-color=\"currentColor\"\n                :foundation=\"colorPickerFoundation\"\n                :props=\"props\"\n                @color-change=\"handleColorChange\"\n            >\n                <template #top>\n                    <slot name=\"top\" />\n                </template>\n                <template #bottom>\n                    <slot name=\"bottom\" />\n                </template>\n            </ColorPickerInner>\n        </template>\n        <template v-if=\"slots.default\">\n            <slot />\n        </template>\n        <div\n            v-else\n            :class=\"`${cssClasses.PREFIX}-popover-defaultChildren`\"\n            :style=\"{ backgroundColor: currentColor.hex }\"\n        />\n    </Popover>\n    <ColorPickerInner\n        v-else\n        :class=\"[`${cssClasses.PREFIX}`, props.className]\"\n        :style=\"props.style\"\n        :current-color=\"currentColor\"\n        :foundation=\"colorPickerFoundation\"\n        :props=\"props\"\n        @color-change=\"handleColorChange\"\n    >\n        <template #top>\n            <slot name=\"top\" />\n        </template>\n        <template #bottom>\n            <slot name=\"bottom\" />\n        </template>\n    </ColorPickerInner>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport type { ColorValue } from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';\nimport { useFoundation, useBaseComponent } from '../_utils';\nimport ColorPickerInner from './ColorPickerInner.vue';\nimport Popover from '../popover';\nimport type { ColorPickerProps } from './interface';\nimport classNames from 'classnames';\n\nconst modelValue = defineModel<ColorValue | undefined>({\n    default: undefined,\n});\n\n// 其他 props\nconst props = withDefaults(defineProps<ColorPickerProps>(), {\n    eyeDropper: true,\n    defaultFormat: 'hex',\n    defaultValue: () => ({\n        hsva: { h: 176, s: 71, v: 77, a: 1 },\n        rgba: { r: 57, g: 197, b: 187, a: 1 },\n        hex: '#39c5bb',\n    }),\n});\n\nconst emit = defineEmits<{\n    change: [value: ColorValue];\n}>();\n\nconst slots = defineSlots<{\n    default?: () => any;\n    top?: () => any;\n    bottom?: () => any;\n}>();\n\n// 判断是否为受控组件\n// 优先级：v-model > value prop > defaultValue\nconst isControlled = computed(() => {\n    return modelValue.value !== undefined || props.value !== undefined;\n});\n\n// 获取初始颜色值\nconst getInitialColor = (): ColorValue => {\n    if (modelValue.value !== undefined) {\n        return modelValue.value;\n    }\n    if (props.value !== undefined) {\n        return props.value;\n    }\n    return props.defaultValue!;\n};\n\nconst state = ref({\n    currentColor: getInitialColor(),\n});\n\nconst { adapter: baseAdapter } = useBaseComponent(props, state);\n\nconst adapter = {\n    ...baseAdapter,\n    getProp: (key: string) => {\n        // 特殊处理 value prop，优先返回 modelValue（v-model）\n        if (key === 'value') {\n            return modelValue.value ?? props.value;\n        }\n        return baseAdapter.getProp(key);\n    },\n    getProps: () => {\n        const baseProps = baseAdapter.getProps();\n        return {\n            ...baseProps,\n            // 确保 value 使用最新的 modelValue（v-model）\n            value: modelValue.value ?? props.value,\n        };\n    },\n    notifyChange: (value: ColorValue) => {\n        // 如果使用 v-model，更新 modelValue\n        if (modelValue.value !== undefined) {\n            modelValue.value = value;\n        }\n        // 如果使用 value prop，触发 change 事件\n        if (props.value !== undefined) {\n            emit('change', value);\n        }\n        // 如果使用 defaultValue（非受控），更新内部状态\n        if (!isControlled.value) {\n            state.value.currentColor = value;\n        }\n    },\n};\n\nconst { foundation } = useFoundation(ColorPickerFoundation as any, adapter as any);\nconst colorPickerFoundation = foundation as ColorPickerFoundation;\n\nconst currentColor = computed(() => {\n    if (!colorPickerFoundation) {\n        return getInitialColor();\n    }\n    return colorPickerFoundation.getCurrentColor();\n});\n\nwatch(\n    () => [modelValue.value, props.value],\n    ([newModelValue, newValue]) => {\n        if (!colorPickerFoundation) return;\n\n        const externalValue = newModelValue ?? newValue;\n        if (externalValue && isControlled.value) {\n            state.value.currentColor = externalValue;\n        }\n    },\n    { deep: true, immediate: true }\n);\n\nconst handleColorChange = ({ s, v }: { s: number; v: number }) => {\n    if (!colorPickerFoundation) return;\n    colorPickerFoundation.handleChange(\n        {\n            s,\n            v,\n            a: currentColor.value.hsva.a,\n            h: currentColor.value.hsva.h,\n        },\n        'hsva'\n    );\n};\n</script>\n\n<script lang=\"ts\">\nimport { colorStringToValue } from './utils';\n\nexport default {\n    name: 'ColorPicker',\n    colorStringToValue,\n};\n</script>\n"],"names":["__default__","colorStringToValue","modelValue","_useModel","props","__props","emit","__emit","slots","_useSlots","isControlled","computed","getInitialColor","state","ref","baseAdapter","useBaseComponent","adapter","key","value","foundation","useFoundation","ColorPickerFoundation","colorPickerFoundation","currentColor","watch","newModelValue","newValue","externalValue","handleColorChange","s","v","_openBlock","_createBlock","_unref","_mergeProps","classNames","cssClasses","_a","_b","_createVNode","ColorPickerInner","_normalizeStyle","_renderSlot","_ctx","_createElementBlock","_normalizeClass"],"mappings":"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"}

package/lib/es/components/colorPicker/ColorPickerInner.vue.js

@@ -0,0 +1,67 @@
+import { defineComponent as u, computed as f, createElementBlock as p, openBlock as i, normalizeStyle as C, normalizeClass as w, renderSlot as s, createVNode as r, createBlock as g, createCommentVNode as v, unref as t } from "vue";
+import { cssClasses as y } from "@douyinfe/semi-foundation/colorPicker/constants";
+import N from "./ColorChooseArea.vue.js";
+import k from "./ColorSlider.vue.js";
+import $ from "./AlphaSlider.vue.js";
+import z from "./DataPart.vue.js";
+import S from "classnames";
+const b = /* @__PURE__ */ u({
+  __name: "ColorPickerInner",
+  props: {
+    currentColor: {},
+    foundation: {},
+    props: {},
+    className: {},
+    style: {}
+  },
+  emits: ["colorChange"],
+  setup(e, { emit: h }) {
+    const n = e, c = h, d = ({ s: a, v: l }) => {
+      c("colorChange", { s: a, v: l });
+    }, o = n.props, m = f(() => S(y.PREFIX, n.className));
+    return (a, l) => (i(), p("div", {
+      class: w(m.value),
+      style: C(n.style)
+    }, [
+      s(a.$slots, "top"),
+      r(N, {
+        hsva: e.currentColor.hsva,
+        foundation: e.foundation,
+        "on-change": d,
+        "handle-size": 20,
+        width: t(o).width ?? 280,
+        height: t(o).height ?? 280
+      }, null, 8, ["hsva", "foundation", "width", "height"]),
+      r(k, {
+        width: t(o).width ?? 280,
+        height: 10,
+        "handle-size": 18,
+        hue: e.currentColor.hsva.h,
+        foundation: e.foundation,
+        className: "colorSliderWrapper"
+      }, null, 8, ["width", "hue", "foundation"]),
+      t(o).alpha ? (i(), g($, {
+        key: 0,
+        width: t(o).width ?? 280,
+        height: 10,
+        "handle-size": 18,
+        hsva: e.currentColor.hsva,
+        foundation: e.foundation,
+        className: "alphaSliderWrapper"
+      }, null, 8, ["width", "hsva", "foundation"])) : v("", !0),
+      r(z, {
+        "current-color": e.currentColor,
+        "eye-dropper": t(o).eyeDropper ?? !0,
+        alpha: t(o).alpha,
+        width: t(o).width ?? 280,
+        foundation: e.foundation,
+        "default-format": t(o).defaultFormat ?? "hex"
+      }, null, 8, ["current-color", "eye-dropper", "alpha", "width", "foundation", "default-format"]),
+      s(a.$slots, "bottom")
+    ], 6));
+  }
+});
+export {
+  b as default
+};
+//# sourceMappingURL=ColorPickerInner.vue.js.map

package/lib/es/components/colorPicker/ColorPickerInner.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInner.vue.js","sources":["../../../../src/components/colorPicker/ColorPickerInner.vue"],"sourcesContent":["<template>\n    <div :class=\"className\" :style=\"props.style\">\n        <slot name=\"top\" />\n        <ColorChooseArea\n            :hsva=\"currentColor.hsva\"\n            :foundation=\"foundation\"\n            :on-change=\"handleColorChange\"\n            :handle-size=\"20\"\n            :width=\"pickerProps.width ?? 280\"\n            :height=\"pickerProps.height ?? 280\"\n        />\n        <ColorSlider\n            :width=\"pickerProps.width ?? 280\"\n            :height=\"10\"\n            :handle-size=\"18\"\n            :hue=\"currentColor.hsva.h\"\n            :foundation=\"foundation\"\n            :className=\"'colorSliderWrapper'\"\n        />\n        <AlphaSlider\n            v-if=\"pickerProps.alpha\"\n            :width=\"pickerProps.width ?? 280\"\n            :height=\"10\"\n            :handle-size=\"18\"\n            :hsva=\"currentColor.hsva\"\n            :foundation=\"foundation\"\n            :className=\"'alphaSliderWrapper'\"\n        />\n        <DataPart\n            :current-color=\"currentColor\"\n            :eye-dropper=\"pickerProps.eyeDropper ?? true\"\n            :alpha=\"pickerProps.alpha\"\n            :width=\"pickerProps.width ?? 280\"\n            :foundation=\"foundation\"\n            :default-format=\"pickerProps.defaultFormat ?? 'hex'\"\n        />\n        <slot name=\"bottom\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { ColorValue } from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport type ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';\nimport ColorChooseArea from './ColorChooseArea.vue';\nimport ColorSlider from './ColorSlider.vue';\nimport AlphaSlider from './AlphaSlider.vue';\nimport DataPart from './DataPart.vue';\nimport type { ColorPickerProps } from './interface';\nimport classNames from 'classnames';\n\ninterface Props {\n    currentColor: ColorValue;\n    foundation: ColorPickerFoundation;\n    props: ColorPickerProps;\n    className?: string;\n    style?: Record<string, any>;\n}\n\nconst props = defineProps<Props>();\n\nconst emit = defineEmits<{\n    colorChange: [{ s: number; v: number }];\n}>();\n\nconst handleColorChange = ({ s, v }: { s: number; v: number }) => {\n    emit('colorChange', { s, v });\n};\n\nconst pickerProps = props.props;\n\nconst className = computed(() => {\n    return classNames(cssClasses.PREFIX, props.className);\n});\n</script>\n"],"names":["props","__props","emit","__emit","handleColorChange","s","v","pickerProps","className","computed","classNames","cssClasses","_createElementBlock","_normalizeStyle","_renderSlot","_ctx","_createVNode","ColorChooseArea","_unref","ColorSlider","_createBlock","AlphaSlider","DataPart"],"mappings":";;;;;;;;;;;;;;;;;;AA4DA,UAAMA,IAAQC,GAERC,IAAOC,GAIPC,IAAoB,CAAC,EAAE,GAAAC,GAAG,GAAAC,QAAkC;AAC9D,MAAAJ,EAAK,eAAe,EAAE,GAAAG,GAAG,GAAAC,EAAA,CAAG;AAAA,IAChC,GAEMC,IAAcP,EAAM,OAEpBQ,IAAYC,EAAS,MAChBC,EAAWC,EAAW,QAAQX,EAAM,SAAS,CACvD;2BAzEGY,EAoCM,OAAA;AAAA,MApCA,SAAOJ,EAAA,KAAS;AAAA,MAAG,OAAKK,EAAEb,EAAM,KAAK;AAAA,IAAA;MACvCc,EAAmBC,EAAA,QAAA,KAAA;AAAA,MACnBC,EAOEC,GAAA;AAAA,QANG,MAAMhB,EAAA,aAAa;AAAA,QACnB,YAAYA,EAAA;AAAA,QACZ,aAAWG;AAAA,QACX,eAAa;AAAA,QACb,OAAOc,EAAAX,CAAA,EAAY,SAAK;AAAA,QACxB,QAAQW,EAAAX,CAAA,EAAY,UAAM;AAAA,MAAA;MAE/BS,EAOEG,GAAA;AAAA,QANG,OAAOD,EAAAX,CAAA,EAAY,SAAK;AAAA,QACxB,QAAQ;AAAA,QACR,eAAa;AAAA,QACb,KAAKN,EAAA,aAAa,KAAK;AAAA,QACvB,YAAYA,EAAA;AAAA,QACZ,WAAW;AAAA,MAAA;MAGNiB,EAAAX,CAAA,EAAY,cADtBa,EAQEC,GAAA;AAAA;QANG,OAAOH,EAAAX,CAAA,EAAY,SAAK;AAAA,QACxB,QAAQ;AAAA,QACR,eAAa;AAAA,QACb,MAAMN,EAAA,aAAa;AAAA,QACnB,YAAYA,EAAA;AAAA,QACZ,WAAW;AAAA,MAAA;MAEhBe,EAOEM,GAAA;AAAA,QANG,iBAAerB,EAAA;AAAA,QACf,eAAaiB,EAAAX,CAAA,EAAY,cAAU;AAAA,QACnC,OAAOW,EAAAX,CAAA,EAAY;AAAA,QACnB,OAAOW,EAAAX,CAAA,EAAY,SAAK;AAAA,QACxB,YAAYN,EAAA;AAAA,QACZ,kBAAgBiB,EAAAX,CAAA,EAAY,iBAAa;AAAA,MAAA;MAE9CO,EAAsBC,EAAA,QAAA,QAAA;AAAA,IAAA;;;"}

package/lib/es/components/colorPicker/ColorSlider.vue.js

@@ -0,0 +1,75 @@
+import { defineComponent as S, ref as a, watch as P, computed as l, onUnmounted as M, createElementBlock as b, openBlock as g, normalizeStyle as d, normalizeClass as r, unref as u, createElementVNode as z, withModifiers as C } from "vue";
+import E from "@douyinfe/semi-foundation/colorPicker/foundation";
+import H from "@douyinfe/semi-foundation/colorPicker/ColorSliderFoundation";
+import { cssClasses as h } from "@douyinfe/semi-foundation/colorPicker/constants";
+import { useBaseComponent as F } from "../_utils/useBaseComponent.js";
+import { useFoundation as _ } from "../../_utils/useFoundation.js";
+const R = /* @__PURE__ */ S({
+  __name: "ColorSlider",
+  props: {
+    width: {},
+    height: {},
+    hue: {},
+    handleSize: {},
+    foundation: {},
+    className: {},
+    style: {}
+  },
+  setup(m) {
+    const e = m, s = a(null), n = a({
+      handlePosition: e.hue / 360 * e.width - e.handleSize / 2,
+      isHandleGrabbing: !1
+    }), { adapter: p } = F(e, n), c = {
+      ...p,
+      handleMouseDown: (o) => {
+        n.value.isHandleGrabbing = !0, window.addEventListener("mousemove", t.setHandlePositionByMousePosition), window.addEventListener("mouseup", t.handleMouseUp);
+      },
+      handleMouseUp: () => {
+        n.value.isHandleGrabbing = !1, window.removeEventListener("mousemove", t.setHandlePositionByMousePosition), window.removeEventListener("mouseup", t.handleMouseUp);
+      },
+      getColorPickerFoundation: () => e.foundation,
+      getDOM: () => s.value
+    }, { foundation: t } = _(H, c), i = t;
+    P(
+      () => e.hue,
+      (o) => {
+        n.value.handlePosition = o / 360 * e.width - e.handleSize / 2;
+      }
+    );
+    const f = l(() => ({
+      width: typeof e.width == "number" ? `${e.width}px` : e.width,
+      height: typeof e.height == "number" ? `${e.height}px` : e.height,
+      ...e.style
+    })), w = l(() => ({
+      width: typeof e.handleSize == "number" ? `${e.handleSize}px` : e.handleSize,
+      height: typeof e.handleSize == "number" ? `${e.handleSize}px` : e.handleSize,
+      left: typeof n.value.handlePosition == "number" ? `${n.value.handlePosition}px` : n.value.handlePosition,
+      top: "50%",
+      transform: "translateY(-50%)",
+      backgroundColor: E.hsvaToHslString({ h: e.hue, s: 100, v: 100, a: 1 })
+    })), v = (o) => {
+      i.setHandlePositionByMousePosition(o), i.handleMouseDown(o);
+    }, y = (o) => {
+      i.handleMouseDown(o);
+    };
+    return M(() => {
+      window.removeEventListener("mousemove", i.setHandlePositionByMousePosition), window.removeEventListener("mouseup", i.handleMouseUp);
+    }), (o, k) => (g(), b("div", {
+      ref_key: "sliderRef",
+      ref: s,
+      class: r([`${u(h).PREFIX}-colorSlider`, e.className]),
+      style: d(f.value),
+      onMousedown: v
+    }, [
+      z("div", {
+        class: r(`${u(h).PREFIX}-handle`),
+        style: d(w.value),
+        onMousedown: C(y, ["stop"])
+      }, null, 38)
+    ], 38));
+  }
+});
+export {
+  R as default
+};
+//# sourceMappingURL=ColorSlider.vue.js.map

package/lib/es/components/colorPicker/ColorSlider.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.vue.js","sources":["../../../../src/components/colorPicker/ColorSlider.vue"],"sourcesContent":["<template>\n    <div\n        ref=\"sliderRef\"\n        :class=\"[`${cssClasses.PREFIX}-colorSlider`, props.className]\"\n        :style=\"sliderStyle\"\n        @mousedown=\"handleClick\"\n    >\n        <div :class=\"`${cssClasses.PREFIX}-handle`\" :style=\"handleStyle\" @mousedown.stop=\"handleHandleMouseDown\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, onUnmounted } from 'vue';\nimport ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport ColorSliderFoundation from '@douyinfe/semi-foundation/colorPicker/ColorSliderFoundation';\nimport { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';\nimport { useFoundation, useBaseComponent } from '../_utils';\n\ninterface Props {\n    width: number;\n    height: number;\n    hue: number;\n    handleSize: number;\n    foundation: ColorPickerFoundation;\n    className?: string;\n    style?: Record<string, any>;\n}\n\nconst props = defineProps<Props>();\n\nconst sliderRef = ref<HTMLDivElement | null>(null);\n\nconst state = ref({\n    handlePosition: (props.hue / 360) * props.width - props.handleSize / 2,\n    isHandleGrabbing: false,\n});\n\nconst { adapter: baseAdapter } = useBaseComponent(props, state);\n\nconst adapter = {\n    ...baseAdapter,\n    handleMouseDown: (_e: MouseEvent) => {\n        state.value.isHandleGrabbing = true;\n        window.addEventListener('mousemove', (colorSliderFoundation as any).setHandlePositionByMousePosition);\n        window.addEventListener('mouseup', (colorSliderFoundation as any).handleMouseUp);\n    },\n    handleMouseUp: () => {\n        state.value.isHandleGrabbing = false;\n        window.removeEventListener('mousemove', (colorSliderFoundation as any).setHandlePositionByMousePosition);\n        window.removeEventListener('mouseup', (colorSliderFoundation as any).handleMouseUp);\n    },\n    getColorPickerFoundation: () => props.foundation,\n    getDOM: () => sliderRef.value!,\n};\n\nconst { foundation: colorSliderFoundation } = useFoundation(ColorSliderFoundation as any, adapter as any);\nconst colorSliderFoundationTyped = colorSliderFoundation as InstanceType<typeof ColorSliderFoundation>;\n\nwatch(\n    () => props.hue,\n    (newHue) => {\n        state.value.handlePosition = (newHue / 360) * props.width - props.handleSize / 2;\n    }\n);\n\nconst sliderStyle = computed(() => ({\n    width: typeof props.width === 'number' ? `${props.width}px` : props.width,\n    height: typeof props.height === 'number' ? `${props.height}px` : props.height,\n    ...props.style,\n}));\n\nconst handleStyle = computed(() => ({\n    width: typeof props.handleSize === 'number' ? `${props.handleSize}px` : props.handleSize,\n    height: typeof props.handleSize === 'number' ? `${props.handleSize}px` : props.handleSize,\n    left:\n        typeof state.value.handlePosition === 'number' ? `${state.value.handlePosition}px` : state.value.handlePosition,\n    top: '50%',\n    transform: 'translateY(-50%)',\n    backgroundColor: ColorPickerFoundation.hsvaToHslString({ h: props.hue, s: 100, v: 100, a: 1 }),\n}));\n\nconst handleClick = (e: MouseEvent) => {\n    colorSliderFoundationTyped.setHandlePositionByMousePosition(e);\n    colorSliderFoundationTyped.handleMouseDown(e);\n};\n\nconst handleHandleMouseDown = (e: MouseEvent) => {\n    colorSliderFoundationTyped.handleMouseDown(e);\n};\n\nonUnmounted(() => {\n    window.removeEventListener('mousemove', colorSliderFoundationTyped.setHandlePositionByMousePosition);\n    window.removeEventListener('mouseup', colorSliderFoundationTyped.handleMouseUp);\n});\n</script>\n"],"names":["props","__props","sliderRef","ref","state","baseAdapter","useBaseComponent","adapter","_e","colorSliderFoundation","useFoundation","ColorSliderFoundation","colorSliderFoundationTyped","watch","newHue","sliderStyle","computed","handleStyle","ColorPickerFoundation","handleClick","e","handleHandleMouseDown","onUnmounted","_createElementBlock","_unref","cssClasses","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;AA4BA,UAAMA,IAAQC,GAERC,IAAYC,EAA2B,IAAI,GAE3CC,IAAQD,EAAI;AAAA,MACd,gBAAiBH,EAAM,MAAM,MAAOA,EAAM,QAAQA,EAAM,aAAa;AAAA,MACrE,kBAAkB;AAAA,IAAA,CACrB,GAEK,EAAE,SAASK,EAAA,IAAgBC,EAAiBN,GAAOI,CAAK,GAExDG,IAAU;AAAA,MACZ,GAAGF;AAAA,MACH,iBAAiB,CAACG,MAAmB;AACjC,QAAAJ,EAAM,MAAM,mBAAmB,IAC/B,OAAO,iBAAiB,aAAcK,EAA8B,gCAAgC,GACpG,OAAO,iBAAiB,WAAYA,EAA8B,aAAa;AAAA,MACnF;AAAA,MACA,eAAe,MAAM;AACjB,QAAAL,EAAM,MAAM,mBAAmB,IAC/B,OAAO,oBAAoB,aAAcK,EAA8B,gCAAgC,GACvG,OAAO,oBAAoB,WAAYA,EAA8B,aAAa;AAAA,MACtF;AAAA,MACA,0BAA0B,MAAMT,EAAM;AAAA,MACtC,QAAQ,MAAME,EAAU;AAAA,IAAA,GAGtB,EAAE,YAAYO,EAAA,IAA0BC,EAAcC,GAA8BJ,CAAc,GAClGK,IAA6BH;AAEnC,IAAAI;AAAA,MACI,MAAMb,EAAM;AAAA,MACZ,CAACc,MAAW;AACR,QAAAV,EAAM,MAAM,iBAAkBU,IAAS,MAAOd,EAAM,QAAQA,EAAM,aAAa;AAAA,MACnF;AAAA,IAAA;AAGJ,UAAMe,IAAcC,EAAS,OAAO;AAAA,MAChC,OAAO,OAAOhB,EAAM,SAAU,WAAW,GAAGA,EAAM,KAAK,OAAOA,EAAM;AAAA,MACpE,QAAQ,OAAOA,EAAM,UAAW,WAAW,GAAGA,EAAM,MAAM,OAAOA,EAAM;AAAA,MACvE,GAAGA,EAAM;AAAA,IAAA,EACX,GAEIiB,IAAcD,EAAS,OAAO;AAAA,MAChC,OAAO,OAAOhB,EAAM,cAAe,WAAW,GAAGA,EAAM,UAAU,OAAOA,EAAM;AAAA,MAC9E,QAAQ,OAAOA,EAAM,cAAe,WAAW,GAAGA,EAAM,UAAU,OAAOA,EAAM;AAAA,MAC/E,MACI,OAAOI,EAAM,MAAM,kBAAmB,WAAW,GAAGA,EAAM,MAAM,cAAc,OAAOA,EAAM,MAAM;AAAA,MACrG,KAAK;AAAA,MACL,WAAW;AAAA,MACX,iBAAiBc,EAAsB,gBAAgB,EAAE,GAAGlB,EAAM,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,GAAG;AAAA,IAAA,EAC/F,GAEImB,IAAc,CAACC,MAAkB;AACnC,MAAAR,EAA2B,iCAAiCQ,CAAC,GAC7DR,EAA2B,gBAAgBQ,CAAC;AAAA,IAChD,GAEMC,IAAwB,CAACD,MAAkB;AAC7C,MAAAR,EAA2B,gBAAgBQ,CAAC;AAAA,IAChD;AAEA,WAAAE,EAAY,MAAM;AACd,aAAO,oBAAoB,aAAaV,EAA2B,gCAAgC,GACnG,OAAO,oBAAoB,WAAWA,EAA2B,aAAa;AAAA,IAClF,CAAC,mBA5FGW,EAOM,OAAA;AAAA,eANE;AAAA,MAAJ,KAAIrB;AAAA,MACH,aAAWsB,EAAAC,CAAA,EAAW,MAAM,gBAAgBzB,EAAM,SAAS,CAAA;AAAA,MAC3D,SAAOe,EAAA,KAAW;AAAA,MAClB,aAAWI;AAAA,IAAA;MAEZO,EAA2G,OAAA;AAAA,QAArG,OAAKC,EAAA,GAAKH,EAAAC,CAAA,EAAW,MAAM,SAAA;AAAA,QAAY,SAAOR,EAAA,KAAW;AAAA,QAAG,eAAgBI,GAAqB,CAAA,MAAA,CAAA;AAAA,MAAA;;;;"}

package/lib/es/components/colorPicker/DataPart.vue.js

@@ -0,0 +1,123 @@
+import { defineComponent as V, ref as k, computed as y, onMounted as $, watch as E, createElementBlock as _, openBlock as m, normalizeStyle as h, normalizeClass as u, unref as a, createElementVNode as N, createVNode as p, createBlock as d, createCommentVNode as f, withCtx as w, h as B } from "vue";
+import R from "@douyinfe/semi-foundation/colorPicker/DataPartFoundation";
+import { cssClasses as l } from "@douyinfe/semi-foundation/colorPicker/constants";
+import { Input as S } from "../input/index.js";
+import X from "../input/InputGroup.vue.js";
+import z from "../inputNumber/index.js";
+import D from "../select/index.js";
+import W from "../button/Button.vue.js";
+/* empty css                    */
+import A from "@douyinfe/semi-foundation/colorPicker/foundation";
+import { isEqual as H } from "lodash-es";
+import { useBaseComponent as M } from "../_utils/useBaseComponent.js";
+import { useFoundation as q } from "../../_utils/useFoundation.js";
+import G from "../icons/icons/IconEyedropper.js";
+const ne = /* @__PURE__ */ V({
+  __name: "DataPart",
+  props: {
+    currentColor: {},
+    defaultFormat: {},
+    width: {},
+    alpha: { type: Boolean },
+    foundation: {},
+    eyeDropper: { type: Boolean }
+  },
+  setup(g) {
+    const e = g, n = k({
+      format: e.defaultFormat,
+      inputValue: ""
+    }), { adapter: C } = M(e, n), v = {
+      ...C,
+      getColorPickerFoundation: () => e.foundation
+    }, { foundation: r } = q(R, v), i = y(() => e.currentColor.rgba), b = [
+      { label: "hex", value: "hex" },
+      { label: "rgba", value: "rgba" },
+      { label: "hsva", value: "hsva" }
+    ];
+    $(() => {
+      r.handleInputValueChange(r.getInputValue());
+    }), E(
+      [() => e.currentColor, () => n.value.format],
+      ([o, t], [s, c]) => {
+        (!H(s, o) || c !== t) && r.handleInputValueChange(r.getInputValue());
+      },
+      { deep: !0 }
+    );
+    const I = (o) => {
+      const t = r.getValueByInputValue(o);
+      t && e.foundation.handleChange(t, n.value.format), r.handleInputValueChange(o);
+    }, x = (o) => {
+      const t = Number((o / 100).toFixed(2));
+      if (n.value.format === "rgba")
+        e.foundation.handleChange({ ...e.currentColor.rgba, a: t }, "rgba");
+      else if (n.value.format === "hex") {
+        const s = { ...e.currentColor.rgba, a: t }, c = A.rgbaToHex(s);
+        e.foundation.handleChange(c, "hex");
+      } else if (n.value.format === "hsva") {
+        const s = { ...e.currentColor.hsva, a: t };
+        e.foundation.handleChange(s, "hsva");
+      }
+    }, F = (o) => {
+      r.handleFormatChange(o);
+    }, P = () => {
+      r.handlePickValueWithStraw();
+    };
+    return (o, t) => (m(), _("div", {
+      class: u(`${a(l).PREFIX}-dataPart`),
+      style: h({ width: typeof e.width == "number" ? `${e.width}px` : e.width })
+    }, [
+      N("div", {
+        class: u(`${a(l).PREFIX}-colorDemoBlock`),
+        style: h({
+          minWidth: "20px",
+          minHeight: "20px",
+          backgroundColor: `rgba(${i.value.r},${i.value.g},${i.value.b},${i.value.a})`
+        })
+      }, null, 6),
+      p(X, {
+        size: "small",
+        class: u(`${a(l).PREFIX}-inputGroup`)
+      }, {
+        default: w(() => [
+          p(a(S), {
+            class: u(`${a(l).PREFIX}-colorPickerInput`),
+            value: n.value.inputValue,
+            placeholder: "",
+            onChange: I
+          }, null, 8, ["class", "value"]),
+          e.alpha ? (m(), d(a(z), {
+            key: 0,
+            min: 0,
+            max: 100,
+            size: "small",
+            class: u(`${a(l).PREFIX}-colorPickerInputNumber`),
+            value: Number(Math.round(e.currentColor.rgba.a * 100)),
+            "hide-buttons": !0,
+            suffix: B("span", { class: `${a(l).PREFIX}-inputNumberSuffix` }, "%"),
+            onNumberChange: x
+          }, null, 8, ["class", "value", "suffix"])) : f("", !0),
+          p(a(D), {
+            class: u(`${a(l).PREFIX}-formatSelect`),
+            size: "small",
+            value: n.value.format,
+            "option-list": b,
+            onSelect: F
+          }, null, 8, ["class", "value"])
+        ]),
+        _: 1
+      }, 8, ["class"]),
+      e.eyeDropper ? (m(), d(a(W), {
+        key: 0,
+        type: "tertiary",
+        theme: "light",
+        size: "small",
+        icon: a(G),
+        onClick: P
+      }, null, 8, ["icon"])) : f("", !0)
+    ], 6));
+  }
+});
+export {
+  ne as default
+};
+//# sourceMappingURL=DataPart.vue.js.map

package/lib/es/components/colorPicker/DataPart.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataPart.vue.js","sources":["../../../../src/components/colorPicker/DataPart.vue"],"sourcesContent":["<template>\n    <div\n        :class=\"`${cssClasses.PREFIX}-dataPart`\"\n        :style=\"{ width: typeof props.width === 'number' ? `${props.width}px` : props.width }\"\n    >\n        <div\n            :class=\"`${cssClasses.PREFIX}-colorDemoBlock`\"\n            :style=\"{\n                minWidth: '20px',\n                minHeight: '20px',\n                backgroundColor: `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`,\n            }\"\n        />\n        <InputGroup size=\"small\" :class=\"`${cssClasses.PREFIX}-inputGroup`\">\n            <Input\n                :class=\"`${cssClasses.PREFIX}-colorPickerInput`\"\n                :value=\"state.inputValue\"\n                placeholder=\"\"\n                @change=\"handleInputChange\"\n            />\n            <InputNumber\n                v-if=\"props.alpha\"\n                :min=\"0\"\n                :max=\"100\"\n                size=\"small\"\n                :class=\"`${cssClasses.PREFIX}-colorPickerInputNumber`\"\n                :value=\"Number(Math.round(props.currentColor.rgba.a * 100))\"\n                :hide-buttons=\"true\"\n                :suffix=\"h('span', { class: `${cssClasses.PREFIX}-inputNumberSuffix` }, '%')\"\n                @number-change=\"handleAlphaChange\"\n            />\n            <Select\n                :class=\"`${cssClasses.PREFIX}-formatSelect`\"\n                size=\"small\"\n                :value=\"state.format\"\n                :option-list=\"formatOptions\"\n                @select=\"handleFormatChange\"\n            />\n        </InputGroup>\n        <Button\n            v-if=\"props.eyeDropper\"\n            type=\"tertiary\"\n            theme=\"light\"\n            size=\"small\"\n            :icon=\"IconEyedropper\"\n            @click=\"handlePickValueWithStraw\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, onMounted, computed, h } from 'vue';\nimport type { ColorValue } from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport type ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport DataPartFoundation from '@douyinfe/semi-foundation/colorPicker/DataPartFoundation';\nimport { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';\nimport { useFoundation, useBaseComponent } from '../_utils';\nimport Input from '../input';\nimport InputGroup from '../input/InputGroup.vue';\nimport InputNumber from '../inputNumber';\nimport Select from '../select';\nimport Button from '../button';\nimport { IconEyedropper } from '../icons';\nimport ColorPickerFoundationClass from '@douyinfe/semi-foundation/colorPicker/foundation';\nimport { isEqual } from 'lodash-es';\n\ninterface Props {\n    currentColor: ColorValue;\n    defaultFormat: 'hex' | 'rgba' | 'hsva';\n    width: number;\n    alpha?: boolean;\n    foundation: ColorPickerFoundation;\n    eyeDropper: boolean;\n}\n\nconst props = defineProps<Props>();\n\nconst state = ref({\n    format: props.defaultFormat,\n    inputValue: '',\n});\n\nconst { adapter: baseAdapter } = useBaseComponent(props, state);\n\nconst adapter = {\n    ...baseAdapter,\n    getColorPickerFoundation: () => props.foundation,\n};\n\nconst { foundation: dataPartFoundation } = useFoundation(DataPartFoundation, adapter);\n\nconst rgba = computed(() => props.currentColor.rgba);\n\nconst formatOptions = [\n    { label: 'hex', value: 'hex' },\n    { label: 'rgba', value: 'rgba' },\n    { label: 'hsva', value: 'hsva' },\n];\n\nonMounted(() => {\n    dataPartFoundation.handleInputValueChange(dataPartFoundation.getInputValue());\n});\n\nwatch(\n    [() => props.currentColor, () => state.value.format],\n    ([newColor, newFormat], [oldColor, oldFormat]) => {\n        if (!isEqual(oldColor, newColor) || oldFormat !== newFormat) {\n            dataPartFoundation.handleInputValueChange(dataPartFoundation.getInputValue());\n        }\n    },\n    { deep: true }\n);\n\nconst handleInputChange = (value: string) => {\n    const colorValue = dataPartFoundation.getValueByInputValue(value);\n    if (colorValue) {\n        props.foundation.handleChange(colorValue, state.value.format);\n    }\n    dataPartFoundation.handleInputValueChange(value);\n};\n\nconst handleAlphaChange = (v: number) => {\n    const alpha = Number((v / 100).toFixed(2));\n    if (state.value.format === 'rgba') {\n        props.foundation.handleChange({ ...props.currentColor.rgba, a: alpha }, 'rgba');\n    } else if (state.value.format === 'hex') {\n        const rgba = { ...props.currentColor.rgba, a: alpha };\n        const hex = ColorPickerFoundationClass.rgbaToHex(rgba);\n        props.foundation.handleChange(hex, 'hex');\n    } else if (state.value.format === 'hsva') {\n        const hsva = { ...props.currentColor.hsva, a: alpha };\n        props.foundation.handleChange(hsva, 'hsva');\n    }\n};\n\nconst handleFormatChange = (value: 'hex' | 'rgba' | 'hsva') => {\n    dataPartFoundation.handleFormatChange(value);\n};\n\nconst handlePickValueWithStraw = () => {\n    dataPartFoundation.handlePickValueWithStraw();\n};\n</script>\n"],"names":["props","__props","state","ref","baseAdapter","useBaseComponent","adapter","dataPartFoundation","useFoundation","DataPartFoundation","rgba","computed","formatOptions","onMounted","watch","newColor","newFormat","oldColor","oldFormat","isEqual","handleInputChange","value","colorValue","handleAlphaChange","v","alpha","hex","ColorPickerFoundationClass","hsva","handleFormatChange","handlePickValueWithStraw","_createElementBlock","_normalizeClass","_unref","cssClasses","_normalizeStyle","_createElementVNode","_createVNode","InputGroup","Input","_createBlock","InputNumber","h","Select","Button","IconEyedropper"],"mappings":"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"}

package/lib/es/components/colorPicker/index.js

@@ -0,0 +1,6 @@
+import o from "./ColorPicker.vue.js";
+/* empty css                 */
+export {
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/lib/es/components/colorPicker/index.js.map

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

package/lib/es/components/colorPicker/utils.js

@@ -0,0 +1,36 @@
+import { hexToRgba as i, hexToHsva as g, rgbaStringToRgba as n, rgbaToHex as r, rgbaStringToHsva as a, rgbStringToRgba as h, rgbStringToHsva as b, hsvaStringToHsva as v, hsvaToRgba as T, hsvaToHex as l } from "@douyinfe/semi-foundation/colorPicker/utils/convert";
+const x = (t) => {
+  if (t.startsWith("#"))
+    return {
+      hsva: g(t),
+      rgba: i(t),
+      hex: t
+    };
+  if (t.startsWith("rgba")) {
+    const o = n(t);
+    return {
+      hsva: a(t),
+      rgba: o,
+      hex: r(o)
+    };
+  } else if (t.startsWith("rgb")) {
+    const o = h(t);
+    return {
+      hsva: b(t),
+      rgba: o,
+      hex: r(o)
+    };
+  } else if (t.startsWith("hsv")) {
+    const o = v(t), s = T(o), e = l(o);
+    return {
+      hsva: o,
+      rgba: s,
+      hex: e
+    };
+  } else
+    throw new Error("Semi ColorPicker: error on static colorStringToValue method, input value is invalid: " + t);
+};
+export {
+  x as colorStringToValue
+};
+//# sourceMappingURL=utils.js.map