foucui 1.0.1 → 2.0.0

package/components/QiuDescriptions/context.ts

@@ -1,20 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-export interface QiuDescriptionsItemRegistration {
-  uid: number
-  label: string
-  span: number
-  render: () => any
-}
-
-export interface QiuDescriptionsContext {
-  column: Ref<number>
-  border: Ref<boolean>
-  direction: Ref<'horizontal' | 'vertical'>
-  size: Ref<'large' | 'default' | 'small'>
-  registerItem: (item: QiuDescriptionsItemRegistration) => void
-  unregisterItem: (uid: number) => void
-}
-
-export const QIU_DESCRIPTIONS_KEY: InjectionKey<QiuDescriptionsContext> =
-  Symbol('QiuDescriptions')

package/components/QiuDescriptions/index.vue

@@ -1,115 +0,0 @@
-<template>
-  <div
-    class="qiu-descriptions"
-    :class="[
-      `qiu-descriptions--${size}`,
-      `qiu-descriptions--${direction}`,
-      { 'is-bordered': border },
-    ]"
-    :style="gridStyle"
-  >
-    <div v-if="title || $slots.title" class="qiu-descriptions__header">
-      <slot name="title">{{ title }}</slot>
-    </div>
-    <div class="qiu-descriptions__body">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { QiuDescriptionsContext, QiuDescriptionsItemRegistration } from './context'
-import { QIU_DESCRIPTIONS_KEY } from './context'
-
-defineOptions({ name: 'QiuDescriptions' })
-
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    column?: number
-    border?: boolean
-    direction?: 'horizontal' | 'vertical'
-    size?: 'large' | 'default' | 'small'
-  }>(),
-  {
-    title: '',
-    column: 3,
-    border: false,
-    direction: 'horizontal',
-    size: 'default',
-  }
-)
-
-const items = ref<QiuDescriptionsItemRegistration[]>([])
-
-const registerItem = (item: QiuDescriptionsItemRegistration) => {
-  const idx = items.value.findIndex((i) => i.uid === item.uid)
-  if (idx >= 0) items.value[idx] = item
-  else items.value.push(item)
-}
-
-const unregisterItem = (uid: number) => {
-  items.value = items.value.filter((i) => i.uid !== uid)
-}
-
-provide<QiuDescriptionsContext>(QIU_DESCRIPTIONS_KEY, {
-  column: toRef(props, 'column'),
-  border: toRef(props, 'border'),
-  direction: toRef(props, 'direction'),
-  size: toRef(props, 'size'),
-  registerItem,
-  unregisterItem,
-})
-
-const gridStyle = computed(() => ({
-  '--qiu-descriptions-columns': String(Math.max(1, props.column)),
-}))
-</script>
-
-<style lang="scss" scoped>
-.qiu-descriptions {
-  --qiu-desc-label-bg: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-  --qiu-desc-border: var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
-
-  &__header {
-    margin-bottom: 12px;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-  }
-
-  &__body {
-    display: grid;
-    grid-template-columns: repeat(var(--qiu-descriptions-columns), 1fr);
-    width: 100%;
-    overflow: hidden;
-    border-radius: var(--qiu-border-radius, var(--qiu-border-radius-base, 4px));
-  }
-
-  &.is-bordered &__body {
-    border: 1px solid var(--qiu-desc-border);
-  }
-
-  &--small {
-    font-size: 12px;
-  }
-
-  &--large {
-    font-size: 16px;
-  }
-
-  &--vertical {
-    :deep(.qiu-descriptions-item) {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    :deep(.qiu-descriptions-item__label) {
-      justify-content: flex-start;
-      padding-bottom: 4px;
-      background: transparent;
-      border-right: 0;
-    }
-  }
-}
-</style>

package/components/QiuDescriptionsItem/index.vue

@@ -1,103 +0,0 @@
-<template>
-  <div
-    class="qiu-descriptions-item"
-    :class="{ 'is-bordered': bordered }"
-    :style="itemStyle"
-  >
-    <div class="qiu-descriptions-item__label">
-      <slot name="label">{{ label }}</slot>
-    </div>
-    <div class="qiu-descriptions-item__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { QiuDescriptionsContext } from '../QiuDescriptions/context'
-import { QIU_DESCRIPTIONS_KEY } from '../QiuDescriptions/context'
-
-defineOptions({ name: 'QiuDescriptionsItem' })
-
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    span?: number
-  }>(),
-  {
-    label: '',
-    span: 1,
-  }
-)
-
-const slots = useSlots()
-const ctx = inject<QiuDescriptionsContext>(QIU_DESCRIPTIONS_KEY, null)
-const uid = getCurrentInstance()?.uid ?? Math.random()
-
-const bordered = computed(() => ctx?.border.value ?? false)
-
-const itemStyle = computed(() => ({
-  gridColumn: `span ${Math.max(1, props.span)}`,
-}))
-
-onMounted(() => {
-  ctx?.registerItem({
-    uid,
-    label: props.label,
-    span: props.span,
-    render: () => slots.default?.(),
-  })
-})
-
-onUnmounted(() => {
-  ctx?.unregisterItem(uid)
-})
-
-watch(
-  () => [props.label, props.span] as const,
-  () => {
-    ctx?.registerItem({
-      uid,
-      label: props.label,
-      span: props.span,
-      render: () => slots.default?.(),
-    })
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-descriptions-item {
-  display: flex;
-  min-width: 0;
-  font-size: inherit;
-  line-height: 1.6;
-
-  &.is-bordered {
-    border-right: 1px solid var(--qiu-desc-border, var(--qiu-border-color-light, #e4e7ed));
-    border-bottom: 1px solid var(--qiu-desc-border, var(--qiu-border-color-light, #e4e7ed));
-  }
-
-  &__label {
-    flex-shrink: 0;
-    min-width: 100px;
-    padding: 10px 12px;
-    font-weight: 500;
-    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-    background: var(--qiu-desc-label-bg, var(--qiu-fill-color-light, #f5f7fa));
-    border-right: 1px solid transparent;
-  }
-
-  &.is-bordered &__label {
-    border-right-color: var(--qiu-desc-border, var(--qiu-border-color-light, #e4e7ed));
-  }
-
-  &__content {
-    flex: 1;
-    min-width: 0;
-    padding: 10px 12px;
-    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-    word-break: break-word;
-  }
-}
-</style>