@wlydfe/pro-ui 0.2.20 → 0.2.21

package/docs/examples/check-card-group/slot.vue

@@ -0,0 +1,44 @@
+<template>
+  个性化插槽
+  <PlusCheckCardGroup v-model="list3" :options="options">
+    <template #avatar-0> 000 </template>
+    <template #title-0="{ title }"> {{ title }} </template>
+    <template #description-0="{ description }"> {{ description }} </template>
+    <template #extra-0> extra</template>
+  </PlusCheckCardGroup>
+
+  整体插槽
+  <PlusCheckCardGroup v-model="list4" :options="options">
+    <template #avatar> 000 </template>
+    <template #title="{ title }">
+      <button>{{ title }}</button>
+    </template>
+    <template #description="{ description }">
+      <div style="color: red">{{ description }}</div>
+    </template>
+    <template #extra>
+      <button>extra</button>
+    </template>
+  </PlusCheckCardGroup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const list3 = ref([])
+const list4 = ref([])
+const options = [
+  {
+    title: 'title0',
+    value: '0',
+    description: 'description0',
+    avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+  },
+  {
+    title: 'title1',
+    value: '1',
+    description: 'description1',
+    avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
+  }
+]
+</script>

package/docs/examples/check-card-group/tsx.vue

@@ -0,0 +1,26 @@
+<template>
+  <PlusCheckCardGroup v-model="list" :options="options" />
+</template>
+
+<script lang="tsx" setup>
+import { ref } from 'vue'
+
+const list = ref('0')
+
+const options = [
+  {
+    title: () => <div>100</div>,
+    value: '0',
+    description: () => <div>100</div>,
+    avatar: () => (
+      <img src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg" />
+    )
+  },
+  {
+    title: 'title1',
+    value: '1',
+    description: 'description1',
+    avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
+  }
+]
+</script>

package/docs/examples/date-picker/basic.vue

@@ -0,0 +1,13 @@
+<template>
+  <PlusDatePicker v-model="date" @change="handleChange" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const date = ref([])
+
+const handleChange = (value: string[]) => {
+  console.log(value)
+}
+</script>

package/docs/examples/descriptions/basic.vue

@@ -0,0 +1,123 @@
+<template>
+  <PlusDescriptions :column="3" :columns="columns" :data="descriptionsData" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { PlusColumn, RecordType } from 'plus-pro-components'
+
+const TestServe = {
+  getList: async () => {
+    const index = Math.random() * 10
+    const data = {
+      index,
+      id: index,
+      title: '序号' + (index + 1),
+      name: 'name'.repeat(10),
+      status: '1',
+      tag: index < 5 ? 'success' : 'danger',
+      progress: 30,
+      rate: index > 3 ? 2 : 3.5,
+      switch: index > 3 ? true : false,
+      indexColStyle:
+        index < 3
+          ? {
+              backgroundColor: '#314659'
+            }
+          : {
+              backgroundColor: '#979797'
+            },
+      time: new Date(),
+      code: `
+  const getData = async params => {
+    const data = await getData(params)
+    return { list: data.data, ...data }
+  }`
+    }
+    return {
+      data
+    }
+  }
+}
+
+const columns: PlusColumn[] = [
+  {
+    label: '名称',
+    width: 120,
+    prop: 'name',
+    valueType: 'copy'
+  },
+  {
+    label: '状态',
+    width: 120,
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  },
+  {
+    label: '标签',
+    width: 120,
+    prop: 'tag',
+    valueType: 'tag'
+  },
+  {
+    label: '执行进度',
+    width: 200,
+    prop: 'progress',
+    valueType: 'progress'
+  },
+  {
+    label: '代码块',
+    width: 250,
+    prop: 'code',
+    valueType: 'code'
+  },
+  {
+    label: '评分',
+    width: 200,
+    prop: 'rate',
+    valueType: 'rate'
+  },
+  {
+    label: '开关',
+    width: 100,
+    prop: 'switch',
+    valueType: 'switch'
+  },
+  {
+    label: '时间',
+    width: 190,
+    prop: 'time',
+    valueType: 'date-picker'
+  }
+]
+const descriptionsData = ref<RecordType>({})
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    descriptionsData.value = data || {}
+  } catch (error) {}
+}
+getList()
+</script>

package/docs/examples/descriptions/form.vue

