foucui 1.0.1

package/components/QiuCascader/types.ts

@@ -0,0 +1,48 @@
+/** 级联选项（字段名可由 props 配置） */
+export type QiuCascaderOption = Record<string, any>
+
+export interface QiuCascaderPropsConfig {
+  /** 选项值字段，默认 value */
+  value?: string
+  /** 选项文案字段，默认 label */
+  label?: string
+  /** 子级字段，默认 children */
+  children?: string
+  /** 禁用字段，默认 disabled */
+  disabled?: string
+  /** 是否多选 */
+  multiple?: boolean
+  /** 是否允许选择任意一级（非仅叶子） */
+  checkStrictly?: boolean
+  /** 是否返回完整路径；false 时只返回末级 value */
+  emitPath?: boolean
+  /** 展开方式 */
+  expandTrigger?: 'click' | 'hover'
+}
+
+export type QiuCascaderValue =
+  | string
+  | number
+  | Array<string | number>
+  | Array<Array<string | number>>
+  | null
+
+export function getOptValue(opt: QiuCascaderOption, cfg: QiuCascaderPropsConfig) {
+  return opt[cfg.value ?? 'value'] as string | number
+}
+
+export function getOptLabel(opt: QiuCascaderOption, cfg: QiuCascaderPropsConfig) {
+  return String(opt[cfg.label ?? 'label'] ?? '')
+}
+
+export function getOptChildren(
+  opt: QiuCascaderOption,
+  cfg: QiuCascaderPropsConfig
+): QiuCascaderOption[] | undefined {
+  const children = opt[cfg.children ?? 'children']
+  return Array.isArray(children) ? (children as QiuCascaderOption[]) : undefined
+}
+
+export function isOptDisabled(opt: QiuCascaderOption, cfg: QiuCascaderPropsConfig) {
+  return Boolean(opt[cfg.disabled ?? 'disabled'])
+}

