@vrojs/element-plus 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vrojs/element-plus",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "vrojs ui",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -46,8 +46,8 @@
     "rimraf": "^6.0.1",
     "typescript": "^5.9.3",
     "vue": "^3.5.22",
-    "@vrojs/use": "0.0.1",
-    "@vrojs/base": "0.0.1"
+    "@vrojs/base": "0.0.1",
+    "@vrojs/use": "0.0.1"
   },
   "scripts": {
     "release": "dsc publish --pnpm",

package/src/index.ts

@@ -7,7 +7,12 @@ export * from './vro-el-config-provider'
 export * from './vro-el-file-upload'
 export * from './vro-el-icon'
 export * from './vro-el-image-upload'
+export * from './vro-el-radio-group'
+export * from './vro-el-schema-filter'
+export * from './vro-el-schema-form'
 export * from './vro-el-schema-form-dialog'
 export * from './vro-el-select'
 export * from './vro-el-skeleton'
+export * from './vro-el-tags'
+export * from './vro-el-tree'
 export * from './vro-el-with-config'

package/src/locale/lang/zh-cn.ts

@@ -18,5 +18,29 @@ export default {
     imageUpload: {
       compressText: '是否压缩',
     },
+    tags: {
+      addText: '新增',
+    },
+    schemaForm: {
+      ElInput: {
+        placeholder: '请填写',
+      },
+      ElSelect: {
+        placeholder: '请选择',
+      },
+      ElDatePicker: {
+        placeholder: '请选择',
+        startPlaceholder: '请选择',
+        endPlaceholder: '请选择',
+      },
+    },
+    schemaFilter: {
+      searchText: '搜索',
+      resetText: '重置',
+    },
+    schemaFormDialog: {
+      cancelText: '取消',
+      confirmText: '确认',
+    },
   },
 }

package/src/style/deps.ts

@@ -3,7 +3,12 @@ import '../vro-el-config-provider/style/deps'
 import '../vro-el-file-upload/style/deps'
 import '../vro-el-icon/style/deps'
 import '../vro-el-image-upload/style/deps'
+import '../vro-el-radio-group/style/deps'
+import '../vro-el-schema-filter/style/deps'
+import '../vro-el-schema-form/style/deps'
 import '../vro-el-schema-form-dialog/style/deps'
 import '../vro-el-select/style/deps'
 import '../vro-el-skeleton/style/deps'
+import '../vro-el-tags/style/deps'
+import '../vro-el-tree/style/deps'
 import '../vro-el-with-config/style/deps'

package/src/style/index.scss

@@ -6,7 +6,12 @@
 @use '../vro-el-file-upload/style/index.scss' as *;
 @use '../vro-el-icon/style/index.scss' as *;
 @use '../vro-el-image-upload/style/index.scss' as *;
+@use '../vro-el-radio-group/style/index.scss' as *;
+@use '../vro-el-schema-filter/style/index.scss' as *;
+@use '../vro-el-schema-form/style/index.scss' as *;
 @use '../vro-el-schema-form-dialog/style/index.scss' as *;
 @use '../vro-el-select/style/index.scss' as *;
 @use '../vro-el-skeleton/style/index.scss' as *;
+@use '../vro-el-tags/style/index.scss' as *;
+@use '../vro-el-tree/style/index.scss' as *;
 @use '../vro-el-with-config/style/index.scss' as *;

package/src/vro-el-config-provider/types.ts

@@ -1,4 +1,4 @@
-import { DeepPartial } from '@vrojs/base'
+import { type DeepPartial } from '@vrojs/base'
 import type { ExtractPropTypes, PropType } from 'vue'
 
 import type { Locale } from '../locale'

package/src/vro-el-radio-group/README.md

