@vrojs/element-plus 0.0.1

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@vrojs/element-plus",
+  "version": "0.0.1",
+  "description": "vrojs ui",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "!src/**/demo",
+    "!src/**/README.md"
+  ],
+  "sideEffects": [
+    "src/**/style/*"
+  ],
+  "keywords": [
+    "vro",
+    "vrojs",
+    "ui",
+    "element-plus",
+    "vue"
+  ],
+  "author": "woshiajuana",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "copy-to-clipboard": "^3.3.3",
+    "vue-draggable-plus": "^0.6.1"
+  },
+  "peerDependencies": {
+    "@daysnap/banana": ">=0.0.15",
+    "@daysnap/utils": ">=0.1.34",
+    "@element-plus/icons-vue": ">=2.3.2",
+    "element-plus": ">=2.11.9",
+    "vue": ">=3.0.0",
+    "@vrojs/base": "0.0.1",
+    "@vrojs/use": "0.0.1"
+  },
+  "devDependencies": {
+    "@daysnap/banana": "^0.0.15",
+    "@daysnap/utils": "^0.1.34",
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-plus": "^2.11.9",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.22",
+    "@vrojs/use": "0.0.1",
+    "@vrojs/base": "0.0.1"
+  },
+  "scripts": {
+    "release": "dsc publish --pnpm",
+    "sync": "dsc sync"
+  }
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+/* 本文件自动生成 './scripts/index.ts' */
+
+export * from './locale'
+export * from './utils'
+export * from './vro-el-checkbox-group'
+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-schema-form-dialog'
+export * from './vro-el-select'
+export * from './vro-el-skeleton'
+export * from './vro-el-with-config'

package/src/locale/index.ts

@@ -0,0 +1,3 @@
+export { default as zhCN } from './lang/zh-cn'
+export * from './types'
+export * from './useLocale'

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

@@ -0,0 +1,22 @@
+export default {
+  name: 'zh-cn',
+  el: {
+    table: {
+      refresh: '刷新',
+      description: '当前颜色 {color}，按 Enter 键选择新颜色',
+    },
+    skeleton: {
+      loadingDescription: '正在加载数据...',
+      emptyDescription: '暂无数据',
+      emptyBtnText: '刷新',
+      errorTitle: '哦嗬！出错了哦~',
+      errorBtnText: '刷新',
+    },
+    fileUpload: {
+      btnText: '上传',
+    },
+    imageUpload: {
+      compressText: '是否压缩',
+    },
+  },
+}

package/src/locale/types.ts

@@ -0,0 +1,8 @@
+export type TranslatePair = {
+  [key: string]: string | string[] | TranslatePair
+}
+
+export type Locale = {
+  name: string
+  el: TranslatePair
+}

package/src/locale/useLocale.ts

@@ -0,0 +1,42 @@
+import { computed, inject, type InjectionKey, type Ref } from 'vue'
+
+import zhCN from './lang/zh-cn'
+import type { Locale, TranslatePair } from './types'
+
+export const localeContextKey: InjectionKey<Ref<Locale | undefined>> = Symbol('localeContextKey')
+
+export function useLocale() {
+  const injectedLocale = inject(localeContextKey, undefined)
+
+  const locale = computed(() => injectedLocale?.value ?? zhCN)
+
+  const t = (path: string, option?: Record<string, string | number>) => {
+    const value = get(locale.value.el, path)
+
+    if (typeof value !== 'string') {
+      return path
+    }
+
+    if (!option) {
+      return value
+    }
+
+    return value.replace(/\{(\w+)\}/g, (_, key) => `${option[key] ?? `{${key}}`}`)
+  }
+
+  return {
+    locale,
+    lang: computed(() => locale.value.name),
+    t,
+  }
+}
+
+function get(source: TranslatePair, path: string) {
+  return path.split('.').reduce<TranslatePair[string] | undefined>((res, key) => {
+    if (res && typeof res === 'object' && !Array.isArray(res)) {
+      return res[key]
+    }
+
+    return undefined
+  }, source)
+}

package/src/style/base.scss

@@ -0,0 +1,2 @@
+:root {
+}

package/src/style/css.ts

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

package/src/style/deps.ts

@@ -0,0 +1,9 @@
+import '../vro-el-checkbox-group/style/deps'
+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-schema-form-dialog/style/deps'
+import '../vro-el-select/style/deps'
+import '../vro-el-skeleton/style/deps'
+import '../vro-el-with-config/style/deps'

package/src/style/index.scss

@@ -0,0 +1,12 @@
+/* 本文件自动生成 './scripts/index.ts' */
+
+@use './base.scss' as *;
+@use '../vro-el-checkbox-group/style/index.scss' as *;
+@use '../vro-el-config-provider/style/index.scss' as *;
+@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-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-with-config/style/index.scss' as *;

package/src/style/index.ts

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

package/src/utils/datePickerValueFormat.ts

