@vtj/materials 0.10.1-alpha.6 → 0.10.1

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

@@ -0,0 +1,59 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniPagination',
+  label: '分页器',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'prevText',
+      title: '左侧按钮文字',
+      defaultValue: '上一页',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'nextText',
+      title: '右侧按钮文字',
+      defaultValue: '下一页',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'modelValue',
+      title: '当前页',
+      defaultValue: 1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'current',
+      title: '当前页, 优先级高于 value',
+      defaultValue: 1,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'total',
+      title: '数据总量',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'pageSize',
+      title: '每页数据量',
+      defaultValue: 10,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'showIcon',
+      title: '是否以 icon 形式展示按钮',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['change'],
+  snippet: {
+    props: {
+      total: 50
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,206 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'UniPopup',
+    label: '弹出层',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'animation',
+        title: '是否开启动画',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'type',
+        title: '弹出方式',
+        defaultValue: 'center',
+        setters: 'SelectSetter',
+        options: [
+          'top',
+          'center',
+          'bottom',
+          'left',
+          'right',
+          'message',
+          'dialog',
+          'share'
+        ]
+      },
+      {
+        name: 'mask-click',
+        title: '蒙版点击是否关闭弹窗',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'is-mask-click',
+        title: '蒙版点击是否关闭弹窗',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'mask-background-color',
+        title: '蒙版颜色，建议使用 rgba 颜色值',
+        defaultValue: 'rgba(0,0,0,0.4)',
+        setters: ['ColorSetter', 'StringSetter']
+      },
+      {
+        name: 'background-color',
+        title: '主窗口背景色',
+        defaultValue: 'none',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'borderRadius',
+        title: '设置圆角',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'safe-area',
+        title: '是否适配底部安全区',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['change', 'maskClick'],
+    snippet: {}
+  },
+  {
+    name: 'UniPopupMessage',
+    label: '提示信息',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'type',
+        title: '消息提示主题',
+        defaultValue: 'success',
+        setters: 'SelectSetter',
+        options: ['success', 'warn', 'error', 'info']
+      },
+      {
+        name: 'message',
+        title: '消息提示文字',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'duration',
+        title:
+          '消息显示时间，超过显示时间组件自动关闭，设置为0 将不会关闭，需手动调用 close 方法关闭',
+        defaultValue: 3000,
+        setters: 'NumberSetter'
+      }
+    ],
+    slots: ['default'],
+    snippet: {}
+  },
+  {
+    name: 'UniPopupDialog',
+    label: '对话框',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'type',
+        title: '对话框标题主题',
+        defaultValue: 'success',
+        setters: 'SelectSetter',
+        options: ['success', 'warn', 'info', 'error']
+      },
+      {
+        name: 'mode',
+        title: '对话框模式',
+        defaultValue: 'base',
+        setters: 'SelectSetter',
+        options: ['base', 'input']
+      },
+      {
+        name: 'title',
+        title: '对话框标题',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'content',
+        title: '对话框内容，base模式下生效',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'confirmText',
+        title: '定义确定按钮文本',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'cancelText',
+        title: '定义取消按钮文本',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'maxlength',
+        title: '限制输入框字数（当mode="input"时生效）',
+        defaultValue: '',
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'showClose',
+        title: '是否显示取消按钮',
+        defaultValue: '',
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'modelValue',
+        title: '输入框值',
+        defaultValue: '',
+        setters: ['StringSetter', 'NumberSetter']
+      },
+      {
+        name: 'placeholder',
+        title: '输入框提示文字，input模式下生效',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'borderRadius',
+        title: '四周圆角值（左上、右上、右下、左下）',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'before-close',
+        title: '是否拦截按钮事件',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['close', 'confirm', 'update:modelValue'],
+    slots: ['default'],
+    snippet: {}
+  },
+  {
+    name: 'UniPopupShare',
+    label: '分享示例',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'title',
+        title: '分享弹窗标题',
+        defaultValue: '',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'before-close',
+        title: '是否拦截按钮事件',
+        defaultValue: false,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['select']
+  }
+];
+
+export default desc;

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

