zxt-table 0.0.1

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/zxt-table.css

@@ -0,0 +1 @@
+.my-button[data-v-4480e77d]{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;padding:12px 20px;font-size:14px;border-radius:4px}.my-button--primary[data-v-4480e77d]{color:#fff;background-color:#409eff;border-color:#409eff}.my-button--success[data-v-4480e77d]{color:#fff;background-color:#67c23a;border-color:#67c23a}.my-button--warning[data-v-4480e77d]{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.my-button--danger[data-v-4480e77d]{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.my-button.is-disabled[data-v-4480e77d]{cursor:not-allowed;opacity:.7}.jsx-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;padding:12px 20px;font-size:14px;border-radius:4px}.jsx-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.jsx-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.jsx-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.jsx-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.jsx-button.is-disabled{cursor:not-allowed;opacity:.7}.zxt-form-container[data-v-2148c373]{padding:20px}.form-actions[data-v-2148c373]{display:flex;justify-content:center;margin-top:30px;gap:10px}.zxt-pagination[data-v-e6813cef]{display:flex;justify-content:flex-end;margin-top:20px}.zxt-table-container[data-v-aca49573]{width:100%}

package/dist/zxt-table.es.js

@@ -0,0 +1,418 @@
+import { createElementBlock as h, openBlock as r, normalizeClass as O, renderSlot as _, defineComponent as D, createVNode as $, ref as C, reactive as A, watch as B, computed as v, resolveComponent as p, withCtx as c, Fragment as k, renderList as R, createBlock as g, createCommentVNode as N, normalizeStyle as T, createSlots as q, normalizeProps as L, guardReactiveProps as E, mergeProps as j, resolveDynamicComponent as I, createTextVNode as M, toDisplayString as J } from "vue";
+const w = (e, a) => {
+  const n = e.__vccOpts || e;
+  for (const [l, s] of a)
+    n[l] = s;
+  return n;
+}, G = {
+  name: "MyButton",
+  props: {
+    type: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "primary", "success", "warning", "danger"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: a }) {
+    return {
+      handleClick: (l) => {
+        a("click", l);
+      }
+    };
+  }
+}, H = ["disabled"];
+function K(e, a, n, l, s, y) {
+  return r(), h("button", {
+    class: O(["my-button", [`my-button--${n.type}`, { "is-disabled": n.disabled }]]),
+    disabled: n.disabled,
+    onClick: a[0] || (a[0] = (...o) => l.handleClick && l.handleClick(...o))
+  }, [
+    _(e.$slots, "default", {}, void 0, !0)
+  ], 10, H);
+}
+const F = /* @__PURE__ */ w(G, [["render", K], ["__scopeId", "data-v-4480e77d"]]);
+F.install = function(e) {
+  e.component(F.name, F);
+};
+const V = /* @__PURE__ */ D({
+  name: "JsxButton",
+  props: {
+    type: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "primary", "success", "warning", "danger"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(e, {
+    emit: a,
+    slots: n
+  }) {
+    const l = (s) => {
+      e.disabled || a("click", s);
+    };
+    return () => $("button", {
+      class: ["jsx-button", `jsx-button--${e.type}`, {
+        "is-disabled": e.disabled
+      }],
+      disabled: e.disabled,
+      onClick: l
+    }, [n.default?.()]);
+  }
+});
+V.install = function(e) {
+  e.component(V.name, V);
+};
+const Q = D({
+  name: "ZxtForm",
+  props: {
+    formColumns: { type: Array, default: () => [] },
+    initialFormData: { type: Object, default: () => ({}) },
+    rules: { type: Object, default: () => ({}) }
+  },
+  emits: ["submit", "reset"],
+  setup(e, { emit: a, expose: n }) {
+    const l = C(null), s = A({});
+    B(
+      () => e.initialFormData,
+      (u) => {
+        Object.keys(s).forEach((d) => {
+          delete s[d];
+        }), Object.assign(s, u);
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const y = v(() => {
+      const u = { ...e.rules };
+      return Object.keys(u).length === 0 && e.formColumns.length > 0 && e.formColumns.forEach((d) => {
+        d.required && (u[d.prop] = [
+          {
+            required: !0,
+            message: `请${d.type === "select" || d.type === "date" ? "选择" : "输入"}${d.label}`,
+            trigger: d.type === "select" || d.type === "date" ? "change" : "blur"
+          }
+        ]);
+      }), u;
+    }), o = () => {
+      l.value && l.value.validate((u) => {
+        u && a("submit", { ...s });
+      });
+    }, f = () => {
+      l.value && l.value.resetFields(), a("reset");
+    };
+    return n({
+      validate: () => l.value ? l.value.validate() : Promise.resolve(!1),
+      resetFields: () => l.value && l.value.resetFields(),
+      getFormData: () => ({ ...s })
+    }), { formRef: l, formData: s, formRules: y, submitForm: o, resetForm: f };
+  }
+}), W = { class: "zxt-form-container" };
+function X(e, a, n, l, s, y) {
+  const o = p("el-input"), f = p("el-option"), u = p("el-select"), d = p("el-date-picker"), i = p("el-form-item"), z = p("el-col"), m = p("el-row"), S = p("el-form");
+  return r(), h("div", W, [
+    $(S, {
+      ref: "formRef",
+      model: e.formData,
+      rules: e.formRules,
+      "label-width": "100px",
+      class: "zxt-form"
+    }, {
+      default: c(() => [
+        $(m, { gutter: 20 }, {
+          default: c(() => [
+            (r(!0), h(k, null, R(e.formColumns, (t, Z) => (r(), g(z, {
+              key: Z,
+              xs: t.xs || 24,
+              sm: t.sm || 12,
+              md: t.md || 12,
+              lg: t.lg || t.span || 12,
+              xl: t.xl || t.span || 12
+            }, {
+              default: c(() => [
+                $(i, {
+                  label: t.label,
+                  prop: t.prop,
+                  required: t.required
+                }, {
+                  default: c(() => [
+                    t.type === "input" || !t.type ? (r(), g(o, {
+                      key: 0,
+                      modelValue: e.formData[t.prop],
+                      "onUpdate:modelValue": (b) => e.formData[t.prop] = b,
+                      placeholder: t.placeholder || `请输入${t.label}`,
+                      disabled: t.disabled
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "disabled"])) : t.type === "select" ? (r(), g(u, {
+                      key: 1,
+                      modelValue: e.formData[t.prop],
+                      "onUpdate:modelValue": (b) => e.formData[t.prop] = b,
+                      placeholder: t.placeholder || `请选择${t.label}`,
+                      disabled: t.disabled,
+                      style: { width: "100%" }
+                    }, {
+                      default: c(() => [
+                        (r(!0), h(k, null, R(t.options, (b, U) => (r(), g(f, {
+                          key: U,
+                          label: b.label,
+                          value: b.value
+                        }, null, 8, ["label", "value"]))), 128))
+                      ]),
+                      _: 2
+                    }, 1032, ["modelValue", "onUpdate:modelValue", "placeholder", "disabled"])) : t.type === "date" ? (r(), g(d, {
+                      key: 2,
+                      modelValue: e.formData[t.prop],
+                      "onUpdate:modelValue": (b) => e.formData[t.prop] = b,
+                      type: t.dateType || "date",
+                      placeholder: t.placeholder || `请选择${t.label}`,
+                      disabled: t.disabled,
+                      style: { width: "100%" }
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "type", "placeholder", "disabled"])) : t.type === "slot" ? _(e.$slots, t.slotName || t.prop, {
+                      key: 3,
+                      formData: e.formData,
+                      column: t
+                    }, void 0, !0) : N("", !0)
+                  ]),
+                  _: 2
+                }, 1032, ["label", "prop", "required"])
+              ]),
+              _: 2
+            }, 1032, ["xs", "sm", "md", "lg", "xl"]))), 128))
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["model", "rules"])
+  ]);
+}
+const Y = /* @__PURE__ */ w(Q, [["render", X], ["__scopeId", "data-v-2148c373"]]), x = D({
+  name: "ZxtPagination",
+  props: {
+    // 当前页码
+    modelValue: { type: Number, default: 1 },
+    // 每页显示条数
+    pageSize: { type: Number, default: 10 },
+    // 可选的分页大小
+    pageSizes: { type: Array, default: () => [10, 20, 50, 100] },
+    // 总条数
+    total: { type: Number, default: 0 },
+    // 分页布局
+    layout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper"
+    }
+  },
+  emits: ["update:modelValue", "update:pageSize", "page-change", "size-change"],
+  setup(e, { emit: a }) {
+    const n = C(e.modelValue), l = C(e.pageSize);
+    return B(
+      () => e.modelValue,
+      (o) => {
+        n.value = o;
+      }
+    ), B(
+      () => e.pageSize,
+      (o) => {
+        l.value = o;
+      }
+    ), {
+      currentPage: n,
+      pageSize: l,
+      handleSizeChange: (o) => {
+        l.value = o, n.value = 1, a("update:pageSize", o), a("size-change", { page: n.value, size: o });
+      },
+      handleCurrentChange: (o) => {
+        n.value = o, a("update:modelValue", o), a("page-change", { page: o, size: l.value });
+      }
+    };
+  }
+});
+function ee(e, a, n, l, s, y) {
+  const o = p("el-pagination");
+  return r(), g(o, {
+    "current-page": e.currentPage,
+    "onUpdate:currentPage": a[0] || (a[0] = (f) => e.currentPage = f),
+    "page-size": e.pageSize,
+    "onUpdate:pageSize": a[1] || (a[1] = (f) => e.pageSize = f),
+    "page-sizes": e.pageSizes,
+    total: e.total,
+    layout: e.layout,
+    class: "zxt-pagination",
+    onSizeChange: e.handleSizeChange,
+    onCurrentChange: e.handleCurrentChange
+  }, null, 8, ["current-page", "page-size", "page-sizes", "total", "layout", "onSizeChange", "onCurrentChange"]);
+}
+const te = /* @__PURE__ */ w(x, [["render", ee], ["__scopeId", "data-v-e6813cef"]]), ae = D({
+  name: "ZxtTable",
+  components: { ZxtForm: Y, ZxtPagination: te },
+  props: {
+    // 表格唯一标识
+    id: { type: String, default: "" },
+    // 列配置
+    columns: { type: Array, default: () => [] },
+    // 表格数据
+    data: { type: Array, default: () => [] },
+    // 表格高度
+    height: { type: [String, Number], default: "" },
+    // 是否为表单模式
+    formMode: { type: Boolean, default: !1 },
+    // 表单列配置
+    formColumns: { type: Array, default: () => [] },
+    // 表单初始数据
+    initialFormData: { type: Object, default: () => ({}) },
+    // 表单验证规则
+    rules: { type: Object, default: () => ({}) },
+    // 是否启用分页
+    pageable: { type: Boolean, default: !0 },
+    // 当前页码
+    currentPage: { type: Number, default: 1 },
+    // 每页显示条数
+    pageSize: { type: Number, default: 10 },
+    // 可选的分页大小
+    pageSizes: { type: Array, default: () => [10, 20, 50, 100] },
+    // 总条数
+    total: { type: Number, default: 0 },
+    // 分页布局
+    paginationLayout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper"
+    }
+  },
+  emits: ["submit", "reset", "page-change", "size-change"],
+  setup(e, { emit: a }) {
+    const n = C(null), l = C(null), s = C(e.pageSize), y = v(() => e.height === "full" ? { height: "100%" } : {}), o = v(() => e.total > 0 ? e.total : e.data.length), f = (S) => {
+      a("size-change", S);
+    }, u = (S) => {
+      a("page-change", S);
+    };
+    return {
+      tableRef: n,
+      formRef: l,
+      containerStyle: y,
+      onFormSubmit: (S) => {
+        a("submit", S);
+      },
+      onFormReset: () => {
+        a("reset");
+      },
+      getTableRef: () => n.value,
+      getFormRef: () => l.value,
+      pageSize: s,
+      total: o,
+      pageSizes: v(() => e.pageSizes),
+      paginationLayout: v(() => e.paginationLayout),
+      handleSizeChange: f,
+      handlePageChange: u
+    };
+  }
+});
+function le(e, a, n, l, s, y) {
+  const o = p("ZxtForm"), f = p("el-table-column"), u = p("el-table"), d = p("ZxtPagination");
+  return r(), h("div", {
+    class: "zxt-table-container",
+    style: T(e.containerStyle)
+  }, [
+    e.formMode ? (r(), g(o, {
+      key: 0,
+      ref: "formRef",
+      "form-columns": e.formColumns,
+      "initial-form-data": e.initialFormData,
+      rules: e.rules,
+      onSubmit: e.onFormSubmit,
+      onReset: e.onFormReset
+    }, q({
+      "form-actions": c(() => [
+        _(e.$slots, "form-actions", {}, void 0, !0)
+      ]),
+      _: 2
+    }, [
+      R(e.$slots, (i, z) => ({
+        name: z,
+        fn: c((m) => [
+          _(e.$slots, z, L(E(m)), void 0, !0)
+        ])
+      }))
+    ]), 1032, ["form-columns", "initial-form-data", "rules", "onSubmit", "onReset"])) : N("", !0),
+    $(u, j({
+      ref: "tableRef",
+      data: e.data,
+      height: e.height
+    }, e.$attrs, { id: e.id }), {
+      default: c(() => [
+        (r(!0), h(k, null, R(e.columns, (i, z) => (r(), h(k, { key: z }, [
+          i.slot ? (r(), g(f, j({
+            key: 1,
+            ref_for: !0
+          }, i), {
+            default: c((m) => [
+              _(e.$slots, i.slot, {
+                row: m.row,
+                index: m.$index
+              }, void 0, !0)
+            ]),
+            _: 2
+          }, 1040)) : (r(), g(f, j({
+            key: 0,
+            ref_for: !0
+          }, i), {
+            default: c((m) => [
+              i.render ? (r(), g(I(i.render), {
+                key: 0,
+                row: m.row,
+                column: i,
+                index: m.$index
+              }, null, 8, ["row", "column", "index"])) : (r(), h(k, { key: 1 }, [
+                M(J(m.row[i.prop]), 1)
+              ], 64))
+            ]),
+            _: 2
+          }, 1040))
+        ], 64))), 128))
+      ]),
+      _: 3
+    }, 16, ["data", "height", "id"]),
+    e.pageable ? (r(), g(d, {
+      key: 1,
+      "model-value": e.currentPage,
+      "page-size": e.pageSize,
+      "onUpdate:pageSize": a[0] || (a[0] = (i) => e.pageSize = i),
+      "page-sizes": e.pageSizes,
+      total: e.total,
+      layout: e.paginationLayout,
+      onPageChange: e.handlePageChange,
+      onSizeChange: e.handleSizeChange
+    }, null, 8, ["model-value", "page-size", "page-sizes", "total", "layout", "onPageChange", "onSizeChange"])) : N("", !0)
+  ], 4);
+}
+const P = /* @__PURE__ */ w(ae, [["render", le], ["__scopeId", "data-v-aca49573"]]);
+P.install = function(e) {
+  e.component(P.name, P);
+};
+const ne = [
+  F,
+  V,
+  P
+], oe = (e) => {
+  ne.forEach((a) => {
+    e.component(a.name, a);
+  });
+}, se = {
+  install: oe,
+  MyButton: F,
+  JsxButton: V,
+  ZxtTable: P
+};
+export {
+  V as JsxButton,
+  F as MyButton,
+  P as ZxtTable,
+  se as default
+};

package/dist/zxt-table.umd.js

@@ -0,0 +1 @@
+(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.ZxtTable={},f.Vue))})(this,(function(f,e){"use strict";const S=(t,o)=>{const l=t.__vccOpts||t;for(const[n,s]of o)l[n]=s;return l},z={name:"MyButton",props:{type:{type:String,default:"default",validator:t=>["default","primary","success","warning","danger"].includes(t)},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:o}){return{handleClick:n=>{o("click",n)}}}},B=["disabled"];function _(t,o,l,n,s,g){return e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["my-button",[`my-button--${l.type}`,{"is-disabled":l.disabled}]]),disabled:l.disabled,onClick:o[0]||(o[0]=(...r)=>n.handleClick&&n.handleClick(...r))},[e.renderSlot(t.$slots,"default",{},void 0,!0)],10,B)}const b=S(z,[["render",_],["__scopeId","data-v-4480e77d"]]);b.install=function(t){t.component(b.name,b)};const C=e.defineComponent({name:"JsxButton",props:{type:{type:String,default:"default",validator:t=>["default","primary","success","warning","danger"].includes(t)},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:o,slots:l}){const n=s=>{t.disabled||o("click",s)};return()=>e.createVNode("button",{class:["jsx-button",`jsx-button--${t.type}`,{"is-disabled":t.disabled}],disabled:t.disabled,onClick:n},[l.default?.()])}});C.install=function(t){t.component(C.name,C)};const $=e.defineComponent({name:"ZxtForm",props:{formColumns:{type:Array,default:()=>[]},initialFormData:{type:Object,default:()=>({})},rules:{type:Object,default:()=>({})}},emits:["submit","reset"],setup(t,{emit:o,expose:l}){const n=e.ref(null),s=e.reactive({});e.watch(()=>t.initialFormData,p=>{Object.keys(s).forEach(d=>{delete s[d]}),Object.assign(s,p)},{immediate:!0,deep:!0});const g=e.computed(()=>{const p={...t.rules};return Object.keys(p).length===0&&t.formColumns.length>0&&t.formColumns.forEach(d=>{d.required&&(p[d.prop]=[{required:!0,message:`请${d.type==="select"||d.type==="date"?"选择":"输入"}${d.label}`,trigger:d.type==="select"||d.type==="date"?"change":"blur"}])}),p}),r=()=>{n.value&&n.value.validate(p=>{p&&o("submit",{...s})})},c=()=>{n.value&&n.value.resetFields(),o("reset")};return l({validate:()=>n.value?n.value.validate():Promise.resolve(!1),resetFields:()=>n.value&&n.value.resetFields(),getFormData:()=>({...s})}),{formRef:n,formData:s,formRules:g,submitForm:r,resetForm:c}}}),F={class:"zxt-form-container"};function V(t,o,l,n,s,g){const r=e.resolveComponent("el-input"),c=e.resolveComponent("el-option"),p=e.resolveComponent("el-select"),d=e.resolveComponent("el-date-picker"),i=e.resolveComponent("el-form-item"),y=e.resolveComponent("el-col"),m=e.resolveComponent("el-row"),h=e.resolveComponent("el-form");return e.openBlock(),e.createElementBlock("div",F,[e.createVNode(h,{ref:"formRef",model:t.formData,rules:t.formRules,"label-width":"100px",class:"zxt-form"},{default:e.withCtx(()=>[e.createVNode(m,{gutter:20},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.formColumns,(a,T)=>(e.openBlock(),e.createBlock(y,{key:T,xs:a.xs||24,sm:a.sm||12,md:a.md||12,lg:a.lg||a.span||12,xl:a.xl||a.span||12},{default:e.withCtx(()=>[e.createVNode(i,{label:a.label,prop:a.prop,required:a.required},{default:e.withCtx(()=>[a.type==="input"||!a.type?(e.openBlock(),e.createBlock(r,{key:0,modelValue:t.formData[a.prop],"onUpdate:modelValue":u=>t.formData[a.prop]=u,placeholder:a.placeholder||`请输入${a.label}`,disabled:a.disabled},null,8,["modelValue","onUpdate:modelValue","placeholder","disabled"])):a.type==="select"?(e.openBlock(),e.createBlock(p,{key:1,modelValue:t.formData[a.prop],"onUpdate:modelValue":u=>t.formData[a.prop]=u,placeholder:a.placeholder||`请选择${a.label}`,disabled:a.disabled,style:{width:"100%"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.options,(u,O)=>(e.openBlock(),e.createBlock(c,{key:O,label:u.label,value:u.value},null,8,["label","value"]))),128))]),_:2},1032,["modelValue","onUpdate:modelValue","placeholder","disabled"])):a.type==="date"?(e.openBlock(),e.createBlock(d,{key:2,modelValue:t.formData[a.prop],"onUpdate:modelValue":u=>t.formData[a.prop]=u,type:a.dateType||"date",placeholder:a.placeholder||`请选择${a.label}`,disabled:a.disabled,style:{width:"100%"}},null,8,["modelValue","onUpdate:modelValue","type","placeholder","disabled"])):a.type==="slot"?e.renderSlot(t.$slots,a.slotName||a.prop,{key:3,formData:t.formData,column:a},void 0,!0):e.createCommentVNode("",!0)]),_:2},1032,["label","prop","required"])]),_:2},1032,["xs","sm","md","lg","xl"]))),128))]),_:3})]),_:3},8,["model","rules"])])}const w=S($,[["render",V],["__scopeId","data-v-2148c373"]]),P=e.defineComponent({name:"ZxtPagination",props:{modelValue:{type:Number,default:1},pageSize:{type:Number,default:10},pageSizes:{type:Array,default:()=>[10,20,50,100]},total:{type:Number,default:0},layout:{type:String,default:"total, sizes, prev, pager, next, jumper"}},emits:["update:modelValue","update:pageSize","page-change","size-change"],setup(t,{emit:o}){const l=e.ref(t.modelValue),n=e.ref(t.pageSize);return e.watch(()=>t.modelValue,r=>{l.value=r}),e.watch(()=>t.pageSize,r=>{n.value=r}),{currentPage:l,pageSize:n,handleSizeChange:r=>{n.value=r,l.value=1,o("update:pageSize",r),o("size-change",{page:l.value,size:r})},handleCurrentChange:r=>{l.value=r,o("update:modelValue",r),o("page-change",{page:r,size:n.value})}}}});function R(t,o,l,n,s,g){const r=e.resolveComponent("el-pagination");return e.openBlock(),e.createBlock(r,{"current-page":t.currentPage,"onUpdate:currentPage":o[0]||(o[0]=c=>t.currentPage=c),"page-size":t.pageSize,"onUpdate:pageSize":o[1]||(o[1]=c=>t.pageSize=c),"page-sizes":t.pageSizes,total:t.total,layout:t.layout,class:"zxt-pagination",onSizeChange:t.handleSizeChange,onCurrentChange:t.handleCurrentChange},null,8,["current-page","page-size","page-sizes","total","layout","onSizeChange","onCurrentChange"])}const D=S(P,[["render",R],["__scopeId","data-v-e6813cef"]]),N=e.defineComponent({name:"ZxtTable",components:{ZxtForm:w,ZxtPagination:D},props:{id:{type:String,default:""},columns:{type:Array,default:()=>[]},data:{type:Array,default:()=>[]},height:{type:[String,Number],default:""},formMode:{type:Boolean,default:!1},formColumns:{type:Array,default:()=>[]},initialFormData:{type:Object,default:()=>({})},rules:{type:Object,default:()=>({})},pageable:{type:Boolean,default:!0},currentPage:{type:Number,default:1},pageSize:{type:Number,default:10},pageSizes:{type:Array,default:()=>[10,20,50,100]},total:{type:Number,default:0},paginationLayout:{type:String,default:"total, sizes, prev, pager, next, jumper"}},emits:["submit","reset","page-change","size-change"],setup(t,{emit:o}){const l=e.ref(null),n=e.ref(null),s=e.ref(t.pageSize),g=e.computed(()=>t.height==="full"?{height:"100%"}:{}),r=e.computed(()=>t.total>0?t.total:t.data.length),c=h=>{o("size-change",h)},p=h=>{o("page-change",h)};return{tableRef:l,formRef:n,containerStyle:g,onFormSubmit:h=>{o("submit",h)},onFormReset:()=>{o("reset")},getTableRef:()=>l.value,getFormRef:()=>n.value,pageSize:s,total:r,pageSizes:e.computed(()=>t.pageSizes),paginationLayout:e.computed(()=>t.paginationLayout),handleSizeChange:c,handlePageChange:p}}});function j(t,o,l,n,s,g){const r=e.resolveComponent("ZxtForm"),c=e.resolveComponent("el-table-column"),p=e.resolveComponent("el-table"),d=e.resolveComponent("ZxtPagination");return e.openBlock(),e.createElementBlock("div",{class:"zxt-table-container",style:e.normalizeStyle(t.containerStyle)},[t.formMode?(e.openBlock(),e.createBlock(r,{key:0,ref:"formRef","form-columns":t.formColumns,"initial-form-data":t.initialFormData,rules:t.rules,onSubmit:t.onFormSubmit,onReset:t.onFormReset},e.createSlots({"form-actions":e.withCtx(()=>[e.renderSlot(t.$slots,"form-actions",{},void 0,!0)]),_:2},[e.renderList(t.$slots,(i,y)=>({name:y,fn:e.withCtx(m=>[e.renderSlot(t.$slots,y,e.normalizeProps(e.guardReactiveProps(m)),void 0,!0)])}))]),1032,["form-columns","initial-form-data","rules","onSubmit","onReset"])):e.createCommentVNode("",!0),e.createVNode(p,e.mergeProps({ref:"tableRef",data:t.data,height:t.height},t.$attrs,{id:t.id}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(i,y)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:y},[i.slot?(e.openBlock(),e.createBlock(c,e.mergeProps({key:1,ref_for:!0},i),{default:e.withCtx(m=>[e.renderSlot(t.$slots,i.slot,{row:m.row,index:m.$index},void 0,!0)]),_:2},1040)):(e.openBlock(),e.createBlock(c,e.mergeProps({key:0,ref_for:!0},i),{default:e.withCtx(m=>[i.render?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.render),{key:0,row:m.row,column:i,index:m.$index},null,8,["row","column","index"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(m.row[i.prop]),1)],64))]),_:2},1040))],64))),128))]),_:3},16,["data","height","id"]),t.pageable?(e.openBlock(),e.createBlock(d,{key:1,"model-value":t.currentPage,"page-size":t.pageSize,"onUpdate:pageSize":o[0]||(o[0]=i=>t.pageSize=i),"page-sizes":t.pageSizes,total:t.total,layout:t.paginationLayout,onPageChange:t.handlePageChange,onSizeChange:t.handleSizeChange},null,8,["model-value","page-size","page-sizes","total","layout","onPageChange","onSizeChange"])):e.createCommentVNode("",!0)],4)}const k=S(N,[["render",j],["__scopeId","data-v-aca49573"]]);k.install=function(t){t.component(k.name,k)};const Z=[b,C,k],E={install:t=>{Z.forEach(o=>{t.component(o.name,o)})},MyButton:b,JsxButton:C,ZxtTable:k};f.JsxButton=C,f.MyButton=b,f.ZxtTable=k,f.default=E,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "zxt-table",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/zxt-table.umd.js",
+  "module": "./dist/zxt-table.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/zxt-table.es.js",
+      "require": "./dist/zxt-table.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "element-plus": "^2.11.5",
+    "vue": "^3.5.22"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.16",
+    "vite": "^7.1.7"
+  }
+}