@vtj/materials 0.8.44 → 0.8.46

package/src/ui/grid.ts

@@ -0,0 +1,380 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'XGrid',
+  label: '表格',
+  categoryId: 'data',
+  doc: 'https://vxetable.cn/#/grid/api',
+  props: [
+    {
+      name: 'columns',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'loader',
+      title: '数据加载函数: (state) => {list, total}',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'rowSortable',
+      title: '行拖拽排序',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'columnSortable',
+      title: '列拖拽排序',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'customable',
+      title: '开启用户自定义',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'resizable',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'pager',
+      title: '开启分页功能',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'page',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'pageSize',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'pageSizes',
+      title: '每页显示个数选择器的选项设置',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'auto',
+      title: '初始执行加载函数',
+      setters: 'BooleanSetter',
+      defaultValue: true
+    },
+    {
+      name: 'virtual',
+      title: '开启虚拟滚动',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'editable',
+      title: '开启编辑模式',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'cellRenders',
+      title: '单元格渲染器',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'editRenders',
+      title: '单元格渲染器',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'filterRenders',
+      title: '过滤器渲染器',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'id',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'data',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'height',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'minHeight',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'maxHeight',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'autoResize',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'syncResize',
+      setters: ['BooleanSetter', 'StringSetter']
+    },
+    {
+      name: 'stripe',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'border',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'round',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'size',
+      setters: 'SelectSetter',
+      options: ['small', 'mini']
+    },
+    {
+      name: 'loading',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'align',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right']
+    },
+    {
+      name: 'HeaderAlign',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right']
+    },
+    {
+      name: 'FooterAlign',
+      setters: 'SelectSetter',
+      options: ['left', 'center', 'right']
+    },
+    {
+      name: 'showHeader',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'showFoter',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'footerData',
+      setters: 'ArraySetter'
+    },
+    {
+      name: 'mergeCells',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'mergeFooterItems',
+      setters: 'FunctionSetter'
+    },
+    {
+      name: 'showOverflow',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'showHeaderOverflow',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'showFooterOverflow',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'keepSource',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'columnConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'rowConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'resizeConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'resizableConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'seqConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'sortConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'filterConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'exportConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'importConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'printConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'radioConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'checkboxConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'tooltipConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'expandConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'treeConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'menuConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'mouseConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'keyboardConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'editConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'validConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'editRules',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'emptyText',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'emptyRender',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'loadingConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'customConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'scrollX',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'scrollY',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'params',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'toolbarConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'pagerConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'proxyConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'zoomConfig',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'layouts',
+      setters: 'ArraySetter'
+    }
+  ],
+  events: [
+    'rowSort',
+    'columnSort',
+    'editChange',
+    'keydown',
+    'current-change',
+    'radio-change',
+    'checkbox-change',
+    'checkbox-all',
+    'checkbox-range-start',
+    'checkbox-range-change',
+    'checkbox-range-end',
+    'cell-click',
+    'cell-dblclick',
+    'cell-menu',
+    'cell-mouseenter',
+    'cell-mouseleave',
+    'cell-delete-value',
+    'header-cell-click',
+    'header-cell-dblclick',
+    'header-cell-menu',
+    'footer-cell-click',
+    'footer-cell-dblclick',
+    'footer-cell-menu',
+    'clear-merge',
+    'sort-change',
+    'clear-sort',
+    'filter-change',
+    'filter-visible',
+    'clear-filter',
+    'resizable-change',
+    'toggle-row-expand',
+    'toggle-tree-expand',
+    'menu-click',
+    'cell-selected',
+    'edit-closed',
+    'edit-activated',
+    'edit-disabled',
+    'valid-error',
+    'scroll',
+    'custom',
+    'page-change',
+    'proxy-query',
+    'proxy-delete',
+    'proxy-save',
+    'toolbar-button-click',
+    'toolbar-tool-click',
+    'zoom'
+  ],
+  slots: ['empty', 'form', 'top', 'bottom', 'toolbar__buttons', 'pager__left'],
+  snippet: {
+    props: {
+      height: 'auto',
+      columns: [
+        { type: 'seq', title: '#' },
+        { field: 'title', title: '标题' }
+      ]
+    }
+  }
+};
+
+export default desc;

package/src/ui/header.ts

@@ -0,0 +1,40 @@
+import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
+const desc: MaterialDescription = {
+  name: 'XHeader',
+  label: '标题头',
+  categoryId: 'layout',
+  props: [
+    size(),
+    {
+      name: 'content',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'subtitle',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon',
+      setters: 'IconSetter'
+    },
+    {
+      name: 'border',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'more',
+      setters: 'BooleanSetter'
+    }
+  ],
+  events: ['click', 'clickIcon'],
+  slots: ['default', 'subtitle', 'actions'],
+  snippet: {
+    props: {
+      content: '标题内容文本',
+      subtitle: '这里是子标题内容示例'
+    }
+  }
+};
+
+export default desc;

package/src/ui/icon.ts

