@gct-paas/core-web 0.1.4-dev.10 → 0.1.4-dev.11

package/es/components/icon-next/src/IconNextPicker.vue2.mjs

@@ -0,0 +1,452 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeStyle, unref, normalizeClass, createBlock, createCommentVNode, toDisplayString, Fragment, renderList, withDirectives, vModelText, nextTick } from 'vue';
+import { Form, Empty } from 'ant-design-vue';
+import 'overlayscrollbars-vue';
+import { useIconAsset } from '../hooks/useIconAsset.mjs';
+import { useIconPark } from '../hooks/useIconPark.mjs';
+import { useIconPlatform } from '../hooks/useIconPlatform.mjs';
+import { IconNamespaceEnum } from '../types/index.mjs';
+import IconNext from './IconNext.vue2.mjs';
+import { debounce, cloneDeep } from 'lodash-es';
+import { usePlatformConfigStore } from '@gct-paas/core';
+
+const _hoisted_1 = { class: "icon-picker-next" };
+const _hoisted_2 = { class: "p-12px" };
+const _hoisted_3 = { class: "flex icon-picker-next__container" };
+const _hoisted_4 = { class: "icon-picker-next__cats" };
+const _hoisted_5 = ["title", "data-id", "onClick"];
+const _hoisted_6 = { class: "icon-picker-next__panel" };
+const _hoisted_7 = { class: "icon-picker-next__icons" };
+const _hoisted_8 = { class: "icon__list" };
+const _hoisted_9 = ["title", "data-id", "onClick"];
+const _hoisted_10 = {
+  key: 0,
+  class: "color__setting"
+};
+const _hoisted_11 = { class: "color__list" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = { class: "color__input" };
+const _hoisted_14 = {
+  key: 1,
+  class: "color__setting"
+};
+const _hoisted_15 = { class: "color__list" };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = { class: "color__input" };
+const _hoisted_18 = {
+  key: 1,
+  class: "flex items-center justify-center h-full"
+};
+const DEFAULT_COLOR = "#FFFFFF";
+const DEFAULT_BACKGROUND = "#3370FF";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IconNextPicker",
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    size: {
+      type: Number,
+      default: 30
+    },
+    showColor: {
+      type: Boolean,
+      default: false
+    },
+    background: {
+      type: String
+    },
+    showBackground: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:value", "update:color", "update:background"],
+  setup(__props, { emit: __emit }) {
+    const { themeSetting } = usePlatformConfigStore();
+    const props = __props;
+    const emit = __emit;
+    const { getIconAssetCats } = useIconAsset();
+    const { getIconParkCats } = useIconPark();
+    const { getIconPlatformCats } = useIconPlatform();
+    const { onFieldChange } = Form.useInjectFormItemContext();
+    const TreeScrollRef = ref();
+    const IconsScrollRef = ref();
+    const spinning = ref(false);
+    const BASIC_COLORS = [
+      "#3370FF",
+      "#0DAA9C",
+      "#EF3232",
+      "#EFA332",
+      "#18C8D3",
+      "#A33FF2"
+    ];
+    const ICON_COLOR = [DEFAULT_COLOR, ...BASIC_COLORS];
+    const ICON_BACKGROUND = ["transparent", ...BASIC_COLORS];
+    const customColor = ref(DEFAULT_COLOR);
+    const customColorChecked = ref(false);
+    const customBackground = ref(DEFAULT_COLOR);
+    const customBackgroundChecked = ref(false);
+    let catTreeCache = [];
+    const catTree = ref([]);
+    const catIcons = ref([]);
+    const selectedKeys = ref([]);
+    const searchKey = ref("");
+    const supportColor = computed(() => {
+      return catIcons.value.length > 0 && !catIcons.value[0].id.startsWith(IconNamespaceEnum.Asset);
+    });
+    const activeDefault = () => {
+      let cat = catTree.value[0] || {};
+      let selectCat = void 0;
+      if (cat) {
+        selectCat = cat.icons ? cat : cat.children?.[0];
+      }
+      if (selectCat) {
+        selectedKeys.value = [selectCat.id];
+        catIcons.value = selectCat.icons;
+      } else {
+        selectedKeys.value = [];
+        catIcons.value = [];
+      }
+    };
+    const activeSelected = async () => {
+      if (props.value) {
+        let cat = catTree.value.reduce((total, c) => {
+          if ("children" in c) {
+            total.push(...c.children);
+          } else {
+            total.push(c);
+          }
+          return total;
+        }, []).find((c) => c.icons.map((i) => i.id).includes(props.value));
+        if (cat) {
+          selectedKeys.value = [cat.id];
+          catIcons.value = cat.icons;
+          await nextTick();
+          TreeScrollRef.value?.getElement()?.scrollIntoView({
+            block: "center"
+          });
+          IconsScrollRef.value?.getElement()?.scrollIntoView({ block: "center" });
+        } else {
+          activeDefault();
+        }
+      } else {
+        activeDefault();
+      }
+    };
+    const handleVisibleChange = async (visible) => {
+      if (!visible) {
+        searchKey.value = "";
+        return;
+      }
+      spinning.value = true;
+      if (catTreeCache.length > 0) {
+        catTree.value = catTreeCache;
+      } else {
+        const iconParkCats = getIconParkCats();
+        const iconAssetCats = await getIconAssetCats();
+        const iconPlatformCats = getIconPlatformCats();
+        catTreeCache = iconAssetCats.concat(iconParkCats).concat(iconPlatformCats);
+        catTree.value = catTreeCache;
+      }
+      if (!props.color) {
+        emit("update:color", DEFAULT_COLOR);
+      } else if (ICON_COLOR.includes(props.color)) {
+        customColor.value = DEFAULT_COLOR;
+        customColorChecked.value = false;
+      } else {
+        customColor.value = props.color;
+        customColorChecked.value = true;
+      }
+      if (!props.background) {
+        emit("update:background", DEFAULT_BACKGROUND);
+      } else if (ICON_BACKGROUND.includes(props.background)) {
+        customBackground.value = DEFAULT_COLOR;
+        customBackgroundChecked.value = false;
+      } else {
+        customBackground.value = props.background;
+        customBackgroundChecked.value = true;
+      }
+      activeSelected();
+      spinning.value = false;
+    };
+    function recursiveIcons(arr, searchKey2) {
+      return arr.map((tree) => {
+        const childKey = ["children", "icons"].find((key) => !!tree[key]);
+        if (childKey) {
+          tree[childKey] = recursiveIcons(tree[childKey], searchKey2);
+          if (tree[childKey].length > 0) {
+            return tree;
+          }
+          return void 0;
+        } else {
+          const _filter_ = tree._filter_;
+          const isMatch = _filter_.some((k) => k.includes(searchKey2));
+          if (isMatch) {
+            return tree;
+          }
+          return void 0;
+        }
+      }).filter(Boolean);
+    }
+    const searchKeyHandler = (e) => {
+      spinning.value = true;
+      const key = e.target.value?.trim();
+      if (!key) {
+        catTree.value = catTreeCache;
+      } else {
+        catTree.value = recursiveIcons(cloneDeep(catTreeCache), key);
+      }
+      activeDefault();
+      spinning.value = false;
+    };
+    const handleSearchKeyChange = debounce(searchKeyHandler, 500);
+    const handleCategoryClick = (data) => {
+      if (data?.children && data?.children.length) {
+        return;
+      }
+      catIcons.value = data.icons ?? [];
+      selectedKeys.value = [data.id];
+    };
+    function handleIconClick(icon) {
+      emit("update:value", icon);
+      onFieldChange();
+    }
+    const handleSelectColor = (color, custom = false) => {
+      customColorChecked.value = custom;
+      emit("update:color", color);
+      onFieldChange();
+    };
+    const handleCustomColorChange = () => {
+      if (customColorChecked.value) {
+        emit("update:color", customColor.value);
+        onFieldChange();
+      }
+    };
+    const handleSelectBackground = (color, custom = false) => {
+      customBackgroundChecked.value = custom;
+      emit("update:background", color);
+      onFieldChange();
+    };
+    const handleCustomBackgroundChange = () => {
+      if (customBackgroundChecked.value) {
+        emit("update:background", customBackground.value);
+        onFieldChange();
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_a_input = resolveComponent("a-input");
+      const _component_a_tree = resolveComponent("a-tree");
+      const _component_overlayScrollbarsComponent = resolveComponent("overlayScrollbarsComponent");
+      const _component_CheckOutlined = resolveComponent("CheckOutlined");
+      const _component_a_empty = resolveComponent("a-empty");
+      const _component_a_spin = resolveComponent("a-spin");
+      const _component_a_popover = resolveComponent("a-popover");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_a_popover, {
+          placement: "bottomLeft",
+          trigger: "click",
+          "overlay-class-name": "icon-picker-next__popover",
+          onVisibleChange: handleVisibleChange
+        }, {
+          content: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(_component_a_input, {
+                value: searchKey.value,
+                "onUpdate:value": _cache[0] || (_cache[0] = ($event) => searchKey.value = $event),
+                class: "icon-picker-next__search",
+                placeholder: "搜索图标",
+                "allow-clear": "",
+                onChange: _cache[1] || (_cache[1] = (e) => {
+                  spinning.value = true;
+                  unref(handleSearchKeyChange)(e);
+                })
+              }, {
+                prefix: withCtx(() => [..._cache[6] || (_cache[6] = [
+                  createElementVNode("i", { class: "iconfont icon-sousuo1" }, null, -1)
+                ])]),
+                _: 1
+              }, 8, ["value"])
+            ]),
+            createVNode(_component_a_spin, { spinning: spinning.value }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_component_overlayScrollbarsComponent, {
+                      ref_key: "TreeScrollRef",
+                      ref: TreeScrollRef
+                    }, {
+                      default: withCtx(() => [
+                        catTree.value.length > 0 ? (openBlock(), createBlock(_component_a_tree, {
+                          key: 0,
+                          "selected-keys": selectedKeys.value,
+                          "default-expand-all": "",
+                          "block-node": "",
+                          "field-names": {
+                            children: "children",
+                            title: "name",
+                            key: "id"
+                          },
+                          "tree-data": catTree.value
+                        }, {
+                          title: withCtx(({ data }) => [
+                            createElementVNode("div", {
+                              class: "ell",
+                              title: data.name,
+                              "data-id": data.id,
+                              onClick: ($event) => handleCategoryClick(data)
+                            }, toDisplayString(data.name), 9, _hoisted_5)
+                          ]),
+                          _: 1
+                        }, 8, ["selected-keys", "tree-data"])) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }, 512)
+                  ]),
+                  createElementVNode("div", _hoisted_6, [
+                    catIcons.value?.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createElementVNode("div", _hoisted_7, [
+                        createVNode(_component_overlayScrollbarsComponent, {
+                          ref_key: "IconsScrollRef",
+                          ref: IconsScrollRef
+                        }, {
+                          default: withCtx(() => [
+                            createElementVNode("ul", _hoisted_8, [
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(catIcons.value, (icon) => {
+                                return openBlock(), createElementBlock("li", {
+                                  key: icon.name,
+                                  style: normalizeStyle({
+                                    "--background": __props.background || unref(themeSetting).themeColor
+                                  }),
+                                  class: normalizeClass({
+                                    "icon-picker-next--selected": icon.id === __props.value
+                                  }),
+                                  title: icon.name,
+                                  "data-id": icon.id,
+                                  onClick: ($event) => handleIconClick(icon.id)
+                                }, [
+                                  createVNode(IconNext, {
+                                    value: icon.id,
+                                    color: icon.id === __props.value ? __props.color : DEFAULT_COLOR
+                                  }, null, 8, ["value", "color"])
+                                ], 14, _hoisted_9);
+                              }), 128))
+                            ])
+                          ]),
+                          _: 1
+                        }, 512)
+                      ]),
+                      __props.showBackground ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                        _cache[7] || (_cache[7] = createElementVNode("div", { class: "color__title" }, "背景颜色", -1)),
+                        createElementVNode("div", _hoisted_11, [
+                          (openBlock(), createElementBlock(Fragment, null, renderList(ICON_BACKGROUND, (colorItem) => {
+                            return createElementVNode("span", {
+                              key: colorItem,
+                              class: normalizeClass(["color__item", "color__item--" + colorItem]),
+                              style: normalizeStyle({ backgroundColor: colorItem }),
+                              onClick: () => handleSelectBackground(colorItem)
+                            }, [
+                              __props.background === colorItem ? (openBlock(), createBlock(_component_CheckOutlined, { key: 0 })) : createCommentVNode("", true)
+                            ], 14, _hoisted_12);
+                          }), 64))
+                        ]),
+                        createElementVNode("div", _hoisted_13, [
+                          createElementVNode("div", {
+                            class: "color__preview",
+                            style: normalizeStyle({
+                              "--custom-bg": customBackground.value
+                            }),
+                            onClick: _cache[2] || (_cache[2] = () => handleSelectBackground(customBackground.value, true))
+                          }, [
+                            customBackgroundChecked.value ? (openBlock(), createBlock(_component_CheckOutlined, { key: 0 })) : createCommentVNode("", true)
+                          ], 4),
+                          withDirectives(createElementVNode("input", {
+                            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => customBackground.value = $event),
+                            type: "text",
+                            onBlur: handleCustomBackgroundChange
+                          }, null, 544), [
+                            [vModelText, customBackground.value]
+                          ])
+                        ])
+                      ])) : createCommentVNode("", true),
+                      __props.showColor && supportColor.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
+                        _cache[8] || (_cache[8] = createElementVNode("div", { class: "color__title" }, "图标色", -1)),
+                        createElementVNode("div", _hoisted_15, [
+                          (openBlock(), createElementBlock(Fragment, null, renderList(ICON_COLOR, (colorItem) => {
+                            return createElementVNode("span", {
+                              key: colorItem,
+                              class: "color__item",
+                              style: normalizeStyle({ backgroundColor: colorItem }),
+                              onClick: () => handleSelectColor(colorItem)
+                            }, [
+                              __props.color === colorItem ? (openBlock(), createBlock(_component_CheckOutlined, { key: 0 })) : createCommentVNode("", true)
+                            ], 12, _hoisted_16);
+                          }), 64))
+                        ]),
+                        createElementVNode("div", _hoisted_17, [
+                          createElementVNode("div", {
+                            class: "color__preview",
+                            style: normalizeStyle({
+                              "--custom-bg": customColor.value
+                            }),
+                            onClick: _cache[4] || (_cache[4] = () => handleSelectColor(customColor.value, true))
+                          }, [
+                            customColorChecked.value ? (openBlock(), createBlock(_component_CheckOutlined, { key: 0 })) : createCommentVNode("", true)
+                          ], 4),
+                          withDirectives(createElementVNode("input", {
+                            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => customColor.value = $event),
+                            type: "text",
+                            onBlur: handleCustomColorChange
+                          }, null, 544), [
+                            [vModelText, customColor.value]
+                          ])
+                        ])
+                      ])) : createCommentVNode("", true)
+                    ], 64)) : (openBlock(), createElementBlock("div", _hoisted_18, [
+                      createVNode(_component_a_empty, {
+                        image: unref(Empty).PRESENTED_IMAGE_SIMPLE,
+                        description: null
+                      }, null, 8, ["image"])
+                    ]))
+                  ])
+                ])
+              ]),
+              _: 1
+            }, 8, ["spinning"])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["icon-picker-next__trigger cursor-pointer", {
+                "icon-picker-next--selected": __props.value
+              }]),
+              style: normalizeStyle({
+                "--background": __props.background || unref(themeSetting).themeColor
+              })
+            }, [
+              __props.value ? (openBlock(), createBlock(IconNext, {
+                key: 0,
+                value: __props.value,
+                size: __props.size,
+                color: __props.color
+              }, null, 8, ["value", "size", "color"])) : createCommentVNode("", true),
+              _cache[9] || (_cache[9] = createElementVNode("div", null, [
+                createElementVNode("i", { class: "iconfont icon-bianji" })
+              ], -1))
+            ], 6)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/icon-next/src/IconNextPicker.vue3.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './IconNextPicker.vue2.mjs';
+import './IconNextPicker.css';/* empty css                    */
+
+
+
+export { _sfc_main as default };

