foucui 1.0.1 → 2.0.0

package/components/QiuTransfer/index.vue

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

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

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

@@ -1,30 +0,0 @@
-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[]) : []
-}