vue3-components-plus 3.0.19 → 3.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-components-plus",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "private": false,
   "type": "module",
   "files": [

package/vue3-components-plus.d.ts

@@ -89,7 +89,6 @@ declare module 'vue3-components-plus' {
   import type { App } from 'vue'
 
   const components: {
-    NsVideo: any
     NsExcel: any
     NsPdf: any
     NsWord: any
@@ -195,7 +194,6 @@ declare module 'vue3-components-plus' {
     download,
     downLoadLocalFile,
     getTokenInfo,
-    NsVideo,
     NsExcel,
     NsPdf,
     NsWord,

package/dist/ComponentDemo/DynamicFormCascadeAsyncDemo.vue

@@ -1,337 +0,0 @@
-<template>
-  <div class="cascade-async-demo">
-    <h1>级联表单示例 - 异步数据加载</h1>
-
-    <el-card class="demo-card">
-      <template #header>
-        <span>产品分类级联（模拟异步加载）</span>
-      </template>
-
-      <DynamicFormPlus
-        ref="formRef"
-        v-model="formData"
-        :config="formConfig"
-        :col-span="12"
-        :gutter="16"
-        label-width="120px"
-        @submit="handleSubmit"
-      />
-    </el-card>
-
-    <el-card class="demo-card" style="margin-top: 20px">
-      <template #header>
-        <span>表单数据</span>
-      </template>
-      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { DynamicFormPlus } from '../../packages/components/DynamicFormPlus'
-import type { FormConfig } from '../../packages/components/DynamicFormPlus'
-
-// 模拟异步 API 请求
-const mockApiDelay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-
-// 模拟获取一级分类
-async function fetchCategories() {
-  await mockApiDelay(500)
-  return [
-    { label: '电子产品', value: 'electronics' },
-    { label: '服装鞋帽', value: 'clothing' },
-    { label: '食品饮料', value: 'food' },
-  ]
-}
-
-// 模拟获取二级分类
-async function fetchSubCategories(categoryId: string) {
-  await mockApiDelay(500)
-  const subCategoriesMap: Record<string, Array<{ label: string; value: string }>> = {
-    electronics: [
-      { label: '手机', value: 'phone' },
-      { label: '电脑', value: 'computer' },
-      { label: '相机', value: 'camera' },
-    ],
-    clothing: [
-      { label: '男装', value: 'mens' },
-      { label: '女装', value: 'womens' },
-      { label: '童装', value: 'kids' },
-    ],
-    food: [
-      { label: '零食', value: 'snacks' },
-      { label: '饮料', value: 'drinks' },
-      { label: '水果', value: 'fruits' },
-    ],
-  }
-  return subCategoriesMap[categoryId] || []
-}
-
-// 模拟获取品牌列表
-async function fetchBrands(subCategoryId: string) {
-  await mockApiDelay(500)
-  const brandsMap: Record<string, Array<{ label: string; value: string }>> = {
-    phone: [
-      { label: '苹果', value: 'apple' },
-      { label: '华为', value: 'huawei' },
-      { label: '小米', value: 'xiaomi' },
-    ],
-    computer: [
-      { label: '联想', value: 'lenovo' },
-      { label: '戴尔', value: 'dell' },
-      { label: '惠普', value: 'hp' },
-    ],
-    camera: [
-      { label: '佳能', value: 'canon' },
-      { label: '尼康', value: 'nikon' },
-      { label: '索尼', value: 'sony' },
-    ],
-    mens: [
-      { label: '耐克', value: 'nike' },
-      { label: '阿迪达斯', value: 'adidas' },
-      { label: '优衣库', value: 'uniqlo' },
-    ],
-    womens: [
-      { label: 'ZARA', value: 'zara' },
-      { label: 'H&M', value: 'hm' },
-      { label: '优衣库', value: 'uniqlo' },
-    ],
-    kids: [
-      { label: '巴拉巴拉', value: 'balabala' },
-      { label: '安奈儿', value: 'annil' },
-      { label: '迪士尼', value: 'disney' },
-    ],
-    snacks: [
-      { label: '三只松鼠', value: 'squirrel' },
-      { label: '良品铺子', value: 'bestore' },
-      { label: '百草味', value: 'herb' },
-    ],
-    drinks: [
-      { label: '可口可乐', value: 'cocacola' },
-      { label: '百事可乐', value: 'pepsi' },
-      { label: '农夫山泉', value: 'nongfu' },
-    ],
-    fruits: [
-      { label: '佳沛', value: 'zespri' },
-      { label: '都乐', value: 'dole' },
-      { label: '新奇士', value: 'sunkist' },
-    ],
-  }
-  return brandsMap[subCategoryId] || []
-}
-
-// 表单数据
-const formData = ref({
-  category: '',
-  subCategory: '',
-  brand: '',
-  productName: '',
-  price: 0,
-})
-
-// 表单配置
-const formConfig: FormConfig = {
-  items: [
-    {
-      prop: 'category',
-      label: '一级分类',
-      component: 'el-select',
-      componentProps: {
-        placeholder: '请选择分类',
-        clearable: true,
-        loading: false,
-      },
-      rules: [{ required: true, message: '请选择一级分类', trigger: 'change' }],
-      span: 12,
-    },
-    {
-      prop: 'subCategory',
-      label: '二级分类',
-      component: 'el-select',
-      componentProps: {
-        placeholder: '请先选择一级分类',
-        clearable: true,
-        disabled: true,
-        loading: false,
-      },
-      rules: [{ required: true, message: '请选择二级分类', trigger: 'change' }],
-      span: 12,
-      // 级联配置：依赖一级分类
-      cascade: {
-        dependOn: 'category',
-        clearFields: ['subCategory', 'brand'], // 一级分类变化时清除二级分类和品牌
-        handler: async ({ dependValues, setComponentProps, clearValue }) => {
-          const category = dependValues.category
-
-          if (!category) {
-            setComponentProps({
-              placeholder: '请先选择一级分类',
-              disabled: true,
-              loading: false,
-              options: [],
-            })
-            clearValue()
-            return
-          }
-
-          // 显示加载状态
-          setComponentProps({
-            placeholder: '加载中...',
-            disabled: true,
-            loading: true,
-            options: [],
-          })
-
-          try {
-            // 异步加载二级分类数据
-            const subCategories = await fetchSubCategories(category)
-
-            setComponentProps({
-              placeholder: '请选择二级分类',
-              disabled: false,
-              loading: false,
-              options: subCategories,
-            })
-          } catch (error) {
-            console.error('加载二级分类失败:', error)
-            setComponentProps({
-              placeholder: '加载失败，请重试',
-              disabled: true,
-              loading: false,
-              options: [],
-            })
-          }
-        },
-      },
-    },
-    {
-      prop: 'brand',
-      label: '品牌',
-      component: 'el-select',
-      componentProps: {
-        placeholder: '请先选择二级分类',
-        clearable: true,
-        disabled: true,
-        loading: false,
-      },
-      rules: [{ required: true, message: '请选择品牌', trigger: 'change' }],
-      span: 12,
-      // 级联配置：依赖二级分类
-      cascade: {
-        dependOn: 'subCategory',
-        clearFields: ['brand'], // 二级分类变化时清除品牌
-        handler: async ({ dependValues, setComponentProps, clearValue }) => {
-          const subCategory = dependValues.subCategory
-
-          if (!subCategory) {
-            setComponentProps({
-              placeholder: '请先选择二级分类',
-              disabled: true,
-              loading: false,
-              options: [],
-            })
-            clearValue()
-            return
-          }
-
-          // 显示加载状态
-          setComponentProps({
-            placeholder: '加载中...',
-            disabled: true,
-            loading: true,
-            options: [],
-          })
-
-          try {
-            // 异步加载品牌数据
-            const brands = await fetchBrands(subCategory)
-
-            setComponentProps({
-              placeholder: '请选择品牌',
-              disabled: false,
-              loading: false,
-              options: brands,
-            })
-          } catch (error) {
-            console.error('加载品牌失败:', error)
-            setComponentProps({
-              placeholder: '加载失败，请重试',
-              disabled: true,
-              loading: false,
-              options: [],
-            })
-          }
-        },
-      },
-    },
-    {
-      prop: 'productName',
-      label: '产品名称',
-      component: 'el-input',
-      componentProps: {
-        placeholder: '请输入产品名称',
-        clearable: true,
-      },
-      rules: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
-      span: 12,
-    },
-    {
-      prop: 'price',
-      label: '价格',
-      component: 'el-input-number',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        controlsPosition: 'right',
-      },
-      rules: [{ required: true, message: '请输入价格', trigger: 'blur' }],
-      span: 12,
-    },
-  ],
-}
-
-// 初始化时加载一级分类
-;(async () => {
-  try {
-    const categories = await fetchCategories()
-    formConfig.items[0].componentProps!.options = categories
-  } catch (error) {
-    console.error('加载一级分类失败:', error)
-    ElMessage.error('加载分类数据失败')
-  }
-})()
-
-// 表单引用
-const formRef = ref()
-
-// 处理提交
-function handleSubmit(data: Record<string, any>) {
-  console.log('表单提交:', data)
-  ElMessage.success('表单提交成功！')
-}
-</script>
-
-<style scoped lang="scss">
-.cascade-async-demo {
-  padding: 20px;
-
-  h1 {
-    margin-bottom: 20px;
-    font-size: 24px;
-    font-weight: bold;
-  }
-
-  .demo-card {
-    margin-bottom: 20px;
-  }
-
-  pre {
-    background-color: #f5f5f5;
-    padding: 12px;
-    border-radius: 4px;
-    overflow-x: auto;
-  }
-}
-</style>

package/dist/ComponentDemo/DynamicFormCascadeDemo.vue

@@ -1,263 +0,0 @@
-<template>
-  <div class="cascade-demo">
-    <h1>级联表单示例</h1>
-
-    <el-card class="demo-card">
-      <template #header>
-        <span>省市区三级联动</span>
-      </template>
-
-      <DynamicFormPlus
-        ref="formRef"
-        v-model="formData"
-        :config="formConfig"
-        :col-span="8"
-        :gutter="16"
-        label-width="100px"
-        @submit="handleSubmit"
-      />
-    </el-card>
-
-    <el-card class="demo-card" style="margin-top: 20px">
-      <template #header>
-        <span>表单数据</span>
-      </template>
-      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { DynamicFormPlus } from '../../packages/components/DynamicFormPlus'
-import type { FormConfig } from '../../packages/components/DynamicFormPlus'
-
-// 模拟数据源
-const provinces = [
-  { label: '广东省', value: 'guangdong' },
-  { label: '浙江省', value: 'zhejiang' },
-  { label: '江苏省', value: 'jiangsu' },
-]
-
-const citiesMap: Record<string, Array<{ label: string; value: string }>> = {
-  guangdong: [
-    { label: '广州市', value: 'guangzhou' },
-    { label: '深圳市', value: 'shenzhen' },
-    { label: '东莞市', value: 'dongguan' },
-  ],
-  zhejiang: [
-    { label: '杭州市', value: 'hangzhou' },
-    { label: '宁波市', value: 'ningbo' },
-    { label: '温州市', value: 'wenzhou' },
-  ],
-  jiangsu: [
-    { label: '南京市', value: 'nanjing' },
-    { label: '苏州市', value: 'suzhou' },
-    { label: '无锡市', value: 'wuxi' },
-  ],
-}
-
-const districtsMap: Record<string, Array<{ label: string; value: string }>> = {
-  guangzhou: [
-    { label: '天河区', value: 'tianhe' },
-    { label: '越秀区', value: 'yuexiu' },
-    { label: '海珠区', value: 'haizhu' },
-  ],
-  shenzhen: [
-    { label: '南山区', value: 'nanshan' },
-    { label: '福田区', value: 'futian' },
-    { label: '罗湖区', value: 'luohu' },
-  ],
-  dongguan: [
-    { label: '莞城区', value: 'guancheng' },
-    { label: '南城区', value: 'nancheng' },
-    { label: '东城区', value: 'dongcheng' },
-  ],
-  hangzhou: [
-    { label: '西湖区', value: 'xihu' },
-    { label: '滨江区', value: 'binjiang' },
-    { label: '余杭区', value: 'yuhang' },
-  ],
-  ningbo: [
-    { label: '海曙区', value: 'haishu' },
-    { label: '江北区', value: 'jiangbei' },
-    { label: '鄞州区', value: 'yinzhou' },
-  ],
-  wenzhou: [
-    { label: '鹿城区', value: 'lucheng' },
-    { label: '龙湾区', value: 'longwan' },
-    { label: '瓯海区', value: 'ouhai' },
-  ],
-  nanjing: [
-    { label: '玄武区', value: 'xuanwu' },
-    { label: '秦淮区', value: 'qinhuai' },
-    { label: '建邺区', value: 'jianye' },
-  ],
-  suzhou: [
-    { label: '姑苏区', value: 'gusu' },
-    { label: '吴中区', value: 'wuzhong' },
-    { label: '相城区', value: 'xiangcheng' },
-  ],
-  wuxi: [
-    { label: '梁溪区', value: 'liangxi' },
-    { label: '滨湖区', value: 'binhu' },
-    { label: '惠山区', value: 'huishan' },
-  ],
-}
-
-// 表单数据
-const formData = ref({
-  province: '',
-  city: '',
-  district: '',
-  address: '',
-})
-
-// 表单配置
-const formConfig: FormConfig = {
-  items: [
-    {
-      prop: 'province',
-      label: '省份',
-      component: 'el-select',
-      componentProps: {
-        placeholder: '请选择省份',
-        clearable: true,
-      },
-      rules: [{ required: true, message: '请选择省份', trigger: 'change' }],
-      span: 8,
-      // 静态数据源
-      valueTransform: {
-        input: (value) => value,
-        output: (value) => value,
-      },
-    },
-    {
-      prop: 'city',
-      label: '城市',
-      component: 'el-select',
-      componentProps: {
-        placeholder: '请先选择省份',
-        clearable: true,
-        disabled: true,
-      },
-      rules: [{ required: true, message: '请选择城市', trigger: 'change' }],
-      span: 8,
-      // 级联配置：依赖省份字段
-      cascade: {
-        dependOn: 'province',
-        clearFields: ['city', 'district'], // 省份变化时清除城市和区县
-        handler: ({ dependValues, setComponentProps, clearValue }) => {
-          const province = dependValues.province
-
-          if (!province) {
-            // 如果省份为空，禁用城市选择器
-            setComponentProps({
-              placeholder: '请先选择省份',
-              disabled: true,
-              options: [],
-            })
-            clearValue()
-            return
-          }
-
-          // 根据省份加载城市数据
-          const cities = citiesMap[province] || []
-          setComponentProps({
-            placeholder: '请选择城市',
-            disabled: false,
-            options: cities,
-          })
-        },
-      },
-    },
-    {
-      prop: 'district',
-      label: '区县',
-      component: 'el-select',
-      componentProps: {
-        placeholder: '请先选择城市',
-        clearable: true,
-        disabled: true,
-      },
-      rules: [{ required: true, message: '请选择区县', trigger: 'change' }],
-      span: 8,
-      // 级联配置：依赖城市字段
-      cascade: {
-        dependOn: 'city',
-        clearFields: ['district'], // 城市变化时清除区县
-        handler: ({ dependValues, setComponentProps, clearValue }) => {
-          const city = dependValues.city
-
-          if (!city) {
-            // 如果城市为空，禁用区县选择器
-            setComponentProps({
-              placeholder: '请先选择城市',
-              disabled: true,
-              options: [],
-            })
-            clearValue()
-            return
-          }
-
-          // 根据城市加载区县数据
-          const districts = districtsMap[city] || []
-          setComponentProps({
-            placeholder: '请选择区县',
-            disabled: false,
-            options: districts,
-          })
-        },
-      },
-    },
-    {
-      prop: 'address',
-      label: '详细地址',
-      component: 'el-input',
-      componentProps: {
-        type: 'textarea',
-        rows: 3,
-        placeholder: '请输入详细地址',
-      },
-      rules: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
-      span: 24,
-    },
-  ],
-}
-
-// 为省份选择器添加静态选项
-formConfig.items[0].componentProps!.options = provinces
-
-// 表单引用
-const formRef = ref()
-
-// 处理提交
-function handleSubmit(data: Record<string, any>) {
-  console.log('表单提交:', data)
-  ElMessage.success('表单提交成功！')
-}
-</script>
-
-<style scoped lang="scss">
-.cascade-demo {
-  padding: 20px;
-
-  h1 {
-    margin-bottom: 20px;
-    font-size: 24px;
-    font-weight: bold;
-  }
-
-  .demo-card {
-    margin-bottom: 20px;
-  }
-
-  pre {
-    background-color: #f5f5f5;
-    padding: 12px;
-    border-radius: 4px;
-    overflow-x: auto;
-  }
-}
-</style>