foucui 1.0.1 → 2.0.0

package/components/QiuSelect/index.vue

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

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

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