@vrojs/element-plus 0.0.1 → 0.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,78 @@
+<template>
+  <el-tree
+    v-bind="$attrs"
+    class="vro-el-tree"
+    :data="options"
+    :default-checked-keys="checkedKeys"
+    @check="handleCheck"
+  >
+    <template v-if="$slots.default" #default="scope">
+      <slot v-bind="scope" />
+    </template>
+  </el-tree>
+</template>
+
+<script setup lang="ts">
+  import { isUndefined } from '@daysnap/utils'
+  import { ElTree } from 'element-plus'
+  import { computed } from 'vue'
+
+  import { type VroElTreeKey, type VroElTreeOption, vroElTreeProps } from './types'
+
+  defineOptions({ name: 'VroElTree' })
+
+  const emit = defineEmits<{
+    (event: 'update:modelValue', value: VroElTreeKey[]): void
+  }>()
+  const props = defineProps(vroElTreeProps)
+
+  const checkedKeys = computed(() => {
+    const { modelValue, options, rootId } = props
+    const { childIds, mapping } = parseNodeIds(options)
+    const modelValueMap = modelValue.reduce(
+      (acc, id) => {
+        acc[id] = true
+        return acc
+      },
+      {} as Record<VroElTreeKey, boolean>,
+    )
+
+    const loop = (id: VroElTreeKey): boolean => {
+      if (id === rootId) {
+        return true
+      }
+      if (!modelValueMap[id]) {
+        return false
+      }
+      const parentId = mapping[id]
+      return !isUndefined(parentId) && loop(parentId)
+    }
+
+    return childIds.filter(loop)
+  })
+
+  const handleCheck = (_: any, data: any) => {
+    const { checkedKeys, halfCheckedKeys } = data
+    emit('update:modelValue', [...halfCheckedKeys, ...checkedKeys])
+  }
+
+  function parseNodeIds(
+    data: VroElTreeOption[],
+    mapping: Partial<Record<VroElTreeKey, VroElTreeKey>> = {},
+  ) {
+    const childIds: VroElTreeKey[] = []
+
+    data.forEach((item) => {
+      if (!isUndefined(item.parentId)) {
+        mapping[item.id] = item.parentId
+      }
+      if (item.children && item.children.length > 0) {
+        const res = parseNodeIds(item.children ?? [], mapping)
+        childIds.push(...res.childIds)
+      } else {
+        childIds.push(item.id)
+      }
+    })
+    return { childIds, mapping }
+  }
+</script>