@dckj-npm/dc-material 0.1.15 → 0.1.17

package/lowcode/tab-container/meta.ts

@@ -0,0 +1,70 @@
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from "@alilc/lowcode-types";
+
+import props from "./props";
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: "选项卡",
+    schema: {
+      componentName: "TabContainer",
+      props: {
+        shape: "pure",
+        size: "medium",
+        excessMode: "slide",
+      },
+      children: [
+        {
+          componentName: "TabContainerItem",
+          props: {
+            title: "标签项1",
+            primaryKey: "tab-item-1",
+          },
+        },
+        {
+          componentName: "TabContainerItem",
+          props: {
+            title: "标签项2",
+            primaryKey: "tab-item-2",
+          },
+        },
+      ],
+    },
+  },
+];
+
+const TabContainerMeta: IPublicTypeComponentMetadata = {
+    "group": "低代码组件",
+    componentName: "TabContainer",
+    title: "选项卡",
+    category: "布局容器类",
+    docUrl: "",
+    screenshot:
+      "https://img.alicdn.com/imgextra/i4/O1CN01mh9LPG268B90t8DaA_!!6000000007616-55-tps-56-56.svg",
+    devMode: "proCode",
+    npm: {
+      "package": "@dckj-npm/dc-material",
+      "version": "0.1.13",
+      "exportName": "TabContainer",
+      "main": "src\\index.tsx",
+      "destructuring": true,
+      "subName": ""
+    },
+    configure: {
+      component: {
+        isContainer: true,
+        nestingRule: {
+          childWhitelist: ["TabContainerItem"],
+        },
+      },
+      props,
+      supports: {
+        style: true,
+      },
+    },
+    snippets,
+  };
+
+export default {
+  ...TabContainerMeta,
+  snippets
+};

package/lowcode/tab-container/props.ts

@@ -0,0 +1,194 @@
+export default [
+  {
+    name: 'items',
+    title: '标签项',
+    setter: {
+      componentName: 'ArraySetter',
+      props: {
+        itemSetter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'title',
+                  title: '名称',
+                  defaultValue: '标签项',
+                  important: true,
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'primaryKey',
+                  title: '项目编号',
+                  condition: () => false,
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'closeable',
+                  title: '可关闭',
+                  initialValue: false,
+                  setter: 'BoolSetter',
+                },
+                {
+                  name: 'disabled',
+                  title: '是否禁用',
+                  initialValue: false,
+                  setter: 'BoolSetter',
+                },
+              ],
+            },
+          },
+          initialValue: () => {
+            return {
+              primaryKey: String(Math.floor(Math.random() * 10000)),
+              title: '标签项',
+              closeable: false,
+              disabled: false,
+            };
+          },
+        },
+      },
+    },
+    extraProps: {
+      getValue(target) {
+        const map = target.node.children.map((child) => {
+          const primaryKey = child.getPropValue('primaryKey')
+            ? String(child.getPropValue('primaryKey'))
+            : child.id;
+          return {
+            primaryKey,
+            title: child.getPropValue('title') || '标签项',
+            closeable: child.getPropValue('closeable'),
+            disabled: child.getPropValue('disabled'),
+          };
+        });
+        return map;
+      },
+      setValue(target, value) {
+        const { node } = target;
+        const map = {};
+        if (!Array.isArray(value)) {
+          value = [];
+        }
+        value.forEach((item) => {
+          const tabitem = Object.assign({}, item);
+          map[item.primaryKey] = tabitem;
+        });
+
+        node.children.mergeChildren(
+          (child) => {
+            const primaryKey = String(child.getPropValue('primaryKey'));
+            if (Object.hasOwnProperty.call(map, primaryKey)) {
+              child.setPropValue('title', map[primaryKey].title);
+              child.setPropValue('closeable', map[primaryKey].closeable);
+              child.setPropValue('disabled', map[primaryKey].disabled);
+              delete map[primaryKey];
+              return false;
+            }
+            return true;
+          },
+          () => {
+            const items: any = [];
+            for (const primaryKey in map) {
+              if (Object.hasOwnProperty.call(map, primaryKey)) {
+                items.push({
+                  componentName: 'TabContainerItem',
+                  props: map[primaryKey],
+                });
+              }
+            }
+            return items;
+          },
+          (child1, child2) => {
+            const a = value.findIndex(
+              (item) => String(item.primaryKey) === String(child1.getPropValue('primaryKey')),
+            );
+            const b = value.findIndex(
+              (item) => String(item.primaryKey) === String(child2.getPropValue('primaryKey')),
+            );
+            return a - b;
+          },
+        );
+      },
+    },
+  },
+  {
+    name: 'shape',
+    title: '形态',
+    defaultValue: 'pure',
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          { title: '普通型', value: 'pure' },
+          { title: '包裹型', value: 'wrapped' },
+          { title: '文本型', value: 'text' },
+          { title: '胶囊型', value: 'capsule' },
+        ],
+      },
+    },
+  },
+  {
+    name: 'size',
+    title: '尺寸',
+    defaultValue: 'medium',
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          { title: '小', value: 'small' },
+          { title: '中', value: 'medium' },
+        ],
+      },
+    },
+  },
+  {
+    name: 'excessMode',
+    title: '选项卡过多时的滑动模式',
+    defaultValue: 'slide',
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          { title: '滑动', value: 'slide' },
+          { title: '下拉', value: 'dropdown' },
+        ],
+      },
+    },
+  },
+  {
+    name: 'tabPosition',
+    title: {
+      label: '导航选项卡的位置',
+      tip: '只适用于包裹型（wrapped）选项卡',
+    },
+    condition: (target) => {
+      const shape = target.getProps().getPropValue('shape');
+      return shape === 'wrapped';
+    },
+    defaultValue: 'top',
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          {
+            title: '顶部',
+            value: 'top',
+          },
+          {
+            title: '底部',
+            value: 'bottom',
+          },
+          {
+            title: '左边',
+            value: 'left',
+          },
+          {
+            title: '右边',
+            value: 'right',
+          },
+        ],
+      },
+    },
+  },
+];

