vueless 1.0.2-beta.32 → 1.0.2-beta.34

package/directives/clickOutside/storybook/docs.mdx

@@ -6,6 +6,5 @@ import * as stories from "./stories.ts";
 <Title of={stories} />
 <Subtitle of={stories} />
 <Description of={stories} />
-<Primary of={stories}  />
 <Controls of={stories.Default} />
 <Stories of={stories} />

package/directives/clickOutside/storybook/stories.ts

@@ -48,15 +48,15 @@ const DefaultTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArgs
 
     <UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
 
-    <UAlert class="mt-4" variant="outlined">
-      <p>
-        Click on calendar itself will trigger directive callback, use ignore option to prevent this behavior.
-      </p>
-    </UAlert>
+    <UAlert
+      variant="soft"
+      description="Click on calendar itself will trigger directive callback."
+      class="mt-4"
+    />
   `,
 });
 
-const SettingsTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArgs) => ({
+const IgnoreOptionsTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArgs) => ({
   components: { UButton, UCalendar, UAlert },
   directives: { clickOutside },
   setup() {
@@ -98,25 +98,31 @@ const SettingsTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArg
       <UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
     </div>
 
-    <UAlert class="mt-4" variant="outlined">
-      <p>
-        Click on calendar will not trigger directive callback now.
-      </p>
-    </UAlert>
+    <UAlert class="mt-4" variant="soft" description="Click on calendar will not trigger directive callback now." />
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Settings = SettingsTemplate.bind({});
-Settings.args = {};
-
-Settings.parameters = {
+export const IgnoreOptions = IgnoreOptionsTemplate.bind({});
+IgnoreOptions.args = {};
+IgnoreOptions.parameters = {
   docs: {
+    description: {
+      story: `
+This story demonstrates the \`ignore\` option of v-click-outside,
+which prevents the callback when clicking inside specified elements (e.g., the calendar),
+allowing it to stay open during interaction.
+      `,
+    },
     source: {
       code: `
         <UButton @click="toggleCalendar" v-click-outside="[closeCalendar, { ignore: [calendarRef] }]" />
+
+        <div ref="calendar" class="w-fit">
+          <UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
+        </div>
       `,
     },
   },

package/directives/tooltip/storybook/docs.mdx

@@ -6,6 +6,5 @@ import * as stories from "./stories.ts";
 <Title of={stories} />
 <Subtitle of={stories} />
 <Description of={stories} />
-<Primary of={stories}  />
 <Controls of={stories.Default} />
 <Stories of={stories} />

package/directives/tooltip/storybook/stories.ts

@@ -1,9 +1,10 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 import UIcon from "../../../ui.image-icon/UIcon.vue";
-import URow from "../../../ui.container-row/URow.vue";
+import UCol from "../../../ui.container-col/UCol.vue";
 import UAlert from "../../../ui.text-alert/UAlert.vue";
 import ULink from "../../../ui.button-link/ULink.vue";
+import UText from "../../../ui.text-block/UText.vue";
 import tooltip from "../vTooltip.ts";
 
 import type { Props } from "tippy.js";
@@ -33,30 +34,36 @@ const DefaultTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
   `,
 });
 
-const SettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
-  components: { UIcon, URow, UAlert, ULink },
+const TooltipSettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
+  components: { UIcon, UCol, UAlert, ULink, UText },
   directives: { tooltip },
   setup() {
     return { args };
   },
   template: `
-    <URow align="center">
-      <UAlert variant="outlined">
-        <p>
-          See all available settings in <ULink label="Tippy.js docs" href="https://atomiks.github.io/tippyjs/v6/all-props/" underlined />
-        </p>
-      </UAlert>
+    <UCol>
       <UIcon
         interactive
         name="sentiment_satisfied"
-        v-tooltip="{ content: '<b>Tooltip</b>', placement: 'bottom', allowHTML: true, zIndex: 42 }"
+        v-tooltip="{ content: '<b>Tooltip</b>', placement: 'bottom', allowHTML: true }"
       />
