@byyuurin/ui 0.0.5 → 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
   /**
@@ -47,11 +46,10 @@ import { reactivePick } from '@vueuse/core'
 import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
 import { useTheme } from '../composables/useTheme'
-import UButton from './Button.vue'
+import Button from './Button.vue'
 
 const props = withDefaults(defineProps<ModalProps>(), {
   modal: true,
-  size: 'md',
   portal: true,
   overlay: true,
   transition: true,
@@ -110,7 +108,7 @@ const style = computed(() => {
 
               <DialogClose as-child>
                 <slot name="close">
-                  <UButton
+                  <Button
                     v-if="props.close"
                     variant="ghost"
                     :icon="props.closeIcon || theme.app.icons.close"

package/dist/runtime/components/Pagination.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui'
+import type { pagination } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+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.
+   * @default app.icons.doubleLeft
+   */
+  firstIcon?: string
+  /**
+   * The icon to use for the last page control.
+   * @default app.icons.doubleRight
+   */
+  lastIcon?: string
+  /**
+   * The icon to use for the previous page control.
+   * @default app.icons.arrowLeft
+   */
+  prevIcon?: string
+  /**
+   * The icon to use for the next page control.
+   * @default app.icons.arrowRight
+   */
+  nextIcon?: string
+  /**
+   * The icon to use for the ellipsis control.
+   * @default app.icons.ellipsis
+   */
+  ellipsisIcon?: string
+  /**
+   * The size of the pagination controls.
+   * @default 'md'
+   */
+  size?: ButtonProps['size']
+  /**
+   * The variant of the pagination controls.
+   * @default 'outline'
+   */
+  variant?: ButtonProps['variant']
+  /**
+   * The variant of the active pagination control.
+   * @default 'solid'
+   */
+  activeVariant?: ButtonProps['variant']
+  /**
+   * Whether to show the first, previous, next, and last controls.
+   * @default true
+   */
+  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">
+import { reactivePick } from '@vueuse/core'
+import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  variant: 'outline',
+  activeVariant: 'solid',
+  showControls: true,
+  showEdges: false,
+  itemsPerPage: 10,
+  siblingCount: 2,
+  total: 0,
+})
+
+const emit = defineEmits<PaginationEmits>()
+const slots = defineSlots<PaginationSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emit)
+
+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 ellipsisIcon = computed(() => props.ellipsisIcon || theme.value.app.icons.ellipsis)
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.pagination)
+  return styler(props)
+})
+</script>
+
+<template>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <PaginationList v-slot="{ items }" :class="style.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="props.showControls || !!slots.first" as-child>
+        <slot name="first">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="firstIcon" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="props.showControls || !!slots.prev" as-child>
+        <slot name="prev">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="prevIcon" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <Button
+              :class="style.item({ class: props.ui?.item })"
+              :variant="props.page === item.value ? props.activeVariant : props.variant"
+              :size="props.size"
+              :label="String(item.value)"
+              :ui="{ label: style.label() }"
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
+          <slot name="ellipsis">
+            <Button
+              :variant="props.variant"
+              :size="props.size"
+              :icon="ellipsisIcon"
+              :disabled="props.disabled /* TODO: remove after reka-ui update */"
+              :class="[
+                style.item({ class: props.ui?.item }),
+                style.ellipsis({ class: props.ui?.ellipsis }),
+              ]"
+            />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="props.showControls || !!slots.next" as-child>
+        <slot name="next">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="nextIcon" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="props.showControls || !!slots.last" as-child>
+        <slot name="last">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="lastIcon" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>