foucui 1.0.1 → 2.0.0

package/components/QiuCollapseItem/index.vue

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

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

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

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