vueless 0.0.726 → 0.0.727

package/package.json

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

package/ui.button-toggle/UToggle.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import ULabel from "../ui.form-label/ULabel.vue";
 import UButton from "../ui.button/UButton.vue";
 
 import useUI from "../composables/useUI.ts";
@@ -65,78 +64,61 @@ const mutatedProps = computed(() => ({
   selected: isSelected,
 }));
 
-const { toggleLabelAttrs, optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps);
+const { optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>
-  <ULabel
-    :label="label"
-    :description="description"
-    :align="labelAlign"
-    :disabled="disabled"
-    :error="error"
-    centred
-    v-bind="toggleLabelAttrs"
-    :data-test="dataTest"
-  >
-    <template #label>
-      <!--
-        @slot Use this to add custom content instead of the entire Toggle label.
-        @binding {string} label
-      -->
-      <slot name="label" :label="label" />
-    </template>
-
-    <div v-bind="optionsAttrs">
-      <UButton
-        v-for="(option, index) in options"
-        :key="option.value"
-        :label="option.label"
-        tabindex="0"
-        color="gray"
-        :size="size"
-        :round="round"
-        :block="block"
-        :square="square"
-        :disabled="disabled"
-        v-bind="isSelected(option) ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
-        :data-test="`${dataTest}-option-${index}`"
-        @click="onClickOption(option)"
-      >
-        <template #left="{ iconName }">
-          <!--
+  <div v-bind="optionsAttrs">
+    <UButton
+      v-for="(option, index) in options"
+      :key="option.value"
+      :label="option.label"
+      tabindex="0"
+      color="gray"
+      :size="size"
+      :round="round"
+      :block="block"
+      :square="square"
+      :disabled="disabled"
+      v-bind="isSelected(option) ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
+      :data-test="`${dataTest}-option-${index}`"
+      @click="onClickOption(option)"
+    >
+      <template #left="{ iconName }">
+        <!--
             @slot Use it to add something before the label.
             @binding {object} option
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="left" :option="option" :icon-name="iconName" :index="index" />
-        </template>
+        <slot name="left" :option="option" :icon-name="iconName" :index="index" />
+      </template>
 
-        <template #default="{ label, iconName }">
-          <!--
+      <template #default="{ label, iconName }">
+        <!--
             @slot Use it to add something instead of the toggle option label.
             @binding {object} option
             @binding {string} label
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="option" :option="option" :label="label" :icon-name="iconName" :index="index">
-            {{ option.label }}
-          </slot>
-        </template>
+        <slot name="option" :option="option" :label="label" :icon-name="iconName" :index="index">
+          {{ option.label }}
+        </slot>
+      </template>
 
-        <template #right="{ iconName }">
-          <!--
+      <template #right="{ iconName }">
+        <!--
             @slot Use it to add something after the label.
             @binding {object} option
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="right" :option="option" :icon-name="iconName" :index="index" />
-        </template>
-      </UButton>
-    </div>
-  </ULabel>
+        <slot name="right" :option="option" :icon-name="iconName" :index="index" />
+      </template>
+    </UButton>
+  </div>
 </template>

package/ui.button-toggle/config.ts

@@ -1,22 +1,4 @@
 export default /*tw*/ {
-  toggleLabel: {
-    base: "{ULabel} flex-wrap",
-    variants: {
-      block: {
-        true: "w-full",
-      },
-    },
-    defaults: {
-      size: {
-        "2xs": "sm",
-        xs: "sm",
-        sm: "md",
-        md: "md",
-        lg: "lg",
-        xl: "lg",
-      },
-    },
-  },
   options: {
     base: "flex",
     variants: {
@@ -33,7 +15,7 @@ export default /*tw*/ {
         false: "flex-nowrap gap-1 p-1 w-fit border rounded-dynamic border-gray-300",
       },
       disabled: {
-        true: "pointer-events-none",
+        true: "pointer-events-none bg-gray-100",
       },
       block: {
         true: "w-full flex-nowrap",
@@ -78,7 +60,6 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    labelAlign: "top",
     size: "md",
     split: false,
     block: false,

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

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -24,7 +24,6 @@ export default {
   title: "Buttons & Links / Toggle",
   component: UToggle,
   args: {
-    label: "Please choose a role",
     modelValue: "11",
     options: [
       { value: "11", label: "Admin" },
@@ -47,22 +46,11 @@ const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
   components: { UToggle, UIcon, UBadge },
   setup() {
     const slots = getSlotNames(UToggle.__name);
-    const errorMessage = computed(() => {
-      if (args.name === "error" && Array.isArray(args.modelValue)) {
-        return args.modelValue.length === 0 ? "Please select at least one option" : "";
-      }
 
-      return "";
-    });
-
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
-    <UToggle
-      v-bind="args"
-      v-model="args.modelValue"
-      :error="errorMessage"
-    >
+    <UToggle v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment("")}
     </UToggle>
   `,
@@ -87,7 +75,6 @@ const EnumVariantTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes
         v-bind="args"
         v-model="values[option]"
         :[args.enum]="option"
-        :label="option"
         :options="[
           { value: option + 1, label: option },
           { value: option + 2, label: option },
@@ -106,7 +93,6 @@ Default.args = {
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = {
   name: "Disabled",
-  label: "You can disable the whole toggle or specific items",
   options: [
     { value: "11", label: "Admin" },
     { value: "12", label: "Editor", disabled: true },
@@ -115,9 +101,6 @@ Disabled.args = {
   ],
 };
 
-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" };
 
@@ -126,15 +109,6 @@ Multiple.args = {
   name: "multiple",
   multiple: true,
   modelValue: [],
-  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({});
@@ -150,7 +124,6 @@ export const Square = DefaultTemplate.bind({});
 Square.args = {
   name: "square",
   square: true,
-  label: "Square prop is useful when icons are present",
   options: [
     { value: "11", label: "star" },
     { value: "12", label: "add" },
@@ -166,7 +139,6 @@ Square.args = {
 export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   name: "defaultSlot",
-  label: "Please select an operation to proceed",
   options: [
     { value: "1", label: "Download", rightIcon: "download", color: "green" },
     { value: "2", label: "Edit", rightIcon: "edit_note", color: "orange" },
@@ -195,13 +167,13 @@ export const Slots: StoryFn<UToggleArgs> = (args) => ({
     <URow no-mobile>
       <UToggle v-bind="args" v-model="leftModel" name="leftSlot">
         <template #left="{ index }">
-          <UIcon v-if="index === 0" name="settings" />
+          <UIcon size="sm" color="inherit" v-if="index === 0" name="settings" />
         </template>
       </UToggle>
 
       <UToggle v-bind="args" v-model="rightModel" name="rightSlot">
         <template #right="{ index }">
-          <UIcon v-if="index === 2" name="person" />
+          <UIcon size="sm" color="inherit" v-if="index === 2" name="person" />
         </template>
       </UToggle>
     </URow>

package/ui.button-toggle/types.ts

@@ -30,26 +30,6 @@ export interface Props {
    */
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
-  /**
-   * Error message.
-   */
-  error?: string;
-
-  /**
-   * Label placement.
-   */
-  labelAlign?: "top" | "topWithDesc" | "left" | "right";
-
-  /**
-   * Toggle label.
-   */
-  label?: string;
-
-  /**
-   * Toggle description.
-   */
-  description?: string;
-
   /**
    * Toggle name.
    */

package/ui.dropdown-badge/config.ts

@@ -22,8 +22,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-5 mb-5",
-        bottom: "top-3 mt-5",
+        top: "bottom-5 mb-3",
+        bottom: "top-5 mt-3",
       },
       xPosition: {
         left: "left-0",

package/ui.dropdown-button/config.ts

@@ -25,8 +25,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-full mb-1",
-        bottom: "top-full mt-1",
+        top: "bottom-full mb-1.5",
+        bottom: "top-full mt-1.5",
       },
       xPosition: {
         left: "left-0",

package/ui.dropdown-link/config.ts

@@ -34,8 +34,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-3 mb-3",
-        bottom: "top-3 mt-3",
+        top: "bottom-3 mb-2.5",
+        bottom: "top-3 mt-2.5",
       },
       xPosition: {
         left: "left-0",

package/ui.form-calendar/config.ts

@@ -14,12 +14,12 @@ export default /*tw*/ {
       },
     },
   },
-  dateInRange: "bg-brand/5 !text-brand-900 hover:bg-brand/15 rounded-none",
+  dateInRange: "bg-brand-600/10 !text-brand-900 hover:bg-brand/15 rounded-none",
   edgeDateInRange: "",
   firstDateInRange: "rounded-r-none",
   lastDateInRange: "rounded-l-none",
   anotherMonthDate: "text-gray-400",
-  activeDate: "bg-brand-100",
+  activeDate: "bg-brand-600/10",
   selectedDate: "",
   currentDate: "border-2 border-brand-600",
   day: "{UButton} size-9 w-full",

package/ui.form-input/config.ts

@@ -29,8 +29,8 @@ export default /*tw*/ {
   rightIcon: "{UIcon} {>inputIcon}",
   passwordIcon: "{UIcon} {>inputIcon}",
   passwordIconWrapper: "flex items-center justify-end whitespace-nowrap pr-2.5 gap-1 rounded-inherit rounded-l-none",
-  leftSlot: "pl-3 flex items-center",
-  rightSlot: "pr-3 flex items-center",
+  leftSlot: "pl-2.5 flex items-center",
+  rightSlot: "pr-2.5 flex items-center",
   input: {
     base: `
       block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-transparent

package/ui.form-input-file/config.ts

@@ -25,7 +25,7 @@ export default /*tw*/ {
   descriptionTop: "{UText} text-gray-700 mb-2",
   descriptionBottom: "{UText} text-gray-700 mt-2",
   content: {
-    base: "p-3 gap-3 flex justify-between items-start relative w-full rounded-dynamic bg-brand-50",
+    base: "p-3 gap-3 flex justify-between items-start relative w-full rounded-dynamic bg-brand-600/5",
     variants: {
       multiple: {
         false: "items-center",

package/ui.form-input-rating/UInputRating.vue

@@ -6,7 +6,6 @@ import { hasSlotContent } from "../utils/helper.ts";
 import { getDefaults } from "../utils/ui.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
-import ULabel from "../ui.form-label/ULabel.vue";
 
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
@@ -60,65 +59,46 @@ function onMouseHover(overStar: number | null = null) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
+const { config, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
   useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <ULabel
-    :label="label"
-    :error="error"
-    :size="size"
-    :align="labelAlign"
-    :description="description"
-    :disabled="disabled"
-    v-bind="inputLabelAttrs"
-    :data-test="dataTest"
-  >
-    <template #label>
+  <div v-bind="containerAttrs">
+    <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
       <!--
-        @slot Use this to add custom content instead of the label.
-        @binding {string} label
-      -->
-      <slot name="label" :label="label" />
-    </template>
-
-    <div v-bind="containerAttrs">
-      <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
-        <!--
           @slot Use it to customise counter.
           @binding {number} counter
           @binding {number} total
         -->
-        <slot name="counter" :counter="counterValue" :total="total">
-          {{ counterValue }}
-        </slot>
-      </div>
-
-      <div v-bind="starsAttrs">
-        <UIcon
-          v-for="star in stars"
-          :key="star"
-          internal
-          :color="error ? 'red' : 'brand'"
-          :interactive="selectable"
-          :name="starIcon(star)"
-          v-bind="starAttrs"
-          :data-test="`${dataTest}-rating-star-${star}`"
-          @click="onClickStar(star)"
-          @mouseleave="onMouseHover()"
-          @mouseover="onMouseHover(star)"
-        />
-      </div>
-
-      <div v-if="total || hasSlotContent($slots['total'])" v-bind="totalAttrs">
-        <!--
+      <slot name="counter" :counter="counterValue" :total="total">
+        {{ counterValue }}
+      </slot>
+    </div>
+
+    <div v-bind="starsAttrs">
+      <UIcon
+        v-for="star in stars"
+        :key="star"
+        internal
+        :color="error ? 'red' : 'brand'"
+        :interactive="selectable"
+        :name="starIcon(star)"
+        v-bind="starAttrs"
+        :data-test="`${dataTest}-rating-star-${star}`"
+        @click="onClickStar(star)"
+        @mouseleave="onMouseHover()"
+        @mouseover="onMouseHover(star)"
+      />
+    </div>
+
+    <div v-if="total || hasSlotContent($slots['total'])" v-bind="totalAttrs">
+      <!--
           @slot Use it to customise total.
           @binding {number} counter
           @binding {number} total
         -->
-        <slot name="total" :counter="counter" :total="total">({{ total }})</slot>
-      </div>
+      <slot name="total" :counter="counter" :total="total">({{ total }})</slot>
     </div>
-  </ULabel>
+  </div>
 </template>

package/ui.form-input-rating/config.ts

@@ -1,5 +1,4 @@
 export default /*tw*/ {
-  inputLabel: "{ULabel}",
   container: {
     base: "flex items-center text-gray-500 !leading-none",
     variants: {
@@ -45,7 +44,6 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    labelAlign: "top",
     size: "md",
     stars: 5,
     counter: false,

package/ui.form-input-rating/storybook/stories.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -15,7 +14,7 @@ import type { Props } from "../types.ts";
 
 interface UInputRatingArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "labelAlign";
+  enum: "size";
 }
 
 export default {
@@ -40,16 +39,11 @@ const DefaultTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs) => (
   components: { UInputRating, UBadge },
   setup() {
     const slots = getSlotNames(UInputRating.__name);
-    const errorMessage = computed(() => (!args.modelValue ? args.error : ""));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
-    <UInputRating
-      v-bind="args"
-      v-model="args.modelValue"
-      :error="errorMessage"
-    >
+    <UInputRating v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment("")}
     </UInputRating>
   `,
@@ -81,25 +75,12 @@ const EnumVariantTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs,
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Your review helps us improve our services." };
-
-export const Error = DefaultTemplate.bind({});
-Error.args = {
-  selectable: true,
-  modelValue: 0,
-  error: "Please select a rating before submitting your review.",
-};
-
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const LabelPlacement = EnumVariantTemplate.bind({});
-LabelPlacement.args = { enum: "labelAlign" };
-
 export const StarAmount = DefaultTemplate.bind({});
 StarAmount.args = { stars: 7 };
 StarAmount.parameters = {

package/ui.form-input-rating/types.ts

@@ -5,21 +5,11 @@ import type { ComponentConfig } from "../types.ts";
 export type Config = typeof defaultConfig;
 
 export interface Props {
-  /**
-   * Rating label.
-   */
-  label?: string;
-
   /**
    * Rating value.
    */
   modelValue: number;
 
-  /**
-   * Rating description.
-   */
-  description?: string;
-
   /**
    * Rating number of stars.
    */
@@ -30,16 +20,6 @@ export interface Props {
    */
   size?: "sm" | "md" | "lg";
 
-  /**
-   * Rating label placement.
-   */
-  labelAlign?: "top" | "topWithDesc" | "left" | "right";
-
-  /**
-   * Rating error message.
-   */
-  error?: string;
-
   /**
    * Disable the input.
    */

package/ui.form-select/config.ts

@@ -81,10 +81,10 @@ export default /*tw*/ {
   },
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
-  leftSlot: "{>toggle} pl-3",
-  rightSlot: "{>toggle} pr-3",
+  leftSlot: "{>toggle} pl-2.5",
+  rightSlot: "{>toggle} pr-2.5",
   beforeToggle: "{>toggle} cursor-auto",
-  afterToggle: "{>toggle} mr-3 items-start pt-3 cursor-auto",
+  afterToggle: "{>toggle} mr-2.5 items-start pt-3 cursor-auto",
   toggle: {
     base: "flex items-center",
     compoundVariants: [

package/ui.form-textarea/config.ts

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   textareaLabel: "{ULabel}",
   slot: "flex items-center justify-center whitespace-nowrap gap-1 rounded-dynamic",
-  leftSlot: "{>slot} pl-3 rounded-r-none",
-  rightSlot: "{>slot} pr-3 rounded-l-none",
+  leftSlot: "{>slot} pl-2.5 rounded-r-none",
+  rightSlot: "{>slot} pr-2.5 rounded-l-none",
   wrapper: {
     base: `
       flex bg-white transition w-full