@byyuurin/ui 0.1.0 → 0.3.0

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;