@byyuurin/ui 0.0.10 → 0.1.0

package/dist/runtime/components/Link.vue

@@ -1,344 +1,111 @@
-<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 } from '../types'
+<script>
 
-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']
-  /**
-   * The type of the button when not a link.
-   * @default "button"
-   */
-  type?: ButtonHTMLAttributes['type']
-  label?: string
-  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
-}
 </script>
 
-<script setup lang="ts">
-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
-
-  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>())
-
-  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 isEqual(item1Filtered, item2Filtered)
-}
-
-const isExternalLink = computed(() => {
-  const to = props.to || props.href
-
-  if (!to)
-    return false
-
-  if (props.target === '_blank')
-    return true
-
-  return typeof to === 'string' && hasProtocol(to, { acceptRelative: true })
-})
-
-function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
-  if (props.active !== undefined)
-    return props.active
-
-  if (isExternalLink.value || !props.to)
-    return false
-
-  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
+<script setup>
+import { reactiveOmit, reactivePick } from "@vueuse/core";
+import { isEqual } from "ohash/utils";
+import { useForwardProps } from "reka-ui";
+import { computed } from "vue";
+import theme from "#build/ui/link";
+import { useAppConfig, useRoute } from "#imports";
+import { isPartiallyEqual } from "../utils/link";
+import { cv, merge } from "../utils/style";
+import LinkBase from "./LinkBase.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  type: { type: null, required: false, default: "button" },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  custom: { type: Boolean, required: false },
+  raw: { type: Boolean, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object], required: false },
+  rel: { type: [String, Object], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false, default: "page" },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
+});
+defineSlots();
+const route = useRoute();
+const inheritProps = useForwardProps(reactivePick(props, "as", "type", "disabled"));
+const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
+const to = computed(() => props.to ?? props.href);
+function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
+  if (props.active !== void 0)
+    return props.active;
+  if (props.exactQuery === "partial") {
+    if (!isPartiallyEqual(linkRoute.query, route.query))
+      return false;
+  } else if (props.exactQuery === true && !isEqual(linkRoute.query, route.query)) {
+    return false;
   }
-
-  if (props.exactHash && linkRoute?.hash !== route.value?.hash)
-    return false
-
+  if (props.exactHash && linkRoute.hash !== route.hash)
+    return false;
   if (props.exact && isExactActive)
-    return true
-
+    return true;
   if (!props.exact && isActive)
-    return true
-
-  return false
+    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,
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const link = merge(theme, {
+    ...appConfig.ui.link,
     variants: {
-      ...link.variants,
+      ...appConfig.ui.link?.variants,
       active: {
-        true: [link.variants.active.true, props.activeClass],
-        false: [link.variants.active.false, props.inactiveClass],
-      },
-      disabled: {
-        true: [link.variants.disabled.true, props.disableClass],
-      },
-    },
-  })
-
-  return styler({ ...props, active })
+        true: [appConfig.ui.link?.variants?.active?.true, props.activeClass].filter(Boolean).join(" "),
+        false: [appConfig.ui.link?.variants?.active?.false, props.inactiveClass].filter(Boolean).join(" ")
+      }
+    }
+  });
+  return cv(link)();
+});
+function resolveLinkClass({ route: route2, isActive, isExactActive }) {
+  const active = isLinkActive({ route: route2, isActive, isExactActive });
+  if (props.raw)
+    return [props.class, active ? props.activeClass : props.inactiveClass];
+  return ui.value.base({ ...props, active });
 }
 </script>
 
 <template>
-  <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="isExternalLink ? '#' : to || '#'"
-      custom
-    >
-      <template v-if="custom">
-        <slot
-          v-bind="{
-            ...$attrs,
-            ...isExternalLink
-              ? {
-                href: to || props.href,
-                target: props.target,
-              }
-              : {
-                href: to ? href : undefined,
-                target: undefined,
-              },
-            as,
-            type,
-            disabled,
-            navigate,
-            active: isLinkActive({ route: linkRoute, isActive, isExactActive }),
-            isExternal: isExternalLink,
-          }"
-        >
-          {{ props.label }}
-        </slot>
-      </template>
-      <LinkBase
-        v-else
-        v-bind="{
-          ...$attrs,
-          as,
-          type,
-          disabled,
-          href: to ? href : undefined,
-          navigate,
-        }"
-        :is-external="isExternalLink"
-        :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">
+  <NuxtLink
+    v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }"
+    v-bind="nuxtLinkProps"
+    :to="to"
+    custom
+  >
+    <template v-if="custom">
       <slot
         v-bind="{
