@vtj/materials 0.8.146 → 0.8.148

package/src/vant/image.ts

@@ -0,0 +1,120 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Image: MaterialDescription = {
+  name: 'VantImage',
+  alias: 'Image',
+  label: '图片',
+  categoryId: 'base',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/image',
+  props: [
+    {
+      name: 'src',
+      title: '图片链接',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'fit',
+      title: '图片填充模式，等同于原生的 object-fit 属性',
+      defaultValue: 'fill',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'position',
+      title: '图片位置，等同于原生的 object-position 属性',
+      defaultValue: 'center',
+      setters: ['SelectSetter', 'StringSetter'],
+      options: ['top', 'right', 'bottom', 'left', 'center']
+    },
+    {
+      name: 'alt',
+      title: '替代文本',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'width',
+      title: '宽度，默认单位为 px',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'height',
+      title: '高度，默认单位为 px',
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'radius',
+      title: '圆角大小，默认单位为 px',
+      defaultValue: 0,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'round',
+      title: '是否显示为圆形',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'block',
+      title: '是否将根节点设置为块级元素，默认情况下为 inline-block 元素',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-error',
+      title: '是否展示图片加载失败提示',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'show-loading',
+      title: '是否展示图片加载中提示',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'error-icon',
+      title: '失败时提示的图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      defaultValue: 'photo-fail',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'loading-icon',
+      title: '加载时提示的图标名称或图片链接，等同于 Icon 组件的 name 属性',
+      defaultValue: 'photo',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'icon-size',
+      title: '加载图标和失败图标的大小',
+      defaultValue: 32,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'icon-prefix',
+      title: '图标类名前缀，等同于 Icon 组件的 class-prefix 属性',
+      defaultValue: 'van-icon',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'crossorigin',
+      title: '等同于原生的 crossorigin 属性',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'referrerpolicy',
+      title: '等同于原生的 referrerpolicy 属性',
+      setters: 'StringSetter'
+    }
+  ],
+  events: ['click', 'load', 'error'],
+  slots: ['default', 'loading', 'error'],
+  snippet: {
+    props: {
+      width: '10rem',
+      height: '10rem',
+      fit: 'contain',
+      src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
+    }
+  }
+};
+
+export default Image;

package/src/vant/index-bar.ts

@@ -0,0 +1,85 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const IndexBar: MaterialDescription[] = [
+  {
+    name: 'VantIndexBar',
+    alias: 'IndexBar',
+    label: '索引栏',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/index-bar',
+    props: [
+      {
+        name: 'index-list',
+        title: '索引字符列表',
+        setters: 'ArraySetter'
+      },
+      {
+        name: 'z-index',
+        title: 'z-index 层级',
+        defaultValue: 1,
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'sticky',
+        title: '是否开启锚点自动吸顶',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      },
+      {
+        name: 'sticky-offset-top',
+        title: '锚点自动吸顶时与顶部的距离',
+        defaultValue: 0,
+        setters: 'NumberSetter'
+      },
+      {
+        name: 'highlight-color',
+        title: '索引字符高亮颜色',
+        defaultValue: '#1989fa',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'teleport',
+        title: '指定索引栏挂载的节点',
+        setters: ['StringSetter', 'ExpressionSetter']
+      }
+    ],
+    events: [
+      { name: 'select', params: ['index'] },
+      { name: 'change', params: ['index'] }
+    ],
+    snippet: {
+      children: [
+        { name: 'VantIndexAnchor', props: { index: 'A' } },
+        { name: 'VantCell', props: { title: '文本' } },
+        { name: 'VantCell', props: { title: '文本' } },
+        { name: 'VantCell', props: { title: '文本' } },
+        { name: 'VantIndexAnchor', props: { index: 'B' } },
+        { name: 'VantCell', props: { title: '文本' } },
+        { name: 'VantCell', props: { title: '文本' } },
+        { name: 'VantCell', props: { title: '文本' } }
+      ]
+    }
+  },
+  {
+    name: 'VantIndexAnchor',
+    alias: 'IndexAnchor',
+    label: '索引栏锚点',
+    categoryId: 'nav',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/index-bar',
+    props: [
+      {
+        name: 'index',
+        title: '索引字符',
+        setters: ['StringSetter', 'NumberSetter']
+      }
+    ],
+    slots: ['default'],
+    snippet: {
+      props: {
+        index: 'C'
+      }
+    }
+  }
+];
+
+export default IndexBar;

