@wlydfe/pro-ui 0.2.19 → 0.2.21

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

@@ -0,0 +1,328 @@
+<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

@@ -0,0 +1,98 @@
+<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

@@ -0,0 +1,96 @@
+<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

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,34 @@
+<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

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