foucui 1.0.1

package/components/QiuStep/index.vue

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

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

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

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

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

@@ -0,0 +1,19 @@
+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')