@@ -0,0 +1,218 @@
+<template>
+  <PlusDescriptions
+    ref="plusDescriptionsInstance"
+    :column="3"
+    :columns="columns"
+    :border="border"
+    :editable="editable"
+    :direction="direction"
+    :data="descriptionsData"
+    :descriptions-item-props="{ align: position, minWidth: '60px' }"
+    :form-props="{ rules }"
+    @formChange="formChange"
+  >
+    <template #title>
+      <div>描述表单</div>
+      <div class="right">
+        <div>
+          <span class="label">编辑</span>
+          <el-checkbox v-model="editable"> 是否可编辑</el-checkbox>
+        </div>
+
+        <div>
+          <span class="label"> label 位置</span>
+          <el-radio-group v-model="position">
+            <el-radio value="left">left</el-radio>
+            <el-radio value="center">center</el-radio>
+            <el-radio value="right">right</el-radio>
+          </el-radio-group>
+        </div>
+
+        <div>
+          <span class="label"> direction 方向</span>
+          <el-radio-group v-model="direction">
+            <el-radio value="vertical">vertical</el-radio>
+            <el-radio value="horizontal">horizontal</el-radio>
+          </el-radio-group>
+        </div>
+
+        <div>
+          <span class="label">边框</span>
+          <el-checkbox v-model="border"> 开启边框</el-checkbox>
+        </div>
+      </div>
+    </template>
+  </PlusDescriptions>
+
+  <el-row v-if="editable" style="margin-top: 20px">
+    <el-button type="primary" @click="handleSave"> 校验(提交) </el-button>
+    <el-button @click="handleClear"> 移除校验 </el-button>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { PlusColumn, RecordType, PlusDescriptionsInstance } from 'plus-pro-components'
+import { set } from 'lodash-es'
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: '请输入名称'
+    }
+  ],
+  tag: [
+    {
+      required: true,
+      message: '请输入标签'
+    }
+  ]
+}
+
+const position = ref('right')
+const border = ref(true)
+const editable = ref(true)
+const direction = ref('horizontal')
+
+const TestServe = {
+  getList: async () => {
+    const index = Math.random() * 10
+    const data = {
+      index,
+      id: index,
+      title: '序号' + (index + 1),
+      name: '',
+      status: '1',
+      tag: '',
+      progress: 30,
+      rate: index > 3 ? 2 : 3.5,
+      switch: index > 3 ? true : false,
+      time: new Date(),
+      code: `
+    const getData = async params => {
+      const data = await getData(params)
+      return { list: data.data, ...data }
+    }`
+    }
+    return {
+      data
+    }
+  }
+}
+
+const columns: PlusColumn[] = [
+  {
+    label: '名称',
+    width: 120,
+    prop: 'name',
+    valueType: 'copy'
+  },
+  {
+    label: '标签',
+    width: 120,
+    prop: 'tag',
+    valueType: 'tag'
+  },
+  {
+    label: '状态',
+    width: 120,
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  },
+  {
+    label: '执行进度',
+    width: 200,
+    prop: 'progress',
+    valueType: 'progress'
+  },
+  {
+    label: '代码块',
+    width: 250,
+    prop: 'code',
+    valueType: 'code'
+  },
+  {
+    label: '评分',
+    width: 200,
+    prop: 'rate',
+    valueType: 'rate'
+  },
+  {
+    label: '开关',
+    width: 100,
+    prop: 'switch',
+    valueType: 'switch'
+  },
+  {
+    label: '时间',
+    width: 190,
+    prop: 'time',
+    valueType: 'date-picker'
+  }
+]
+const plusDescriptionsInstance = ref<PlusDescriptionsInstance | null>()
+const descriptionsData = ref<RecordType>({})
+
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    descriptionsData.value = data || {}
+  } catch (error) {}
+}
+getList()
+
+const formChange = ({ value, prop }: { value: string; prop: string }) => {
+  // 同步表单数据到描述
+  set(descriptionsData.value, prop, value)
+  console.log(descriptionsData.value, 'descriptionsData.value')
+}
+
+// 校验
+const handleSave = async () => {
+  try {
+    await plusDescriptionsInstance.value?.validate()
+  } catch (error) {
+    console.warn(error)
+  }
+}
+
+// 移除校验
+const handleClear = () => {
+  plusDescriptionsInstance.value?.clearValidate()
+}
+</script>
+
+<style lang="scss" scoped>
+.right {
+  margin: 20px 0;
+  display: flex;
+  justify-content: flex-end;
+  column-gap: 100px;
+  .label {
+    padding-right: 10px;
+  }
+}
+</style>

package/docs/examples/descriptions/render-label.vue

