@vrojs/element-plus 0.0.1 → 0.0.3

package/src/vro-el-image-upload/vro-el-image-upload.vue

@@ -1,134 +0,0 @@
-<template>
-  <div class="vro-el-image-upload">
-    <vue-draggable
-      class="vro-el-image-upload-content"
-      :disabled="props.disabled || props.max <= 1"
-      :animation="150"
-      :model-value="computeValue"
-      filter=".vro-el-image-upload-btn"
-      @update:model-value="handleUpdate"
-    >
-      <div class="vro-el-image-upload-item" v-for="(item, index) in computeValue" :key="item">
-        <el-image
-          class="vro-el-image-upload-image"
-          v-bind="props.imageProps"
-          :src="item"
-          :preview-src-list="computeValue"
-          :initial-index="index"
-        />
-        <el-icon
-          v-if="!props.disabled"
-          class="vro-el-image-upload-clear"
-          @click="handleDelete(index)"
-        >
-          <circle-close-filled />
-        </el-icon>
-      </div>
-      <div
-        v-if="computeValue.length < props.max && !props.disabled"
-        v-loading="loading"
-        class="vro-el-image-upload-item vro-el-image-upload-btn"
-      >
-        <el-icon class="vro-el-image-upload-add"><plus /></el-icon>
-        <input type="file" accept="image/*" :multiple="props.max > 1" @change="handleUpload" />
-      </div>
-    </vue-draggable>
-    <el-checkbox v-if="!props.disabled && props.compressible" v-model="compress">
-      {{ t('imageUpload.compressText') }}
-    </el-checkbox>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { isArray, isBoolean, isUndefined, omitBy } from '@daysnap/utils'
-  import { CircleCloseFilled, Plus } from '@element-plus/icons-vue'
-  import { useAsyncTask } from '@vrojs/use'
-  import { ElCheckbox, ElIcon, ElImage, ElLoading } from 'element-plus'
-  import { computed, ref } from 'vue'
-  import { VueDraggable } from 'vue-draggable-plus'
-
-  import { useLocale } from '../locale'
-  import { type VroElImageUploadProps, vroElImageUploadProps } from './types'
-  import { getVroElImageUploadOptions } from './utils'
-
-  defineOptions({ name: 'VroElImageUpload' })
-
-  const emit = defineEmits<{
-    'update:modelValue': [value: string | string[]]
-  }>()
-  const rawProps = defineProps(vroElImageUploadProps)
-  const { t } = useLocale()
-
-  const props = computed(() => {
-    const {
-      compressible = false,
-      upload,
-      ...rest
-    } = {
-      ...getVroElImageUploadOptions(),
-      ...omitBy(rawProps, isUndefined),
-    } as VroElImageUploadProps
-
-    return {
-      upload,
-      compressible,
-      compress: isBoolean(compressible) ? compressible : compressible.value,
-      ...rest,
-    }
-  })
-
-  const vLoading = ElLoading.directive
-  const compress = ref(props.value.compress)
-
-  const computeValue = computed(() => {
-    const { modelValue } = props.value
-    return isArray(modelValue) ? modelValue : modelValue ? [modelValue] : []
-  })
-
-  const handleUpdate = (value: string[]) => {
-    if (isArray(props.value.modelValue)) {
-      emit('update:modelValue', value)
-    }
-  }
-
-  const handleDelete = (index: number) => {
-    let value: string | string[] = ''
-    if (isArray(props.value.modelValue)) {
-      value = [...props.value.modelValue]
-      value.splice(index, 1)
-    }
-    emit('update:modelValue', value)
-  }
-
-  const { loading, trigger: handleUpload } = useAsyncTask(
-    async (event: Event) => {
-      const target = event.target as HTMLInputElement
-      const files = Array.from(target.files ?? [])
-
-      target.value = ''
-      if (!files?.length) {
-        return
-      }
-
-      const { max, upload, params } = props.value
-
-      if (!upload) {
-        throw new Error('not set upload')
-      }
-
-      const res = await upload(files.slice(0, max - computeValue.value.length), {
-        compress: compress.value,
-        params,
-      })
-
-      let value: string | string[] = res[0]
-      if (isArray(props.value.modelValue)) {
-        value = [...props.value.modelValue, ...res]
-      }
-      emit('update:modelValue', value)
-    },
-    {
-      throwError: true,
-    },
-  )
-</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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