hys-ui 0.2.0 → 0.4.0

package/dist/components/HysColorPicker/HysColorPanel.vue.js

@@ -0,0 +1,7 @@
+import o from "./HysColorPanel2.vue.js";
+/* empty css                   */
+import f from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ f(o, [["__scopeId", "data-v-642fbfff"]]);
+export {
+  m as default
+};

package/dist/components/HysColorPicker/HysColorPanel2.vue.js

@@ -0,0 +1,238 @@
+import { defineComponent as z, provide as K, computed as C, openBlock as l, createElementBlock as o, mergeProps as T, unref as d, createElementVNode as n, renderSlot as m, normalizeProps as c, guardReactiveProps as x, toDisplayString as r, normalizeStyle as u, createCommentVNode as s, Fragment as I, renderList as L, createBlock as k, withKeys as S, withModifiers as B, withCtx as y, createTextVNode as f, createVNode as F } from "vue";
+import { Check as N } from "lucide-vue-next";
+import b from "../HysButton/HysButton.vue.js";
+import { useHysRootAttrs as V } from "../../config.js";
+import { overlayOwnerKey as $ } from "../../composables/overlayManager.js";
+import { colorRgb as h, sameColor as g } from "../../composables/color.js";
+const H = ["id", "role", "aria-label", "aria-disabled"], O = ["tabindex", "aria-valuenow", "aria-valuetext", "aria-disabled"], R = ["tabindex", "aria-valuenow", "aria-disabled"], W = ["tabindex", "aria-valuenow", "aria-valuetext", "aria-disabled"], A = {
+  key: 1,
+  class: "hys-ui-pf-color-presets",
+  role: "group",
+  "aria-label": "常用颜色"
+}, E = ["disabled", "aria-label", "aria-pressed", "onClick"], j = ["value", "disabled", "readonly", "aria-invalid"], q = {
+  key: 3,
+  class: "hys-ui-pf-color-error",
+  role: "alert"
+}, D = { key: 4 }, p = /* @__PURE__ */ z({
+  __name: "HysColorPanel",
+  props: {
+    state: {},
+    options: {}
+  },
+  setup(e) {
+    const v = e, P = V();
+    K(
+      $,
+      C(() => !!v.state.open.value && v.state.live.value)
+    );
+    const w = C(() => {
+      const i = v.state.working.value;
+      return "rgb(" + h(i).map((a) => Math.round(a * 255)).join(",") + ")";
+    });
+    function M(i) {
+      return i[0] * 0.2126 + i[1] * 0.7152 + i[2] * 0.0722 > 0.58 ? "#172a4d" : "#fff";
+    }
+    return (i, a) => (l(), o("div", T({
+      id: e.state.panelId,
+      ref: (t) => e.state.panel.value = t
+    }, d(P), {
+      class: ["hys-ui-v4-menu hys-ui-pf-color-panel hys-ui-color-panel", [e.options.popupClass, { "hys-ui-color-inline": e.options.inline }]],
+      style: e.options.inline ? {
+        ...e.options.popupStyle,
+        width: typeof e.options.popupWidth == "number" ? e.options.popupWidth + "px" : e.options.popupWidth
+      } : { ...e.options.popupStyle, ...e.state.floating.style.value },
+      role: e.options.inline ? "group" : "dialog",
+      "aria-label": e.options.ariaLabel || e.options.label || "选择颜色",
+      "aria-disabled": e.state.control.disabled.value || void 0,
+      onFocusin: a[21] || (a[21] = //@ts-ignore
+      (...t) => e.state.focusIn && e.state.focusIn(...t)),
+      onFocusout: a[22] || (a[22] = //@ts-ignore
+      (...t) => e.state.focusOut && e.state.focusOut(...t))
+    }), [
+      n("header", null, [
+        m(i.$slots, "header", c(x(e.state.context.value)), () => [
+          a[23] || (a[23] = n("strong", null, "选择颜色", -1)),
+          n("code", null, r(e.state.hasColor.value ? e.state.serialized.value : "未选择"), 1)
+        ], !0)
+      ]),
+      n("div", {
+        class: "hys-ui-pf-color-palette",
+        role: "slider",
+        tabindex: e.state.locked.value ? -1 : 0,
+        "aria-label": "饱和度与亮度",
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": Math.round(e.state.working.value.s * 100),
+        "aria-valuetext": "饱和度 " + Math.round(e.state.working.value.s * 100) + "%，亮度 " + Math.round(e.state.working.value.v * 100) + "%",
+        "aria-disabled": e.state.locked.value || void 0,
+        style: u({
+          backgroundColor: "hsl(" + e.state.working.value.h + ",100%,50%)"
+        }),
+        onPointerdown: a[0] || (a[0] = (t) => e.state.start(t, "palette")),
+        onPointermove: a[1] || (a[1] = //@ts-ignore
+        (...t) => e.state.move && e.state.move(...t)),
+        onPointerup: a[2] || (a[2] = //@ts-ignore
+        (...t) => e.state.end && e.state.end(...t)),
+        onPointercancel: a[3] || (a[3] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onLostpointercapture: a[4] || (a[4] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onKeydown: a[5] || (a[5] = (t) => e.state.keyboard(t, "palette"))
+      }, [
+        n("span", {
+          class: "hys-ui-pf-color-cursor",
+          style: u({
+            left: e.state.working.value.s * 100 + "%",
+            top: (1 - e.state.working.value.v) * 100 + "%",
+            background: w.value
+          })
+        }, null, 4)
+      ], 44, O),
+      n("div", {
+        class: "hys-ui-pf-color-hue",
+        role: "slider",
+        tabindex: e.state.locked.value ? -1 : 0,
+        "aria-label": "色相",
+        "aria-valuemin": "0",
+        "aria-valuemax": "359",
+        "aria-valuenow": Math.round(e.state.working.value.h),
+        "aria-disabled": e.state.locked.value || void 0,
+        onPointerdown: a[6] || (a[6] = (t) => e.state.start(t, "hue")),
+        onPointermove: a[7] || (a[7] = //@ts-ignore
+        (...t) => e.state.move && e.state.move(...t)),
+        onPointerup: a[8] || (a[8] = //@ts-ignore
+        (...t) => e.state.end && e.state.end(...t)),
+        onPointercancel: a[9] || (a[9] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onLostpointercapture: a[10] || (a[10] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onKeydown: a[11] || (a[11] = (t) => e.state.keyboard(t, "hue"))
+      }, [
+        n("span", {
+          style: u({ left: e.state.working.value.h / 359 * 100 + "%" })
+        }, null, 4)
+      ], 40, R),
+      e.options.showAlpha ? (l(), o("div", {
+        key: 0,
+        class: "hys-ui-color-alpha",
+        role: "slider",
+        tabindex: e.state.locked.value ? -1 : 0,
+        "aria-label": "透明度",
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": Math.round(e.state.working.value.a * 100),
+        "aria-valuetext": Math.round(e.state.working.value.a * 100) + "%",
+        "aria-disabled": e.state.locked.value || void 0,
+        onPointerdown: a[12] || (a[12] = (t) => e.state.start(t, "alpha")),
+        onPointermove: a[13] || (a[13] = //@ts-ignore
+        (...t) => e.state.move && e.state.move(...t)),
+        onPointerup: a[14] || (a[14] = //@ts-ignore
+        (...t) => e.state.end && e.state.end(...t)),
+        onPointercancel: a[15] || (a[15] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onLostpointercapture: a[16] || (a[16] = //@ts-ignore
+        (...t) => e.state.pointerCancel && e.state.pointerCancel(...t)),
+        onKeydown: a[17] || (a[17] = (t) => e.state.keyboard(t, "alpha"))
+      }, [
+        n("div", {
+          style: u({
+            background: "linear-gradient(to right,transparent," + w.value + ")"
+          })
+        }, null, 4),
+        n("span", {
+          style: u({ left: e.state.working.value.a * 100 + "%" })
+        }, null, 4)
+      ], 40, W)) : s("", !0),
+      e.options.showPresets !== !1 && e.state.presets.value.length ? (l(), o("div", A, [
+        (l(!0), o(I, null, L(e.state.presets.value, (t) => (l(), o("button", {
+          key: t.key,
+          type: "button",
+          disabled: e.state.locked.value,
+          "aria-label": t.value,
+          "aria-pressed": e.state.hasColor.value && d(g)(t.parsed, e.state.working.value),
+          onClick: (G) => e.state.setColor(t.value)
+        }, [
+          n("span", {
+            class: "hys-ui-color-preset-fill",
+            style: u({ background: t.color })
+          }, null, 4),
+          m(i.$slots, "preset", {
+            value: t.value,
+            color: t.color,
+            selected: e.state.hasColor.value && d(g)(t.parsed, e.state.working.value),
+            disabled: e.state.locked.value
+          }, () => [
+            e.state.hasColor.value && d(g)(t.parsed, e.state.working.value) ? (l(), k(d(N), {
+              key: 0,
+              size: 13,
+              style: u({ color: M(d(h)(t.parsed)) }),
+              "aria-hidden": "true"
+            }, null, 8, ["style"])) : s("", !0)
+          ], !0)
+        ], 8, E))), 128))
+      ])) : s("", !0),
+      e.options.showInput !== !1 ? (l(), o("input", {
+        key: 2,
+        class: "hys-ui-color-panel-input",
+        value: e.state.draft.value,
+        disabled: e.state.control.disabled.value,
+        readonly: e.options.readonly,
+        "aria-label": "面板颜色值",
+        "aria-invalid": !e.state.valid.value || void 0,
+        spellcheck: "false",
+        autocomplete: "off",
+        onInput: a[18] || (a[18] = (t) => e.state.draft.value = t.target.value),
+        onChange: a[19] || (a[19] = //@ts-ignore
+        (...t) => e.state.commitText && e.state.commitText(...t)),
+        onKeydown: a[20] || (a[20] = S(B(
+          //@ts-ignore
+          (...t) => e.state.confirm && e.state.confirm(...t),
+          ["prevent"]
+        ), ["enter"]))
+      }, null, 40, j)) : s("", !0),
+      e.state.valid.value ? s("", !0) : (l(), o("small", q, "请输入有效的颜色值")),
+      e.options.showFooter !== !1 ? (l(), o("footer", D, [
+        m(i.$slots, "footer", c(x(e.state.context.value)), () => [
+          e.options.clearable ? (l(), k(b, {
+            key: 0,
+            class: "hys-ui-color-clear",
+            variant: "ghost",
+            size: "sm",
+            disabled: e.state.locked.value || !e.state.value.value && !e.state.hasColor.value,
+            onClick: e.state.clear
+          }, {
+            default: y(() => [
+              f(r(e.options.clearText || "清空"), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled", "onClick"])) : s("", !0),
+          a[24] || (a[24] = n("span", { class: "hys-ui-color-footer-spacer" }, null, -1)),
+          e.options.immediate === !1 && !e.options.inline ? (l(), k(b, {
+            key: 1,
+            variant: "ghost",
+            size: "sm",
+            onClick: e.state.cancel
+          }, {
+            default: y(() => [
+              f(r(e.options.cancelText || "取消"), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])) : s("", !0),
+          F(b, {
+            size: "sm",
+            disabled: e.state.locked.value || !e.state.valid.value,
+            onClick: e.state.confirm
+          }, {
+            default: y(() => [
+              f(r(e.options.confirmText || (e.options.immediate === !1 ? "确认" : "完成")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled", "onClick"])
+        ], !0)
+      ])) : s("", !0)
+    ], 16, H));
+  }
+});
+export {
+  p as default
+};

package/dist/components/HysColorPicker/HysColorPicker.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysColorPicker2.vue.js";
 /* empty css                    */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-2a198a4e"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-dbe35865"]]);
 export {
-  m as default
+  p as default
 };