foucui 1.0.1 → 1.0.2

package/components/QiuAnchorLink/index.vue

@@ -1,67 +0,0 @@
-<template>
-  <a
-    class="qiu-anchor-link"
-    :class="{ 'is-active': isActive }"
-    :href="href"
-    @click.prevent="onClick"
-  >
-    <slot>{{ title }}</slot>
-  </a>
-</template>
-
-<script lang="ts" setup>
-import { QIU_ANCHOR_KEY } from '../QiuAnchor/context'
-
-defineOptions({ name: 'QiuAnchorLink' })
-
-const props = withDefaults(
-  defineProps<{
-    href: string
-    title?: string
-  }>(),
-  {
-    title: '',
-  }
-)
-
-const anchor = inject(QIU_ANCHOR_KEY, null)
-const linkRef = ref<HTMLElement | null>(null)
-
-const isActive = computed(() => anchor?.activeLink.value === props.href)
-
-const onClick = () => {
-  anchor?.scrollToLink(props.href)
-}
-
-onMounted(() => {
-  anchor?.registerLink({
-    href: props.href,
-    title: props.title,
-    el: linkRef.value,
-  })
-})
-
-onBeforeUnmount(() => {
-  anchor?.unregisterLink(props.href)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-anchor-link {
-  display: block;
-  padding: 4px 0 4px 12px;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  text-decoration: none;
-  border-left: 2px solid transparent;
-  transition: color 0.15s, border-color 0.15s;
-
-  &:hover {
-    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  }
-
-  &.is-active {
-    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-    border-left-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  }
-}
-</style>

package/components/QiuApp/index.vue

@@ -1,9 +0,0 @@
-<template>
-  <router-view />
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuApp',
-})
-</script>

package/components/QiuAutocomplete/index.vue

