@vrojs/element-plus 0.0.2 → 0.0.4

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'

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

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

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

@@ -1,73 +0,0 @@
-# VroElTags
-
-### 介绍
-
-基于 `ElTag`、`ElInput` 和 `ElButton` 的标签编辑组件。支持通过 `v-model` 新增、删除标签，也可以设置为只读禁用状态。
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <vro-el-tags v-model="value" />
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-
-  const value = ref(['Vue', 'Element Plus'])
-</script>
-```
-
-### 禁用状态
-
-```html
-<vro-el-tags v-model="value" disabled />
-```
-
-## API
-
-### 属性 Props
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>类型</td>
-      <td>默认值</td>
-    </tr>
-    <tr v-for="(item, key) in vroElTagsProps" :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>
-  </tbody>
-</table>
-
-<script setup lang="ts">
-  import { reserve } from '@daysnap/utils'
-  import { VroElTags, vroElTagsProps } from '.'
-  import { parseType } from '../utils'
-</script>

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

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

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

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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-
-export const vroElTagsProps = {
-  /**
-   * 标签列表。
-   */
-  modelValue: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-
-  /**
-   * 是否禁用新增和删除标签。
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-}
-
-export type VroElTagsProps = ExtractPropTypes<typeof vroElTagsProps>

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

@@ -1,69 +0,0 @@
-<template>
-  <div class="vro-el-tags">
-    <el-tag
-      v-for="(item, index) in modelValue"
-      :key="`${item}-${index}`"
-      class="vro-el-tag"
-      size="large"
-      :closable="!disabled"
-      :disable-transitions="false"
-      @close="handleClose(index)"
-    >
-      {{ item }}
-    </el-tag>
-
-    <el-input
-      v-if="inputVisible"
-      ref="inputRef"
-      v-model="inputValue"
-      class="vro-el-tag-input"
-      @keyup.enter="handleInputConfirm"
-      @blur="handleInputConfirm"
-    />
-    <el-button v-else-if="!disabled" class="vro-el-tag-btn" :icon="Plus" @click="showInput">
-      {{ t('tags.addText') }}
-    </el-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { Plus } from '@element-plus/icons-vue'
-  import { ElButton, ElInput, ElTag } from 'element-plus'
-  import { nextTick, ref } from 'vue'
-
-  import { useLocale } from '../locale'
-  import { vroElTagsProps } from './types'
-
-  defineOptions({ name: 'VroElTags' })
-
-  const emit = defineEmits(['update:modelValue'])
-  const props = defineProps(vroElTagsProps)
-  const { t } = useLocale()
-
-  const inputValue = ref('')
-  const inputVisible = ref(false)
-  const inputRef = ref<InstanceType<typeof ElInput>>()
-
-  const handleClose = (index: number) => {
-    const value = props.modelValue.filter((_, valueIndex) => valueIndex !== index)
-    emit('update:modelValue', value)
-  }
-
-  const showInput = () => {
-    inputVisible.value = true
-    nextTick(() => {
-      inputRef.value?.input?.focus()
-    })
-  }
-
-  const handleInputConfirm = () => {
-    const value = [...props.modelValue]
-    const tag = inputValue.value.trim()
-    if (tag) {
-      value.push(tag)
-    }
-    emit('update:modelValue', value)
-    inputVisible.value = false
-    inputValue.value = ''
-  }
-</script>

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

@@ -1,85 +0,0 @@
-# VroElTree
-
-### 介绍
-
-基于 `ElTree` 的受控勾选封装。组件会把全选节点和半选节点一起同步到 `v-model`，适合权限树这类需要保存父子勾选链路的场景。
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <vro-el-tree
-    v-model="value"
-    show-checkbox
-    node-key="id"
-    default-expand-all
-    :options="options"
-    :props="{ label: 'label' }"
-  />
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-
-  const value = ref(['system'])
-  const options = [
-    {
-      id: 'system',
-      parentId: '-1',
-      label: '系统管理',
-      children: [
-        { id: 'user', parentId: 'system', label: '用户管理' },
-        { id: 'role', parentId: 'system', label: '角色管理' },
-      ],
-    },
-  ]
-</script>
-```
-
-## API
-
-### 属性 Props
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>类型</td>
-      <td>默认值</td>
-    </tr>
-    <tr v-for="(item, key) in vroElTreeProps" :key="key">
-      <td>{{ key }}</td>
-      <td>{{ parseType(item.type || item) }}</td>
-      <td>{{ reserve(item.default, '-') }}</td>
-    </tr>
-  </tbody>
-</table>
-
-### 插槽 Slots
-
-支持默认插槽，插槽参数同 `ElTree` 默认插槽。
-
-### 事件 Events
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>参数</td>
-      <td>说明</td>
-    </tr>
-    <tr>
-      <td>update:modelValue</td>
-      <td>value</td>
-      <td>勾选节点变化时触发，返回半选和全选节点 id</td>
-    </tr>
-  </tbody>
-</table>
-
-<script setup lang="ts">
-  import { reserve } from '@daysnap/utils'
-  import { VroElTree, vroElTreeProps } from '.'
-  import { parseType } from '../utils'
-</script>

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

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

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

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

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

@@ -1 +0,0 @@
-import 'element-plus/es/components/tree/style/css'

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

@@ -1,3 +0,0 @@
-.vro-el-tree {
-  user-select: none;
-}

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

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

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

@@ -1,38 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-
-export type VroElTreeKey = string | number
-
-export interface VroElTreeOption {
-  id: VroElTreeKey
-  parentId?: VroElTreeKey
-  children?: VroElTreeOption[]
-  [key: string]: any
-}
-
-export const vroElTreeProps = {
-  /**
-   * 选中的节点 id 列表，包含半选和全选节点。
-   */
-  modelValue: {
-    type: Array as PropType<VroElTreeKey[]>,
-    default: () => [],
-  },
-
-  /**
-   * 树节点数据，节点需要包含 id，可通过 parentId 表示父级关系。
-   */
-  options: {
-    type: Array as PropType<VroElTreeOption[]>,
-    default: () => [],
-  },
-
-  /**
-   * 根节点 id，用于判断顶层节点的选中链路。
-   */
-  rootId: {
-    type: [String, Number],
-    default: '-1',
-  },
-}
-
-export type VroElTreeProps = ExtractPropTypes<typeof vroElTreeProps>