vueless 0.0.512 → 0.0.514

package/ui.container-modal/UModal.vue

@@ -1,110 +1,4 @@
-<template>
-  <transition v-bind="config.overlayTransition">
-    <div v-if="isShownModal" v-bind="overlayAttrs" />
-  </transition>
-
-  <transition v-bind="config.wrapperTransition">
-    <div
-      v-if="isShownModal"
-      :id="elementId"
-      ref="wrapperRef"
-      tabindex="0"
-      v-bind="wrapperAttrs"
-      :data-test="dataTest"
-      @keydown.self.esc="onKeydownEsc"
-    >
-      <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
-        <div v-bind="modalAttrs">
-          <div v-if="isExistHeader" v-bind="headerAttrs">
-            <div v-bind="headerLeftAttrs">
-              <!-- @slot Use it to add something to the left side of the header. -->
-              <slot name="header-left">
-                <!-- @slot Use it to add something before the header title. -->
-                <slot name="before-title" />
-
-                <div v-bind="headerLeftFallbackAttrs">
-                  <ULink
-                    v-if="isShownArrowButton"
-                    size="sm"
-                    color="gray"
-                    :to="backTo"
-                    :label="backLabel"
-                    v-bind="backLinkAttrs"
-                    @click="onClickBackLink"
-                  >
-                    <template #left>
-                      <UIcon
-                        internal
-                        size="xs"
-                        color="gray"
-                        :name="config.defaults.backIcon"
-                        v-bind="backLinkIconAttrs"
-                      />
-                    </template>
-                  </ULink>
-
-                  <UHeader :label="title" size="sm" v-bind="titleAttrs" />
-                  <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
-                </div>
-
-                <!-- @slot Use it to add something after the header title. -->
-                <slot name="after-title" />
-              </slot>
-            </div>
-
-            <div v-bind="headerRightAttrs">
-              <!-- @slot Use it to add something to the right side of the header. -->
-              <slot name="header-right" />
-            </div>
-
-            <div v-if="closeOnCross" v-bind="closeIconAttrs">
-              <!--
-                @slot Use it to add something instead of the close button.
-                @binding {string} icon-name
-              -->
-              <slot name="close-button" :icon-name="config.defaults.closeIcon">
-                <UIcon
-                  internal
-                  interactive
-                  size="sm"
-                  :name="config.defaults.closeIcon"
-                  v-bind="closeIconAttrs"
-                  :data-test="`${dataTest}-close`"
-                  @click="onClickCloseModal"
-                />
-              </slot>
-            </div>
-          </div>
-
-          <div v-bind="bodyAttrs">
-            <!-- @slot Use it to add something into the modal body. -->
-            <slot />
-          </div>
-
-          <UDivider v-if="!isExistFooter || !noDivider" no-border v-bind="dividerSpacingAttrs" />
-
-          <template v-if="isExistFooter">
-            <UDivider v-if="!noDivider" variant="dark" padding="none" v-bind="dividerAttrs" />
-
-            <div v-bind="footerAttrs">
-              <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
-                <!-- @slot Use it to add something to the left side of the footer. -->
-                <slot name="footer-left" />
-              </div>
-
-              <div v-if="hasSlotContent($slots['footer-right'])" v-bind="footerRightAttrs">
-                <!-- @slot Use it to add something to the right side of the footer. -->
-                <slot name="footer-right" />
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, useSlots, watch, ref, useId } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
@@ -114,136 +8,26 @@ import UIcon from "../ui.image-icon/UIcon.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
-import defaultConfig from "./config.js";
-import { UModal } from "./constants.js";
-import useAttrs from "./useAttrs.js";
+import defaultConfig from "./config.ts";
+import { UModal } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UModalProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 const slots = useSlots();
 
 const wrapperRef = ref(null);
 