@@ -1,408 +0,0 @@
-<template>
-  <div
-    class="qiu-autocomplete"
-    :class="{
-      'is-disabled': props.disabled,
-      'is-focused': focused,
-      'is-clearable': props.clearable,
-      'has-value': hasValue,
-    }"
-    :style="{ width: props.width }"
-  >
-    <input
-      ref="inputRef"
-      :autofocus="props.autofocus"
-      class="qiu-autocomplete-input"
-      :disabled="props.disabled"
-      :placeholder="props.placeholder"
-      :readonly="props.readonly"
-      :required="props.required"
-      :style="{ height: props.height }"
-      :type="props.type"
-      :value="displayValue"
-      @change="handleInput"
-      @input="handleInput"
-      @focus="onFocus"
-      @blur="focused = false"
-      @keydown.down.prevent="moveActive(1)"
-      @keydown.up.prevent="moveActive(-1)"
-      @keydown.enter.prevent="confirmActive"
-      @keydown.esc="selectshow = false"
-    />
-    <div class="qiu-autocomplete-suffix">
-      <button
-        v-show="props.clearable && hasValue"
-        type="button"
-        class="qiu-autocomplete-clear"
-        tabindex="-1"
-        :title="'清空'"
-        @mousedown.prevent
-        @click="clearvalue"
-      >
-        <qiu-icon icon="close-circle-fill" />
-      </button>
-      <button
-        type="button"
-        class="qiu-autocomplete-caret"
-        tabindex="-1"
-        :class="{ 'is-open': selectshow }"
-        @mousedown.prevent
-        @click="toggleSelect"
-      >
-        <qiu-icon icon="arrow-down-s-line" />
-      </button>
-    </div>
-    <div v-if="selectshow" class="qiu-autocomplete-list">
-      <div
-        v-for="(item, idx) in serachList"
-        :key="idx"
-        class="qiu-autocomplete-list-item"
-        :class="{ 'is-active': idx === activeIndex }"
-        :title="buildDisplayString(item)"
-        @mousedown.prevent
-        @click="handleItem(item)"
-        @mouseenter="activeIndex = idx"
-      >
-        <span class="qiu-ellipsis">{{ buildDisplayString(item) }}</span>
-      </div>
-      <div v-if="!serachList.length" class="qiu-autocomplete-empty">无匹配数据</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuAutocomplete — 多字段模糊搜索下拉（兼容 Vite / Vue3）
- */
-defineOptions({ name: 'QiuAutocomplete' })
-
-export interface AutocompleteItem {
-  value?: string | number | boolean
-  [key: string]: unknown
-}
-
-const props = withDefaults(
-  defineProps<{
-    value?: string
-    modelValue?: string | boolean
-    placeholder?: string
-    disabled?: boolean
-    clearable?: boolean
-    autofocus?: boolean
-    required?: boolean
-    readonly?: boolean
-    type?: string
-    maxlength?: number
-    minlength?: number
-    width?: string
-    height?: string
-    list?: AutocompleteItem[]
-    searchekey?: string[]
-    showkey?: string[]
-    showline?: string
-    valueKey?: string
-  }>(),
-  {
-    value: '',
-    modelValue: '',
-    placeholder: '',
-    disabled: false,
-    clearable: false,
-    autofocus: false,
-    required: false,
-    readonly: false,
-    type: 'text',
-    maxlength: 0,
-    minlength: 1,
-    width: '100%',
-    height: '32px',
-    list: () => [],
-    searchekey: () => ['value'],
-    showkey: () => ['value'],
-    showline: ' - ',
-    valueKey: 'value',
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string]
-  change: [string]
-  itemclick: [AutocompleteItem | true]
-}>()
-
-const selectshow = ref(false)
-const focused = ref(false)
-const inputRef = ref<HTMLInputElement | null>(null)
-const serachList = ref<AutocompleteItem[]>([...props.list])
-const activeIndex = ref(-1)
-
-const displayValue = computed(() => {
-  if (props.modelValue !== '' && props.modelValue !== undefined && props.modelValue !== null) {
-    return String(props.modelValue)
-  }
-  return props.value || ''
-})
-
-const hasValue = computed(() => displayValue.value.length > 0)
-
-watch(
-  () => props.list,
-  (list) => {
-    serachList.value = [...list]
-  },
-  { deep: true }
-)
-
-const buildDisplayString = (item: AutocompleteItem) => {
-  return props.showkey
-    .map((key) => (Reflect.has(item, key) ? String(item[key] ?? '') : ''))
-    .filter(Boolean)
-    .join(props.showline)
-}
-
-const searchData = (data: AutocompleteItem[], searchText: string, searchFields: string[]) => {
-  const result: AutocompleteItem[] = []
-  if (!Array.isArray(data) || typeof searchText !== 'string') {
-    serachList.value = result
-    return result
-  }
-  const fields = Array.isArray(searchFields) ? searchFields : ['value']
-  const lower = searchText.toLowerCase()
-  for (const item of data) {
-    for (const field of fields) {
-      if (Reflect.has(item, field) && String(item[field]).toLowerCase().includes(lower)) {
-        result.push(item)
-        break
-      }
-    }
-  }
-  serachList.value = result
-  activeIndex.value = result.length ? 0 : -1
-  return result
-}
-
-const handleInput = (e: Event) => {
-  const target = e.target as HTMLInputElement
-  nextTick(() => {
-    if (!inputRef.value) return
-    if (target.value.length > 0) {
-      selectshow.value = true
-      searchData(props.list, target.value, props.searchekey)
-    } else {
-      selectshow.value = false
-      serachList.value = [...props.list]
-    }
-  })
-  emit('update:modelValue', target.value)
-  emit('change', target.value)
-}
-
-const handleItem = (item: AutocompleteItem) => {
-  const v = String(item[props.valueKey] ?? item.value ?? '')
-  if (inputRef.value) inputRef.value.value = v
-  emit('change', v)
-  emit('update:modelValue', v)
-  emit('itemclick', item)
-  selectshow.value = false
-}
-
-const toggleSelect = () => {
-  if (props.disabled || props.readonly) return
-  selectshow.value = !selectshow.value
-  if (selectshow.value) {
-    inputRef.value?.focus()
-    const q = inputRef.value?.value || ''
-    if (q) searchData(props.list, q, props.searchekey)
-    else serachList.value = [...props.list]
-  }
-}
-
-const onFocus = () => {
-  focused.value = true
-  if (!props.disabled && !props.readonly) {
-    selectshow.value = true
-    const q = inputRef.value?.value || ''
-    if (q) searchData(props.list, q, props.searchekey)
-    else serachList.value = [...props.list]
-  }
-}
-
-const clearvalue = () => {
-  if (inputRef.value) inputRef.value.value = ''
-  selectshow.value = false
-  serachList.value = [...props.list]
-  emit('change', '')
-  emit('update:modelValue', '')
-  inputRef.value?.focus()
-}
-
-const moveActive = (delta: number) => {
-  if (!selectshow.value || !serachList.value.length) return
-  const len = serachList.value.length
-  activeIndex.value = (activeIndex.value + delta + len) % len
-}
-
-const confirmActive = () => {
-  if (activeIndex.value >= 0 && serachList.value[activeIndex.value]) {
-    handleItem(serachList.value[activeIndex.value])
-  }
-}
-
-const onDocClick = (e: MouseEvent) => {
-  const root = (e.target as HTMLElement)?.closest?.('.qiu-autocomplete')
-  const self = inputRef.value?.closest('.qiu-autocomplete')
-  if (self && root !== self) selectshow.value = false
-}
-
-onMounted(() => document.addEventListener('mousedown', onDocClick))
-onUnmounted(() => document.removeEventListener('mousedown', onDocClick))
-</script>
-
-<style scoped lang="scss">
-.qiu-autocomplete {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  vertical-align: middle;
-
-  &.is-focused .qiu-autocomplete-input {
-    border-color: var(--qiu-color-primary);
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary) 25%, transparent);
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-
-    .qiu-autocomplete-input {
-      cursor: not-allowed;
-      background: var(--qiu-fill-color-light, #f5f7fa);
-    }
-  }
-}
-
-.qiu-autocomplete-input {
-  box-sizing: border-box;
-  width: 100%;
-  height: 32px;
-  padding: 0 36px 0 12px;
-  font-size: 14px;
-  line-height: 1;
-  color: var(--qiu-text-color-primary, #303133);
-  background: var(--qiu-bg-color, #fff);
-  border: 1px solid var(--qiu-border-color, #dcdfe6);
-  border-radius: var(--qiu-border-radius-base, 4px);
-  outline: none;
-  transition: border-color 0.2s ease;
-}
-
-.qiu-autocomplete.is-clearable.has-value .qiu-autocomplete-input {
-  padding-right: 56px;
-}
-
-.qiu-autocomplete-suffix {
-  position: absolute;
-  top: 0;
-  right: 4px;
-  bottom: 0;
-  z-index: 2;
-  display: inline-flex;
-  gap: 2px;
-  align-items: center;
-  justify-content: flex-end;
-  pointer-events: none;
-}
-
-.qiu-autocomplete-clear,
-.qiu-autocomplete-caret {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  color: var(--qiu-text-color-placeholder, #a8abb2);
-  cursor: pointer;
-  pointer-events: auto;
-  background: transparent;
-  border: 0;
-  border-radius: 50%;
-  outline: none;
-  transition: color 0.15s ease, background 0.15s ease;
-
-  :deep(.qiu-icon) {
-    font-size: 14px;
-    line-height: 1;
-  }
-
-  &:hover {
-    color: var(--qiu-text-color-regular, #606266);
-    background: var(--qiu-fill-color-light, #f5f7fa);
-  }
-}
-
-.qiu-autocomplete-clear:hover {
-  color: var(--qiu-color-info);
-}
-
-.qiu-autocomplete-caret {
-  &.is-open {
-    color: var(--qiu-color-primary);
-
-    :deep(.qiu-icon) {
-      transform: rotate(180deg);
-    }
-  }
-
-  :deep(.qiu-icon) {
-    transition: transform 0.2s ease;
-  }
-}
-
-.qiu-autocomplete-list {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  z-index: 3000;
-  width: 100%;
-  max-height: 280px;
-  overflow-y: auto;
-  background: var(--qiu-bg-color-overlay, #fff);
-  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
-  border-radius: 6px;
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgb(0 0 0 / 10%));
-}
-
-.qiu-autocomplete-list-item {
-  height: 34px;
-  padding: 0 12px;
-  overflow: hidden;
-  line-height: 34px;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-
-  &:hover,
-  &.is-active {
-    color: var(--qiu-color-primary);
-    background: var(--qiu-fill-color-light, #f5f7fa);
-  }
-}
-
-.qiu-autocomplete-empty {
-  padding: 14px 12px;
-  font-size: 13px;
-  color: var(--qiu-text-color-secondary);
-  text-align: center;
-}
-
-.qiu-ellipsis {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>

package/components/QiuAvatar/index.vue

@@ -1,140 +0,0 @@
-<template>
-  <span
-    class="qiu-avatar"
-    :class="[
-      `qiu-avatar--${shape}`,
-      `qiu-avatar--${sizeClass}`,
-      { 'is-image': !!src && !imgError },
-    ]"
-    :style="wrapStyle"
-  >
-    <img
-      v-if="src && !imgError"
-      class="qiu-avatar__img"
-      :src="src"
-      :alt="alt"
-      :style="{ objectFit: fit }"
-      @error="onError"
-    />
-    <span v-else-if="$slots.default" class="qiu-avatar__slot">
-      <slot />
-    </span>
-    <span v-else class="qiu-avatar__text">{{ displayText }}</span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuAvatar' })
-
-const props = withDefaults(
-  defineProps<{
-    src?: string
-    alt?: string
-    /** large | default | small | 数字像素 */
-    size?: 'large' | 'default' | 'small' | number
-    shape?: 'circle' | 'square'
-    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
-    /** 无图时显示文字（默认取首字） */
-    text?: string
-    icon?: string
-  }>(),
-  {
-    alt: '',
-    size: 'default',
-    shape: 'circle',
-    fit: 'cover',
-    text: '',
-  }
-)
-
-const emit = defineEmits<{
-  error: [Event]
-}>()
-
-const imgError = ref(false)
-
-watch(
-  () => props.src,
-  () => {
-    imgError.value = false
-  }
-)
-
-const sizeClass = computed(() =>
-  typeof props.size === 'number' ? 'custom' : props.size
-)
-
-const wrapStyle = computed(() => {
-  if (typeof props.size !== 'number') return undefined
-  const s = `${props.size}px`
-  return { width: s, height: s, fontSize: `${Math.max(12, props.size * 0.4)}px` }
-})
-
-const displayText = computed(() => {
-  if (props.text) return props.text.slice(0, 2)
-  return '?'
-})
-
-const onError = (e: Event) => {
-  imgError.value = true
-  emit('error', e)
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-avatar {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  color: #fff;
-  vertical-align: middle;
-  background: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  user-select: none;
-
-  &--circle {
-    border-radius: 50%;
-  }
-
-  &--square {
-    border-radius: 4px;
-  }
-
-  &--large {
-    width: 56px;
-    height: 56px;
-    font-size: 22px;
-  }
-
-  &--default {
-    width: 40px;
-    height: 40px;
-    font-size: 16px;
-  }
-
-  &--small {
-    width: 28px;
-    height: 28px;
-    font-size: 12px;
-  }
-
-  &.is-image {
-    background: transparent;
-  }
-
-  &__img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-  }
-
-  &__text,
-  &__slot {
-    font-weight: 600;
-    line-height: 1;
-  }
-}
-</style>