@routa/ui-vue 0.1.0

package/dist/color-picker/index.mjs

@@ -0,0 +1,481 @@
+import '../style/color-picker.css';
+import '../style/Input.css';
+import '../style/Popover.css';
+import '../style/Icon.css';
+import '../style/Button.css';
+import { w as z } from "../chunks/install-DJNxamQ0.mjs";
+import { defineComponent as R, ref as L, computed as S, openBlock as _, createElementBlock as M, withKeys as y, withModifiers as x, normalizeStyle as k, createElementVNode as h, normalizeClass as q, unref as f, createVNode as C, withCtx as P, mergeProps as F, createBlock as Y, createCommentVNode as N, Fragment as j, renderList as W, createTextVNode as O } from "vue";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { s as T, e as G, c as X } from "../chunks/index-B0yEC3RG.mjs";
+import { u as J } from "../chunks/use-signals-CE1T2jXK.mjs";
+import { u as Q } from "../chunks/use-form-item-CqDbWCiU.mjs";
+import { u as Z } from "../chunks/use-id-D3casveg.mjs";
+import { _ as ee } from "../chunks/Input.vue_vue_type_script_setup_true_lang-PeDZ7smO.mjs";
+import { _ as te } from "../chunks/Popover.vue_vue_type_script_setup_true_lang-CVWbekIQ.mjs";
+import { _ as ae } from "../chunks/Icon.vue_vue_type_script_setup_true_lang-LQ-KuJ6a.mjs";
+import { _ as le } from "../chunks/Button.vue_vue_type_script_setup_true_lang-BthtEkGw.mjs";
+import { _ as D } from "../chunks/_plugin-vue_export-helper-CHgC5LLL.mjs";
+const U = (e, o, t) => Math.min(Math.max(e, o), t);
+function ne(e) {
+  e = e.replace(/^#/, ""), e.length === 3 && (e = e.split("").map((s) => s + s).join(""));
+  const o = parseInt(e, 16), t = o >> 16 & 255, l = o >> 8 & 255, n = o & 255;
+  return { r: t, g: l, b: n, a: 1 };
+}
+function I({ r: e, g: o, b: t }) {
+  const l = (n) => {
+    const s = Math.round(n).toString(16);
+    return s.length === 1 ? "0" + s : s;
+  };
+  return "#" + l(e) + l(o) + l(t);
+}
+function H({ r: e, g: o, b: t, a: l }) {
+  e /= 255, o /= 255, t /= 255;
+  const n = Math.max(e, o, t), s = Math.min(e, o, t);
+  let d = 0, v = 0;
+  const i = n, c = n - s;
+  if (v = n === 0 ? 0 : c / n, n !== s) {
+    switch (n) {
+      case e:
+        d = (o - t) / c + (o < t ? 6 : 0);
+        break;
+      case o:
+        d = (t - e) / c + 2;
+        break;
+      case t:
+        d = (e - o) / c + 4;
+        break;
+    }
+    d /= 6;
+  }
+  return { h: d, s: v, v: i, a: l ?? 1 };
+}
+function B({ h: e, s: o, v: t, a: l }) {
+  let n = 0, s = 0, d = 0;
+  const v = Math.floor(e * 6), i = e * 6 - v, c = t * (1 - o), a = t * (1 - i * o), r = t * (1 - (1 - i) * o);
+  switch (v % 6) {
+    case 0:
+      n = t, s = r, d = c;
+      break;
+    case 1:
+      n = a, s = t, d = c;
+      break;
+    case 2:
+      n = c, s = t, d = r;
+      break;
+    case 3:
+      n = c, s = a, d = t;
+      break;
+    case 4:
+      n = r, s = c, d = t;
+      break;
+    case 5:
+      n = t, s = c, d = a;
+      break;
+  }
+  return {
+    r: Math.round(n * 255),
+    g: Math.round(s * 255),
+    b: Math.round(d * 255),
+    a: l ?? 1
+  };
+}
+function A(e) {
+  if (e.startsWith("#"))
+    return ne(e);
+  if (e.startsWith("rgb")) {
+    const o = e.match(/\d+(\.\d+)?/g);
+    if (o)
+      return {
+        r: parseInt(o[0]),
+        g: parseInt(o[1]),
+        b: parseInt(o[2]),
+        a: o[3] ? parseFloat(o[3]) : 1
+      };
+  }
+  return { r: 0, g: 0, b: 0, a: 1 };
+}
+function oe(e) {
+  const o = A(e.value ?? "#000000"), t = H(o), l = T(t), n = () => typeof e.disabled == "function" ? e.disabled() : e.disabled ?? !1, s = T(n());
+  typeof e.disabled == "function" && G(() => {
+    s.value = n();
+  });
+  const d = X(() => B(l.value)), v = X(() => I(d.value)), i = (a) => {
+    var u;
+    if (s.value) return;
+    const r = { ...l.value, ...a };
+    l.value = r, (u = e.onChange) == null || u.call(e, I(B(r)));
+  };
+  return {
+    state: {
+      get hsv() {
+        return l.value;
+      },
+      set hsv(a) {
+        l.value = a;
+      },
+      get rgb() {
+        return d.value;
+      },
+      get hex() {
+        return v.value;
+      },
+      set hex(a) {
+        l.value = H(A(a));
+      },
+      get disabled() {
+        return s.value;
+      },
+      set disabled(a) {
+        s.value = a;
+      }
+    },
+    actions: {
+      updateHsv: i,
+      setColor: (a) => {
+        var u;
+        if (s.value) return;
+        const r = A(a);
+        l.value = H(r), (u = e.onChange) == null || u.call(e, I(B(l.value)));
+      },
+      setHue: (a) => i({ h: a }),
+      setSaturation: (a) => i({ s: a }),
+      setValue: (a) => i({ v: a }),
+      setAlpha: (a) => i({ a })
+    },
+    getTriggerProps: (a) => ({
+      role: "button",
+      "aria-haspopup": "true",
+      "aria-expanded": a
+    }),
+    getHueSliderProps: () => ({
+      role: "slider",
+      "aria-valuemin": 0,
+      "aria-valuemax": 360,
+      "aria-valuenow": l.value.h,
+      "aria-label": "色相"
+    }),
+    getAlphaSliderProps: () => ({
+      role: "slider",
+      "aria-valuemin": 0,
+      "aria-valuemax": 1,
+      "aria-valuenow": l.value.a ?? 1,
+      "aria-label": "透明度"
+    }),
+    getSaturationProps: () => ({
+      role: "slider",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": `饱和度 ${Math.round(l.value.s)}%，明度 ${Math.round(l.value.v)}%`
+    })
+  };
+}
+const se = ["aria-valuenow", "aria-valuetext", "tabindex", "onKeydown"], re = /* @__PURE__ */ R({
+  __name: "SaturationPanel",
+  props: {
+    h: { type: Number, required: !0 },
+    s: { type: Number, required: !0 },
+    v: { type: Number, required: !0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:s", "update:v"],
+  setup(e, { emit: o }) {
+    const t = e, l = o, n = L(null), s = L(!1), d = S(() => ({
+      left: `${t.s * 100}%`,
+      top: `${(1 - t.v) * 100}%`
+    })), v = S(() => ({
+      backgroundColor: `hsl(${t.h * 360}, 100%, 50%)`
+    })), i = (m) => {
+      if (t.disabled || !n.value) return;
+      const b = n.value.getBoundingClientRect(), E = "touches" in m ? m.touches[0].clientX : m.clientX, K = "touches" in m ? m.touches[0].clientY : m.clientY, V = U((E - b.left) / b.width, 0, 1), w = U(1 - (K - b.top) / b.height, 0, 1);
+      l("update:s", V), l("update:v", w);
+    }, c = (m) => {
+      s.value = !0, i(m), window.addEventListener("mousemove", i), window.addEventListener("mouseup", a), window.addEventListener("touchmove", i), window.addEventListener("touchend", a);
+    }, a = () => {
+      s.value = !1, window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", a), window.removeEventListener("touchmove", i), window.removeEventListener("touchend", a);
+    }, r = () => {
+      if (t.disabled) return;
+      const m = Math.max(0, t.s - 0.01);
+      l("update:s", m);
+    }, u = () => {
+      if (t.disabled) return;
+      const m = Math.min(1, t.s + 0.01);
+      l("update:s", m);
+    }, p = () => {
+      if (t.disabled) return;
+      const m = Math.min(1, t.v + 0.01);
+      l("update:v", m);
+    }, g = () => {
+      if (t.disabled) return;
+      const m = Math.max(0, t.v - 0.01);
+      l("update:v", m);
+    };
+    return (m, b) => (_(), M("div", {
+      ref_key: "panelRef",
+      ref: n,
+      class: "l-color-saturation",
+      style: k(v.value),
+      role: "slider",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": Math.round(e.s * 100),
+      "aria-valuetext": `饱和�?${Math.round(e.s * 100)}%，明�?${Math.round(e.v * 100)}%`,
+      "aria-label": "饱和度和明度",
+      tabindex: e.disabled ? -1 : 0,
+      onKeydown: [
+        y(x(r, ["prevent"]), ["left"]),
+        y(x(u, ["prevent"]), ["right"]),
+        y(x(p, ["prevent"]), ["up"]),
+        y(x(g, ["prevent"]), ["down"])
+      ],
+      onMousedown: c,
+      onTouchstartPassive: c
+    }, [
+      b[0] || (b[0] = h("div", { class: "l-color-saturation__white" }, null, -1)),
+      b[1] || (b[1] = h("div", { class: "l-color-saturation__black" }, null, -1)),
+      h("div", {
+        class: "l-color-saturation__cursor",
+        style: k(d.value)
+      }, null, 4)
+    ], 44, se));
+  }
+}), ie = /* @__PURE__ */ D(re, [["__scopeId", "data-v-313cba21"]]), de = ["aria-valuenow", "tabindex", "onKeydown"], ue = /* @__PURE__ */ R({
+  __name: "HueSlider",
+  props: {
+    modelValue: { type: Number, required: !0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const t = e, l = o, n = L(null), s = (a) => {
+      if (t.disabled || !n.value) return;
+      const r = n.value.getBoundingClientRect(), u = "touches" in a ? a.touches[0].clientX : a.clientX, p = U((u - r.left) / r.width, 0, 1);
+      l("update:modelValue", p);
+    }, d = (a) => {
+      s(a), window.addEventListener("mousemove", s), window.addEventListener("mouseup", v);
+    }, v = () => {
+      window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", v);
+    }, i = () => {
+      if (t.disabled) return;
+      const a = Math.max(0, t.modelValue - 1 / 360);
+      l("update:modelValue", a);
+    }, c = () => {
+      if (t.disabled) return;
+      const a = Math.min(1, t.modelValue + 1 / 360);
+      l("update:modelValue", a);
+    };
+    return (a, r) => (_(), M("div", {
+      ref_key: "sliderRef",
+      ref: n,
+      class: "l-color-hue-slider",
+      role: "slider",
+      "aria-valuemin": "0",
+      "aria-valuemax": "360",
+      "aria-valuenow": Math.round(e.modelValue * 360),
+      "aria-label": "色相",
+      tabindex: e.disabled ? -1 : 0,
+      onKeydown: [
+        y(x(i, ["prevent"]), ["left"]),
+        y(x(c, ["prevent"]), ["right"])
+      ],
+      onMousedown: d
+    }, [
+      h("div", {
+        class: "l-color-hue-slider__thumb",
+        style: k({ left: `${e.modelValue * 100}%` })
+      }, null, 4)
+    ], 40, de));
+  }
+}), ce = /* @__PURE__ */ D(ue, [["__scopeId", "data-v-3a2582ac"]]), me = ["aria-valuenow", "tabindex", "onKeydown"], ve = /* @__PURE__ */ R({
+  __name: "AlphaSlider",
+  props: {
+    modelValue: { type: Number, required: !0 },
+    rgb: { type: Object, required: !0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const t = e, l = o, n = L(null), s = S(() => {
+      const { r, g: u, b: p } = t.rgb;
+      return {
+        background: `linear-gradient(to right, rgba(${r},${u},${p},0), rgba(${r},${u},${p},1))`
+      };
+    }), d = (r) => {
+      if (t.disabled || !n.value) return;
+      const u = n.value.getBoundingClientRect(), p = "touches" in r ? r.touches[0].clientX : r.clientX, g = U((p - u.left) / u.width, 0, 1);
+      l("update:modelValue", g);
+    }, v = (r) => {
+      d(r), window.addEventListener("mousemove", d), window.addEventListener("mouseup", i);
+    }, i = () => {
+      window.removeEventListener("mousemove", d), window.removeEventListener("mouseup", i);
+    }, c = () => {
+      if (t.disabled) return;
+      const r = Math.max(0, t.modelValue - 0.01);
+      l("update:modelValue", r);
+    }, a = () => {
+      if (t.disabled) return;
+      const r = Math.min(1, t.modelValue + 0.01);
+      l("update:modelValue", r);
+    };
+    return (r, u) => (_(), M("div", {
+      ref_key: "sliderRef",
+      ref: n,
+      class: "l-color-alpha-slider",
+      role: "slider",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": Math.round(e.modelValue * 100),
+      "aria-label": "透明度",
+      tabindex: e.disabled ? -1 : 0,
+      onKeydown: [
+        y(x(c, ["prevent"]), ["left"]),
+        y(x(a, ["prevent"]), ["right"])
+      ],
+      onMousedown: v
+    }, [
+      u[0] || (u[0] = h("div", { class: "l-color-alpha-slider__bg" }, null, -1)),
+      h("div", {
+        class: "l-color-alpha-slider__gradient",
+        style: k(s.value)
+      }, null, 4),
+      h("div", {
+        class: "l-color-alpha-slider__thumb",
+        style: k({ left: `${e.modelValue * 100}%` })
+      }, null, 4)
+    ], 40, me));
+  }
+}), pe = /* @__PURE__ */ D(ve, [["__scopeId", "data-v-32c1df79"]]), he = ["id", "disabled"], fe = ["id"], be = { class: "l-color-picker__color" }, ge = { class: "l-color-picker__dropdown" }, we = { class: "l-color-picker__controls" }, _e = { class: "l-color-picker__sliders" }, ye = { class: "l-color-picker__preview" }, xe = {
+  key: 0,
+  class: "l-color-picker__predefine"
+}, ke = ["onClick"], Ve = { class: "l-color-picker__footer" }, Me = /* @__PURE__ */ R({
+  name: "LColorPicker",
+  __name: "ColorPicker",
+  props: {
+    modelValue: { type: String, default: "#000000" },
+    disabled: { type: Boolean, default: !1 },
+    showAlpha: { type: Boolean, default: !1 },
+    size: { type: String, default: "md" },
+    predefine: { type: Array, default: () => [] }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: o }) {
+    const t = e, l = o, { formItem: n, size: s, disabled: d, inputId: v } = Q(), i = S(() => t.disabled || d.value), c = Z("color-picker"), a = (v == null ? void 0 : v.value) || c, r = `${a}-hex`, u = L(!1), p = oe({
+      value: t.modelValue,
+      disabled: () => i.value,
+      onChange: (V) => {
+        l("update:modelValue", V), l("change", V), n == null || n.validate("change").catch(() => {
+        });
+      }
+    }), { hsv: g, rgb: m, hex: b } = J(p, {
+      hex: () => t.modelValue,
+      disabled: () => i.value
+    }), E = S(() => ({
+      backgroundColor: b.value
+    })), K = (V) => {
+      i.value || p.actions.setColor(V);
+    };
+    return (V, w) => (_(), M("div", {
+      class: q(["l-color-picker", [
+        `l-color-picker--${e.size || f(s)}`,
+        { "is-disabled": i.value }
+      ]])
+    }, [
+      h("input", {
+        id: f(a),
+        type: "text",
+        style: { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", "white-space": "nowrap", border: "0" },
+        "aria-hidden": "true",
+        tabindex: "-1",
+        disabled: i.value
+      }, null, 8, he),
+      C(te, {
+        visible: u.value,
+        "onUpdate:visible": w[1] || (w[1] = ($) => u.value = $),
+        trigger: "click",
+        placement: "bottom-start",
+        disabled: i.value,
+        width: "auto",
+        "popper-class": "l-color-picker__popper"
+      }, {
+        content: P(() => [
+          h("div", ge, [
+            C(ie, {
+              h: f(g).h,
+              s: f(g).s,
+              v: f(g).v,
+              "onUpdate:s": f(p).actions.setSaturation,
+              "onUpdate:v": f(p).actions.setValue
+            }, null, 8, ["h", "s", "v", "onUpdate:s", "onUpdate:v"]),
+            h("div", we, [
+              h("div", _e, [
+                C(ce, {
+                  "model-value": f(g).h,
+                  "onUpdate:modelValue": f(p).actions.setHue
+                }, null, 8, ["model-value", "onUpdate:modelValue"]),
+                e.showAlpha ? (_(), Y(pe, {
+                  key: 0,
+                  "model-value": f(g).a ?? 1,
+                  rgb: f(m),
+                  "onUpdate:modelValue": f(p).actions.setAlpha
+                }, null, 8, ["model-value", "rgb", "onUpdate:modelValue"])) : N("", !0)
+              ]),
+              h("div", ye, [
+                h("div", {
+                  class: "l-color-picker__preview-inner",
+                  style: k(E.value)
+                }, null, 4)
+              ])
+            ]),
+            e.predefine.length > 0 ? (_(), M("div", xe, [
+              (_(!0), M(j, null, W(e.predefine, ($) => (_(), M("div", {
+                key: $,
+                class: "l-color-picker__predefine-item",
+                style: k({ backgroundColor: $ }),
+                onClick: ($e) => K($)
+              }, null, 12, ke))), 128))
+            ])) : N("", !0),
+            h("div", Ve, [
+              C(ee, {
+                id: r,
+                size: "sm",
+                "model-value": f(b),
+                "onUpdate:modelValue": f(p).actions.setColor
+              }, null, 8, ["model-value", "onUpdate:modelValue"]),
+              C(le, {
+                size: "sm",
+                type: "primary",
+                onClick: w[0] || (w[0] = ($) => u.value = !1)
+              }, {
+                default: P(() => [...w[2] || (w[2] = [
+                  O("确定", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ])
+        ]),
+        default: P(() => [
+          h("div", F({
+            id: f(a),
+            class: "l-color-picker__trigger"
+          }, f(p).getTriggerProps(u.value)), [
+            h("div", be, [
+              h("div", {
+                class: "l-color-picker__color-inner",
+                style: k(E.value)
+              }, null, 4)
+            ]),
+            C(ae, {
+              name: "lucide:chevron-down",
+              class: "l-color-picker__icon"
+            })
+          ], 16, fe)
+        ]),
+        _: 1
+      }, 8, ["visible", "disabled"])
+    ], 2));
+  }
+}), De = z(Me);
+export {
+  De as LColorPicker,
+  De as default
+};

package/dist/config-provider/ConfigProvider.vue.d.ts

@@ -0,0 +1,64 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        hostRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly theme: {
+        readonly type: import('vue').PropType<import('./types').RoutaThemeMode>;
+        readonly default: undefined;
+        readonly validator: (value: unknown) => boolean;
+    };
+    readonly radius: {
+        readonly type: import('vue').PropType<import('./types').RoutaRadiusConfig>;
+        readonly default: undefined;
+        readonly validator: (value: unknown) => boolean;
+    };
+    readonly themeOverrides: {
+        readonly type: import('vue').PropType<import('./types').RoutaThemeOverrides>;
+        readonly default: undefined;
+    };
+    readonly feedback: {
+        readonly type: import('vue').PropType<import('./types').RoutaFeedbackConfig>;
+        readonly default: undefined;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly theme: {
+        readonly type: import('vue').PropType<import('./types').RoutaThemeMode>;
+        readonly default: undefined;
+        readonly validator: (value: unknown) => boolean;
+    };
+    readonly radius: {
+        readonly type: import('vue').PropType<import('./types').RoutaRadiusConfig>;
+        readonly default: undefined;
+        readonly validator: (value: unknown) => boolean;
+    };
+    readonly themeOverrides: {
+        readonly type: import('vue').PropType<import('./types').RoutaThemeOverrides>;
+        readonly default: undefined;
+    };
+    readonly feedback: {
+        readonly type: import('vue').PropType<import('./types').RoutaFeedbackConfig>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {
+    readonly radius: import('./types').RoutaRadiusConfig;
+    readonly themeOverrides: import('./types').RoutaThemeOverrides;
+    readonly theme: import('./types').RoutaThemeMode;
+    readonly feedback: import('./types').RoutaFeedbackConfig;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    hostRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};