@king-one/antdv 1.0.57 → 1.0.60

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @king-one/antdv
 
+## 1.0.60
+
+### Patch Changes
+
+- feat:增加手写签名组件
+
+## 1.0.59
+
+### Patch Changes
+
+- a4fcf1a: feat：增加 form-item 组件
+
+## 1.0.58
+
+### Patch Changes
+
+- feat：modal 增加拖拽功能
+
 ## 1.0.57
 
 ### Patch Changes

package/dist/es/components/form/component/form-item.vue.mjs

@@ -0,0 +1,4 @@
+import f from "./form-item.vue2.mjs";
+export {
+  f as default
+};

package/dist/es/components/form/component/form-item.vue2.mjs

@@ -0,0 +1,56 @@
+import { defineComponent as p, computed as f, ref as d, toRaw as u, openBlock as v, createElementBlock as g, normalizeClass as e, createElementVNode as r, unref as s, renderSlot as _, toDisplayString as b } from "vue";
+import { useNamespace as I } from "../../../hooks/use-namespace/index.mjs";
+import { useProvideFormItem as k } from "../content/form-content.mjs";
+import { formItemProps as y } from "./form.mjs";
+const P = /* @__PURE__ */ p({
+  name: "KFormItem",
+  __name: "form-item",
+  props: y,
+  setup(a) {
+    const l = a, { b: m, e: o } = I("form-item"), n = f(() => [m()]), c = async (t) => {
+      console.log("trigger", t);
+    }, i = d("请输入姓名");
+    return k({ ...u(l), validate: c }), (t, B) => (v(), g(
+      "div",
+      {
+        class: e(n.value)
+      },
+      [
+        r(
+          "label",
+          {
+            class: e(s(o)("lable"))
+          },
+          null,
+          2
+          /* CLASS */
+        ),
+        r(
+          "div",
+          {
+            class: e(s(o)("content"))
+          },
+          [
+            _(t.$slots, "default"),
+            r(
+              "div",
+              {
+                class: e(s(o)("error"))
+              },
+              b(i.value),
+              3
+              /* TEXT, CLASS */
+            )
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+export {
+  P as default
+};

package/dist/es/components/form/component/form.mjs

@@ -1,11 +1,13 @@
-const e = {
-  model: {
-    type: Object
-  },
+const e = (r) => r, t = {
+  label: String,
+  prop: String,
   rules: {
-    type: Object
+    // type: [Object, Array] as Arrayable<FormItemRule> // 优化前语法，即使类型不正确，也会被强行断言成正确的
+    type: e([Object, Array])
+    // 优化后语法 根据返回类型，确保正确性
   }
 };
 export {
-  e as formType
+  e as definePropType,
+  t as formItemProps
 };

package/dist/es/components/form/component/form.vue2.mjs

@@ -1,19 +1,21 @@
-import { createElementVNode as o, defineComponent as t, openBlock as r, createElementBlock as n, renderSlot as s } from "vue";
-import { formType as m } from "./form.mjs";
-const c = { class: "king-form" }, l = /* @__PURE__ */ o(
-  "div",
-  null,
-  "伟大的好歌",
-  -1
-  /* HOISTED */
-), d = /* @__PURE__ */ t({
+import { defineComponent as t, computed as m, openBlock as n, createElementBlock as s, normalizeClass as a, renderSlot as c } from "vue";
+import { useNamespace as l } from "../../../hooks/use-namespace/index.mjs";
+const d = /* @__PURE__ */ t({
+  name: "KForm",
   __name: "form",
-  props: m,
   setup(p) {
-    return (e, _) => (r(), n("form", c, [
-      l,
-      s(e.$slots, "default")
-    ]));
+    const { b: e } = l("form"), o = m(() => [e()]);
+    return (r, f) => (n(), s(
+      "form",
+      {
+        class: a(o.value)
+      },
+      [
+        c(r.$slots, "default")
+      ],
+      2
+      /* CLASS */
+    ));
   }
 });
 export {

package/dist/es/components/form/content/form-content.mjs

@@ -0,0 +1,13 @@
+import { provide as o, inject as r } from "vue";
+const e = Symbol("formItemContextKey");
+function n(t) {
+  return o(e, t);
+}
+function i() {
+  return r(e);
+}
+export {
+  e as formItemContextKey,
+  i as useInjectFormItem,
+  n as useProvideFormItem
+};

package/dist/es/components/form/index.mjs

@@ -1,10 +1,14 @@
 import { withInstall as o } from "../utils/install.mjs";
 import "./component/form.vue.mjs";
-import { formType as e } from "./component/form.mjs";
-import r from "./component/form.vue2.mjs";
-const p = o(r);
+import "./component/form-item.vue.mjs";
+import { definePropType as _, formItemProps as l } from "./component/form.mjs";
+import m from "./component/form.vue2.mjs";
+import r from "./component/form-item.vue2.mjs";
+const s = o(m), n = o(r);
 export {
-  p as KForm,
-  p as default,
-  e as formType
+  s as KForm,
+  n as KFormItem,
+  s as default,
+  _ as definePropType,
+  l as formItemProps
 };

package/dist/es/components/index.mjs

@@ -1,22 +1,25 @@
-import { KForm as e } from "./form/index.mjs";
-import { KCollapseTranstion as m } from "./collapse-transtion/index.mjs";
+import { KForm as e, KFormItem as t } from "./form/index.mjs";
+import { KCollapseTranstion as p } from "./collapse-transtion/index.mjs";
 import { KProModal as f } from "./pro-modal/index.mjs";
-import { KProTitle as K } from "./pro-title/index.mjs";
-import { KScrollBar as l } from "./scroll-bar/index.mjs";
-import { KScaleVirtualList as i } from "./scale-virtual-list/index.mjs";
-import { KProTag as n } from "./pro-tag/index.mjs";
+import { KProTitle as a } from "./pro-title/index.mjs";
+import { KScrollBar as P } from "./scroll-bar/index.mjs";
+import { KScaleVirtualList as c } from "./scale-virtual-list/index.mjs";
+import { KProTag as s } from "./pro-tag/index.mjs";
 import { KProPicker as T } from "./pro-picker/index.mjs";
-import { KProArea as d } from "./pro-area/index.mjs";
+import { KProArea as u } from "./pro-area/index.mjs";
+import { KProSignature as I } from "./pro-signature/index.mjs";
 import { KIcon as k } from "./icon/index.mjs";
 export {
-  m as KCollapseTranstion,
+  p as KCollapseTranstion,
   e as KForm,
+  t as KFormItem,
   k as KIcon,
-  d as KProArea,
+  u as KProArea,
   f as KProModal,
   T as KProPicker,
-  n as KProTag,
-  K as KProTitle,
-  i as KScaleVirtualList,
-  l as KScrollBar
+  I as KProSignature,
+  s as KProTag,
+  a as KProTitle,
+  c as KScaleVirtualList,
+  P as KScrollBar
 };

package/dist/es/components/pro-modal/index.mjs

@@ -1,11 +1,12 @@
 import { withInstall as o } from "../utils/install.mjs";
-import r from "./src/Modal.mjs";
+import "./src/ProModal.vue.mjs";
 import "./style/index.mjs";
-import { useProModal as i, useProModalInit as p } from "./hooks/useProModal.mjs";
-const m = o(r);
+import { useProModal as e, useProModalInit as f } from "./hooks/useProModal.mjs";
+import r from "./src/ProModal.vue2.mjs";
+const l = o(r);
 export {
-  m as KProModal,
-  m as default,
-  i as useProModal,
-  p as useProModalInit
+  l as KProModal,
+  l as default,
+  e as useProModal,
+  f as useProModalInit
 };

package/dist/es/components/pro-modal/src/ProModal.vue.mjs

@@ -0,0 +1,4 @@
+import f from "./ProModal.vue2.mjs";
+export {
+  f as default
+};

package/dist/es/components/pro-modal/src/ProModal.vue2.mjs

@@ -0,0 +1,82 @@
+import { defineComponent as X, mergeModels as M, ref as e, useModel as Y, computed as y, watch as R, watchEffect as _, openBlock as b, createBlock as w, unref as $, mergeProps as E, withCtx as c, createElementVNode as P, toDisplayString as N, normalizeStyle as q, resolveDynamicComponent as z, renderSlot as O } from "vue";
+import { Modal as U } from "ant-design-vue";
+import { useNamespace as j } from "../../../hooks/use-namespace/index.mjs";
+import { useDraggable as A } from "@vueuse/core";
+import { ProModalProps as F } from "./types.mjs";
+const L = /* @__PURE__ */ X({
+  name: "ProModal",
+  __name: "ProModal",
+  props: /* @__PURE__ */ M(F, {
+    modelValue: { required: !0, type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ M(["onConfirm", "onCancel"], ["update:modelValue"]),
+  setup(k, { emit: x }) {
+    const d = x, l = e(null), v = Y(k, "modelValue"), { b: B } = j("pro-modal"), D = y(() => B());
+    function S() {
+      d("onConfirm");
+    }
+    function T() {
+      d("onCancel");
+    }
+    const { x: r, y: u, isDragging: f } = A(l), p = e(0), g = e(0), n = e(!1), s = e(0), m = e(0), h = e(0), C = e(0), t = e({ left: 0, right: 0, top: 0, bottom: 0 });
+    R([r, u], () => {
+      if (!n.value && l.value) {
+        p.value = r.value, g.value = u.value;
+        const o = document.body.getBoundingClientRect(), a = l.value.getBoundingClientRect();
+        t.value.right = o.width - a.width, t.value.bottom = o.height - a.height, h.value = s.value, C.value = m.value;
+      }
+      n.value = !0;
+    }), R(f, () => {
+      f || (n.value = !1);
+    }), _(() => {
+      n.value && (s.value = h.value + Math.min(Math.max(t.value.left, r.value), t.value.right) - p.value, m.value = C.value + Math.min(Math.max(t.value.top, u.value), t.value.bottom) - g.value);
+    });
+    const V = y(() => ({
+      transform: `translate(${s.value}px, ${m.value}px)`
+    }));
+    return (o, a) => (b(), w($(U), E({
+      open: v.value,
+      "onUpdate:open": a[0] || (a[0] = (i) => v.value = i)
+    }, o.modalProps, {
+      "wrap-class-name": D.value,
+      onOk: S,
+      onCancel: T
+    }), {
+      title: c(() => [
+        P(
+          "div",
+          {
+            ref_key: "modalTitleRef",
+            ref: l,
+            class: "pro-modal-title"
+          },
+          N(o.title),
+          513
+          /* TEXT, NEED_PATCH */
+        )
+      ]),
+      modalRender: c(({ originVNode: i }) => [
+        P(
+          "div",
+          {
+            style: q(V.value)
+          },
+          [
+            (b(), w(z(i)))
+          ],
+          4
+          /* STYLE */
+        )
+      ]),
+      default: c(() => [
+        O(o.$slots, "default")
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 16, ["open", "wrap-class-name"]));
+  }
+});
+export {
+  L as default
+};

package/dist/es/components/pro-modal/src/types.mjs

@@ -5,6 +5,10 @@ const e = {
   modelValue: {
     type: Boolean,
     required: !0
+  },
+  title: {
+    type: String,
+    required: !0
   }
 };
 export {

package/dist/es/components/pro-signature/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall as r } from "../utils/install.mjs";
+import "./src/ProSignature.vue.mjs";
+import { ProSignatureProps as f } from "./src/types.mjs";
+import o from "./src/ProSignature.vue2.mjs";
+const a = r(o);
+export {
+  a as KProSignature,
+  f as ProSignatureProps,
+  a as default
+};

package/dist/es/components/pro-signature/src/ProSignature.vue.mjs

@@ -0,0 +1,4 @@
+import f from "./ProSignature.vue2.mjs";
+export {
+  f as default
+};

package/dist/es/components/pro-signature/src/ProSignature.vue2.mjs

@@ -0,0 +1,145 @@
+import { defineComponent as A, ref as o, computed as k, watch as F, onMounted as N, onBeforeUnmount as $, reactive as H, openBlock as Q, createElementBlock as G, normalizeStyle as K, withModifiers as V } from "vue";
+import { ProSignatureProps as Z } from "./types.mjs";
+const te = /* @__PURE__ */ A({
+  __name: "ProSignature",
+  props: Z,
+  emits: ["update:bgColor"],
+  setup(R, { expose: X, emit: Y }) {
+    const u = R, b = Y, a = o(null), t = o(null), p = o(!1), C = o(""), h = o([]), f = o(0), d = o(0), w = o(!1), T = o(1), D = k(() => u.height / u.width), y = k(() => u.bgColor ? u.bgColor : "rgba(255, 255, 255, 0)");
+    function x() {
+      if (!a.value || !t.value)
+        return;
+      const e = window.devicePixelRatio || 1;
+      a.value.style.width = `${u.width}px`;
+      const l = Number.parseFloat(window.getComputedStyle(a.value).width);
+      a.value.style.height = `${D.value * l}px`, a.value.width = l * e, a.value.height = D.value * l * e, t.value.scale(e, e), T.value = l / u.width;
+    }
+    function P(e) {
+      t.value && (f.value = e.x, d.value = e.y, t.value.beginPath(), t.value.moveTo(f.value, d.value), t.value.lineTo(e.x, e.y), t.value.lineCap = "round", t.value.lineJoin = "round", t.value.lineWidth = u.lineWidth * T.value, t.value.stroke(), t.value.closePath(), h.value.push(e));
+    }
+    function M(e) {
+      t.value && (t.value.beginPath(), t.value.moveTo(f.value, d.value), t.value.lineTo(e.x, e.y), t.value.strokeStyle = u.lineColor, t.value.lineWidth = u.lineWidth * T.value, t.value.lineCap = "round", t.value.lineJoin = "round", t.value.stroke(), t.value.closePath(), d.value = e.y, f.value = e.x, h.value.push(e));
+    }
+    function S(e) {
+      t.value && (t.value.beginPath(), t.value.moveTo(f.value, d.value), t.value.lineTo(e.x, e.y), t.value.lineCap = "round", t.value.lineJoin = "round", t.value.stroke(), t.value.closePath(), h.value.push(e), h.value.push({ x: -1, y: -1 }));
+    }
+    function B(e) {
+      e.preventDefault(), w.value = !0, p.value = !0, P({
+        x: e.offsetX,
+        y: e.offsetY
+      });
+    }
+    function I(e) {
+      e.preventDefault(), w.value && M({
+        x: e.offsetX,
+        y: e.offsetY
+      });
+    }
+    function E(e) {
+      e.preventDefault(), S({
+        x: e.offsetX,
+        y: e.offsetY
+      }), w.value = !1;
+    }
+    function _(e) {
+      if (p.value = !0, e.touches.length === 1 && a.value) {
+        const l = a.value.getBoundingClientRect();
+        P({
+          x: e.targetTouches[0].clientX - l.left,
+          y: e.targetTouches[0].clientY - l.top
+        });
+      }
+    }
+    function L(e) {
+      if (e.preventDefault(), e.touches.length === 1 && a.value) {
+        const l = a.value.getBoundingClientRect();
+        M({
+          x: e.targetTouches[0].clientX - l.left,
+          y: e.targetTouches[0].clientY - l.top
+        });
+      }
+    }
+    function W(e) {
+      if (e.preventDefault(), e.touches.length === 1 && a.value) {
+        const l = a.value.getBoundingClientRect();
+        S({
+          x: e.targetTouches[0].clientX - l.left,
+          y: e.targetTouches[0].clientY - l.top
+        });
+      }
+    }
+    function z(e) {
+      if (!a.value)
+        return [0, 0, 0, 0];
+      let l = a.value.width, g = 0, r = a.value.height, s = 0;
+      for (let i = 0; i < a.value.width; i++)
+        for (let v = 0; v < a.value.height; v++) {
+          const n = (i + a.value.width * v) * 4;
+          (e[n] > 0 || e[n + 1] > 0 || e[n + 2] || e[n + 3] > 0) && (s = Math.max(v, s), g = Math.max(i, g), r = Math.min(v, r), l = Math.min(i, l));
+        }
+      return [l + 1, r + 1, g + 1, s + 1];
+    }
+    function U(e) {
+      return new Promise((l, g) => {
+        if (!p.value || !a.value || !t.value) {
+          g("Warning: Not Signned!");
+          return;
+        }
+        const r = (e == null ? void 0 : e.format) || u.format, s = (e == null ? void 0 : e.quality) || u.quality, i = t.value.getImageData(0, 0, a.value.width, a.value.height);
+        t.value.globalCompositeOperation = "destination-over", t.value.fillStyle = y.value, t.value.fillRect(0, 0, a.value.width, a.value.height), C.value = a.value.toDataURL(r, s);
+        let v = C.value;
+        if (t.value.clearRect(0, 0, a.value.width, a.value.height), t.value.putImageData(i, 0, 0), t.value.globalCompositeOperation = "source-over", u.isCrop) {
+          const n = z(i.data), c = document.createElement("canvas"), m = c.getContext("2d");
+          if (m) {
+            c.width = n[2] - n[0], c.height = n[3] - n[1];
+            const q = t.value.getImageData(n[0], n[1], n[2] - n[0], n[3] - n[1]);
+            m.globalCompositeOperation = "destination-over", m.putImageData(q, 0, 0), m.fillStyle = y.value, m.fillRect(0, 0, c.width, c.height), v = c.toDataURL(r, s);
+          }
+        }
+        l(v);
+      });
+    }
+    function J() {
+      !a.value || !t.value || (t.value.clearRect(0, 0, a.value.width, a.value.height), u.isClearBgColor && (b("update:bgColor", ""), a.value.style.background = "rgba(255, 255, 255, 0)"), h.value = [], p.value = !1, C.value = "");
+    }
+    F(
+      () => [u.width, u.height],
+      ([e, l]) => {
+        !a.value || !t.value || (a.value.width = e, a.value.height = l, a.value.style.background = y.value, x());
+      }
+    ), N(() => {
+      a.value && (a.value.height = u.height, a.value.width = u.width, a.value.style.background = y.value, t.value = a.value.getContext("2d"), x(), window.addEventListener("resize", x), document.addEventListener("mouseup", () => {
+        w.value = !1;
+      }));
+    }), $(() => {
+      window.removeEventListener("resize", x);
+    });
+    const O = H({
+      width: "100%",
+      height: "100%"
+    });
+    return X({
+      generate: U,
+      reset: J
+    }), (e, l) => (Q(), G(
+      "canvas",
+      {
+        ref_key: "canvas",
+        ref: a,
+        style: K(O),
+        onMousedown: B,
+        onMousemove: I,
+        onMouseup: E,
+        onTouchstartPassive: _,
+        onTouchmovePassive: L,
+        onTouchend: V(W, ["prevent"])
+      },
+      null,
+      36
+      /* STYLE, NEED_HYDRATION */
+    ));
+  }
+});
+export {
+  te as default
+};

package/dist/es/components/pro-signature/src/types.mjs

@@ -0,0 +1,40 @@
+import { definePropType as e } from "../../utils/install.mjs";
+const r = {
+  width: {
+    type: e(Number),
+    default: 800
+  },
+  height: {
+    type: Number,
+    default: 300
+  },
+  lineWidth: {
+    type: Number,
+    default: 4
+  },
+  bgColor: {
+    type: String,
+    default: ""
+  },
+  lineColor: {
+    type: String,
+    default: "#000000"
+  },
+  isCrop: {
+    type: Boolean
+  },
+  isClearBgColor: {
+    type: Boolean
+  },
+  format: {
+    type: String,
+    default: "image/png"
+  },
+  quality: {
+    type: Number,
+    default: 1
+  }
+};
+export {
+  r as ProSignatureProps
+};

package/dist/es/components/scale-virtual-list/component/scale-virtual-list.vue2.mjs

@@ -1,7 +1,8 @@
-import { defineComponent as P, toRefs as g, openBlock as r, createElementBlock as l, mergeProps as i, unref as e, createElementVNode as n, normalizeClass as c, Fragment as w, renderList as B, renderSlot as E } from "vue";
+import { defineComponent as h, ref as B, computed as E, toRefs as P, openBlock as a, createElementBlock as l, mergeProps as i, unref as e, createElementVNode as p, normalizeClass as c, normalizeStyle as R, Fragment as S, renderList as z, renderSlot as L } from "vue";
 import { defaultNamespace as s } from "../../../hooks/use-namespace/index.mjs";
-import { useVirtualList as L } from "../hooks/useVirtualList.mjs";
-const z = /* @__PURE__ */ P({
+import { useElementBounding as T } from "@vueuse/core";
+import { useVirtualList as V } from "../hooks/useVirtualList.mjs";
+const q = /* @__PURE__ */ h({
   __name: "scale-virtual-list",
   props: {
     list: {},
@@ -9,43 +10,48 @@ const z = /* @__PURE__ */ P({
     itemClassName: { default: `${s}-scale-virtual-item` }
   },
   emits: ["update:state"],
-  setup(p, { expose: m, emit: u }) {
-    const o = p, d = u, { list: f } = g(o), { list: v, containerProps: $, wrapperProps: x, scrollTo: C, scaleTo: N, state: _, onUpdate: k } = L(f, o.option);
-    return m({
-      scrollTo: C,
-      scaleTo: N,
-      state: _
-    }), k((t) => d("update:state", t)), (t, T) => (r(), l(
+  setup(m, { expose: u, emit: d }) {
+    const o = m, f = d, n = B(null), { width: v } = T(n), w = E(() => ({
+      width: `${v.value}px`
+    })), { list: $ } = P(o), { list: x, containerProps: y, wrapperProps: _, scrollTo: k, scaleTo: C, state: N, onUpdate: g } = V($, o.option);
+    return u({
+      scrollTo: k,
+      scaleTo: C,
+      state: N
+    }), g((t) => f("update:state", t)), (t, F) => (a(), l(
       "div",
       i({
         class: `${e(s)}-scale-virtual-list`
-      }, e($)),
+      }, e(y)),
       [
-        n(
+        p(
           "div",
           {
-            class: c(`${e(s)}-scale-virtual-list-container`)
+            class: c(`${e(s)}-scale-virtual-list-container`),
+            style: R(w.value)
           },
           [
-            n(
+            p(
               "div",
-              i({
+              i(e(_), {
+                ref_key: "wrapperRef",
+                ref: n,
                 class: `${e(s)}-scale-vittual-wrapper`
-              }, e(x)),
+              }),
               [
-                (r(!0), l(
-                  w,
+                (a(!0), l(
+                  S,
                   null,
-                  B(e(v), (a) => (r(), l(
+                  z(e(x), (r) => (a(), l(
                     "div",
                     {
-                      key: a.index,
+                      key: r.index,
                       class: c(t.itemClassName)
                     },
                     [
-                      E(t.$slots, "default", {
-                        item: a,
-                        index: a.index
+                      L(t.$slots, "default", {
+                        item: r,
+                        index: r.index
                       })
                     ],
                     2
@@ -59,8 +65,8 @@ const z = /* @__PURE__ */ P({
               /* FULL_PROPS */
             )
           ],
-          2
-          /* CLASS */
+          6
+          /* CLASS, STYLE */
         )
       ],
       16
@@ -69,5 +75,5 @@ const z = /* @__PURE__ */ P({
   }
 });
 export {
-  z as default
+  q as default
 };