package/src/vant/index.ts

@@ -0,0 +1,221 @@
+import type {
+  Material,
+  MaterialCategory,
+  MaterialDescription
+} from '@vtj/core';
+import { setPackageName } from '../shared';
+import { version } from '../version';
+
+// base 基础组件
+import Button from './button';
+import Cell from './cell';
+import Icon from './icon';
+import Image from './image';
+import Layout from './layout';
+import Popup from './popup';
+import Space from './space';
+import Toast from './toast';
+// form 表单组件
+import Calendar from './calendar';
+import Cascader from './cascader';
+import Checkbox from './checkbox';
+import DatePicker from './datePicker';
+import Field from './field';
+import Form from './form';
+import NumberKeyboard from './number-keyboard';
+import PasswordInput from './password-input';
+import Picker from './picker';
+import PickerGroup from './picker-group';
+import Radio from './radio';
+import Rate from './rate';
+import Search from './search';
+import Slider from './slider';
+import Signature from './signature';
+import Stepper from './stepper';
+import Switch from './switch';
+import TimePicker from './time-picker';
+import Uploader from './uploader';
+// feedback 反馈组件
+import ActionSheet from './action-sheet';
+import Barrage from './barrage';
+import Dialog from './dialog';
+import DropdownMenu from './dropdown-menu';
+import FloatingPanel from './floating-panel';
+import FloatingBubble from './floating-bubble';
+import Loading from './loading';
+import Notify from './notify';
+import Overlay from './overlay';
+import PullRefresh from './pull-refresh';
+import ShareSheet from './share-sheet';
+import SwipeCell from './swipe-cell';
+// view 展示组件
+import Badge from './badge';
+import Circle from './circle';
+import Collapse from './collapse';
+import CountDown from './count-down';
+import Divider from './divider';
+import Empty from './empty';
+import Highlight from './highlight';
+import ImagePreview from './image-preview';
+import Lazyload from './lazyload';
+import List from './list';
+import NoticeBar from './notice-bar';
+import Popover from './popover';
+import Progress from './progress';
+import RollingText from './rolling-text';
+import Skeleton from './skeleton';
+import Steps from './steps';
+import Sticky from './sticky';
+import Swipe from './swipe';
+import Tag from './tag';
+import TextEllipsis from './text-ellipsis';
+import Watermark from './watermark';
+// nav 导航组件
+import ActionBar from './action-bar';
+import BackTop from './back-top';
+import Grid from './grid';
+import IndexBar from './index-bar';
+import NavBar from './nav-bar';
+import Pagination from './pagination';
+import Sidebar from './sidebar';
+import Tab from './tab';
+import Tabbar from './tabbar';
+import TreeSelect from './tree-select';
+import AddressEdit from './address-edit';
+import AddressList from './address-list';
+import Area from './area';
+import Card from './card';
+import ContactCard from './contact-card';
+import ContactEdit from './contact-edit';
+import ContactList from './contact-list';
+import Coupon from './coupon-list';
+import SubmitBar from './submit-bar';
+// business 业务组件
+
+const name = 'vant';
+const components: MaterialDescription[] = [
+  // base 基础组件
+  Button,
+  Cell,
+  Icon,
+  Image,
+  Layout,
+  Popup,
+  Space,
+  Toast,
+  // form 表单组件
+  Calendar,
+  Cascader,
+  Checkbox,
+  DatePicker,
+  Field,
+  Form,
+  NumberKeyboard,
+  PasswordInput,
+  Picker,
+  PickerGroup,
+  Radio,
+  Rate,
+  Search,
+  Slider,
+  Signature,
+  Stepper,
+  Switch,
+  TimePicker,
+  Uploader,
+  // feedback 反馈组件
+  ActionSheet,
+  Barrage,
+  Dialog,
+  DropdownMenu,
+  FloatingPanel,
+  FloatingBubble,
+  Loading,
+  Notify,
+  Overlay,
+  PullRefresh,
+  ShareSheet,
+  SwipeCell,
+  // view 展示组件
+  Badge,
+  Circle,
+  Collapse,
+  CountDown,
+  Divider,
+  Empty,
+  Highlight,
+  ImagePreview,
+  Lazyload,
+  List,
+  NoticeBar,
+  Popover,
+  Progress,
+  RollingText,
+  Skeleton,
+  Steps,
+  Sticky,
+  Swipe,
+  Tag,
+  TextEllipsis,
+  Watermark,
+  // nav 导航组件
+  ActionBar,
+  BackTop,
+  Grid,
+  IndexBar,
+  NavBar,
+  Pagination,
+  Sidebar,
+  Tab,
+  Tabbar,
+  TreeSelect,
+  // business 业务组件
+  AddressEdit,
+  AddressList,
+  Area,
+  Card,
+  ContactCard,
+  ContactEdit,
+  ContactList,
+  Coupon,
+  SubmitBar
+].flat();
+
+const categories: MaterialCategory[] = [
+  {
+    id: 'base',
+    category: '基础组件'
+  },
+  {
+    id: 'form',
+    category: '表单组件'
+  },
+  {
+    id: 'feedback',
+    category: '反馈组件'
+  },
+  {
+    id: 'view',
+    category: '展示组件'
+  },
+  {
+    id: 'nav',
+    category: '导航组件'
+  },
+  {
+    id: 'business',
+    category: '业务组件'
+  }
+];
+
+const material: Material = {
+  name: 'vant',
+  version,
+  label: 'Vant',
+  library: 'VantMaterial',
+  order: 5,
+  categories,
+  components: setPackageName(components, name)
+};
+
+export default material;

