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

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

@@ -0,0 +1,179 @@
+export declare const MaterialContent: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    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>;
+    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>;
+    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>;
+    MaterialModule: import('vue').DefineComponent<{}, {
+        ns: import('@gct-paas/core').Namespace;
+        search: import('vue').Ref<string, string>;
+        groups: import('vue').ComputedRef<import('../../..').IMaterialGroup[]>;
+        activeKey: import('vue').Ref<string[], string[]>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+        MaterialModuleDragContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            items: {
+                type: {
+                    (arrayLength: number): import('../../..').IMaterialData[];
+                    (...items: import('../../..').IMaterialData[]): import('../../..').IMaterialData[];
+                    new (arrayLength: number): import('../../..').IMaterialData[];
+                    new (...items: import('../../..').IMaterialData[]): import('../../..').IMaterialData[];
+                    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;
+                };
+                default: () => never[];
+            };
+        }>, {
+            ns: import('@gct-paas/core').Namespace;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            items: {
+                type: {
+                    (arrayLength: number): import('../../..').IMaterialData[];
+                    (...items: import('../../..').IMaterialData[]): import('../../..').IMaterialData[];
+                    new (arrayLength: number): import('../../..').IMaterialData[];
+                    new (...items: import('../../..').IMaterialData[]): import('../../..').IMaterialData[];
+                    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;
+                };
+                default: () => never[];
+            };
+        }>> & Readonly<{}>, {
+            items: import('../../..').IMaterialData[];
+        }, {}, {
+            MaterialModuleDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+                data: {
+                    type: import('vue').PropType<import('../../..').IMaterialData>;
+                    required: true;
+                };
+            }>, {
+                ns: import('@gct-paas/core').Namespace;
+                setDrag: (div: HTMLDivElement) => void;
+                collect: import('vue').Ref<import('../../..').IDragCollect, import('../../..').IDragCollect>;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+                data: {
+                    type: import('vue').PropType<import('../../..').IMaterialData>;
+                    required: true;
+                };
+            }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-content/material-content.mjs

@@ -0,0 +1,59 @@
+import { defineComponent, ref, createVNode, resolveComponent, h } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { MaterialTabs } from '../material-tabs/material-tabs.mjs';
+import { MaterialTabPane } from '../material-tab-pane/material-tab-pane.mjs';
+import { MaterialOutlineTree } from '../material-outline-tree/material-outline-tree.mjs';
+import { MaterialModule } from '../material-module/material-module.mjs';
+import './material-content.css';/* empty css                       */
+
+const MaterialContent = /* @__PURE__ */ defineComponent({
+  name: 'MaterialContent',
+  components: {
+    MaterialTabs,
+    MaterialTabPane,
+    MaterialOutlineTree,
+    MaterialModule
+  },
+  setup() {
+    const ns = useNamespace('material-content');
+    const tabs = [{
+      id: 'outline-tree',
+      icon: 'icon-RDOliebiao',
+      label: '大纲',
+      title: '大纲',
+      component: 'MaterialOutlineTree'
+    }, {
+      id: 'component',
+      icon: 'icon-zujian',
+      label: '组件',
+      title: '页面组件',
+      default: true,
+      component: 'MaterialModule'
+    }];
+    const active = ref(tabs.find(_ => _.default).id);
+    return () => {
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode(resolveComponent("material-tabs"), {
+        "tabs": tabs,
+        "active": active,
+        "onUpdate:active": $event => active = $event
+      }, {
+        default: () => tabs.map(tab => {
+          return createVNode(MaterialTabPane, {
+            "key": tab.id,
+            "tabTag": tab.id
+          }, {
+            default: () => [createVNode("div", {
+              "class": ns.b('header')
+            }, [createVNode("span", null, [tab.title])]), createVNode("div", {
+              "class": ns.b('content')
+            }, [h(resolveComponent(tab.component))])]
+          });
+        })
+      })]);
+    };
+  }
+});
+
+export { MaterialContent };

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

@@ -0,0 +1,104 @@
+@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 {
+  height: 100%;
+  font-size: 12px;
+}
+.gct-material-module__search {
+  padding: 16px 12px;
+  border-bottom: 1px solid #E0E3EA;
+}
+
+.gct-material-module__content {
+  padding: 0 12px;
+}
+
+.gct-material-module .ant-input {
+  font-size: 12px;
+}
+.gct-material-module__search-icon {
+  cursor: pointer;
+}
+
+.gct-material-module .ant-input::placeholder {
+  font-size: 12px;
+  font-weight: 400;
+  color: #C4C4C4;
+  line-height: 18px;
+}
+.gct-material-module .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  font-size: 12px;
+  padding: 14px 3px;
+}
+.gct-material-module .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
+  margin-right: 0;
+}
+.gct-material-module .ant-collapse .ant-collapse-content {
+  padding-top: 6px;
+  padding-bottom: 14px;
+}
+.gct-material-module .ant-collapse .ant-collapse-content .ant-collapse-content-box {
+  padding: 0;
+}

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

