@vrojs/element-plus 0.0.1

package/src/vro-el-schema-form-dialog/README.md

@@ -0,0 +1,64 @@
+# VroElSchemaFormDialog
+
+### 介绍
+
+...
+
+## 代码演示
+
+### 基础用法
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElSchemaFormDialogProps" :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>xx</td>
+      <td>xxx</td>
+    </tr>
+  </tbody>
+</table>
+
+### 实例方法
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>xx</td>
+      <td>xxx</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElSchemaFormDialog, vroElSchemaFormDialogProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-schema-form-dialog/function-call.ts

@@ -0,0 +1,12 @@
+import { showComponent } from '@vrojs/base'
+import { AppContext } from 'vue'
+
+import { VroElSchemaFormDialogProps } from './types'
+import VroElSchemaFormDialog from './vro-el-schema-form-dialog.vue'
+
+export function showVroElSchemaFormDialog<T = any>(
+  props: Partial<VroElSchemaFormDialogProps>,
+  appContext: AppContext | null = null,
+): Promise<T> {
+  return showComponent(VroElSchemaFormDialog, props, appContext)
+}

package/src/vro-el-schema-form-dialog/index.ts

@@ -0,0 +1,17 @@
+import { withInstall } from '@vrojs/base'
+
+import Component from './vro-el-schema-form-dialog.vue'
+
+export * from './function-call'
+export * from './types'
+
+export const VroElSchemaFormDialog = withInstall<typeof Component>(Component)
+export default VroElSchemaFormDialog
+
+export type VroElSchemaFormDialogInstance = InstanceType<typeof VroElSchemaFormDialog>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VroElSchemaFormDialog: typeof VroElSchemaFormDialog
+  }
+}

package/src/vro-el-schema-form-dialog/style/css.ts

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

package/src/vro-el-schema-form-dialog/style/index.scss

@@ -0,0 +1 @@
+.vro-el-schema-form-dialog { }

package/src/vro-el-schema-form-dialog/style/index.ts

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

package/src/vro-el-schema-form-dialog/types.ts

@@ -0,0 +1,5 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const vroElSchemaFormDialogProps = {}
+
+export type VroElSchemaFormDialogProps = ExtractPropTypes<typeof vroElSchemaFormDialogProps>

package/src/vro-el-schema-form-dialog/vro-el-schema-form-dialog.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-dialog v-model="visible" class="vro-el-schema-form-dialog">
+    <span>vro-el-schema-form-dialog</span>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+  import { useVisible } from '@vrojs/use'
+  import { ref } from 'vue'
+
+  import { VroElSchemaFormDialogProps, vroElSchemaFormDialogProps } from './types'
+
+  defineOptions({ name: 'VroElSchemaFormDialog' })
+  defineProps(vroElSchemaFormDialogProps)
+  const emit = defineEmits(['cancel', 'confirm'])
+
+  const dynamicProps = ref<any>()
+
+  const { show, hide, confirm, visible } = useVisible<Partial<VroElSchemaFormDialogProps>, any>({
+    showCallback: (options) => {
+      dynamicProps.value = options
+    },
+    hideCallback: (reason) => emit('cancel', reason),
+    confirmCallback: (data) => emit('confirm', data),
+  })
+
+  defineExpose({
+    show,
+    hide,
+    confirm,
+  })
+</script>

package/src/vro-el-select/README.md

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

package/src/vro-el-select/index.ts

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

package/src/vro-el-select/style/css.ts

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

package/src/vro-el-select/style/deps.ts

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

package/src/vro-el-select/style/index.scss

@@ -0,0 +1 @@
+.vro-el-select { }

package/src/vro-el-select/style/index.ts

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

package/src/vro-el-select/types.ts

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

package/src/vro-el-select/vro-el-select.vue

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

package/src/vro-el-skeleton/README.md

