@wlydfe/pro-ui 0.2.21 → 0.2.24

package/docs/examples/form-item/all.vue

@@ -1,328 +0,0 @@
-<template>
-  <PlusFormItem
-    v-for="item in columns"
-    :key="item.label"
-    v-model="values[item.prop]"
-    v-bind="item"
-    @change="(val:any) =>handleChange(val, item.prop)"
-  />
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import type { PlusColumn, FieldValues } from 'plus-pro-components'
-
-interface RestaurantItem {
-  value: string
-  link: string
-}
-
-interface Option {
-  key: number
-  label: string
-  disabled: boolean
-}
-
-const restaurants = ref<RestaurantItem[]>([])
-
-const createFilter = (queryString: string) => {
-  return (restaurant: RestaurantItem) => {
-    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-  }
-}
-const loadAll = () => {
-  return [
-    { value: 'vue', link: 'https://github.com/vuejs/vue' },
-    { value: 'element', link: 'https://github.com/ElemeFE/element' },
-    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-    { value: 'babel', link: 'https://github.com/babel/babel' }
-  ]
-}
-
-const generateData = () => {
-  const data: Option[] = []
-  for (let i = 1; i <= 15; i++) {
-    data.push({
-      key: i,
-      label: `Option ${i}`,
-      disabled: i % 4 === 0
-    })
-  }
-  return data
-}
-
-onMounted(() => {
-  restaurants.value = loadAll()
-})
-
-const cascaderOptions = [
-  {
-    value: '0',
-    label: '陕西',
-    children: [
-      {
-        value: '0-0',
-        label: '西安',
-        children: [
-          {
-            value: '0-0-0',
-            label: '新城区'
-          },
-          {
-            value: '0-0-1',
-            label: '高新区'
-          },
-          {
-            value: '0-0-2',
-            label: '灞桥区'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    value: '1',
-    label: '山西',
-    children: [
-      {
-        value: '1-0',
-        label: '太原',
-        children: [
-          {
-            value: '1-0-0',
-            label: '小店区'
-          },
-          {
-            value: '1-0-1',
-            label: '古交市'
-          },
-          {
-            value: '1-0-2',
-            label: '万柏林区'
-          }
-        ]
-      }
-    ]
-  }
-]
-
-const columns: PlusColumn[] = [
-  {
-    label: 'autocomplete',
-    width: 120,
-    prop: 'autocomplete',
-    valueType: 'autocomplete',
-    tooltip: '自动补全输入框',
-    fieldProps: {
-      fetchSuggestions: (queryString: string, cb: any) => {
-        const results = queryString
-          ? restaurants.value.filter(createFilter(queryString))
-          : restaurants.value
-        // call callback function to return suggestions
-        cb(results)
-      }
-    }
-  },
-  {
-    label: 'cascader',
-    prop: 'cascader',
-    valueType: 'cascader',
-    options: cascaderOptions
-  },
-  {
-    label: 'checkbox',
-    prop: 'checkbox',
-    valueType: 'checkbox',
-    options: [
-      {
-        label: '四六级',
-        value: '0'
-      },
-      {
-        label: '计算机二级证书',
-        value: '1'
-      },
-      {
-        label: '普通话证书',
-        value: '2'
-      }
-    ]
-  },
-  {
-    label: 'color-picker',
-    prop: 'color-picker',
-    valueType: 'color-picker'
-  },
-  {
-    label: 'time',
-    prop: 'time',
-    valueType: 'date-picker'
-  },
-  {
-    label: 'select',
-    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: 'input',
-    width: 120,
-    prop: 'input'
-  },
-  {
-    label: 'input-number',
-    prop: 'number',
-    valueType: 'input-number',
-    fieldProps: { precision: 2, step: 2 }
-  },
-  {
-    label: 'textarea',
-    prop: 'textarea',
-    valueType: 'textarea',
-    fieldProps: {
-      maxlength: 10,
-      showWordLimit: true,
-      autosize: { minRows: 2, maxRows: 4 }
-    }
-  },
-
-  {
-    label: 'rate',
-    width: 200,
-    prop: 'rate',
-    valueType: 'rate'
-  },
-  {
-    label: 'switch',
-    width: 100,
-    prop: 'switch',
-    valueType: 'switch'
-  },
-  {
-    label: 'radio',
-    prop: 'radio',
-    valueType: 'radio',
-    options: [
-      {
-        label: '诗',
-        value: '0'
-      },
-      {
-        label: '远方',
-        value: '1'
-      },
-      {
-        label: '美食',
-        value: '2'
-      }
-    ]
-  },
-  {
-    label: 'slider',
-    prop: 'slider',
-    valueType: 'slider'
-  },
-  {
-    label: 'time-picker',
-    prop: 'time-picker',
-    valueType: 'time-picker'
-  },
-  {
-    label: 'time-select',
-    prop: 'time-select',
-    valueType: 'time-select'
-  },
-  {
-    label: 'text',
-    prop: 'text',
-    valueType: 'text'
-  },
-  {
-    label: 'transfer',
-    prop: 'transfer',
-    valueType: 'transfer',
-    fieldProps: {
-      data: generateData()
-    }
-  },
-  {
-    label: 'divider',
-    prop: 'divider',
-    valueType: 'divider'
-  },
-  {
-    label: 'tree-select',
-    prop: 'tree-select',
-    valueType: 'tree-select',
-    fieldProps: {
-      data: cascaderOptions
-    }
-  },
-  {
-    label: 'plus-radio',
-    prop: 'plus-radio',
-    valueType: 'plus-radio',
-    options: [
-      { label: '选项一', value: 1 },
-      { label: '选项二', value: 2 }
-    ]
-  },
-  {
-    label: 'plus-date-picker',
-    prop: 'plus-date-picker',
-    valueType: 'plus-date-picker'
-  },
-  {
-    label: 'plus-input-tag',
-    prop: 'plus-input-tag',
-    valueType: 'plus-input-tag'
-  }
-]
-
-const row = {
-  name: 'name',
-  status: '1',
-  tag: 'success',
-  money: '100',
-  text: '文本',
-  progress: 30,
-  rate: 4,
-  switch: true,
-  number: 30,
-  time: new Date(),
-  slider: 10,
-  code: `const data = 100`,
-  copy: 'copy',
-  img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-}
-const values = ref<FieldValues>({ ...row })
-
-const handleChange = (values: FieldValues, prop: string) => {
-  console.log(values, prop)
-}
-</script>

package/docs/examples/form-item/async.vue

@@ -1,98 +0,0 @@
-<template>
-  <PlusFormItem value-type="checkbox" label="checkbox" prop="checkbox" :options="options" />
-  <PlusFormItem
-    v-model="values.checkbox"
-    value-type="checkbox"
-    label="checkbox"
-    prop="checkbox"
-    :options="option1"
-  />
-  <PlusFormItem
-    v-model="values.checkbox"
-    value-type="checkbox"
-    label="checkbox"
-    prop="checkbox"
-    :options="option2"
-  />
-  <PlusFormItem
-    v-model="values.checkbox"
-    value-type="checkbox"
-    label="checkbox"
-    prop="checkbox"
-    :options="option3"
-  />
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-import type { FieldValues } from 'plus-pro-components'
-
-const options = () => {
-  return new Promise(resolve => {
-    resolve([
-      {
-        label: '四六级',
-        value: '0'
-      },
-      {
-        label: '计算机二级证书',
-        value: '1'
-      },
-      {
-        label: '普通话证书',
-        value: '2'
-      }
-    ])
-  })
-}
-const option1 = async () => {
-  return [
-    {
-      label: '四六级',
-      value: '0'
-    },
-    {
-      label: '计算机二级证书',
-      value: '1'
-    },
-    {
-      label: '普通话证书',
-      value: '2'
-    }
-  ]
-}
-const option2 = new Promise(resolve => {
-  resolve([
-    {
-      label: '四六级',
-      value: '0'
-    },
-    {
-      label: '计算机二级证书',
-      value: '1'
-    },
-    {
-      label: '普通话证书',
-      value: '2'
-    }
-  ])
-})
-const option3 = computed(() => [
-  {
-    label: '四六级',
-    value: '0'
-  },
-  {
-    label: '计算机二级证书',
-    value: '1'
-  },
-  {
-    label: '普通话证书',
-    value: '2'
-  }
-])
-
-const values = ref<FieldValues>({
-  checkbox: []
-})
-</script>

package/docs/examples/form-item/basic.vue

@@ -1,96 +0,0 @@
-<template>
-  <PlusFormItem v-model="values.name" label="输入框" prop="name" />
-
-  <PlusFormItem
-    v-model="values.cascader"
-    value-type="cascader"
-    label="级联"
-    prop="cascader"
-    :options="options"
-  />
-
-  <PlusFormItem
-    v-model="values.checkbox"
-    value-type="checkbox"
-    label="多选"
-    prop="checkbox"
-    :options="checkboxOptions"
-  />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import type { FieldValues } from 'plus-pro-components'
-
-const options = [
-  {
-    value: '0',
-    label: '陕西',
-    children: [
-      {
-        value: '0-0',
-        label: '西安',
-        children: [
-          {
-            value: '0-0-0',
-            label: '新城区'
-          },
-          {
-            value: '0-0-1',
-            label: '高新区'
-          },
-          {
-            value: '0-0-2',
-            label: '灞桥区'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    value: '1',
-    label: '山西',
-    children: [
-      {
-        value: '1-0',
-        label: '太原',
-        children: [
-          {
-            value: '1-0-0',
-            label: '小店区'
-          },
-          {
-            value: '1-0-1',
-            label: '古交市'
-          },
-          {
-            value: '1-0-2',
-            label: '万柏林区'
-          }
-        ]
-      }
-    ]
-  }
-]
-
-const checkboxOptions = [
-  {
-    label: '四六级',
-    value: '0'
-  },
-  {
-    label: '计算机二级证书',
-    value: '1'
-  },
-  {
-    label: '普通话证书',
-    value: '2'
-  }
-]
-
-const values = ref<FieldValues>({
-  name: '',
-  cascader: '',
-  checkbox: []
-})
-</script>

package/docs/examples/form-item/custom-label-slot.vue

@@ -1,28 +0,0 @@
-<template>
-  <el-card>
-    <PlusFormItem
-      v-model="state"
-      label="自定义"
-      prop="name"
-      :field-props="{
-        placeholder: '请输入'
-      }"
-      @change="handleChange"
-    >
-      <template #plus-label-name="{ label }">
-        <div style="color: red">{{ label }}</div>
-      </template>
-    </PlusFormItem>
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import type { FieldValueType } from 'plus-pro-components'
-
-const state = ref()
-
-const handleChange = (value: FieldValueType) => {
-  console.log(value, 'change')
-}
-</script>

package/docs/examples/form-item/custom-label-tsx.vue

@@ -1,29 +0,0 @@
-<template>
-  <el-card>
-    <PlusFormItem
-      v-model="state"
-      label="自定义"
-      prop="name"
-      :field-props="{
-        placeholder: '请输入'
-      }"
-      :render-label="renderLabel"
-      @change="handleChange"
-    />
-  </el-card>
-</template>
-
-<script lang="tsx" setup>
-import { ref } from 'vue'
-import type { FieldValueType, PlusColumn } from 'plus-pro-components'
-
-const state = ref()
-
-const renderLabel: PlusColumn['renderLabel'] = label => {
-  return <div style={{ color: 'red' }}> {label} </div>
-}
-
-const handleChange = (value: FieldValueType) => {
-  console.log(value, 'change')
-}
-</script>

package/docs/examples/form-item/custom-label.vue

@@ -1,37 +0,0 @@
-<template>
-  <el-card>
-    <PlusFormItem
-      v-model="state"
-      label="自定义"
-      prop="name"
-      :field-props="{
-        placeholder: '请输入'
-      }"
-      :render-label="renderLabel"
-      @change="handleChange"
-    />
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { h, ref } from 'vue'
-import type { FieldValueType, PlusColumn } from 'plus-pro-components'
-
-const state = ref()
-
-const renderLabel: PlusColumn['renderLabel'] = label => {
-  return h(
-    'div',
-    {
-      style: {
-        color: 'red'
-      }
-    },
-    label
-  )
-}
-
-const handleChange = (value: FieldValueType) => {
-  console.log(value, 'change')
-}
-</script>

package/docs/examples/form-item/custom-slot.vue

@@ -1,21 +0,0 @@
-<template>
-  <el-card>
-    <PlusFormItem v-model="state" label="自定义" prop="name" @change="handleChange">
-      <template #plus-field-name>
-        <el-input v-model="state" placeholder="自定义输入框插槽" />
-      </template>
-    </PlusFormItem>
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import type { FieldValueType } from 'plus-pro-components'
-import { ElInput } from 'element-plus'
-
-const state = ref()
-
-const handleChange = (value: FieldValueType) => {
-  console.log(value, 'change')
-}
-</script>

package/docs/examples/form-item/custom-tsx.vue

@@ -1,30 +0,0 @@
-<template>
-  <el-card>
-    <PlusFormItem
-      v-model="state"
-      label="自定义"
-      prop="name"
-      :field-props="{
-        placeholder: '请输入tsx'
-      }"
-      :render-field="renderField"
-      @change="handleChange"
-    />
-  </el-card>
-</template>
-
-<script lang="tsx" setup>
-import { ref } from 'vue'
-import type { FieldValueType, PlusColumn } from 'plus-pro-components'
-import { ElInput } from 'element-plus'
-
-const state = ref()
-
-const renderField: PlusColumn['renderField'] = (value, onChange) => {
-  return <ElInput modelValue={value as string} onChange={onChange} />
-}
-
-const handleChange = (value: FieldValueType) => {
-  console.log(value, 'change')
-}
-</script>

package/docs/examples/form-item/custom.vue

@@ -1,34 +0,0 @@
-<template>
-  <el-card>
-    <PlusFormItem
-      v-model="state"
-      label="自定义"
-      prop="name"
-      :field-props="{
-        placeholder: '请输入'
-      }"
-      :render-field="renderField"
-      @change="handleChange"
-    />
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { h, ref } from 'vue'
-import type { FieldValueType, PlusColumn } from 'plus-pro-components'
-import { ElInput } from 'element-plus'
-
-const state = ref()
-
-const renderField: PlusColumn['renderField'] = (_, onChange) => {
-  return h(ElInput, {
-    // 返回VNode时，需要手动调用 renderField 的onChange 回调把值传给表单
-    onChange,
-    placeholder: '请输入姓名'
-  })
-}
-
-const handleChange = (value: FieldValueType) => {
-  console.log(value, 'change')
-}
-</script>

package/docs/examples/header/basic.vue

@@ -1,3 +0,0 @@
-<template>
-  <PlusHeader />
-</template>