hys-ui 0.2.0 → 0.4.0

package/dist/components/HysTour/HysTour.vue.js

@@ -1,86 +1,314 @@
-import { defineComponent as C, useModel as V, ref as B, watch as f, openBlock as N, createBlock as b, withCtx as s, createElementVNode as x, toDisplayString as i, createVNode as m, createTextVNode as p, mergeModels as M } from "vue";
-import E from "../HysModal/HysModal.vue.js";
-import v from "../HysButton/HysButton.vue.js";
-const T = /* @__PURE__ */ C({
+import { defineComponent as ce, useModel as de, ref as W, computed as o, watch as O, openBlock as d, createBlock as D, createSlots as ve, withCtx as v, createElementBlock as C, renderSlot as y, normalizeProps as k, guardReactiveProps as g, createVNode as p, createCommentVNode as I, createElementVNode as j, createTextVNode as Y, toDisplayString as M, mergeProps as Z, resolveDynamicComponent as pe, unref as f, normalizeStyle as fe, mergeModels as _, nextTick as he } from "vue";
+import { X as me } from "lucide-vue-next";
+import H from "../HysButton/HysButton.vue.js";
+import ye from "../HysModal/HysModal.vue.js";
+import { useTourLayout as ke } from "../../composables/useTourLayout.js";
+const ge = ["viewBox"], xe = ["width", "height"], we = ["d", "fill"], Te = ["id"], Be = { key: 0 }, be = {
+  key: 0,
+  class: "hys-ui-tour-cover"
+}, Ce = { key: 1 }, Se = {
+  class: "hys-ui-tour-indicators",
+  "aria-live": "polite"
+}, Ve = /* @__PURE__ */ ce({
   __name: "HysTour",
-  props: /* @__PURE__ */ M({
+  props: /* @__PURE__ */ _({
     steps: {},
+    open: { type: Boolean, default: void 0 },
     current: {},
-    closeOnEscape: { type: Boolean, default: !0 }
+    closeOnEscape: { type: Boolean, default: !0 },
+    appendTo: { type: [String, Boolean], default: "body" },
+    zIndex: {},
+    skipText: { default: "跳过" },
+    prevText: { default: "上一步" },
+    nextText: { default: "下一步" },
+    finishText: { default: "完成" },
+    popupTransition: {},
+    popupTransitionDuration: {},
+    placement: { default: "bottom" },
+    mask: { type: [Boolean, Object], default: !0 },
+    gap: {},
+    showArrow: { type: Boolean, default: void 0 },
+    arrow: { type: [Boolean, Object], default: void 0 },
+    type: { default: "default" },
+    contentStyle: {},
+    scrollIntoViewOptions: { type: Boolean, default: !0 },
+    targetAreaClickable: { type: Boolean, default: !0 },
+    showClose: { type: Boolean, default: !0 },
+    closeIcon: {},
+    prevButtonProps: {},
+    nextButtonProps: {}
   }, {
     modelValue: { type: Boolean, default: !1 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ M(["finish", "close", "change", "update:current"], ["update:modelValue"]),
-  setup(l, { emit: y }) {
-    const n = l, r = V(l, "modelValue"), u = y, e = B(o(n.current ?? 0));
-    function o(t) {
-      return Math.max(0, Math.min(Math.max(0, n.steps.length - 1), Number.isFinite(t) ? Math.floor(t) : 0));
+  emits: /* @__PURE__ */ _(["update:open", "update:current", "change", "finish", "close"], ["update:modelValue"]),
+  setup(i, { expose: ee, emit: te }) {
+    const a = i, F = de(i, "modelValue"), x = te, V = W(), S = o(() => a.open ?? F.value), u = W(h(a.current ?? 0));
+    let z;
+    const l = o(() => a.steps[u.value]), R = o(() => u.value >= a.steps.length - 1), s = o(() => {
+      var e, t;
+      return {
+        ...a,
+        ...l.value,
+        gap: { ...a.gap, ...(e = l.value) == null ? void 0 : e.gap },
+        contentStyle: { ...a.contentStyle, ...(t = l.value) == null ? void 0 : t.contentStyle }
+      };
+    }), { bounds: oe, view: $, card: w, arrow: q, path: L } = ke(
+      o(() => {
+        var e;
+        return ((e = V.value) == null ? void 0 : e.open) === !0;
+      }),
+      o(() => {
+        var e;
+        return (e = V.value) == null ? void 0 : e.element;
+      }),
+      s,
+      o(() => {
+        var e;
+        return (e = l.value) == null ? void 0 : e.target;
+      })
+    ), X = o(() => s.value.mask !== !1), G = o(() => !!oe.value && s.value.targetAreaClickable !== !1), J = o(() => {
+      const e = s.value.mask;
+      return typeof e == "object" ? e : void 0;
+    }), ae = {
+      background: "transparent",
+      backdropFilter: "none",
+      pointerEvents: "none"
+    }, le = o(() => {
+      var e, t;
+      return {
+        ...s.value.contentStyle,
+        pointerEvents: "auto",
+        ...w.value ? { position: "fixed", left: w.value.x + "px", top: w.value.y + "px" } : {},
+        "--hys-ui-tour-arrow-x": (((e = q.value) == null ? void 0 : e.x) ?? 0) + "px",
+        "--hys-ui-tour-arrow-y": (((t = q.value) == null ? void 0 : t.y) ?? 0) + "px"
+      };
+    }), ne = o(() => {
+      const e = s.value.showArrow ?? s.value.arrow !== !1;
+      if (!(!w.value || !e))
+        return w.value.placement;
+    }), se = o(() => {
+      var e;
+      return typeof ((e = l.value) == null ? void 0 : e.title) == "string" ? l.value.title : "引导";
+    }), ue = o(() => {
+      var e;
+      return ((e = l.value) == null ? void 0 : e.title) && typeof l.value.title != "string";
+    }), ie = o(() => a.popupTransition === "none" ? !1 : a.popupTransition === "slide-fade" ? "slide" : a.popupTransition), T = ({ value: e }) => typeof e == "function" ? e() : e;
+    function h(e) {
+      return Math.max(0, Math.min(a.steps.length - 1, Number.isFinite(e) ? Math.floor(e) : 0));
     }
-    f(() => n.current, (t) => {
-      t !== void 0 && (e.value = o(t));
-    }), f(r, (t) => {
-      t && (e.value = o(n.current ?? 0));
-    }), f(() => n.steps.length, () => {
-      e.value = o(e.value);
+    O(() => a.current, (e) => {
+      e !== void 0 && (u.value = h(e));
+    }), O(S, (e) => {
+      e && z === void 0 && (u.value = h(a.current ?? 0));
+    }, { flush: "sync" }), O(() => a.steps.length, () => {
+      u.value = h(u.value);
     });
-    function h(t) {
-      e.value = o(t), u("change", e.value), u("update:current", e.value);
+    function K(e) {
+      a.open !== void 0 ? x("update:open", e) : F.value = e;
     }
-    function c() {
-      r.value = !1, u("close");
+    function B(e) {
+      const t = h(e);
+      u.value !== t && (u.value = t, x("change", t), x("update:current", t));
     }
-    function k() {
-      e.value >= n.steps.length - 1 ? (u("finish"), c()) : h(e.value + 1);
+    function re(e = a.current ?? 0) {
+      const t = h(e);
+      S.value || (z = t, K(!0), he(() => {
+        z === t && (z = void 0);
+      })), B(t);
     }
-    return (t, a) => {
-      var g;
-      return N(), b(E, {
-        open: r.value,
-        title: ((g = l.steps[e.value]) == null ? void 0 : g.title) || "引导",
-        "close-on-escape": l.closeOnEscape !== !1,
+    function b() {
+      var e, t;
+      S.value && (K(!1), (t = (e = l.value) == null ? void 0 : e.onClose) == null || t.call(e), x("close"));
+    }
+    function A() {
+      B(u.value - 1);
+    }
+    function E() {
+      if (!R.value) {
+        B(u.value + 1);
+        return;
+      }
+      x("finish"), b();
+    }
+    function Q(e) {
+      const { children: t, onClick: c, ...n } = e ?? {};
+      return { children: t, onClick: c, props: n };
+    }
+    const P = o(() => Q(s.value.prevButtonProps)), N = o(() => Q(s.value.nextButtonProps));
+    function U(e, t) {
+      var n;
+      const c = t === "previous" ? P.value : N.value;
+      (n = c.onClick) == null || n.call(c, e), e.defaultPrevented || (t === "previous" ? A : E)();
+    }
+    const m = o(() => ({
+      step: l.value,
+      current: u.value,
+      total: a.steps.length,
+      goTo: B,
+      previous: A,
+      next: E,
+      close: b
+    }));
+    return ee({ start: re, close: b, goTo: B, previous: A, next: E }), (e, t) => {
+      var c;
+      return d(), D(ye, {
+        ref_key: "modal",
+        ref: V,
+        open: S.value,
+        title: se.value,
+        modal: X.value && !G.value,
+        "modal-penetrable": "",
+        "close-on-escape": i.closeOnEscape,
         "close-on-mask": !1,
-        onClose: c
-      }, {
-        footer: s(() => [
-          x("span", null, i(l.steps.length ? e.value + 1 : 0) + " / " + i(l.steps.length), 1),
-          m(v, {
-            variant: "ghost",
-            onClick: c
-          }, {
-            default: s(() => [...a[1] || (a[1] = [
-              p("跳过", -1)
-            ])]),
-            _: 1
-          }),
-          m(v, {
-            variant: "secondary",
-            disabled: e.value === 0,
-            onClick: a[0] || (a[0] = (d) => h(e.value - 1))
-          }, {
-            default: s(() => [...a[2] || (a[2] = [
-              p("上一步", -1)
-            ])]),
-            _: 1
-          }, 8, ["disabled"]),
-          m(v, { onClick: k }, {
-            default: s(() => [
-              p(i(e.value >= l.steps.length - 1 ? "完成" : "下一步"), 1)
+        "show-close": s.value.showClose !== !1,
+        "append-to": i.appendTo,
+        "z-index": i.zIndex,
+        transition: ie.value,
+        "transition-duration": i.popupTransitionDuration,
+        overflow: "",
+        "keep-handle-visible": !1,
+        width: (c = l.value) != null && c.target ? "min(380px, calc(100vw - 24px))" : void 0,
+        "data-hys-tour-placement": ne.value,
+        "modal-class": "hys-ui-tour-card hys-ui-tour-card-" + (s.value.type ?? "default"),
+        "modal-style": le.value,
+        "mask-style": ae,
+        onClose: b
+      }, ve({
+        "close-icon": v(() => [
+          y(e.$slots, "close-icon", k(g(m.value)), () => [
+            typeof s.value.closeIcon == "string" ? (d(), C("span", Be, M(s.value.closeIcon), 1)) : (d(), D(pe(s.value.closeIcon ?? f(me)), {
+              key: 1,
+              size: 18
+            }))
+          ])
+        ]),
+        footer: v(() => [
+          y(e.$slots, "footer", k(g(m.value)), () => [
+            j("span", Se, [
+              y(e.$slots, "indicators", k(g(m.value)), () => [
+                Y(M(i.steps.length ? u.value + 1 : 0) + " / " + M(i.steps.length), 1)
+              ])
             ]),
-            _: 1
-          })
+            p(H, {
+              size: "sm",
+              variant: "ghost",
+              onClick: b
+            }, {
+              default: v(() => [
+                Y(M(i.skipText), 1)
+              ]),
+              _: 1
+            }),
+            p(H, Z({
+              size: "sm",
+              variant: "secondary"
+            }, P.value.props, {
+              disabled: u.value === 0 || P.value.props.disabled,
+              onClick: t[0] || (t[0] = (n) => U(n, "previous"))
+            }), {
+              default: v(() => [
+                p(T, {
+                  value: P.value.children ?? i.prevText
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+            }, 16, ["disabled"]),
+            p(H, Z({
+              size: "sm",
+              variant: s.value.type === "primary" ? "secondary" : "primary"
+            }, N.value.props, {
+              onClick: t[1] || (t[1] = (n) => U(n, "next"))
+            }), {
+              default: v(() => [
+                p(T, {
+                  value: N.value.children ?? (R.value ? i.finishText : i.nextText)
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+            }, 16, ["variant"])
+          ])
         ]),
-        default: s(() => {
-          var d;
+        default: v(() => {
+          var n;
           return [
-            x("p", null, i(((d = l.steps[e.value]) == null ? void 0 : d.description) || "暂无引导步骤"), 1)
+            (n = l.value) != null && n.cover || e.$slots.cover ? (d(), C("div", be, [
+              y(e.$slots, "cover", k(g(m.value)), () => {
+                var r;
+                return [
+                  p(T, {
+                    value: (r = l.value) == null ? void 0 : r.cover
+                  }, null, 8, ["value"])
+                ];
+              })
+            ])) : I("", !0),
+            y(e.$slots, "default", k(g(m.value)), () => {
+              var r;
+              return [
+                (r = l.value) != null && r.description ? (d(), D(T, {
+                  key: 0,
+                  value: l.value.description
+                }, null, 8, ["value"])) : l.value ? I("", !0) : (d(), C("span", Ce, "暂无引导步骤"))
+              ];
+            })
           ];
         }),
-        _: 1
-      }, 8, ["open", "title", "close-on-escape"]);
+        _: 2
+      }, [
+        X.value ? {
+          name: "backdrop",
+          fn: v(() => {
+            var n, r;
+            return [
+              f(L) ? (d(), C("svg", {
+                key: 0,
+                class: "hys-ui-tour-mask",
+                viewBox: `0 0 ${f($).width} ${f($).height}`,
+                preserveAspectRatio: "none",
+                "aria-hidden": "true",
+                style: fe((n = J.value) == null ? void 0 : n.style)
+              }, [
+                G.value ? I("", !0) : (d(), C("rect", {
+                  key: 0,
+                  width: f($).width,
+                  height: f($).height,
+                  fill: "transparent",
+                  class: "hys-ui-tour-mask-hit"
+                }, null, 8, xe)),
+                j("path", {
+                  d: f(L),
+                  "fill-rule": "evenodd",
+                  fill: ((r = J.value) == null ? void 0 : r.color) ?? "rgba(11, 24, 61, 0.48)",
+                  class: "hys-ui-tour-mask-hit"
+                }, null, 8, we)
+              ], 12, ge)) : I("", !0)
+            ];
+          }),
+          key: "0"
+        } : void 0,
+        ue.value || e.$slots.header ? {
+          name: "header",
+          fn: v(({ titleId: n }) => [
+            j("h2", {
+              id: n,
+              class: "hys-ui-tour-heading"
+            }, [
+              y(e.$slots, "header", k(g(m.value)), () => {
+                var r;
+                return [
+                  p(T, {
+                    value: (r = l.value) == null ? void 0 : r.title
+                  }, null, 8, ["value"])
+                ];
+              })
+            ], 8, Te)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["open", "title", "modal", "close-on-escape", "show-close", "append-to", "z-index", "transition", "transition-duration", "width", "data-hys-tour-placement", "modal-class", "modal-style"]);
     };
   }
 });
 export {
-  T as default
+  Ve as default
 };

package/dist/components/HysTour/HysTour3.vue.js

@@ -0,0 +1,5 @@
+import o from "./HysTour.vue.js";
+/* empty css             */
+export {
+  o as default
+};

package/dist/components/HysTransfer/HysTransfer.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysTransfer2.vue.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0d8bcb72"]]);
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-8f1c6909"]]);
 export {
-  f as default
+  a as default
 };