@byyuurin/ui 0.0.6 → 0.0.7

package/dist/runtime/components/Link.vue

@@ -1,117 +1,346 @@
 <script lang="ts">
 import type { PrimitiveProps } from 'reka-ui'
+import type { ButtonHTMLAttributes } from 'vue'
+import type { RouteLocationRaw, RouterLinkProps } from 'vue-router'
 import type { link } from '../theme'
-import type { ComponentAttrs, HintString, MaybeArray } from '../types'
+import type { ComponentAttrs } from '../types'
 
-export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'> {
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+  /**
+   * Route Location the link should navigate to when clicked on.
+   */
+  to?: RouteLocationRaw // need to manually type to avoid breaking typedPages
+  /**
+   * An alias for `to`. If used with `to`, `href` will be ignored
+   */
+  href?: NuxtLinkProps['to']
+  /**
+   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+   */
+  external?: boolean
+  /**
+   * Where to display the linked URL, as the name for a browsing context.
+   */
+  target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null
+  /**
+   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+   */
+  rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null
+  /**
+   * If set to true, no rel attribute will be added to the link
+   */
+  noRel?: boolean
+  /**
+   * A class to apply to links that have been prefetched.
+   */
+  prefetchedClass?: string
+  /**
+   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
+   */
+  prefetch?: boolean
+  /**
+   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
+   */
+  prefetchOn?: 'visibility' | 'interaction' | Partial<{
+    visibility: boolean
+    interaction: boolean
+  }>
+  /**
+   * Escape hatch to disable `prefetch` attribute.
+   */
+  noPrefetch?: boolean
+}
+
+export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'>, NuxtLinkProps {
+  /**
+   * The element or component this component should render as when not a link.
+   * @default 'button'
+   */
   as?: PrimitiveProps['as']
-  type?: string
-  onClick?: MaybeArray<(e: MouseEvent) => void | Promise<void>>
+  /**
+   * The type of the button when not a link.
+   * @default 'button'
+   */
+  type?: ButtonHTMLAttributes['type']
   label?: string
-  href?: string
-  navigate?: (e: MouseEvent) => void
-  /** A rel attribute value to apply on the link. */
-  rel?: HintString<'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc'> | null
-  noRel?: boolean
-  /** Where to display the linked URL, as the name for a browsing context. */
-  target?: HintString<'_blank' | '_parent' | '_self' | '_top'> | null
-  isExternal?: boolean
-  underline?: boolean
-  active?: boolean
   disabled?: boolean
+  /** Force the link to be active independent of the current route. */
+  active?: boolean
+  /** Will only be active if the current route is an exact match. */
+  exact?: boolean
+  /** Will only be active if the current route query is an exact match. */
+  exactQuery?: boolean | 'partial'
+  /** Will only be active if the current route hash is an exact match. */
+  exactHash?: boolean
+  /** The class to apply when the link is inactive. */
+  inactiveClass?: string
+  /** The class to apply when the link is disabled. */
+  disableClass?: string
+  custom?: boolean
+  underline?: boolean
   /** When `true`, only styles from `class`, `ui.active`, and `ui.inactive` will be applied. */
   raw?: boolean
-  ui?: {
-    active?: string
-    inactive?: string
-    disabled?: string
-  }
+}
+
+export interface LinkSlots {
+  default?: (props: { active: boolean }) => any
 }
 </script>
 
 <script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { diff, isEqual } from 'ohash/utils'
+import { useForwardProps } from 'reka-ui'
+import { hasProtocol } from 'ufo'
+import { computed, getCurrentInstance, resolveComponent } from 'vue'
+import { useNuxtApp, useRoute } from '#imports'
 import { useTheme } from '../composables/useTheme'
+import LinkBase from './LinkBase.vue'
+
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<LinkProps>(), {
   as: 'button',
   type: 'button',
 })
