foucui 1.0.1

package/components/QiuTreeSelect/index.vue

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

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