foucui 1.0.1 → 2.0.0

package/components/QiuCascader/index.vue

@@ -1,879 +0,0 @@
-<template>
-  <div
-    ref="rootRef"
-    class="qiu-cascader"
-    :class="[
-      `qiu-cascader--${resolvedSize}`,
-      {
-        'is-disabled': disabled,
-        'is-focused': visible,
-        'is-multiple': isMultiple,
-      },
-    ]"
-  >
-    <div
-      class="qiu-cascader__wrapper"
-      tabindex="0"
-      @click="toggleDropdown"
-      @keydown.enter.prevent="toggleDropdown"
-      @keydown.space.prevent="toggleDropdown"
-      @keydown.esc="closeDropdown"
-      @keydown.down.prevent="openDropdown"
-    >
-      <div class="qiu-cascader__tags" v-if="isMultiple && selectedTags.length">
-        <span
-          v-for="tag in displayTags"
-          :key="String(tag.value)"
-          class="qiu-cascader__tag"
-        >
-          <span class="qiu-cascader__tag-text">{{ tag.label }}</span>
-          <button
-            type="button"
-            class="qiu-cascader__tag-close"
-            tabindex="-1"
-            @mousedown.prevent
-            @click.stop="removeTag(tag.value)"
-          >
-            ×
-          </button>
-        </span>
-        <span v-if="hiddenTagCount > 0" class="qiu-cascader__tag is-collapse">
-          +{{ hiddenTagCount }}
-        </span>
-      </div>
-      <span
-        v-else
-        class="qiu-cascader__selected"
-        :class="{ 'is-placeholder': !displayText }"
-      >
-        {{ displayText || placeholder }}
-      </span>
-      <span class="qiu-cascader__suffix">
-        <button
-          v-if="clearable && hasValue && !disabled"
-          type="button"
-          class="qiu-cascader__clear"
-          tabindex="-1"
-          @mousedown.prevent
-          @click.stop="clear"
-        >
-          ×
-        </button>
-        <span class="qiu-cascader__caret" :class="{ 'is-open': visible }">▾</span>
-      </span>
-    </div>
-
-    <Teleport to="body">
-      <Transition name="qiu-cascader-fade">
-        <div
-          v-show="visible"
-          ref="panelRef"
-          class="qiu-cascader__dropdown"
-          :style="dropdownStyle"
-          @mousedown.prevent
-        >
-          <div v-if="filterable" class="qiu-cascader__filter">
-            <input
-              v-model="filterText"
-              class="qiu-cascader__filter-input"
-              :placeholder="filterPlaceholder"
-              @click.stop
-            />
-          </div>
-
-          <div v-if="filterText.trim()" class="qiu-cascader__suggestions">
-            <div
-              v-for="item in filteredSuggestions"
-              :key="item.pathKey"
-              class="qiu-cascader__suggestion"
-              :class="{
-                'is-selected': isPathSelected(item.pathValues),
-                'is-disabled': item.disabled,
-              }"
-              @click="!item.disabled && pickSuggestion(item)"
-            >
-              {{ item.pathLabels.join(separator) }}
-            </div>
-            <div v-if="!filteredSuggestions.length" class="qiu-cascader__empty">无匹配数据</div>
-          </div>
-
-          <div v-else class="qiu-cascader__menus">
-            <ul
-              v-for="(menu, level) in menus"
-              :key="level"
-              class="qiu-cascader__menu"
-            >
-              <li
-                v-for="opt in menu"
-                :key="String(getOptValue(opt, cfg))"
-                class="qiu-cascader__node"
-                :class="{
-                  'is-active': isActiveAt(level, opt),
-                  'is-selected': isNodeSelected(opt, level),
-                  'is-disabled': isOptDisabled(opt, cfg),
-                }"
-                @click="onNodeClick(opt, level)"
-                @mouseenter="onNodeHover(opt, level)"
-              >
-                <label
-                  v-if="isMultiple || checkStrictly"
-                  class="qiu-cascader__check"
-                  @click.stop
-                >
-                  <input
-                    type="checkbox"
-                    :checked="isNodeChecked(opt)"
-                    :disabled="isOptDisabled(opt, cfg) || (!checkStrictly && hasChildren(opt))"
-                    @change="onCheckChange(opt, level)"
-                  />
-                </label>
-                <span class="qiu-cascader__label">{{ getOptLabel(opt, cfg) }}</span>
-                <span v-if="hasChildren(opt)" class="qiu-cascader__arrow">›</span>
-              </li>
-              <li v-if="!menu.length" class="qiu-cascader__empty-item">无数据</li>
-            </ul>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  getOptChildren,
-  getOptLabel,
-  getOptValue,
-  isOptDisabled,
-  type QiuCascaderOption,
-  type QiuCascaderPropsConfig,
-  type QiuCascaderValue,
-} from './types'
-
-defineOptions({ name: 'QiuCascader' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: QiuCascaderValue
-    options?: QiuCascaderOption[]
-    props?: QiuCascaderPropsConfig
-    placeholder?: string
-    clearable?: boolean
-    disabled?: boolean
-    filterable?: boolean
-    filterPlaceholder?: string
-    showAllLevels?: boolean
-    separator?: string
-    collapseTags?: boolean
-    maxCollapseTags?: number
-    size?: 'large' | 'default' | 'small'
-  }>(),
-  {
-    modelValue: null,
-    options: () => [],
-    props: () => ({}),
-    placeholder: '请选择',
-    clearable: false,
-    disabled: false,
-    filterable: false,
-    filterPlaceholder: '输入关键字搜索',
-    showAllLevels: true,
-    separator: ' / ',
-    collapseTags: false,
-    maxCollapseTags: 1,
-    size: 'default',
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [QiuCascaderValue]
-  change: [QiuCascaderValue]
-  clear: []
-  visibleChange: [boolean]
-  'expand-change': [(string | number)[]]
-}>()
-
-const rootRef = ref<HTMLElement | null>(null)
-const panelRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-const filterText = ref('')
-const activePath = ref<QiuCascaderOption[]>([])
-const dropdownStyle = ref<Record<string, string>>({})
-
-const cfg = computed<QiuCascaderPropsConfig>(() => ({
-  value: 'value',
-  label: 'label',
-  children: 'children',
-  disabled: 'disabled',
-  multiple: false,
-  checkStrictly: false,
-  emitPath: true,
-  expandTrigger: 'click',
-  ...props.props,
-}))
-
-const isMultiple = computed(() => Boolean(cfg.value.multiple))
-const checkStrictly = computed(() => Boolean(cfg.value.checkStrictly))
-const emitPath = computed(() => cfg.value.emitPath !== false)
-const expandTrigger = computed(() => cfg.value.expandTrigger || 'click')
-const resolvedSize = computed(() => props.size || 'default')
-
-const hasChildren = (opt: QiuCascaderOption) => {
-  const children = getOptChildren(opt, cfg.value)
-  return Boolean(children?.length)
-}
-
-const menus = computed(() => {
-  const result: QiuCascaderOption[][] = [props.options || []]
-  for (const node of activePath.value) {
-    const children = getOptChildren(node, cfg.value)
-    if (children?.length) result.push(children)
-    else break
-  }
-  return result
-})
-
-type FlatItem = {
-  option: QiuCascaderOption
-  path: QiuCascaderOption[]
-  pathValues: (string | number)[]
-  pathLabels: string[]
-  pathKey: string
-  disabled: boolean
-}
-
-const flattenOptions = (
-  nodes: QiuCascaderOption[],
-  parent: QiuCascaderOption[] = []
-): FlatItem[] => {
-  const out: FlatItem[] = []
-  for (const opt of nodes) {
-    const path = [...parent, opt]
-    const pathValues = path.map((n) => getOptValue(n, cfg.value))
-    const pathLabels = path.map((n) => getOptLabel(n, cfg.value))
-    const disabled = path.some((n) => isOptDisabled(n, cfg.value))
-    const children = getOptChildren(opt, cfg.value)
-    const leafOrStrict = !children?.length || checkStrictly.value
-    if (leafOrStrict) {
-      out.push({
-        option: opt,
-        path,
-        pathValues,
-        pathLabels,
-        pathKey: pathValues.join('/'),
-        disabled,
-      })
-    }
-    if (children?.length) out.push(...flattenOptions(children, path))
-  }
-  return out
-}
-
-const flatList = computed(() => flattenOptions(props.options || []))
-
-const filteredSuggestions = computed(() => {
-  const kw = filterText.value.trim().toLowerCase()
-  if (!kw) return []
-  return flatList.value.filter((item) =>
-    item.pathLabels.some((l) => l.toLowerCase().includes(kw))
-  )
-})
-
-const normalizeSingle = (val: QiuCascaderValue): (string | number)[] => {
-  if (val == null || val === '') return []
-  if (Array.isArray(val)) {
-    if (!val.length) return []
-    if (Array.isArray(val[0])) return []
-    return val as (string | number)[]
-  }
-  return [val as string | number]
-}
-
-const normalizeMultiple = (val: QiuCascaderValue): (string | number)[][] => {
-  if (val == null || val === '') return []
-  if (!Array.isArray(val)) return [[val as string | number]]
-  if (!val.length) return []
-  if (Array.isArray(val[0])) return val as (string | number)[][]
-  // 多选且 emitPath=false：一维数组表示多个末级值
-  return (val as (string | number)[]).map((v) => [v])
-}
-
-const selectedPaths = computed<(string | number)[][]>(() => {
-  if (isMultiple.value) return normalizeMultiple(props.modelValue ?? null)
-  const single = normalizeSingle(props.modelValue ?? null)
-  return single.length ? [single] : []
-})
-
-const findPathByValues = (values: (string | number)[]): QiuCascaderOption[] | null => {
-  if (!values.length) return null
-  // emitPath=false：只存末级，在树中查找完整路径
-  if (!emitPath.value && values.length === 1) {
-    const hit = flatList.value.find((f) => getOptValue(f.option, cfg.value) === values[0])
-    return hit?.path || null
-  }
-  let nodes = props.options || []
-  const path: QiuCascaderOption[] = []
-  for (const v of values) {
-    const found = nodes.find((n) => getOptValue(n, cfg.value) === v)
-    if (!found) return null
-    path.push(found)
-    nodes = getOptChildren(found, cfg.value) || []
-  }
-  return path
-}
-
-const pathToValue = (path: QiuCascaderOption[]): string | number | (string | number)[] => {
-  const values = path.map((n) => getOptValue(n, cfg.value))
-  return emitPath.value ? values : values[values.length - 1]
-}
-
-const isPathSelected = (pathValues: (string | number)[]) => {
-  const key = pathValues.join('/')
-  const last = pathValues[pathValues.length - 1]
-  return selectedPaths.value.some((p) => {
-    if (emitPath.value) return p.join('/') === key
-    return p[p.length - 1] === last
-  })
-}
-
-const isNodeChecked = (opt: QiuCascaderOption) => {
-  const v = getOptValue(opt, cfg.value)
-  return selectedPaths.value.some((p) => {
-    if (emitPath.value) return p[p.length - 1] === v
-    return p.includes(v) || p[p.length - 1] === v
-  })
-}
-
-const isActiveAt = (level: number, opt: QiuCascaderOption) => {
-  const cur = activePath.value[level]
-  return cur ? getOptValue(cur, cfg.value) === getOptValue(opt, cfg.value) : false
-}
-
-const isNodeSelected = (opt: QiuCascaderOption, level: number) => {
-  const v = getOptValue(opt, cfg.value)
-  return selectedPaths.value.some((p) => p[level] === v || (!emitPath.value && p[p.length - 1] === v))
-}
-
-const selectedTags = computed(() =>
-  selectedPaths.value
-    .map((values) => {
-      const path = findPathByValues(values)
-      if (!path?.length) {
-        return {
-          value: values[values.length - 1],
-          label: String(values[values.length - 1] ?? ''),
-          pathValues: values,
-        }
-      }
-      const labels = path.map((n) => getOptLabel(n, cfg.value))
-      return {
-        value: getOptValue(path[path.length - 1], cfg.value),
-        label: props.showAllLevels ? labels.join(props.separator) : labels[labels.length - 1],
-        pathValues: values,
-      }
-    })
-    .filter(Boolean)
-)
-
-const displayTags = computed(() => {
-  if (!props.collapseTags) return selectedTags.value
-  return selectedTags.value.slice(0, props.maxCollapseTags)
-})
-
-const hiddenTagCount = computed(() => {
-  if (!props.collapseTags) return 0
-  return Math.max(0, selectedTags.value.length - props.maxCollapseTags)
-})
-
-const displayText = computed(() => {
-  if (isMultiple.value) return ''
-  const paths = selectedPaths.value
-  if (!paths.length) return ''
-  const path = findPathByValues(paths[0])
-  if (!path?.length) return String(paths[0][paths[0].length - 1] ?? '')
-  const labels = path.map((n) => getOptLabel(n, cfg.value))
-  return props.showAllLevels ? labels.join(props.separator) : labels[labels.length - 1]
-})
-
-const hasValue = computed(() => selectedPaths.value.length > 0)
-
-const syncActiveFromModel = () => {
-  const paths = selectedPaths.value
-  if (!paths.length) {
-    activePath.value = []
-    return
-  }
-  const path = findPathByValues(paths[0])
-  if (path?.length) {
-    // 展开到选中路径的父级
-    activePath.value = path.slice(0, -1)
-  }
-}
-
-const updateDropdownPosition = () => {
-  const el = rootRef.value
-  if (!el) return
-  const rect = el.getBoundingClientRect()
-  const spaceBelow = window.innerHeight - rect.bottom
-  const preferUp = spaceBelow < 240 && rect.top > spaceBelow
-  dropdownStyle.value = {
-    position: 'fixed',
-    left: `${rect.left}px`,
-    top: preferUp ? 'auto' : `${rect.bottom + 4}px`,
-    bottom: preferUp ? `${window.innerHeight - rect.top + 4}px` : 'auto',
-    minWidth: `${Math.max(rect.width, 180)}px`,
-    zIndex: '4000',
-  }
-}
-
-const openDropdown = () => {
-  if (props.disabled) return
-  syncActiveFromModel()
-  filterText.value = ''
-  updateDropdownPosition()
-  visible.value = true
-  emit('visibleChange', true)
-}
-
-const closeDropdown = () => {
-  if (!visible.value) return
-  visible.value = false
-  filterText.value = ''
-  emit('visibleChange', false)
-}
-
-const toggleDropdown = () => {
-  if (props.disabled) return
-  visible.value ? closeDropdown() : openDropdown()
-}
-
-const emitValue = (next: QiuCascaderValue) => {
-  emit('update:modelValue', next)
-  emit('change', next)
-}
-
-const expandTo = (opt: QiuCascaderOption, level: number) => {
-  const next = activePath.value.slice(0, level)
-  next[level] = opt
-  // 截断到当前层（展开子级由 menus 计算）
-  activePath.value = next.slice(0, level + 1)
-  emit('expand-change', activePath.value.map((n) => getOptValue(n, cfg.value)))
-}
-
-const selectPath = (path: QiuCascaderOption[]) => {
-  if (!path.length) return
-  if (isMultiple.value) {
-    const values = path.map((n) => getOptValue(n, cfg.value))
-    const key = values.join('/')
-    const last = values[values.length - 1]
-    const exists = selectedPaths.value.some((p) =>
-      emitPath.value ? p.join('/') === key : p[p.length - 1] === last
-    )
-    let nextPaths = [...selectedPaths.value]
-    if (exists) {
-      nextPaths = nextPaths.filter((p) =>
-        emitPath.value ? p.join('/') !== key : p[p.length - 1] !== last
-      )
-    } else {
-      nextPaths.push(emitPath.value ? values : [last])
-    }
-    const payload: QiuCascaderValue = emitPath.value
-      ? nextPaths
-      : nextPaths.map((p) => p[p.length - 1])
-    emitValue(payload)
-  } else {
-    emitValue(pathToValue(path) as QiuCascaderValue)
-    closeDropdown()
-  }
-}
-
-const onNodeClick = (opt: QiuCascaderOption, level: number) => {
-  if (isOptDisabled(opt, cfg.value)) return
-  const children = getOptChildren(opt, cfg.value)
-  if (children?.length) {
-    expandTo(opt, level)
-    // checkStrictly 单选：点击任意级即可选中；多选仍走 checkbox
-    if (checkStrictly.value && !isMultiple.value) {
-      selectPath([...activePath.value.slice(0, level), opt])
-    }
-    return
-  }
-  // 叶子节点
-  const path = [...activePath.value.slice(0, level), opt]
-  selectPath(path)
-}
-
-const onNodeHover = (opt: QiuCascaderOption, level: number) => {
-  if (expandTrigger.value !== 'hover') return
-  if (isOptDisabled(opt, cfg.value)) return
-  if (hasChildren(opt)) expandTo(opt, level)
-}
-
-const onCheckChange = (opt: QiuCascaderOption, level: number) => {
-  if (isOptDisabled(opt, cfg.value)) return
-  const path = [...activePath.value.slice(0, level), opt]
-  if (!checkStrictly.value && hasChildren(opt)) return
-  selectPath(path)
-  if (!isMultiple.value) closeDropdown()
-}
-
-const pickSuggestion = (item: FlatItem) => {
-  selectPath(item.path)
-}
-
-const removeTag = (value: string | number) => {
-  const nextPaths = selectedPaths.value.filter((p) => p[p.length - 1] !== value)
-  const payload: QiuCascaderValue = emitPath.value
-    ? nextPaths
-    : nextPaths.map((p) => p[p.length - 1])
-  emitValue(nextPaths.length ? payload : null)
-}
-
-const clear = () => {
-  emitValue(null)
-  emit('clear')
-  activePath.value = []
-}
-
-const onDocClick = (e: MouseEvent) => {
-  const t = e.target as Node
-  if (rootRef.value?.contains(t)) return
-  if (panelRef.value?.contains(t)) return
-  closeDropdown()
-}
-
-const onWinScroll = () => {
-  if (visible.value) updateDropdownPosition()
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', onDocClick)
-  window.addEventListener('resize', onWinScroll)
-  window.addEventListener('scroll', onWinScroll, true)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('mousedown', onDocClick)
-  window.removeEventListener('resize', onWinScroll)
-  window.removeEventListener('scroll', onWinScroll, true)
-})
-
-watch(
-  () => props.modelValue,
-  () => {
-    if (!visible.value) syncActiveFromModel()
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-cascader {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  vertical-align: middle;
-  font-size: 14px;
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-
-    .qiu-cascader__wrapper {
-      pointer-events: none;
-      background: var(--qiu-disabled-bg-color, #f5f7fa);
-    }
-  }
-
-  &--small {
-    font-size: 12px;
-
-    .qiu-cascader__wrapper {
-      min-height: 24px;
-      padding: 0 8px;
-    }
-  }
-
-  &--large .qiu-cascader__wrapper {
-    min-height: 40px;
-    padding: 0 15px;
-  }
-
-  &__wrapper {
-    display: flex;
-    gap: 6px;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 32px;
-    padding: 1px 11px;
-    cursor: pointer;
-    background: var(--qiu-fill-color-blank, #fff);
-    border: 1px solid var(--qiu-border-color, #dcdfe6);
-    border-radius: var(--qiu-border-radius-base, 4px);
-    transition: border-color 0.2s;
-
-    &:hover {
-      border-color: var(--qiu-border-color-hover, #c0c4cc);
-    }
-  }
-
-  &.is-focused .qiu-cascader__wrapper {
-    border-color: var(--qiu-color-primary);
-    outline: none;
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary) 20%, transparent);
-  }
-
-  &__selected {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--qiu-text-color-primary, #303133);
-
-    &.is-placeholder {
-      color: var(--qiu-text-color-placeholder, #a8abb2);
-    }
-  }
-
-  &__tags {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    gap: 4px;
-    align-items: center;
-    min-width: 0;
-    padding: 2px 0;
-  }
-
-  &__tag {
-    display: inline-flex;
-    gap: 2px;
-    align-items: center;
-    max-width: 100%;
-    padding: 0 6px;
-    font-size: 12px;
-    line-height: 20px;
-    color: var(--qiu-text-color-regular);
-    background: var(--qiu-fill-color, #f0f2f5);
-    border-radius: 4px;
-
-    &.is-collapse {
-      color: var(--qiu-color-primary);
-      background: var(--qiu-color-primary-light-9);
-    }
-  }
-
-  &__tag-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__tag-close {
-    padding: 0;
-    font-size: 14px;
-    line-height: 1;
-    color: var(--qiu-text-color-secondary);
-    cursor: pointer;
-    background: none;
-    border: 0;
-
-    &:hover {
-      color: var(--qiu-color-primary);
-    }
-  }
-
-  &__suffix {
-    display: inline-flex;
-    flex-shrink: 0;
-    gap: 4px;
-    align-items: center;
-    color: var(--qiu-text-color-placeholder);
-  }
-
-  &__clear {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    font-size: 14px;
-    line-height: 1;
-    color: var(--qiu-text-color-placeholder);
-    cursor: pointer;
-    background: var(--qiu-fill-color);
-    border: 0;
-    border-radius: 50%;
-
-    &:hover {
-      color: var(--qiu-text-color-secondary);
-    }
-  }
-
-  &__caret {
-    display: inline-block;
-    transition: transform 0.2s;
-
-    &.is-open {
-      transform: rotate(180deg);
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.qiu-cascader__dropdown {
-  box-sizing: border-box;
-  overflow: hidden;
-  background: var(--qiu-bg-color-overlay, #fff);
-  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
-  border-radius: var(--qiu-border-radius-base, 4px);
-  box-shadow: var(--qiu-box-shadow-light, 0 2px 12px 0 rgb(0 0 0 / 10%));
-}
-
-.qiu-cascader__filter {
-  padding: 8px;
-  border-bottom: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-}
-
-.qiu-cascader__filter-input {
-  box-sizing: border-box;
-  width: 100%;
-  height: 28px;
-  padding: 0 8px;
-  font-size: 13px;
-  color: var(--qiu-text-color-primary);
-  outline: none;
-  background: var(--qiu-fill-color-blank, #fff);
-  border: 1px solid var(--qiu-border-color, #dcdfe6);
-  border-radius: 4px;
-
-  &:focus {
-    border-color: var(--qiu-color-primary);
-  }
-}
-
-.qiu-cascader__menus {
-  display: flex;
-  max-height: 280px;
-}
-
-.qiu-cascader__menu {
-  min-width: 160px;
-  max-width: 220px;
-  max-height: 280px;
-  padding: 6px 0;
-  margin: 0;
-  overflow: auto;
-  list-style: none;
-  border-right: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-
-  &:last-child {
-    border-right: 0;
-  }
-}
-
-.qiu-cascader__node {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  padding: 0 12px;
-  font-size: 14px;
-  line-height: 34px;
-  color: var(--qiu-text-color-regular, #606266);
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    background: var(--qiu-fill-color-light, #f5f7fa);
-  }
-
-  &.is-active,
-  &.is-selected {
-    color: var(--qiu-color-primary);
-    font-weight: 500;
-    background: var(--qiu-color-primary-light-9);
-  }
-
-  &.is-disabled {
-    color: var(--qiu-text-color-disabled, #c0c4cc);
-    cursor: not-allowed;
-    background: transparent;
-  }
-}
-
-.qiu-cascader__check {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  margin: 0;
-  cursor: pointer;
-
-  input {
-    margin: 0;
-    cursor: pointer;
-  }
-}
-
-.qiu-cascader__label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.qiu-cascader__arrow {
-  flex-shrink: 0;
-  color: var(--qiu-text-color-placeholder);
-  font-size: 16px;
-  line-height: 1;
-}
-
-.qiu-cascader__suggestions {
-  max-height: 280px;
-  overflow: auto;
-}
-
-.qiu-cascader__suggestion {
-  padding: 0 12px;
-  font-size: 14px;
-  line-height: 34px;
-  color: var(--qiu-text-color-regular);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--qiu-fill-color-light, #f5f7fa);
-  }
-
-  &.is-selected {
-    color: var(--qiu-color-primary);
-    font-weight: 500;
-  }
-
-  &.is-disabled {
-    color: var(--qiu-text-color-disabled);
-    cursor: not-allowed;
-  }
-}
-
-.qiu-cascader__empty,
-.qiu-cascader__empty-item {
-  padding: 12px;
-  font-size: 13px;
-  color: var(--qiu-text-color-secondary);
-  text-align: center;
-  list-style: none;
-}
-
-.qiu-cascader-fade-enter-active,
-.qiu-cascader-fade-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.qiu-cascader-fade-enter-from,
-.qiu-cascader-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-</style>