package/components/QiuCheckbox/QiuCheckboxGroup.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="qiu-checkbox-group"
+    :class="[
+      { 'is-disabled': disabled },
+      `qiu-checkbox-group--${type}`,
+    ]"
+    role="group"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { QiuCheckboxGroupContext } from './types'
+
+defineOptions({ name: 'QiuCheckboxGroup' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: (string | number)[]
+    disabled?: boolean
+    /** default | button */
+    type?: 'default' | 'button'
+  }>(),
+  {
+    modelValue: () => [],
+    disabled: false,
+    type: 'default',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [(string | number)[]]
+  change: [(string | number)[]]
+}>()
+
+const modelValueRef = computed(() => props.modelValue)
+const disabledRef = computed(() => props.disabled)
+
+const toggleOption = (label: string | number, checked: boolean) => {
+  const next = [...props.modelValue]
+  const idx = next.indexOf(label)
+  if (checked && idx < 0) next.push(label)
+  else if (!checked && idx >= 0) next.splice(idx, 1)
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+
+provide<QiuCheckboxGroupContext>('qiuCheckboxGroup', {
+  modelValue: modelValueRef as Ref<(string | number)[]>,
+  disabled: disabledRef as Ref<boolean>,
+  type: computed(() => props.type),
+  toggleOption,
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &--button {
+    flex-wrap: nowrap;
+    gap: 0;
+
+    :deep(.qiu-checkbox) {
+      margin-right: 0;
+    }
+  }
+}
+</style>

package/components/QiuCheckbox/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <label
+    class="qiu-checkbox"
+    :class="{
+      'is-checked': isChecked,
+      'is-disabled': isDisabled,
+      'is-indeterminate': indeterminate,
+      'is-button': isButton,
+      'is-border': border,
+    }"
+  >
+    <span class="qiu-checkbox__input">
+      <input
+        type="checkbox"
+        class="qiu-checkbox__original"
+        :checked="isChecked"
+        :disabled="isDisabled"
+        :value="label"
+        @change="onChange"
+      />
+      <span class="qiu-checkbox__inner" />
+    </span>
+    <span v-if="showLabel" class="qiu-checkbox__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import type { QiuCheckboxGroupContext } from './types'
+
+defineOptions({ name: 'QiuCheckbox' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean | string | number
+    /** 选项值（用于 CheckboxGroup）；勿用 boolean，否则 Vue 会把未传当成 false 并显示成文字 */
+    label?: string | number
+    disabled?: boolean
+    indeterminate?: boolean
+    trueLabel?: string | number
+    falseLabel?: string | number
+    border?: boolean
+  }>(),
+  {
+    modelValue: false,
+    disabled: false,
+    indeterminate: false,
+    border: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean | string | number]
+  change: [boolean | string | number]
+}>()
+
+const slots = useSlots()
+const groupCtx = inject<QiuCheckboxGroupContext | null>('qiuCheckboxGroup', null)
+
+const isDisabled = computed(() => props.disabled || groupCtx?.disabled.value)
+const isButton = computed(() => groupCtx?.type?.value === 'button')
+
+/** 仅在有真实文案时展示 label，避免出现 "false" */
+const showLabel = computed(() => {
+  if (slots.default) return true
+  if (props.label === undefined || props.label === null) return false
+  return String(props.label).length > 0
+})
+
+const isChecked = computed(() => {
+  if (groupCtx) {
+    return groupCtx.modelValue.value.includes(props.label as string | number)
+  }
+  if (props.trueLabel !== undefined || props.falseLabel !== undefined) {
+    return props.modelValue === props.trueLabel
+  }
+  return !!props.modelValue
+})
+
+const onChange = (e: Event) => {
+  if (isDisabled.value) return
+  const checked = (e.target as HTMLInputElement).checked
+
+  if (groupCtx && props.label !== undefined) {
+    groupCtx.toggleOption(props.label as string | number, checked)
+    return
+  }
+
+  let val: boolean | string | number = checked
+  if (props.trueLabel !== undefined || props.falseLabel !== undefined) {
+    val = checked ? (props.trueLabel ?? true) : (props.falseLabel ?? false)
+  }
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-checkbox {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  height: 32px;
+  margin-right: 16px;
+  font-size: 14px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.qiu-checkbox__input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.qiu-checkbox__original {
+  position: absolute;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+}
+
+.qiu-checkbox__inner {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+  border-radius: 2px;
+  transition: border-color 0.2s ease, background 0.2s ease;
+
+  &::after {
+    position: absolute;
+    top: 1px;
+    left: 4px;
+    box-sizing: content-box;
+    width: 3px;
+    height: 7px;
+    content: '';
+    border: 2px solid #fff;
+    border-top: 0;
+    border-left: 0;
+    opacity: 0;
+    transform: rotate(45deg) scaleY(0);
+    transition: transform 0.15s ease-in 0.05s, opacity 0.15s ease;
+    transform-origin: center;
+  }
+
+  .is-checked & {
+    background: var(--qiu-color-primary, var(--qiu-color-primary));
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+
+    &::after {
+      opacity: 1;
+      transform: rotate(45deg) scaleY(1);
+    }
+  }
+
+  .is-indeterminate & {
+    background: var(--qiu-color-primary, var(--qiu-color-primary));
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+
+    &::after {
+      top: 5px;
+      left: 2px;
+      width: 8px;
+      height: 0;
+      border: 0;
+      opacity: 1;
+      transform: none;
+      background: #fff;
+    }
+  }
+}
+
+.qiu-checkbox__label {
+  line-height: 1;
+}
+
+.qiu-checkbox.is-border {
+  padding: 0 12px;
+  height: 32px;
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-radius: 4px;
+
+  &.is-checked {
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+  }
+}
+
+.qiu-checkbox.is-button {
+  height: 32px;
+  padding: 0 16px;
+  margin: 0;
+  background: var(--qiu-fill-color-blank, #fff);
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-left-width: 0;
+
+  &:first-child {
+    border-left-width: 1px;
+    border-radius: 4px 0 0 4px;
+  }
+
+  &:last-child {
+    border-radius: 0 4px 4px 0;
+  }
+
+  .qiu-checkbox__input {
+    display: none;
+  }
+
+  &.is-checked {
+    color: #fff;
+    background: var(--qiu-color-primary, var(--qiu-color-primary));
+    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
+  }
+}
+</style>

package/components/QiuCheckbox/types.ts

@@ -0,0 +1,8 @@
+import type { ComputedRef, Ref } from 'vue'
+
+export interface QiuCheckboxGroupContext {
+  modelValue: Ref<(string | number)[]>
+  disabled: Ref<boolean>
+  type?: ComputedRef<'default' | 'button'>
+  toggleOption: (label: string | number, checked: boolean) => void
+}

package/components/QiuCode/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <pre class="qiu-code" :class="[`qiu-code--${theme}`, { 'is-wrap': wrap }]"><code>{{ displayCode }}</code></pre>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'QiuCode' })
+
+const props = withDefaults(
+  defineProps<{
+    code?: string
+    /** 语言标识，仅做展示用途 */
+    language?: string
+    /** 是否自动换行 */
+    wrap?: boolean
+    theme?: 'light' | 'dark'
+  }>(),
+  {
+    code: '',
+    language: 'text',
+    wrap: false,
+    theme: 'light',
+  }
+)
+
+const displayCode = computed(() => String(props.code ?? '').replace(/\n$/, ''))
+</script>
+
+<style lang="scss" scoped>
+.qiu-code {
+  margin: 0;
+  padding: 12px 14px;
+  overflow: auto;
+  font-family: var(--qiu-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre;
+  border-radius: var(--qiu-border-radius-base, 4px);
+  box-sizing: border-box;
+
+  &.is-wrap {
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  code {
+    font-family: inherit;
+    white-space: inherit;
+  }
+}
+
+.qiu-code--light {
+  color: var(--qiu-text-color-primary, #303133);
+  background: var(--qiu-fill-color-light, #f5f7fa);
+  border: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+}
+
+.qiu-code--dark {
+  color: #d4d4d4;
+  background: #1e1e1e;
+  border: 1px solid #2d2d2d;
+}
+</style>

package/components/QiuCol/col.scss

@@ -0,0 +1,55 @@
+.qiu-col {
+  box-sizing: border-box;
+  min-height: 1px;
+}
+
+@for $i from 0 through 24 {
+  .qiu-col-#{$i} {
+    @if $i == 0 {
+      display: none;
+    } @else {
+      flex: 0 0 #{calc($i / 24 * 100%)};
+      max-width: #{calc($i / 24 * 100%)};
+    }
+  }
+
+  .qiu-col-offset-#{$i} {
+    margin-left: #{calc($i / 24 * 100%)};
+  }
+
+  .qiu-col-push-#{$i} {
+    position: relative;
+    left: #{calc($i / 24 * 100%)};
+  }
+
+  .qiu-col-pull-#{$i} {
+    position: relative;
+    right: #{calc($i / 24 * 100%)};
+  }
+}
+
+@mixin respond-col($name, $min) {
+  @media (min-width: $min) {
+    @for $i from 0 through 24 {
+      .qiu-col-#{$name}-#{$i} {
+        @if $i == 0 {
+          display: none;
+        } @else {
+          display: block;
+          flex: 0 0 #{calc($i / 24 * 100%)};
+          max-width: #{calc($i / 24 * 100%)};
+        }
+      }
+
+      .qiu-col-#{$name}-offset-#{$i} {
+        margin-left: #{calc($i / 24 * 100%)};
+      }
+    }
+  }
+}
+
+@include respond-col(xs, 0);
+@include respond-col(sm, 768px);
+@include respond-col(md, 992px);
+@include respond-col(lg, 1200px);
+@include respond-col(xl, 1920px);

package/components/QiuCol/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="qiu-col" :class="colClass" :style="colStyle">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { QIU_ROW_KEY, type QiuRowContext } from '../QiuRow/types'
+
+defineOptions({ name: 'QiuCol' })
+
+const props = withDefaults(
+  defineProps<{
+    span?: number
+    offset?: number
+    push?: number
+    pull?: number
+    xs?: number | { span?: number; offset?: number }
+    sm?: number | { span?: number; offset?: number }
+    md?: number | { span?: number; offset?: number }
+    lg?: number | { span?: number; offset?: number }
+    xl?: number | { span?: number; offset?: number }
+  }>(),
+  {
+    span: 24,
+    offset: 0,
+    push: 0,
+    pull: 0,
+  }
+)
+
+const row = inject<QiuRowContext | null>(QIU_ROW_KEY, null)
+
+const normalize = (v?: number | { span?: number; offset?: number }) => {
+  if (v == null) return null
+  if (typeof v === 'number') return { span: v, offset: 0 }
+  return { span: v.span ?? 24, offset: v.offset ?? 0 }
+}
+
+const colClass = computed(() => {
+  const list = [`qiu-col-${props.span}`]
+  if (props.offset) list.push(`qiu-col-offset-${props.offset}`)
+  if (props.push) list.push(`qiu-col-push-${props.push}`)
+  if (props.pull) list.push(`qiu-col-pull-${props.pull}`)
+  ;(['xs', 'sm', 'md', 'lg', 'xl'] as const).forEach((bp) => {
+    const conf = normalize(props[bp])
+    if (!conf) return
+    list.push(`qiu-col-${bp}-${conf.span}`)
+    if (conf.offset) list.push(`qiu-col-${bp}-offset-${conf.offset}`)
+  })
+  return list
+})
+
+const colStyle = computed(() => {
+  const g = row?.gutter.value || 0
+  if (!g) return undefined
+  return {
+    paddingLeft: `${g / 2}px`,
+    paddingRight: `${g / 2}px`,
+  }
+})
+</script>
+
+<style lang="scss" src="./col.scss"></style>

package/components/QiuCollapse/context.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface QiuCollapseContext {
+  activeNames: Ref<(string | number)[]>
+  accordion: Ref<boolean>
+  toggleItem: (name: string | number) => void
+  isActive: (name: string | number) => boolean
+}
+
+export const QIU_COLLAPSE_KEY: InjectionKey<QiuCollapseContext> = Symbol('QiuCollapse')

package/components/QiuCollapse/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="qiu-collapse" role="presentation">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { QiuCollapseContext } from './context'
+import { QIU_COLLAPSE_KEY } from './context'
+
+defineOptions({ name: 'QiuCollapse' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | (string | number)[]
+    accordion?: boolean
+  }>(),
+  {
+    accordion: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [string | number | (string | number)[]]
+  change: [string | number | (string | number)[]]
+}>()
+
+const normalize = (val: typeof props.modelValue): (string | number)[] => {
+  if (val === undefined || val === null) return []
+  return Array.isArray(val) ? [...val] : [val]
+}
+
+const activeNames = computed({
+  get() {
+    return normalize(props.modelValue)
+  },
+  set(val: (string | number)[]) {
+    const out = props.accordion ? val[0] ?? '' : val
+    emit('update:modelValue', out)
+    emit('change', out)
+  },
+})
+
+const isActive = (name: string | number) => activeNames.value.includes(name)
+
+const toggleItem = (name: string | number) => {
+  if (props.accordion) {
+    activeNames.value = isActive(name) ? [] : [name]
+    return
+  }
+  const set = new Set(activeNames.value)
+  if (set.has(name)) set.delete(name)
+  else set.add(name)
+  activeNames.value = [...set]
+}
+
+provide<QiuCollapseContext>(QIU_COLLAPSE_KEY, {
+  activeNames: activeNames as Ref<(string | number)[]>,
+  accordion: toRef(props, 'accordion'),
+  toggleItem,
+  isActive,
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-collapse {
+  border-top: 1px solid var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
+  border-bottom: 1px solid var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
+}
+</style>