@byyuurin/ui 0.2.0 → 0.3.0

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

@@ -1,7 +1,7 @@
 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 { AnchorHTMLAttributes, ButtonHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
     /**
@@ -19,11 +19,11 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
     /**
      * Where to display the linked URL, as the name for a browsing context.
      */
-    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {});
+    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 & {});
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
     /**
      * If set to true, no rel attribute will be added to the link
      */
@@ -47,8 +47,13 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
      * Escape hatch to disable `prefetch` attribute.
      */
     noPrefetch?: boolean;
+    /**
+     * An option to either add or remove trailing slashes in the `href` for this specific link.
+     * Overrides the global `trailingSlash` option if provided.
+     */
+    trailingSlash?: 'append' | 'remove';
 }
-export interface LinkProps extends ComponentBaseProps, NuxtLinkProps {
+export interface LinkProps extends ComponentBaseProps, Omit<NuxtLinkProps, 'custom'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
      * The element or component this component should render as when not a link.
      * @default "button"
@@ -75,19 +80,24 @@ export interface LinkProps extends ComponentBaseProps, NuxtLinkProps {
     /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
     raw?: boolean;
 }
+/**
+ * Link-related props that can be omitted from ButtonProps when link functionality is not needed.
+ * Use this with `Omit<ButtonProps, LinkPropsKeys>` in components where buttons should not act as links.
+ */
+export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
 export interface LinkSlots {
     default: StaticSlot<{
         active: boolean;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 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

@@ -42,7 +42,7 @@ function onClickWrapper(e) {
 </script>
 
 <template>
-  <Primitive v-bind="linkProps" @click="onClickWrapper">
-    <slot></slot>
-  </Primitive>
+  <Primitive v-bind="linkProps" @click="onClickWrapper">
+    <slot></slot>
+  </Primitive>
 </template>

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

@@ -18,14 +18,14 @@ export interface LinkBaseProps {
     active?: boolean;
     isExternal?: boolean;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
     type: string;
     as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Marquee.vue

@@ -26,11 +26,11 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div v-for="i in props.repeat" :key="i" :class="ui.content({ class: props.ui?.content })" data-part="content">
-      <slot></slot>
-    </div>
-  </Primitive>
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div v-for="i in props.repeat" :key="i" :class="ui.content({ class: props.ui?.content })" data-part="content">
+      <slot></slot>
+    </div>
+  </Primitive>
 </template>
 
 <style>

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

@@ -40,13 +40,13 @@ export interface MarqueeProps extends ComponentBaseProps {
 export interface MarqueeSlots {
     default: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
-    overlay: boolean;
     repeat: number;
     orientation: "horizontal" | "vertical";
+    overlay: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Modal.vue

@@ -57,78 +57,78 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
-    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open"></slot>
-    </DialogTrigger>
-
-    <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="props.overlay" :class="ui.overlay({ class: props.ui?.overlay })" data-part="overlay" />
-
-      <DialogContent
-        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
-        v-bind="contentProps"
-        data-part="content"
-        @after-enter="emit('after-enter')"
-        @after-leave="emit('after-leave')"
-        v-on="contentEvents"
-      >
-        <VisuallyHidden v-if="!!slots.content || !!slots.header || !props.title && !slots.title">
-          <DialogTitle />
-        </VisuallyHidden>
-
-        <slot name="content" :close="close">
-          <div
-            v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
-            :class="ui.header({ class: props.ui?.header })"
-            data-part="header"
-          >
-            <slot name="header" :close="close">
-              <DialogTitle
-                v-if="props.title || slots.title"
-                :class="ui.title({ class: props.ui?.title })"
-                data-part="title"
-              >
-                <slot name="title">
-                  {{ props.title }}
-                </slot>
-              </DialogTitle>
-
-              <DialogClose v-if="props.close || slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
-                  <Button
-                    variant="ghost"
-                    color="neutral"
-                    :icon="props.closeIcon || appConfig.ui.icons.close"
-                    v-bind="typeof props.close === 'boolean' ? {} : props.close"
-                    :aria-label="t('modal.close')"
-                    :class="ui.close({ class: props.ui?.close })"
-                    data-part="close"
-                  />
-                </slot>
-              </DialogClose>
-
-              <DialogDescription
-                v-if="props.description || slots.description"
-                :class="ui.description({ class: props.ui?.description })"
-                data-part="description"
-              >
-                <slot name="description">
-                  {{ props.description }}
-                </slot>
-              </DialogDescription>
-            </slot>
-          </div>
-
-          <div v-if="slots.body" :class="ui.body({ class: props.ui?.body })" data-part="body">
-            <slot name="body" :close="close"></slot>
-          </div>
-
-          <div v-if="slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
-            <slot name="footer" :close="close"></slot>
-          </div>
-        </slot>
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
+  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open"></slot>
+    </DialogTrigger>
+
+    <DialogPortal v-bind="portalProps">
+      <DialogOverlay v-if="props.overlay" :class="ui.overlay({ class: props.ui?.overlay })" data-part="overlay" />
+
+      <DialogContent
+        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
+        v-bind="contentProps"
+        data-part="content"
+        @after-enter="emit('after-enter')"
+        @after-leave="emit('after-leave')"
+        v-on="contentEvents"
+      >
+        <VisuallyHidden v-if="!!slots.content || !!slots.header || !props.title && !slots.title">
+          <DialogTitle />
+        </VisuallyHidden>
+
+        <slot name="content" :close="close">
+          <div
+            v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
+            :class="ui.header({ class: props.ui?.header })"
+            data-part="header"
+          >
+            <slot name="header" :close="close">
+              <DialogTitle
+                v-if="props.title || slots.title"
+                :class="ui.title({ class: props.ui?.title })"
+                data-part="title"
+              >
+                <slot name="title">
+                  {{ props.title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogClose v-if="props.close || slots.close" as-child>
+                <slot name="close" :close="close" :ui="ui">
+                  <Button
+                    variant="ghost"
+                    color="neutral"
+                    :icon="props.closeIcon || appConfig.ui.icons.close"
+                    v-bind="typeof props.close === 'object' ? props.close : {}"
+                    :aria-label="t('modal.close')"
+                    :class="ui.close({ class: props.ui?.close })"
+                    data-part="close"
+                  />
+                </slot>
+              </DialogClose>
+
+              <DialogDescription
+                v-if="props.description || slots.description"
+                :class="ui.description({ class: props.ui?.description })"
+                data-part="description"
+              >
+                <slot name="description">
+                  {{ props.description }}
+                </slot>
+              </DialogDescription>
+            </slot>
+          </div>
+
+          <div v-if="slots.body" :class="ui.body({ class: props.ui?.body })" data-part="body">
+            <slot name="body" :close="close"></slot>
+          </div>
+
+          <div v-if="slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
+            <slot name="footer" :close="close"></slot>
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
 </template>

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

@@ -1,6 +1,6 @@
 import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui';
 import theme from '#build/ui/modal';
-import type { ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, LinkPropsKeys } from '../types';
 import type { EmitsToProps, StaticSlot } from '../types/utils';
 export interface ModalProps extends ComponentBaseProps, DialogRootProps {
     title?: string;
@@ -31,7 +31,7 @@ export interface ModalProps extends ComponentBaseProps, DialogRootProps {
      * Display a close button to dismiss the modal.
      * @default true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /** @default app.icons.close */
     closeIcon?: IconProps['name'];
     /**
@@ -69,6 +69,8 @@ export interface ModalSlots {
         close: () => void;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after-leave": () => any;
@@ -80,15 +82,13 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalP
     "onAfter-enter"?: (() => any) | undefined;
     "onClose-prevent"?: (() => any) | undefined;
 }>, {
-    overlay: boolean;
-    close: boolean | Partial<ButtonProps>;
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     transition: boolean;
+    overlay: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;