+defineSlots<LinkSlots>()
+
+// Check if vue-router is available by checking for the injection key
+const hasRouter = computed(() => {
+  const app = getCurrentInstance()?.appContext.app
+  return !!(app?.config?.globalProperties?.$router)
+})
+
+const nuxtApp = useNuxtApp()
+const hasNuxtLink = !!nuxtApp.$router
+
+const linkComponent = computed(() => ({
+  NuxtLink: nuxtApp.$router ? resolveComponent('NuxtLink') : null,
+  RouterLink: hasRouter.value ? resolveComponent('RouterLink') : null,
+}))
+
+// Only try to get route if router exists
+const route = computed(() => {
+  if (!hasRouter.value)
+    return null
 
-const linkProps = computed(() => {
-  const { as, type, disabled, href, rel, target } = props
-  const base = { as, rel, target }
-
-  if (href) {
-    return {
-      ...base,
-      'as': 'a',
-      'href': disabled ? undefined : href,
-      'aria-disabled': disabled ? 'true' : undefined,
-      'role': disabled ? 'link' : undefined,
-      'tabindex': disabled ? -1 : undefined,
-    }
+  try {
+    return useRoute()
   }
+  catch {
+    return null
+  }
+})
+
+const linkProps = useForwardProps(reactiveOmit(
+  props,
+  'as',
+  'type',
+  'disabled',
+  'active',
+  'exact',
+  'exactQuery',
+  'exactHash',
+  'activeClass',
+  'inactiveClass',
+  'raw',
+  'class',
+  ...(hasNuxtLink ? [] : ['to'] as const),
+))
+
+function isPartiallyEqual(item1: any, item2: any) {
+  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+    if (q.type === 'added')
+      filtered.add(q.key)
+
+    return filtered
+  }, new Set<string>())
 
-  if (as === 'button')
-    return { ...base, type, disabled }
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
 
-  return base
+  return isEqual(item1Filtered, item2Filtered)
+}
+
+const isExternalLink = computed(() => {
+  if (!props.to)
+    return false
+
+  return typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true })
 })
 
-const { theme, createStyler } = useTheme()
+function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
+  if (props.active !== undefined)
+    return props.active
 
-const style = computed(() => {
-  if (props.raw)
-    return props.class
+  if (props.exactQuery === 'partial') {
+    if (!isPartiallyEqual(linkRoute?.query, route.value?.query))
+      return false
+  }
+  else if (props.exactQuery === true && !isEqual(linkRoute?.query, route.value?.query)) {
+    return false
+  }
+
+  if (props.exactHash && linkRoute?.hash !== route.value?.hash)
+    return false
+
+  if (props.exact && isExactActive)
+    return true
 
+  if (!props.exact && isActive)
+    return true
+
+  return false
+}
+
+const { theme, createStyler } = useTheme()
+
+function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
   const { link } = theme.value
+  const active = isLinkActive({ route, isActive, isExactActive })
+
+  if (props.raw)
+    return [props.class, active ? props.activeClass : props.inactiveClass]
 
   const styler = createStyler({
     ...link,
     variants: {
       ...link.variants,
       active: {
-        true: [link.variants.active.true, props.ui?.active],
-        false: [link.variants.active.false, props.ui?.inactive],
+        true: [link.variants.active.true, props.activeClass],
+        false: [link.variants.active.false, props.inactiveClass],
       },
       disabled: {
-        true: [link.variants.disabled.true, props.ui?.disabled],
+        true: [link.variants.disabled.true, props.disableClass],
       },
     },
   })
-  return styler(props)
-})
-
-function handleClick(e: MouseEvent) {
-  if (props.disabled) {
-    e.stopPropagation()
-    e.preventDefault()
-    return
-  }
-
-  if (props.onClick) {
-    const handlers = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
-    for (const handler of handlers)
-      handler(e)
-  }
 
-  if (props.href && props.navigate && !props.isExternal)
-    props.navigate(e)
+  return styler({ ...props, active })
 }
 </script>
 
 <template>
