foucui 1.0.1

package/components/QiuCollapseItem/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div
+    class="qiu-collapse-item"
+    :class="{
+      'is-active': expanded,
+      'is-disabled': disabled,
+    }"
+  >
+    <button
+      type="button"
+      class="qiu-collapse-item__header"
+      :disabled="disabled"
+      :aria-expanded="expanded"
+      @click="onToggle"
+    >
+      <span class="qiu-collapse-item__title">
+        <slot name="title">{{ title }}</slot>
+      </span>
+      <qiu-icon
+        class="qiu-collapse-item__arrow"
+        :class="{ 'is-active': expanded }"
+        icon="arrow-down-s-line"
+      />
+    </button>
+    <div
+      class="qiu-collapse-item__wrap"
+      :class="{ 'is-active': expanded }"
+    >
+      <div ref="contentRef" class="qiu-collapse-item__content">
+        <div class="qiu-collapse-item__content-inner">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { QiuCollapseContext } from '../QiuCollapse/context'
+import { QIU_COLLAPSE_KEY } from '../QiuCollapse/context'
+
+defineOptions({ name: 'QiuCollapseItem' })
+
+const props = withDefaults(
+  defineProps<{
+    name: string | number
+    title?: string
+    disabled?: boolean
+  }>(),
+  {
+    title: '',
+    disabled: false,
+  }
+)
+
+const collapse = inject<QiuCollapseContext>(QIU_COLLAPSE_KEY, null)
+const contentRef = ref<HTMLElement | null>(null)
+const contentHeight = ref(0)
+
+const expanded = computed(() => collapse?.isActive(props.name) ?? false)
+
+const onToggle = () => {
+  if (props.disabled || !collapse) return
+  collapse.toggleItem(props.name)
+}
+
+const measure = () => {
+  if (contentRef.value) contentHeight.value = contentRef.value.scrollHeight
+}
+
+watch(expanded, async (val) => {
+  if (val) {
+    await nextTick()
+    measure()
+  }
+})
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  measure()
+  if (typeof ResizeObserver !== 'undefined' && contentRef.value) {
+    resizeObserver = new ResizeObserver(measure)
+    resizeObserver.observe(contentRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-collapse-item {
+  border-bottom: 1px solid var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &.is-disabled {
+    .qiu-collapse-item__header {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+}
+
+.qiu-collapse-item__header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  padding: 12px 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: none;
+  transition: color 0.2s;
+
+  &:hover:not(:disabled) {
+    color: var(--qiu-color-primary, var(--qiu-color-primary, #409eff));
+  }
+}
+
+.qiu-collapse-item__title {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+}
+
+.qiu-collapse-item__arrow {
+  flex-shrink: 0;
+  font-size: 16px;
+  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+  transition: transform 0.3s ease;
+
+  &.is-active {
+    transform: rotate(180deg);
+  }
+}
+
+.qiu-collapse-item__wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.3s ease;
+
+  &.is-active {
+    grid-template-rows: 1fr;
+  }
+}
+
+.qiu-collapse-item__content {
+  min-height: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+}
+
+.qiu-collapse-item__content-inner {
+  padding-bottom: 12px;
+}
+</style>

package/components/QiuColorField/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <div
+    class="qiu-color-field"
+    :class="{
+      'is-disabled': disabled,
+      'is-focused': focused,
+    }"
+  >
+    <div class="qiu-color-field__main">
+      <label class="qiu-color-field__native-wrap" :title="displayValue">
+        <input
+          class="qiu-color-field__native"
+          type="color"
+          :value="normalizedValue"
+          :disabled="disabled"
+          @input="onNativeInput"
+          @focus="focused = true"
+          @blur="focused = false"
+        />
+        <span
+          class="qiu-color-field__preview"
+          :style="{ background: displayValue || 'transparent' }"
+        />
+      </label>
+      <input
+        v-model="hexInput"
+        class="qiu-color-field__hex"
+        type="text"
+        maxlength="7"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        spellcheck="false"
+        @focus="focused = true"
+        @blur="onHexBlur"
+        @keydown.enter="onHexBlur"
+      />
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="qiu-color-field__clear"
+        tabindex="-1"
+        @click="clear"
+      >
+        ×
+      </button>
+    </div>
+    <div v-if="presets.length" class="qiu-color-field__presets">
+      <button
+        v-for="color in presets"
+        :key="color"
+        type="button"
+        class="qiu-color-field__swatch"
+        :class="{ 'is-active': normalizedValue.toLowerCase() === color.toLowerCase() }"
+        :style="{ background: color }"
+        :title="color"
+        :disabled="disabled"
+        @click="selectPreset(color)"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuColorField' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    presets?: string[]
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: '',
+    presets: () => [
+      '#409eff',
+      '#67c23a',
+      '#e6a23c',
+      '#f56c6c',
+      '#909399',
+      '#1e90ff',
+      '#4e6ef2',
+      '#0052d9',
+      '#3fb884',
+      '#6954f0',
+    ],
+    placeholder: '#000000',
+    clearable: false,
+    disabled: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [string]
+  change: [string]
+  clear: []
+}>()
+
+const focused = ref(false)
+const hexInput = ref('')
+
+const hasValue = computed(() => !!props.modelValue)
+
+const normalizeHex = (val: string) => {
+  const v = val.trim()
+  if (!v) return ''
+  const withHash = v.startsWith('#') ? v : `#${v}`
+  if (/^#[0-9a-fA-F]{6}$/.test(withHash)) return withHash.toLowerCase()
+  if (/^#[0-9a-fA-F]{3}$/.test(withHash)) {
+    const r = withHash[1]
+    const g = withHash[2]
+    const b = withHash[3]
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase()
+  }
+  return ''
+}
+
+const normalizedValue = computed(() => normalizeHex(props.modelValue) || '#000000')
+const displayValue = computed(() => normalizeHex(props.modelValue))
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    hexInput.value = normalizeHex(val) || val
+  },
+  { immediate: true }
+)
+
+const updateValue = (val: string) => {
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+
+const onNativeInput = (e: Event) => {
+  const val = (e.target as HTMLInputElement).value
+  hexInput.value = val
+  updateValue(val)
+}
+
+const onHexBlur = () => {
+  focused.value = false
+  const normalized = normalizeHex(hexInput.value)
+  if (normalized) {
+    hexInput.value = normalized
+    updateValue(normalized)
+  } else {
+    hexInput.value = displayValue.value
+  }
+}
+
+const selectPreset = (color: string) => {
+  hexInput.value = color
+  updateValue(color)
+}
+
+const clear = () => {
+  hexInput.value = ''
+  emit('update:modelValue', '')
+  emit('change', '')
+  emit('clear')
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-color-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &.is-focused .qiu-color-field__main {
+    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);
+  }
+
+  &__main {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    height: 32px;
+    padding: 0 8px;
+    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));
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  &__native-wrap {
+    position: relative;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    overflow: hidden;
+    cursor: pointer;
+    border: 1px solid var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
+    border-radius: 4px;
+  }
+
+  &__native {
+    position: absolute;
+    inset: -4px;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    padding: 0;
+    cursor: pointer;
+    border: 0;
+    opacity: 0;
+  }
+
+  &__preview {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+  }
+
+  &__hex {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 13px;
+    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+    background: transparent;
+    border: 0;
+    outline: none;
+
+    &::placeholder {
+      color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__clear {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    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));
+    }
+  }
+
+  &__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  &__swatch {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    cursor: pointer;
+    border: 1px solid rgb(0 0 0 / 12%);
+    border-radius: 4px;
+    outline: none;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover:not(:disabled) {
+      transform: scale(1.08);
+    }
+
+    &.is-active {
+      box-shadow: 0 0 0 2px var(--qiu-color-primary, var(--qiu-color-primary));
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}
+</style>

package/components/QiuColorPicker/README.md

@@ -0,0 +1,118 @@
+# QiuColorPicker 颜色选择器
+
+轻量颜色选择器：左侧原生取色块（点击弹出系统调色板），右侧十六进制输入框，下方常用预设色板。
+选择颜色后通过 `v-model`（即 `update:modelValue`）自动回填颜色值，可直接用于表单配置。
+
+基于 `QiuColorField` 封装，随 `qiuui-vue` 一起发布，**无需单独安装**。
+
+## 安装
+
+`QiuColorPicker` 已内置在 `qiuui-vue` 组件库中，安装组件库即可使用：
+
+```bash
+pnpm add qiuui-vue
+# 或 npm i qiuui-vue
+```
+
+在应用入口 `main.ts` 中完成一次性的全局安装（仅需做一次，所有组件通用）：
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+import { setupQiu } from 'qiuui-vue'
+import 'qiuui-vue/dist/qiuui-vue.css'   // 组件库样式
+import 'qiuui-vue/styles/qiu.scss'       // 三套主题(plain/dark/technology)与变量
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(setupQiu)   // 全局注册全部组件 + $qiuMsg / $qiuNotify 等助手
+app.mount('#app')
+```
+
+> 说明：本组件库实际发布包名为 `qiuui-vue`（非 `qiu-ui`）。执行 `app.use(setupQiu)` 后，
+> `<qiu-color-picker>` 在任意 `.vue` 文件中无需 import 即可直接使用。
+
+## 使用（qiuui-vue 调用法）
+
+### 全局注册后直接使用（推荐）
+
+```vue
+<template>
+  <qiu-color-picker v-model="color" clearable />
+  <p>当前颜色：{{ color }}</p>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const color = ref('#1675fe')
+</script>
+```
+
+### 按需显式引入
+
+如果不想全局注册全部组件，也可以单独导入：
+
+```vue
+<template>
+  <QiuColorPicker v-model="color" :presets="presets" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { QiuColorPicker } from 'qiuui-vue'
+
+const color = ref('#1675fe')
+const presets = ['#1675fe', '#f56c6c', '#67c23a', '#000000']
+</script>
+```
+
+## Props
+
+| 参数        | 说明                       | 类型       | 默认值（见下方预设列表） |
+| ----------- | -------------------------- | ---------- | ------------------------ |
+| `modelValue`| 绑定值，十六进制颜色（如 `#1675fe`） | `string`   | `''`                     |
+| `presets`   | 预设色板数组               | `string[]` | 见下方默认值             |
+| `placeholder`| 输入框占位符             | `string`   | `'#1675fe'`              |
+| `clearable` | 是否显示清除按钮           | `boolean`  | `false`                  |
+| `disabled`  | 是否禁用                   | `boolean`  | `false`                  |
+
+默认 `presets`：
+
+```ts
+['#1675fe', '#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#00bcd4', '#9c27b0', '#ff5722', '#795548']
+```
+
+## Events
+
+| 事件名                 | 说明                       | 回调参数     |
+| ---------------------- | -------------------------- | ------------ |
+| `update:modelValue`    | 颜色变化（v-model 绑定）   | `string`     |
+| `change`               | 颜色变化（与上面同步触发） | `string`     |
+
+## 完整示例
+
+```vue
+<template>
+  <div style="max-width: 320px">
+    <qiu-color-picker
+      v-model="form.primaryColor"
+      :presets="['#1675fe', '#f56c6c', '#67c23a', '#000000']"
+      clearable
+    />
+    <p>primaryColor = {{ form.primaryColor }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const form = reactive({
+  primaryColor: '#1675fe',
+})
+</script>
+```
+
+选择预设色、在输入框输入合法十六进制、或点击左侧色块用系统调色板取色，都会自动把颜色值回填到 `v-model`。

package/components/QiuColorPicker/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <qiu-color-field
+    class="qiu-color-picker"
+    v-bind="$attrs"
+    :model-value="modelValue"
+    :presets="presets"
+    :placeholder="placeholder"
+    :clearable="clearable"
+    :disabled="disabled"
+    @update:model-value="emit('update:modelValue', $event)"
+    @change="emit('change', $event)"
+  />
+</template>
+
+<script lang="ts" setup>
+import QiuColorField from '../QiuColorField/index.vue'
+
+defineOptions({
+  name: 'QiuColorPicker',
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    presets?: string[]
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: '',
+    presets: () => [
+      '#1675fe',
+      '#409eff',
+      '#67c23a',
+      '#e6a23c',
+      '#f56c6c',
+      '#909399',
+      '#00bcd4',
+      '#9c27b0',
+      '#ff5722',
+      '#795548',
+    ],
+    placeholder: '#1675fe',
+    clearable: false,
+    disabled: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  change: [value: string]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.qiu-color-picker {
+  width: 100%;
+}
+</style>