foucui 1.0.1 → 2.0.0

package/components/QiuCascader/types.ts

@@ -1,48 +0,0 @@
-/** 级联选项（字段名可由 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

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

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

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

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

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

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

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

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