@@ -0,0 +1,68 @@
+import { IMaterialGroup } from '../../../interface';
+/**
+ * 素材区组件模块绘制
+ */
+export declare const MaterialModule: import('vue').DefineComponent<{}, {
+    ns: import('@gct-paas/core').Namespace;
+    search: import('vue').Ref<string, string>;
+    groups: import('vue').ComputedRef<IMaterialGroup[]>;
+    activeKey: import('vue').Ref<string[], string[]>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    MaterialModuleDragContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        items: {
+            type: {
+                (arrayLength: number): import('../../..').IMaterialData[];
+                (...items: import('../../..').IMaterialData[]): import('../../..').IMaterialData[];
+                new (arrayLength: number): import('../../..').IMaterialData[];
+                new (...items: import('../../..').IMaterialData[]): import('../../..').IMaterialData[];
+                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;
+            };
+            default: () => never[];
+        };
+    }>, {
+        ns: import('@gct-paas/core').Namespace;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        items: {
+            type: {
+                (arrayLength: number): import('../../..').IMaterialData[];
+                (...items: import('../../..').IMaterialData[]): import('../../..').IMaterialData[];
+                new (arrayLength: number): import('../../..').IMaterialData[];
+                new (...items: import('../../..').IMaterialData[]): import('../../..').IMaterialData[];
+                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;
+            };
+            default: () => never[];
+        };
+    }>> & Readonly<{}>, {
+        items: import('../../..').IMaterialData[];
+    }, {}, {
+        MaterialModuleDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            data: {
+                type: import('vue').PropType<import('../../..').IMaterialData>;
+                required: true;
+            };
+        }>, {
+            ns: import('@gct-paas/core').Namespace;
+            setDrag: (div: HTMLDivElement) => void;
+            collect: import('vue').Ref<import('../../..').IDragCollect, import('../../..').IDragCollect>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            data: {
+                type: import('vue').PropType<import('../../..').IMaterialData>;
+                required: true;
+            };
+        }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,108 @@
+import { defineComponent, createVNode, resolveComponent, ref, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { MaterialModuleDragContainer } from '../material-module-drag-container/material-module-drag-container.mjs';
+import 'qx-util';
+import { MaterialRegister } from '../../../register/material/material.register.mjs';
+import '../../../constant/page-designer.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 './material-module.css';/* empty css                      */
+
+/**
+ * 素材区组件模块绘制
+ */
+const MaterialModule = /* @__PURE__ */ defineComponent({
+  name: 'MaterialModule',
+  components: {
+    MaterialModuleDragContainer
+  },
+  setup() {
+    const ns = useNamespace('material-module');
+    const c = useDesignViewController();
+    const search = ref('');
+    const items = MaterialRegister.getList(c.store.prefix).filter(_ => {
+      return _.children && _.children.length > 0;
+    });
+    const activeKey = ref(items.map(item => item.tag));
+    const groups = computed(() => {
+      const arr = [];
+      const val = search.value.trim();
+      items.forEach(item => {
+        if (item.children && item.children.length > 0) {
+          const children = item.children.filter(_ => {
+            return _.label.includes(val);
+          });
+          if (children.length > 0) {
+            arr.push({
+              ...item,
+              children
+            });
+          }
+        }
+      });
+      return arr;
+    });
+    return {
+      ns,
+      search,
+      groups,
+      activeKey
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e('search')
+    }, [createVNode(resolveComponent("a-input"), {
+      "value": this.search,
+      "onUpdate:value": $event => this.search = $event,
+      "size": "small",
+      "placeholder": "\u641C\u7D22\u540D\u79F0"
+    }, {
+      suffix: () => createVNode("span", {
+        "class": this.ns.e('search-icon')
+      }, [createVNode("i", {
+        "class": "iconfont icon-sousuo"
+      }, null)])
+    })]), createVNode("div", {
+      "class": this.ns.e('content')
+    }, [createVNode(resolveComponent("a-collapse"), {
+      "activeKey": this.activeKey,
+      "onUpdate:activeKey": $event => this.activeKey = $event,
+      "ghost": true
+    }, {
+      expandIcon: ({
+        isActive
+      }) => {
+        return createVNode("i", {
+          "class": ['iconfont', isActive ? 'icon-Down' : 'icon-right']
+        }, null);
+      },
+      default: () => {
+        return this.groups.map(_ => {
+          return createVNode(resolveComponent("a-collapse-panel"), {
+            "key": _.tag,
+            "header": _.label
+          }, {
+            default: () => [createVNode(MaterialModuleDragContainer, {
+              "items": _.children
+            }, null)]
+          });
+        });
+      }
+    })])]);
+  }
+});
+
+export { MaterialModule };

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

@@ -0,0 +1,69 @@
+@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-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}

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

@@ -0,0 +1,58 @@
+import { IMaterialData } from '../../../interface';
+export declare const MaterialModuleDragContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: {
+            (arrayLength: number): IMaterialData[];
+            (...items: IMaterialData[]): IMaterialData[];
+            new (arrayLength: number): IMaterialData[];
+            new (...items: IMaterialData[]): IMaterialData[];
+            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;
+        };
+        default: () => never[];
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: {
+            (arrayLength: number): IMaterialData[];
+            (...items: IMaterialData[]): IMaterialData[];
+            new (arrayLength: number): IMaterialData[];
+            new (...items: IMaterialData[]): IMaterialData[];
+            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;
+        };
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    items: IMaterialData[];
+}, {}, {
+    MaterialModuleDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        data: {
+            type: import('vue').PropType<IMaterialData>;
+            required: true;
+        };
+    }>, {
+        ns: import('@gct-paas/core').Namespace;
+        setDrag: (div: HTMLDivElement) => void;
+        collect: import('vue').Ref<import('../../..').IDragCollect, import('../../..').IDragCollect>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        data: {
+            type: import('vue').PropType<IMaterialData>;
+            required: true;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,32 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { MaterialModuleDragItem } from '../material-module-drag-item/material-module-drag-item.mjs';
+import './material-module-drag-container.css';/* empty css                                     */
+
+const MaterialModuleDragContainer = /* @__PURE__ */ defineComponent({
+  name: 'MaterialModuleDragContainer',
+  components: {
+    MaterialModuleDragItem
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup() {
+    const ns = useNamespace('material-module-drag-container');
+    return {
+      ns
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.items.map(item => createVNode(MaterialModuleDragItem, {
+      "data": item
+    }, null))]);
+  }
+});
+
+export { MaterialModuleDragContainer };