package/es/components/icon-next/types/index.d.ts

@@ -0,0 +1,17 @@
+export interface ICategory {
+    id: string;
+    name: string;
+    icons?: {
+        id: string;
+        name: string;
+        _filter_: string[];
+    }[];
+    children?: ICategory[];
+}
+export declare enum IconNamespaceEnum {
+    Preset = "icon-preset",
+    IconPark = "icon-park",
+    Asset = "icon-assert",
+    Platform = "icon-platform",
+    GctIconFont = "gct-iconfont"
+}

package/es/components/icon-next/types/index.mjs

@@ -0,0 +1,10 @@
+var IconNamespaceEnum = /* @__PURE__ */ ((IconNamespaceEnum2) => {
+  IconNamespaceEnum2["Preset"] = "icon-preset";
+  IconNamespaceEnum2["IconPark"] = "icon-park";
+  IconNamespaceEnum2["Asset"] = "icon-assert";
+  IconNamespaceEnum2["Platform"] = "icon-platform";
+  IconNamespaceEnum2["GctIconFont"] = "gct-iconfont";
+  return IconNamespaceEnum2;
+})(IconNamespaceEnum || {});
+
+export { IconNamespaceEnum };

package/es/components/index.d.ts

@@ -8,9 +8,6 @@ import { default as DoubleInput } from './double-input/double-input.vue';
 import { default as CopyModuleKey } from './copy-module-key/copy-module-key.vue';
 export { SvgIcon, AssetsSvgIcon, BaseButton, BasicButton, WuJieContainer, DoubleInput, CopyModuleKey, };
 export { CodeEditor } from './code-editor/code-editor';
