@slexn/codecenter-ui 1.0.0

package/src/components/ui/select/SelectContent.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { computed, nextTick, provide, ref, shallowReactive } from "vue"
+import { Search, X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { SelectScrollDownButton, SelectScrollUpButton } from "."
+import {
+  normalizeSelectSearchText,
+  selectSearchContextKey,
+  type SelectSearchItem,
+} from "./search"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & {
+    class?: HTMLAttributes["class"]
+    emptyText?: string
+    search?: boolean
+    searchClearLabel?: string
+    searchPlaceholder?: string
+    검색?: boolean
+  }>(),
+  {
+    emptyText: "No results found.",
+    position: "popper",
+    search: false,
+    searchClearLabel: "Clear search",
+    searchPlaceholder: "Search options",
+    검색: false,
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(
+  props,
+  "class",
+  "emptyText",
+  "search",
+  "searchClearLabel",
+  "searchPlaceholder",
+  "검색",
+)
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const searchQuery = ref("")
+const searchInputRef = ref<HTMLInputElement | null>(null)
+const searchItems = shallowReactive(new Map<symbol, SelectSearchItem>())
+const isSearchEnabled = computed(() => props.search || props.검색)
+const normalizedSearchQuery = computed(() => normalizeSelectSearchText(searchQuery.value))
+const hasSearchQuery = computed(() => normalizedSearchQuery.value.length > 0)
+const hasVisibleItems = computed(() => {
+  if (!isSearchEnabled.value || !hasSearchQuery.value) return true
+
+  return Array.from(searchItems.values()).some((item) => item.matches.value)
+})
+
+function hasVisibleItemsInGroup(groupId: symbol) {
+  if (!isSearchEnabled.value || !hasSearchQuery.value) return true
+
+  return Array.from(searchItems.values()).some(
+    (item) => item.groupId === groupId && item.matches.value,
+  )
+}
+
+function handleSearchKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape" && searchQuery.value) {
+    searchQuery.value = ""
+    event.preventDefault()
+    event.stopPropagation()
+    return
+  }
+
+  if (event.key !== "Escape") {
+    event.stopPropagation()
+  }
+}
+
+function clearSearch() {
+  searchQuery.value = ""
+
+  void nextTick(() => searchInputRef.value?.focus())
+}
+
+provide(selectSearchContextKey, {
+  enabled: isSearchEnabled,
+  hasQuery: hasSearchQuery,
+  hasVisibleItems,
+  query: normalizedSearchQuery,
+  hasVisibleItemsInGroup,
+  registerItem: (item) => searchItems.set(item.id, item),
+  unregisterItem: (id) => searchItems.delete(id),
+})
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <div v-if="isSearchEnabled" data-slot="select-search" class="border-b p-1">
+        <div class="relative">
+          <Search
+            aria-hidden="true"
+            class="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-muted-foreground"
+          />
+          <input
+            ref="searchInputRef"
+            v-model="searchQuery"
+            data-slot="select-search-input"
+            type="text"
+            role="searchbox"
+            autocomplete="off"
+            :placeholder="props.searchPlaceholder"
+            class="h-8 w-full rounded-sm bg-transparent py-1.5 pr-8 pl-8 text-sm outline-none placeholder:text-muted-foreground focus:bg-accent focus:text-accent-foreground"
+            @click.stop
+            @keydown="handleSearchKeydown"
+            @pointerdown.stop
+          />
+          <button
+            v-if="searchQuery"
+            data-slot="select-search-clear"
+            type="button"
+            :aria-label="props.searchClearLabel"
+            class="absolute top-1/2 right-1 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+            @click.stop.prevent="clearSearch"
+            @keydown.stop
+            @pointerdown.stop.prevent
+          >
+            <X aria-hidden="true" class="size-4" />
+          </button>
+        </div>
+      </div>
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+        <slot />
+        <div
+          v-if="isSearchEnabled && hasSearchQuery && !hasVisibleItems"
+          data-slot="select-empty"
+          class="px-2 py-6 text-center text-sm text-muted-foreground"
+        >
+          {{ props.emptyText }}
+        </div>
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

package/src/components/ui/select/SelectGroup.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from "reka-ui"
+import { computed, inject, provide } from "vue"
+import { SelectGroup } from "reka-ui"
+import { selectSearchContextKey, selectSearchGroupKey } from "./search"
+
+const props = defineProps<SelectGroupProps>()
+const groupId = Symbol("select-group")
+const searchContext = inject(selectSearchContextKey, null)
+const isVisible = computed(() => searchContext?.hasVisibleItemsInGroup(groupId) ?? true)
+
+provide(selectSearchGroupKey, groupId)
+</script>
+
+<template>
+  <SelectGroup
+    v-show="isVisible"
+    data-slot="select-group"
+    v-bind="props"
+  >
+    <slot />
+  </SelectGroup>
+</template>