-          ...$attrs,
-          as,
-          type,
-          disabled,
-          href: to || href,
-          target: target || (isExternalLink ? '_blank' : undefined),
-          active: false,
-        }"
+  ...$attrs,
+  ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  ...inheritProps,
+  href,
+  navigate,
+  rel,
+  target,
+  isExternal,
+  active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+}"
       >
         {{ props.label }}
       </slot>
@@ -346,19 +113,20 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
     <LinkBase
       v-else
       v-bind="{
-        ...$attrs,
-        as,
-        type,
-        disabled,
-        href: ((typeof to === 'string' ? to : href) as string),
-        target: target || (isExternalLink ? '_blank' : undefined),
-      }"
-      :is-external="isExternalLink"
-      :class="resolveLinkClass()"
+  ...$attrs,
+  ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  ...inheritProps,
+  href,
+  navigate,
+  rel,
+  target,
+  isExternal
+}"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
     >
-      <slot :active="false">
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
         {{ props.label }}
       </slot>
     </LinkBase>
-  </template>
+  </NuxtLink>
 </template>

package/dist/runtime/components/Link.vue.d.ts

@@ -0,0 +1,95 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { ButtonHTMLAttributes } from 'vue';
+import type { RouteLocationRaw, RouterLinkProps } from 'vue-router';
+import type { ComponentBaseProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: RouteLocationRaw;
+    /**
+     * 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 & {});
+    /**
+     * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+     */
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {});
+    /**
+     * 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 ComponentBaseProps, NuxtLinkProps {
+    /**
+     * The element or component this component should render as when not a link.
+     * @default "button"
+     */
+    as?: PrimitiveProps['as'];
+    /**
+     * The type of the button when not a link.
+     * @default "button"
+     */
+    type?: ButtonHTMLAttributes['type'];
+    label?: string;
+    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;
+    /** Allows controlling how the current route query sets the link as active. */
+    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;
+    custom?: boolean;
+    /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+    raw?: boolean;
+}
+export interface LinkSlots {
+    default: StaticSlot<{
+        active: boolean;
+    }>;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+    active: boolean;
+    type: "reset" | "submit" | "button";
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LinkBase.vue

@@ -1,88 +1,48 @@
-<script lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
+<script>
 
-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,
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  type: { type: String, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  href: { type: String, required: false },
+  navigate: { type: Function, required: false },
+  target: { type: null, required: false },
+  rel: { type: null, required: false },
+  active: { type: Boolean, required: false },
+  isExternal: { type: Boolean, required: false }
+});
+const linkProps = computed(() => {
+  const { as, type, href, rel, target, disabled } = props;
+  if (href) {
+    return disabled ? { as: "a", ariaDisabled: "true", role: "link", tabindex: -1, rel, target } : { as: "a", href, 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 (as === "button")
+    return { as, type, disabled, rel, target };
+  return { as, rel, target };
+});
+function onClickWrapper(e) {
   if (props.disabled) {
-    e.stopPropagation()
-    e.preventDefault()
-    return
+    e.stopPropagation();
+    e.preventDefault();
+    return;
   }
-
   if (props.onClick) {
     for (const onClick of Array.isArray(props.onClick) ? props.onClick : [props.onClick])
-      onClick(e)
+      onClick(e);
   }
-
   if (props.href && props.navigate && !props.isExternal)
-    props.navigate(e)
+    props.navigate(e);
 }
 </script>
 
 <template>
-  <Primitive
-    v-bind="wrapperProps"
-    @click="onClickWrapper"
-  >
+  <Primitive v-bind="linkProps" @click="onClickWrapper">
     <slot></slot>
   </Primitive>
 </template>