@@ -0,0 +1,83 @@
+# VroElRadioGroup
+
+### 介绍
+
+基于 `ElRadioGroup` 和 `ElRadio` 的选项化封装。适合通过 `options` 快速渲染单选项，同时保留 Element Plus RadioGroup 的原有属性和事件。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <vro-el-radio-group v-model="value" :options="options" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const value = ref('daily')
+  const options = [
+    { label: '每天', value: 'daily' },
+    { label: '每周', value: 'weekly' },
+    { label: '每月', value: 'monthly', props: { disabled: true } },
+  ]
+</script>
+```
+
+### 自定义字段名
+
+```html
+<vro-el-radio-group v-model="value" :options="options" label-key="name" value-key="id" />
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElRadioGroupProps" :key="key">
+      <td>{{ key }}</td>
+      <td>{{ parseType(item.type || item) }}</td>
+      <td>{{ reserve(item.default, '-') }}</td>
+    </tr>
+  </tbody>
+</table>
+
+### 插槽 Slots
+
+暂无。
+
+### 事件 Events
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>参数</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>update:modelValue</td>
+      <td>value</td>
+      <td>选中值变化时触发</td>
+    </tr>
+    <tr>
+      <td>change</td>
+      <td>value</td>
+      <td>同 Element Plus RadioGroup change 事件</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElRadioGroup, vroElRadioGroupProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-radio-group/index.ts

@@ -0,0 +1,16 @@
+import { withInstall } from '@vrojs/base'
+
+import Component from './vro-el-radio-group.vue'
+
+export * from './types'
+
+export const VroElRadioGroup = withInstall<typeof Component>(Component)
+export default VroElRadioGroup
+
+export type VroElRadioGroupInstance = InstanceType<typeof VroElRadioGroup>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VroElRadioGroup: typeof VroElRadioGroup
+  }
+}

package/src/vro-el-radio-group/style/css.ts

@@ -0,0 +1,2 @@
+import '../../style/base.scss'
+import './index.scss'

package/src/vro-el-radio-group/style/deps.ts

@@ -0,0 +1,2 @@
+import 'element-plus/es/components/radio-group/style/css'
+import 'element-plus/es/components/radio/style/css'

package/src/vro-el-radio-group/style/index.scss

@@ -0,0 +1 @@
+.vro-el-radio-group { }

package/src/vro-el-radio-group/style/index.ts

@@ -0,0 +1,2 @@
+import './deps'
+import './css'

package/src/vro-el-radio-group/types.ts

@@ -0,0 +1,29 @@
+import { radioGroupProps } from 'element-plus'
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export const vroElRadioGroupProps = {
+  ...radioGroupProps,
+
+  /**
+   * 选项列表，支持基础值或对象配置。
+   */
+  options: Array as PropType<any[]>,
+
+  /**
+   * 选项展示文本的字段名。
+   */
+  labelKey: {
+    type: String,
+    default: 'label',
+  },
+
+  /**
+   * 选项绑定值的字段名。
+   */
+  valueKey: {
+    type: String,
+    default: 'value',
+  },
+}
+
+export type VroElRadioGroupProps = ExtractPropTypes<typeof vroElRadioGroupProps>

package/src/vro-el-radio-group/vro-el-radio-group.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-radio-group
+    v-bind="restProps"
+    class="vro-el-radio-group"
+    @update:model-value="$emit('update:modelValue', $event)"
+    @change="$emit('change', $event)"
+  >
+    <el-radio
+      v-for="(option, index) in options"
+      v-bind="option.props"
+      :key="index"
+      :value="option[valueKey || 'value'] ?? option"
+    >
+      {{ option[labelKey || 'label'] ?? option }}
+    </el-radio>
+  </el-radio-group>
+</template>
+
+<script setup lang="ts">
+  import { pick } from '@daysnap/utils'
+  import { ElRadio, ElRadioGroup, radioGroupProps } from 'element-plus'
+  import { computed } from 'vue'
+
+  import { vroElRadioGroupProps } from './types'
+
+  defineOptions({ name: 'VroElRadioGroup' })
+
+  defineEmits(['update:modelValue', 'change'])
+  const props = defineProps(vroElRadioGroupProps)
+
+  const restProps = computed(() => {
+    return pick(props, Object.keys(radioGroupProps) as any[])
+  })
+</script>

