vueless 1.3.7-beta.9 → 1.3.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.7-beta.9",
+  "version": "1.3.8-beta.0",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/plugin-vite.js

@@ -33,7 +33,6 @@ import {
   JAVASCRIPT_EXT,
   TYPESCRIPT_EXT,
   INTERNAL_ENV,
-  STORYBOOK_ENV,
   NUXT_MODULE_ENV,
   VUELESS_LOCAL_DIR,
   VUELESS_PACKAGE_DIR,
@@ -67,7 +66,6 @@ export const Vueless = function (options = {}) {
   const { debug, env, include, basePath } = options;
 
   const isInternalEnv = env === INTERNAL_ENV;
-  const isStorybookEnv = env === STORYBOOK_ENV;
   const isNuxtModuleEnv = env === NUXT_MODULE_ENV;
 
   const vuelessSrcDir = isInternalEnv ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
@@ -83,10 +81,9 @@ export const Vueless = function (options = {}) {
 
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
-    if (isInternalEnv || isStorybookEnv) {
-      await removeCustomPropTypes(vuelessSrcDir);
-      await restoreComponents(vuelessSrcDir);
-    }
+    /* remove `.cache` folder in components and restore changes */
+    await removeCustomPropTypes(vuelessSrcDir);
+    await restoreComponents(vuelessSrcDir);
 
     /* remove cached icons */
     await removeIconsCache(basePath);

package/ui.container-card/config.ts

@@ -17,7 +17,7 @@ export default /*tw*/ {
   title: "{UHeader}",
   description: "mt-0.5 font-normal text-lifted",
   footer: {
-    base: "flex justify-between w-full border-t border-muted mt-6 pt-4 md:pt-6",
+    base: "flex justify-between w-full border-muted mt-6 pt-4 md:pt-6",
     variants: {
       variant: {
         solid: "border-muted",
@@ -26,11 +26,16 @@ export default /*tw*/ {
         soft: "border-default/50",
         inverted: "border-default/50",
       },
+      divided: {
+        true: "border-t",
+        false: "mt-0",
+      },
     },
   },
   footerLeft: "",
   footerRight: "",
   defaults: {
     variant: "outlined",
+    divided: true,
   },
 };

package/ui.container-card/storybook/stories.ts

@@ -128,6 +128,17 @@ Description.args = {
 export const Variants = EnumTemplate.bind({});
 Variants.args = { enum: "variant", title: "{enumValue}" };
 
+export const NoDivided = DefaultTemplate.bind({});
+NoDivided.args = {
+  divided: false,
+  slotTemplate: `
+    <template #footer-left>
+      <UButton size="sm" label="Save" variant="subtle" />
+    </template>
+    ${defaultTemplate}
+  `,
+};
+
 export const BeforeTitleSlot = DefaultTemplate.bind({});
 BeforeTitleSlot.args = {
   slotTemplate: `

package/ui.container-card/tests/UCard.test.ts

@@ -62,6 +62,39 @@ describe("UCard", () => {
       });
     });
 
+    it("Divided – shows divider between content and footer when divided is true", () => {
+      const component = mount(UCard, {
+        props: {
+          divided: true,
+        },
+        slots: {
+          "footer-left": "<div>Footer Content</div>",
+        },
+      });
+
+      const footer = component.find("[vl-key='footer']");
+
+      expect(footer.exists()).toBe(true);
+      expect(footer.attributes("class")).toContain("border-t");
+    });
+
+    it("Divided – hides divider between content and footer when divided is false", () => {
+      const component = mount(UCard, {
+        props: {
+          divided: false,
+        },
+        slots: {
+          "footer-left": "<div>Footer Content</div>",
+        },
+      });
+
+      const footer = component.find("[vl-key='footer']");
+
+      expect(footer.exists()).toBe(true);
+      expect(footer.attributes("class")).not.toContain("border-t");
+      expect(footer.attributes("class")).toContain("mt-0");
+    });
+
     it("Data Test – applies data-test attribute", () => {
       const dataTest = "card-test";
 

package/ui.container-card/types.ts

@@ -19,6 +19,11 @@ export interface Props {
    */
   variant?: "solid" | "outlined" | "subtle" | "soft" | "inverted";
 
+  /**
+   * Show divider between content and footer.
+   */
+  divided?: boolean;
+
   /**
    * Component config object.
    */

package/ui.container-drawer/UDrawer.vue

@@ -47,6 +47,7 @@ const isDraggingFromHandle = ref(false);
 const dragStartPosition = ref({ x: 0, y: 0 });
 const dragCurrentPosition = ref({ x: 0, y: 0 });
 const minDragDistance = 10;
+const isMouseDownOnOverlay = ref(false);
 
 const isShownDrawer = computed({
   get: () => props.modelValue,
@@ -180,8 +181,15 @@ function toggleEventListeners() {
   }
 }
 
+function onMouseDownOverlay() {
+  isMouseDownOnOverlay.value = true;
+}
+
 function onClickOutside() {
-  props.closeOnOverlay && closeDrawer();
+  if (!props.closeOnOverlay || !isMouseDownOnOverlay.value) return;
+
+  closeDrawer();
+  isMouseDownOnOverlay.value = false;
 }
 
 function onKeydownEsc(e: KeyboardEvent) {
@@ -312,7 +320,11 @@ const {
       :data-test="getDataTest()"
       @keydown.self.esc="onKeydownEsc"
     >
-      <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
+      <div
+        v-bind="innerWrapperAttrs"
+        @mousedown.self="onMouseDownOverlay"
+        @click.self="onClickOutside"
+      >
         <div
           ref="drawer"
           :style="{ transform: dragTransform }"

package/ui.container-drawer/config.ts

@@ -106,23 +106,23 @@ export default /*tw*/ {
     base: "flex items-center justify-center bg-inherit cursor-grab active:cursor-grabbing select-none",
     variants: {
       position: {
-        top: "w-full h-11",
-        bottom: "w-full h-11",
-        left: "w-11 h-auto",
-        right: "w-11 h-auto",
+        top: "w-full h-6",
+        bottom: "w-full h-6",
+        left: "w-6 h-auto",
+        right: "w-6 h-auto",
       },
     },
   },
   handle: {
     base: "rounded-large cursor-grab active:cursor-grabbing bg-lifted hover:bg-accented transition",
     compoundVariants: [
-      { position: ["top", "bottom"], class: "w-11 h-1.5" },
-      { position: ["left", "right"], class: "w-1.5 h-11" },
+      { position: ["top", "bottom"], class: "w-10 h-1" },
+      { position: ["left", "right"], class: "w-1 h-10" },
     ],
   },
   defaults: {
     variant: "solid",
-    position: "left",
+    position: "right",
     inset: false,
     handle: true,
     closeOnEsc: true,

package/ui.container-drawer/storybook/stories.ts

@@ -137,27 +137,29 @@ const EnumTemplate: StoryFn<UDrawerArgs> = (args: UDrawerArgs, { argTypes }) =>
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { modelValue: true };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = {
+  modelValue: true,
   description: "Enter your email below to get started and create your account.",
 };
 
 export const NoHandle = DefaultTemplate.bind({});
-NoHandle.args = { handle: false };
+NoHandle.args = { modelValue: true, handle: false };
 
 export const Inset = DefaultTemplate.bind({});
-Inset.args = { inset: true };
+Inset.args = { modelValue: true, inset: true };
 
 export const NoCloseOnEscAndOverlay = DefaultTemplate.bind({});
 NoCloseOnEscAndOverlay.args = {
+  modelValue: true,
   closeOnEsc: false,
   closeOnOverlay: false,
 };
 
 export const NoCloseOnCross = DefaultTemplate.bind({});
-NoCloseOnCross.args = { closeOnCross: false };
+NoCloseOnCross.args = { modelValue: true, closeOnCross: false };
 
 export const Position = EnumTemplate.bind({});
 Position.args = { enum: "position", modelValues: {} };
@@ -167,6 +169,7 @@ Variants.args = { enum: "variant", modelValues: {} };
 
 export const BeforeTitleSlot = DefaultTemplate.bind({});
 BeforeTitleSlot.args = {
+  modelValue: true,
   slotTemplate: `
     <template #before-title>
       <UIcon name="account_circle" size="sm" color="primary" />
@@ -179,6 +182,7 @@ BeforeTitleSlot.args = {
 
 export const TitleSlot = DefaultTemplate.bind({});
 TitleSlot.args = {
+  modelValue: true,
   slotTemplate: `
     <template #title="{ title }">
       <UHeader :label="title" color="primary" />
@@ -191,6 +195,7 @@ TitleSlot.args = {
 
 export const AfterTitleSlot = DefaultTemplate.bind({});
 AfterTitleSlot.args = {
+  modelValue: true,
   slotTemplate: `
     <template #after-title>
       <UIcon name="verified" size="sm" color="primary" />
@@ -203,6 +208,7 @@ AfterTitleSlot.args = {
 
 export const ActionsSlot = DefaultTemplate.bind({});
 ActionsSlot.args = {
+  modelValue: true,
   slotTemplate: `
     <template #actions="{ close }">
       <UButton
@@ -221,6 +227,7 @@ ActionsSlot.args = {
 
 export const HandleSlot = DefaultTemplate.bind({});
 HandleSlot.args = {
+  modelValue: true,
   slotTemplate: `
     <template #default>
       ${defaultTemplate}
@@ -233,6 +240,7 @@ HandleSlot.args = {
 
 export const FooterLeftSlot = DefaultTemplate.bind({});
 FooterLeftSlot.args = {
+  modelValue: true,
   slotTemplate: `
     <template #default>
       ${defaultTemplate}
@@ -246,6 +254,7 @@ FooterLeftSlot.args = {
 
 export const FooterRightSlot = DefaultTemplate.bind({});
 FooterRightSlot.args = {
+  modelValue: true,
   slotTemplate: `
     <template #default>
       ${defaultTemplate}

package/ui.container-drawer/tests/UDrawer.test.ts

@@ -165,6 +165,7 @@ describe("UDrawer", () => {
 
         expect(innerWrapper.exists()).toBe(true);
 
+        await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
         await sleep(500);
 
@@ -537,6 +538,7 @@ describe("UDrawer", () => {
 
         const innerWrapper = component.find("[vl-key='innerWrapper']");
 
+        await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
 
         if (value) {
@@ -550,6 +552,27 @@ describe("UDrawer", () => {
       });
     });
 
+    it("CloseOnOverlay – does not close when mousedown on drawer and mouseup on overlay", async () => {
+      const component = mount(UDrawer, {
+        props: {
+          modelValue: true,
+          closeOnOverlay: true,
+        },
+      });
+
+      const drawer = component.find("[vl-key='drawer']");
+      const innerWrapper = component.find("[vl-key='innerWrapper']");
+
+      // Mousedown on drawer content
+      await drawer.trigger("mousedown");
+      // Click (mouseup) on overlay
+      await innerWrapper.trigger("click");
+
+      // Drawer should NOT close
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+      expect(component.emitted("close")).toBeFalsy();
+    });
+
     it("CloseOnEsc – emits events when escape key is pressed based on prop", () => {
       const closeOnEsc = [true, false];
 

package/ui.container-empty/UEmpty.vue

@@ -11,6 +11,8 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
 import type { Props, Config } from "./types";
+import { hasSlotContent } from "../utils/helper";
+import UText from "../ui.text-block/UText.vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -47,6 +49,7 @@ const {
   descriptionAttrs,
   wrapperAttrs,
   headerAttrs,
+  contentAttrs,
   footerAttrs,
   emptyIconWrapperAttrs,
   emptyIconAttrs,
@@ -73,11 +76,19 @@ const {
       @binding {string} description
     -->
     <slot :title="title" :description="description">
-      <UHeader v-if="title" :label="title" v-bind="titleAttrs" />
-      <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
+      <div v-bind="contentAttrs">
+        <UHeader v-if="title" :label="title" v-bind="titleAttrs" />
+        <UText
+          v-if="description"
+          align="center"
+          :size="size"
+          :label="description"
+          v-bind="descriptionAttrs"
+        />
+      </div>
     </slot>
 
-    <div v-bind="footerAttrs">
+    <div v-if="hasSlotContent($slots['footer'])" v-bind="footerAttrs">
       <!-- @slot Use it to add something to the footer. -->
       <slot name="footer" />
     </div>

package/ui.container-empty/config.ts

@@ -1,15 +1,6 @@
 export default /*tw*/ {
-  wrapper: "flex flex-col items-center justify-center size-full",
-  header: {
-    base: "flex justify-center",
-    variants: {
-      size: {
-        sm: "mb-4",
-        md: "mb-5",
-        lg: "mb-6",
-      },
-    },
-  },
+  wrapper: "flex flex-col items-center justify-center gap-4 size-full",
+  header: "flex justify-center",
   emptyIconWrapper: {
     base: "rounded-full bg-inverted/5",
     variants: {
@@ -24,12 +15,13 @@ export default /*tw*/ {
     base: "{UIcon}",
     defaults: {
       size: {
-        sm: "2xl",
+        sm: "xl",
         md: "3xl",
-        lg: "4xl",
+        lg: "5xl",
       },
     },
   },
+  content: "flex flex-col items-center justify-center gap-1.5",
   title: {
     base: "{UHeader}",
     defaults: {
@@ -40,17 +32,8 @@ export default /*tw*/ {
       },
     },
   },
-  description: {
-    base: "text-center mt-2",
-    variants: {
-      size: {
-        sm: "text-small",
-        md: "text-medium",
-        lg: "text-large",
-      },
-    },
-  },
-  footer: "mt-4 flex justify-center",
+  description: "{UText}",
+  footer: "flex justify-center",
   defaults: {
     size: "md",
     /* icons */

package/ui.container-empty/storybook/stories.ts

@@ -30,6 +30,7 @@ export default {
   component: UEmpty,
   args: {
     title: "No contacts",
+    description: "There are no contacts in the list.",
   },
   argTypes: {
     ...getArgTypes(UEmpty.__name),
@@ -68,9 +69,6 @@ const EnumTemplate: StoryFn<UEmptyArgs> = (args: UEmptyArgs, { argTypes }) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "There are no contacts in the list." };
-
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 

package/ui.container-empty/tests/UEmpty.test.ts

@@ -11,9 +11,9 @@ describe("UEmpty.vue", () => {
   describe("Props", () => {
     it("Size – applies the correct size class", async () => {
       const size = {
-        sm: "2xl",
+        sm: "xl",
         md: "3xl",
-        lg: "4xl",
+        lg: "5xl",
       };
 
       Object.entries(size).forEach(([size, value]) => {

package/ui.container-modal/UModal.vue

@@ -49,6 +49,7 @@ const slots = useSlots();
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
 const isWrapperTransitionComplete = ref(false);
+const isMouseDownOnOverlay = ref(false);
 
 const isShownModal = computed({
   get: () => props.modelValue,
@@ -153,8 +154,15 @@ function onClickBackLink() {
   emit("back");
 }
 
+function onMouseDownOverlay() {
+  isMouseDownOnOverlay.value = true;
+}
+
 function onClickOutside() {
-  props.closeOnOverlay && closeModal();
+  if (!props.closeOnOverlay || !isMouseDownOnOverlay.value) return;
+
+  closeModal();
+  isMouseDownOnOverlay.value = false;
 }
 
 function onKeydownEsc(e: KeyboardEvent) {
@@ -229,7 +237,11 @@ const {
       :data-test="getDataTest()"
       @keydown.self.esc="onKeydownEsc"
     >
-      <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
+      <div
+        v-bind="innerWrapperAttrs"
+        @mousedown.self="onMouseDownOverlay"
+        @click.self="onClickOutside"
+      >
         <div v-bind="modalAttrs">
           <div v-if="isExistHeader" v-bind="headerAttrs">
             <div v-bind="beforeTitleAttrs">

package/ui.container-modal/config.ts

@@ -18,7 +18,7 @@ export default /*tw*/ {
     leaveToClass: "opacity-0",
   },
   innerWrapper: {
-    base: "py-12 w-full h-screen scroll-container [scrollbar-gutter:stable]",
+    base: "py-12 w-full h-max scroll-container [scrollbar-gutter:stable]",
     variants: {
       wrapperTransitionCompleted: {
         true: "overflow-y-auto",

package/ui.container-modal/tests/UModal.test.ts

@@ -200,11 +200,12 @@ describe("UModal", () => {
           },
         });
 
-        const overlay = component.find('[vl-key="overlay"]');
+        const innerWrapper = component.find('[vl-key="innerWrapper"]');
 
-        expect(overlay.exists()).toBe(true);
+        expect(innerWrapper.exists()).toBe(true);
 
-        await overlay.trigger("click");
+        await innerWrapper.trigger("mousedown");
+        await innerWrapper.trigger("click");
         await sleep(500);
 
         const modal = component.find('[vl-key="modal"]');
@@ -590,6 +591,7 @@ describe("UModal", () => {
 
         const innerWrapper = component.find("[vl-key='innerWrapper']");
 
+        await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
 
         if (value) {
@@ -603,6 +605,27 @@ describe("UModal", () => {
       });
     });
 
+    it("does not close when mousedown on modal and mouseup on overlay", async () => {
+      const component = mount(UModal, {
+        props: {
+          modelValue: true,
+          closeOnOverlay: true,
+        },
+      });
+
+      const modal = component.find("[vl-key='modal']");
+      const innerWrapper = component.find("[vl-key='innerWrapper']");
+
+      // Mousedown on modal content
+      await modal.trigger("mousedown");
+      // Click (mouseup) on overlay
+      await innerWrapper.trigger("click");
+
+      // Modal should NOT close
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+      expect(component.emitted("close")).toBeFalsy();
+    });
+
     // CloseOnEsc events
     it("emits events when escape key is pressed based on closeOnEsc prop", () => {
       const closeOnEsc = [true, false];

package/ui.image-icon/UIcon.vue

@@ -4,7 +4,7 @@ import { cachedIcons } from "virtual:vueless/icons";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
-import { ICONS_CACHED_DIR, INTERNAL_ICONS_LIBRARY, STORYBOOK_ICONS_LIBRARY } from "../constants";
+import { INTERNAL_ICONS_LIBRARY, STORYBOOK_ICONS_LIBRARY } from "../constants";
 
 import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
@@ -33,15 +33,15 @@ const dynamicComponent = computed(() => {
   let userLibrary = config.value.defaults.library;
 
   const isInternalIconExists = cachedIcons.find(([path]: [string]) =>
-    path.includes(`${ICONS_CACHED_DIR}/${INTERNAL_ICONS_LIBRARY}/${props.name}.svg`),
+    path.includes(`${INTERNAL_ICONS_LIBRARY}/${props.name}.svg`),
   );
 
   const isStorybookIconExists = cachedIcons.find(([path]: [string]) =>
-    path.includes(`${ICONS_CACHED_DIR}/${STORYBOOK_ICONS_LIBRARY}/${props.name}.svg`),
+    path.includes(`${STORYBOOK_ICONS_LIBRARY}/${props.name}.svg`),
   );
 
   const isExternalIconExists = cachedIcons.find(([path]: [string]) =>
-    path.includes(`${ICONS_CACHED_DIR}/${userLibrary}/${props.name}.svg`),
+    path.includes(`${userLibrary}/${props.name}.svg`),
   );
 
   if (isInternalIconExists && !isExternalIconExists) {
@@ -67,9 +67,7 @@ const dynamicComponent = computed(() => {
   if (!name) return "";
 
   const [, component] =
-    cachedIcons.find(([path]: [string]) =>
-      path.includes(`${ICONS_CACHED_DIR}/${userLibrary}/${props.name}.svg`),
-    ) || [];
+    cachedIcons.find(([path]: [string]) => path.includes(`${userLibrary}/${props.name}.svg`)) || [];
 
   if (!component) return "";
 

package/ui.navigation-pagination/UPagination.vue

@@ -27,10 +27,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when current page changes.
+   * Triggers when the current page changes.
    * @property {number} value
    */
   "update:modelValue",
+  /**
+   * Triggers when pagination is changed.
+   * @property {number} value
+   */
+  "change",
 ]);
 
 const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
@@ -45,6 +50,7 @@ const currentPage = computed({
   get: () => props.modelValue,
   set: (value) => {
     emit("update:modelValue", value);
+    emit("change", value);
   },
 });
 

package/ui.navigation-pagination/tests/UPagination.test.ts

@@ -378,6 +378,29 @@ describe("UPagination.vue", () => {
       await buttons[buttons.length - 1].trigger("click");
       expect(component.emitted("update:modelValue")?.[3]).toEqual([10]);
     });
+
+    it("Change – emits change event when page is changed", async () => {
+      const component = mount(UPagination, {
+        props: {
+          modelValue: 1,
+          total: 100,
+          perPage: 10,
+        },
+      });
+
+      // Find the second page button and click it
+      const pageButtons = component.findAllComponents(UButton).filter((button) => {
+        const text = button.text();
+
+        return text && !isNaN(Number(text));
+      });
+
+      // Second button
+      await pageButtons[1].trigger("click");
+
+      expect(component.emitted("change")).toBeTruthy();
+      expect(component.emitted("change")?.[0]).toEqual([2]); // Second button value
+    });
   });
 
   describe("Exposed refs", () => {

package/ui.text-key/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook";
+
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />