foucui 1.0.1

package/components/QiuSelect/index.vue

@@ -0,0 +1,452 @@
+<template>
+  <div
+    ref="rootRef"
+    class="qiu-select"
+    :class="[
+      `qiu-select--${resolvedSize}`,
+      attrs.class,
+      {
+        'is-disabled': disabled,
+        'is-focused': visible,
+        'is-clearable': clearable,
+        'is-fit': fit,
+      },
+    ]"
+    :style="mergedStyle"
+  >
+    <div
+      class="qiu-select__wrapper"
+      tabindex="0"
+      @click="toggleDropdown"
+      @keydown.enter.prevent="toggleDropdown"
+      @keydown.space.prevent="toggleDropdown"
+      @keydown.esc="closeDropdown"
+      @keydown.down.prevent="openDropdown"
+    >
+      <span
+        class="qiu-select__selected"
+        :class="{ 'is-placeholder': !selectedLabel }"
+      >
+        {{ selectedLabel || placeholder }}
+      </span>
+      <span class="qiu-select__suffix">
+        <button
+          v-if="clearable && hasValue && !disabled"
+          type="button"
+          class="qiu-select__clear"
+          tabindex="-1"
+          @mousedown.prevent
+          @click.stop="clear"
+        >
+          ×
+        </button>
+        <qiu-icon
+          class="qiu-select__caret"
+          :class="{ 'is-open': visible }"
+          icon="arrow-down-s-line"
+        />
+      </span>
+    </div>
+
+    <Teleport to="body">
+      <Transition name="qiu-select-fade">
+        <div
+          v-if="visible"
+          ref="dropdownRef"
+          class="qiu-select__dropdown"
+          :style="dropdownStyle"
+          @click.stop
+        >
+          <template v-if="mergedOptions.length">
+            <div
+              v-for="opt in mergedOptions"
+              :key="String(opt.value)"
+              class="qiu-option qiu-select__option"
+              :class="{
+                'is-selected': modelValue === opt.value,
+                'is-disabled': opt.disabled,
+              }"
+              @click="!opt.disabled && selectOption(opt.value, opt.label)"
+            >
+              {{ opt.label }}
+            </div>
+          </template>
+          <slot v-else />
+          <div v-if="!mergedOptions.length && !hasSlotOptions" class="qiu-select__empty">
+            无数据
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { CSSProperties, Ref } from 'vue'
+import type { QiuSelectContext, QiuSelectOption } from './types'
+
+defineOptions({
+  name: 'QiuSelect',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | boolean | null
+    options?: QiuSelectOption[]
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+    size?: 'large' | 'default' | 'small'
+    /** 按内容自适应宽度（表格单元格内推荐） */
+    fit?: boolean
+  }>(),
+  {
+    modelValue: null,
+    options: undefined,
+    placeholder: '请选择',
+    clearable: false,
+    disabled: false,
+    size: 'default',
+    fit: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [string | number | boolean | null]
+  change: [string | number | boolean | null]
+  clear: []
+  visibleChange: [boolean]
+}>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+const rootRef = ref<HTMLElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const registeredOptions = ref<QiuSelectOption[]>([])
+const labelMap = ref<Map<string | number | boolean, string>>(new Map())
+const dropdownStyle = ref<CSSProperties>({
+  position: 'fixed',
+  top: '-9999px',
+  left: '-9999px',
+  zIndex: 3100,
+  minWidth: '120px',
+})
+
+const resolvedSize = computed(() => props.size || 'default')
+
+const mergedStyle = computed(() => {
+  const style = (attrs.style as CSSProperties | string | undefined) || undefined
+  return style
+})
+
+const hasValue = computed(
+  () => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== ''
+)
+
+const hasSlotOptions = computed(() => !!slots.default)
+
+const mergedOptions = computed(() => {
+  if (props.options?.length) return props.options
+  return registeredOptions.value
+})
+
+const selectedLabel = computed(() => {
+  if (!hasValue.value) return ''
+  const fromOptions = mergedOptions.value.find((o) => o.value === props.modelValue)
+  if (fromOptions) return fromOptions.label
+  return labelMap.value.get(props.modelValue as string | number | boolean) ?? String(props.modelValue)
+})
+
+const modelValueRef = computed(() => props.modelValue)
+
+const selectOption = (value: string | number | boolean, label: string) => {
+  labelMap.value.set(value, label)
+  emit('update:modelValue', value)
+  emit('change', value)
+  closeDropdown()
+}
+
+const setHoverOption = (_value: string | number | boolean) => {
+  /* reserved for keyboard nav */
+}
+
+const registerOption = (option: QiuSelectOption) => {
+  const idx = registeredOptions.value.findIndex((o) => o.value === option.value)
+  if (idx >= 0) registeredOptions.value[idx] = option
+  else registeredOptions.value.push(option)
+  labelMap.value.set(option.value, option.label)
+}
+
+const unregisterOption = (value: string | number | boolean) => {
+  registeredOptions.value = registeredOptions.value.filter((o) => o.value !== value)
+}
+
+provide<QiuSelectContext>('qiuSelect', {
+  modelValue: modelValueRef as Ref<string | number | boolean | null | undefined>,
+  selectOption,
+  setHoverOption,
+  registerOption,
+  unregisterOption,
+})
+
+const updateDropdownPosition = () => {
+  const trigger = rootRef.value
+  const menu = dropdownRef.value
+  if (!trigger || !menu) return
+  const rect = trigger.getBoundingClientRect()
+  const menuRect = menu.getBoundingClientRect()
+  const gap = 4
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+  let top = rect.bottom + gap
+  let left = rect.left
+  const minWidth = Math.max(rect.width, 120)
+
+  if (top + menuRect.height > vh - 4) top = rect.top - menuRect.height - gap
+  if (top < 4) top = 4
+  if (left + minWidth > vw - 4) left = vw - minWidth - 4
+  if (left < 4) left = 4
+
+  dropdownStyle.value = {
+    position: 'fixed',
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    zIndex: 3100,
+    minWidth: `${Math.round(minWidth)}px`,
+  }
+}
+
+const openDropdown = async () => {
+  if (props.disabled) return
+  visible.value = true
+  emit('visibleChange', true)
+  await nextTick()
+  updateDropdownPosition()
+  requestAnimationFrame(() => updateDropdownPosition())
+}
+
+const closeDropdown = () => {
+  if (!visible.value) return
+  visible.value = false
+  emit('visibleChange', false)
+}
+
+const toggleDropdown = () => {
+  if (props.disabled) return
+  visible.value ? closeDropdown() : openDropdown()
+}
+
+const clear = () => {
+  emit('update:modelValue', null)
+  emit('change', null)
+  emit('clear')
+}
+
+const onDocClick = (e: MouseEvent) => {
+  if (!visible.value) return
+  const t = e.target as Node
+  if (rootRef.value?.contains(t) || dropdownRef.value?.contains(t)) return
+  closeDropdown()
+}
+
+const onScrollOrResize = () => {
+  if (visible.value) updateDropdownPosition()
+}
+
+watch(visible, (v) => {
+  if (v) {
+    document.addEventListener('mousedown', onDocClick, true)
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+  } else {
+    document.removeEventListener('mousedown', onDocClick, true)
+    window.removeEventListener('scroll', onScrollOrResize, true)
+    window.removeEventListener('resize', onScrollOrResize)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', onDocClick, true)
+  window.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-select {
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: middle;
+
+  &.is-fit {
+    width: auto;
+    min-width: 96px;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 1;
+
+    .qiu-select__wrapper {
+      cursor: not-allowed;
+      background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+      color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+    }
+  }
+
+  &.is-focused .qiu-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-select__wrapper {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 0 8px 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, box-shadow 0.2s ease;
+
+  &:hover:not(:disabled) {
+    border-color: var(--qiu-border-color-hover, var(--qiu-border-color-hover, #c0c4cc));
+  }
+}
+
+.qiu-select--large .qiu-select__wrapper {
+  height: 40px;
+  font-size: 16px;
+}
+
+.qiu-select--default .qiu-select__wrapper {
+  height: 32px;
+  font-size: 14px;
+}
+
+.qiu-select--small .qiu-select__wrapper {
+  height: 24px;
+  font-size: 12px;
+}
+
+.qiu-select__selected {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+  line-height: 1;
+
+  &.is-placeholder {
+    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+  }
+}
+
+.qiu-select__suffix {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 2px;
+  align-items: center;
+  margin-left: 6px;
+  color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+}
+
+.qiu-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-select__caret {
+  font-size: 14px;
+  line-height: 1;
+  transition: transform 0.2s ease;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.qiu-select__dropdown {
+  box-sizing: border-box;
+  max-height: 280px;
+  padding: 4px 0;
+  overflow-x: hidden;
+  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-select__option {
+  height: 34px;
+  padding: 0 12px;
+  overflow: hidden;
+  line-height: 34px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover:not(.is-disabled) {
+    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+  }
+
+  &.is-selected {
+    font-weight: 600;
+    color: var(--qiu-color-primary, var(--qiu-color-primary));
+    background: var(--qiu-color-primary-light-9, var(--qiu-color-primary-light-9, #ecf5ff));
+  }
+
+  &.is-disabled {
+    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+    cursor: not-allowed;
+  }
+}
+
+.qiu-select__empty {
+  padding: 14px 12px;
+  font-size: 13px;
+  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+  text-align: center;
+}
+
+.qiu-select-fade-enter-active,
+.qiu-select-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.qiu-select-fade-enter-from,
+.qiu-select-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/components/QiuSelect/types.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue'
+
+export interface QiuSelectOption {
+  value: string | number | boolean
+  label: string
+  disabled?: boolean
+}
+
+export interface QiuSelectContext {
+  modelValue: Ref<string | number | boolean | null | undefined>
+  selectOption: (value: string | number | boolean, label: string) => void
+  setHoverOption: (value: string | number | boolean) => void
+  registerOption: (option: QiuSelectOption) => void
+  unregisterOption: (value: string | number | boolean) => void
+}

package/components/QiuSkeleton/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="qiu-skeleton" :class="{ 'is-loading': loading }">
+    <template v-if="loading">
+      <div
+        v-for="i in rows"
+        :key="i"
+        class="qiu-skeleton__row"
+        :class="{ 'is-animated': animated }"
+        :style="rowStyle(i)"
+      />
+    </template>
+    <slot v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuSkeleton' })
+
+const props = withDefaults(
+  defineProps<{
+    rows?: number
+    animated?: boolean
+    loading?: boolean
+    /** 最后一行宽度百分比 */
+    lastRowWidth?: number
+  }>(),
+  {
+    rows: 3,
+    animated: true,
+    loading: true,
+    lastRowWidth: 60,
+  }
+)
+
+const rowStyle = (index: number) => {
+  if (index === props.rows) {
+    return { width: `${props.lastRowWidth}%` }
+  }
+  return {}
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-skeleton {
+  width: 100%;
+}
+
+.qiu-skeleton__row {
+  height: 16px;
+  margin-bottom: 12px;
+  background: var(--qiu-fill-color, var(--qiu-fill-color, #f0f2f5));
+  border-radius: 4px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.is-animated {
+    background: linear-gradient(
+      90deg,
+      var(--qiu-fill-color, var(--qiu-fill-color, #f0f2f5)) 25%,
+      var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa)) 37%,
+      var(--qiu-fill-color, var(--qiu-fill-color, #f0f2f5)) 63%
+    );
+    background-size: 400% 100%;
+    animation: qiu-skeleton-shimmer 1.4s ease infinite;
+  }
+}
+
+@keyframes qiu-skeleton-shimmer {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+</style>