@dazhicheng/ui 1.5.199 → 1.5.202

package/dist/components/tt-drawer/src/RenderDrawer.vue.js

@@ -0,0 +1,157 @@
+import { defineComponent as Y, useAttrs as Z, ref as $, useId as ee, getCurrentInstance as oe, reactive as te, computed as l, unref as o, toValue as r, watch as re, nextTick as se, onMounted as ne, createBlock as B, createCommentVNode as S, openBlock as w, mergeProps as V, createSlots as D, withCtx as i, withDirectives as ie, createVNode as T, createElementBlock as ae, normalizeClass as le, normalizeStyle as ce, renderSlot as c, renderList as ue, normalizeProps as de, guardReactiveProps as me } from "vue";
+import { useDesign as pe, usePriorityValues as fe, getPriorityValues as he } from "@dazhicheng/hooks";
+import { isNumber as ge } from "@dazhicheng/utils";
+import { omit as ke, pick as O } from "lodash-es";
+import "../../tt-loading/index.js";
+import { useStore as we } from "@tanstack/vue-store";
+import { drawerProps as R, ElDrawer as be } from "element-plus";
+import Ce from "./components/DrawerFooter.vue.js";
+/* empty css                             */
+import ve from "./components/DrawerHeader.vue.js";
+import { useDrawerResizable as Pe } from "./hooks/useResizable.js";
+import { basicProps as ye } from "./props.js";
+import { DrawerApi as $e } from "./utils/drawer-api.js";
+import { vTtLoading as Be } from "../../tt-loading/src/directive.js";
+const je = /* @__PURE__ */ Y({
+  name: "TtDrawer",
+  __name: "RenderDrawer",
+  props: {
+    ...R,
+    ...ye,
+    /** drawerApi */
+    drawerApi: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["visible-change", "register", "update:visible"],
+  setup(x, { expose: F, emit: H }) {
+    var P;
+    const u = x, d = H, m = Z(), p = $(!1), b = ee(), f = $(null), { prefixCls: C } = pe("drawer"), s = oe();
+    let t = u.drawerApi;
+    t || (t = new $e(u), t.useStore = (e) => we(t.store, e));
+    const a = te({
+      setDrawerProps: t.setState,
+      emitVisible: void 0
+    }), z = (P = t.useStore) == null ? void 0 : P.call(t), {
+      confirmLoading: A,
+      visible: h,
+      showFooter: g,
+      footerHeight: v,
+      cancelButtonProps: L,
+      showCancelBtn: _,
+      cancelText: N,
+      showOkBtn: j,
+      okButtonProps: E,
+      okText: I,
+      title: M,
+      loading: U,
+      loadingText: q,
+      ...G
+    } = fe(u, z), J = l(() => {
+      const e = he(G), n = ke(m, ["onOk", "onClosed", "onClose", "onVisibleChange", "onReceiveSharedData"]);
+      return {
+        ...O(e, Object.keys(R)),
+        ...n,
+        modelValue: o(h),
+        class: `${C} ${o(e).class || ""}`,
+        modalClass: `${o(e).modalClass || o(e).class}`
+      };
+    }), K = l(() => ({
+      confirmLoading: r(A),
+      showFooter: r(g),
+      footerHeight: r(v),
+      cancelButtonProps: r(L),
+      cancelText: r(N),
+      showOkBtn: r(j),
+      okText: r(I),
+      okButtonProps: r(E),
+      showCancelBtn: r(_)
+    })), Q = l(() => {
+      const e = r(v);
+      return r(g) && e ? `${ge(e) ? e : Number.parseFloat(e)}px` : "0px";
+    }), W = l(() => ({
+      height: `calc(100% - ${o(Q)})`
+    }));
+    re(
+      () => h.value,
+      (e) => {
+        se(() => {
+          var n;
+          d("update:visible", e), d("visible-change", e), s && ((n = a.emitVisible) == null || n.call(a, e, s == null ? void 0 : s.uid)), e ? p.value = e : (setTimeout(() => {
+            p.value = e;
+          }, 300), t.changeOkLoading(!1));
+        });
+      }
+    );
+    const [X] = Pe(b, h, t.setState);
+    return s && d("register", a, s == null ? void 0 : s.uid), ne(() => {
+      const e = O(m, ["onOk", "onClosed", "onVisibleChange"]);
+      t.mount(f.value, {
+        ...e,
+        // 兼容 BasicDrawer 组件的 onClose 事件
+        onClosed: e.onClosed || m.onClose
+      });
+    }), F({
+      drawerRef: f,
+      drawerApi: t
+    }), (e, n) => p.value ? (w(), B(o(be), V({
+      key: 0,
+      id: o(b),
+      ref_key: "drawerRef",
+      ref: f
+    }, J.value, {
+      "destroy-on-close": !0,
+      "before-close": o(t).onClosed
+    }), D({
+      default: i(() => [
+        ie((w(), ae("div", {
+          style: ce(W.value),
+          class: le(`${o(C)}-content`)
+        }, [
+          c(e.$slots, "default")
+        ], 6)), [
+          [o(Be), {
+            visible: o(U),
+            text: o(q)
+          }]
+        ]),
+        o(g) || e.$slots.footer ? (w(), B(Ce, V({ key: 0 }, K.value, {
+          onClose: o(t).onClosed,
+          onFooterok: o(t).onOk
+        }), D({ _: 2 }, [
+          ue(Object.keys(e.$slots), (k) => ({
+            name: k,
+            fn: i((y) => [
+              c(e.$slots, k, de(me(y)))
+            ])
+          }))
+        ]), 1040, ["onClose", "onFooterok"])) : S("", !0),
+        T(o(X))
+      ]),
+      _: 2
+    }, [
+      e.$slots.header ? {
+        name: "header",
+        fn: i(() => [
+          c(e.$slots, "header")
+        ]),
+        key: "1"
+      } : {
+        name: "header",
+        fn: i(() => [
+          T(ve, { title: o(M) }, {
+            titleToolbar: i(() => [
+              c(e.$slots, "titleToolbar")
+            ]),
+            _: 3
+          }, 8, ["title"])
+        ]),
+        key: "0"
+      }
+    ]), 1040, ["id", "before-close"])) : S("", !0);
+  }
+});
+export {
+  je as default
+};

package/dist/components/tt-drawer/src/RenderDrawer.vue3.js

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

package/dist/components/tt-drawer/src/components/DrawerFooter.vue.js

@@ -0,0 +1,56 @@
+import { defineComponent as v, inject as I, computed as t, toValue as D, createElementBlock as i, openBlock as o, normalizeStyle as P, normalizeClass as S, unref as n, renderSlot as r, Fragment as V, createBlock as l, createCommentVNode as d, withModifiers as c, withCtx as m, createTextVNode as p, toDisplayString as f, mergeProps as b } from "vue";
+import { useDesign as j } from "@dazhicheng/hooks";
+import { generateTestId as u } from "@dazhicheng/utils";
+import { TtButton as k } from "../../../tt-button/index.js";
+import { footerProps as x } from "../props.js";
+const L = /* @__PURE__ */ v({
+  name: "DrawerFooter",
+  __name: "DrawerFooter",
+  props: x,
+  emits: ["close"],
+  setup(g, { emit: C }) {
+    const s = g, h = C, { prefixCls: w } = j("drawer-footer"), a = I("drawerIdContext", ""), B = t(() => u(a, "btn-confirm")), y = t(() => u(a, "btn-cancel")), F = t(() => ({
+      height: `${s.footerHeight}px`,
+      padding: "0 12px",
+      textAlign: "right"
+    })), T = t(() => D(s.okButtonProps) || {});
+    function $(e) {
+      h("close", e);
+    }
+    return (e, z) => (o(), i("div", {
+      class: S([n(w), "w-full flex items-center justify-end"]),
+      style: P(F.value)
+    }, [
+      e.$slots.footer ? r(e.$slots, "footer", { key: 1 }) : (o(), i(V, { key: 0 }, [
+        r(e.$slots, "insertFooter"),
+        e.showCancelBtn ? (o(), l(n(k), {
+          key: 0,
+          "data-testid": y.value,
+          onClick: c($, ["stop"])
+        }, {
+          default: m(() => [
+            p(f(e.cancelText), 1)
+          ]),
+          _: 1
+        }, 8, ["data-testid"])) : d("", !0),
+        r(e.$slots, "centerFooter"),
+        e.showOkBtn ? (o(), l(n(k), b({
+          key: 1,
+          loading: e.confirmLoading
+        }, T.value, {
+          "data-testid": B.value,
+          onClick: c(e.$attrs.onFooterok, ["stop"])
+        }), {
+          default: m(() => [
+            p(f(e.okText), 1)
+          ]),
+          _: 1
+        }, 16, ["loading", "data-testid", "onClick"])) : d("", !0),
+        r(e.$slots, "appendFooter")
+      ], 64))
+    ], 6));
+  }
+});
+export {
+  L as default
+};

package/dist/components/tt-drawer/src/components/DrawerFooter.vue3.js

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

package/dist/components/tt-drawer/src/components/DrawerHeader.vue.js

@@ -0,0 +1,7 @@
+import r from "./DrawerHeader.vue2.js";
+/* empty css                  */
+import o from "../../../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ o(r, [["__scopeId", "data-v-6cdf82e0"]]);
+export {
+  f as default
+};

package/dist/components/tt-drawer/src/components/DrawerHeader.vue2.js

@@ -0,0 +1,21 @@
+import { defineComponent as n, createElementBlock as a, openBlock as s, normalizeClass as o, unref as l, createElementVNode as i, toDisplayString as p } from "vue";
+import { propTypes as m, useDesign as c } from "@dazhicheng/hooks";
+const _ = /* @__PURE__ */ n({
+  name: "DrawerHeader",
+  __name: "DrawerHeader",
+  props: {
+    /** 标题 */
+    title: m.string
+  },
+  setup(e) {
+    const { prefixCls: r } = c("drawer-header");
+    return (t, d) => (s(), a("div", {
+      class: o(l(r))
+    }, [
+      i("span", null, p(t.$slots.title ? "" : e.title), 1)
+    ], 2));
+  }
+});
+export {
+  _ as default
+};

package/dist/components/tt-drawer/src/hooks/useDrawerRender.js

@@ -0,0 +1,124 @@
+import { useStore as h } from "@tanstack/vue-store";
+import { reactive as x, ref as R, defineComponent as p, provide as _, nextTick as y, h as u, inject as O, onMounted as E, watch as S, render as C } from "vue";
+import { RouterView as g } from "vue-router";
+import v from "../RenderDrawer.vue.js";
+/* empty css                   */
+import { DrawerApi as T } from "../utils/drawer-api.js";
+const P = Symbol("TT_DRAWER_INJECT"), k = {};
+function F(o = {}, c = P) {
+  var d;
+  const { connectedComponent: a } = o;
+  if (a) {
+    const r = x({}), n = R(!0);
+    return [p(
+      (m, { attrs: D, slots: A }) => (_(c, {
+        extendApi(b) {
+          Object.setPrototypeOf(r, b);
+        },
+        options: o,
+        async reCreateDrawer() {
+          n.value = !1, await y(), n.value = !0;
+        }
+      }), V(r, {
+        ...m,
+        ...D,
+        ...A
+      }), () => u(n.value ? a : "div", { ...m, ...D }, A)),
+      {
+        name: "TtParentDrawer",
+        inheritAttrs: !1
+      }
+    ), r];
+  }
+  const t = O(c, {}), e = {
+    ...k,
+    ...t.options,
+    ...o
+  };
+  e.onVisibleChange = (r) => {
+    var n, i, m;
+    (n = o.onVisibleChange) == null || n.call(o, r), (m = (i = t.options) == null ? void 0 : i.onVisibleChange) == null || m.call(i, r);
+  };
+  const s = e.onClosed;
+  e.onClosed = () => {
+    var r;
+    s == null || s(), e.destroyOnClose && ((r = t.reCreateDrawer) == null || r.call(t));
+  };
+  const f = new T(e), w = f;
+  w.useStore = (r) => h(f.store, r);
+  const l = p(
+    (r, { attrs: n, slots: i }) => () => u(
+      v,
+      {
+        ...r,
+        ...n,
+        drawerApi: w
+      },
+      i
+    ),
+    {
+      name: "TtDrawer",
+      inheritAttrs: !1
+    }
+  );
+  return (d = t.extendApi) == null || d.call(t, w), [l, f];
+}
+function K(o, c, a) {
+  const t = new T(a), e = t;
+  e.useStore = (d) => h(t.store, d);
+  const s = document.createElement("div");
+  document.body.appendChild(s);
+  const f = p(
+    (d, { slots: r }) => (E(() => {
+      a && e.setDrawerProps(a), e.openDrawer();
+    }), S(
+      () => {
+        var n;
+        return (n = e.getVisible) == null ? void 0 : n.value;
+      },
+      (n) => {
+        n || (C(null, s), s.remove());
+      }
+    ), () => u(
+      v,
+      {
+        ...d,
+        drawerApi: e
+      },
+      r
+    )),
+    {
+      name: "TtDrawer",
+      inheritAttrs: !1
+    }
+  ), w = u(c, {}), l = u(
+    g,
+    {},
+    () => u(
+      f,
+      {
+        ...a
+      },
+      {
+        default: () => w
+      }
+    )
+  );
+  return l.appContext = o._context, C(l, s), e;
+}
+async function V(o, c) {
+  var e;
+  if (!c || Object.keys(c).length === 0)
+    return;
+  await y();
+  const a = (e = o == null ? void 0 : o.store) == null ? void 0 : e.state;
+  if (!a)
+    return;
+  const t = new Set(Object.keys(a));
+  for (const s of Object.keys(c))
+    t.has(s) && ["class"].includes(s);
+}
+export {
+  K as showTtDrawer,
+  F as useDrawerRender
+};

package/dist/components/tt-drawer/src/hooks/useResizable.js

@@ -0,0 +1,98 @@
+import { ref as l, defineComponent as D, h as f, watch as M } from "vue";
+function Y(d, p, v) {
+  const o = l(!1), u = l(!1), a = l(0), n = l(0), e = l(), s = l();
+  function m(t) {
+    t.stopPropagation(), t.preventDefault(), o.value = !0;
+    const { clientX: i } = t;
+    if (!e.value) return;
+    const b = e.value.clientWidth, x = e.value.style.transition;
+    e.value.style.transition = "none", document.onmousemove = z, document.onmouseup = function() {
+      document.onmousemove = null, document.onmouseup = null, u.value = !1, o.value = !1, e.value && (e.value.style.transition = x);
+    };
+    function z(r) {
+      r.stopPropagation(), r.preventDefault();
+      const y = r.clientX - i;
+      n.value = b - y, n.value <= 20 ? n.value = 20 : n.value >= window.innerWidth && (n.value = window.innerWidth), a.value = r.clientY > window.innerHeight ? window.innerHeight : r.clientY, requestAnimationFrame(() => {
+        if (c(), o.value)
+          if (v)
+            v({
+              size: `${n.value}px`
+            });
+          else {
+            if (!e.value) return;
+            e.value.style.width = `${n.value}px`;
+          }
+      });
+    }
+  }
+  function w(t) {
+    u.value = !0, a.value = t.clientY, !o.value && (document.onmousemove = function(i) {
+      a.value = i.clientY > window.innerHeight ? window.innerHeight : i.clientY, requestAnimationFrame(() => {
+        c();
+      });
+    });
+  }
+  function h(t) {
+    o.value || (u.value = !1, document.onmousemove = null);
+  }
+  function c() {
+    s.value && (s.value.textContent = `width: ${n.value}px`);
+  }
+  const g = D(
+    () => () => f(
+      "div",
+      {
+        class: "drag-line",
+        onMouseover: w,
+        onMouseleave: h,
+        onMousedown: m,
+        style: {
+          position: "absolute",
+          top: "0",
+          left: "0",
+          width: "10px",
+          height: "100%",
+          cursor: "w-resize",
+          borderLeft: u.value ? "2px solid #2779ff" : "none"
+        }
+      },
+      [
+        f("div", {
+          class: "drag-line-tip",
+          style: {
+            position: "absolute",
+            top: `${a.value < 0 ? 0 : a.value}px`,
+            left: "0px",
+            background: "#2779ff",
+            color: "#fff",
+            display: u.value ? "block" : "none",
+            whiteSpace: "nowrap",
+            zIndex: "9999",
+            padding: "4px 5px"
+          }
+        })
+      ]
+    ),
+    {
+      inheritAttrs: !1,
+      name: "ResizableBar"
+    }
+  );
+  return M(
+    () => p.value,
+    (t) => {
+      t && setTimeout(() => {
+        var i;
+        e.value = document.querySelector(`#${d}`), e.value && (n.value = e.value.clientWidth, s.value = (i = e.value) == null ? void 0 : i.querySelector(".drag-line-tip"));
+      }, 200);
+    }
+  ), [
+    g,
+    {
+      isDragging: o
+    }
+  ];
+}
+export {
+  Y as useDrawerResizable
+};

package/dist/components/tt-drawer/src/index.js

@@ -0,0 +1,17 @@
+import { inject as n } from "vue";
+import { showTtDrawer as s } from "./hooks/useDrawerRender.js";
+const o = Symbol("SHOW_DRAWER");
+function i(r) {
+  const e = (t, w) => s(r, t, w);
+  r.provide(o, e);
+}
+function u() {
+  const r = n(o);
+  if (!r)
+    throw new Error("[TtDrawer]: useShowDrawer() 需要先调用 setupDrawer(app) 进行注册");
+  return r;
+}
+export {
+  i as setupDrawer,
+  u as useShowDrawer
+};

package/dist/components/tt-drawer/src/props.js

@@ -0,0 +1,72 @@
+import { propTypes as o } from "@dazhicheng/hooks";
+import { GlobalConfig as e } from "../../../hooks/useSetup.js";
+const t = {
+  /** 确定抽屉的loading */
+  confirmLoading: o.bool.def(!1),
+  /** 是否显示取消按钮 */
+  showCancelBtn: o.bool.def(!0),
+  /** 取消按钮的props */
+  cancelButtonProps: {
+    type: Object,
+    default: {}
+  },
+  /** 取消按钮的文本 */
+  cancelText: o.string.def("取消"),
+  /** 是否显示确定按钮 */
+  showOkBtn: o.bool.def(!0),
+  /** 确定按钮的props */
+  okButtonProps: {
+    type: Object,
+    default: {
+      type: "primary"
+    }
+  },
+  /** 确定按钮的文本 */
+  okText: o.string.def("确认"),
+  /** 确定按钮的类型 */
+  okType: o.string.def("primary"),
+  /** 是否显示footer */
+  showFooter: o.bool,
+  /** footer高度 */
+  footerHeight: {
+    type: [String, Number],
+    default: 44
+  },
+  height: o.string.def("56px"),
+  size: o.string.def("30%")
+}, r = {
+  /** class */
+  class: o.string.def(""),
+  /** 标题 */
+  title: o.string.def(""),
+  /** 测试标识 */
+  testId: o.string,
+  /** loading文本 */
+  loadingText: o.string,
+  /** 显示 */
+  visible: o.bool.def(!1),
+  /** 显示loading */
+  loading: o.bool.def(!1),
+  /** 是否点击遮罩关闭弹窗 */
+  maskClosable: o.bool.def(!0),
+  /** 是否关闭销毁组件 */
+  destroyOnClose: { type: Boolean },
+  /** 取消前事件 */
+  closeFunc: {
+    type: Function
+  },
+  /** 取消前是否显示确认弹窗 */
+  showConfirm: o.bool.def(!1),
+  /** 确认弹窗文本内容 */
+  confirmContent: o.string.def(e.confirmContent || ""),
+  /** 是否显示modal */
+  modal: {
+    type: Boolean,
+    default: () => e.showMask
+  },
+  ...t
+};
+export {
+  r as basicProps,
+  t as footerProps
+};