-const props = defineProps({
-  /**
-   * Set modal state (hidden / shown).
-   */
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Modal title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Modal description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Modal size (width).
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UModal).size,
-  },
-
-  /**
-   * Back link vue-router route object.
-   */
-  backTo: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Back link label.
-   */
-  backLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Allow closing modal by clicking on close cross.
-   */
-  closeOnCross: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModal).closeOnCross,
-  },
-
-  /**
-   * Allow closing modal by clicking on overlay.
-   */
-  closeOnOverlay: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModal).closeOnOverlay,
-  },
-
-  /**
-   * Allow closing modal by pressing escape (esc) on the keyboard.
-   */
-  closeOnEsc: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModal).closeOnEsc,
-  },
-
-  /**
-   * Add extra top margin for modal inside another modal.
-   */
-  inner: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModal).inner,
-  },
-
-  /**
-   * Hide divider between content end footer.
-   */
-  noDivider: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModal).noDivider,
-  },
-
-  /**
-   * Attach small modal to the bottom of the screen (mobile version only).
-   */
-  mobileStickBottom: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModal).mobileStickBottom,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Set data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UModalProps>(), {
+  size: getDefault<UModalProps>(defaultConfig, UModal).size,
+  closeOnCross: getDefault<UModalProps>(defaultConfig, UModal).closeOnCross,
+  closeOnOverlay: getDefault<UModalProps>(defaultConfig, UModal).closeOnOverlay,
+  closeOnEsc: getDefault<UModalProps>(defaultConfig, UModal).closeOnEsc,
+  inner: getDefault<UModalProps>(defaultConfig, UModal).inner,
+  noDivider: getDefault<UModalProps>(defaultConfig, UModal).noDivider,
+  mobileStickBottom: getDefault<UModalProps>(defaultConfig, UModal).mobileStickBottom,
+  dataTest: "",
 });
 
 const emit = defineEmits([
@@ -291,7 +75,7 @@ const isShownModal = computed({
 });
 
 const isShownArrowButton = computed(() => {
-  return !!Object.keys(props.backTo).length;
+  return Object.keys(props.backTo || {}).length > 0;
 });
 
 const isExistHeader = computed(() => {
@@ -342,3 +126,109 @@ function closeModal() {
   isShownModal.value = false;
 }
 </script>
+
+<template>
+  <transition v-bind="config.overlayTransition">
+    <div v-if="isShownModal" v-bind="overlayAttrs" />
+  </transition>
+
+  <transition v-bind="config.wrapperTransition">
+    <div
+      v-if="isShownModal"
+      :id="elementId"
+      ref="wrapperRef"
+      tabindex="0"
+      v-bind="wrapperAttrs"
+      :data-test="dataTest"
+      @keydown.self.esc="onKeydownEsc"
+    >
+      <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
+        <div v-bind="modalAttrs">
+          <div v-if="isExistHeader" v-bind="headerAttrs">
+            <div v-bind="headerLeftAttrs">
+              <!-- @slot Use it to add something to the left side of the header. -->
+              <slot name="header-left">
+                <!-- @slot Use it to add something before the header title. -->
+                <slot name="before-title" />
+
+                <div v-bind="headerLeftFallbackAttrs">
+                  <ULink
+                    v-if="isShownArrowButton"
+                    size="sm"
+                    color="gray"
+                    :to="backTo"
+                    :label="backLabel"
+                    v-bind="backLinkAttrs"
+                    @click="onClickBackLink"
+                  >
+                    <template #left>
+                      <UIcon
+                        internal
+                        size="xs"
+                        color="gray"
+                        :name="config.defaults.backIcon"
+                        v-bind="backLinkIconAttrs"
+                      />
+                    </template>
+                  </ULink>
+
+                  <UHeader :label="title" size="sm" v-bind="titleAttrs" />
+                  <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
+                </div>
+
+                <!-- @slot Use it to add something after the header title. -->
+                <slot name="after-title" />
+              </slot>
+            </div>
+
+            <div v-bind="headerRightAttrs">
+              <!-- @slot Use it to add something to the right side of the header. -->
+              <slot name="header-right" />
+            </div>
+
+            <div v-if="closeOnCross" v-bind="closeIconAttrs">
+              <!--
+                @slot Use it to add something instead of the close button.
+                @binding {string} icon-name
+              -->
+              <slot name="close-button" :icon-name="config.defaults.closeIcon">
+                <UIcon
+                  internal
+                  interactive
+                  size="sm"
+                  :name="config.defaults.closeIcon"
+                  v-bind="closeIconAttrs"
+                  :data-test="`${dataTest}-close`"
+                  @click="onClickCloseModal"
+                />
+              </slot>
+            </div>
+          </div>
+
+          <div v-bind="bodyAttrs">
+            <!-- @slot Use it to add something into the modal body. -->
+            <slot />
+          </div>
+
+          <UDivider v-if="!isExistFooter || !noDivider" no-border v-bind="dividerSpacingAttrs" />
+
+          <template v-if="isExistFooter">
+            <UDivider v-if="!noDivider" variant="dark" padding="none" v-bind="dividerAttrs" />
+
+            <div v-bind="footerAttrs">
+              <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
+                <!-- @slot Use it to add something to the left side of the footer. -->
+                <slot name="footer-left" />
+              </div>
+
+              <div v-if="hasSlotContent($slots['footer-right'])" v-bind="footerRightAttrs">
+                <!-- @slot Use it to add something to the right side of the footer. -->
+                <slot name="footer-right" />
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>

package/ui.container-modal/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.container-modal/storybook/{stories.js → stories.ts}

@@ -8,6 +8,14 @@ import UInput from "../../ui.form-input/UInput.vue";
 import UTextarea from "../../ui.form-textarea/UTextarea.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UModalProps } from "../types.ts";
+
+interface UModalArgs extends UModalProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 /**
  * The `UModal` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-modal)
  */
@@ -29,7 +37,7 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
 const defaultTemplate = `
   <URow>
@@ -40,7 +48,7 @@ const defaultTemplate = `
   <UTextarea class="mb-7" label="Comments" rows="3" />
 `;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UModalArgs> = (args: UModalArgs) => ({
   components: { UModal, URow, UButton, UIcon, UHeader, UInput, UTextarea },
   setup() {
     function onClick() {
@@ -62,17 +70,19 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UModalArgs> = (args: UModalArgs, { argTypes }) => ({
   components: { UModal, UButton, URow, UInput, UTextarea },
   setup() {
-    function onClick(value) {
+    type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
+
+    function onClick(value: ModalSize) {
       args.size = value;
       args.modelValue = true;
     }
 
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
       onClick,
     };
   },
@@ -105,7 +115,7 @@ BackLink.args = {
   backLabel: "back",
   backTo: {
     path: "/",
-    params: {},
+    query: {},
   },
 };
 

package/ui.container-modal/types.ts

@@ -0,0 +1,82 @@
+import defaultConfig from "./config.ts";
+
+import type { RouteLocationRaw } from "vue-router";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UModalProps {
+  /**
+   * Modal state (shown / hidden).
+   */
+  modelValue?: boolean;
+
+  /**
+   * Modal title.
+   */
+  title?: string;
+
+  /**
+   * Modal description.
+   */
+  description?: string;
+
+  /**
+   * Modal size (width).
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
+
+  /**
+   * Back link vue-router route object.
+   */
+  backTo?: RouteLocationRaw;
+
+  /**
+   * Back link label.
+   */
+  backLabel?: string;
+
+  /**
+   * Allow closing modal by clicking on close cross.
+   */
+  closeOnCross?: boolean;
+
+  /**
+   * Allow closing modal by clicking on overlay.
+   */
+  closeOnOverlay?: boolean;
+
+  /**
+   * Allow closing modal by pressing escape (esc) on the keyboard.
+   */
+  closeOnEsc?: boolean;
+
+  /**
+   * Add extra top margin for modal inside another modal.
+   */
+  inner?: boolean;
+
+  /**
+   * Hide divider between content end footer.
+   */
+  noDivider?: boolean;
+
+  /**
+   * Attach small modal to the bottom of the screen (mobile version only).
+   */
+  mobileStickBottom?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.container-modal/useAttrs.ts

@@ -0,0 +1,22 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UModalProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UModalProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(
+    defaultConfig,
+    () => props.config,
+    "wrapper",
+  );
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}