@gct-paas/core-web 0.1.4-dev.0 → 0.1.4-dev.10

package/es/modules/code-editor/useMonacoEditor.d.ts

@@ -0,0 +1,26 @@
+export declare const Theme: {
+    readonly VS: "vs";
+    readonly BLACK: "hc-black";
+    readonly DARK: "vs-dark";
+};
+export type Theme = (typeof Theme)[keyof typeof Theme];
+export declare const Lang: {
+    readonly JS: "javascript";
+    readonly SQL: "sql";
+    readonly PWSH: "powershell";
+    readonly JAVA: "java";
+    readonly C_SHARP: "csharp";
+    readonly JSON: "json";
+};
+export type Lang = (typeof Lang)[keyof typeof Lang];
+export declare class Prop {
+    value?: string | null;
+    /** 标题 */
+    title?: string;
+    /** 语言 */
+    language?: string;
+    /** 官方自带三种主题：vs、hc-black、vs-dark */
+    theme?: Theme;
+    /** 是否只读 */
+    readonly?: boolean;
+}

package/es/modules/code-editor/useMonacoEditor.mjs

@@ -0,0 +1,26 @@
+const Theme = {
+  VS: "vs",
+  BLACK: "hc-black",
+  DARK: "vs-dark"
+};
+const Lang = {
+  JS: "javascript",
+  SQL: "sql",
+  PWSH: "powershell",
+  JAVA: "java",
+  C_SHARP: "csharp",
+  JSON: "json"
+};
+class Prop {
+  value;
+  /** 标题 */
+  title;
+  /** 语言 */
+  language;
+  /** 官方自带三种主题：vs、hc-black、vs-dark */
+  theme;
+  /** 是否只读 */
+  readonly;
+}
+
+export { Lang, Prop, Theme };

package/es/modules/color-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ColorPicker } from './src/ColorPicker.vue';
+export { ColorPicker };

package/es/modules/color-picker/src/ColorPicker.css

@@ -0,0 +1,16 @@
+.component[data-v-7bfd9ca3] {
+  display: inline-block;
+  position: relative;
+  outline: none;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+.component .box[data-v-7bfd9ca3] {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--gct-color-text-1);
+  border-radius: 4px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==');
+  background-size: 10px 10px;
+}

package/es/modules/color-picker/src/ColorPicker.vue.d.ts