package/src/components/ui/select/SelectItem.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { SelectItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { computed, inject, onBeforeUnmount } from "vue"
+import { Check } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import {
+  normalizeSelectSearchText,
+  selectSearchContextKey,
+  selectSearchGroupKey,
+} from "./search"
+
+const props = defineProps<SelectItemProps & {
+  class?: HTMLAttributes["class"]
+  description?: string
+  descriptionClass?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class", "description", "descriptionClass")
+
+const forwardedProps = useForwardProps(delegatedProps)
+const searchContext = inject(selectSearchContextKey, null)
+const groupId = inject(selectSearchGroupKey, undefined)
+const itemId = Symbol("select-item")
+const itemSearchText = computed(() =>
+  normalizeSelectSearchText(
+    [props.textValue ?? props.value, props.description].filter(Boolean).join(" "),
+  ),
+)
+const matchesSearch = computed(() => {
+  if (!searchContext?.enabled.value || !searchContext.hasQuery.value) return true
+
+  return itemSearchText.value.includes(searchContext.query.value)
+})
+const isVisible = computed(() => matchesSearch.value)
+
+if (searchContext) {
+  searchContext.registerItem({
+    groupId,
+    id: itemId,
+    matches: matchesSearch,
+  })
+
+  onBeforeUnmount(() => searchContext.unregisterItem(itemId))
+}
+</script>
+
+<template>
+  <SelectItem
+    v-if="isVisible"
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=text-])]:text-muted-foreground relative flex w-full cursor-default items-start gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute top-1/2 right-2 flex size-3.5 -translate-y-1/2 items-center justify-center">
+      <SelectItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
+
+    <span class="grid min-w-0 gap-0.5">
+      <SelectItemText>
+        <span data-slot="select-item-label" class="truncate">
+          <slot />
+        </span>
+      </SelectItemText>
+      <span
+        v-if="props.description || $slots.description"
+        data-slot="select-item-description"
+        :class="
+          cn(
+            'text-xs leading-snug text-muted-foreground group-data-[highlighted]:text-accent-foreground/80 group-focus:text-accent-foreground/80',
+            props.descriptionClass,
+          )
+        "
+      >
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </span>
+    </span>
+  </SelectItem>
+</template>

package/src/components/ui/select/SelectItemText.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from "reka-ui"
+import { SelectItemText } from "reka-ui"
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText
+    data-slot="select-item-text"
+    v-bind="props"
+  >
+    <slot />
+  </SelectItemText>
+</template>

package/src/components/ui/select/SelectLabel.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { SelectLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>

package/src/components/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { ChevronDown } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectScrollDownButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronDown class="size-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>

package/src/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { ChevronUp } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectScrollUpButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronUp class="size-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>

package/src/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectSeparator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
+  />
+</template>

package/src/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { ChevronDown } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+  { size: "default" },
+)
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=text-])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/src/components/ui/select/SelectValue.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectValueProps } from "reka-ui"
+import { SelectValue } from "reka-ui"
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    data-slot="select-value"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>

package/src/components/ui/select/index.ts

@@ -0,0 +1,11 @@
+export { default as Select } from "./Select.vue"
+export { default as SelectContent } from "./SelectContent.vue"
+export { default as SelectGroup } from "./SelectGroup.vue"
+export { default as SelectItem } from "./SelectItem.vue"
+export { default as SelectItemText } from "./SelectItemText.vue"
+export { default as SelectLabel } from "./SelectLabel.vue"
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
+export { default as SelectSeparator } from "./SelectSeparator.vue"
+export { default as SelectTrigger } from "./SelectTrigger.vue"
+export { default as SelectValue } from "./SelectValue.vue"

package/src/components/ui/select/search.ts

@@ -0,0 +1,26 @@
+import type { ComputedRef, InjectionKey } from "vue"
+
+export interface SelectSearchItem {
+  groupId?: symbol
+  id: symbol
+  matches: ComputedRef<boolean>
+}
+
+export interface SelectSearchContext {
+  enabled: ComputedRef<boolean>
+  hasQuery: ComputedRef<boolean>
+  hasVisibleItems: ComputedRef<boolean>
+  query: ComputedRef<string>
+  hasVisibleItemsInGroup: (groupId: symbol) => boolean
+  registerItem: (item: SelectSearchItem) => void
+  unregisterItem: (id: symbol) => void
+}
+
+export const selectSearchContextKey: InjectionKey<SelectSearchContext> =
+  Symbol("select-search-context")
+
+export const selectSearchGroupKey: InjectionKey<symbol> = Symbol("select-search-group")
+
+export function normalizeSelectSearchText(value: unknown) {
+  return String(value ?? "").trim().toLocaleLowerCase()
+}