package/src/vro-el-schema-filter/README.md

@@ -0,0 +1,146 @@
+# VroElSchemaFilter
+
+### 介绍
+
+基于 `VroElSchemaForm` 的筛选表单组件。组件会根据 `schema` 渲染筛选项，并内置搜索、重置按钮，适合列表页、表格页的查询条件区域。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <vro-el-schema-filter
+    :schema="schema"
+    :form-props="{ labelWidth: '90px' }"
+    @query="handleQuery"
+    @reset="handleReset"
+  />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import type { VroElSchemaFormSchema } from '@vrojs/element-plus'
+
+  const schema = ref<VroElSchemaFormSchema>({
+    keyword: {
+      label: '关键词',
+      value: '',
+      is: 'ElInput',
+      props: {
+        placeholder: '请输入关键词',
+      },
+    },
+    status: {
+      label: '状态',
+      value: '',
+      defaultValue: '',
+      is: 'VroElSelect',
+      options: [
+        { label: '启用', value: 'enabled' },
+        { label: '停用', value: 'disabled' },
+      ],
+    },
+  })
+
+  const handleQuery = (value) => {
+    console.log(value)
+  }
+
+  const handleReset = () => {
+    console.log('reset')
+  }
+</script>
+```
+
+### 重置默认值
+
+字段存在 `defaultValue` 时，点击重置会恢复为 `defaultValue`；否则会根据当前值类型重置为空字符串、空数组或空对象。
+
+```ts
+const schema = {
+  type: {
+    label: '类型',
+    value: 'all',
+    defaultValue: 'all',
+    is: 'VroElRadioGroup',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '个人', value: 'personal' },
+      { label: '企业', value: 'company' },
+    ],
+  },
+}
+```
+
+### 自定义按钮区域
+
+默认插槽会追加到搜索、重置按钮后面。
+
+```html
+<vro-el-schema-filter :schema="schema">
+  <el-button>导出</el-button>
+</vro-el-schema-filter>
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElSchemaFilterProps" :key="key">
+      <td>{{ key }}</td>
+      <td>{{ parseType(item.type || item) }}</td>
+      <td>{{ reserve(item.default, '-') }}</td>
+    </tr>
+  </tbody>
+</table>
+
+### 插槽 Slots
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>default</td>
+      <td>搜索、重置按钮后的自定义内容</td>
+    </tr>
+  </tbody>
+</table>
+
+### 事件 Events
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>参数</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>query</td>
+      <td>value</td>
+      <td>点击搜索或回车查询时触发，参数为过滤空值后的表单值</td>
+    </tr>
+    <tr>
+      <td>reset</td>
+      <td>-</td>
+      <td>点击重置时触发</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElSchemaFilter, vroElSchemaFilterProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-schema-filter/index.ts

@@ -0,0 +1,16 @@
+import { withInstall } from '@vrojs/base'
+
+import Component from './vro-el-schema-filter.vue'
+
+export * from './types'
+
+export const VroElSchemaFilter = withInstall<typeof Component>(Component)
+export default VroElSchemaFilter
+
+export type VroElSchemaFilterInstance = InstanceType<typeof VroElSchemaFilter>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VroElSchemaFilter: typeof VroElSchemaFilter
+  }
+}

package/src/vro-el-schema-filter/style/css.ts

@@ -0,0 +1,3 @@
+import '../../style/base.scss'
+import '../../vro-el-schema-form/style/css'
+import './index.scss'

package/src/vro-el-schema-filter/style/deps.ts

@@ -0,0 +1,4 @@
+import '../../vro-el-schema-form/style/deps'
+import 'element-plus/es/components/button/style/css'
+import 'element-plus/es/components/col/style/css'
+import 'element-plus/es/components/form-item/style/css'

package/src/vro-el-schema-filter/style/index.scss