@@ -0,0 +1,49 @@
+interface RgbaType {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+interface PropsType {
+    color?: string | RgbaType;
+    preset?: string[];
+    width?: number;
+    useTrigger?: boolean;
+    placement?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        icon?(_: {}): any;
+    };
+    refs: {
+        saturationRef: HTMLDivElement;
+        hueSliderRef: HTMLDivElement;
+        alphaSliderRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<PropsType, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:color": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<PropsType> & Readonly<{
+    "onUpdate:color"?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: number;
+    placement: string;
+    color: string | RgbaType;
+    preset: string[];
+    useTrigger: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    saturationRef: HTMLDivElement;
+    hueSliderRef: HTMLDivElement;
+    alphaSliderRef: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/modules/color-picker/src/ColorPicker.vue.mjs

@@ -0,0 +1,8 @@
+import _sfc_main from './ColorPicker.vue2.mjs';
+import './ColorPicker2.css';import './ColorPicker.css';/* empty css                  */
+/* empty css                  */
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7bfd9ca3"]]);
+
+export { ColorPicker as default };

package/es/modules/color-picker/src/ColorPicker.vue2.mjs

@@ -0,0 +1,545 @@
+import { defineComponent, ref, watch, onMounted, computed, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList } from 'vue';
+
+const _hoisted_1 = {
+  key: 1,
+  class: "component"
+};
+const _hoisted_2 = { class: "box" };
+const _hoisted_3 = { style: {
+  borderRadius: "4px"
+} };
+const _hoisted_4 = { class: "color-picker-middle" };
+const _hoisted_5 = { style: { "flex": "auto" } };
+const _hoisted_6 = { class: "color-picker-diamond" };
+const _hoisted_7 = { class: "color-picker-value" };
+const _hoisted_8 = { class: "hex" };
+const _hoisted_9 = ["value"];
+const _hoisted_10 = { class: "rgba-r" };
+const _hoisted_11 = ["value"];
+const _hoisted_12 = { class: "rgba-g" };
+const _hoisted_13 = ["value"];
+const _hoisted_14 = { class: "rgba-b" };
+const _hoisted_15 = ["value"];
+const _hoisted_16 = { class: "rgba-a" };
+const _hoisted_17 = ["value"];
+const _hoisted_18 = { class: "presetColor" };
+const _hoisted_19 = { class: "preset" };
+const _hoisted_20 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ColorPicker"
+  },
+  __name: "ColorPicker",
+  props: {
+    color: { default: () => "#FFFFFF00" },
+    preset: { default: () => [
+      "#D0021B",
+      "#F5A623",
+      "#F8E71C",
+      "#8B572A",
+      "#7ED321",
+      "#417505",
+      "#BD10E0",
+      "#9013FE",
+      "#4A90E2",
+      "#50E3C2",
+      "#B8E986",
+      "#000000",
+      "#4A4A4A",
+      "#9B9B9B",
+      "#FFFFFF"
+    ] },
+    width: { default: 240 },
+    useTrigger: { type: Boolean, default: false },
+    placement: { default: "bottomLeft" }
+  },
+  emits: ["update:color"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const saturationRef = ref();
+    const hueSliderRef = ref();
+    const alphaSliderRef = ref();
+    const pointStyle = ref("");
+    const hueSliderStyle = ref("left: 0;");
+    const alphaSliderStyle = ref("left: calc(100% - 6px);");
+    const hue = ref(0);
+    const saturation = ref(1);
+    const value = ref(1);
+    const red = ref(255);
+    const green = ref(0);
+    const blue = ref(0);
+    const alpha = ref(1);
+    watch(
+      () => props.color,
+      () => {
+        const { r: r2, g: g2, b: b2, a: a2 } = parseColor(props.color || "#FFFFFF00");
+        red.value = r2;
+        green.value = g2;
+        blue.value = b2;
+        alpha.value = a2;
+      }
+    );
+    const { r, g, b, a } = parseColor(props.color || "#FFFFFF00");
+    red.value = r;
+    green.value = g;
+    blue.value = b;
+    alpha.value = a;
+    onMounted(() => {
+      const { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
+      hue.value = h;
+      saturation.value = s;
+      value.value = v;
+      pointStyle.value = `top: ${100 - v * 100}%;left: ${s * 100}%;`;
+      hueSliderStyle.value = `left: ${hue.value / 360 * 100}%;`;
+      alphaSliderStyle.value = `left: ${alpha.value >= 1 ? "calc(100% - 6px)" : alpha.value * 100 + "%"};`;
+    });
+    const colorObj = computed(() => {
+      const r2 = red.value;
+      const g2 = green.value;
+      const b2 = blue.value;
+      const a2 = alpha.value;
+      const h = hue.value;
+      const s = saturation.value;
+      const v = value.value;
+      return {
+        rgb: `rgba(${r2},${g2},${b2})`,
+        rgba: `rgba(${r2},${g2},${b2},${a2})`,
+        hex6: rgba2hex(r2, g2, b2),
+        hex8: rgba2hex(r2, g2, b2, a2),
+        hsv: `hsv(${h},${s},${v})`,
+        hsl: ``
+      };
+    });
+    watch(
+      () => colorObj.value.hex8,
+      () => {
+        emit(
+          "update:color",
+          {
+            r: red.value,
+            g: green.value,
+            b: blue.value,
+            a: alpha.value
+          },
+          colorObj.value.hex8
+        );
+        const { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
+        hue.value = h;
+        saturation.value = s;
+        value.value = v;
+        pointStyle.value = `top: ${100 - v * 100}%;left: ${s * 100}%;`;
+        hueSliderStyle.value = `left: ${hue.value / 360 * 100}%;`;
+      }
+      // {
+      //   immediate: true,
+      // },
+    );
+    function hexChange(e) {
+      const v = e.target.value;
+      if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(v)) {
+        let { r: r2, g: g2, b: b2, a: a2 } = hex2rgba(v);
+        red.value = r2;
+        green.value = g2;
+        blue.value = b2;
+        alpha.value = a2;
+      }
+    }
+    function redChange(e) {
+      const v = e.target.value;
+      if (v !== "") {
+        const num = parseInt(v);
+        num > 255 && (red.value = 255);
+        num < 0 && (red.value = 0);
+        num >= 0 && num <= 255 && (red.value = num);
+      }
+    }
+    function greenChange(e) {
+      const v = e.target.value;
+      if (v !== "") {
+        const num = parseInt(v);
+        num > 255 && (green.value = 255);
+        num < 0 && (green.value = 0);
+        num >= 0 && num <= 255 && (green.value = num);
+      }
+    }
+    function blueChange(e) {
+      const v = e.target.value;
+      if (v !== "") {
+        const num = parseInt(v);
+        num > 255 && (blue.value = 255);
+        num < 0 && (blue.value = 0);
+        num >= 0 && num <= 255 && (blue.value = num);
+      }
+    }
+    function alphaChange(e) {
+      const v = e.target.value;
+      if (v !== "") {
+        const num = parseFloat(v);
+        alpha.value = num;
+        num > 1 && (alpha.value = 1);
+        num < 0 && (alpha.value = 0);
+        num >= 0 && num <= 1 && (alpha.value = num);
+      }
+    }
+    function presetChange(item) {
+      if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(item)) {
+        let { r: r2, g: g2, b: b2, a: a2 } = hex2rgba(item);
+        red.value = r2;
+        green.value = g2;
+        blue.value = b2;
+        alpha.value = a2;
+        alphaSliderStyle.value = `left: calc(100% - 6px);`;
+        alpha.value = 1;
+      }
+    }
+    function handleChangeSV(e) {
+      if (!saturationRef.value) return;
+      const w = saturationRef.value.clientWidth;
+      const h = saturationRef.value.clientHeight;
+      let x = e.pageX - saturationRef.value.getBoundingClientRect().left;
+      let y = e.pageY - saturationRef.value.getBoundingClientRect().top;
+      x = x < w && x > 0 ? x : x > w ? w : 0;
+      y = y < h && y > 0 ? y : y > h ? h : 0;
+      saturation.value = Math.floor(x / w * 100 + 0.5) / 100;
+      value.value = Math.floor((1 - y / h) * 100 + 0.5) / 100;
+      const { r: r2, g: g2, b: b2 } = hsv2rgb(hue.value, saturation.value, value.value);
+      red.value = r2;
+      green.value = g2;
+      blue.value = b2;
+      pointStyle.value = `top: ${y}px;left: ${x}px;`;
+    }
+    function mousedownSV(e) {
+      handleChangeSV(e);
+      window.addEventListener("mousemove", handleChangeSV);
+      window.addEventListener("mouseup", mouseupSV);
+      alphaSliderStyle.value = `left: calc(100% - 6px);`;
+      alpha.value = 1;
+    }
+    function mouseupSV() {
+      window.removeEventListener("mousemove", handleChangeSV);
+      window.removeEventListener("mouseup", mouseupSV);
+    }
+    function handleChangeHue(e) {
+      let w = hueSliderRef.value.clientWidth;
+      let x = e.pageX - saturationRef.value.getBoundingClientRect().left;
+      x = x < w && x > 0 ? x : x > w ? w : 0;
+      hue.value = Math.floor(x / w * 360 + 0.5);
+      let { r: r2, g: g2, b: b2 } = hsv2rgb(hue.value, saturation.value, value.value);
+      red.value = r2;
+      green.value = g2;
+      blue.value = b2;
+      hueSliderStyle.value = `left: ${x >= w - 6 ? w - 6 : x}px;`;
+    }
+    function mousedownHue(e) {
+      handleChangeHue(e);
+      window.addEventListener("mousemove", handleChangeHue);
+      window.addEventListener("mouseup", mouseupHue);
+    }
+    function mouseupHue() {
+      window.removeEventListener("mousemove", handleChangeHue);
+      window.removeEventListener("mouseup", mouseupHue);
+    }
+    function handleChangeAlpha(e) {
+      let w = alphaSliderRef.value.clientWidth;
+      let x = e.pageX - saturationRef.value.getBoundingClientRect().left;
+      x = x < w && x > 0 ? x : x > w ? w : 0;
+      alpha.value = Math.floor(x / w * 100 + 0.5) / 100;
+      alphaSliderStyle.value = `left: ${x >= w - 6 ? w - 6 : x}px;`;
+    }
+    function mousedownAlpha(e) {
+      handleChangeAlpha(e);
+      window.addEventListener("mousemove", handleChangeAlpha);
+      window.addEventListener("mouseup", mouseupAlpha);
+    }
+    function mouseupAlpha() {
+      window.removeEventListener("mousemove", handleChangeAlpha);
+      window.removeEventListener("mouseup", mouseupAlpha);
+    }
+    function parseColor(color) {
+      if (color) {
+        let r2, g2, b2, a2;
+        if (typeof color === "string") {
+          if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(
+            color
+          )) {
+            return hex2rgba(color);
+          }
+          return parseRGBA(color);
+        } else {
+          r2 = color.r > 255 ? 255 : color.r < 0 ? 0 : color.r;
+          g2 = color.g > 255 ? 255 : color.g < 0 ? 0 : color.g;
+          b2 = color.b > 255 ? 255 : color.b < 0 ? 0 : color.b;
+          a2 = color.a > 1 ? 1 : color.a < 0 ? 0 : color.a;
+          return { r: r2, g: g2, b: b2, a: a2 };
+        }
+      } else {
+        return { r: 0, g: 0, b: 0, a: 1 };
+      }
+    }
+    function hsv2rgb(h, s, v) {
+      h === 360 && (h = 0);
+      let i = Math.floor(h / 60) % 6;
+      let f = h / 60 - i;
+      let p = v * (1 - s);
+      let q = v * (1 - s * f);
+      let t = v * (1 - s * (1 - f));
+      let r2 = 0, g2 = 0, b2 = 0;
+      if (i === 0) {
+        r2 = v;
+        g2 = t;
+        b2 = p;
+      } else if (i === 1) {
+        r2 = q;
+        g2 = v;
+        b2 = p;
+      } else if (i === 2) {
+        r2 = p;
+        g2 = v;
+        b2 = t;
+      } else if (i === 3) {
+        r2 = p;
+        g2 = q;
+        b2 = v;
+      } else if (i === 4) {
+        r2 = t;
+        g2 = p;
+        b2 = v;
+      } else if (i === 5) {
+        r2 = v;
+        g2 = p;
+        b2 = q;
+      }
+      r2 = Math.floor(r2 * 255 + 0.5);
+      g2 = Math.floor(g2 * 255 + 0.5);
+      b2 = Math.floor(b2 * 255 + 0.5);
+      return { r: r2, g: g2, b: b2 };
+    }
+    function rgb2hsv(r2, g2, b2) {
+      let r1 = r2 / 255;
+      let g1 = g2 / 255;
+      let b1 = b2 / 255;
+      let cmax = Math.max(r1, g1, b1);
+      let cmin = Math.min(r1, g1, b1);
+      let d = cmax - cmin;
+      let h = 0, s, v;
+      if (d === 0) {
+        h = 0;
+      } else if (cmax === r1) {
+        h = (60 * (g1 - b1) / d + 360) % 360;
+      } else if (cmax === g1) {
+        h = 60 * ((b1 - r1) / d + 2);
+      } else if (cmax === b1) {
+        h = 60 * ((r1 - g1) / d + 4);
+      }
+      if (cmax === 0) {
+        s = 0;
+      } else {
+        s = d / cmax;
+      }
+      v = cmax;
+      h = Math.floor(h + 0.5);
+      s = Math.floor(s * 100 + 0.5) / 100;
+      v = Math.floor(v * 100 + 0.5) / 100;
+      return { h, s, v };
+    }
+    function rgba2hex(r2, g2, b2, a2 = 1) {
+      r2 = parseInt(r2);
+      let r1 = r2.toString(16).length !== 2 ? "0" + r2.toString(16) : r2.toString(16);
+      g2 = parseInt(g2);
+      let g1 = g2.toString(16).length !== 2 ? "0" + g2.toString(16) : g2.toString(16);
+      b2 = parseInt(b2);
+      let b1 = b2.toString(16).length !== 2 ? "0" + b2.toString(16) : b2.toString(16);
+      a2 = parseFloat(a2);
+      let a1 = "";
+      if (a2 !== 1) {
+        let temp = Math.floor(256 * a2);
+        a1 = temp.toString(16).length !== 2 ? "0" + temp.toString(16) : temp.toString(16);
+      }
+      return `#${r1}${g1}${b1}${a1}`.toUpperCase();
+    }
+    function hex2rgba(s) {
+      if (/^#?[0-9a-fA-F]{3}$/.test(s)) {
+        let b2 = s.substring(s.length - 1, s.length);
+        let g2 = s.substring(s.length - 2, s.length - 1);
+        let r2 = s.substring(s.length - 3, s.length - 2);
+        return hex2rgba(`${r2 + r2}${g2 + g2}${b2 + b2}`);
+      }
+      if (/^#?[0-9a-fA-F]{4}$/.test(s)) {
+        let a2 = s.substring(s.length - 1, s.length);
+        let b2 = s.substring(s.length - 2, s.length - 1);
+        let g2 = s.substring(s.length - 3, s.length - 2);
+        let r2 = s.substring(s.length - 4, s.length - 3);
+        return hex2rgba(`${r2 + r2}${g2 + g2}${b2 + b2}${a2 + a2}`);
+      }
+      if (/^#?[0-9a-fA-F]{6}$/.test(s)) {
+        let b2 = parseInt("0x" + s.substring(s.length - 2, s.length));
+        let g2 = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
+        let r2 = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
+        return { r: r2, g: g2, b: b2, a: 1 };
+      }
+      if (/^#?[0-9a-fA-F]{8}$/.test(s)) {
+        let a2 = parseInt("0x" + s.substring(s.length - 2, s.length));
+        a2 = a2 / 255;
+        let b2 = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
+        let g2 = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
+        let r2 = parseInt("0x" + s.substring(s.length - 8, s.length - 6));
+        return { r: r2, g: g2, b: b2, a: a2 };
+      }
+    }
+    function parseRGBA(colorString) {
+      const rgbaRegex = /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*([\d.]+))?\)$/;
+      const match = colorString.match(rgbaRegex);
+      if (match) {
+        const alpha2 = match[4] ? parseFloat(match[4]) : 1;
+        return {
+          r: parseInt(match[1], 10),
+          g: parseInt(match[2], 10),
+          b: parseInt(match[3], 10),
+          a: alpha2
+        };
+      } else {
+        throw new Error("Invalid RGBA string");
+      }
+    }
+    return (_ctx, _cache) => {
+      const _component_a_popover = resolveComponent("a-popover");
+      return openBlock(), createBlock(_component_a_popover, {
+        placement: __props.placement,
+        trigger: "click",
+        "overlay-class-name": "color-picker__popover"
+      }, {
+        content: withCtx(() => [
+          createElementVNode("div", {
+            class: "color-picker",
+            style: normalizeStyle({ "--w": __props.width + "px" })
+          }, [
+            createElementVNode("div", {
+              ref_key: "saturationRef",
+              ref: saturationRef,
+              class: "color-picker-saturation",
+              onMousedown: mousedownSV
+            }, [
+              createElementVNode("div", {
+                style: normalizeStyle(`background-color: hsl(${hue.value}, 100%, 50%);`)
+              }, [
+                createElementVNode("div", {
+                  class: "point",
+                  style: normalizeStyle(pointStyle.value)
+                }, null, 4)
+              ], 4),
+              _cache[0] || (_cache[0] = createElementVNode("div", { class: "color-picker-saturation-t" }, null, -1)),
+              _cache[1] || (_cache[1] = createElementVNode("div", { class: "color-picker-saturation-h" }, null, -1))
+            ], 544),
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
+                createElementVNode("div", {
+                  ref_key: "hueSliderRef",
+                  ref: hueSliderRef,
+                  class: "hue-slider",
+                  onMousedown: mousedownHue
+                }, [
+                  createElementVNode("div", {
+                    class: "slider",
+                    style: normalizeStyle(hueSliderStyle.value)
+                  }, null, 4)
+                ], 544),
+                createElementVNode("div", {
+                  ref_key: "alphaSliderRef",
+                  ref: alphaSliderRef,
+                  class: "alpha-slider",
+                  onMousedown: mousedownAlpha
+                }, [
+                  createElementVNode("div", {
+                    class: "slider",
+                    style: normalizeStyle(alphaSliderStyle.value)
+                  }, null, 4),
+                  createElementVNode("div", {
+                    style: normalizeStyle(`background: linear-gradient(to right, rgba(0,0,0,0), ${colorObj.value.rgb});width: 100%;height: 100%`)
+                  }, null, 4)
+                ], 544)
+              ]),
+              createElementVNode("div", _hoisted_6, [
+                createElementVNode("div", {
+                  style: normalizeStyle(`background-color: ${colorObj.value.rgba};width: 100%;height: 100%;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);`)
+                }, null, 4)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("div", _hoisted_8, [
+                createElementVNode("label", null, [
+                  createElementVNode("input", {
+                    value: colorObj.value.hex8,
+                    spellcheck: "false",
+                    onInput: hexChange
+                  }, null, 40, _hoisted_9)
+                ]),
+                _cache[2] || (_cache[2] = createElementVNode("p", null, "Hex", -1))
+              ]),
+              createElementVNode("div", _hoisted_10, [
+                createElementVNode("label", null, [
+                  createElementVNode("input", {
+                    value: red.value,
+                    onInput: redChange
+                  }, null, 40, _hoisted_11)
+                ]),
+                _cache[3] || (_cache[3] = createElementVNode("p", null, "R", -1))
+              ]),
+              createElementVNode("div", _hoisted_12, [
+                createElementVNode("label", null, [
+                  createElementVNode("input", {
+                    value: green.value,
+                    onInput: greenChange
+                  }, null, 40, _hoisted_13)
+                ]),
+                _cache[4] || (_cache[4] = createElementVNode("p", null, "G", -1))
+              ]),
+              createElementVNode("div", _hoisted_14, [
+                createElementVNode("label", null, [
+                  createElementVNode("input", {
+                    value: blue.value,
+                    onInput: blueChange
+                  }, null, 40, _hoisted_15)
+                ]),
+                _cache[5] || (_cache[5] = createElementVNode("p", null, "B", -1))
+              ]),
+              createElementVNode("div", _hoisted_16, [
+                createElementVNode("label", null, [
+                  createElementVNode("input", {
+                    value: alpha.value,
+                    onInput: alphaChange
+                  }, null, 40, _hoisted_17)
+                ]),
+                _cache[6] || (_cache[6] = createElementVNode("p", null, "A", -1))
+              ])
+            ]),
+            createElementVNode("div", _hoisted_18, [
+              _cache[7] || (_cache[7] = createElementVNode("div", { class: "title" }, "推荐颜色", -1)),
+              createElementVNode("ul", _hoisted_19, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.preset, (item) => {
+                  return openBlock(), createElementBlock("li", {
+                    key: item,
+                    style: normalizeStyle(`background-color: ${item}`),
+                    onClick: ($event) => presetChange(item)
+                  }, null, 12, _hoisted_20);
+                }), 128))
+              ])
+            ])
+          ], 4)
+        ]),
+        default: withCtx(() => [
+          __props.useTrigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
+                renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+              ])
+            ])
+          ]))
+        ]),
+        _: 3
+      }, 8, ["placement"]);
+    };
+  }
+});
+
+export { _sfc_main as default };