@@ -0,0 +1,6 @@
+export const datePickerValueFormat: Record<string, string> = {
+  date: 'YYYY-MM-DD',
+  daterange: 'YYYY-MM-DD',
+  datetimerange: 'YYYY-MM-DD HH:mm:ss',
+  datetime: 'YYYY-MM-DD HH:mm:ss',
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './datePickerValueFormat'
+export { parseType } from '@vrojs/base'

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

@@ -0,0 +1,83 @@
+# VroElCheckboxGroup
+
+### 介绍
+
+基于 `ElCheckboxGroup` 和 `ElCheckbox` 的选项化封装。适合通过 `options` 快速渲染一组选项，同时保留 Element Plus CheckboxGroup 的原有属性和事件。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <vro-el-checkbox-group v-model="value" :options="options" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const value = ref(['apple'])
+  const options = [
+    { label: '苹果', value: 'apple' },
+    { label: '香蕉', value: 'banana' },
+    { label: '橙子', value: 'orange', props: { disabled: true } },
+  ]
+</script>
+```
+
+### 自定义字段名
+
+```html
+<vro-el-checkbox-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 vroElCheckboxGroupProps" :key="key">
+      <td>{{ key }}</td>
+      <td>{{ parseType(item.type || item) }}</td>
+      <td>{{ reserve(item.default, '-') }}</td>
+    </tr>
+  </tbody>
+</table>
+
+### 插槽 Slots
+
+支持默认插槽，传入后会作为 `ElCheckboxGroup` 的内容，覆盖 `options` 自动渲染的选项。
+
+### 事件 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 CheckboxGroup change 事件</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElCheckboxGroup, vroElCheckboxGroupProps } from '.'
+  import { parseType } from '../utils'
+</script>

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { checkboxGroupProps } from 'element-plus'
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export const vroElCheckboxGroupProps = {
+  ...checkboxGroupProps,
+
+  options: Array as PropType<any[]>,
+  labelKey: {
+    type: String,
+    default: 'label',
+  },
+  valueKey: {
+    type: String,
+    default: 'value',
+  },
+}
+
+export type VroElCheckboxGroupProps = ExtractPropTypes<typeof vroElCheckboxGroupProps>

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

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

package/src/vro-el-config-provider/README.md

@@ -0,0 +1,65 @@
+# VroElConfigProvider
+
+### 介绍
+
+为 Vro Element Plus 组件提供全局配置，目前用于统一内部文案。`locale` 支持局部覆盖，未传入的字段会使用默认中文文案。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<vro-el-config-provider :locale="locale">
+  <app />
+</vro-el-config-provider>
+```
+
+```ts
+const locale = {
+  el: {
+    table: {
+      refresh: '重新加载',
+    },
+  },
+}
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElConfigProviderProps" :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>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElConfigProvider, vroElConfigProviderProps } from '.'
+  import { parseType } from '../utils'
+</script>

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

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

package/src/vro-el-config-provider/style/css.ts

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

package/src/vro-el-config-provider/style/index.ts

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

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

@@ -0,0 +1,18 @@
+import { DeepPartial } from '@vrojs/base'
+import type { ExtractPropTypes, PropType } from 'vue'
+
+import type { Locale } from '../locale'
+
+export type VroElLocale = DeepPartial<Locale>
+
+export const vroElConfigProviderProps = {
+  /**
+   * 组件内部文案配置，支持局部覆盖。
+   */
+  locale: {
+    type: Object as PropType<VroElLocale>,
+    default: () => ({}),
+  },
+}
+
+export type VroElConfigProviderProps = ExtractPropTypes<typeof vroElConfigProviderProps>

package/src/vro-el-config-provider/vro-el-config-provider.vue

@@ -0,0 +1,19 @@
+<template>
+  <slot> </slot>
+</template>
+
+<script setup lang="ts">
+  import { merge } from '@daysnap/utils'
+  import { computed, provide } from 'vue'
+
+  import { localeContextKey, zhCN } from '../locale'
+  import { vroElConfigProviderProps } from './types'
+
+  defineOptions({ name: 'VroElConfigProvider' })
+
+  const props = defineProps(vroElConfigProviderProps)
+
+  const locale = computed(() => merge({}, zhCN, props.locale))
+
+  provide(localeContextKey, locale)
+</script>

package/src/vro-el-file-upload/README.md

@@ -0,0 +1,89 @@
+# VroElFileUpload
+
+### 介绍
+
+基于 Element Plus Button 的轻量文件上传组件。组件只负责选择文件、展示已上传地址和删除交互，实际上传逻辑由 `upload` 回调提供。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <vro-el-file-upload v-model="value" :upload="upload" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const value = ref('')
+
+  const upload = async (files: File[]) => {
+    return files.map((file) => URL.createObjectURL(file))
+  }
+</script>
+```
+
+### 多文件上传
+
+```html
+<vro-el-file-upload v-model="value" :max="3" :upload="upload" />
+```
+
+### 全局上传配置
+
+```ts
+import { setVroElFileUploadOptions } from '@vrojs/element-plus'
+
+setVroElFileUploadOptions({
+  upload: async (files, { params }) => {
+    return files.map((file) => `${params.domain}/${file.name}`)
+  },
+})
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElFileUploadProps" :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: string | string[]</td>
+      <td>上传或删除后触发</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElFileUpload, vroElFileUploadProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-file-upload/index.ts

@@ -0,0 +1,17 @@
+import { withInstall } from '@vrojs/base'
+
+import Component from './vro-el-file-upload.vue'
+
+export * from './types'
+export * from './utils'
+
+export const VroElFileUpload = withInstall<typeof Component>(Component)
+export default VroElFileUpload
+
+export type VroElFileUploadInstance = InstanceType<typeof VroElFileUpload>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VroElFileUpload: typeof VroElFileUpload
+  }
+}

package/src/vro-el-file-upload/style/css.ts

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

package/src/vro-el-file-upload/style/deps.ts

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

package/src/vro-el-file-upload/style/index.scss

@@ -0,0 +1,30 @@
+.vro-el-file-upload-btn {
+  position: relative;
+  input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+.vro-el-file-upload-item {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  a {
+    text-decoration: underline;
+    color: #007bee;
+    margin-right: 10px;
+  }
+  i {
+    cursor: pointer;
+    margin-right: 10px;
+    color: #ee0000;
+    background-color: #f2f2f2;
+  }
+}

package/src/vro-el-file-upload/style/index.ts

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