@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.8

package/es/components/material/material-module-drag-item/material-module-drag-item.css

@@ -0,0 +1,83 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-module-drag-item {
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  border: 1px solid #E8EBF0;
+  height: 34px;
+  width: 108px;
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
+.gct-material-module-drag-item__icon {
+  margin-right: 8px;
+  color: #797A7D;
+}
+
+.gct-material-module-drag-item__label {
+  font-size: 12px;
+}

package/es/components/material/material-module-drag-item/material-module-drag-item.d.ts

@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+import { IDragCollect, IMaterialData } from '../../../interface';
+export declare const MaterialModuleDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<IMaterialData>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    setDrag: (div: HTMLDivElement) => void;
+    collect: import('vue').Ref<IDragCollect, IDragCollect>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<IMaterialData>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-module-drag-item/material-module-drag-item.mjs

@@ -0,0 +1,101 @@
+import { defineComponent, createVNode, onMounted } from 'vue';
+import { useDrag } from 'vue3-dnd';
+import { useNamespace } from '@gct-paas/core';
+import { DesignViewPrefix } from '../../../constant/index.mjs';
+import 'qx-util';
+import 'lodash-es';
+import { NodeRegister } from '../../../register/node/node.register.mjs';
+import '../../../hooks/design-view/useDesigner.mjs';
+import '../../../hooks/design-view/useGlobal.mjs';
+import '../../../hooks/design-view/usePage.mjs';
+import '../../../hooks/design-view/usePageOccupy.mjs';
+import '../../../hooks/design-view/usePropEditor.mjs';
+import '../../../hooks/design-view/useScope.mjs';
+import '../../../hooks/design-view/useSelectedWidget.mjs';
+import '@gct-paas/schema';
+import '../../../hooks/design-view/useToolkit.mjs';
+import '../../../hooks/design-view/useWidget.mjs';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import './material-module-drag-item.css';/* empty css                                */
+
+const MaterialModuleDragItem = /* @__PURE__ */ defineComponent({
+  name: 'MaterialModuleDragItem',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('material-module-drag-item');
+    const c = useDesignViewController();
+    const [collect, drag, preview] = useDrag({
+      type: DesignViewPrefix.CUSTOM_HOME,
+      item: () => {
+        const provider = NodeRegister.get(props.data.type, c.store.prefix);
+        if (!provider) {
+          throw new Error(`未找到素材 ${props.data.type} 适配器`);
+        }
+        c.store.setDragging(true);
+        const data = provider.create();
+        return {
+          id: data.id,
+          data,
+          group: '',
+          index: -1,
+          mode: 'create',
+          types: [data.type]
+        };
+      },
+      collect: monitor => {
+        return {
+          canDrag: monitor.canDrag(),
+          isDragging: monitor.isDragging()
+        };
+      },
+      end: async (_, monitor) => {
+        c.store.setDragging(false);
+        const r = monitor.getDropResult();
+        if (r && r.asyncDrop) {
+          const result = await r.asyncDrop;
+          if (result && result.success) ;
+        }
+        c.dropEnd();
+      },
+      options: {
+        dropEffect: 'copy'
+      }
+    });
+    const setDrag = div => {
+      drag(div);
+    };
+    onMounted(() => {
+      if (preview) {
+        preview(getEmptyImage(), {
+          captureDraggingState: true
+        });
+      }
+    });
+    return {
+      ns,
+      setDrag,
+      collect
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": this.setDrag,
+      "class": [this.ns.b(), this.ns.is('dragging', this.collect.isDragging)]
+    }, [createVNode("div", {
+      "class": this.ns.e('icon')
+    }, [createVNode("i", {
+      "class": ['iconfont', this.data.icon]
+    }, null)]), createVNode("div", {
+      "class": this.ns.e('label')
+    }, [this.data.label])]);
+  }
+});
+
+export { MaterialModuleDragItem };

package/es/components/material/material-outline-tree/material-outline-tree.css

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-outline-tree__tree .ant-tree-treenode {
+  color: #666;
+}
+.gct-material-outline-tree__tree .ant-tree-treenode .ant-tree-switcher {
+  width: 16px;
+}
+.gct-material-outline-tree__tree .ant-tree-treenode .ant-tree-switcher .ant-tree-switcher-icon {
+  font-size: 14px;
+  vertical-align: middle;
+}
+.gct-material-outline-tree__tree .ant-tree-treenode .ant-tree-node-content-wrapper {
+  padding-left: 0;
+}
+.gct-material-outline-tree__tree .ant-tree-treenode .ant-tree-node-selected {
+  background-color: transparent;
+  color: var(--ant-primary-color);
+}

package/es/components/material/material-outline-tree/material-outline-tree.d.ts

@@ -0,0 +1 @@
+export declare const MaterialOutlineTree: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-outline-tree/material-outline-tree.mjs

