foucui 1.0.1 → 2.0.0

package/components/QiuTreeSelect/index.vue

@@ -1,259 +0,0 @@
-<template>
-  <div
-    ref="rootRef"
-    class="qiu-tree-select"
-    :class="{ 'is-disabled': disabled, 'is-focused': visible }"
-  >
-    <div
-      class="qiu-tree-select__wrapper"
-      tabindex="0"
-      @click="toggleDropdown"
-      @keydown.enter.prevent="toggleDropdown"
-      @keydown.space.prevent="toggleDropdown"
-      @keydown.esc="closeDropdown"
-    >
-      <span
-        class="qiu-tree-select__selected"
-        :class="{ 'is-placeholder': !selectedLabel }"
-      >
-        {{ selectedLabel || placeholder }}
-      </span>
-      <span class="qiu-tree-select__suffix">
-        <button
-          v-if="clearable && hasValue && !disabled"
-          type="button"
-          class="qiu-tree-select__clear"
-          tabindex="-1"
-          @mousedown.prevent
-          @click.stop="clear"
-        >
-          ×
-        </button>
-        <span class="qiu-tree-select__caret" :class="{ 'is-open': visible }">▾</span>
-      </span>
-    </div>
-    <Transition name="qiu-tree-select-fade">
-      <div v-show="visible" class="qiu-tree-select__dropdown">
-        <QiuTree
-          :data="data"
-          :props="treeProps"
-          highlight-current
-          default-expand-all
-          @node-click="onNodeClick"
-        />
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import QiuTree from '../QiuTree/index.vue'
-import type { QiuTreeNodeData, QiuTreePropsConfig } from '../QiuTree/types'
-import { getNodeKey, getNodeLabel } from '../QiuTree/types'
-
-defineOptions({ name: 'QiuTreeSelect' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number | null
-    data?: QiuTreeNodeData[]
-    props?: QiuTreePropsConfig
-    placeholder?: string
-    clearable?: boolean
-    disabled?: boolean
-  }>(),
-  {
-    modelValue: null,
-    data: () => [],
-    props: () => ({}),
-    placeholder: '请选择',
-    clearable: false,
-    disabled: false,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string | number | null]
-  change: [string | number | null]
-  clear: []
-}>()
-
-const rootRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-
-const treeProps = computed(() => props.props)
-
-const hasValue = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '')
-
-const findNodeByValue = (nodes: QiuTreeNodeData[], value: string | number): QiuTreeNodeData | null => {
-  for (const node of nodes) {
-    const key = getNodeKey(node, props.props)
-    if (key === value) return node
-    const children = node[props.props?.children ?? 'children']
-    if (Array.isArray(children)) {
-      const found = findNodeByValue(children as QiuTreeNodeData[], value)
-      if (found) return found
-    }
-  }
-  return null
-}
-
-const selectedLabel = computed(() => {
-  if (!hasValue.value) return ''
-  const node = findNodeByValue(props.data, props.modelValue as string | number)
-  return node ? getNodeLabel(node, props.props) : String(props.modelValue)
-})
-
-const openDropdown = () => {
-  if (props.disabled) return
-  visible.value = true
-}
-
-const closeDropdown = () => {
-  visible.value = false
-}
-
-const toggleDropdown = () => {
-  if (props.disabled) return
-  visible.value ? closeDropdown() : openDropdown()
-}
-
-const onNodeClick = (data: QiuTreeNodeData) => {
-  const value = getNodeKey(data, props.props)
-  emit('update:modelValue', value)
-  emit('change', value)
-  closeDropdown()
-}
-
-const clear = () => {
-  emit('update:modelValue', null)
-  emit('change', null)
-  emit('clear')
-}
-
-const onDocClick = (e: MouseEvent) => {
-  if (!rootRef.value?.contains(e.target as Node)) closeDropdown()
-}
-
-onMounted(() => document.addEventListener('mousedown', onDocClick))
-onUnmounted(() => document.removeEventListener('mousedown', onDocClick))
-</script>
-
-<style lang="scss" scoped>
-.qiu-tree-select {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  vertical-align: middle;
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-
-    .qiu-tree-select__wrapper {
-      cursor: not-allowed;
-      background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-    }
-  }
-
-  &.is-focused .qiu-tree-select__wrapper {
-    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary, var(--qiu-color-primary)) 25%, transparent);
-  }
-}
-
-.qiu-tree-select__wrapper {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  cursor: pointer;
-  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
-  border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
-  outline: none;
-  transition: border-color 0.2s ease;
-
-  &:hover:not(.is-disabled) {
-    border-color: var(--qiu-border-color-hover, var(--qiu-border-color-hover, #c0c4cc));
-  }
-}
-
-.qiu-tree-select__selected {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-
-  &.is-placeholder {
-    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-  }
-}
-
-.qiu-tree-select__suffix {
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: 4px;
-  align-items: center;
-  margin-left: 8px;
-}
-
-.qiu-tree-select__clear {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  font-size: 14px;
-  line-height: 1;
-  color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 50%;
-  outline: none;
-
-  &:hover {
-    color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  }
-}
-
-.qiu-tree-select__caret {
-  color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-  transition: transform 0.2s ease;
-
-  &.is-open {
-    transform: rotate(180deg);
-  }
-}
-
-.qiu-tree-select__dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  z-index: 3000;
-  width: 100%;
-  max-height: 280px;
-  padding: 6px;
-  overflow-y: auto;
-  background: var(--qiu-bg-color-overlay, var(--qiu-bg-color-overlay, #fff));
-  border: 1px solid var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
-  border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
-  box-shadow: var(--qiu-box-shadow-light, var(--qiu-box-shadow-light, 0 4px 12px rgb(0 0 0 / 10%)));
-}
-
-.qiu-tree-select-fade-enter-active,
-.qiu-tree-select-fade-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.qiu-tree-select-fade-enter-from,
-.qiu-tree-select-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-</style>

package/components/QiuTrend/index.vue

@@ -1,92 +0,0 @@
-<template>
-  <span
-    class="qiu-trend"
-    :class="directionClass"
-    :title="title"
-  >
-    <qiu-icon v-if="showArrow" :icon="arrowIcon" class="qiu-trend__icon" />
-    <span class="qiu-trend__value"><slot>{{ display }}</slot></span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-defineOptions({ name: 'QiuTrend' })
-
-const props = withDefaults(
-  defineProps<{
-    /** 上升/下降/持平；不传则根据 value 自动判断 */
-    direction?: 'up' | 'down' | 'flat'
-    /** 数值，正负自动判断方向 */
-    value?: number
-    /** 是否显示箭头图标 */
-    showArrow?: boolean
-    /** 前缀，如 + / - */
-    prefix?: string
-    suffix?: string
-  }>(),
-  {
-    direction: undefined,
-    value: undefined,
-    showArrow: true,
-    prefix: '',
-    suffix: '',
-  }
-)
-
-const resolvedDirection = computed<'up' | 'down' | 'flat'>(() => {
-  if (props.direction) return props.direction
-  if (props.value === undefined) return 'flat'
-  if (props.value > 0) return 'up'
-  if (props.value < 0) return 'down'
-  return 'flat'
-})
-
-const directionClass = computed(() => `qiu-trend--${resolvedDirection.value}`)
-
-const arrowIcon = computed(() => {
-  if (resolvedDirection.value === 'up') return 'arrow-up-line'
-  if (resolvedDirection.value === 'down') return 'arrow-down-line'
-  return 'subtract-line'
-})
-
-const display = computed(() => {
-  if (props.value === undefined) return ''
-  const sign = props.value > 0 ? '+' : ''
-  return `${props.prefix}${sign}${props.value}${props.suffix}`
-})
-
-const title = computed(() => {
-  if (resolvedDirection.value === 'up') return '上升'
-  if (resolvedDirection.value === 'down') return '下降'
-  return '持平'
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-trend {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1;
-
-  &__icon {
-    font-size: 13px;
-  }
-}
-
-.qiu-trend--up {
-  color: var(--qiu-color-success, #67c23a);
-}
-
-.qiu-trend--down {
-  color: var(--qiu-color-danger, #f56c6c);
-}
-
-.qiu-trend--flat {
-  color: var(--qiu-text-color-secondary, #909399);
-}
-</style>