@hina-ui/vue 1.0.0

package/src/components/multi-select/MultiSelect.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { SelectRoot, SelectTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Chip from '../chip/Chip.vue'
+  import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
+  import { X } from '@lucide/vue'
+  import InputAction from '../input/InputAction.vue'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import {
+    inputActionSlot,
+    inputAdornment,
+    inputEmbedded,
+    inputHost,
+    type InputVariants,
+  } from '../input/input.variants'
+  import SelectList from '../select/SelectList.vue'
+  import { flattenOptions, type SelectItems, type SelectOption } from '../select/types'
+  import { multiSelectChips, multiSelectTrigger } from './multi-select.variants'
+
+  defineOptions({ name: 'HnMultiSelect', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      options: SelectItems
+      placeholder?: string
+      name?: string
+      required?: boolean
+      autocomplete?: string
+      maxVisible?: number
+      clearable?: boolean
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { maxVisible: 2, clearable: false },
+  )
+  const emit = defineEmits<{ clear: [] }>()
+
+  const model = defineModel<Array<string | number>>({ default: () => [] })
+  const open = defineModel<boolean>('open', { default: false })
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+
+  const t = useUiLocale()
+  const group = injectInputGroup()
+  const keyboard = ref(false)
+
+  const size = computed(() => (group ? group.size.value : props.size))
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+  const selected = computed(() =>
+    flattenOptions(props.options).filter(option => model.value.includes(option.value)),
+  )
+  const formOptions = computed(() => flattenOptions(props.options))
+  const visible = computed(() => selected.value.slice(0, props.maxVisible))
+  const overflow = computed(() => selected.value.length - visible.value.length)
+  const chipSize = computed(() => (size.value === 'sm' ? 'sm' : 'md'))
+  const clearing = computed(() => props.clearable && selected.value.length > 0 && !disabled.value)
+
+  function remove(value: string | number) {
+    if (disabled.value) return
+    model.value = model.value.filter(item => item !== value)
+  }
+
+  function clear() {
+    if (!model.value.length) return
+    model.value = []
+    emit('clear')
+  }
+
+  function isolate(event: Event) {
+    if ((event.target as HTMLElement).closest('button')) event.stopPropagation()
+  }
+</script>
+
+<template>
+  <SelectRoot
+    v-model="model"
+    v-model:open="open"
+    :disabled="disabled"
+    :required="props.required"
+    multiple
+  >
+    <SelectTrigger
+      v-bind="$attrs"
+      as="div"
+      :id="fieldId"
+      :aria-describedby="describedBy"
+      data-hn-multi-select
+      @keydown="keyboard = true"
+      @pointerdown="keyboard = false"
+      :tabindex="disabled ? -1 : 0"
+      :aria-disabled="disabled || undefined"
+      :data-invalid="invalid ? '' : undefined"
+      :aria-invalid="invalid || undefined"
+      :class="
+        cn(
+          group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+          multiSelectTrigger(),
+          props.class,
+        )
+      "
+    >
+      <span :class="multiSelectChips()">
+        <template v-if="selected.length">
+          <Chip
+            v-for="option in visible"
+            :key="option.value"
+            :size="chipSize"
+            removable
+            :disabled="disabled"
+            class="max-w-40 min-w-0 shrink data-disabled:opacity-100"
+            @pointerdown="isolate"
+            @click="isolate"
+            @remove="remove(option.value)"
+          >
+            <span class="min-w-0 truncate">{{ option.label }}</span>
+          </Chip>
+          <Chip
+            v-if="overflow > 0"
+            :size="chipSize"
+            :disabled="disabled"
+            class="shrink-0 data-disabled:opacity-100"
+          >
+            +{{ overflow }}
+          </Chip>
+        </template>
+        <span v-else class="min-w-0 truncate">{{ props.placeholder ?? t.select.placeholder }}</span>
+      </span>
+      <Transition
+        enter-active-class="hn-transition-base"
+        enter-from-class="scale-90 opacity-0"
+        leave-active-class="hn-transition"
+        leave-to-class="scale-90 opacity-0"
+      >
+        <span v-if="clearing" data-hn-multi-select-clear :class="inputActionSlot()">
+          <InputAction :label="t.common.clear" @pointerdown.stop @click.stop="clear">
+            <X />
+          </InputAction>
+        </span>
+      </Transition>
+      <span :class="inputAdornment()">
+        <DisclosureIcon />
+      </span>
+    </SelectTrigger>
+    <!-- Reka 2.10 BubbleSelect assigns arrays to select.value, which loses multiple values. -->
+    <VisuallyHidden v-if="props.name" as-child>
+      <select
+        v-model="model"
+        multiple
+        :name="props.name"
+        :required="props.required"
+        :autocomplete="props.autocomplete"
+        :disabled="disabled"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        <option
+          v-for="option in formOptions"
+          :key="option.value"
+          :value="option.value"
+          :disabled="option.disabled"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </VisuallyHidden>
+    <SelectList :options="props.options" :keyboard="keyboard">
+      <template #option="slotProps">
+        <slot name="option" v-bind="slotProps" />
+      </template>
+    </SelectList>
+  </SelectRoot>
+</template>

package/src/components/multi-select/multi-select.variants.ts

@@ -0,0 +1,13 @@
+import { tv } from '../../lib/tv'
+
+export const multiSelectTrigger = tv({
+  base: [
+    'group/hn-disclosure cursor-pointer items-center ps-[var(--hn-input-px)] pe-0 text-start',
+    'data-placeholder:text-faint data-placeholder:font-normal',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  ],
+})
+
+export const multiSelectChips = tv({
+  base: 'flex min-w-0 flex-1 items-center gap-1 overflow-hidden',
+})

package/src/components/nav-link/NavLink.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { Passthrough } from '../../lib/passthrough'
+  import Tooltip from '../tooltip/Tooltip.vue'
+  import { useSidebar } from '../sidebar/context'
+  import { navLink, navLinkLabel } from './nav-link.variants'
+
+  defineOptions({ name: 'HnNavLink', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        active?: boolean
+        disabled?: boolean
+        label?: string
+        class?: string
+      }
+    >(),
+    { as: 'a', active: false, disabled: false },
+  )
+
+  const sidebar = useSidebar()
+  const rail = computed(() => sidebar?.state.value === 'rail')
+
+  const Wrapper = sidebar ? Tooltip : Passthrough
+</script>
+
+<template>
+  <Wrapper :disabled="!rail || !props.label" :content="props.label" side="right">
+    <Primitive
+      v-bind="$attrs"
+      :as="props.as"
+      :as-child="props.asChild"
+      :aria-current="props.active ? 'page' : undefined"
+      :data-state="props.active ? 'selected' : undefined"
+      :aria-disabled="props.disabled ? 'true' : undefined"
+      :data-disabled="props.disabled ? '' : undefined"
+      :tabindex="props.disabled ? -1 : undefined"
+      :aria-label="rail ? props.label : undefined"
+      :class="cn(navLink({ active: props.active }), props.class)"
+    >
+      <slot name="icon" />
+      <span :aria-hidden="rail ? 'true' : undefined" data-hn-label :class="navLinkLabel({ rail })">
+        <slot />
+      </span>
+    </Primitive>
+  </Wrapper>
+</template>

package/src/components/nav-link/nav-link.variants.ts

@@ -0,0 +1,30 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const navLink = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex cursor-pointer items-center',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+    'h-9 gap-[var(--hn-control-gap)] rounded-md ps-2.5 pe-2 text-sm select-none',
+    '[&_svg]:size-4 [&_svg]:shrink-0',
+  ],
+  variants: {
+    active: {
+      true: 'text-fg font-medium',
+      false: 'text-muted',
+    },
+  },
+  defaultVariants: { active: false },
+})
+
+export const navLinkLabel = tv({
+  base: 'shrink-0 whitespace-nowrap',
+  variants: {
+    rail: {
+      true: 'opacity-0 [transition:opacity_calc(var(--hn-duration-fast)/2)_var(--hn-ease-exit)]',
+      false: 'opacity-100 [transition:opacity_var(--hn-duration-fast)_var(--hn-ease-enter)]',
+    },
+  },
+  defaultVariants: { rail: false },
+})
+
+export type NavLinkVariants = VariantProps<typeof navLink>