@@ -0,0 +1,87 @@
+import { defineComponent, ref, watch, computed, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import '../../../hooks/design-view/useDesigner.mjs';
+import '../../../hooks/design-view/useGlobal.mjs';
+import '../../../hooks/design-view/usePage.mjs';
+import '../../../hooks/design-view/usePageOccupy.mjs';
+import '../../../hooks/design-view/usePropEditor.mjs';
+import '../../../hooks/design-view/useScope.mjs';
+import '../../../hooks/design-view/useSelectedWidget.mjs';
+import '@gct-paas/schema';
+import '../../../hooks/design-view/useToolkit.mjs';
+import '../../../hooks/design-view/useWidget.mjs';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import 'qx-util';
+import { MaterialRegister } from '../../../register/material/material.register.mjs';
+import '../../../constant/page-designer.mjs';
+import './material-outline-tree.css';/* empty css                            */
+
+const MaterialOutlineTree = /* @__PURE__ */ defineComponent({
+  name: 'MaterialOutlineTree',
+  setup() {
+    const ns = useNamespace('material-outline-tree');
+    const treeRef = ref();
+    const selectedKeys = ref([]);
+    const c = useDesignViewController();
+    watch(() => c.store.selected, () => {
+      if (c.store.selected) {
+        selectedKeys.value = [c.store.selected.id];
+      } else {
+        selectedKeys.value = [];
+      }
+    });
+    watch(selectedKeys, () => {
+      const val = selectedKeys.value[0];
+      if (val) {
+        const node = c.store.getNode(val);
+        if (node && node.id !== c.store.selected?.id) {
+          c.store.setActive(node);
+        }
+      } else {
+        c.store.setActive(null);
+      }
+    });
+    const calcDeepTree = items => {
+      const arr = [];
+      items.forEach(_ => {
+        const p = MaterialRegister.getMaterial(_.type, c.store.prefix);
+        const node = {
+          key: _.id,
+          title: _.label,
+          icon: p && p.icon ? createVNode("i", {
+            "class": `iconfont ${p.icon}`
+          }, null) : '',
+          children: []
+        };
+        const children = c.store.getChildren(_.id);
+        if (children && children.length > 0) {
+          node.children = calcDeepTree(children);
+        }
+        arr.push(node);
+      });
+      return arr;
+    };
+    const treeData = computed(() => {
+      const items = c.store.getChildren();
+      return calcDeepTree(items);
+    });
+    return () => {
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode(resolveComponent("a-tree"), {
+        "ref": treeRef,
+        "class": ns.e('tree'),
+        "selectedKeys": selectedKeys,
+        "onUpdate:selectedKeys": $event => selectedKeys = $event,
+        "treeData": treeData,
+        "blockNode": true,
+        "show-icon": true,
+        "autoExpandParent": true,
+        "default-expand-all": true
+      }, null)]);
+    };
+  }
+});
+
+export { MaterialOutlineTree };

package/es/components/material/material-tab-pane/material-tab-pane.css

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-tab-pane {
+  height: 100%;
+  overflow: hidden auto;
+}

package/es/components/material/material-tab-pane/material-tab-pane.d.ts

@@ -0,0 +1,13 @@
+export declare const MaterialTabPane: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    tabTag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    tabTag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-tab-pane/material-tab-pane.mjs

@@ -0,0 +1,26 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './material-tab-pane.css';/* empty css                        */
+
+const MaterialTabPane = /* @__PURE__ */ defineComponent({
+  name: 'MaterialTabPane',
+  props: {
+    tabTag: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    const ns = useNamespace('material-tab-pane');
+    return {
+      ns
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.$slots.default?.()]);
+  }
+});
+
+export { MaterialTabPane };

package/es/components/material/material-tabs/material-tabs.css

@@ -0,0 +1,105 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-material-tabs {
+  display: flex;
+  height: 100%;
+}
+.gct-material-tabs__item {
+  height: 74px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: #5D6474;
+}
+.gct-material-tabs__item.is-active {
+  background-color: #cdd1d6;
+  color: #000;
+}
+
+.gct-material-tabs__item-icon {
+  height: 28px;
+}
+.gct-material-tabs__item-icon .iconfont {
+  font-size: 22px;
+}
+
+.gct-material-tabs__item-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.gct-material-tabs-left {
+  flex-shrink: 0;
+  width: 48px;
+  border-radius: 0;
+  border: 2px solid #E0E3EA;
+  background-color: #E6E9EF;
+}
+
+.gct-material-tabs-right {
+  flex-grow: 1;
+}

package/es/components/material/material-tabs/material-tabs.d.ts

@@ -0,0 +1,99 @@
+export declare const MaterialTabs: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    tabs: {
+        type: {
+            (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    active: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    onChange: (e: MouseEvent, tag: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:active")[], "change" | "update:active", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    tabs: {
+        type: {
+            (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    active: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:active"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;