vueless 0.0.658 → 0.0.660

package/package.json

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

package/ui.button-toggle/UToggle.vue

@@ -82,6 +82,7 @@ const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig)
     :description="description"
     :align="labelAlign"
     :disabled="disabled"
+    :error="error"
     centred
     v-bind="toggleLabelAttrs"
     :data-test="dataTest"

package/ui.button-toggle/storybook/stories.ts

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -10,6 +10,7 @@ import UToggle from "../../ui.button-toggle/UToggle.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -24,12 +25,13 @@ export default {
   title: "Buttons & Links / Toggle",
   component: UToggle,
   args: {
+    label: "Please choose an option",
     modelValue: "11",
     options: [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
+      { value: "11", label: "Admin" },
+      { value: "12", label: "Editor" },
+      { value: "13", label: "Viewer" },
+      { value: "14", label: "Guest" },
     ],
   },
   argTypes: {
@@ -44,14 +46,26 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
-  components: { UToggle, UIcon, UToggleItem },
+  components: { UToggle, UIcon, UToggleItem, UBadge },
   setup() {
     const slots = getSlotNames(UToggle.__name);
+    const modelValueRef = ref(args.modelValue);
+    const error = computed(() => {
+      if (args.name === "error" && Array.isArray(modelValueRef.value)) {
+        return modelValueRef.value?.length === 0 ? "Please select at least one option" : "";
+      }
 
-    return { args, slots };
+      return "";
+    });
+
+    return { args, slots, modelValueRef, error };
   },
   template: `
-    <UToggle v-bind="args" v-model="args.modelValue">
+    <UToggle
+      v-bind="args"
+      v-model="modelValueRef"
+      :error="error"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </UToggle>
   `,
@@ -60,11 +74,11 @@ const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
 const EnumVariantTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes }) => ({
   components: { UToggle, URow },
   setup() {
-    const value = ref("");
+    const values = ref(["2xs", "xs", "sm", "md", "lg", "xl"]);
 
     return {
       args,
-      value,
+      values,
       options: argTypes?.[args.enum]?.options,
     };
   },
@@ -74,13 +88,14 @@ const EnumVariantTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="value"
+        v-model="values[option]"
         :[args.enum]="option"
         :label="option"
         :options="[
           { value: option + 1, label: option },
           { value: option + 2, label: option },
         ]"
+        class="w-auto"
       />
     </URow>
   `,
@@ -94,24 +109,35 @@ Default.args = {
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = {
   name: "Disabled",
-  disabled: true,
+  label: "You can disable the whole toggle or specific items",
+  options: [
+    { value: "11", label: "Admin" },
+    { value: "12", label: "Editor", disabled: true },
+    { value: "13", label: "Viewer" },
+    { value: "14", label: "Guest", disabled: true },
+  ],
 };
 
-export const Label = DefaultTemplate.bind({});
-Label.args = {
-  name: "Label",
-  label: "Label",
-  description: "description",
-};
+export const Description = DefaultTemplate.bind({});
+Description.args = { name: "Description", description: "You can also add description" };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = {
-  name: "sizeTemplate",
-  enum: "size",
-};
+Sizes.args = { name: "sizeTemplate", enum: "size" };
 
 export const Multiple = DefaultTemplate.bind({});
-Multiple.args = { name: "multipleTemplate", multiple: true };
+Multiple.args = {
+  name: "multiple",
+  multiple: true,
+  label: "You can choose more than one option",
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+  name: "error",
+  multiple: true,
+  modelValue: [],
+  label: "If no option is selected, error message is displayed",
+};
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { name: "block", block: true };
@@ -126,6 +152,7 @@ export const Square = DefaultTemplate.bind({});
 Square.args = {
   name: "square",
   square: true,
+  label: "Square prop is useful when icons are present",
   slotTemplate: `
     <template #default>
       <UToggleItem value="1">
@@ -143,14 +170,21 @@ Square.args = {
   `,
 };
 
-export const SlotDefault = DefaultTemplate.bind({});
-SlotDefault.args = {
-  name: "slotDefault",
+export const DefaultSlot = DefaultTemplate.bind({});
+DefaultSlot.args = {
+  name: "defaultSlot",
+  label: "Please select an operation to proceed",
   slotTemplate: `
     <template #default>
-      <UToggleItem label="label 1" value="1" />
-      <UToggleItem label="label 2" value="2" />
-      <UToggleItem label="label 3" value="3" />
+      <UToggleItem value="1">
+        <UBadge label="Download" color="green" right-icon="download" />
+      </UToggleItem>
+      <UToggleItem value="2">
+        <UBadge label="Edit" color="amber" right-icon="edit" />
+      </UToggleItem>
+      <UToggleItem value="3">
+        <UBadge label="Delete" color="red" right-icon="delete" />
+      </UToggleItem>
     </template>
   `,
 };

package/ui.button-toggle/types.ts

@@ -26,6 +26,11 @@ export interface Props {
    */
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
+  /**
+   * Error message.
+   */
+  error?: string;
+
   /**
    * Label placement.
    */

package/ui.button-toggle-item/storybook/stories.ts

@@ -7,6 +7,7 @@ import {
 
 import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -58,26 +59,32 @@ Default.args = {};
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="star"
-        color="green"
-      />
-    </template>
-  `,
-};
+export const Slots: StoryFn<UToggleItemArgs> = (args) => ({
+  components: { UToggleItem, UIcon, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+  <URow>
+    <UToggleItem label="Download">
+      <template #left>
+        <UIcon
+          name="download"
+          color="green"
+          size="sm"
+        />
+      </template>
+    </UToggleItem>
 
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon
-        name="star"
-        color="green"
-      />
-    </template>
+    <UToggleItem label="Edit">
+      <template #right>
+        <UIcon
+          name="edit"
+          color="orange"
+          size="sm"
+        />
+      </template>
+    </UToggleItem>
+  </URow>
   `,
-};
+});

package/ui.dropdown-button/UDropdownButton.vue

@@ -110,7 +110,7 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
           @slot Use it to add something after the label.
           @binding {boolean} opened
         -->
-        <slot name="right" :opened="isShownOptions">
+        <slot name="toggle" :opened="isShownOptions">
           <UIcon
             v-if="!noIcon"
             internal

package/ui.dropdown-button/storybook/stories.ts

@@ -9,6 +9,7 @@ import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -18,7 +19,7 @@ interface DefaultUDropdownButtonArgs extends Props {
 }
 
 interface EnumUDropdownButtonArgs extends DefaultUDropdownButtonArgs {
-  enum: keyof Pick<Props, "size" | "variant">;
+  enum: keyof Pick<Props, "size" | "variant" | "xPosition" | "yPosition">;
 }
 
 export default {
@@ -36,7 +37,7 @@ export default {
     docs: {
       ...getDocsDescription(UDropdownButton.__name),
       story: {
-        height: "200px",
+        height: "250px",
       },
     },
   },
@@ -45,7 +46,7 @@ export default {
 const DefaultTemplate: StoryFn<DefaultUDropdownButtonArgs> = (
   args: DefaultUDropdownButtonArgs,
 ) => ({
-  components: { UDropdownButton, UIcon },
+  components: { UDropdownButton, UIcon, ULink },
   setup() {
     const slots = getSlotNames(UDropdownButton.__name);
 
@@ -122,19 +123,35 @@ Variants.args = { enum: "variant" };
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const DropdownListXPosition = EnumVariantTemplate.bind({});
+DropdownListXPosition.args = { enum: "xPosition" };
+
+export const DropdownListYPosition = EnumVariantTemplate.bind({});
+DropdownListYPosition.args = { enum: "yPosition" };
+
 export const VariantColors = VariantColorsTemplate.bind({});
 VariantColors.args = {};
 
 export const WithoutDropdownIcon = EnumVariantTemplate.bind({});
 WithoutDropdownIcon.args = { enum: "variant", noIcon: true };
 
+export const CustomDropdownIcon = DefaultTemplate.bind({});
+CustomDropdownIcon.args = {
+  config: {
+    defaults: {
+      dropdownIcon: "expand_circle_down",
+    },
+  },
+};
+
 export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   slotTemplate: `
     <template #default>
-      Custom label
+      <UIcon name="unfold_more" color="white" />
     </template>
   `,
+  noIcon: true,
 };
 
 export const LeftSlot = DefaultTemplate.bind({});
@@ -142,22 +159,22 @@ LeftSlot.args = {
   slotTemplate: `
     <template #left>
       <UIcon
-        name="archive"
-        color="red"
+        name="heart_plus"
         size="sm"
+        color="green"
       />
     </template>
   `,
 };
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
+export const SlotToggle = DefaultTemplate.bind({});
+SlotToggle.args = {
   slotTemplate: `
-    <template #right>
-      <UIcon
-        name="archive"
-        color="red"
-        size="sm"
+    <template #toggle="{ opened }">
+      <ULink
+        :label="opened ? 'collapse' : 'expand'"
+        color="green"
+        :ring=false
       />
     </template>
   `,

package/ui.form-input/UInput.vue

@@ -198,8 +198,10 @@ function transformValue(value: string | number, exp: string | RegExp) {
   return matches ? matches.join("") : "";
 }
 
-useMutationObserver(leftSlotWrapperRef, (mutations) => {
-  mutations.forEach(setLabelPosition);
+useMutationObserver(leftSlotWrapperRef, (mutations) => mutations.forEach(setLabelPosition), {
+  childList: true,
+  characterData: true,
+  subtree: true,
 });
 
 function setLabelPosition() {

package/ui.form-select/USelect.vue

@@ -423,9 +423,9 @@ const {
   rightSlotAttrs,
   leftIconAttrs,
   rightIconAttrs,
-  beforeCaretAttrs,
-  afterCaretAttrs,
-  toggleAttrs,
+  beforeToggleAttrs,
+  afterToggleAttrs,
+  toggleWrapperAttrs,
   clearAttrs,
   clearMultipleTextAttrs,
   clearMultipleAttrs,
@@ -487,17 +487,21 @@ const {
         </slot>
       </div>
 
-      <div v-if="hasSlotContent($slots['after-caret'])" v-bind="afterCaretAttrs" :tabindex="-1">
+      <div
+        v-if="hasSlotContent($slots['after-toggle']) && !(multiple && localValue?.length)"
+        v-bind="afterToggleAttrs"
+        :tabindex="-1"
+      >
         <!--
-          @slot Use it to add something after caret.
+          @slot Use it to add something after toggle.
           @binding {object} option
         -->
-        <slot :option="localValue" name="after-caret" />
+        <slot :option="localValue" name="after-toggle" />
       </div>
 
       <div
         v-show="!multiple || (!isLocalValue && multiple)"
-        v-bind="toggleAttrs"
+        v-bind="toggleWrapperAttrs"
         :tabindex="-1"
         @mousedown.prevent.stop="toggle"
       >
@@ -539,14 +543,14 @@ const {
       </div>
 
       <div
-        v-if="hasSlotContent($slots['before-caret']) && !(multiple && localValue?.length)"
-        v-bind="beforeCaretAttrs"
+        v-if="hasSlotContent($slots['before-toggle']) && !(multiple && localValue?.length)"
+        v-bind="beforeToggleAttrs"
       >
         <!--
-          @slot Use it to add something before caret.
+          @slot Use it to add something before toggle.
           @binding {object} option
         -->
-        <slot :option="localValue" name="before-caret" />
+        <slot :option="localValue" name="before-toggle" />
       </div>
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">

package/ui.form-select/config.ts

@@ -78,10 +78,10 @@ export default /*tw*/ {
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
   leftSlot: "pr-1.5",
-  rightSlot: "{>caret} pr-3",
-  beforeCaret: "{>caret}",
-  afterCaret: "{>caret} mr-3 items-start pt-3",
-  caret: {
+  rightSlot: "{>toggle} pr-3",
+  beforeToggle: "{>toggle}",
+  afterToggle: "{>toggle} mr-3 items-start pt-3",
+  toggle: {
     base: "flex items-center",
     compoundVariants: [
       { labelAlign: "topInside", size: "sm", label: true, class: "-mt-5" },
@@ -89,9 +89,9 @@ export default /*tw*/ {
       { labelAlign: "topInside", size: "lg", label: true, class: "-mt-7" },
     ],
   },
-  toggle: "{>caret} mr-3",
+  toggleWrapper: "{>toggle} mr-3",
   toggleIcon: "{UIcon} {>selectIcon} transition duration-300 group-[]/active:rotate-180",
-  clear: "{>caret}",
+  clear: "{>toggle}",
   clearIcon: "{UIcon} {>selectIcon}",
   clearMultiple: "flex items-center",
   clearMultipleIcon: "{UIcon} {>selectIcon}",

package/ui.form-select/storybook/stories.ts

@@ -250,19 +250,19 @@ SlotOption.args = {
   `,
 };
 
-export const SlotAfterCaret = DefaultTemplate.bind({});
-SlotAfterCaret.args = {
+export const SlotAfterToggle = DefaultTemplate.bind({});
+SlotAfterToggle.args = {
   slotTemplate: `
-    <template #after-caret="{ scopeProps }">
+    <template #after-toggle>
       🤘
     </template>
   `,
 };
 
-export const SlotBeforeCaret = DefaultTemplate.bind({});
-SlotBeforeCaret.args = {
+export const SlotBeforeToggle = DefaultTemplate.bind({});
+SlotBeforeToggle.args = {
   slotTemplate: `
-    <template #before-caret>
+    <template #before-toggle>
       🤘
     </template>
   `,

package/ui.form-textarea/UTextarea.vue

@@ -154,8 +154,10 @@ function toggleReadonly(hasReadonly: boolean) {
   }
 }
 
-useMutationObserver(leftSlotWrapperRef, (mutations) => {
-  mutations.forEach(setLabelPosition);
+useMutationObserver(leftSlotWrapperRef, (mutations) => mutations.forEach(setLabelPosition), {
+  childList: true,
+  characterData: true,
+  subtree: true,
 });
 
 function setLabelPosition() {