package/src/components/number-format/NumberFormat.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { devWarn } from '../../lib/dev'
+  import { useUiLocale } from '../../locale'
+
+  defineOptions({ name: 'HnNumberFormat' })
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number | null
+      format?: 'decimal' | 'compact' | 'percent' | 'currency'
+      currency?: string
+      precision?: number
+      class?: string
+    }>(),
+    { format: 'decimal' },
+  )
+
+  const t = useUiLocale()
+
+  const valid = computed(() => typeof props.value === 'number' && Number.isFinite(props.value))
+
+  const text = computed(() => {
+    if (!valid.value) return '—'
+    const options: Intl.NumberFormatOptions = {}
+    if (props.format === 'compact') options.notation = 'compact'
+    if (props.format === 'percent') options.style = 'percent'
+    if (props.format === 'currency') {
+      if (props.currency) {
+        options.style = 'currency'
+        options.currency = props.currency
+      } else {
+        devWarn('NumberFormat', 'currency 档需要 currency 代码,已退回 decimal')
+      }
+    }
+    if (props.precision != null) options.maximumFractionDigits = props.precision
+    return new Intl.NumberFormat(t.value.tag, options).format(props.value as number)
+  })
+
+  const full = computed(() =>
+    valid.value && props.format === 'compact'
+      ? new Intl.NumberFormat(t.value.tag).format(props.value as number)
+      : undefined,
+  )
+</script>
+
+<template>
+  <span :title="full" :class="cn(props.class)">{{ text }}</span>
+</template>

