@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Link.vue

@@ -1,138 +1,120 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/link";
-import { tv } from "../utils/tv";
-const appConfigLink = _appConfig;
-const link = tv({ extend: tv(theme), ...appConfigLink.b24ui?.link || {} });
+<script lang="ts">
+import type { ButtonHTMLAttributes } from 'vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import type { RouterLinkProps, RouteLocationRaw } from 'vue-router'
+import theme from '#build/b24ui/link'
+import { tv } from '../utils/tv'
+
+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
+}
+
+const appConfigLink = _appConfig as AppConfig & { b24ui: { link: Partial<typeof theme> } }
+
+const link = tv({ extend: tv(theme), ...(appConfigLink.b24ui?.link || {}) })
+
+export interface LinkProps extends NuxtLinkProps {
+  /**
+   * The element or component this component should render as when not a link.
+   * @defaultValue 'button'
+   */
+  as?: any
+  /**
+   * The type of the button when not a link.
+   * @defaultValue 'button'
+   */
+  type?: ButtonHTMLAttributes['type']
+  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`, uses special underlined styling. */
+  isAction?: boolean
+  /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+  raw?: boolean
+  class?: any
+}
+
+export interface LinkSlots {
+  default(props: { active: boolean }): any
+}
 </script>
 
-<script setup>
-import { computed } from "vue";
-import { isEqual, diff } from "ohash/utils";
-import { useForwardProps } from "reka-ui";
-import { reactiveOmit } from "@vueuse/core";
-import { useRoute } from "#imports";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "button"
-  },
-  type: {
-    type: null,
-    required: false,
-    default: "button"
-  },
-  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,
-    default: ""
-  },
-  custom: {
-    type: Boolean,
-    required: false
-  },
-  isAction: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  raw: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  to: {
-    type: null,
-    required: false
-  },
-  href: {
-    type: null,
-    required: false
-  },
-  external: {
-    type: Boolean,
-    required: false
-  },
-  target: {
-    type: [String, Object, null],
-    required: false
-  },
-  rel: {
-    type: [String, Object, null],
-    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,
-    default: ""
-  },
-  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 nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "raw", "class"));
+<script setup lang="ts">
+import { computed } from 'vue'
+import { isEqual, diff } from 'ohash/utils'
+import { useForwardProps } from 'reka-ui'
+import { reactiveOmit } from '@vueuse/core'
+import { useRoute } from '#imports'
+import B24LinkBase from './LinkBase.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<LinkProps>(), {
+  as: 'button',
+  type: 'button',
+  ariaCurrentValue: 'page',
+  active: undefined,
+  isAction: false,
+  activeClass: '',
+  inactiveClass: ''
+})
+defineSlots<LinkSlots>()
+
+const route = useRoute()
+const nuxtLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'raw', 'class'))
+
 const b24ui = computed(() => tv({
   extend: link,
   variants: {
@@ -141,49 +123,61 @@ const b24ui = computed(() => tv({
       false: props.inactiveClass
     }
   }
-}));
-function isPartiallyEqual(item1, item2) {
+}))
+
+function isPartiallyEqual(item1: any, item2: any) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === "added") {
-      filtered.add(q.key);
+    if (q.type === 'added') {
+      filtered.add(q.key)
     }
-    return filtered;
-  }, /* @__PURE__ */ new Set());
-  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);
+    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)
 }
-function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
-  if (props.active !== void 0) {
-    return props.active;
+
+function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
+  if (props.active !== undefined) {
+    return props.active
   }
-  if (props.exactQuery === "partial") {
-    if (!isPartiallyEqual(linkRoute.query, route.query)) return false;
+
+  if (props.exactQuery === 'partial') {
+    if (!isPartiallyEqual(linkRoute.query, route.query)) return false
   } else if (props.exactQuery === true) {
-    if (!isEqual(linkRoute.query, route.query)) return false;
+    if (!isEqual(linkRoute.query, route.query)) return false
   }
+
   if (props.exactHash && linkRoute.hash !== route.hash) {
-    return false;
+    return false
   }
+
   if (props.exact && isExactActive) {
-    return true;
+    return true
   }
+
   if (!props.exact && isActive) {
-    return true;
+    return true
   }
-  return false;
+
+  return false
 }
-function resolveLinkClass({ route: route2, isActive, isExactActive }) {
-  const active = isLinkActive({ route: route2, isActive, isExactActive });
+
+function resolveLinkClass({ route, isActive, isExactActive }: any) {
+  const active = isLinkActive({ route, isActive, isExactActive })
+
   if (props.raw) {
-    return [props.class, active ? props.activeClass : props.inactiveClass];
+    return [props.class, active ? props.activeClass : props.inactiveClass]
   }
+
   return b24ui.value({
     class: props.class,
     active,
     disabled: props.disabled,
     isAction: Boolean(props.isAction)
-  });
+  })
 }
 </script>
 
@@ -196,34 +190,34 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
     <template v-if="custom">
       <slot
         v-bind="{
-  ...$attrs,
-  ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
-  as,
-  type,
-  disabled,
-  href,
-  navigate,
-  rel,
-  target,
-  isExternal,
-  active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-}"
+          ...$attrs,
+          ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
+          as,
+          type,
+          disabled,
+          href,
+          navigate,
+          rel,
+          target,
+          isExternal,
+          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+        }"
       />
     </template>
     <B24LinkBase
       v-else
       v-bind="{
-  ...$attrs,
-  ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
-  as,
-  type,
-  disabled,
-  href,
-  navigate,
-  rel,
-  target,
-  isExternal
-}"
+        ...$attrs,
+        ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
+        as,
+        type,
+        disabled,
+        href,
+        navigate,
+        rel,
+        target,
+        isExternal
+      }"
       :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
     >
       <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />

package/dist/runtime/components/LinkBase.vue

@@ -1,65 +1,43 @@
-<script>
+<script lang="ts">
+import type { LinkProps } from '../types'
 
+export interface LinkBaseProps {
+  as?: string
+  type?: string
+  disabled?: boolean
+  onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>
+  href?: string
+  navigate?: (e: MouseEvent) => void
+  target?: LinkProps['target']
+  rel?: LinkProps['rel']
+  active?: boolean
+  isExternal?: boolean
+}
 </script>
 
-<script setup>
-const props = defineProps({
-  as: {
-    type: String,
-    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: [String, Object, null],
-    required: false
-  },
-  rel: {
-    type: [String, Object, null],
-    required: false
-  },
-  active: {
-    type: Boolean,
-    required: false
-  },
-  isExternal: {
-    type: Boolean,
-    required: false
-  }
-});
-function onClickWrapper(e) {
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<LinkBaseProps>(), {
+  as: 'button',
+  type: 'button'
+})
+
+function onClickWrapper(e: MouseEvent) {
   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>
@@ -67,18 +45,18 @@ function onClickWrapper(e) {
 <template>
   <Primitive
     v-bind="href ? {
-  'as': 'a',
-  'href': disabled ? void 0 : href,
-  'aria-disabled': disabled ? 'true' : void 0,
-  'role': disabled ? 'link' : void 0,
-  'tabindex': disabled ? -1 : void 0
-} : as === 'button' ? {
-  as,
-  type,
-  disabled
-} : {
-  as
-}"
+      'as': 'a',
+      'href': disabled ? undefined : href,
+      'aria-disabled': disabled ? 'true' : undefined,
+      'role': disabled ? 'link' : undefined,
+      'tabindex': disabled ? -1 : undefined
+    } : as === 'button' ? {
+      as,
+      type,
+      disabled
+    } : {
+      as
+    }"
     :rel="rel"
     :target="target"
     @click="onClickWrapper"