package/src/vant/layout.ts

@@ -0,0 +1,98 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Layout: MaterialDescription[] = [
+  {
+    name: 'VantRow',
+    alias: 'Row',
+    label: '布局行',
+    categoryId: 'base',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/col',
+    props: [
+      {
+        name: 'gutter',
+        title: '列元素之间的间距(单位为 px)',
+        setters: ['NumberSetter', 'StringSetter', 'ArraySetter']
+      },
+      {
+        name: 'tag',
+        title: '自定义元素标签',
+        defaultValue: 'div',
+        setters: 'StringSetter'
+      },
+      {
+        name: 'justify',
+        title: '主轴对齐方式',
+        defaultValue: 'start',
+        setters: 'SelectSetter',
+        options: ['start', 'end', 'center', 'space-around', 'space-between']
+      },
+      {
+        name: 'align',
+        title: '交叉轴对齐方式',
+        defaultValue: 'top',
+        setters: 'SelectSetter',
+        options: ['top', 'center', 'bottom']
+      },
+      {
+        name: 'wrap',
+        title: '是否自动换行',
+        defaultValue: true,
+        setters: 'BooleanSetter'
+      }
+    ],
+    events: ['click'],
+    snippet: {
+      children: [
+        {
+          name: 'VantCol',
+          children: 'span:8',
+          props: {
+            span: '8'
+          }
+        },
+        {
+          name: 'VantCol',
+          children: 'span:8',
+          props: {
+            span: '8'
+          }
+        }
+      ]
+    }
+  },
+  {
+    name: 'VantCol',
+    alias: 'Col',
+    label: '布局列',
+    categoryId: 'base',
+    doc: 'https://vant-ui.github.io/vant/#/zh-CN/col',
+    props: [
+      {
+        name: 'span',
+        title: '列元素宽度',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'offset',
+        title: '列元素偏移距离',
+        setters: ['NumberSetter', 'StringSetter']
+      },
+      {
+        name: 'tag',
+        title: '自定义元素标签',
+        defaultValue: 'div',
+        setters: 'StringSetter'
+      }
+    ],
+    events: ['click'],
+    snippet: {
+      name: 'VantCol',
+      children: 'span:8',
+      props: {
+        span: '8'
+      }
+    }
+  }
+];
+
+export default Layout;

