@wordup-md/nuxt-layer-shadcn-unocss 0.2.0

package/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,12 @@
+<template>
+  <AvatarImage
+    v-bind="props"
+    class="size-full object-cover"
+  />
+</template>
+
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'reka-ui'
+
+const props = defineProps<AvatarImageProps>()
+</script>

package/components/ui/avatar/index.ts

@@ -0,0 +1,24 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+
+export const avatarVariant = cva(
+  'inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary font-normal text-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'size-10 text-xs',
+        base: 'size-16 text-2xl',
+        lg: 'size-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>

package/components/ui/badge/Badge.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :class="cn(badgeVariants({ variant, type }), props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { type BadgeVariants, badgeVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  type?: BadgeVariants['type']
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/badge/index.ts

@@ -0,0 +1,71 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      type: {
+        default: 'bg-muted',
+        primary: 'bg-primary text-primary border-primary',
+        secondary: 'bg-secondary-foreground dark:bg-secondary text-secondary-foreground border-secondary-foreground',
+        info: 'bg-info text-info border-info',
+        warning: 'bg-warning text-warning border-warning',
+        success: 'bg-success text-success border-success',
+        danger: 'bg-danger text-danger border-danger',
+        new: 'bg-new text-new-foreground border-new',
+        // info: 'bg-sky-500 text-sky-500 border-sky-500',
+        // warning: 'bg-yellow-400 text-yellow-500 border-yellow-500',
+        // success: 'bg-green-500 text-green-600 border-green-600',
+        // danger: 'bg-red-500 text-red-500 border-red-500',
+        // new: 'bg-[#adfa1d] dark:text-[#adfa1d] border-[#adfa1d]',
+      },
+      variant: {
+        default:
+          'border-transparent !bg-opacity-15 !dark:bg-opacity-20', // cva breaks bg-opacity-* without !
+        fill:
+          'text-white border-transparent',
+        outline:
+          '!bg-opacity-0',
+        text:
+          '!bg-transparent border-transparent',
+        // default:
+        //   'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        // secondary:
+        //   'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        // destructive:
+        //   'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        // outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      type: 'default',
+      variant: 'default',
+    },
+    compoundVariants: [
+      {
+        type: ['default', 'new'],
+        variant: 'default',
+        class: '!bg-opacity-80 !dark:bg-opacity-80',
+      },
+      {
+        type: ['default'],
+        variant: 'fill',
+        class: 'text-inherit',
+      },
+      {
+        type: ['new'],
+        variant: 'fill',
+        class: '!text-new-foreground',
+      },
+      {
+        type: ['new'],
+        variant: ['outline', 'text'],
+        class: 'dark:text-new',
+      },
+    ],
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

package/components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,16 @@
+<template>
+  <nav
+    aria-label="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,16 @@
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,23 @@
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    as: 'a',
+    class: '',
+  },
+)
+</script>

package/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,16 @@
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,19 @@
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,23 @@
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <NuxtIcon
+        name="lucide:chevron-right"
+        class="block size-3.5 mt-0.5"
+      />
+    </slot>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/breadcrumb/index.ts

@@ -0,0 +1,6 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'

package/components/ui/button/Button.vue

@@ -0,0 +1,29 @@
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+  class: '',
+  as: 'button',
+})
+</script>

package/components/ui/button/index.ts

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/components/ui/card/Card.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'

package/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,18 @@
+<template>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="forwarded"
+  >
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
+
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,14 @@
+<template>
+  <CollapsibleContent
+    v-bind="props"
+    class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>
+
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>

package/components/ui/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,11 @@
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
+
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>

package/components/ui/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'

package/components/ui/command/Command.vue

@@ -0,0 +1,89 @@
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
+
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed, reactive, ref, watch } from 'vue'
+import { provideCommandContext } from '.'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: '',
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>

package/components/ui/command/CommandEmpty.vue

@@ -0,0 +1,30 @@
+<template>
+  <Primitive
+    v-if="isRender"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useCommand } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>

package/components/ui/command/CommandGroup.vue

@@ -0,0 +1,50 @@
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel
+      v-if="heading"
+      class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+    >
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
+
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { provideCommandGroupContext, useCommand } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>