package/src/components/number-input/NumberInput.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { ChevronDown, ChevronUp } from '@lucide/vue'
+  import {
+    NumberFieldDecrement,
+    NumberFieldIncrement,
+    NumberFieldInput,
+    NumberFieldRoot,
+    useForwardPropsEmits,
+    type NumberFieldRootEmits,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import {
+    inputControl,
+    inputEmbedded,
+    inputHost,
+    type InputVariants,
+  } from '../input/input.variants'
+  import { numberInputStep, numberInputStepper } from './number-input.variants'
+
+  defineOptions({ name: 'HnNumberInput', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      modelValue?: number | null
+      defaultValue?: number
+      min?: number
+      max?: number
+      step?: number
+      stepSnapping?: boolean
+      formatOptions?: Intl.NumberFormatOptions
+      locale?: string
+      controls?: boolean
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      readonly?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { step: 1, stepSnapping: true, controls: true },
+  )
+  const emits = defineEmits<NumberFieldRootEmits>()
+
+  const t = useUiLocale()
+  const group = injectInputGroup()
+  const size = computed(() => (group ? group.size.value : props.size))
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+
+  const forwarded = useForwardPropsEmits(
+    () => ({
+      modelValue: props.modelValue,
+      defaultValue: props.defaultValue,
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      stepSnapping: props.stepSnapping,
+      formatOptions: props.formatOptions,
+      readonly: props.readonly,
+    }),
+    emits,
+  )
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="forwarded"
+    :locale="props.locale ?? t.tag"
+    :disabled="disabled"
+    data-hn-number-input
+    :data-invalid="invalid ? '' : undefined"
+    :class="
+      cn(
+        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        props.class,
+      )
+    "
+  >
+    <NumberFieldInput
+      v-bind="$attrs"
+      :id="fieldId"
+      :aria-invalid="invalid || undefined"
+      :aria-describedby="describedBy"
+      :class="cn(inputControl(), 'tabular-nums')"
+    />
+    <div v-if="props.controls" :class="numberInputStepper({ size })">
+      <NumberFieldIncrement :aria-label="t.numberInput.increase" :class="numberInputStep()">
+        <ChevronUp />
+      </NumberFieldIncrement>
+      <NumberFieldDecrement
+        :aria-label="t.numberInput.decrease"
+        :class="numberInputStep({ divided: true })"
+      >
+        <ChevronDown />
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
+</template>

package/src/components/number-input/number-input.variants.ts

@@ -0,0 +1,28 @@
+import { tv } from '../../lib/tv'
+
+export const numberInputStepper = tv({
+  base: 'border-line flex shrink-0 flex-col border-s',
+  variants: {
+    size: {
+      sm: '[&_svg]:size-3',
+      md: '[&_svg]:size-3',
+      lg: '[&_svg]:size-3.5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const numberInputStep = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none text-muted',
+    'flex min-h-0 flex-1 basis-0 items-center justify-center px-1.5 outline-none',
+    'disabled:pointer-events-none disabled:opacity-40',
+  ],
+  variants: {
+    divided: {
+      true: 'border-line border-t',
+    },
+  },
+})

package/src/components/page/Page.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import Container from '../container/Container.vue'
+  import type { ContainerVariants } from '../container/container.variants'
+
+  defineOptions({ name: 'HnPage' })
+
+  const props = defineProps<{
+    size?: ContainerVariants['size']
+    class?: string
+  }>()
+</script>
+
+<template>
+  <Container :size="props.size" :class="cn('py-8', props.class)">
+    <div class="flex gap-10">
+      <div class="flex min-w-0 flex-1 flex-col gap-8">
+        <slot />
+      </div>
+      <slot name="aside" />
+    </div>
+  </Container>
+</template>

package/src/components/page/PageAside.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { useId } from 'vue'
+  import { cn } from '../../lib/cn'
+  import Text from '../text/Text.vue'
+
+  defineOptions({ name: 'HnPageAside' })
+
+  const props = defineProps<{
+    label?: string
+    class?: string
+  }>()
+
+  const titleId = useId()
+</script>
+
+<template>
+  <aside
+    :aria-labelledby="props.label ? titleId : undefined"
+    :class="cn('hidden w-56 shrink-0 xl:block', props.class)"
+  >
+    <div class="sticky top-8 flex flex-col gap-3">
+      <Text v-if="props.label" :id="titleId" as="h2" size="sm" tone="muted" weight="medium">
+        {{ props.label }}
+      </Text>
+      <slot />
+    </div>
+  </aside>
+</template>

package/src/components/page/PageBody.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnPageBody' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('flex min-w-0 flex-col gap-6', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/page/PageHeader.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import Heading from '../heading/Heading.vue'
+  import Text from '../text/Text.vue'
+
+  defineOptions({ name: 'HnPageHeader' })
+
+  const props = defineProps<{
+    eyebrow?: string
+    title?: string
+    description?: string
+    class?: string
+  }>()
+</script>
+
+<template>
+  <header :class="cn('flex flex-col gap-2', props.class)">
+    <div class="flex flex-col items-start gap-3 md:flex-row">
+      <div class="flex min-w-0 flex-1 flex-col gap-2">
+        <Text v-if="props.eyebrow" as="span" size="sm" weight="medium" tone="accent">
+          {{ props.eyebrow }}
+        </Text>
+        <Heading v-if="props.title" :level="1">{{ props.title }}</Heading>
+        <Text v-if="props.description" tone="muted">{{ props.description }}</Text>
+      </div>
+      <div
+        v-if="$slots.actions"
+        class="flex w-full flex-wrap items-center gap-2 md:w-auto md:shrink-0"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+    <slot />
+  </header>
+</template>

package/src/components/panel/Panel.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+  import { useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import Card from '../card/Card.vue'
+  import Heading from '../heading/Heading.vue'
+  import Text from '../text/Text.vue'
+  import { panelActions, panelBody, panelHeader, panelIcon, panelTitle } from './panel.variants'
+
+  defineOptions({ name: 'HnPanel' })
+
+  const props = withDefaults(
+    defineProps<{
+      title: string
+      description?: string
+      count?: number
+      level?: 2 | 3 | 4
+      padded?: boolean
+      class?: string
+    }>(),
+    { level: 2, padded: true },
+  )
+
+  const slots = useSlots()
+</script>
+
+<template>
+  <Card data-hn-panel :padded="false" :class="cn('flex flex-col', props.class)">
+    <div :class="panelHeader()">
+      <div class="flex min-w-0 flex-col gap-1">
+        <div :class="panelTitle()">
+          <span v-if="slots.icon" :class="panelIcon()" aria-hidden="true">
+            <slot name="icon" />
+          </span>
+          <Heading :level="props.level" size="base" class="min-w-0">
+            <slot name="title">{{ props.title }}</slot>
+          </Heading>
+          <Text
+            v-if="props.count !== undefined"
+            as="span"
+            tone="muted"
+            size="sm"
+            class="tabular-nums"
+          >
+            {{ props.count }}
+          </Text>
+        </div>
+        <Text v-if="props.description || slots.description" tone="muted" size="sm">
+          <slot name="description">{{ props.description }}</slot>
+        </Text>
+      </div>
+      <div v-if="slots.actions" :class="panelActions()">
+        <slot name="actions" />
+      </div>
+    </div>
+    <div v-if="slots.default" :class="panelBody({ padded: props.padded })">
+      <slot />
+    </div>
+  </Card>
+</template>

package/src/components/panel/panel.variants.ts

@@ -0,0 +1,29 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const panelHeader = tv({
+  base: 'flex items-start justify-between gap-4 px-(--hn-panel-p) pt-(--hn-panel-p)',
+})
+
+export const panelTitle = tv({
+  base: 'flex min-w-0 items-center gap-2',
+})
+
+export const panelIcon = tv({
+  base: 'text-muted flex shrink-0 [&_svg]:size-4.5',
+})
+
+export const panelActions = tv({
+  base: 'flex shrink-0 items-center gap-2',
+})
+
+export const panelBody = tv({
+  base: 'pt-4',
+  variants: {
+    padded: {
+      true: 'px-(--hn-panel-p) pb-(--hn-panel-p)',
+    },
+  },
+  defaultVariants: { padded: true },
+})
+
+export type PanelVariants = VariantProps<typeof panelBody>