package/src/vant/lazyload.ts

@@ -0,0 +1,12 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const Lazyload: MaterialDescription = {
+  name: 'VantImageLazyload',
+  alias: 'Lazyload',
+  label: '懒加载',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/lazyload',
+  snippet: {}
+};
+
+export default Lazyload;

package/src/vant/list.ts

@@ -0,0 +1,126 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const List: MaterialDescription = {
+  name: 'VantList',
+  alias: 'List',
+  label: '列表',
+  categoryId: 'view',
+  doc: 'https://vant-ui.github.io/vant/#/zh-CN/list',
+  props: [
+    {
+      name: 'loading',
+      title: '是否处于加载状态，加载过程中不触发 load 事件',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'error',
+      title: '是否加载失败，加载失败后点击错误提示可以重新触发 load 事件',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'finished',
+      title: '是否已加载完成，加载完成后不再触发 load 事件',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'offset',
+      title: '滚动条与底部距离小于 offset 时触发 load 事件',
+      defaultValue: 300,
+      setters: ['NumberSetter', 'StringSetter']
+    },
+    {
+      name: 'loading-text',
+      title: '加载过程中的提示文案',
+      defaultValue: '加载中...',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'finished-text',
+      title: '加载完成后的提示文案',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'error-text',
+      title: '加载失败后的提示文案',
+      setters: 'StringSetter'
+    },
+    {
+      name: 'immediate-check',
+      title: '是否在初始化时立即执行滚动位置检查',
+      defaultValue: true,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'disabled',
+      title: '是否禁用滚动加载',
+      defaultValue: false,
+      setters: 'BooleanSetter'
+    },
+    {
+      name: 'direction',
+      title: '滚动触发加载的方向，可选值为 up',
+      defaultValue: 'down',
+      setters: 'SelectSetter',
+      options: ['up', 'down']
+    },
+    {
+      name: 'scroller',
+      title: '指定需要监听滚动事件的节点，默认为最近的父级滚动节点',
+      setters: 'ExpressionSetter'
+    }
+  ],
+  events: ['update:loading', 'update:error', 'load'],
+  snippet: {
+    props: {
+      loading: {
+        type: 'JSExpression',
+        value: 'this.state.loading'
+      },
+      finished: {
+        type: 'JSExpression',
+        value: 'this.state.finished'
+      },
+      'finished-text': '没有更多了'
+    },
+    children: [
+      {
+        name: 'VantCell',
+        props: {
+          key: {
+            type: 'JSExpression',
+            value: 'this.context.item'
+          },
+          title: {
+            type: 'JSExpression',
+            value: 'this.context.item'
+          }
+        },
+        directives: [
+          {
+            name: 'vFor',
+            value: {
+              type: 'JSExpression',
+              value: '20'
+            }
+          }
+        ]
+      }
+    ],
+    events: {
+      load: {
+        name: 'load',
+        handler: {
+          type: 'JSFunction',
+          value:
+            '() => {\r\n    setTimeout(() => {\r\n        if (this.state.refreshing) {\r\n            this.state.list = [];\r\n            this.state.refreshing = false;\r\n        }\r\n\r\n        for (let i = 0; i < 10; i++) {\r\n            this.state.list.push(this.state.list.length + 1);\r\n        }\r\n        this.loading = false;\r\n\r\n        if (this.state.list.length >= 40) {\r\n            this.finished = true;\r\n        }\r\n    }, 1000);\r\n};'
+        },
+        modifiers: {}
+      }
+    }
+  }
+};
+
+export default List;