@@ -0,0 +1,128 @@
+# VroElSkeleton
+
+### 介绍
+
+用于统一处理内容区域的加载、错误和空状态。`loading` 时显示 `VroLoading` 加载指示器，`error` 时显示错误结果，`empty` 时显示空状态，其余情况渲染默认内容。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<vro-el-skeleton :loading="loading" :error="error" :empty="empty" @refresh="refresh">
+  <div>内容</div>
+</vro-el-skeleton>
+```
+
+### 自定义状态内容
+
+```html
+<vro-el-skeleton :error="error">
+  <template #error="{ refresh }">
+    <el-result icon="warning" title="加载失败">
+      <template #extra>
+        <el-button type="primary" @click="refresh">重试</el-button>
+      </template>
+    </el-result>
+  </template>
+</vro-el-skeleton>
+```
+
+### 加载样式
+
+```html
+<vro-el-skeleton loading loading-type="spinner" :loading-size="40" loading-color="#409eff" />
+```
+
+### 国际化文案
+
+默认文案通过 `VroElConfigProvider` 的 `locale` 配置，也可以通过组件属性覆盖。
+
+```html
+<vro-el-config-provider :locale="locale">
+  <vro-el-skeleton empty />
+</vro-el-config-provider>
+```
+
+```ts
+const locale = {
+  el: {
+    skeleton: {
+      emptyDescription: 'No data',
+      emptyBtnText: 'Reload',
+      errorTitle: 'Something went wrong',
+      errorBtnText: 'Retry',
+      loadingDescription: 'Loading...',
+    },
+  },
+}
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElSkeletonProps" :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>
+    <tr>
+      <td>loading</td>
+      <td>自定义加载状态内容</td>
+    </tr>
+    <tr>
+      <td>error</td>
+      <td>自定义错误状态内容，参数为 { error, refresh }</td>
+    </tr>
+    <tr>
+      <td>empty</td>
+      <td>自定义空状态内容，参数为 { refresh }</td>
+    </tr>
+  </tbody>
+</table>
+
+### 事件 Events
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>参数</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>refresh</td>
+      <td>-</td>
+      <td>点击默认错误或空状态按钮时触发</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElSkeleton, vroElSkeletonProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-skeleton/index.ts

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

package/src/vro-el-skeleton/style/css.ts

@@ -0,0 +1,3 @@
+import '../../style/base.scss'
+import '@vrojs/base/src/vro-loading/style/css'
+import './index.scss'

package/src/vro-el-skeleton/style/deps.ts

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/button/style/css'
+import 'element-plus/es/components/empty/style/css'
+import 'element-plus/es/components/result/style/css'

package/src/vro-el-skeleton/style/index.scss

@@ -0,0 +1,24 @@
+.vro-el-skeleton {
+  width: 100%;
+}
+
+.vro-el-skeleton__state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: inherit;
+}
+
+.vro-el-skeleton__loading {
+  flex-direction: column;
+  color: var(--el-text-color-secondary);
+}
+
+.vro-el-skeleton__description {
+  margin: 16px 0 0;
+  color: var(--el-text-color-secondary);
+  font-size: var(--el-font-size-base);
+  line-height: 1.5;
+  text-align: center;
+}

package/src/vro-el-skeleton/style/index.ts

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

package/src/vro-el-skeleton/types.ts