@@ -0,0 +1,67 @@
+<template>
+  <PlusDescriptions :column="2" :columns="columns" :data="descriptionsData" />
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue'
+import type { PlusColumn, RecordType } from 'plus-pro-components'
+import { ElTag, ElButton } from 'element-plus'
+
+const TestServe = {
+  getList: async () => {
+    const index = Math.random() * 10
+    const data = {
+      index,
+      status: '1',
+      name: '序号' + (index + 1)
+    }
+    return { data }
+  }
+}
+
+const columns: PlusColumn[] = [
+  {
+    label: '名称',
+    width: 120,
+    prop: 'name',
+    renderDescriptionsLabel: ({ label }) => h(ElTag, { type: 'success' }, () => label)
+  },
+  {
+    label: '状态',
+    width: 120,
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ],
+    renderDescriptionsLabel: ({ label }) => h(ElButton, { type: 'success' }, () => label)
+  }
+]
+const descriptionsData = ref<RecordType>({})
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    descriptionsData.value = data || {}
+  } catch (error) {}
+}
+getList()
+</script>

package/docs/examples/descriptions/render.vue

@@ -0,0 +1,121 @@
+<template>
+  <PlusDescriptions :column="2" :columns="columns" :data="descriptionsData" />
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue'
+import type { PlusColumn, RecordType } from 'plus-pro-components'
+import { ElTag, ElButton, ElImage } from 'element-plus'
+
+const TestServe = {
+  getList: async () => {
+    const index = Math.random() * 10
+    const data = {
+      index,
+      status: '1',
+      name: '序号' + (index + 1),
+      image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      video: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',
+      tag: ['success', 'info', 'warning', 'danger'],
+      render: 'render',
+      renderHTML: `<div >
+          <h3 style="color:red">标题</h3>
+          <p style="color:#333">
+            富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容富文本内容
+          </p>
+        </div>`
+    }
+    return { data }
+  }
+}
+
+const columns: PlusColumn[] = [
+  {
+    label: '名称',
+    width: 120,
+    prop: 'name',
+    renderDescriptionsItem: ({ value }) => h(ElTag, { type: 'success' }, () => value)
+  },
+  {
+    label: '状态',
+    width: 120,
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ],
+    renderDescriptionsItem: ({ value }) => h(ElButton, { type: 'success' }, () => value)
+  },
+  {
+    label: '图片',
+    width: 120,
+    prop: 'image',
+    renderDescriptionsItem: ({ value }) => h(ElImage, { src: value, style: { width: '140px' } })
+  },
+  {
+    label: '视频',
+    width: 120,
+    prop: 'video',
+    renderDescriptionsItem: ({ value }) =>
+      h('video', { src: value, controls: true, style: { width: '200px' } })
+  },
+
+  {
+    label: '标签',
+    width: 120,
+    prop: 'tag',
+    renderDescriptionsItem: ({ value }) =>
+      value?.map(item =>
+        h(
+          ElTag,
+          {
+            type: item,
+            style: {
+              marginLeft: '5px'
+            }
+          },
+          () => item
+        )
+      )
+  },
+  {
+    label: 'render',
+    width: 120,
+    prop: 'render',
+    render: value => h(ElTag, null, () => value)
+  },
+  {
+    label: 'renderHTML',
+    width: 120,
+    prop: 'renderHTML',
+    renderHTML: value => value as string
+  }
+]
+const descriptionsData = ref<RecordType>({})
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    descriptionsData.value = data || {}
+  } catch (error) {}
+}
+getList()
+</script>

package/docs/examples/descriptions/slot-label.vue

@@ -0,0 +1,73 @@
+<template>
+  <PlusDescriptions :column="2" :columns="columns" :data="descriptionsData">
+    <template #plus-desc-label-name="{ label }">
+      <el-tag type="success"> {{ label }} </el-tag>
+    </template>
+
+    <template #plus-desc-label-status="{ label }">
+      <el-button type="success"> {{ label }} </el-button>
+    </template>
+  </PlusDescriptions>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { PlusColumn, RecordType } from 'plus-pro-components'
+import { ElTag, ElButton } from 'element-plus'
+
+const TestServe = {
+  getList: async () => {
+    const index = Math.random() * 10
+    const data = {
+      index,
+      status: '1',
+      name: '序号' + (index + 1)
+    }
+    return { data }
+  }
+}
+
+const columns: PlusColumn[] = [
+  {
+    label: '名称',
+    width: 120,
+    prop: 'name'
+  },
+  {
+    label: '状态',
+    width: 120,
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  }
+]
+const descriptionsData = ref<RecordType>({})
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    descriptionsData.value = data || {}
+  } catch (error) {}
+}
+getList()
+</script>