@alibarbar/components 1.0.0

package/dist/index.js

@@ -0,0 +1,972 @@
+import { createI18n, useI18n } from "vue-i18n";
+import { defineComponent, ref, reactive, computed, watch, onMounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeStyle, Fragment, renderList, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, toDisplayString, unref, provide, withModifiers, inject, createTextVNode } from "vue";
+const zhCN = {
+  common: {
+    confirm: "确认",
+    cancel: "取消",
+    submit: "提交",
+    reset: "重置",
+    search: "搜索",
+    add: "新增",
+    edit: "编辑",
+    delete: "删除",
+    save: "保存",
+    loading: "加载中...",
+    noData: "暂无数据"
+  },
+  table: {
+    total: "共 {total} 条",
+    pageSize: "每页显示",
+    page: "页",
+    goto: "前往",
+    pageSizeOptions: ["10", "20", "50", "100"]
+  },
+  form: {
+    required: "此项为必填项",
+    invalidFormat: "格式不正确",
+    submitSuccess: "提交成功",
+    submitFailed: "提交失败"
+  }
+};
+const enUS = {
+  common: {
+    confirm: "Confirm",
+    cancel: "Cancel",
+    submit: "Submit",
+    reset: "Reset",
+    search: "Search",
+    add: "Add",
+    edit: "Edit",
+    delete: "Delete",
+    save: "Save",
+    loading: "Loading...",
+    noData: "No Data"
+  },
+  table: {
+    total: "Total {total} items",
+    pageSize: "Items per page",
+    page: "Page",
+    goto: "Go to",
+    pageSizeOptions: ["10", "20", "50", "100"]
+  },
+  form: {
+    required: "This field is required",
+    invalidFormat: "Invalid format",
+    submitSuccess: "Submit successful",
+    submitFailed: "Submit failed"
+  }
+};
+const messages = {
+  "zh-CN": zhCN,
+  "en-US": enUS
+};
+const i18n = createI18n({
+  legacy: false,
+  locale: "zh-CN",
+  fallbackLocale: "en-US",
+  messages
+});
+const _hoisted_1$4 = { class: "fat-table-wrapper" };
+const _hoisted_2$4 = { class: "fat-table__inner" };
+const _hoisted_3$3 = { class: "fat-table__header" };
+const _hoisted_4$2 = { class: "fat-table__cell" };
+const _hoisted_5$2 = { key: 0 };
+const _hoisted_6$2 = { key: 1 };
+const _hoisted_7$2 = ["onClick"];
+const _hoisted_8 = { class: "fat-table__body" };
+const _hoisted_9 = {
+  key: 0,
+  class: "fat-table__loading-row"
+};
+const _hoisted_10 = ["colspan"];
+const _hoisted_11 = {
+  key: 1,
+  class: "fat-table__empty-row"
+};
+const _hoisted_12 = ["colspan"];
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = { class: "fat-table__cell" };
+const _hoisted_15 = { key: 0 };
+const _hoisted_16 = { key: 1 };
+const _hoisted_17 = {
+  key: 0,
+  class: "fat-table__pagination"
+};
+const _hoisted_18 = { class: "fat-table__pagination-info" };
+const _hoisted_19 = { class: "fat-table__pagination-controls" };
+const _hoisted_20 = ["value"];
+const _hoisted_21 = ["value"];
+const _hoisted_22 = { class: "fat-table__pagination-text" };
+const _hoisted_23 = ["disabled"];
+const _hoisted_24 = { class: "fat-table__pagination-text" };
+const _hoisted_25 = ["disabled"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "FatTable",
+  props: {
+    columns: {},
+    data: { default: () => [] },
+    loading: { type: Boolean, default: false },
+    pagination: { type: [Boolean, Object], default: false },
+    height: {},
+    maxHeight: {},
+    stripe: { type: Boolean, default: false },
+    border: { type: Boolean, default: true },
+    size: { default: "default" },
+    emptyText: { default: "" },
+    rowKey: {},
+    fetchHandler: {},
+    query: {},
+    requestOnMounted: { type: Boolean, default: true },
+    requestOnQueryChange: { type: Boolean, default: true },
+    requestOnSortChange: { type: Boolean, default: true }
+  },
+  emits: ["page-change", "page-size-change", "sort-change", "row-click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useI18n();
+    const internalList = ref([]);
+    const internalLoading = ref(false);
+    const internalPagination = reactive({
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    });
+    const query = computed(() => props.query || {});
+    const sortState = reactive({
+      prop: "",
+      order: null
+    });
+    const useFetchHandler = computed(() => !!props.fetchHandler);
+    const list = computed(() => {
+      if (useFetchHandler.value) {
+        return internalList.value;
+      }
+      return props.data || [];
+    });
+    const loading = computed(() => {
+      if (useFetchHandler.value) {
+        return internalLoading.value;
+      }
+      return props.loading;
+    });
+    const paginationData = computed(() => {
+      if (useFetchHandler.value) {
+        return internalPagination;
+      }
+      if (typeof props.pagination === "boolean") {
+        return {
+          currentPage: 1,
+          pageSize: 10,
+          total: list.value.length
+        };
+      }
+      return props.pagination;
+    });
+    const pageSizes = computed(() => {
+      if (typeof props.pagination === "object" && props.pagination.pageSizes) {
+        return props.pagination.pageSizes;
+      }
+      return [10, 20, 50, 100];
+    });
+    const totalPages = computed(() => {
+      const total = paginationData.value.total;
+      const pageSize = paginationData.value.pageSize;
+      return Math.ceil(total / pageSize);
+    });
+    const tableStyle = computed(() => {
+      const style = {};
+      if (props.height) {
+        style.height = typeof props.height === "number" ? `${props.height}px` : props.height;
+      }
+      if (props.maxHeight) {
+        style.maxHeight = typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
+      }
+      return style;
+    });
+    const getColumnKey = (column, index2) => {
+      return column.key || column.prop || `column-${index2}`;
+    };
+    const getRowKey = (row, index2) => {
+      if (typeof props.rowKey === "function") {
+        return props.rowKey(row);
+      }
+      if (typeof props.rowKey === "string") {
+        return row[props.rowKey];
+      }
+      return index2;
+    };
+    const getColumnStyle = (column) => {
+      const style = {};
+      if (column.width) {
+        style.width = typeof column.width === "number" ? `${column.width}px` : column.width;
+      }
+      if (column.minWidth) {
+        style.minWidth = typeof column.minWidth === "number" ? `${column.minWidth}px` : column.minWidth;
+      }
+      if (column.align) {
+        style.textAlign = column.align;
+      }
+      return style;
+    };
+    const getColumnClass = (column) => {
+      return {
+        "fat-table__header-cell--fixed-left": column.fixed === "left" || column.fixed === true,
+        "fat-table__header-cell--fixed-right": column.fixed === "right"
+      };
+    };
+    const getCellClass = (column) => {
+      return {
+        "fat-table__cell--fixed-left": column.fixed === "left" || column.fixed === true,
+        "fat-table__cell--fixed-right": column.fixed === "right"
+      };
+    };
+    const getCellValue = (row, column) => {
+      if (!column.prop) return void 0;
+      return row[column.prop];
+    };
+    const formatCellValue = (row, column) => {
+      const value = getCellValue(row, column);
+      return value ?? "";
+    };
+    const getRequestParams = () => {
+      const page = paginationData.value.currentPage;
+      const pageSize = paginationData.value.pageSize;
+      return {
+        pagination: {
+          pageSize,
+          page,
+          offset: (page - 1) * pageSize
+        },
+        sort: sortState.prop && sortState.order ? {
+          prop: sortState.prop,
+          order: sortState.order
+        } : void 0,
+        query: query.value,
+        list: internalList.value
+      };
+    };
+    const fetchData = async () => {
+      if (!props.fetchHandler) return;
+      internalLoading.value = true;
+      try {
+        const params = getRequestParams();
+        const response = await props.fetchHandler(params);
+        internalList.value = response.list;
+        internalPagination.total = response.total;
+      } catch (error) {
+        console.error("FatTable fetchData error:", error);
+        internalList.value = [];
+        internalPagination.total = 0;
+      } finally {
+        internalLoading.value = false;
+      }
+    };
+    const handleSort = (column) => {
+      if (!column.sortable || !column.prop) return;
+      if (sortState.prop === column.prop) {
+        if (sortState.order === "ascending") {
+          sortState.order = "descending";
+        } else if (sortState.order === "descending") {
+          sortState.prop = "";
+          sortState.order = null;
+        } else {
+          sortState.order = "ascending";
+        }
+      } else {
+        sortState.prop = column.prop;
+        sortState.order = "ascending";
+      }
+      if (sortState.prop && sortState.order && column.prop) {
+        emit("sort-change", {
+          column,
+          prop: column.prop,
+          order: sortState.order
+        });
+        if (useFetchHandler.value && props.requestOnSortChange) {
+          internalPagination.currentPage = 1;
+          fetchData();
+        }
+      }
+    };
+    const handlePageChange = (page) => {
+      if (useFetchHandler.value) {
+        internalPagination.currentPage = page;
+        fetchData();
+      } else if (typeof props.pagination === "object") {
+        emit("page-change", page);
+      }
+    };
+    const handlePageSizeChange = (event) => {
+      const target = event.target;
+      const pageSize = Number(target.value);
+      if (useFetchHandler.value) {
+        internalPagination.pageSize = pageSize;
+        internalPagination.currentPage = 1;
+        fetchData();
+      } else if (typeof props.pagination === "object") {
+        emit("page-size-change", pageSize);
+      }
+    };
+    const handleRowClick = (row, event) => {
+      emit("row-click", row, {}, event);
+    };
+    watch(
+      () => props.query,
+      () => {
+        if (useFetchHandler.value && props.requestOnQueryChange) {
+          internalPagination.currentPage = 1;
+          fetchData();
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.pagination,
+      (newPagination) => {
+        if (useFetchHandler.value && typeof newPagination === "object") {
+          internalPagination.currentPage = newPagination.currentPage;
+          internalPagination.pageSize = newPagination.pageSize;
+        }
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      if (useFetchHandler.value && props.requestOnMounted) {
+        fetchData();
+      }
+    });
+    __expose({
+      /**
+       * 刷新数据
+       */
+      refresh: () => {
+        if (useFetchHandler.value) {
+          fetchData();
+        }
+      },
+      /**
+       * 重置并重新获取数据
+       */
+      reset: () => {
+        if (useFetchHandler.value) {
+          internalPagination.currentPage = 1;
+          sortState.prop = "";
+          sortState.order = null;
+          fetchData();
+        }
+      },
+      /**
+       * 获取请求参数
+       */
+      getRequestParams
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createElementVNode("div", {
+          class: "fat-table",
+          style: normalizeStyle(tableStyle.value)
+        }, [
+          createElementVNode("table", _hoisted_2$4, [
+            createElementVNode("thead", _hoisted_3$3, [
+              createElementVNode("tr", null, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, index2) => {
+                  return openBlock(), createElementBlock("th", {
+                    key: getColumnKey(column, index2),
+                    style: normalizeStyle(getColumnStyle(column)),
+                    class: normalizeClass(getColumnClass(column))
+                  }, [
+                    createElementVNode("div", _hoisted_4$2, [
+                      renderSlot(_ctx.$slots, `header-${getColumnKey(column, index2)}`, {
+                        column,
+                        index: index2
+                      }, () => [
+                        column.renderHeader ? (openBlock(), createElementBlock("span", _hoisted_5$2, [
+                          (openBlock(), createBlock(resolveDynamicComponent(() => {
+                            var _a;
+                            return (_a = column.renderHeader) == null ? void 0 : _a.call(column, column, index2);
+                          })))
+                        ])) : (openBlock(), createElementBlock("span", _hoisted_6$2, toDisplayString(column.label), 1)),
+                        column.sortable ? (openBlock(), createElementBlock("span", {
+                          key: 2,
+                          class: "fat-table__sort",
+                          onClick: ($event) => handleSort(column)
+                        }, [
+                          createElementVNode("span", {
+                            class: normalizeClass(["fat-table__sort-icon", { active: sortState.prop === column.prop && sortState.order === "ascending" }])
+                          }, " ↑ ", 2),
+                          createElementVNode("span", {
+                            class: normalizeClass(["fat-table__sort-icon", { active: sortState.prop === column.prop && sortState.order === "descending" }])
+                          }, " ↓ ", 2)
+                        ], 8, _hoisted_7$2)) : createCommentVNode("", true)
+                      ], true)
+                    ])
+                  ], 6);
+                }), 128))
+              ])
+            ]),
+            createElementVNode("tbody", _hoisted_8, [
+              loading.value ? (openBlock(), createElementBlock("tr", _hoisted_9, [
+                createElementVNode("td", {
+                  colspan: __props.columns.length,
+                  class: "fat-table__loading-cell"
+                }, toDisplayString(unref(t)("common.loading")), 9, _hoisted_10)
+              ])) : !list.value || list.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_11, [
+                createElementVNode("td", {
+                  colspan: __props.columns.length,
+                  class: "fat-table__empty-cell"
+                }, toDisplayString(__props.emptyText || unref(t)("common.noData")), 9, _hoisted_12)
+              ])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(list.value, (row, rowIndex) => {
+                return openBlock(), createElementBlock("tr", {
+                  key: getRowKey(row, rowIndex),
+                  class: normalizeClass([
+                    "fat-table__row",
+                    { "fat-table__row--stripe": __props.stripe && rowIndex % 2 === 1 }
+                  ]),
+                  onClick: ($event) => handleRowClick(row, $event)
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, colIndex) => {
+                    return openBlock(), createElementBlock("td", {
+                      key: getColumnKey(column, colIndex),
+                      class: normalizeClass(getCellClass(column)),
+                      style: normalizeStyle(getColumnStyle(column))
+                    }, [
+                      createElementVNode("div", _hoisted_14, [
+                        renderSlot(_ctx.$slots, `cell-${getColumnKey(column, colIndex)}`, {
+                          row,
+                          column,
+                          value: getCellValue(row, column),
+                          index: rowIndex
+                        }, () => [
+                          column.render ? (openBlock(), createElementBlock("span", _hoisted_15, [
+                            (openBlock(), createBlock(resolveDynamicComponent(() => {
+                              var _a;
+                              return (_a = column.render) == null ? void 0 : _a.call(column, getCellValue(row, column), row, rowIndex);
+                            })))
+                          ])) : (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(formatCellValue(row, column)), 1))
+                        ], true)
+                      ])
+                    ], 6);
+                  }), 128))
+                ], 10, _hoisted_13);
+              }), 128))
+            ])
+          ])
+        ], 4),
+        __props.pagination ? (openBlock(), createElementBlock("div", _hoisted_17, [
+          createElementVNode("div", _hoisted_18, toDisplayString(unref(t)("table.total", { total: paginationData.value.total })), 1),
+          createElementVNode("div", _hoisted_19, [
+            createElementVNode("select", {
+              value: paginationData.value.pageSize,
+              class: "fat-table__page-size-select",
+              onChange: _cache[0] || (_cache[0] = ($event) => handlePageSizeChange($event))
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(pageSizes.value, (size) => {
+                return openBlock(), createElementBlock("option", {
+                  key: size,
+                  value: size
+                }, toDisplayString(size), 9, _hoisted_21);
+              }), 128))
+            ], 40, _hoisted_20),
+            createElementVNode("span", _hoisted_22, toDisplayString(unref(t)("table.pageSize")), 1),
+            createElementVNode("button", {
+              class: "fat-table__pagination-btn",
+              disabled: paginationData.value.currentPage === 1,
+              onClick: _cache[1] || (_cache[1] = ($event) => handlePageChange(paginationData.value.currentPage - 1))
+            }, " 上一页 ", 8, _hoisted_23),
+            createElementVNode("span", _hoisted_24, toDisplayString(unref(t)("table.page")) + " " + toDisplayString(paginationData.value.currentPage) + " / " + toDisplayString(totalPages.value), 1),
+            createElementVNode("button", {
+              class: "fat-table__pagination-btn",
+              disabled: paginationData.value.currentPage >= totalPages.value,
+              onClick: _cache[2] || (_cache[2] = ($event) => handlePageChange(paginationData.value.currentPage + 1))
+            }, " 下一页 ", 8, _hoisted_25)
+          ])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const FatTable = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-1245c8df"]]);
+const FatTableWithInstall = FatTable;
+FatTableWithInstall.install = (app) => {
+  app.component("FatTable", FatTable);
+};
+const _hoisted_1$3 = {
+  key: 0,
+  class: "fat-form__submitter"
+};
+const _hoisted_2$3 = ["disabled", "loading"];
+const _hoisted_3$2 = ["disabled"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "FatForm",
+  props: {
+    modelValue: { default: () => ({}) },
+    mode: { default: "editable" },
+    layout: { default: "horizontal" },
+    labelWidth: {},
+    labelSuffix: { default: ":" },
+    size: { default: "default" },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    initialValue: { default: () => ({}) },
+    rules: { default: () => ({}) },
+    enableSubmitter: { type: Boolean, default: true },
+    enableReset: { type: Boolean, default: true },
+    submitText: {},
+    resetText: {},
+    onSubmit: {}
+  },
+  emits: ["update:modelValue", "submit", "reset", "validate"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useI18n();
+    const submitting = ref(false);
+    const formValues = reactive({ ...props.initialValue, ...props.modelValue });
+    const errors = reactive({});
+    const formClass = computed(() => {
+      return [
+        `fat-form--${props.layout}`,
+        `fat-form--${props.size}`,
+        {
+          "fat-form--disabled": props.disabled,
+          "fat-form--preview": props.mode === "preview"
+        }
+      ];
+    });
+    const formInstance = {
+      get mode() {
+        return props.mode;
+      },
+      get layout() {
+        return props.layout;
+      },
+      get disabled() {
+        return props.disabled;
+      },
+      get loading() {
+        return computed(() => props.loading || submitting.value);
+      },
+      get submitting() {
+        return computed(() => submitting.value);
+      },
+      get values() {
+        return computed(() => formValues);
+      },
+      async submit() {
+        const isValid = await this.validate();
+        if (!isValid) {
+          return;
+        }
+        submitting.value = true;
+        try {
+          if (props.onSubmit) {
+            await props.onSubmit({ ...formValues });
+          }
+          emit("submit", { ...formValues });
+        } finally {
+          submitting.value = false;
+        }
+      },
+      reset() {
+        Object.keys(formValues).forEach((key) => {
+          delete formValues[key];
+        });
+        Object.assign(formValues, { ...props.initialValue });
+        Object.keys(errors).forEach((key) => {
+          delete errors[key];
+        });
+        emit("update:modelValue", { ...formValues });
+        emit("reset", { ...formValues });
+      },
+      async validate() {
+        let isValid = true;
+        const rules = props.rules || {};
+        for (const [prop, ruleList] of Object.entries(rules)) {
+          const value = formValues[prop];
+          for (const rule of ruleList) {
+            if (rule.required && (value === void 0 || value === null || value === "")) {
+              errors[prop] = rule.message || `${prop} 不能为空`;
+              emit("validate", prop, false, errors[prop]);
+              isValid = false;
+              break;
+            }
+            if (rule.validator && typeof rule.validator === "function") {
+              try {
+                await rule.validator(rule, value, formValues);
+              } catch (error) {
+                errors[prop] = error.message || "验证失败";
+                emit("validate", prop, false, errors[prop]);
+                isValid = false;
+                break;
+              }
+            }
+          }
+          if (isValid && errors[prop]) {
+            delete errors[prop];
+            emit("validate", prop, true);
+          }
+        }
+        return isValid;
+      },
+      async validateField(prop) {
+        var _a;
+        const propsToValidate = Array.isArray(prop) ? prop : [prop];
+        let isValid = true;
+        for (const p of propsToValidate) {
+          const rules = ((_a = props.rules) == null ? void 0 : _a[p]) || [];
+          const value = formValues[p];
+          for (const rule of rules) {
+            if (rule.required && (value === void 0 || value === null || value === "")) {
+              errors[p] = rule.message || `${p} 不能为空`;
+              emit("validate", p, false, errors[p]);
+              isValid = false;
+              break;
+            }
+            if (rule.validator && typeof rule.validator === "function") {
+              try {
+                await rule.validator(rule, value, formValues);
+              } catch (error) {
+                errors[p] = error.message || "验证失败";
+                emit("validate", p, false, errors[p]);
+                isValid = false;
+                break;
+              }
+            }
+          }
+          if (isValid && errors[p]) {
+            delete errors[p];
+            emit("validate", p, true);
+          }
+        }
+        return isValid;
+      },
+      clearValidate(prop) {
+        if (!prop) {
+          Object.keys(errors).forEach((key) => {
+            delete errors[key];
+          });
+        } else {
+          const propsToClear = Array.isArray(prop) ? prop : [prop];
+          propsToClear.forEach((p) => {
+            delete errors[p];
+          });
+        }
+      },
+      getFieldValue(prop) {
+        return formValues[prop];
+      },
+      setFieldValue(prop, value) {
+        formValues[prop] = value;
+        emit("update:modelValue", { ...formValues });
+      }
+    };
+    provide("fatForm", formInstance);
+    provide("fatFormErrors", errors);
+    const handleSubmit = async () => {
+      await formInstance.submit();
+    };
+    const handleReset = () => {
+      formInstance.reset();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("form", {
+        class: normalizeClass(["fat-form", formClass.value]),
+        onSubmit: withModifiers(handleSubmit, ["prevent"])
+      }, [
+        renderSlot(_ctx.$slots, "default", { form: formInstance }, void 0, true),
+        __props.enableSubmitter ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+          renderSlot(_ctx.$slots, "submitter", { form: formInstance }, () => [
+            createElementVNode("button", {
+              type: "submit",
+              class: "fat-form__submit-btn",
+              disabled: submitting.value || __props.disabled,
+              loading: submitting.value
+            }, toDisplayString(__props.submitText || unref(t)("common.submit")), 9, _hoisted_2$3),
+            __props.enableReset ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "fat-form__reset-btn",
+              disabled: submitting.value || __props.disabled,
+              onClick: handleReset
+            }, toDisplayString(__props.resetText || unref(t)("common.reset")), 9, _hoisted_3$2)) : createCommentVNode("", true)
+          ], true)
+        ])) : createCommentVNode("", true)
+      ], 34);
+    };
+  }
+});
+const FatForm = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-13c5bb85"]]);
+const _hoisted_1$2 = {
+  key: 0,
+  class: "fat-form-item__required"
+};
+const _hoisted_2$2 = {
+  key: 0,
+  class: "fat-form-item__error"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "FatFormItem",
+  props: {
+    prop: {},
+    label: {},
+    required: { type: Boolean },
+    hidden: { type: Boolean },
+    disabled: { type: Boolean },
+    labelWidth: {},
+    width: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = inject("fatForm");
+    const errors = inject("fatFormErrors", {});
+    const labelSuffix = computed(() => {
+      return (form == null ? void 0 : form.layout) === "horizontal" ? form.labelSuffix || ":" : "";
+    });
+    const value = computed(() => {
+      return form == null ? void 0 : form.getFieldValue(props.prop);
+    });
+    const errorMessage = computed(() => {
+      return errors[props.prop];
+    });
+    const hidden = computed(() => {
+      return props.hidden || (form == null ? void 0 : form.mode) === "preview";
+    });
+    const formItemClass = computed(() => {
+      return [
+        `fat-form-item--${(form == null ? void 0 : form.layout) || "horizontal"}`,
+        {
+          "fat-form-item--error": !!errorMessage.value,
+          "fat-form-item--required": props.required,
+          "fat-form-item--disabled": props.disabled || (form == null ? void 0 : form.disabled)
+        }
+      ];
+    });
+    const labelStyle = computed(() => {
+      const style = {};
+      if ((form == null ? void 0 : form.layout) === "horizontal" && (props.labelWidth || form.labelWidth)) {
+        const width = props.labelWidth || form.labelWidth;
+        style.width = typeof width === "number" ? `${width}px` : width;
+      }
+      return style;
+    });
+    const contentStyle = computed(() => {
+      const style = {};
+      if (props.width) {
+        style.width = typeof props.width === "number" ? `${props.width}px` : props.width;
+      }
+      return style;
+    });
+    watch(
+      () => value.value,
+      (newVal) => {
+        if (form) {
+          form.setFieldValue(props.prop, newVal);
+        }
+      },
+      { deep: true }
+    );
+    return (_ctx, _cache) => {
+      return !hidden.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["fat-form-item", formItemClass.value])
+      }, [
+        __props.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          class: "fat-form-item__label",
+          style: normalizeStyle(labelStyle.value)
+        }, [
+          __props.required ? (openBlock(), createElementBlock("span", _hoisted_1$2, "*")) : createCommentVNode("", true),
+          createTextVNode(" " + toDisplayString(__props.label) + toDisplayString(labelSuffix.value), 1)
+        ], 4)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: "fat-form-item__content",
+          style: normalizeStyle(contentStyle.value)
+        }, [
+          renderSlot(_ctx.$slots, "default", {
+            value: value.value,
+            form: unref(form)
+          }, void 0, true),
+          errorMessage.value ? (openBlock(), createElementBlock("div", _hoisted_2$2, toDisplayString(errorMessage.value), 1)) : createCommentVNode("", true)
+        ], 4)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const FatFormItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2793b4e0"]]);
+FatForm.install = (app) => {
+  app.component("FatForm", FatForm);
+  app.component("FatFormItem", FatFormItem);
+};
+const _hoisted_1$1 = { class: "fat-table-layout" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "fat-table-layout__header"
+};
+const _hoisted_3$1 = {
+  key: 0,
+  class: "fat-table-layout__title"
+};
+const _hoisted_4$1 = {
+  key: 1,
+  class: "fat-table-layout__query"
+};
+const _hoisted_5$1 = {
+  key: 2,
+  class: "fat-table-layout__toolbar"
+};
+const _hoisted_6$1 = { class: "fat-table-layout__table" };
+const _hoisted_7$1 = {
+  key: 3,
+  class: "fat-table-layout__pagination"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "FatTableLayout",
+  props: {
+    title: {},
+    showQuery: { type: Boolean, default: true },
+    showToolbar: { type: Boolean, default: true },
+    showPagination: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+          renderSlot(_ctx.$slots, "title", {}, () => [
+            __props.title ? (openBlock(), createElementBlock("h2", _hoisted_3$1, toDisplayString(__props.title), 1)) : createCommentVNode("", true)
+          ], true)
+        ])) : createCommentVNode("", true),
+        __props.showQuery && _ctx.$slots.query ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+          renderSlot(_ctx.$slots, "query", {}, void 0, true)
+        ])) : createCommentVNode("", true),
+        __props.showToolbar && _ctx.$slots.toolbar ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+          renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_6$1, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        __props.showPagination && _ctx.$slots.pagination ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
+          renderSlot(_ctx.$slots, "pagination", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const FatTableLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-69de3a24"]]);
+FatTableLayout.install = (app) => {
+  app.component("FatTableLayout", FatTableLayout);
+};
+const _hoisted_1 = { class: "fat-form-layout" };
+const _hoisted_2 = {
+  key: 0,
+  class: "fat-form-layout__header"
+};
+const _hoisted_3 = { class: "fat-form-layout__header-left" };
+const _hoisted_4 = {
+  key: 0,
+  class: "fat-form-layout__title"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "fat-form-layout__header-extra"
+};
+const _hoisted_6 = { class: "fat-form-layout__content" };
+const _hoisted_7 = {
+  key: 1,
+  class: "fat-form-layout__footer"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FatFormLayout",
+  props: {
+    title: {},
+    showSubmitter: { type: Boolean, default: true },
+    showBack: { type: Boolean, default: false }
+  },
+  emits: ["back"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const { t } = useI18n();
+    const handleBack = () => {
+      emit("back");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.title || _ctx.$slots.title || __props.showBack ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            __props.showBack ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              class: "fat-form-layout__back-btn",
+              onClick: handleBack
+            }, " ← " + toDisplayString(unref(t)("common.cancel")), 1)) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              __props.title ? (openBlock(), createElementBlock("h2", _hoisted_4, toDisplayString(__props.title), 1)) : createCommentVNode("", true)
+            ], true)
+          ]),
+          _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            renderSlot(_ctx.$slots, "extra", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_6, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        __props.showSubmitter && _ctx.$slots.submitter ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          renderSlot(_ctx.$slots, "submitter", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const FatFormLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4698d66e"]]);
+FatFormLayout.install = (app) => {
+  app.component("FatFormLayout", FatFormLayout);
+};
+const useI18nT = () => {
+  const { t } = useI18n();
+  return t;
+};
+const useT = () => {
+  const { t } = useI18n();
+  return t;
+};
+const components = [
+  FatTableWithInstall,
+  FatForm,
+  FatTableLayout,
+  FatFormLayout
+];
+const install = (app) => {
+  components.forEach((component) => {
+    const comp = component;
+    if (comp.install) {
+      app.use(comp);
+    } else if (comp.name) {
+      app.component(comp.name, comp);
+    }
+  });
+  app.use(i18n);
+};
+const index = {
+  install,
+  FatTable: FatTableWithInstall,
+  FatForm,
+  FatTableLayout,
+  FatFormLayout
+};
+export {
+  FatForm,
+  FatFormLayout,
+  FatTableWithInstall as FatTable,
+  FatTableLayout,
+  index as default,
+  i18n,
+  useI18nT,
+  useT
+};
+//# sourceMappingURL=index.js.map