-    </URow>
+    </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Settings = SettingsTemplate.bind({});
-Settings.args = {};
+export const TooltipSettings = TooltipSettingsTemplate.bind({});
+TooltipSettings.args = {};
+TooltipSettings.parameters = {
+  docs: {
+    description: {
+      story: `
+This story demonstrates how to pass custom options to the v-tooltip directive,
+including HTML content and tooltip placement. For more settings,
+refer to the <a href="https://atomiks.github.io/tippyjs/v6/all-props/" target="_blank" class="!no-underline">Tippy.js documentation</a>.
+      `,
+    },
+  },
+};

package/icons/storybook/arrow_back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m283.8-445.93 244.18 244.17L480-154.02 154.02-480 480-806.22l47.98 47.98L283.8-514.07h522.42v68.14H283.8Z"/></svg>

package/icons/storybook/arrow_forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M676.2-445.93H154.02v-68.14H676.2L432.02-758.24 480-806.22 806.22-480 480-154.02l-47.98-47.74L676.2-445.93Z"/></svg>

package/icons/storybook/brightness_1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480.03-74.02q-83.46 0-157.54-31.88-74.07-31.88-129.39-87.2-55.32-55.32-87.2-129.36-31.88-74.04-31.88-157.51 0-84.46 31.88-158.54 31.88-74.07 87.16-128.9 55.28-54.84 129.34-86.82 74.06-31.99 157.55-31.99 84.48 0 158.59 31.97 74.1 31.97 128.91 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.6 0 83.5-31.99 157.57-31.98 74.07-86.82 129.36-54.83 55.29-128.87 87.17-74.04 31.88-158.51 31.88Zm-.03-68.13q141.04 0 239.45-98.75 98.4-98.76 98.4-239.1 0-141.04-98.4-239.45-98.41-98.4-239.57-98.4-140.16 0-238.95 98.4-98.78 98.41-98.78 239.57 0 140.16 98.75 238.95 98.76 98.78 239.1 98.78ZM480-480Z"/></svg>

package/icons/storybook/keyboard_tab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M817.85-235.93v-488.14h68.37v488.14h-68.37Zm-345.74 2.67L423.13-281 588.3-445.93H74.02v-68.14H588.3L424.37-679l47.74-47.74L718.85-480 472.11-233.26Z"/></svg>

package/icons/storybook/keyboard_tab_rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.15-235.93H74.02v-488.14h68.13v488.14Zm345.74 2.67L241.15-480l246.74-246.74L535.63-679 371.7-514.07h514.52v68.14H371.7L536.87-281l-48.98 47.74Z"/></svg>

package/package.json

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

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

@@ -200,12 +200,16 @@ describe("UModal", () => {
           },
         });
 
-        const innerWrapper = component.find("[vl-key='innerWrapper']");
+        const overlay = component.find('[vl-key="overlay"]');
 
-        await innerWrapper.trigger("click");
+        expect(overlay.exists()).toBe(true);
+
+        await overlay.trigger("click");
         await sleep(500);
 
-        expect(innerWrapper.exists()).toBe(!value);
+        const modal = component.find('[vl-key="modal"]');
+
+        expect(modal.exists()).toBe(!value);
       });
     });
 
@@ -226,7 +230,9 @@ describe("UModal", () => {
         await wrapper.trigger("keydown", { key: "Escape" });
         await sleep(500);
 
-        expect(component.exists()).toBe(!value);
+        const modal = component.find('[vl-key="modal"]');
+
+        expect(modal.exists()).toBe(!value);
       });
     });
 

package/ui.form-input/UInput.vue

@@ -257,7 +257,6 @@ const {
     :size="size"
     :align="labelAlign"
     centred
-    interactive
     v-bind="inputLabelAttrs"
   >
     <template #label>