foucui 1.0.1

package/components/QiuDescriptions/context.ts

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

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

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