foucui 1.0.1

package/components/QiuColorfulCard/index.vue

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

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

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

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