@@ -0,0 +1,89 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniRate',
+  label: '评分',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'modelValue',
+      title: '当前评分',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'color',
+      title: '未选中状态的星星颜色',
+      defaultValue: '	#ececec',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'activeColor',
+      title: '选中状态的星星颜色',
+      defaultValue: '#ffca3e',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'disabledColor',
+      title: '禁用状态的星星颜色',
+      defaultValue: '#c0c0c0',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'size',
+      title: '星星的大小',
+      defaultValue: '24',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'max',
+      title: '最大评分评分数量，目前一分一颗星',
+      defaultValue: 5,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'margin',
+      title: '星星的间距，单位 px',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'isFill',
+      title: '星星的类型，是否为实心类型',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否为禁用状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'readonly',
+      title: '是否为只读状态',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'allowHalf',
+      title: '是否展示半星',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'touchable',
+      title: '是否支持滑动手势',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['change', 'update:modelValue'],
+  snippet: {
+    props: {
+      modelValue: 3
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,126 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription[] = [
+  {
+    name: 'UniRow',
+    label: '布局行',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'gutter',
+        title: '栅格间隔',
+        defaultValue: 0,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'width',
+        title:
+          'nvue 中无百分比 width，使用 span 等属性时，需配置此项rpx值。此项不会影响其他平台展示效果',
+        defaultValue: '750rpx',
+        setters: ['NumberSetter', 'StringSetter']
+      }
+    ],
+    snippet: {
+      props: {
+        gutter: 20
+      },
+      children: [
+        {
+          name: 'UniCol',
+          props: {
+            span: 8,
+            style: { backgroundColor: '#d3dce6' }
+          },
+          children: [
+            {
+              name: 'View',
+              children: '布局列'
+            }
+          ]
+        },
+        {
+          name: 'UniCol',
+          props: {
+            span: 8,
+            style: { backgroundColor: '#d3dce6' }
+          },
+          children: [
+            {
+              name: 'View',
+              children: '布局列'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: 'UniCol',
+    label: '布局列',
+    categoryId: 'ext',
+    props: [
+      {
+        name: 'span',
+        title: '栅格占据的列数',
+        defaultValue: 24,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'offset',
+        title: '栅格左侧间隔格数',
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'push',
+        title: '栅格向右偏移格数',
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'pull',
+        title: '栅格向左偏移格数',
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'xs',
+        title: '屏幕宽度<768px时，要显示的栅格规则',
+        setters: ['NumberSetter', 'ObjectSetter']
+      },
+      {
+        name: 'sm',
+        title: '屏幕宽度≥768px时，要显示的栅格规则',
+        setters: ['NumberSetter', 'ObjectSetter']
+      },
+      {
+        name: 'md',
+        title: '屏幕宽度≥992px时，要显示的栅格规则',
+        setters: ['NumberSetter', 'ObjectSetter']
+      },
+      {
+        name: 'lg',
+        title: '屏幕宽度≥1200px时，要显示的栅格规则',
+        setters: ['NumberSetter', 'ObjectSetter']
+      },
+      {
+        name: 'xl',
+        title: '屏幕宽度≥1920px时，要显示的栅格规则',
+        setters: ['NumberSetter', 'ObjectSetter']
+      }
+    ],
+    snippet: {
+      props: {
+        span: 4
+      },
+      children: [
+        {
+          name: 'View',
+          props: {
+            style: { backgroundColor: '#d3dce6' }
+          },
+          children: '布局列'
+        }
+      ]
+    }
+  }
+];
+
+export default desc;

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

@@ -0,0 +1,84 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniSearchBar',
+  label: '搜索栏',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'modelValue',
+      title: '搜索栏绑定值',
+      defaultValue: '',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'placeholder',
+      title: '搜索栏Placeholder',
+      defaultValue: '搜索',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'radius',
+      title: '搜索栏圆角，单位px',
+      defaultValue: 10,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'clearButton',
+      title: '是否显示清除按钮',
+      defaultValue: 'auto',
+      setters: 'SelectSetter',
+      options: ['always', 'auto', 'none']
+    },
+    {
+      name: 'cancelButton',
+      title: '是否显示取消按钮',
+      defaultValue: 'auto',
+      setters: 'SelectSetter',
+      options: ['always', 'auto', 'none']
+    },
+    {
+      name: 'cancelText',
+      title: '取消按钮的文字',
+      defaultValue: '取消',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'bgColor',
+      title: '输入框背景颜色',
+      defaultValue: '#F8F8F8',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'textColor',
+      title: '输入时文字颜色',
+      defaultValue: '#F8F8F8',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'maxlength',
+      title: '输入最大长度',
+      defaultValue: 100,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'focus',
+      title: '自动获取焦点',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: [
+    'confirm',
+    'input',
+    'cancel',
+    'clear',
+    'focus',
+    'blur',
+    'update:modelValue'
+  ],
+  slots: ['searchIcon', 'clearIcon'],
+  snippet: {}
+};
+
+export default desc;

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

@@ -0,0 +1,68 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniSection',
+  label: '标题栏',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'type',
+      title: '装饰类型',
+      defaultValue: '',
+      setters: 'SelectSetter',
+      options: ['line', 'circle', 'square']
+    },
+    {
+      name: 'title',
+      title: '主标题',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'titleFontSize',
+      title: '主标题字体大小',
+      defaultValue: '14px',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'titleColor',
+      title: '主标题字体颜色',
+      defaultValue: '#333',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'subTitle',
+      title: '副标题',
+      defaultValue: '',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'subTitleFontSize',
+      title: '副标题字体大小',
+      defaultValue: '12px',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'subTitleColor',
+      title: '副标题字体颜色',
+      defaultValue: '#999',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'padding',
+      title:
+        '默认插槽容器的 padding 值，传入类型为 Boolean 时，设置为 10px 或 0',
+      defaultValue: false,
+      setters: ['BooleanSetter', 'StringSetter']
+    }
+  ],
+  events: ['click'],
+  snippet: {
+    props: {
+      title: '基础用法',
+      subTitle: '副标题'
+    }
+  }
+};
+
+export default desc;

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

@@ -0,0 +1,48 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'UniSegmentedControl',
+  label: '分段器',
+  categoryId: 'ext',
+  props: [
+    {
+      name: 'current',
+      title: '当前选中的tab索引值，从0计数',
+      defaultValue: 0,
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'styleType',
+      title: '分段器样式类型',
+      defaultValue: 'button',
+      setters: 'SelectSetter',
+      options: ['button', 'text']
+    },
+    {
+      name: 'activeColor',
+      title: '选中的标签背景色与边框颜色',
+      defaultValue: '#007aff',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'inActiveColor',
+      title: '未激活时的颜色',
+      defaultValue: 'transparent',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'values',
+      title: '选项数组',
+      defaultValue: '',
+      setters: 'ArraySetter'
+    }
+  ],
+  events: ['clickItem'],
+  snippet: {
+    props: {
+      values: ['选项卡1', '选项卡2', '选项卡3']
+    }
+  }
+};
+
+export default desc;