@funcho/ui 1.1.0 → 1.1.1

package/README.md

@@ -167,3 +167,9 @@ const open = ref(false);
 | 102 | `FcTree` |
 | 103 | `FcTreeSelect` |
 | 104 | `FcUpload` |
+
+| 序号 | 组件名称 |
+| :---: | :--- |
+| 1 | `FcDataTable` |
+| 1 | `FcProForm` |
+| 1 | `FcSidebarMainLayout` |

package/dist/cjs/business/DataTable/DataTable.vue.js

@@ -0,0 +1,336 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const useNamespace = require('../../hooks/use-namespace.js');
+const index = require('../../components/Button/index.js');
+require('../../components/Dialog/index.js');
+require('../../components/ConfigProvider/index.js');
+require('../../components/Input/index.js');
+require('../../components/Tree/index.js');
+require('../../components/Tabs/index.js');
+require('../../components/TabPane/index.js');
+require('../../components/Steps/index.js');
+require('../../components/Step/index.js');
+require('../../components/InputNumber/index.js');
+require('../../components/Select/index.js');
+require('../../components/Option/index.js');
+require('../../components/DatePicker/index.js');
+require('../../components/DatePickerPanel/index.js');
+require('../../components/Tooltip/index.js');
+require('../../components/Icon/index.js');
+require('../../components/Notification/index.js');
+require('../../components/Link/index.js');
+require('../../components/Text/index.js');
+require('../../components/Scrollbar/index.js');
+require('../../components/Splitter/index.js');
+require('../../components/SplitterPanel/index.js');
+require('../../components/Autocomplete/index.js');
+require('../../components/Cascader/index.js');
+require('../../components/CascaderPanel/index.js');
+require('../../components/Checkbox/index.js');
+require('../../components/CheckboxGroup/index.js');
+require('../../components/CheckboxButton/index.js');
+require('../../components/Form/index.js');
+require('../../components/FormItem/index.js');
+require('../../components/InputTag/index.js');
+require('../../components/Radio/index.js');
+require('../../components/RadioGroup/index.js');
+require('../../components/SelectV2/index.js');
+require('../../components/Switch/index.js');
+require('../../components/TimePicker/index.js');
+require('../../components/TimeSelect/index.js');
+require('../../components/TreeSelect/index.js');
+require('../../components/Upload/index.js');
+require('../../components/Avatar/index.js');
+require('../../components/AvatarGroup/index.js');
+require('../../components/Badge/index.js');
+require('../../components/Card/index.js');
+require('../../components/Descriptions/index.js');
+require('../../components/DescriptionsItem/index.js');
+require('../../components/Empty/index.js');
+require('../../components/Image/index.js');
+require('../../components/ImageViewer/index.js');
+const index$4 = require('../../components/Pagination/index.js');
+const index$2 = require('../../components/Table/index.js');
+const index$3 = require('../../components/TableColumn/index.js');
+require('../../components/TableV2/index.js');
+require('../../components/Tag/index.js');
+require('../../components/Breadcrumb/index.js');
+require('../../components/BreadcrumbItem/index.js');
+require('../../components/Drawer/index.js');
+require('../../components/Popconfirm/index.js');
+const index$1 = require('../../components/IconComponent/index.js');
+require('../../components/Popover/index.js');
+require('../../components/Result/index.js');
+require('../../components/Progress/index.js');
+require('../../components/Divider/index.js');
+require('../../components/Dropdown/index.js');
+require('../../components/DropdownMenu/index.js');
+require('../../components/DropdownItem/index.js');
+require('../../components/Menu/index.js');
+require('../../components/SubMenu/index.js');
+require('../../components/MenuItem/index.js');
+require('../../components/RadioButton/index.js');
+require('../../components/MenuItemGroup/index.js');
+require('../../components/Collapse/index.js');
+require('../../components/CollapseItem/index.js');
+require('../../components/ContextMenu/index.js');
+require('../../components/CodeEditor/index.js');
+require('../../components/RichEditor/index.js');
+const ProForm_vue_vue_type_script_setup_true_lang = require('../ProForm/ProForm.vue.js');
+;/* empty css                       */
+const core = require('@vueuse/core');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "FcProDataTable",
+    inheritAttrs: false
+  },
+  __name: "DataTable",
+  props: {
+    hasIndex: { type: Boolean, default: true },
+    height: { default: 0 },
+    columns: { default: () => [] },
+    isPagination: { type: Boolean, default: true },
+    fields: { default: () => [] },
+    request: { type: Function, default: () => Promise.resolve({ list: [], total: 0 }) },
+    actions: { default: () => [] }
+  },
+  setup(__props) {
+    const ns = useNamespace.useNamespace("data-table");
+    const formRef = vue.ref();
+    const { height: formHeight } = core.useElementSize(formRef);
+    const hasMoreContent = vue.computed(() => {
+      return formHeight.value > 28;
+    });
+    const isExpanded = vue.ref(false);
+    const props = __props;
+    const queryBoxRef = vue.ref(null);
+    const { height: queryBoxHeight } = core.useElementSize(queryBoxRef, void 0, {
+      box: "border-box"
+    });
+    const paginationBoxRef = vue.ref(null);
+    const { height: paginationBoxHeight } = core.useElementSize(paginationBoxRef, void 0, {
+      box: "border-box"
+    });
+    const containerRef = vue.ref(null);
+    const { height: containerHeight } = core.useElementSize(containerRef);
+    const maxTableHeight = vue.computed(() => {
+      return (props.height || containerHeight.value) - ((queryBoxHeight.value > 0 ? queryBoxHeight.value + 8 : 0) + paginationBoxHeight.value);
+    });
+    const searchFormFields = vue.computed(() => {
+      return props.fields.map((field) => {
+        const { type, attrs = {} } = field;
+        if (!type || type === "" || type.includes("Input")) {
+          attrs.onClear = handleSearchClick;
+        }
+        if (type?.includes("Select") || type?.includes("Cascader") || type?.includes("DatePicker")) {
+          attrs.onClear = handleSearchClick;
+          attrs.onChange = handleSearchClick;
+        }
+        if (type?.includes("Radio") || type?.includes("Checkbox")) {
+          attrs.onChange = handleSearchClick;
+        }
+        return {
+          ...field,
+          attrs
+        };
+      });
+    });
+    const pagination = vue.ref({
+      currentPage: 1,
+      pageSize: 20,
+      total: 0
+    });
+    const getIndex = (i) => {
+      return (pagination.value.currentPage - 1) * pagination.value.pageSize + i + 1;
+    };
+    const tableData = vue.ref([]);
+    const tableLoading = vue.ref(false);
+    const loadData = async () => {
+      if (props.request) {
+        if (tableLoading.value) {
+          return;
+        }
+        const params = formRef.value?.model || {};
+        try {
+          tableLoading.value = true;
+          const { list, total } = await props.request(params);
+          tableData.value = list || [];
+          pagination.value.total = total || 0;
+        } catch (error) {
+          console.log("获取数据失败", error);
+        } finally {
+          tableLoading.value = false;
+        }
+      }
+    };
+    vue.onMounted(() => {
+      loadData();
+    });
+    const handleResetClick = () => {
+      formRef.value?.resetFields();
+      pagination.value.currentPage = 1;
+      loadData();
+    };
+    const handleSearchClick = () => {
+      pagination.value.currentPage = 1;
+      loadData();
+    };
+    const handlePaginationChange = (currentPage, pageSize) => {
+      pagination.value.currentPage = currentPage;
+      pagination.value.pageSize = pageSize;
+      loadData();
+    };
+    return (_ctx, _cache) => {
+      const _directive_loading = vue.resolveDirective("loading");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: vue.normalizeClass(vue.unref(ns).b())
+      }, [
+        __props.fields && __props.fields.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          ref_key: "queryBoxRef",
+          ref: queryBoxRef,
+          class: vue.normalizeClass({ [vue.unref(ns).e("query-box")]: true, [vue.unref(ns).is("expanded")]: isExpanded.value }),
+          style: vue.normalizeStyle({ "--query-box-max-height": vue.unref(formHeight) + 16 + "px" })
+        }, [
+          vue.createVNode(ProForm_vue_vue_type_script_setup_true_lang.default, {
+            ref_key: "formRef",
+            ref: formRef,
+            inline: "",
+            fields: searchFormFields.value,
+            class: vue.normalizeClass(vue.unref(ns).e("query-form")),
+            "label-position": "right",
+            "label-width": "auto"
+          }, null, 8, ["fields", "class"]),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(ns).e("tools"))
+          }, [
+            hasMoreContent.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.FcButton), {
+              key: 0,
+              link: "",
+              type: "primary",
+              onClick: _cache[0] || (_cache[0] = ($event) => isExpanded.value = !isExpanded.value)
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(isExpanded.value ? "收起" : "展开"), 1),
+                vue.createVNode(vue.unref(index$1.FcIconComponent), {
+                  name: isExpanded.value ? "ArrowUp" : "ArrowDown",
+                  size: 14
+                }, null, 8, ["name"])
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true),
+            __props.fields && __props.fields.length > 2 ? (vue.openBlock(), vue.createBlock(vue.unref(index.FcButton), {
+              key: 1,
+              disabled: tableLoading.value,
+              onClick: handleResetClick
+            }, {
+              default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                vue.createTextVNode(" 重置 ", -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+            vue.createVNode(vue.unref(index.FcButton), {
+              type: "primary",
+              disabled: tableLoading.value,
+              onClick: handleSearchClick
+            }, {
+              default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+                vue.createTextVNode("查询", -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])
+          ], 2)
+        ], 6)) : vue.createCommentVNode("", true),
+        vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$2.FcTable), vue.mergeProps(_ctx.$attrs, {
+          data: tableData.value,
+          border: "",
+          "max-height": maxTableHeight.value
+        }), {
+          default: vue.withCtx(() => [
+            __props.hasIndex ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.FcTableColumn), {
+              key: "index",
+              label: "序号",
+              align: "center",
+              fixed: "left",
+              type: "index",
+              width: 60,
+              index: getIndex,
+              "show-overflow-tooltip": false
+            })) : vue.createCommentVNode("", true),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.columns, (item) => {
+              return vue.openBlock(), vue.createBlock(vue.unref(index$3.FcTableColumn), vue.mergeProps({
+                key: item.prop
+              }, { ref_for: true }, item, {
+                "show-overflow-tooltip": item.showOverflowTooltip || true
+              }), vue.createSlots({ _: 2 }, [
+                item.render ? {
+                  name: "default",
+                  fn: vue.withCtx(({ row, $index }) => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.render(row, $index))))
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1040, ["show-overflow-tooltip"]);
+            }), 128)),
+            props.actions && props.actions.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.FcTableColumn), {
+              key: "actions",
+              label: "操作",
+              align: "right",
+              fixed: "right"
+            }, {
+              default: vue.withCtx(({ row, $index }) => [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(ns).e("actions"))
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.actions, (action, i) => {
+                    return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: i }, [
+                      (typeof action.hidden === "function" ? !action.hidden(row) : !action.hidden) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(action.label.includes("删除") ? vue.unref(index.FcDangerButton) : vue.unref(index.FcLinkButton)), {
+                        key: 0,
+                        type: action.type || "primary",
+                        disabled: typeof action.disabled === "function" ? action.disabled(row) : action.disabled,
+                        onClick: ($event) => action.label.includes("删除") ? void 0 : action.onClick(row, $index),
+                        onConfirm: ($event) => action.label.includes("删除") ? action.onClick(row, $index) : void 0
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(action.label), 1)
+                        ]),
+                        _: 2
+                      }, 1064, ["type", "disabled", "onClick", "onConfirm"])) : vue.createCommentVNode("", true)
+                    ], 64);
+                  }), 128))
+                ], 2)
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 16, ["data", "max-height"])), [
+          [_directive_loading, tableLoading.value]
+        ]),
+        __props.isPagination ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          ref_key: "paginationBoxRef",
+          ref: paginationBoxRef,
+          class: vue.normalizeClass(vue.unref(ns).e("pagination-box"))
+        }, [
+          vue.createVNode(vue.unref(index$4.FcPagination), {
+            "page-size": pagination.value.pageSize,
+            "onUpdate:pageSize": _cache[1] || (_cache[1] = ($event) => pagination.value.pageSize = $event),
+            "current-page": pagination.value.currentPage,
+            "onUpdate:currentPage": _cache[2] || (_cache[2] = ($event) => pagination.value.currentPage = $event),
+            total: pagination.value.total,
+            onChange: handlePaginationChange
+          }, null, 8, ["page-size", "current-page", "total"])
+        ], 2)) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/cjs/business/DataTable/DataTable.vue3.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const DataTable_vue_vue_type_script_setup_true_lang = require('./DataTable.vue.js');
+;/* empty css                */
+
+
+
+exports.default = DataTable_vue_vue_type_script_setup_true_lang.default;

