@byyuurin/ui 0.0.6 → 0.0.8

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'> {
+export interface LinkSlots {
+  default?: (props: { active: boolean }) => any
+}
+
+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
-  }
 }
 </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 || href,
+          target: isExternalLink ? '_blank' : target || undefined,
+          active: false,
+        }"
+      >
+        {{ props.label }}
+      </slot>
+    </template>
+    <LinkBase
+      v-else
+      v-bind="{
+        ...$attrs,
+        as,
+        type,
+        disabled,
+        href: ((to || href) as string),
+        target: isExternalLink ? '_blank' : target || 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

@@ -8,13 +8,13 @@ export interface ModalEmits extends DialogRootEmits {}
 
 export interface ModalSlots {
   default?: (props: { open: boolean }) => any
-  content?: (props?: any) => any
-  header?: (props?: any) => any
-  title?: (props?: any) => any
-  description?: (props?: any) => any
-  close?: (props?: any) => any
-  body?: (props?: any) => any
-  footer?: (props?: any) => any
+  content?: (props?: {}) => any
+  header?: (props?: {}) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
+  close?: (props?: {}) => any
+  body?: (props?: {}) => any
+  footer?: (props?: {}) => any
 }
 
 type ModalVariants = VariantProps<typeof modal>
@@ -28,7 +28,6 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
   portal?: boolean
   /** @default true */
   overlay?: boolean
-  blur?: boolean
   /** @default true */
   transition?: boolean
   /**
@@ -37,7 +36,7 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
    */
   dismissible?: boolean
   close?: ButtonProps | boolean
-  /** @default `app.icons.close` */
+  /** @default app.icons.close */
   closeIcon?: string
 }
 </script>
@@ -46,6 +45,7 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
 import { reactivePick } from '@vueuse/core'
 import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -72,6 +72,7 @@ const contentEvents = computed(() => {
   }
 })
 
+const { t } = useLocale()
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.modal)
@@ -115,6 +116,7 @@ const style = computed(() => {
                     :icon="props.closeIcon || theme.app.icons.close"
                     v-bind="typeof props.close === 'boolean' ? {} : props.close"
                     :class="style.close({ class: props.ui?.close })"
+                    :aria-label="t('modal.close')"
                   />
                 </slot>
               </DialogClose>

package/dist/runtime/components/ModalProvider.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { injectModalState, useModal } from '../composables/useModal'
+import { injectModalState } from '../app/injections'
+import { useModal } from '../composables/useModal'
 
 const modalState = injectModalState()
 const { isOpen } = useModal()

package/dist/runtime/components/Pagination.vue

@@ -3,6 +3,27 @@ import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui'
 import type { pagination } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+export interface PaginationEmits extends PaginationRootEmits {}
+
+export interface PaginationSlots {
+  first?: (props?: {}) => any
+  prev?: (props?: {}) => any
+  next?: (props?: {}) => any
+  last?: (props?: {}) => any
+  ellipsis?: (props?: {}) => any
+  item?: (props: {
+    page: number
+    pageCount: number
+    item: {
+      type: 'ellipsis'
+    } | {
+      type: 'page'
+      value: number
+    }
+    index: number
+  }) => any
+}
+
 export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick<PaginationRootProps, 'as' | 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'> {
   /**
    * The icon to use for the first page control.
@@ -16,12 +37,12 @@ export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick
   lastIcon?: string
   /**
    * The icon to use for the previous page control.
-   * @default app.icons.arrowLeft
+   * @default app.icons.chevronLeft
    */
   prevIcon?: string
   /**
    * The icon to use for the next page control.
-   * @default app.icons.arrowRight
+   * @default app.icons.chevronRight
    */
   nextIcon?: string
   /**
@@ -31,17 +52,17 @@ export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick
   ellipsisIcon?: string
   /**
    * The size of the pagination controls.
-   * @default 'md'
+   * @default "md"
    */
   size?: ButtonProps['size']
   /**
    * The variant of the pagination controls.
-   * @default 'outline'
+   * @default "outline"
    */
   variant?: ButtonProps['variant']
   /**
    * The variant of the active pagination control.
-   * @default 'solid'
+   * @default "solid"
    */
   activeVariant?: ButtonProps['variant']
   /**
@@ -50,27 +71,6 @@ export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick
    */
   showControls?: boolean
 }
-
-export interface PaginationEmits extends PaginationRootEmits {}
-
-export interface PaginationSlots {
-  first?: (props?: {}) => any
-  prev?: (props?: {}) => any
-  next?: (props?: {}) => any
-  last?: (props?: {}) => any
-  ellipsis?: (props?: {}) => any
-  item?: (props: {
-    page: number
-    pageCount: number
-    item: {
-      type: 'ellipsis'
-    } | {
-      type: 'page'
-      value: number
-    }
-    index: number
-  }) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -97,10 +97,10 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage',
 
 const { theme, createStyler } = useTheme()
 
-const firstIcon = computed(() => props.firstIcon || theme.value.app.icons.doubleLeft)
-const prevIcon = computed(() => props.prevIcon || theme.value.app.icons.arrowLeft)
-const nextIcon = computed(() => props.nextIcon || theme.value.app.icons.arrowRight)
-const lastIcon = computed(() => props.lastIcon || theme.value.app.icons.doubleRight)
+const firstIcon = computed(() => props.firstIcon || theme.value.app.icons.chevronDoubleLeft)
+const prevIcon = computed(() => props.prevIcon || theme.value.app.icons.chevronLeft)
+const nextIcon = computed(() => props.nextIcon || theme.value.app.icons.chevronRight)
+const lastIcon = computed(() => props.lastIcon || theme.value.app.icons.chevronDoubleRight)
 const ellipsisIcon = computed(() => props.ellipsisIcon || theme.value.app.icons.ellipsis)
 
 const style = computed(() => {