vueless 0.0.631 → 0.0.633

package/directives/clickOutside/storybook/stories.ts

@@ -107,7 +107,7 @@ const SettingsTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArg
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { callback: () => undefined };
+Default.args = {};
 
 export const Settings = SettingsTemplate.bind({});
 Settings.args = {};

package/directives/tooltip/storybook/stories.ts

@@ -2,6 +2,8 @@ import type { Meta, StoryFn } from "@storybook/vue3";
 
 import UIcon from "../../../ui.image-icon/UIcon.vue";
 import URow from "../../../ui.container-row/URow.vue";
+import UAlert from "../../../ui.text-alert/UAlert.vue";
+import ULink from "../../../ui.button-link/ULink.vue";
 import tooltip from "../vTooltip.ts";
 
 import type { Props } from "tippy.js";
@@ -10,11 +12,6 @@ interface VTooltipArgs {
   tooltipOptions: Partial<Props> | string;
 }
 
-interface VTooltipEnumArgs extends VTooltipArgs {
-  enum: keyof Props;
-  options: unknown[];
-}
-
 /**
  * The `v-tooltip` directive. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/directives/tooltip)
  */
@@ -32,70 +29,34 @@ const DefaultTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
     return { args };
   },
   template: `
-    <UIcon interactive name="sentiment_satisfied" v-tooltip="args.tooltipOptions" />
+    <UIcon interactive name="sentiment_satisfied" v-tooltip="'Tooltip'" />
   `,
 });
 
-const EnumTemplate: StoryFn<VTooltipEnumArgs> = (args: VTooltipEnumArgs) => ({
-  components: { UIcon, URow },
+const SettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
+  components: { UIcon, URow, UAlert, ULink },
   directives: { tooltip },
   setup() {
     return { args };
   },
   template: `
-    <URow>
-      <UIcon
-        v-for="option in args.options"
-        interactive
-        name="sentiment_satisfied"
-        v-tooltip="{ content: option, ...args.tooltipOptions, [args.enum]: option }"
+    <URow align="center">
+      <UAlert variant="secondary">
+        <p>
+          See all available settings in <ULink label="Tippy.js docs" href="https://atomiks.github.io/tippyjs/v6/all-props/" underlined />
+        </p>
+      </UAlert>
+      <UIcon 
+        interactive 
+        name="sentiment_satisfied" 
+        v-tooltip="{ content: '<b>Tooltip</b>', placement: 'bottom', allowHTML: true, zIndex: 42 }" 
       />
     </URow>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { tooltipOptions: "Tooltip" };
+Default.args = {};
 
-export const Settings = DefaultTemplate.bind({});
-Settings.args = { tooltipOptions: { content: "Tooltip", placement: "right" } };
-
-Settings.parameters = {
-  docs: {
-    source: {
-      // Do not break this line, this will lead to wrong formatting.
-      code: `<UIcon interactive name="sentiment_satisfied" v-tooltip="{ content: 'Tooltip', placement: 'right' }">`,
-    },
-  },
-};
-
-export const Placement = EnumTemplate.bind({});
-Placement.args = {
-  tooltipOptions: {},
-  enum: "placement",
-  options: [
-    "top",
-    "top-start",
-    "top-end",
-    "right",
-    "right-start",
-    "right-end",
-    "bottom",
-    "bottom-start",
-    "bottom-end",
-    "left",
-    "left-start",
-    "left-end",
-    "auto",
-    "auto-start",
-    "auto-end",
-  ],
-};
-
-Placement.parameters = {
-  docs: {
-    source: {
-      code: `<UIcon interactive name="sentiment_satisfied" v-tooltip="{ content: 'top', placement: 'top' }">`,
-    },
-  },
-};
+export const Settings = SettingsTemplate.bind({});
+Settings.args = {};

package/package.json

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

package/ui.form-textarea/UTextarea.vue

@@ -204,17 +204,17 @@ const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs,
     v-bind="textareaLabelAttrs"
     :data-test="dataTest"
   >
-    <label
-      v-if="hasSlotContent($slots['left'])"
-      ref="leftSlotWrapperRef"
-      :for="elementId"
-      v-bind="leftSlotAttrs"
-    >
-      <!-- @slot Use it to add something before the text. -->
-      <slot name="left" />
-    </label>
-
     <label ref="textareaWrapperRef" :for="elementId" v-bind="textareaWrapperAttrs">
+      <div
+        v-if="hasSlotContent($slots['left'])"
+        ref="leftSlotWrapperRef"
+        :for="elementId"
+        v-bind="leftSlotAttrs"
+      >
+        <!-- @slot Use it to add something before the text. -->
+        <slot name="left" />
+      </div>
+
       <textarea
         :id="elementId"
         ref="textareaRef"
@@ -235,11 +235,11 @@ const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs,
         @keydown.enter="onEnter"
         @keydown.delete="onBackspace"
       />
-    </label>
 
-    <label v-if="hasSlotContent($slots['right'])" :for="elementId" v-bind="rightSlotAttrs">
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
+      <div v-if="hasSlotContent($slots['right'])" :for="elementId" v-bind="rightSlotAttrs">
+        <!-- @slot Use it to add something after the text. -->
+        <slot name="right" />
+      </div>
     </label>
   </ULabel>
 </template>

package/ui.form-textarea/config.ts

@@ -1,10 +1,10 @@
 export default /*tw*/ {
   textareaLabel: "{ULabel}",
-  leftSlot: "flex items-center justify-center whitespace-nowrap pl-2.5 gap-1 rounded-dynamic rounded-r-none",
-  rightSlot: "flex items-center justify-center whitespace-nowrap pr-2.5 gap-1 rounded-dynamic rounded-l-none",
+  leftSlot: "flex items-center justify-center whitespace-nowrap pr-2.5 gap-1 rounded-dynamic rounded-r-none",
+  rightSlot: "flex items-center justify-center whitespace-nowrap pl-2.5 gap-1 rounded-dynamic rounded-l-none",
   textareaWrapper: {
     base: `
-      px-3 py-2 bg-white transition w-full
+      flex px-3 py-2 bg-white transition w-full
       rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic
       focus-within:ring-brand-700/15 focus-within:outline-none
@@ -24,11 +24,6 @@ export default /*tw*/ {
           `,
       },
     },
-    compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
-    ],
   },
   textarea: {
     base: `
@@ -49,6 +44,11 @@ export default /*tw*/ {
         true: "placeholder:text-red-300",
       },
     },
+    compoundVariants: [
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
+    ],
   },
   defaults: {
     rows: "3",