-  <Primitive
-    v-bind="linkProps"
-    :rel="props.rel"
-    :target="props.target"
-    :class="style"
-    @click="handleClick"
-  >
-    <slot :active="props.active">
-      {{ props.label }}
-    </slot>
-  </Primitive>
+  <template v-if="hasRouter">
+    <component
+      :is="linkComponent.NuxtLink"
+      v-if="hasNuxtLink"
+      v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }"
+      v-bind="linkProps"
+      :href="to ? undefined : href"
+      custom
+    >
+      <template v-if="custom">
+        <slot
+          v-bind="{
+            ...$attrs,
+            as,
+            type,
+            disabled,
+            href,
+            navigate,
+            rel,
+            target,
+            isExternal,
+            active: isLinkActive({ route: linkRoute, isActive, isExactActive }),
+          }"
+        >
+          {{ props.label }}
+        </slot>
+      </template>
+      <LinkBase
+        v-else
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href,
+          navigate,
+          rel,
+          target,
+          isExternal,
+        }"
+        :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      >
+        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
+          {{ props.label }}
+        </slot>
+      </LinkBase>
+    </component>
+    <component
+      :is="linkComponent.RouterLink"
+      v-else
+      v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }"
+      v-bind="linkProps"
+      :to="to || '#'"
+      custom
+    >
+      <template v-if="custom">
+        <slot
+          v-bind="{
+            ...$attrs,
+            as,
+            type,
+            disabled,
+            href: to ? href : undefined,
+            navigate,
+            active: isLinkActive({ route: linkRoute, isActive, isExactActive }),
+          }"
+        >
+          {{ props.label }}
+        </slot>
+      </template>
+      <LinkBase
+        v-else
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href: to ? href : undefined,
+          navigate,
+        }"
+        :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      >
+        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
+          {{ props.label }}
+        </slot>
+      </LinkBase>
+    </component>
+  </template>
+  <template v-else>
+    <template v-if="props.custom">
+      <slot
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href: to,
+          target: isExternalLink ? '_blank' : undefined,
+          active: false,
+        }"
+      >
+        {{ props.label }}
+      </slot>
+    </template>
+    <LinkBase
+      v-else
+      v-bind="{
+        ...$attrs,
+        as,
+        type,
+        disabled,
+        href: (to as string),
+        target: isExternalLink ? '_blank' : undefined,
+      }"
+      :is-external="isExternalLink"
+      :class="resolveLinkClass()"
+    >
+      <slot :active="false">
+        {{ props.label }}
+      </slot>
+    </LinkBase>
+  </template>
 </template>

package/dist/runtime/components/LinkBase.vue

@@ -0,0 +1,88 @@
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+
+export interface LinkBaseProps {
+  /**
+   * The element or component this component should render as.
+   * @default 'button'
+   */
+  as?: PrimitiveProps['as']
+  type?: string
+  disabled?: boolean
+  onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>
+  href?: string
+  navigate?: (e: MouseEvent) => void
+  rel?: string
+  target?: string
+  isExternal?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<LinkBaseProps>(), {
+  as: 'button',
+  type: 'button',
+})
+
+const wrapperProps = computed(() => {
+  const { href, rel, target, disabled } = props
+
+  const baseProps = {
+    rel,
+    target,
+  }
+
+  if (props.href) {
+    return {
+      ...baseProps,
+      'as': 'a',
+      'href': disabled ? undefined : href,
+      'aria-disabled': disabled ? 'true' : undefined,
+      'role': disabled ? 'link' : undefined,
+      'tabindex': disabled ? -1 : undefined,
+    }
+  }
+
+  if (props.as === 'button') {
+    return {
+      ...baseProps,
+      as: props.as,
+      type: props.type,
+      disabled,
+    }
+  }
+
+  return {
+    ...baseProps,
+    as: props.as,
+  }
+})
+
+function onClickWrapper(e: MouseEvent) {
+  if (props.disabled) {
+    e.stopPropagation()
+    e.preventDefault()
+    return
+  }
+
+  if (props.onClick) {
+    for (const onClick of Array.isArray(props.onClick) ? props.onClick : [props.onClick])
+      onClick(e)
+  }
+
+  if (props.href && props.navigate && !props.isExternal)
+    props.navigate(e)
+}
+</script>
+
+<template>
+  <Primitive
+    v-bind="wrapperProps"
+    @click="onClickWrapper"
+  >
+    <slot></slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Modal.vue

@@ -28,7 +28,6 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
   portal?: boolean
   /** @default true */
   overlay?: boolean