-export { FlexContainer } from './layout/flex-container/flex-container';
-export { FlexItem } from './layout/flex-item/flex-item';
-export { GridContainer } from './layout/grid-container/grid-container';
 export { ViewContainer } from './layout/view-container/view-container';
 declare const _default: {
     install(app: App): void;

package/es/components/index.mjs

@@ -1,5 +1,5 @@
 import _sfc_main from './svg-icon/svg-icon.vue.mjs';
-import './layout/view-container/view-container.css';import './layout/flex-container/flex-container.css';import './code-editor/code-editor.css';import './copy-module-key/copy-module-key.css';import './basic-button/basic-button.css';import './base-button/base-button.css';import './svg-icon/svg-icon.css';/* empty css                        */
+import './layout/view-container/view-container.css';import './code-editor/code-editor.css';import './icon-next/src/IconNextPicker.css';import './copy-module-key/copy-module-key.css';import './basic-button/basic-button.css';import './base-button/base-button.css';import './svg-icon/svg-icon.css';/* empty css                        */
 import { AssetsSvgIcon } from './assets-svg-icon/assets-svg-icon.mjs';
 import 'vue';
 import 'ant-design-vue';
@@ -10,16 +10,24 @@ import '@gct-paas/core';
 import { WuJieContainer } from './wujie-container/wujie-container.mjs';
 import 'bignumber.js';
 /* empty css                                      */
+import '@gct-paas/platform-icons';
+import IconNext from './icon-next/src/IconNext.vue2.mjs';
+import _sfc_main$1 from './icon-next/src/IconNextPicker.vue2.mjs';
+/* empty css                                  */
 import '@monaco-editor/loader';
 /* empty css                              */
 /* empty css                                           */
-/* empty css                                           */
 
 const Comps = {
   install(app) {
     app.component(AssetsSvgIcon.name, AssetsSvgIcon);
     app.component(_sfc_main.name, _sfc_main);
     app.component(WuJieContainer.name, WuJieContainer);
+    app.component(IconNext.name || IconNext.__name, IconNext);
+    app.component(
+      _sfc_main$1.name || _sfc_main$1.__name,
+      _sfc_main$1
+    );
   }
 };
 

package/es/components/svg-icon/svg-icon.vue.d.ts

@@ -34,7 +34,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     size: string | number;
-    spin: boolean;
     prefix: string;
+    spin: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
 export default _default;

package/es/create-app-vue.mjs

@@ -1,8 +1,11 @@
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import 'overlayscrollbars/overlayscrollbars.css';
 import Comps from './components/index.mjs';
 import * as Icons from '@ant-design/icons-vue';
 import { setupDirectives } from './directives/index.mjs';
 import ColorPicker from './modules/color-picker/src/ColorPicker.vue.mjs';
+import GctForm from './modules/gct-form/index.mjs';
+import GctTable from './modules/gct-table/index.mjs';
 
 async function coreWebCreateAppVue(app) {
   setupDirectives(app);
@@ -12,6 +15,8 @@ async function coreWebCreateAppVue(app) {
   });
   app.component(ColorPicker.name, ColorPicker);
   app.component(OverlayScrollbarsComponent.__name, OverlayScrollbarsComponent);
+  app.use(GctForm);
+  app.use(GctTable);
 }
 
 export { coreWebCreateAppVue };

package/es/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useLocale } from './useLocale';
 export { useTheme } from './useTheme';
 export { UseDragByLine } from './useDragLine';
+export { useDesign } from './useDesign';

package/es/hooks/useDesign.d.ts

@@ -0,0 +1,4 @@
+export declare function useDesign(scope: string): {
+    prefixCls: string;
+    prefixVar: any;
+};

package/es/hooks/useDesign.mjs

@@ -0,0 +1,11 @@
+function useDesign(scope) {
+  const values = { prefixCls: "gct" };
+  return {
+    // prefixCls: computed(() => `${values.prefixCls}-${scope}`),
+    prefixCls: `${values.prefixCls}-${scope}`,
+    prefixVar: values.prefixCls
+    // style,
+  };
+}
+
+export { useDesign };

package/es/index.d.ts

@@ -1,8 +1,11 @@
 export * from './hooks';
 export * from './utils';
 export * from './modules/code-editor';
+export * from './modules/color-picker';
 export * from './modules/formula-editor';
 export * from './modules/gct-dnd';
+export * from './modules/gct-form';
+export * from './modules/gct-table';
 export * from './modules/global-modal';
 export * from './components';
 export { coreWebCreateAppVue } from './create-app-vue';