@@ -0,0 +1,48 @@
+import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
+
+const icon: MaterialDescription = {
+  name: 'XIcon',
+  label: '图标',
+  categoryId: 'base',
+  props: [
+    {
+      name: 'icon',
+      label: '图标',
+      setters: 'IconSetter'
+    },
+    Object.assign(size('size'), { setters: ['SelectSetter', 'NumberSetter'] }),
+    {
+      name: 'color',
+      label: '颜色',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'background',
+      label: '背景色',
+      setters: 'ColorSetter'
+    },
+    {
+      name: 'src',
+      label: '图片Url',
+      setters: 'InputSetter'
+    },
+    {
+      name: 'radius',
+      label: '圆角值',
+      setters: 'NumberSetter'
+    },
+    {
+      name: 'padding',
+      label: '内边距',
+      setters: 'NumberSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      icon: 'Star'
+    }
+  }
+};
+
+export default icon;

package/src/ui/index.ts

@@ -0,0 +1,84 @@
+import type {
+  Material,
+  MaterialCategory,
+  MaterialDescription
+} from '@vtj/core';
+import { version } from '../version';
+import { setPackageName } from '../shared';
+import test from './test';
+import icon from './icon';
+import container from './container';
+import action from './action';
+import actionBar from './action-bar';
+import attachment from './attachment';
+import qrcode from './qrcode';
+import panel from './panel';
+import dataItem from './data-item';
+import dialog from './dialog';
+import dialogForm from './dialog-form';
+import field from './field';
+import form from './form';
+import grid from './grid';
+import header from './header';
+import list from './list';
+import queryForm from './query-form';
+import tabs from './tabs';
+import picker from './picker';
+
+const name = '@vtj/ui';
+const components: MaterialDescription[] = [
+  test,
+  icon,
+  container,
+  action,
+  actionBar,
+  qrcode,
+  panel,
+  attachment,
+  dataItem,
+  dialog,
+  dialogForm,
+  field,
+  form,
+  grid,
+  header,
+  list,
+  queryForm,
+  tabs,
+  picker
+].flat();
+
+const categories: MaterialCategory[] = [
+  {
+    id: 'base',
+    category: '基础元件'
+  },
+  {
+    id: 'layout',
+    category: '布局排版'
+  },
+  {
+    id: 'form',
+    category: '表单'
+  },
+  {
+    id: 'data',
+    category: '数据展示'
+  },
+  {
+    id: 'test',
+    category: '测试套件'
+  }
+];
+
+const material: Material = {
+  name: '@vtj/ui',
+  version,
+  label: 'UI',
+  library: 'VtjUIMaterial',
+  order: 1,
+  categories,
+  components: setPackageName(components, name)
+};
+
+export default material;

package/src/ui/list.ts

@@ -0,0 +1,79 @@
+import type { MaterialDescription } from '@vtj/core';
+const desc: MaterialDescription = {
+  name: 'XList',
+  label: '列表',
+  categoryId: 'data',
+  props: [
+    {
+      name: 'data',
+      setters: ['ObjectSetter', 'FunctionSetter']
+    },
+    {
+      name: 'itemHeight',
+      title: '设置 itemHeight 即自动开启虚拟滚动',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'width',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'height',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'pager',
+      setters: ['BooleanSetter', 'ObjectSetter']
+    },
+    {
+      name: 'page',
+      setters: 'NumberSetter',
+      defaultValue: 1
+    },
+    {
+      name: 'pageSize',
+      setters: 'NumberSetter',
+      defaultValue: 10
+    },
+    {
+      name: 'dataKey',
+      title: '数据主键属性名称',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'infiniteScroll',
+      setters: ['BooleanSetter', 'ObjectSetter']
+    }
+  ],
+  events: [
+    {
+      name: 'load',
+      params: ['state']
+    }
+  ],
+  slots: [
+    {
+      name: 'empty'
+    },
+    {
+      name: 'default',
+      params: ['item', 'index']
+    },
+    {
+      name: 'loading'
+    },
+    {
+      name: 'nomore'
+    }
+  ],
+  snippet: {
+    props: {
+      data: {
+        list: ['列表项内容一', '列表项内容二'],
+        total: 2
+      }
+    }
+  }
+};
+
+export default desc;

package/src/ui/panel.ts

@@ -0,0 +1,73 @@
+import type { MaterialDescription } from '@vtj/core';
+import { size } from '../shared';
+
+const desc: MaterialDescription = {
+  name: 'XPanel',
+  label: '面板',
+  categoryId: 'layout',
+  props: [
+    {
+      name: 'fit',
+      label: 'fit',
+      title: '宽高自适应',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'width',
+      label: 'width',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'height',
+      label: 'height',
+      setters: ['StringSetter', 'NumberSetter']
+    },
+    {
+      name: 'border',
+      label: 'border',
+      title: '显示边框',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'radius',
+      label: 'radius',
+      title: '圆角',
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'card',
+      label: '卡片模式',
+      setters: 'BooleanSetter'
+    },
+    Object.assign(size('size'), { setters: ['SelectSetter'] }),
+    {
+      name: 'shadow',
+      label: '阴影设置',
+      setters: 'SelectSetter',
+      options: ['none', 'always', 'hover']
+    },
+    {
+      name: 'header',
+      label: '头部设置',
+      setters: ['StringSetter', 'ObjectSetter']
+    },
+    {
+      name: 'body',
+      label: 'body',
+      setters: 'ObjectSetter'
+    },
+    {
+      name: 'footer',
+      label: 'footer',
+      setters: 'ObjectSetter'
+    }
+  ],
+  snippet: {
+    props: {
+      header: '标题文本',
+      fit: true
+    }
+  }
+};
+
+export default desc;