package/dist/cjs/business/DataTable/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const DataTable_vue_vue_type_script_setup_true_lang = require('./DataTable.vue.js');
+;/* empty css                */
+const withInstall = require('../../_utils/with-install.js');
+
+const FcProDataTable = withInstall.withInstall(DataTable_vue_vue_type_script_setup_true_lang.default);
+
+exports.FcProDataTable = FcProDataTable;
+exports.default = FcProDataTable;

package/dist/cjs/business/ProForm/ProForm.vue.js

@@ -0,0 +1,185 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const useNamespace = require('../../hooks/use-namespace.js');
+require('../../components/Button/index.js');
+require('../../components/Dialog/index.js');
+require('../../components/ConfigProvider/index.js');
+require('../../components/Input/index.js');
+require('../../components/Tree/index.js');
+require('../../components/Tabs/index.js');
+require('../../components/TabPane/index.js');
+require('../../components/Steps/index.js');
+require('../../components/Step/index.js');
+require('../../components/InputNumber/index.js');
+require('../../components/Select/index.js');
+require('../../components/Option/index.js');
+require('../../components/DatePicker/index.js');
+require('../../components/DatePickerPanel/index.js');
+require('../../components/Tooltip/index.js');
+require('../../components/Icon/index.js');
+require('../../components/Notification/index.js');
+require('../../components/Link/index.js');
+require('../../components/Text/index.js');
+require('../../components/Scrollbar/index.js');
+require('../../components/Splitter/index.js');
+require('../../components/SplitterPanel/index.js');
+require('../../components/Autocomplete/index.js');
+require('../../components/Cascader/index.js');
+require('../../components/CascaderPanel/index.js');
+require('../../components/Checkbox/index.js');
+require('../../components/CheckboxGroup/index.js');
+require('../../components/CheckboxButton/index.js');
+const index = require('../../components/Form/index.js');
+const index$1 = require('../../components/FormItem/index.js');
+require('../../components/InputTag/index.js');
+require('../../components/Radio/index.js');
+require('../../components/RadioGroup/index.js');
+require('../../components/SelectV2/index.js');
+require('../../components/Switch/index.js');
+require('../../components/TimePicker/index.js');
+require('../../components/TimeSelect/index.js');
+require('../../components/TreeSelect/index.js');
+require('../../components/Upload/index.js');
+require('../../components/Avatar/index.js');
+require('../../components/AvatarGroup/index.js');
+require('../../components/Badge/index.js');
+require('../../components/Card/index.js');
+require('../../components/Descriptions/index.js');
+require('../../components/DescriptionsItem/index.js');
+require('../../components/Empty/index.js');
+require('../../components/Image/index.js');
+require('../../components/ImageViewer/index.js');
+require('../../components/Pagination/index.js');
+require('../../components/Table/index.js');
+require('../../components/TableColumn/index.js');
+require('../../components/TableV2/index.js');
+require('../../components/Tag/index.js');
+require('../../components/Breadcrumb/index.js');
+require('../../components/BreadcrumbItem/index.js');
+require('../../components/Drawer/index.js');
+require('../../components/Popconfirm/index.js');
+require('../../components/IconComponent/index.js');
+require('../../components/Popover/index.js');
+require('../../components/Result/index.js');
+require('../../components/Progress/index.js');
+require('../../components/Divider/index.js');
+require('../../components/Dropdown/index.js');
+require('../../components/DropdownMenu/index.js');
+require('../../components/DropdownItem/index.js');
+require('../../components/Menu/index.js');
+require('../../components/SubMenu/index.js');
+require('../../components/MenuItem/index.js');
+require('../../components/RadioButton/index.js');
+require('../../components/MenuItemGroup/index.js');
+require('../../components/Collapse/index.js');
+require('../../components/CollapseItem/index.js');
+require('../../components/ContextMenu/index.js');
+require('../../components/CodeEditor/index.js');
+require('../../components/RichEditor/index.js');
+const componentsMap = require('./componentsMap.js');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "FcProForm"
+  },
+  __name: "ProForm",
+  props: {
+    inline: { type: Boolean, default: false },
+    labelPosition: { default: "top" },
+    fields: { default: () => [] }
+  },
+  setup(__props, { expose: __expose }) {
+    const ns = useNamespace.useNamespace("pro-form");
+    const formModel = vue.ref({});
+    const setValues = (data) => {
+      formModel.value = Object.assign({}, formModel.value, data);
+    };
+    const getGridItemStyle = (item) => {
+      if (item.span === "full") {
+        return { gridColumn: "1 / -1" };
+      }
+      if (typeof item.span === "number") {
+        return { gridColumn: `span ${item.span}` };
+      }
+      return { gridColumn: "span 1" };
+    };
+    const getPlaceholder = (item, type) => {
+      if (item.attrs?.placeholder) {
+        return item.attrs.placeholder;
+      }
+      if (type?.includes("Select") || type?.includes("Cascader") || type?.includes("DatePicker")) {
+        return `请选择${item.label}`;
+      }
+      return `请输入${item.label}`;
+    };
+    const formRef = vue.ref();
+    __expose(
+      new Proxy(
+        {},
+        {
+          get(_, key) {
+            if (key === "setValues") {
+              return setValues;
+            }
+            if (key === "model") {
+              return formModel.value;
+            }
+            return formRef.value?.[key];
+          },
+          has(_, key) {
+            if (key === "setValues" || key === "model") {
+              return true;
+            }
+            return key in formRef.value;
+          }
+        }
+      )
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(index.FcForm), vue.mergeProps({
+        ref_key: "formRef",
+        ref: formRef
+      }, _ctx.$attrs, {
+        model: formModel.value,
+        class: { [vue.unref(ns).e("container")]: true, [vue.unref(ns).is("inline")]: __props.inline },
+        inline: __props.inline,
+        "label-position": __props.labelPosition
+      }), {
+        default: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.fields, (item) => {
+            return vue.openBlock(), vue.createBlock(vue.unref(index$1.FcFormItem), {
+              key: item.prop,
+              label: item.label,
+              prop: item.prop,
+              style: vue.normalizeStyle(getGridItemStyle(item))
+            }, {
+              default: vue.withCtx(() => [
+                item.render ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.render(formModel.value, item.prop, item.label)), vue.mergeProps({
+                  key: 0,
+                  ref_for: true
+                }, item.attrs, {
+                  placeholder: getPlaceholder(item, item.type),
+                  style: { "width": "100%" }
+                }), null, 16, ["placeholder"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(componentsMap.ComponentsMap)[item.type || "FcInput"]), vue.mergeProps({
+                  key: 1,
+                  modelValue: formModel.value[item.prop],
+                  "onUpdate:modelValue": ($event) => formModel.value[item.prop] = $event
+                }, { ref_for: true }, item.attrs, {
+                  placeholder: getPlaceholder(item, item.type),
+                  style: { "width": "100%" }
+                }), null, 16, ["modelValue", "onUpdate:modelValue", "placeholder"]))
+              ]),
+              _: 2
+            }, 1032, ["label", "prop", "style"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 16, ["model", "class", "inline", "label-position"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/cjs/business/ProForm/ProForm.vue3.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const ProForm_vue_vue_type_script_setup_true_lang = require('./ProForm.vue.js');
+;/* empty css              */
+
+
+
+exports.default = ProForm_vue_vue_type_script_setup_true_lang.default;

package/dist/cjs/business/ProForm/componentsMap.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const index = require('../../components/index.js');
+
+const ComponentsMap = {};
+Object.keys(index).map((key) => {
+  const component = index[key];
+  if (typeof component === "object" && component.name && typeof component.install === "function") {
+    ComponentsMap[component.name] = component;
+  }
+});
+
+exports.ComponentsMap = ComponentsMap;

package/dist/cjs/business/ProForm/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const ProForm_vue_vue_type_script_setup_true_lang = require('./ProForm.vue.js');
+;/* empty css              */
+const withInstall = require('../../_utils/with-install.js');
+
+const FcProForm = withInstall.withInstall(ProForm_vue_vue_type_script_setup_true_lang.default);
+
+exports.FcProForm = FcProForm;
+exports.default = FcProForm;