foucui 1.0.1 → 2.0.0

package/components/QiuStep/index.vue

@@ -1,220 +0,0 @@
-<template>
-  <div
-    class="qiu-step"
-    :class="[
-      `qiu-step--${stepStatus}`,
-      { 'is-last': isLast },
-      `qiu-step--${parent?.direction.value || 'horizontal'}`,
-    ]"
-    :style="stepStyle"
-  >
-    <div class="qiu-step__head">
-      <div class="qiu-step__icon" :class="{ 'is-text': !icon && !$slots.icon }">
-        <slot name="icon">
-          <qiu-icon v-if="icon" :icon="icon" />
-          <qiu-icon v-else-if="stepStatus === 'finish'" icon="check-line" />
-          <qiu-icon v-else-if="stepStatus === 'error'" icon="close-line" />
-          <span v-else class="qiu-step__index">{{ index + 1 }}</span>
-        </slot>
-      </div>
-      <div v-if="!isLast" class="qiu-step__line" />
-    </div>
-    <div class="qiu-step__main">
-      <div class="qiu-step__title">
-        <slot name="title">{{ title }}</slot>
-      </div>
-      <div v-if="description || $slots.description" class="qiu-step__description">
-        <slot name="description">{{ description }}</slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { QIU_STEPS_KEY, type QiuStepItem, type StepStatus } from '../QiuSteps/context'
-
-defineOptions({ name: 'QiuStep' })
-
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    description?: string
-    icon?: string
-    status?: StepStatus | ''
-  }>(),
-  {
-    title: '',
-    description: '',
-    icon: '',
-    status: '',
-  }
-)
-
-const uid = getCurrentInstance()?.uid ?? Math.random()
-const parent = inject(QIU_STEPS_KEY, null)
-
-const index = computed(() => {
-  if (!parent) return 0
-  return parent.steps.value.findIndex((s) => s.uid === uid)
-})
-
-const isLast = computed(() => {
-  if (!parent) return true
-  return index.value === parent.steps.value.length - 1
-})
-
-const stepStatus = computed((): StepStatus => {
-  if (props.status) return props.status
-  if (!parent) return 'wait'
-  const i = index.value
-  const active = parent.active.value
-  if (i < active) return parent.finishStatus.value
-  if (i === active) return parent.processStatus.value
-  return 'wait'
-})
-
-const stepStyle = computed(() => {
-  if (!parent?.space.value) return undefined
-  const space = parent.space.value
-  if (parent.direction.value === 'vertical') {
-    return { marginBottom: typeof space === 'number' ? `${space}px` : space }
-  }
-  return { flexBasis: typeof space === 'number' ? `${space}px` : space }
-})
-
-const stepItem = computed<QiuStepItem>(() => ({
-  uid,
-  title: props.title,
-  description: props.description,
-  icon: props.icon,
-  status: props.status,
-}))
-
-onMounted(() => parent?.addStep(stepItem.value))
-onUnmounted(() => parent?.removeStep(uid))
-
-watch(stepItem, (val) => {
-  if (!parent) return
-  const idx = parent.steps.value.findIndex((s) => s.uid === uid)
-  if (idx >= 0) parent.steps.value[idx] = val
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-step {
-  position: relative;
-  flex: 1;
-  flex-shrink: 1;
-
-  &--horizontal {
-    .qiu-step__head {
-      display: flex;
-      align-items: center;
-    }
-
-    .qiu-step__line {
-      flex: 1;
-      height: 2px;
-      margin: 0 8px;
-      background: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-    }
-
-    &.qiu-step--finish .qiu-step__line,
-    &.qiu-step--success .qiu-step__line {
-      background: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-    }
-  }
-
-  &--vertical {
-    display: flex;
-    gap: 12px;
-    padding-bottom: 20px;
-
-    .qiu-step__head {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .qiu-step__line {
-      flex: 1;
-      width: 2px;
-      min-height: 24px;
-      margin-top: 4px;
-      background: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-    }
-
-    &.qiu-step--finish .qiu-step__line,
-    &.qiu-step--success .qiu-step__line {
-      background: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-    }
-
-    &.is-last {
-      padding-bottom: 0;
-    }
-  }
-}
-
-.qiu-step__icon {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  font-size: 12px;
-  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-  background: var(--qiu-fill-color-blank, #fff);
-  border: 2px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
-  border-radius: 50%;
-  transition: all 0.2s ease;
-
-  &.is-text {
-    font-weight: 600;
-  }
-}
-
-.qiu-step--process .qiu-step__icon {
-  color: #fff;
-  background: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  border-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-}
-
-.qiu-step--finish .qiu-step__icon,
-.qiu-step--success .qiu-step__icon {
-  color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  border-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-}
-
-.qiu-step--error .qiu-step__icon {
-  color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
-  border-color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
-}
-
-.qiu-step__title {
-  margin-top: 8px;
-  font-size: var(--qiu-font-size, 14px);
-  font-weight: 500;
-  line-height: 1.4;
-  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-}
-
-.qiu-step--process .qiu-step__title {
-  color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-}
-
-.qiu-step--wait .qiu-step__title {
-  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-}
-
-.qiu-step__description {
-  margin-top: 4px;
-  font-size: var(--qiu-font-size-small, 12px);
-  line-height: 1.5;
-  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-}
-
-.qiu-step--vertical .qiu-step__title {
-  margin-top: 0;
-}
-</style>

package/components/QiuSteps/context.ts

@@ -1,25 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-export type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'success'
-
-export interface QiuStepItem {
-  uid: number
-  title: string
-  description: string
-  icon: string
-  status: StepStatus | ''
-}
-
-export interface QiuStepsContext {
-  active: Ref<number>
-  space: Ref<string | number | undefined>
-  direction: Ref<'horizontal' | 'vertical'>
-  processStatus: Ref<StepStatus>
-  finishStatus: Ref<StepStatus>
-  alignCenter: Ref<boolean>
-  steps: Ref<QiuStepItem[]>
-  addStep: (step: QiuStepItem) => void
-  removeStep: (uid: number) => void
-}
-
-export const QIU_STEPS_KEY: InjectionKey<QiuStepsContext> = Symbol('qiuSteps')

package/components/QiuSteps/index.vue

@@ -1,84 +0,0 @@
-<template>
-  <div
-    class="qiu-steps"
-    :class="[
-      `qiu-steps--${direction}`,
-      { 'is-center': alignCenter && direction === 'horizontal' },
-    ]"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { QIU_STEPS_KEY, type QiuStepItem, type StepStatus } from './context'
-
-defineOptions({ name: 'QiuSteps' })
-
-const props = withDefaults(
-  defineProps<{
-    active?: number
-    space?: string | number
-    direction?: 'horizontal' | 'vertical'
-    processStatus?: StepStatus
-    finishStatus?: StepStatus
-    alignCenter?: boolean
-  }>(),
-  {
-    active: 0,
-    direction: 'horizontal',
-    processStatus: 'process',
-    finishStatus: 'finish',
-    alignCenter: false,
-  }
-)
-
-const steps = ref<QiuStepItem[]>([])
-
-const addStep = (step: QiuStepItem) => {
-  steps.value.push(step)
-  steps.value.sort((a, b) => a.uid - b.uid)
-}
-
-const removeStep = (uid: number) => {
-  steps.value = steps.value.filter((s) => s.uid !== uid)
-}
-
-provide(QIU_STEPS_KEY, {
-  active: toRef(props, 'active'),
-  space: toRef(props, 'space'),
-  direction: toRef(props, 'direction'),
-  processStatus: toRef(props, 'processStatus'),
-  finishStatus: toRef(props, 'finishStatus'),
-  alignCenter: toRef(props, 'alignCenter'),
-  steps,
-  addStep,
-  removeStep,
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-steps {
-  display: flex;
-  width: 100%;
-
-  &--horizontal {
-    flex-direction: row;
-  }
-
-  &--vertical {
-    flex-direction: column;
-  }
-
-  &.is-center {
-    :deep(.qiu-step) {
-      flex: 1;
-      text-align: center;
-
-      .qiu-step__head {
-        justify-content: center;
-      }
-    }
-  }
-}
-</style>

package/components/QiuSwitch/index.vue

@@ -1,145 +0,0 @@
-<template>
-  <div
-    class="qiu-switch"
-    :class="[
-      `qiu-switch--${size}`,
-      {
-        'is-checked': isChecked,
-        'is-disabled': disabled,
-      },
-    ]"
-    role="switch"
-    :aria-checked="isChecked"
-    :aria-disabled="disabled"
-    @click="toggle"
-  >
-    <span class="qiu-switch__core">
-      <span class="qiu-switch__action" />
-    </span>
-    <span v-if="inactiveText || activeText" class="qiu-switch__label">
-      <span v-if="!isChecked && inactiveText" class="qiu-switch__label--left">{{ inactiveText }}</span>
-      <span v-if="isChecked && activeText" class="qiu-switch__label--right">{{ activeText }}</span>
-    </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuSwitch' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean | string | number
-    disabled?: boolean
-    size?: 'large' | 'default' | 'small'
-    activeText?: string
-    inactiveText?: string
-    activeValue?: boolean | string | number
-    inactiveValue?: boolean | string | number
-  }>(),
-  {
-    modelValue: false,
-    disabled: false,
-    size: 'default',
-    activeText: '',
-    inactiveText: '',
-    activeValue: true,
-    inactiveValue: false,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [boolean | string | number]
-  change: [boolean | string | number]
-}>()
-
-const isChecked = computed(() => props.modelValue === props.activeValue || props.modelValue === true)
-
-const toggle = () => {
-  if (props.disabled) return
-  const next = isChecked.value ? props.inactiveValue : props.activeValue
-  emit('update:modelValue', next)
-  emit('change', next)
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-switch {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-
-  &--small {
-    .qiu-switch__core {
-      width: 32px;
-      height: 18px;
-    }
-    .qiu-switch__action {
-      width: 14px;
-      height: 14px;
-    }
-    &.is-checked .qiu-switch__action {
-      transform: translateX(14px);
-    }
-  }
-
-  &--large {
-    .qiu-switch__core {
-      width: 48px;
-      height: 24px;
-    }
-    .qiu-switch__action {
-      top: 3px;
-      left: 3px;
-      width: 18px;
-      height: 18px;
-    }
-    &.is-checked .qiu-switch__action {
-      transform: translateX(24px);
-    }
-  }
-}
-
-.qiu-switch__core {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 20px;
-  background: var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
-  border-radius: 999px;
-  outline: none;
-  transition: background 0.2s ease;
-
-  .is-checked & {
-    background: var(--qiu-color-primary, var(--qiu-color-primary));
-  }
-}
-
-.qiu-switch__action {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
-  transition: transform 0.2s ease;
-
-  .is-checked & {
-    transform: translateX(20px);
-  }
-}
-
-.qiu-switch__label {
-  font-size: 13px;
-  color: var(--qiu-text-color-regular, #606266);
-}
-</style>

package/components/QiuTabBar/index.vue

@@ -1,218 +0,0 @@
-<template>
-  <div
-    class="qiu-tab-bar"
-    :class="[
-      `qiu-tab-bar--${type}`,
-      { 'is-stretch': stretch },
-    ]"
-  >
-    <div class="qiu-tab-bar__header" role="tablist">
-      <button
-        v-for="pane in sortedPanes"
-        :key="String(pane.name)"
-        type="button"
-        class="qiu-tab-bar__item"
-        role="tab"
-        :class="{ 'is-active': pane.name === activeName }"
-        :aria-selected="pane.name === activeName"
-        @click="selectTab(pane.name)"
-      >
-        <slot :name="`label-${pane.name}`">
-          {{ pane.label }}
-        </slot>
-      </button>
-    </div>
-    <div class="qiu-tab-bar__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { QiuTabBarContext, QiuTabPaneRegistration } from './types'
-import { QIU_TAB_BAR_KEY } from './types'
-
-defineOptions({ name: 'QiuTabBar' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number
-    type?: 'default' | 'card' | 'border-card'
-    stretch?: boolean
-  }>(),
-  {
-    type: 'default',
-    stretch: false,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string | number]
-  tabClick: [pane: QiuTabPaneRegistration]
-}>()
-
-const panes = ref<QiuTabPaneRegistration[]>([])
-
-const activeName = computed({
-  get() {
-    if (props.modelValue !== undefined && props.modelValue !== null) {
-      return props.modelValue
-    }
-    return panes.value[0]?.name
-  },
-  set(val: string | number) {
-    emit('update:modelValue', val)
-  },
-})
-
-const sortedPanes = computed(() => [...panes.value])
-
-const registerPane = (pane: QiuTabPaneRegistration) => {
-  const idx = panes.value.findIndex((p) => p.uid === pane.uid)
-  if (idx >= 0) panes.value[idx] = pane
-  else panes.value.push(pane)
-
-  if (props.modelValue === undefined && panes.value.length === 1) {
-    activeName.value = pane.name
-  }
-}
-
-const unregisterPane = (uid: number) => {
-  panes.value = panes.value.filter((p) => p.uid !== uid)
-}
-
-const updatePane = (uid: number, partial: Partial<QiuTabPaneRegistration>) => {
-  const idx = panes.value.findIndex((p) => p.uid === uid)
-  if (idx >= 0) panes.value[idx] = { ...panes.value[idx], ...partial }
-}
-
-const activeNameRef = computed(() => activeName.value)
-
-provide<QiuTabBarContext>(QIU_TAB_BAR_KEY, {
-  activeName: activeNameRef as Ref<string | number | undefined>,
-  registerPane,
-  unregisterPane,
-  updatePane,
-})
-
-const selectTab = (name: string | number) => {
-  activeName.value = name
-  const pane = panes.value.find((p) => p.name === name)
-  if (pane) emit('tabClick', pane)
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-tab-bar {
-  --qiu-tab-header-bg: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  --qiu-tab-border: var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
-  --qiu-tab-active-color: var(--qiu-color-primary, var(--qiu-color-primary, #409eff));
-  --qiu-tab-text: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-
-  &__header {
-    display: flex;
-    gap: 0;
-    border-bottom: 1px solid var(--qiu-tab-border);
-  }
-
-  &__item {
-    position: relative;
-    padding: 0 20px;
-    font-size: 14px;
-    line-height: 40px;
-    color: var(--qiu-tab-text);
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    outline: none;
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: var(--qiu-tab-active-color);
-    }
-
-    &.is-active {
-      font-weight: 600;
-      color: var(--qiu-tab-active-color);
-
-      &::after {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: 2px;
-        content: '';
-        background: var(--qiu-tab-active-color);
-      }
-    }
-  }
-
-  &.is-stretch .qiu-tab-bar__item {
-    flex: 1;
-    text-align: center;
-  }
-
-  &--card {
-    .qiu-tab-bar__header {
-      gap: 4px;
-      padding: 4px 4px 0;
-      background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-      border-bottom: 0;
-    }
-
-    .qiu-tab-bar__item {
-      border: 1px solid transparent;
-      border-bottom: 0;
-      border-radius: 4px 4px 0 0;
-
-      &.is-active {
-        background: var(--qiu-tab-header-bg);
-        border-color: var(--qiu-tab-border);
-
-        &::after {
-          display: none;
-        }
-      }
-    }
-
-    .qiu-tab-bar__content {
-      padding: 0 4px 4px;
-      background: var(--qiu-tab-header-bg);
-      border: 1px solid var(--qiu-tab-border);
-      border-top: 0;
-      border-radius: 0 0 4px 4px;
-    }
-  }
-
-  &--border-card {
-    border: 1px solid var(--qiu-tab-border);
-    border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
-    box-shadow: var(--qiu-box-shadow-lighter, var(--qiu-box-shadow-lighter, 0 0 6px rgb(0 0 0 / 4%)));
-
-    .qiu-tab-bar__header {
-      padding: 0 4px;
-      background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-      border-bottom: 1px solid var(--qiu-tab-border);
-    }
-
-    .qiu-tab-bar__item {
-      margin-top: -1px;
-
-      &.is-active {
-        background: var(--qiu-tab-header-bg);
-        border: 1px solid var(--qiu-tab-border);
-        border-bottom-color: var(--qiu-tab-header-bg);
-        border-radius: 4px 4px 0 0;
-
-        &::after {
-          display: none;
-        }
-      }
-    }
-
-    .qiu-tab-bar__content {
-      padding: 0 16px 16px;
-    }
-  }
-}
-</style>

package/components/QiuTabBar/types.ts

@@ -1,19 +0,0 @@
-import type { InjectionKey, Ref, VNode } from 'vue'
-
-export interface QiuTabPaneRegistration {
-  uid: number
-  name: string | number
-  label: string
-  lazy?: boolean
-  loaded?: boolean
-  render: () => VNode[]
-}
-
-export interface QiuTabBarContext {
-  activeName: Ref<string | number | undefined>
-  registerPane: (pane: QiuTabPaneRegistration) => void
-  unregisterPane: (uid: number) => void
-  updatePane: (uid: number, partial: Partial<QiuTabPaneRegistration>) => void
-}
-
-export const QIU_TAB_BAR_KEY: InjectionKey<QiuTabBarContext> = Symbol('QiuTabBar')