@@ -0,0 +1,20 @@
+.vro-el-schema-filter {
+  display: block;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0 16px 16px;
+  background-color: var(--el-bg-color);
+  .el-form-item__label {
+    display: flex;
+    align-items: center;
+    text-align: right;
+    line-height: 1.1;
+    margin-bottom: 0;
+  }
+  .el-form-item {
+    margin-bottom: 0;
+  }
+  .el-col {
+    margin-top: 16px;
+  }
+}

package/src/vro-el-schema-filter/style/index.ts

@@ -0,0 +1,2 @@
+import './deps'
+import './css'

package/src/vro-el-schema-filter/types.ts

@@ -0,0 +1,31 @@
+import type { ColProps } from 'element-plus'
+import type { ExtractPropTypes, PropType } from 'vue'
+
+import { vroElSchemaFormProps } from '../vro-el-schema-form'
+
+export const vroElSchemaFilterProps = {
+  ...vroElSchemaFormProps,
+
+  /**
+   * 筛选项默认栅格配置。
+   */
+  colProps: {
+    type: Object as PropType<Partial<ColProps>>,
+    default: () => ({ span: 8 }),
+  },
+
+  /**
+   * 表单标签宽度，透传给内部 VroElSchemaForm。
+   */
+  labelWidth: {
+    type: [String, Number] as PropType<string | number>,
+    default: '120px',
+  },
+
+  /**
+   * 查询和重置按钮 loading 状态。
+   */
+  loading: Boolean,
+}
+
+export type VroElSchemaFilterProps = ExtractPropTypes<typeof vroElSchemaFilterProps>

package/src/vro-el-schema-filter/vro-el-schema-filter.vue

@@ -0,0 +1,64 @@
+<template>
+  <vro-el-schema-form
+    v-bind="props"
+    ref="refVroElSchemaForm"
+    class="vro-el-schema-filter"
+    @submit.prevent
+    @keyup.enter="handleQuery"
+  >
+    <el-col v-bind="colProps">
+      <el-form-item v-bind="formItemProps">
+        <el-button type="primary" :icon="Search" :loading="loading" @click="handleQuery">
+          {{ t('schemaFilter.searchText') }}
+        </el-button>
+        <el-button :icon="RefreshRight" :loading="loading" @click="handleReset">
+          {{ t('schemaFilter.resetText') }}
+        </el-button>
+        <slot></slot>
+      </el-form-item>
+    </el-col>
+  </vro-el-schema-form>
+</template>
+
+<script setup lang="ts">
+  import { filterEmptyValue, isArray, isFunction, isObject, isUndefined } from '@daysnap/utils'
+  import { RefreshRight, Search } from '@element-plus/icons-vue'
+  import { ElButton, ElCol, ElFormItem } from 'element-plus'
+  import { useTemplateRef } from 'vue'
+
+  import { useLocale } from '../locale'
+  import { VroElSchemaForm } from '../vro-el-schema-form'
+  import { vroElSchemaFilterProps } from './types'
+
+  defineOptions({ name: 'VroElSchemaFilter' })
+
+  const emit = defineEmits(['query', 'reset'])
+  const props = defineProps(vroElSchemaFilterProps)
+  const { t } = useLocale()
+
+  const refVroElSchemaForm = useTemplateRef('refVroElSchemaForm')
+
+  const handleQuery = async () => {
+    const data = (await refVroElSchemaForm.value?.extractValues()) ?? {}
+    emit('query', filterEmptyValue(data, true))
+  }
+  const handleReset = () => {
+    Object.values(props.schema).forEach((filed) => {
+      // eslint-disable-next-line prefer-const
+      let { value, resetValue } = filed
+      if (!isUndefined(resetValue)) {
+        value = isFunction(resetValue) ? resetValue(value) : resetValue
+      } else if (isArray(value)) {
+        value = []
+      } else if (isObject(value)) {
+        value = {}
+      } else {
+        value = ''
+      }
+      filed.value = value
+    })
+    refVroElSchemaForm.value?.resetFields()
+    emit('reset')
+    handleQuery()
+  }
+</script>