@vtj/materials 0.10.1-alpha.6 → 0.10.1

package/src/uni-ui/components/steps.ts

@@ -0,0 +1,55 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniSteps',
+  label: '步骤条',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'active',
+      title: '当前步骤',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'direction',
+      title: '排列方向',
+      defaultValue: 'row',
+      setters: 'SelectSetter',
+      options: ['row', 'column']
+    },
+    {
+      name: 'active-color',
+      title: '选中状态的颜色',
+      defaultValue: '#1aad19',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'options',
+      title: '数据源',
+      setters: 'ArraySetter'
+    }
+  ],
+  events: [],
+  snippet: {
+    props: {
+      active: 1,
+      options: [
+        {
+          title: '事件一'
+        },
+        {
+          title: '事件二'
+        },
+        {
+          title: '事件三'
+        },
+        {
+          title: '事件四'
+        }
+      ]
+    }
+  }
+};
+
+export default desc;

package/src/uni-ui/components/swipeAction.ts

@@ -0,0 +1,133 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'UniSwipeAction',
+    label: '滑动操作',
+    categoryId: 'ext',
+    snippet: {
+      children: [
+        {
+          name: 'UniSwipeActionItem',
+          props: {
+            leftOptions: [
+              {
+                text: '取消',
+                style: {
+                  backgroundColor: '#007aff'
+                }
+              },
+              {
+                text: '确认',
+                style: {
+                  backgroundColor: '#F56C6C'
+                }
+              }
+            ],
+            threshold: '0',
+            rightOptions: [
+              {
+                text: '取消置顶'
+              }
+            ]
+          },
+          children: [
+            {
+              name: 'View',
+              children: [{ name: 'Text', children: '使用数据填充' }]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'UniSwipeActionItem',
+    label: '滑动操作项',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'show',
+        title: '开启关闭组件',
+        defaultValue: 'none',
+        setters: 'SelectSetter',
+        options: ['left', 'right', 'none']
+      },
+      {
+        name: 'threshold',
+        title: '滑动阈值',
+        defaultValue: 20,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'disabled',
+        title: '是否禁止滑动',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'autoClose',
+        title: '其他组件开启的时候，当前组件是否自动关闭',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'left-options',
+        title: '左侧选项内容及样式',
+        defaultValue: {
+          text: '按钮的文字',
+          style: {
+            backgroundColor: '#C7C6CD',
+            color: '#FFFFFF',
+            fontSize: '14px'
+          }
+        },
+        setters: ['ArraySetter', 'ObjectSetter']
+      },
+      {
+        name: 'right-options',
+        title: '右侧选项内容及样式',
+        defaultValue: {
+          text: '按钮的文字',
+          style: {
+            backgroundColor: '#C7C6CD',
+            color: '#FFFFFF',
+            fontSize: '14px'
+          }
+        },
+        setters: ['ArraySetter', 'ObjectSetter']
+      }
+    ],
+    events: ['click', 'change'],
+    slots: ['default', 'left', 'right'],
+    snippet: {
+      props: {
+        leftOptions: [
+          {
+            text: '取消',
+            style: {
+              backgroundColor: '#007aff'
+            }
+          },
+          {
+            text: '确认',
+            style: {
+              backgroundColor: '#F56C6C'
+            }
+          }
+        ],
+        threshold: '0',
+        rightOptions: [
+          {
+            text: '取消置顶'
+          }
+        ]
+      },
+      children: [
+        { name: 'View', children: [{ name: 'Text', children: '使用数据填充' }] }
+      ]
+    }
+  }
+];
+
+export default desc;

package/src/uni-ui/components/swiperDot.ts

@@ -0,0 +1,114 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniSwipeDot',
+  label: '轮播图指示点',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'current',
+      title: '当前指示点索引',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'mode',
+      title: '指示点的类型',
+      defaultValue: 'default',
+      setters: 'SelectSetter',
+      options: ['default', 'round', 'nav', 'indexes']
+    },
+    {
+      name: 'field',
+      title: 'mode 为 nav 时，显示的内容字段（mode = nav 时必填）',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'info',
+      title: '轮播图的数据，通过数组长度决定指示点个数',
+      defaultValue: '',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'dotsStyles',
+      title: '指示点样式',
+      defaultValue: '',
+      setters: 'ObjectSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      info: [
+        {
+          colorClass: 'uni-bg-red',
+          url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+          content: '内容 A'
+        },
+        {
+          colorClass: 'uni-bg-green',
+          url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+          content: '内容 B'
+        },
+        {
+          colorClass: 'uni-bg-blue',
+          url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+          content: '内容 C'
+        }
+      ],
+      dotsStyles: {
+        backgroundColor: 'rgba(255, 90, 95,0.3)',
+        border: '1px rgba(255, 90, 95,0.3) solid',
+        color: '#fff',
+        selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
+        selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
+      },
+      current: 0,
+      mode: 'default'
+    },
+    children: [
+      {
+        name: 'Swiper',
+        props: {
+          current: 0
+        },
+        children: [
+          {
+            name: 'SwiperItem',
+            children: [
+              {
+                name: 'View',
+                children: [
+                  {
+                    name: 'Text',
+                    props: {
+                      style: {
+                        color: '#fff',
+                        fontSize: '32px'
+                      }
+                    },
+                    children: {
+                      type: 'JSExpression',
+                      value: 'this.context.item.name'
+                    }
+                  }
+                ]
+              }
+            ],
+            directives: [
+              {
+                name: 'vFor',
+                value: {
+                  type: 'JSExpression',
+                  value: '4'
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default desc;

package/src/uni-ui/components/table.ts

@@ -0,0 +1,132 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'UniTable',
+    label: '表格',
+    childIncludes: ['UniTr'],
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'border',
+        title: '是否带有纵向边框',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'stripe',
+        title: '是否显示斑马线样式',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'type',
+        title: '值为type="selection" 时开启多选',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'emptyText',
+        title: '空数据时显示的文本内容',
+        defaultValue: '没有更多数据',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'loading',
+        title: '显示加载中',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['selection-change'],
+    snippet: {
+      props: {
+        border: true,
+        stripe: true,
+        emptyText: '暂无更多数据'
+      },
+      children: [
+        {
+          name: 'UniTr',
+          children: [
+            { name: 'UniTh', props: { align: 'center' }, children: '日期' },
+            { name: 'UniTh', props: { align: 'center' }, children: '姓名' },
+            { name: 'UniTh', props: { align: 'center' }, children: '地址' }
+          ]
+        },
+        {
+          name: 'UniTr',
+          children: [
+            { name: 'UniTd', children: '2020-10-20' },
+            { name: 'UniTd', children: 'Jason' },
+            { name: 'UniTd', children: '北京市海淀区' }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'UniTr',
+    label: '表格行',
+    childIncludes: ['UniTh', 'UniTd'],
+    categoryId: 'ext',
+    props: [],
+    snippet: {}
+  },
+  {
+    name: 'UniTh',
+    label: '表格头',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'width',
+        title: '单元格宽度',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'align',
+        title: '表头对齐方式',
+        defaultValue: 'left',
+        setters: 'SelectSetter',
+        options: ['left', 'center', 'right']
+      },
+      {
+        name: 'filter-type',
+        title: '筛选类型',
+        setters: 'SelectSetter',
+        options: ['search', 'select', 'range', 'date']
+      },
+      {
+        name: 'filter-data',
+        title: '筛选数据',
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'sortable',
+        title: '是否启用排序',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['sort-change', 'filter-change'],
+    snippet: {}
+  },
+  {
+    name: 'UniTd',
+    label: '单元格',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'align',
+        title: '表头对齐方式',
+        defaultValue: 'left',
+        setters: 'SelectSetter',
+        options: ['left', 'center', 'right']
+      }
+    ],
+    snippet: {}
+  }
+];
+
+export default desc;

package/src/uni-ui/components/tag.ts

@@ -0,0 +1,56 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniTag',
+  label: '标签',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'text',
+      title: '标签内容',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'size',
+      title: '大小尺寸',
+      defaultValue: 'normal',
+      setters: 'SelectSetter',
+      options: ['normal', 'small']
+    },
+    {
+      name: 'type',
+      title: '颜色类型',
+      defaultValue: 'default',
+      setters: 'SelectSetter',
+      options: ['default', 'primary', 'success', 'warning', 'error', 'royal']
+    },
+    {
+      name: 'disabled',
+      title: '是否为禁用状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'inverted',
+      title: '是否无需背景颜色（空心标签）',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'circle',
+      title: '是否为圆角',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['click'],
+  snippet: {
+    props: {
+      text: '标签',
+      type: 'royal'
+    }
+  }
+};
+
+export default desc;

package/src/uni-ui/components/title.ts

@@ -0,0 +1,49 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniTitle',
+  label: '章节标题',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'type',
+      title: '标题类型',
+      defaultValue: '',
+      setters: 'SelectSetter',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5']
+    },
+    {
+      name: 'title',
+      title: '章节标题内容',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'align',
+      title: '对齐方式',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right']
+    },
+    {
+      name: 'color',
+      title: '字体颜色',
+      defaultValue: '',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'stat',
+      title: '是否开启统计功能呢',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      type: 'h1',
+      title: 'h1 一级标题',
+      color: '#027fff'
+    }
+  }
+};
+
+export default desc;

package/src/uni-ui/components/tooltip.ts

@@ -0,0 +1,32 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniTooltip',
+  label: '文字提示',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'content',
+      title: '弹出层显示的内容',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'placement',
+      title: 'Tooltip 的出现位置',
+      defaultValue: 'left',
+      setters: 'SelectSetter',
+      options: ['left', 'right', 'top', 'bottom']
+    }
+  ],
+  slots: ['default', 'content'],
+  snippet: {
+    props: {
+      content: '示例文字',
+      placement: 'top'
+    },
+    children: [{ name: 'View', children: '上' }]
+  }
+};
+
+export default desc;

package/src/uni-ui/components/transition.ts

@@ -0,0 +1,49 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniTransition',
+  label: '过渡动画',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'show',
+      title: '控制组件显示或隐藏',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'mode-class',
+      title: '内置过渡动画类型',
+      defaultValue: '',
+      setters: ['ArraySetter', 'StringSetter']
+    },
+    {
+      name: 'custom-class',
+      title: '自定义类名',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'duration',
+      title: '过渡动画持续时间',
+      defaultValue: 30,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'styles',
+      title: '组件样式',
+      defaultValue: '',
+      setters: 'ObjectSetter'
+    }
+  ],
+  events: ['click', 'change'],
+  snippet: {
+    props: {
+      'mode-class': 'fade',
+      styles: { width: '100px', height: '100px', backgroundColor: 'red' },
+      show: 'show'
+    }
+  }
+};
+
+export default desc;