foucui 1.0.1 → 2.0.0

package/components/QiuColorfulCard/index.vue

@@ -1,101 +0,0 @@
-<template>
-  <div
-    class="qiu-colorful-card"
-    :class="[`qiu-colorful-card--shadow-${shadow}`]"
-    :style="cardStyle"
-  >
-    <div v-if="$slots.header" class="qiu-colorful-card__header">
-      <slot name="header" />
-    </div>
-    <div class="qiu-colorful-card__body" :style="bodyStyle">
-      <qiu-icon v-if="icon" class="qiu-colorful-card__icon" :icon="icon" />
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuColorfulCard',
-})
-
-const props = defineProps({
-  bodyStyle: {
-    type: [Object, String] as () => Record<string, string> | string,
-    default: () => ({}),
-  },
-  shadow: {
-    type: String as () => 'never' | 'hover' | 'always',
-    default: 'never',
-  },
-  colorFrom: {
-    type: String,
-    default: '',
-  },
-  colorTo: {
-    type: String,
-    default: '',
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  style: {
-    type: Object as () => Record<string, string>,
-    default: () => ({}),
-  },
-})
-
-const cardStyle = computed(() => {
-  if (props.style && Object.keys(props.style).length > 0) {
-    return props.style
-  }
-  return {
-    background: `linear-gradient(120deg, ${props.colorFrom} 10%, ${props.colorTo})`,
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-colorful-card {
-  position: relative;
-  min-height: 120px;
-  overflow: hidden;
-  cursor: pointer;
-  border-radius: var(--qiu-border-radius-base, 4px);
-  transition: box-shadow 0.3s ease;
-
-  &--shadow-always {
-    box-shadow: var(--qiu-box-shadow-light, 0 2px 12px 0 rgb(0 0 0 / 10%));
-  }
-
-  &--shadow-hover:hover {
-    box-shadow: var(--qiu-box-shadow-light, 0 2px 12px 0 rgb(0 0 0 / 10%));
-  }
-
-  &__header {
-    padding: calc(var(--qiu-card-padding, 20px) - 2px) var(--qiu-card-padding, 20px);
-    color: var(--qiu-color-white, #fff);
-    border-bottom: 1px solid rgb(255 255 255 / 20%);
-  }
-
-  &__body {
-    position: relative;
-    padding: var(--qiu-card-padding, 20px);
-    color: var(--qiu-color-white, #fff);
-  }
-
-  &__icon {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    font-size: 60px;
-    opacity: 0.35;
-    transform: rotate(15deg);
-  }
-}
-</style>

package/components/QiuCombobox/index.vue

@@ -1,277 +0,0 @@
-<template>
-  <div ref="rootRef" class="qiu-combobox" :class="[`qiu-combobox--${size}`, { 'is-open': open, 'is-disabled': disabled }]">
-    <div class="qiu-combobox__control" @click="toggle">
-      <input
-        class="qiu-combobox__input"
-        :value="query"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        @input="onInput"
-        @keydown.down.prevent="onDown"
-        @keydown.up.prevent="onUp"
-        @keydown.enter.prevent="onEnter"
-        @keydown.esc="close"
-      />
-      <qiu-icon icon="arrow-down-s-line" class="qiu-combobox__arrow" :class="{ 'is-open': open }" />
-    </div>
-    <Teleport to="body">
-      <div v-show="open" ref="panelRef" class="qiu-combobox__panel" :style="panelStyle">
-        <ul v-if="filtered.length" class="qiu-combobox__list">
-          <li
-            v-for="(opt, i) in filtered"
-            :key="opt.value"
-            class="qiu-combobox__option"
-            :class="{ 'is-active': i === activeIndex, 'is-selected': opt.value === modelValue }"
-            @mouseenter="activeIndex = i"
-            @click="select(opt)"
-          >
-            <slot name="option" :option="opt">{{ opt.label }}</slot>
-          </li>
-        </ul>
-        <div v-else class="qiu-combobox__empty">无匹配项</div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue'
-
-defineOptions({ name: 'QiuCombobox' })
-
-interface Option {
-  label: string
-  value: string | number
-  disabled?: boolean
-}
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number
-    options?: Option[]
-    placeholder?: string
-    size?: 'small' | 'default' | 'large'
-    disabled?: boolean
-    /** 允许输入非选项值 */
-    allowFree?: boolean
-    filterable?: boolean
-  }>(),
-  {
-    modelValue: '',
-    options: () => [],
-    placeholder: '请选择',
-    size: 'default',
-    disabled: false,
-    allowFree: false,
-    filterable: true,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string | number]
-  change: [Option | null]
-}>()
-
-const rootRef = ref<HTMLElement | null>(null)
-const panelRef = ref<HTMLElement | null>(null)
-const open = ref(false)
-const query = ref('')
-const activeIndex = ref(0)
-const panelStyle = ref<Record<string, string>>({})
-
-const selectedLabel = computed(() => {
-  const f = props.options.find((o) => o.value === props.modelValue)
-  return f ? f.label : ''
-})
-
-const filtered = computed(() => {
-  if (!props.filterable || !query.value) return props.options
-  const q = query.value.toLowerCase()
-  return props.options.filter((o) => o.label.toLowerCase().includes(q))
-})
-
-watch(
-  () => props.modelValue,
-  () => {
-    query.value = selectedLabel.value
-  },
-  { immediate: true }
-)
-
-const updatePanel = () => {
-  const trigger = rootRef.value
-  const panel = panelRef.value
-  if (!trigger || !panel) return
-  const rect = trigger.getBoundingClientRect()
-  const panelRect = panel.getBoundingClientRect()
-  const gap = 4
-  let top = rect.bottom + gap
-  if (top + panelRect.height > window.innerHeight - 4) top = rect.top - panelRect.height - gap
-  const left = Math.min(Math.max(4, rect.left), window.innerWidth - panelRect.width - 4)
-  panelStyle.value = {
-    position: 'fixed',
-    top: `${Math.max(4, top)}px`,
-    left: `${left}px`,
-    width: `${rect.width}px`,
-    zIndex: '2100',
-  }
-}
-
-const openPanel = async () => {
-  if (props.disabled) return
-  open.value = true
-  activeIndex.value = 0
-  await nextTick()
-  updatePanel()
-}
-
-const close = () => {
-  if (!open.value) return
-  open.value = false
-  query.value = selectedLabel.value
-}
-
-const toggle = () => (open.value ? close() : openPanel())
-
-const onInput = (e: Event) => {
-  query.value = (e.target as HTMLInputElement).value
-  if (!open.value) openPanel()
-}
-
-const onDown = () => {
-  if (!open.value) return openPanel()
-  if (activeIndex.value < filtered.value.length - 1) activeIndex.value++
-}
-const onUp = () => {
-  if (activeIndex.value > 0) activeIndex.value--
-}
-const onEnter = () => {
-  const opt = filtered.value[activeIndex.value]
-  if (opt) select(opt)
-}
-
-const select = (opt: Option) => {
-  emit('update:modelValue', opt.value)
-  emit('change', opt)
-  query.value = opt.label
-  open.value = false
-}
-
-const onDocClick = (e: MouseEvent) => {
-  if (!open.value) return
-  const t = e.target as Node
-  if (rootRef.value?.contains(t) || panelRef.value?.contains(t)) return
-  close()
-}
-
-watch(open, (v) => {
-  if (v) document.addEventListener('mousedown', onDocClick, true)
-  else document.removeEventListener('mousedown', onDocClick, true)
-})
-
-onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick, true))
-</script>
-
-<style lang="scss" scoped>
-.qiu-combobox {
-  display: inline-flex;
-  width: 100%;
-  max-width: 100%;
-  vertical-align: middle;
-
-  &.is-disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-.qiu-combobox__control {
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 0 8px 0 12px;
-  background: var(--qiu-bg-color, #fff);
-  border: 1px solid var(--qiu-border-color, #dcdfe6);
-  border-radius: var(--qiu-border-radius-base, 4px);
-  cursor: pointer;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-  .qiu-combobox.is-open & {
-    border-color: var(--qiu-color-primary, #409eff);
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary, #409eff) 25%, transparent);
-  }
-}
-
-.qiu-combobox__input {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  padding: 0;
-  font-size: 14px;
-  color: var(--qiu-text-color-primary, #303133);
-  background: transparent;
-  border: 0;
-  outline: none;
-
-  &::placeholder {
-    color: var(--qiu-text-color-placeholder, #a8abb2);
-  }
-}
-
-.qiu-combobox__arrow {
-  flex-shrink: 0;
-  color: var(--qiu-text-color-placeholder, #a8abb2);
-  transition: transform 0.2s ease;
-
-  &.is-open {
-    transform: rotate(180deg);
-  }
-}
-
-.qiu-combobox__panel {
-  box-sizing: border-box;
-  max-height: 240px;
-  overflow-y: auto;
-  background: var(--qiu-bg-color-overlay, #fff);
-  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
-  border-radius: var(--qiu-border-radius-base, 4px);
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
-}
-
-.qiu-combobox__list {
-  margin: 0;
-  padding: 4px;
-  list-style: none;
-}
-
-.qiu-combobox__option {
-  padding: 7px 10px;
-  font-size: 14px;
-  color: var(--qiu-text-color-regular, #606266);
-  cursor: pointer;
-  border-radius: 4px;
-
-  &:hover,
-  &.is-active {
-    color: var(--qiu-color-primary, #409eff);
-    background: var(--qiu-color-primary-light-9, #ecf5ff);
-  }
-
-  &.is-selected {
-    font-weight: 600;
-    color: var(--qiu-color-primary, #409eff);
-  }
-}
-
-.qiu-combobox__empty {
-  padding: 12px;
-  font-size: 13px;
-  text-align: center;
-  color: var(--qiu-text-color-placeholder, #a8abb2);
-}
-
-.qiu-combobox--small .qiu-combobox__control { height: 30px; }
-.qiu-combobox--default .qiu-combobox__control { height: 36px; }
-.qiu-combobox--large .qiu-combobox__control { height: 42px; }
-</style>

package/components/QiuConfigProvider/index.vue

@@ -1,31 +0,0 @@
-<template>
-  <slot />
-</template>
-
-<script lang="ts" setup>
-export interface QiuConfigProviderContext {
-  size: Ref<'large' | 'default' | 'small'>
-  locale: Ref<Record<string, string> | undefined>
-  zIndex: Ref<number>
-}
-
-defineOptions({ name: 'QiuConfigProvider' })
-
-const props = withDefaults(
-  defineProps<{
-    size?: 'large' | 'default' | 'small'
-    locale?: Record<string, string>
-    zIndex?: number
-  }>(),
-  {
-    size: 'default',
-    zIndex: 2000,
-  }
-)
-
-provide<QiuConfigProviderContext>('qiuConfigProvider', {
-  size: toRef(props, 'size'),
-  locale: toRef(props, 'locale'),
-  zIndex: toRef(props, 'zIndex'),
-})
-</script>

package/components/QiuContextMenu/index.vue

@@ -1,209 +0,0 @@
-<template>
-  <span
-    ref="triggerRef"
-    class="qiu-context-menu"
-    @contextmenu.prevent="onContextMenu"
-  >
-    <slot />
-  </span>
-
-  <Teleport to="body">
-    <Transition name="qiu-context-menu-fade">
-      <div
-        v-if="visible"
-        ref="menuRef"
-        class="qiu-context-menu__panel"
-        :style="panelStyle"
-        @contextmenu.prevent
-        @click.stop
-      >
-        <ul class="qiu-context-menu__list">
-          <template v-for="(item, i) in items" :key="i">
-            <li v-if="item.divider" class="qiu-context-menu__divider" role="separator" />
-            <li
-              v-else
-              class="qiu-context-menu__item"
-              :class="{ 'is-disabled': item.disabled }"
-              @click="onItemClick(item)"
-            >
-              <qiu-icon v-if="item.icon" :icon="item.icon" class="qiu-context-menu__icon" />
-              <span class="qiu-context-menu__label">{{ item.label }}</span>
-              <span v-if="item.shortcut" class="qiu-context-menu__shortcut">{{ item.shortcut }}</span>
-            </li>
-          </template>
-          <slot name="items" />
-        </ul>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, ref } from 'vue'
-
-defineOptions({ name: 'QiuContextMenu' })
-
-interface MenuItem {
-  label: string
-  icon?: string
-  shortcut?: string
-  disabled?: boolean
-  /** 自定义标识，点击时回传 */
-  command?: string | number
-  divider?: boolean
-}
-
-const props = withDefaults(
-  defineProps<{
-    items?: MenuItem[]
-  }>(),
-  {
-    items: () => [],
-  }
-)
-
-const emit = defineEmits<{
-  select: [MenuItem]
-  command: [string | number]
-  visibleChange: [boolean]
-}>()
-
-const triggerRef = ref<HTMLElement | null>(null)
-const menuRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-const panelStyle = ref<Record<string, string>>({})
-
-const onContextMenu = async (e: MouseEvent) => {
-  e.preventDefault()
-  visible.value = true
-  emit('visibleChange', true)
-  await nextTick()
-  updatePosition(e.clientX, e.clientY)
-}
-
-const updatePosition = (x: number, y: number) => {
-  const menu = menuRef.value
-  if (!menu) return
-  const rect = menu.getBoundingClientRect()
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-  let left = Math.min(x, vw - rect.width - 4)
-  let top = Math.min(y, vh - rect.height - 4)
-  left = Math.max(4, left)
-  top = Math.max(4, top)
-  panelStyle.value = { position: 'fixed', top: `${top}px`, left: `${left}px`, zIndex: '3000' }
-}
-
-const close = () => {
-  if (!visible.value) return
-  visible.value = false
-  emit('visibleChange', false)
-}
-
-const onItemClick = (item: MenuItem) => {
-  if (item.disabled) return
-  emit('select', item)
-  if (item.command !== undefined) emit('command', item.command)
-  close()
-}
-
-const onDocClick = (e: MouseEvent) => {
-  if (menuRef.value?.contains(e.target as Node)) return
-  close()
-}
-
-const onScrollOrResize = () => close()
-
-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-context-menu {
-  display: inline-block;
-}
-
-.qiu-context-menu__panel {
-  box-sizing: border-box;
-  min-width: 160px;
-  padding: 4px;
-  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 rgba(0, 0, 0, 0.12));
-}
-
-.qiu-context-menu__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.qiu-context-menu__item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 10px;
-  font-size: 13px;
-  color: var(--qiu-text-color-regular, #606266);
-  cursor: pointer;
-  border-radius: 4px;
-
-  &:hover {
-    color: var(--qiu-color-primary, #409eff);
-    background: var(--qiu-color-primary-light-9, #ecf5ff);
-  }
-
-  &.is-disabled {
-    color: var(--qiu-text-color-placeholder, #a8abb2);
-    cursor: not-allowed;
-    background: transparent;
-  }
-}
-
-.qiu-context-menu__icon {
-  flex-shrink: 0;
-  font-size: 14px;
-}
-
-.qiu-context-menu__label {
-  flex: 1;
-}
-
-.qiu-context-menu__shortcut {
-  font-size: 12px;
-  color: var(--qiu-text-color-placeholder, #a8abb2);
-}
-
-.qiu-context-menu__divider {
-  height: 1px;
-  margin: 4px 6px;
-  background: var(--qiu-border-color-lighter, #ebeef5);
-}
-
-.qiu-context-menu-fade-enter-active,
-.qiu-context-menu-fade-leave-active {
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-
-.qiu-context-menu-fade-enter-from,
-.qiu-context-menu-fade-leave-to {
-  opacity: 0;
-  transform: scale(0.96);
-}
-</style>