package/src/components/ui/separator/Separator.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import type { SeparatorProps } from "./types"
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+  decorative: true,
+  orientation: "horizontal",
+})
+
+const separatorRole = computed(() => props.decorative ? undefined : "separator")
+const ariaOrientation = computed(() =>
+  props.decorative ? undefined : props.orientation,
+)
+</script>
+
+<template>
+  <div
+    data-slot="separator"
+    :data-orientation="props.orientation"
+    :role="separatorRole"
+    :aria-orientation="ariaOrientation"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  />
+</template>

package/src/components/ui/separator/index.ts

@@ -0,0 +1,5 @@
+export { default as Separator } from "./Separator.vue"
+export type {
+  SeparatorOrientation,
+  SeparatorProps,
+} from "./types"

package/src/components/ui/separator/types.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "vue"
+
+export type SeparatorOrientation = "horizontal" | "vertical"
+
+export interface SeparatorProps {
+  class?: HTMLAttributes["class"]
+  decorative?: boolean
+  orientation?: SeparatorOrientation
+}

package/src/components/ui/shimmer/Shimmer.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { CSSProperties, HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export type ShimmerTone = "default" | "muted" | "primary" | "success" | "warning"
+
+export interface ShimmerProps {
+  as?: string
+  class?: HTMLAttributes["class"]
+  decorative?: boolean
+  delay?: string
+  disabled?: boolean
+  duration?: string
+  label?: string
+  text?: string
+  tone?: ShimmerTone
+}
+
+const props = withDefaults(defineProps<ShimmerProps>(), {
+  as: "span",
+  decorative: false,
+  delay: "0s",
+  disabled: false,
+  duration: "3.6s",
+  tone: "default",
+})
+
+const shimmerStyle = computed<CSSProperties>(() => ({
+  "--shimmer-delay": props.delay,
+  "--shimmer-duration": props.duration,
+} as CSSProperties))
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    data-slot="shimmer"
+    :data-animated="props.disabled ? 'false' : 'true'"
+    :data-tone="props.tone"
+    :aria-hidden="props.decorative ? 'true' : undefined"
+    :aria-label="props.decorative ? undefined : props.label"
+    :class="cn('inline-block font-medium leading-none tracking-normal', props.class)"
+    :role="!props.decorative && props.label ? 'status' : undefined"
+    :style="shimmerStyle"
+  >
+    <slot>{{ props.text }}</slot>
+  </component>
+</template>
+
+<style scoped>
+@keyframes shimmer-text-sweep {
+  0% {
+    background-position: 180% 0;
+  }
+
+  100% {
+    background-position: -180% 0;
+  }
+}
+
+[data-slot="shimmer"] {
+  --shimmer-base: color-mix(in oklab, var(--foreground) 38%, transparent);
+  --shimmer-highlight: var(--foreground);
+  color: var(--shimmer-highlight);
+}
+
+[data-slot="shimmer"][data-tone="muted"] {
+  --shimmer-base: color-mix(in oklab, var(--muted-foreground) 36%, transparent);
+  --shimmer-highlight: var(--muted-foreground);
+}
+
+[data-slot="shimmer"][data-tone="primary"] {
+  --shimmer-base: color-mix(in oklab, var(--primary) 38%, transparent);
+  --shimmer-highlight: var(--primary);
+}
+
+[data-slot="shimmer"][data-tone="success"] {
+  --shimmer-base: oklch(0.58 0.15 154 / 38%);
+  --shimmer-highlight: oklch(0.58 0.15 154);
+}
+
+[data-slot="shimmer"][data-tone="warning"] {
+  --shimmer-base: oklch(0.67 0.17 68 / 42%);
+  --shimmer-highlight: oklch(0.58 0.15 68);
+}
+
+[data-slot="shimmer"][data-animated="true"] {
+  animation: shimmer-text-sweep var(--shimmer-duration) ease-in-out var(--shimmer-delay) infinite;
+  background-image: linear-gradient(
+    110deg,
+    var(--shimmer-base) 0%,
+    var(--shimmer-base) 36%,
+    var(--shimmer-highlight) 50%,
+    var(--shimmer-base) 64%,
+    var(--shimmer-base) 100%
+  );
+  background-size: 260% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="shimmer"][data-animated="true"] {
+    animation: none;
+    background-position: 50% 0;
+  }
+}
+</style>

package/src/components/ui/shimmer/index.ts

@@ -0,0 +1,5 @@
+export { default as Shimmer } from "./Shimmer.vue"
+export type {
+  ShimmerProps,
+  ShimmerTone,
+} from "./Shimmer.vue"