foucui 1.0.1

package/components/QiuTransfer/index.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="qiu-transfer">
+    <div class="qiu-transfer__panel">
+      <div class="qiu-transfer__header">
+        <qiu-checkbox
+          :model-value="leftAllChecked"
+          :indeterminate="leftIndeterminate"
+          @change="toggleLeftAll"
+        />
+        <span class="qiu-transfer__title">{{ titles[0] }}</span>
+        <span class="qiu-transfer__count">{{ leftChecked.length }}/{{ leftData.length }}</span>
+      </div>
+      <div v-if="filterable" class="qiu-transfer__filter">
+        <qiu-input
+          v-model="leftFilter"
+          :placeholder="filterPlaceholder"
+          prefix-icon="search-line"
+        />
+      </div>
+      <div class="qiu-transfer__body">
+        <qiu-checkbox-group v-model="leftChecked">
+          <div
+            v-for="item in filteredLeft"
+            :key="String(item.key)"
+            class="qiu-transfer__item"
+          >
+            <qiu-checkbox :label="item.key" :disabled="item.disabled">
+              {{ item.label }}
+            </qiu-checkbox>
+          </div>
+        </qiu-checkbox-group>
+        <div v-if="!filteredLeft.length" class="qiu-transfer__empty">无数据</div>
+      </div>
+    </div>
+
+    <div class="qiu-transfer__buttons">
+      <qiu-button
+        type="primary"
+        :disabled="!leftChecked.length"
+        @click="moveToRight"
+      >
+        {{ buttonTexts[1] }} ›
+      </qiu-button>
+      <qiu-button
+        :disabled="!rightChecked.length"
+        @click="moveToLeft"
+      >
+        ‹ {{ buttonTexts[0] }}
+      </qiu-button>
+    </div>
+
+    <div class="qiu-transfer__panel">
+      <div class="qiu-transfer__header">
+        <qiu-checkbox
+          :model-value="rightAllChecked"
+          :indeterminate="rightIndeterminate"
+          @change="toggleRightAll"
+        />
+        <span class="qiu-transfer__title">{{ titles[1] }}</span>
+        <span class="qiu-transfer__count">{{ rightChecked.length }}/{{ rightData.length }}</span>
+      </div>
+      <div v-if="filterable" class="qiu-transfer__filter">
+        <qiu-input
+          v-model="rightFilter"
+          :placeholder="filterPlaceholder"
+          prefix-icon="search-line"
+        />
+      </div>
+      <div class="qiu-transfer__body">
+        <qiu-checkbox-group v-model="rightChecked">
+          <div
+            v-for="item in filteredRight"
+            :key="String(item.key)"
+            class="qiu-transfer__item"
+          >
+            <qiu-checkbox :label="item.key" :disabled="item.disabled">
+              {{ item.label }}
+            </qiu-checkbox>
+          </div>
+        </qiu-checkbox-group>
+        <div v-if="!filteredRight.length" class="qiu-transfer__empty">无数据</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface QiuTransferItem {
+  key: string | number
+  label: string
+  disabled?: boolean
+}
+
+defineOptions({ name: 'QiuTransfer' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: (string | number)[]
+    data?: QiuTransferItem[]
+    titles?: [string, string]
+    filterable?: boolean
+    filterPlaceholder?: string
+    buttonTexts?: [string, string]
+  }>(),
+  {
+    modelValue: () => [],
+    data: () => [],
+    titles: () => ['列表 1', '列表 2'],
+    filterable: false,
+    filterPlaceholder: '请输入搜索内容',
+    buttonTexts: () => ['移除', '添加'],
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [(string | number)[]]
+  change: [(string | number)[]]
+}>()
+
+const leftChecked = ref<(string | number)[]>([])
+const rightChecked = ref<(string | number)[]>([])
+const leftFilter = ref('')
+const rightFilter = ref('')
+
+const leftData = computed(() =>
+  props.data.filter((item) => !props.modelValue.includes(item.key))
+)
+
+const rightData = computed(() =>
+  props.data.filter((item) => props.modelValue.includes(item.key))
+)
+
+const matchFilter = (item: QiuTransferItem, keyword: string) => {
+  if (!keyword.trim()) return true
+  return item.label.toLowerCase().includes(keyword.trim().toLowerCase())
+}
+
+const filteredLeft = computed(() => leftData.value.filter((item) => matchFilter(item, leftFilter.value)))
+const filteredRight = computed(() => rightData.value.filter((item) => matchFilter(item, rightFilter.value)))
+
+const selectableLeftKeys = computed(() =>
+  filteredLeft.value.filter((item) => !item.disabled).map((item) => item.key)
+)
+
+const selectableRightKeys = computed(() =>
+  filteredRight.value.filter((item) => !item.disabled).map((item) => item.key)
+)
+
+const leftAllChecked = computed(
+  () =>
+    selectableLeftKeys.value.length > 0 &&
+    selectableLeftKeys.value.every((key) => leftChecked.value.includes(key))
+)
+
+const leftIndeterminate = computed(
+  () =>
+    leftChecked.value.some((key) => selectableLeftKeys.value.includes(key)) && !leftAllChecked.value
+)
+
+const rightAllChecked = computed(
+  () =>
+    selectableRightKeys.value.length > 0 &&
+    selectableRightKeys.value.every((key) => rightChecked.value.includes(key))
+)
+
+const rightIndeterminate = computed(
+  () =>
+    rightChecked.value.some((key) => selectableRightKeys.value.includes(key)) && !rightAllChecked.value
+)
+
+const updateValue = (next: (string | number)[]) => {
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+
+const toggleLeftAll = (checked: boolean | string | number) => {
+  leftChecked.value = checked ? [...selectableLeftKeys.value] : []
+}
+
+const toggleRightAll = (checked: boolean | string | number) => {
+  rightChecked.value = checked ? [...selectableRightKeys.value] : []
+}
+
+const moveToRight = () => {
+  const next = [...props.modelValue, ...leftChecked.value]
+  updateValue(next)
+  leftChecked.value = []
+}
+
+const moveToLeft = () => {
+  const removeSet = new Set(rightChecked.value)
+  const next = props.modelValue.filter((key) => !removeSet.has(key))
+  updateValue(next)
+  rightChecked.value = []
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    const selected = new Set(props.modelValue)
+    leftChecked.value = leftChecked.value.filter((key) => !selected.has(key))
+    rightChecked.value = rightChecked.value.filter((key) => selected.has(key))
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-transfer {
+  display: inline-flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.qiu-transfer__panel {
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  overflow: hidden;
+  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+  border-radius: 6px;
+}
+
+.qiu-transfer__header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  height: 40px;
+  padding: 0 12px;
+  background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+  border-bottom: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+}
+
+.qiu-transfer__title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.qiu-transfer__count {
+  font-size: 12px;
+  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+}
+
+.qiu-transfer__filter {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+}
+
+.qiu-transfer__body {
+  height: 240px;
+  padding: 6px 0;
+  overflow: auto;
+}
+
+.qiu-transfer__item {
+  padding: 0 12px;
+
+  :deep(.qiu-checkbox) {
+    display: flex;
+    width: 100%;
+    margin-right: 0;
+  }
+}
+
+.qiu-transfer__empty {
+  padding: 24px 12px;
+  font-size: 13px;
+  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+  text-align: center;
+}
+
+.qiu-transfer__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>

package/components/QiuTree/QiuTreeNode.vue

@@ -0,0 +1,146 @@
+<template>
+  <li class="qiu-tree-node" role="treeitem">
+    <div
+      class="qiu-tree-node__content"
+      :class="{
+        'is-current': isCurrent,
+        'is-expanded': expanded,
+      }"
+      :style="{ paddingLeft: `${level * 18 + 8}px` }"
+      @click="emit('node-click', node)"
+    >
+      <button
+        v-if="hasChildren"
+        type="button"
+        class="qiu-tree-node__expand"
+        @click.stop="emit('toggle', nodeKey)"
+      >
+        {{ expanded ? '▾' : '▸' }}
+      </button>
+      <span v-else class="qiu-tree-node__expand is-leaf" />
+      <span class="qiu-tree-node__label">{{ label }}</span>
+    </div>
+    <ul v-if="hasChildren && expanded" class="qiu-tree-node__children">
+      <QiuTreeNode
+        v-for="child in visibleChildren"
+        :key="String(childKey(child))"
+        :node="child"
+        :level="level + 1"
+        :props-config="propsConfig"
+        :expanded-keys="expandedKeys"
+        :current-key="currentKey"
+        :filter-text="filterText"
+        :filter-node-method="filterNodeMethod"
+        :highlight-current="highlightCurrent"
+        @toggle="emit('toggle', $event)"
+        @node-click="emit('node-click', $event)"
+      />
+    </ul>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { QiuTreeNodeData, QiuTreePropsConfig } from './types'
+import {
+  getNodeChildren,
+  getNodeKey,
+  getNodeLabel,
+} from './types'
+
+defineOptions({ name: 'QiuTreeNode' })
+
+const props = defineProps<{
+  node: QiuTreeNodeData
+  level: number
+  propsConfig: QiuTreePropsConfig
+  expandedKeys: Set<string | number>
+  currentKey: string | number | null
+  filterText: string
+  filterNodeMethod?: (value: string, data: QiuTreeNodeData, node: QiuTreeNodeData) => boolean
+  highlightCurrent: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [key: string | number]
+  'node-click': [data: QiuTreeNodeData]
+}>()
+
+const nodeKey = computed(() => getNodeKey(props.node, props.propsConfig))
+const label = computed(() => getNodeLabel(props.node, props.propsConfig))
+const children = computed(() => getNodeChildren(props.node, props.propsConfig))
+const hasChildren = computed(() => children.value.length > 0)
+const expanded = computed(() => props.expandedKeys.has(nodeKey.value))
+const isCurrent = computed(() => props.highlightCurrent && props.currentKey === nodeKey.value)
+
+const childKey = (node: QiuTreeNodeData) => getNodeKey(node, props.propsConfig)
+
+const matchesFilter = (node: QiuTreeNodeData): boolean => {
+  if (!props.filterText) return true
+  if (props.filterNodeMethod) return props.filterNodeMethod(props.filterText, node, node)
+  return getNodeLabel(node, props.propsConfig).toLowerCase().includes(props.filterText.toLowerCase())
+}
+
+const nodeVisible = (node: QiuTreeNodeData): boolean => {
+  if (matchesFilter(node)) return true
+  return getNodeChildren(node, props.propsConfig).some((child) => nodeVisible(child))
+}
+
+const visibleChildren = computed(() => children.value.filter((child) => nodeVisible(child)))
+</script>
+
+<style lang="scss" scoped>
+.qiu-tree-node {
+  list-style: none;
+
+  &__children {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &__content {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    height: 32px;
+    cursor: pointer;
+    border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+    }
+
+    &.is-current {
+      color: var(--qiu-color-primary, var(--qiu-color-primary));
+      background: var(--qiu-color-primary-light-9, var(--qiu-color-primary-light-9, #ecf5ff));
+    }
+  }
+
+  &__expand {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    font-size: 12px;
+    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    outline: none;
+
+    &.is-leaf {
+      visibility: hidden;
+    }
+  }
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

package/components/QiuTree/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="qiu-tree" role="tree">
+    <ul v-if="visibleNodes.length" class="qiu-tree__list">
+      <QiuTreeNode
+        v-for="node in visibleNodes"
+        :key="String(getNodeKey(node, resolvedProps))"
+        :node="node"
+        :level="0"
+        :props-config="resolvedProps"
+        :expanded-keys="expandedKeys"
+        :current-key="currentKey"
+        :filter-text="filterText"
+        :filter-node-method="filterNodeMethod"
+        :highlight-current="highlightCurrent"
+        @toggle="toggleExpand"
+        @node-click="onNodeClick"
+      />
+    </ul>
+    <div v-else class="qiu-tree__empty">无数据</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import QiuTreeNode from './QiuTreeNode.vue'
+import type { QiuTreeNodeData, QiuTreePropsConfig } from './types'
+import {
+  defaultTreeProps,
+  getNodeChildren,
+  getNodeKey,
+  getNodeLabel,
+} from './types'
+
+defineOptions({ name: 'QiuTree' })
+
+const props = withDefaults(
+  defineProps<{
+    data?: QiuTreeNodeData[]
+    props?: QiuTreePropsConfig
+    highlightCurrent?: boolean
+    defaultExpandAll?: boolean
+    defaultExpandedKeys?: (string | number)[]
+    filterNodeMethod?: (value: string, data: QiuTreeNodeData, node: QiuTreeNodeData) => boolean
+  }>(),
+  {
+    data: () => [],
+    props: () => ({}),
+    highlightCurrent: false,
+    defaultExpandAll: false,
+    defaultExpandedKeys: () => [],
+    filterNodeMethod: undefined,
+  }
+)
+
+const emit = defineEmits<{
+  'node-click': [data: QiuTreeNodeData, node: QiuTreeNodeData]
+}>()
+
+const currentKey = ref<string | number | null>(null)
+const expandedKeys = ref<Set<string | number>>(new Set())
+const filterText = ref('')
+
+const resolvedProps = computed(() => ({
+  ...defaultTreeProps,
+  ...props.props,
+}))
+
+const initExpanded = () => {
+  if (props.defaultExpandAll) {
+    const keys = new Set<string | number>()
+    const walk = (nodes: QiuTreeNodeData[]) => {
+      nodes.forEach((n) => {
+        keys.add(getNodeKey(n, resolvedProps.value))
+        walk(getNodeChildren(n, resolvedProps.value))
+      })
+    }
+    walk(props.data)
+    expandedKeys.value = keys
+    return
+  }
+  if (props.defaultExpandedKeys?.length) {
+    expandedKeys.value = new Set(props.defaultExpandedKeys)
+  }
+}
+
+watch(() => props.data, initExpanded, { immediate: true, deep: true })
+
+const matchesFilter = (node: QiuTreeNodeData): boolean => {
+  if (!filterText.value) return true
+  if (props.filterNodeMethod) return props.filterNodeMethod(filterText.value, node, node)
+  return getNodeLabel(node, resolvedProps.value).toLowerCase().includes(filterText.value.toLowerCase())
+}
+
+const nodeVisible = (node: QiuTreeNodeData): boolean => {
+  if (matchesFilter(node)) return true
+  return getNodeChildren(node, resolvedProps.value).some((child) => nodeVisible(child))
+}
+
+const visibleNodes = computed(() => props.data.filter((n) => nodeVisible(n)))
+
+const toggleExpand = (key: string | number) => {
+  const next = new Set(expandedKeys.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  expandedKeys.value = next
+}
+
+const onNodeClick = (data: QiuTreeNodeData) => {
+  if (props.highlightCurrent) {
+    currentKey.value = getNodeKey(data, resolvedProps.value)
+  }
+  emit('node-click', data, data)
+}
+
+const filter = (val: string) => {
+  filterText.value = val
+}
+
+const setCurrentKey = (key: string | number | null) => {
+  currentKey.value = key
+}
+
+defineExpose({ filter, setCurrentKey })
+</script>
+
+<style lang="scss" scoped>
+.qiu-tree {
+  font-size: 14px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+
+  &__list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &__empty {
+    padding: 12px;
+    font-size: 13px;
+    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+    text-align: center;
+  }
+}
+</style>

package/components/QiuTree/types.ts

@@ -0,0 +1,30 @@
+export interface QiuTreeNodeData {
+  [key: string]: unknown
+  children?: QiuTreeNodeData[]
+}
+
+export interface QiuTreePropsConfig {
+  label?: string
+  children?: string
+  value?: string
+}
+
+export const defaultTreeProps: Required<QiuTreePropsConfig> = {
+  label: 'label',
+  children: 'children',
+  value: 'value',
+}
+
+export function getNodeKey(node: QiuTreeNodeData, config: QiuTreePropsConfig) {
+  const val = node[config.value ?? 'value']
+  return (val ?? node[config.label ?? 'label']) as string | number
+}
+
+export function getNodeLabel(node: QiuTreeNodeData, config: QiuTreePropsConfig) {
+  return String(node[config.label ?? 'label'] ?? '')
+}
+
+export function getNodeChildren(node: QiuTreeNodeData, config: QiuTreePropsConfig) {
+  const children = node[config.children ?? 'children']
+  return Array.isArray(children) ? (children as QiuTreeNodeData[]) : []
+}