@@ -0,0 +1,86 @@
+import type { VroLoadingType } from '@vrojs/base'
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export const vroElSkeletonProps = {
+  /**
+   * 是否显示加载状态。
+   */
+  loading: Boolean,
+
+  /**
+   * 加载图标类型。
+   */
+  loadingType: {
+    type: String as PropType<VroLoadingType>,
+    default: 'circular',
+  },
+
+  /**
+   * 加载图标尺寸，传入数字时单位为 px。
+   */
+  loadingSize: {
+    type: [String, Number] as PropType<string | number>,
+    default: 32,
+  },
+
+  /**
+   * 加载图标颜色。
+   */
+  loadingColor: {
+    type: String,
+    default: 'currentColor',
+  },
+
+  /**
+   * 加载状态描述文案，未传时使用 locale 中的 skeleton.loadingDescription。
+   */
+  loadingDescription: String,
+
+  /**
+   * 错误信息。传入后会显示错误状态。
+   */
+  error: [Object, String] as PropType<unknown>,
+
+  /**
+   * 错误状态标题，未传时使用 locale 中的 skeleton.errorTitle。
+   */
+  errorTitle: String,
+
+  /**
+   * 错误状态按钮文案，未传时使用 locale 中的 skeleton.errorBtnText。
+   */
+  errorBtnText: String,
+
+  /**
+   * 是否显示空状态。
+   */
+  empty: Boolean,
+
+  /**
+   * 空状态描述文案，未传时使用 locale 中的 skeleton.emptyDescription。
+   */
+  emptyDescription: String,
+
+  /**
+   * 是否展示空状态刷新按钮。
+   */
+  showEmptyBtn: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * 空状态按钮文案，未传时使用 locale 中的 skeleton.emptyBtnText。
+   */
+  emptyBtnText: String,
+
+  /**
+   * 状态容器最小高度，传入数字时单位为 px。
+   */
+  minHeight: {
+    type: [String, Number] as PropType<string | number>,
+    default: '240px',
+  },
+}
+
+export type VroElSkeletonProps = ExtractPropTypes<typeof vroElSkeletonProps>

package/src/vro-el-skeleton/vro-el-skeleton.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="vro-el-skeleton" :style="rootStyle">
+    <template v-if="loading">
+      <slot name="loading">
+        <div class="vro-el-skeleton__state vro-el-skeleton__loading">
+          <vro-loading :type="loadingType" :size="loadingSize" :color="loadingColor" />
+          <p class="vro-el-skeleton__description">
+            {{ loadingDescription ?? t('skeleton.loadingDescription') }}
+          </p>
+        </div>
+      </slot>
+    </template>
+
+    <template v-else-if="error">
+      <slot name="error" :error="error" :refresh="handleRefresh">
+        <div class="vro-el-skeleton__state">
+          <el-result
+            icon="error"
+            :title="errorTitle ?? t('skeleton.errorTitle')"
+            :sub-title="formatMessage(error)"
+          >
+            <template #extra>
+              <el-button type="primary" @click="handleRefresh">
+                {{ errorBtnText ?? t('skeleton.errorBtnText') }}
+              </el-button>
+            </template>
+          </el-result>
+        </div>
+      </slot>
+    </template>
+
+    <template v-else-if="empty">
+      <slot name="empty" :refresh="handleRefresh">
+        <div class="vro-el-skeleton__state">
+          <el-empty :description="emptyDescription ?? t('skeleton.emptyDescription')">
+            <el-button v-if="showEmptyBtn" type="primary" @click="handleRefresh">
+              {{ emptyBtnText ?? t('skeleton.emptyBtnText') }}
+            </el-button>
+          </el-empty>
+        </div>
+      </slot>
+    </template>
+
+    <slot v-else></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { formatMessage } from '@daysnap/utils'
+  import { VroLoading } from '@vrojs/base'
+  import { ElButton, ElEmpty, ElResult } from 'element-plus'
+  import { computed } from 'vue'
+
+  import { useLocale } from '../locale'
+  import { vroElSkeletonProps } from './types'
+
+  const emit = defineEmits<{
+    (event: 'refresh'): void
+  }>()
+
+  defineOptions({ name: 'VroElSkeleton' })
+
+  const props = defineProps(vroElSkeletonProps)
+  const { t } = useLocale()
+
+  const rootStyle = computed(() => ({
+    minHeight: typeof props.minHeight === 'number' ? `${props.minHeight}px` : props.minHeight,
+  }))
+
+  const handleRefresh = () => {
+    emit('refresh')
+  }
+</script>