@vtj/materials 0.10.1-alpha.6 → 0.10.1

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

@@ -0,0 +1,127 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniFilePicker',
+  label: '文件选择上传',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'modelValue',
+      title: '组件数据，通常用来回显',
+      setters: ['ArraySetter', 'ObjectSetter']
+    },
+    {
+      name: 'disabled',
+      title: '组件禁用',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '组件只读，不可选择，不显示进度，不显示删除按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'return-type',
+      title: '限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖',
+      defaultValue: 'array',
+      setters: 'SelectSetter',
+      options: ['array', 'object']
+    },
+    {
+      name: 'disable-preview',
+      title: '用图片预览，仅 mode:grid生效',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'del-icon',
+      title: '是否显示删除按钮',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'auto-upload',
+      title: '是否自动上传，值为false则只触发@select,可自行上传',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'limit',
+      title: '最大选择个数 ，h5 会自动忽略多选的部分',
+      defaultValue: 9,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'title	',
+      title: '组件标题，右侧显示上传计数',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'mode',
+      title: '选择文件后的文件列表样式',
+      defaultValue: 'list',
+      setters: 'SelectSetter',
+      options: ['list', 'grid']
+    },
+    {
+      name: 'file-mediatype',
+      title: '选择文件类型,all 只支持 H5 和微信小程序平台',
+      defaultValue: 'image',
+      setters: 'SelectSetter',
+      options: ['image', 'video', 'all']
+    },
+    {
+      name: 'file-extname',
+      title: '选择文件后缀，字符串的情况下需要用逗号分隔',
+      defaultValue: '',
+      setters: ['ArraySetter', 'StringSetter']
+    },
+    {
+      name: 'list-styles',
+      title: 'mode:list 时的样式',
+      defaultValue: '',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'image-styles',
+      title: 'mode:grid 时的样式',
+      defaultValue: '',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'sizeType',
+      title: 'original 原图，compressed 压缩图，默认二者都有',
+      defaultValue: ['original', 'compressed'],
+      setters: 'SelectSetter',
+      options: [
+        { label: 'default', value: ['original', 'compressed'] },
+        { label: 'original', value: 'original' },
+        { label: 'compressed', value: 'compressed' }
+      ]
+    },
+    {
+      name: 'sourceType',
+      title: 'album 从相册选图，camera 使用相机，默认二者都有',
+      defaultValue: ['album', 'camera'],
+      setters: 'SelectSetter',
+      options: [
+        { label: 'default', value: ['album', 'camera'] },
+        { label: 'album', value: 'album' },
+        { label: 'camera', value: 'camera' }
+      ]
+    }
+  ],
+  events: ['select', 'progress', 'success', 'fail', 'delete'],
+  slots: ['default'],
+  snippet: {
+    props: {
+      limit: '9',
+      title: '最多选择9张图片'
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,209 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'UniForms',
+    label: '表单',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'mode',
+        title: '表单数据',
+        defaultValue: '',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'rules',
+        title: '表单校验规则',
+        defaultValue: '',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'validateTrigger',
+        title: '表单校验时机,blur仅在 uni-easyinput 中生效	',
+        defaultValue: 'submit',
+        setters: 'SelectSetter',
+        options: ['bind', 'submit', 'blur']
+      },
+      {
+        name: 'label-position',
+        title: 'label 位置',
+        defaultValue: 'left',
+        setters: 'SelectSetter',
+        options: ['left', 'top']
+      },
+      {
+        name: 'label-width',
+        title: 'label 宽度，单位 px',
+        defaultValue: 75,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'label-align',
+        title: 'label 居中方式',
+        defaultValue: 'left',
+        setters: 'SelectSetter',
+        options: ['left', 'center', 'right']
+      },
+      {
+        name: 'err-show-type',
+        title: '表单错误信息提示方式',
+        defaultValue: 'undertext',
+        setters: 'SelectSetter',
+        options: ['undertext', 'toast', 'modal']
+      },
+      {
+        name: 'border',
+        title: '是否显示分格线',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'value',
+        title: '表单数据，兼容vue2',
+        defaultValue: '',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'modelValue',
+        title: '表单数据，兼容vue3',
+        defaultValue: '',
+        setters: 'ObjectSetter'
+      }
+    ],
+    events: ['validate', 'update:modelValue'],
+    snippet: {
+      props: {
+        modelValue: {
+          name: '',
+          age: ''
+        }
+      },
+      children: [
+        {
+          name: 'UniFormsItem',
+          props: {
+            label: '姓名',
+            required: true
+          },
+          children: [
+            {
+              name: 'UniEasyinput',
+              props: {
+                placeholder: '请输入姓名'
+              }
+            }
+          ]
+        },
+        {
+          name: 'UniFormsItem',
+          props: {
+            label: '年龄',
+            required: true
+          },
+          children: [
+            {
+              name: 'UniEasyinput',
+              props: {
+                placeholder: '请输入年龄'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'UniFormsItem',
+    label: '表单项',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'name',
+        title: '表单域的属性名，在使用校验规则时必填',
+        defaultValue: '',
+        setters: ['StringSetter', 'ArraySetter']
+      },
+      {
+        name: 'rules',
+        title: '表单校验规则',
+        defaultValue: '',
+        setters: 'ObjectSetter'
+      },
+      {
+        name: 'required',
+        title: 'label 右边显示红色"*"号，样式显示不会对校验规则产生效果',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'label',
+        title: '输入框左边的文字提示',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'label-width',
+        title: 'label的宽度，单位px',
+        defaultValue: 70,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'error-message',
+        title: '显示的错误提示内容，如果为空字符串或者false，则不显示错误信息',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'label-align',
+        title: 'label的文字对齐方式',
+        defaultValue: 'left',
+        setters: 'SelectSetter',
+        options: ['left', 'center', 'right']
+      },
+      {
+        name: 'label-position',
+        title: 'label的文字的位置',
+        defaultValue: 'left',
+        setters: 'SelectSetter',
+        options: ['top', 'left']
+      },
+      {
+        name: 'validateTrigger',
+        title: '表单校验时机',
+        defaultValue: 'submit',
+        setters: 'SelectSetter',
+        options: ['bind', 'submit']
+      },
+      {
+        name: 'left-icon',
+        title: 'label左边的图标，限uni-ui的图标名称',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'icon-color',
+        title: '左边通过icon配置的图标的颜色',
+        defaultValue: '#606266',
+        setters: 'ColorSetter'
+      }
+    ],
+    slots: ['default', 'label'],
+    snippet: {
+      props: {
+        label: '姓名',
+        required: true
+      },
+      children: [
+        {
+          name: 'UniEasyinput',
+          props: {
+            placeholder: '请输入姓名'
+          }
+        }
+      ]
+    }
+  }
+];
+
+export default desc;

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

@@ -0,0 +1,31 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniGoodsNav',
+  label: '商品导航',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'options',
+      title: '组件参数',
+      defaultValue: '',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'buttonGroup',
+      title: '组件按钮组参数',
+      defaultValue: '',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'fill',
+      title: '按钮是否平铺',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['click', 'buttonClick'],
+  snippet: {}
+};
+
+export default desc;

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

@@ -0,0 +1,104 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'UniGrid',
+    label: '宫格',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'column',
+        title: '每列显示个数',
+        defaultValue: 3,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'borderColor',
+        title: '边框颜色',
+        defaultValue: '#d0dee5',
+        setters: 'ColorSetter'
+      },
+      {
+        name: 'showBorder',
+        title: '是否显示边框',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'square',
+        title: '是否方形显示',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'highlight',
+        title: '点击背景是否高亮',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change'],
+    snippet: {
+      props: {
+        column: '4',
+        highlight: true
+      },
+      children: [
+        {
+          name: 'UniGridItem',
+          children: [
+            {
+              name: 'View',
+              children: [
+                {
+                  name: 'UniIcons',
+                  props: { type: 'image', size: 30, color: '#777' }
+                },
+                { name: 'Text', children: '文本信息' }
+              ]
+            }
+          ],
+          directives: [
+            {
+              name: 'vFor',
+              value: {
+                type: 'JSExpression',
+                value: '4'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'UniGridItem',
+    label: '宫格项',
+    parentIncludes: ['UniGrid'],
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'index',
+        title: '子组件的唯一标识 ，点击grid会返回当前的标识',
+        defaultValue: '',
+        setters: 'NumberSetter'
+      }
+    ],
+    snippet: {
+      children: [
+        {
+          name: 'View',
+          children: [
+            {
+              name: 'UniIcons',
+              props: { type: 'image', size: 30, color: '#777' }
+            },
+            { name: 'Text', children: '文本信息' }
+          ]
+        }
+      ]
+    }
+  }
+];
+
+export default desc;

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

@@ -0,0 +1,50 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniGroup',
+  label: '分组',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'title',
+      title: '主标题',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'top',
+      title: '分组间隔',
+      defaultValue: '',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'mode',
+      title: '模式 ，card 为卡片模式',
+      defaultValue: '',
+      setters: 'SelectSetter',
+      options: ['card']
+    }
+  ],
+  snippet: {
+    props: {
+      title: '基本模式'
+    },
+    children: [
+      {
+        name: 'View',
+        children: ' 分组内容 ',
+        directives: [
+          {
+            name: 'vFor',
+            value: {
+              type: 'JSExpression',
+              value: '4'
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,47 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniIcons',
+  label: '图标',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'size',
+      title: '图标大小',
+      defaultValue: 24,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'type',
+      title: '图标图案，参考示例',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'color',
+      title: '图标颜色',
+      defaultValue: '',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'customPrefix',
+      title: '自定义图标',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'fontFamily',
+      title: '自定义图标',
+      defaultValue: '',
+      setters: 'StringSetter'
+    }
+  ],
+  events: ['click'],
+  snippet: {
+    props: {
+      type: 'home'
+    }
+  }
+};
+
+export default desc;

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

@@ -6,9 +6,97 @@ import type {
 import { version } from '../../version';
 import { setPackageName } from '../../shared';
 import badge from './badge';
+import breadcrumb from './breadcrumb';
+import calendar from './calendar';
+import card from './card';
+import collapse from './collapse';
+import combox from './combox';
+import countdown from './countdown';
+import dataCheckbox from './dataCheckbox';
+import dataPicker from './dataPicker';
+import dataSelect from './dataSelect';
+import dateformat from './dateformat';
+import datetimePicker from './datetimePicker';
+import drawer from './drawer';
+import easyinput from './easyinput';
+import fab from './fab';
+import fav from './fav';
+import filePicker from './filePicker';
+import forms from './forms';
+import goodsNav from './goodsNav';
+import grid from './grid';
+import group from './group';
+import icons from './icons';
+import indexedList from './indexedList';
+import link from './link';
+import list from './list';
+import loadMore from './loadMore';
+import navbar from './navbar';
+import noticeBar from './noticeBar';
+import numberbox from './numberbox';
+import pagination from './pagination';
+import popup from './popup';
+import rate from './rate';
+import row from './row';
+import searchBar from './searchBar';
+import section from './section';
+import segmentedControl from './segmentedControl';
+import steps from './steps';
+import swipeAction from './swipeAction';
+import swiperDot from './swiperDot';
+import table from './table';
+import tag from './tag';
+import title from './title';
+import tooltip from './tooltip';
+import transition from './transition';
 
 const name = '@dcloudio/uni-ui';
-const components: MaterialDescription[] = [badge].flat();
+const components: MaterialDescription[] = [
+  badge,
+  breadcrumb,
+  calendar,
+  card,
+  collapse,
+  combox,
+  countdown,
+  dataCheckbox,
+  dataPicker,
+  dataSelect,
+  dateformat,
+  datetimePicker,
+  drawer,
+  easyinput,
+  fab,
+  fav,
+  filePicker,
+  forms,
+  goodsNav,
+  grid,
+  group,
+  icons,
+  indexedList,
+  link,
+  list,
+  loadMore,
+  navbar,
+  noticeBar,
+  numberbox,
+  pagination,
+  popup,
+  rate,
+  row,
+  searchBar,
+  section,
+  segmentedControl,
+  steps,
+  swipeAction,
+  swiperDot,
+  table,
+  tag,
+  title,
+  tooltip,
+  transition
+].flat();
 
 const categories: MaterialCategory[] = [
   {