-  blur?: boolean
   /** @default true */
   transition?: boolean
   /**

package/dist/runtime/components/Select.vue

@@ -198,7 +198,7 @@ function onUpdateOpen(value: boolean) {
     <SelectTrigger :id="props.id" :class="style.base({ class: [props.class, props.ui?.base] })">
       <span v-if="isPrefix || slots.prefix" :class="style.prefix({ class: props.ui?.prefix })">
         <slot name="prefix" :model-value="typedValue(innerValue)" :open="open" :ui="props.ui">
-          <i v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></i>
+          <span v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></span>
         </slot>
       </span>
 
@@ -215,7 +215,7 @@ function onUpdateOpen(value: boolean) {
 
       <span v-if="isSuffix || !!slots.suffix" :class="style.suffix({ class: props.ui?.suffix })">
         <slot name="suffix" :model-value="typedValue(innerValue)" :open="open" :ui="props.ui">
-          <i v-if="suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></i>
+          <span v-if="suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></span>
         </slot>
       </span>
     </SelectTrigger>
@@ -238,7 +238,7 @@ function onUpdateOpen(value: boolean) {
               >
                 <slot name="item" :item="typedItem(item)" :index="index">
                   <slot name="itemPrefix" :item="typedItem(item)" :index="index">
-                    <i v-if="item.icon" :class="style.itemPrefixIcon({ class: [item.icon, props.ui?.itemPrefixIcon] })"></i>
+                    <span v-if="item.icon" :class="style.itemPrefixIcon({ class: [item.icon, props.ui?.itemPrefixIcon] })"></span>
                   </slot>
 
                   <SelectItemText :class="style.itemLabel({ class: props.ui?.itemLabel })">
@@ -251,7 +251,7 @@ function onUpdateOpen(value: boolean) {
                     <slot name="itemSuffix" :item="typedItem(item)" :index="index"></slot>
 
                     <SelectItemIndicator as-child>
-                      <i :class="style.itemSuffixIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemSuffixIcon] })"></i>
+                      <span :class="style.itemSuffixIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemSuffixIcon] })"></span>
                     </SelectItemIndicator>
                   </span>
                 </slot>

package/dist/runtime/components/Separator.vue

@@ -0,0 +1,63 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { SeparatorProps as RekaSeparatorProps } from 'reka-ui'
+import type { separator } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface SeparatorSlots {
+  default?: (props: {}) => any
+}
+
+type SeparatorVariants = VariantProps<typeof separator>
+
+export interface SeparatorProps extends ComponentAttrs<typeof separator>, Pick<RekaSeparatorProps, 'as' | 'decorative'> {
+  orientation?: SeparatorVariants['orientation']
+  align?: 'start' | 'end' | 'center'
+  /** Display a label in the middle. */
+  label?: string
+  /**
+   * Display an icon in the middle.
+   */
+  icon?: string
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { Separator, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+  orientation: 'horizontal',
+  position: 'center',
+})
+
+const slots = defineSlots<SeparatorSlots>()
+
+const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
+
+const { theme, createStyler } = useTheme()
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.separator)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Separator v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <div :class="style.line({ class: props.ui?.line, start: props.align === 'start' })"></div>
+
+    <template v-if="props.label || props.icon || slots.default">
+      <div :class="style.container({ class: props.ui?.container })">
+        <slot>
+          <span v-if="props.label" :class="style.label({ class: props.ui?.label })">{{ props.label }}</span>
+          <span v-else-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
+        </slot>
+      </div>
+
+      <div :class="style.line({ class: props.ui?.line, end: props.align === 'end' })"></div>
+    </template>
+  </Separator>
+</template>

package/dist/runtime/components/Switch.vue

@@ -74,10 +74,10 @@ function onUpdate(value: any) {
         @update:model-value="onUpdate"
       >
         <SwitchThumb :class="style.thumb({ class: props.ui?.thumb })">
-          <i v-if="props.loading" :class="style.icon({ class: [theme.app.icons.loading, props.ui?.icon], checked: true, unchecked: true })"></i>
+          <span v-if="props.loading" :class="style.icon({ class: [theme.app.icons.loading, props.ui?.icon], checked: true, unchecked: true })"></span>
           <template v-else>
-            <i v-if="props.checkedIcon" :class="style.icon({ class: [props.checkedIcon, props.ui?.icon], checked: true })"></i>
-            <i v-if="props.uncheckedIcon" :class="style.icon({ class: [props.uncheckedIcon, props.ui?.icon], unchecked: true })"></i>
+            <span v-if="props.checkedIcon" :class="style.icon({ class: [props.checkedIcon, props.ui?.icon], checked: true })"></span>
+            <span v-if="props.uncheckedIcon" :class="style.icon({ class: [props.uncheckedIcon, props.ui?.icon], unchecked: true })"></span>
           </template>
         </SwitchThumb>
       </SwitchRoot>