package/lowcode/tab-container-item/meta.ts

@@ -0,0 +1,195 @@
+
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const TabContainerItemMeta: IPublicTypeComponentMetadata = {
+  "componentName": "TabContainerItem",
+  "title": "TabContainerItem",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@dckj-npm/dc-material",
+    "version": "0.1.13",
+    "exportName": "TabContainerItem",
+    "main": "src\\index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'title',
+            'zh-CN': '选项卡标题',
+          },
+          tip: 'title | 选项卡标题',
+        },
+        name: 'title',
+        description: '选项卡标题',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'closeable',
+            'zh-CN': '单个选项卡是否可关闭',
+          },
+          tip: 'closeable | 单个选项卡是否可关闭',
+        },
+        name: 'closeable',
+        description: '单个选项卡是否可关闭',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'disabled',
+            'zh-CN': '选项卡是否被禁用',
+          },
+          tip: 'disabled | 选项卡是否被禁用',
+        },
+        name: 'disabled',
+        description: '选项卡是否被禁用',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'prefix',
+            'zh-CN': '样式类名的品牌前缀',
+          },
+          tip: 'prefix | 样式类名的品牌前缀',
+        },
+        name: 'prefix',
+        description: '样式类名的品牌前缀',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'locale',
+            'zh-CN': '国际化文案对象，属性',
+          },
+          tip: 'locale | 国际化文案对象，属性为组件的 displayName',
+        },
+        name: 'locale',
+        description: '国际化文案对象，属性为组件的 displayName',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'pure',
+            'zh-CN': '是否开启 Pure ',
+          },
+          tip: 'pure | 是否开启 Pure Render 模式，会提高性能，但是也会带来副作用',
+        },
+        name: 'pure',
+        description: '是否开启 Pure Render 模式，会提高性能，但是也会带来副作用',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'warning',
+            'zh-CN': '是否在开发模式下显示',
+          },
+          tip: 'warning | 是否在开发模式下显示组件属性被废弃的 warning 提示',
+        },
+        name: 'warning',
+        description: '是否在开发模式下显示组件属性被废弃的 warning 提示',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'rtl',
+            'zh-CN': '是否开启 rtl 模',
+          },
+          tip: 'rtl | 是否开启 rtl 模式',
+        },
+        name: 'rtl',
+        description: '是否开启 rtl 模式',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+    ],
+    supports: {
+      events: [
+        {
+          name: 'onClick',
+        },
+        {
+          name: 'onChange',
+        },
+      ],
+      style: true,
+    },
+    component: {
+      isContainer: true,
+      disableBehaviors: '*',
+    },
+    advanced: {
+      hideSelectTools: true,
+      callbacks: {
+        onMouseDownHook: () => false,
+        onClickHook: () => false,
+      },
+    },
+  },
+};
+const snippets: IPublicTypeSnippet[] = [
+  {
+    "title": "TabContainerItem",
+    "screenshot": "",
+    "schema": {
+      "componentName": "TabContainerItem",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...TabContainerItemMeta,
+  snippets
+};

package/lowcode/tab-message/meta.ts

@@ -0,0 +1,101 @@
+
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const TabMessageMeta: IPublicTypeComponentMetadata = {
+  "componentName": "TabMessage",
+  "title": "消息列表tab",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@dckj-npm/dc-material",
+    "version": "0.1.13",
+    "exportName": "TabMessage",
+    "main": "src\\index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "selectedBGColor",
+            "zh-CN": "选中背景颜色"
+          },
+          "tip": "选中背景颜色"
+        },
+        "name": "selectedBGColor",
+        "description": "选中背景颜色",
+        "setter": {
+          "componentName": "ColorSetter",
+          "isRequired": true,
+          "initialValue": ""
+        }
+      },
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "selectedFontColor",
+            "zh-CN": "选中字体颜色"
+          },
+          "tip": "selectedFontColor | 选中字体颜色"
+        },
+        "name": "selectedFontColor",
+        "description": "选中字体颜色",
+        "setter": {
+          "componentName": "ColorSetter",
+          "isRequired": true,
+          "initialValue": ""
+        }
+      },
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "size",
+            "zh-CN": "尺寸 small |"
+          },
+          "tip": "尺寸 small | large"
+        },
+        "name": "size",
+        "description": "尺寸 small | default | large",
+        "setter": {
+          "componentName": "SelectSetter",
+          "initialValue": "small",
+          "props": {
+            "defaultValue": "small",
+            "options": [{
+              "title": "大",
+              "value": "large"
+            }, {
+              "title": "小",
+              "value": "small"
+            }]
+          }
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets: IPublicTypeSnippet[] = [
+  {
+    "title": "消息tab",
+    "screenshot": "",
+    "schema": {
+      "componentName": "TabMessage",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...TabMessageMeta,
+  snippets
+};