vueless 1.0.2-beta.51 → 1.0.2-beta.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.51",
+  "version": "1.0.2-beta.52",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.container-col/UCol.vue

@@ -14,12 +14,12 @@ withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
-const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLElement>("wrapper");
 
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
-   * @property {HTMLDivElement}
+   * @property {HTMLElement}
    */
   wrapperRef,
 });
@@ -33,8 +33,8 @@ const { getDataTest, wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()">
+  <component :is="tag" ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to add something inside. -->
     <slot />
-  </div>
+  </component>
 </template>

package/ui.container-col/config.ts

@@ -57,6 +57,7 @@ export default /*tw*/ {
     align: "start",
     content: "start",
     justify: "start",
+    tag: "div",
     wrap: false,
     reverse: false,
     block: false,

package/ui.container-col/tests/UCol.test.ts

@@ -148,6 +148,21 @@ describe("UCol.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
+    // Tag prop
+    it("renders the correct HTML tag", () => {
+      const tags = ["div", "section", "article", "main", "aside", "nav", "span"];
+
+      tags.forEach((tag) => {
+        const component = mount(UCol, {
+          props: {
+            tag,
+          },
+        });
+
+        expect(component.element.tagName.toLowerCase()).toBe(tag);
+      });
+    });
+
     // DataTest prop
     it("applies the correct data-test attribute", () => {
       const dataTest = "col-test";

package/ui.container-col/types.ts

@@ -49,6 +49,11 @@ export interface Props {
    */
   block?: boolean;
 
+  /**
+   * Allows changing HTML tag.
+   */
+  tag?: string;
+
   /**
    * Component config object.
    */

package/ui.container-modal/UModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots, watch, useId, useTemplateRef, nextTick } from "vue";
+import { computed, useSlots, watch, useId, useTemplateRef, nextTick, ref } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -48,6 +48,8 @@ const slots = useSlots();
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
+const isWrapperTransitionComplete = ref(false);
+
 const isShownModal = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -114,6 +116,8 @@ function onChangeShownModal(newValue: boolean) {
 
   if (newValue) {
     nextTick(() => wrapperRef.value?.focus());
+  } else {
+    isWrapperTransitionComplete.value = false;
   }
 }
 
@@ -173,6 +177,11 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
+const mutatedProps = computed(() => ({
+  /* component state, not a props */
+  wrapperTransitionCompleted: isWrapperTransitionComplete.value,
+}));
+
 const {
   getDataTest,
   config,
@@ -194,7 +203,7 @@ const {
   closeButtonAttrs,
   beforeTitleAttrs,
   titleFallbackAttrs,
-} = useUI<Config>(defaultConfig);
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -202,7 +211,11 @@ const {
     <div v-if="isShownModal" v-bind="overlayAttrs" />
   </Transition>
 
-  <Transition v-bind="config.wrapperTransition">
+  <Transition
+    v-bind="config.wrapperTransition"
+    @after-enter="isWrapperTransitionComplete = true"
+    @leave="isWrapperTransitionComplete = false"
+  >
     <div
       v-if="isShownModal"
       :id="elementId"

package/ui.container-modal/config.ts

@@ -17,7 +17,15 @@ export default /*tw*/ {
     leaveFromClass: "opacity-100",
     leaveToClass: "opacity-0",
   },
-  innerWrapper: "py-12 w-full h-full overflow-auto",
+  innerWrapper: {
+    base: "py-12 w-full h-screen scroll-container [scrollbar-gutter:stable]",
+    variants: {
+      wrapperTransitionCompleted: {
+        true: "overflow-y-auto",
+        false: "overflow-y-hidden",
+      },
+    },
+  },
   header: "flex justify-between px-4 md:px-6 py-6",
   beforeTitle: "flex items-center gap-3",
   titleFallback: "flex flex-col",

package/ui.container-row/URow.vue

@@ -15,12 +15,12 @@ withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
-const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLElement>("wrapper");
 
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
-   * @property {HTMLDivElement}
+   * @property {HTMLElement}
    */
   wrapperRef,
 });
@@ -33,8 +33,8 @@ const { getDataTest, wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()">
+  <component :is="tag" ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to add something inside. -->
     <slot />
-  </div>
+  </component>
 </template>

package/ui.container-row/config.ts

@@ -55,6 +55,7 @@ export default /*tw*/ {
     align: "start",
     content: "start",
     justify: "start",
+    tag: "div",
     wrap: false,
     block: false,
     reverse: false,

package/ui.container-row/tests/URow.test.ts

@@ -146,6 +146,21 @@ describe("URow.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
+    // Tag prop
+    it("renders the correct HTML tag", () => {
+      const tags = ["div", "section", "article", "main", "aside", "nav", "span"];
+
+      tags.forEach((tag) => {
+        const component = mount(URow, {
+          props: {
+            tag,
+          },
+        });
+
+        expect(component.element.tagName.toLowerCase()).toBe(tag);
+      });
+    });
+
     // DataTest prop
     it("applies the correct data-test attribute", () => {
       const dataTest = "test-row";

package/ui.container-row/types.ts

@@ -49,6 +49,11 @@ export interface Props {
    */
   block?: boolean;
 
+  /**
+   * Allows changing HTML tag.
+   */
+  tag?: string;
+
   /**
    * Component config object.
    */