vueless 0.0.779 → 0.0.781

package/package.json

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

package/ui.form-checkbox-group/storybook/stories.ts

@@ -132,8 +132,7 @@ Options.parameters = {
   docs: {
     description: {
       story:
-        // eslint-disable-next-line vue/max-len
-        "Every option you pass via the `options` prop can be of different type (`Boolean` | `String` | `Number` | `Array` | `Object`).",
+        "Every option you pass via the `options` prop can be of different type (see object meta keys table below).",
     },
   },
 };

package/ui.form-label/config.ts

@@ -33,7 +33,7 @@ export default /*tw*/ {
       },
       align: {
         top: "font-medium",
-        topInside: "font-normal absolute left-3 text-gray-500 group-focus-within:text-brand-600",
+        topInside: "font-normal absolute text-gray-500 group-focus-within:text-brand-600",
         topWithDesc: "font-medium",
         left: "font-normal",
         right: "font-normal",
@@ -47,9 +47,9 @@ export default /*tw*/ {
     },
     compoundVariants: [
       { interactive: true, disabled: false, class: "hover:cursor-pointer" },
-      { align: "topInside", size: "sm", class: "top-2 text-2xs" },
-      { align: "topInside", size: "md", class: "top-2.5 text-xs" },
-      { align: "topInside", size: "lg", class: "top-2.5 text-sm" },
+      { align: "topInside", size: "sm", class: "-top-3 text-2xs" },
+      { align: "topInside", size: "md", class: "-top-4 text-xs" },
+      { align: "topInside", size: "lg", class: "-top-5 text-sm" },
       { align: "topWithDesc", size: "sm", class: "-mt-px" },
       { align: "topWithDesc", size: "md", class: "" },
       { align: "topWithDesc", size: "lg", class: "mt-px" },
@@ -69,7 +69,7 @@ export default /*tw*/ {
       },
       align: {
         top: "",
-        topInside: "pl-3 mt-1.5",
+        topInside: "mt-1.5",
         topWithDesc: "pt-0.5",
         left: "pt-0.5",
         right: "pt-0.5",

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

@@ -24,8 +24,8 @@ export default {
   title: "Form Inputs & Controls / Label",
   component: ULabel,
   args: {
-    label: "Label",
-    description: "Description",
+    label: "Email Address",
+    description: "We'll never share your email with anyone else.",
   },
   argTypes: {
     ...getArgTypes(ULabel.__name),
@@ -37,7 +37,7 @@ export default {
   },
 } as Meta;
 
-const defaultTemplate = "This is plain text";
+const defaultTemplate = "johndoe@example.com";
 
 const DefaultTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs) => ({
   components: { ULabel, UText, UIcon, UBadge },
@@ -78,13 +78,12 @@ const EnumVariantTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs, { argTypes }
     };
   },
   template: `
-    <UCol>
+    <UCol class="gap-10">
       <ULabel
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
         :[args.enum]="option"
-        class="border border-gray-200 rounded-dynamic-sm p-4"
       >
         <UText :[args.enum]="option">
           {{ prefixedOptions[index] }}
@@ -95,23 +94,39 @@ const EnumVariantTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs, { argTypes }
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { description: "" };
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
-
-export const LabelPlacement = EnumVariantTemplate.bind({});
-LabelPlacement.args = { enum: "align" };
+export const Description = DefaultTemplate.bind({});
+Description.args = {};
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "Error description" };
+Error.args = { error: "Please enter a valid email address." };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
+export const Interactive = DefaultTemplate.bind({});
+Interactive.args = { interactive: true };
+Interactive.parameters = {
+  docs: {
+    description: {
+      story: "Make the label interactive (cursor pointer on hover).",
+    },
+  },
+};
+
+export const Centred = DefaultTemplate.bind({});
+Centred.args = { centred: true };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "align" };
+
 export const SlotLabel = DefaultTemplate.bind({});
 SlotLabel.args = {
-  label: "Custom badge label",
+  label: "Email Address",
   slotTemplate: `
     <template #label="{ label }">
       <UBadge :label="label" color="green" />
@@ -119,11 +134,11 @@ SlotLabel.args = {
   `,
 };
 
-export const SlotFooter = DefaultTemplate.bind({});
-SlotFooter.args = {
+export const SlotBottom = DefaultTemplate.bind({});
+SlotBottom.args = {
   slotTemplate: `
     <template #bottom>
-      <UIcon name="star" color="green" />
+      <UBadge label="Your opinion is important for us!" color="green" class="max-w-fit" />
     </template>
   `,
 };

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

@@ -7,13 +7,14 @@ import {
 
 import URadio from "../../ui.form-radio/URadio.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface URadioArgs extends Props {
   slotTemplate?: string;
-  enum: "variant" | "size";
+  enum: "size" | "labelAlign" | "color";
 }
 
 export default {
@@ -22,7 +23,7 @@ export default {
   component: URadio,
   args: {
     name: "radio1",
-    label: "Radio",
+    label: "Payment Method",
     value: "1",
     color: "brand",
   },
@@ -50,26 +51,75 @@ const DefaultTemplate: StoryFn<URadioArgs> = (args: URadioArgs) => ({
   `,
 });
 
+const EnumVariantTemplate: StoryFn<URadioArgs> = (args: URadioArgs, { argTypes }) => ({
+  components: { URadio, URow },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <URow :class="{ '!flex-col': args.enum === 'labelAlign' }">
+      <URadio
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+        :label="option"
+      />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  name: "radio3",
+  label: "Subscription Plan",
+  description: "Choose your preferred plan. You can change it anytime.",
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+  description: "Please select a payment method.",
+  error: "This field is required. Please make a selection.",
+};
+
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true, name: "radio2" };
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { name: "radio3", description: "description" };
-
 export const Checked = DefaultTemplate.bind({});
 Checked.args = { checked: true, name: "radio4" };
 
-export const SlotFooter = DefaultTemplate.bind({});
-SlotFooter.args = {
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "color" };
+
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" color="green" />
+    </template>
+  `,
+};
+
+export const SlotBottom = DefaultTemplate.bind({});
+SlotBottom.args = {
   name: "radio5",
-  label: "radio",
   value: "radio",
   slotTemplate: `
-    <template #footer>
-      <UBadge label="favourite" color="green" size="sm" />
+    <template #bottom>
+      <UBadge label="Add to favorite" color="green" size="sm" />
     </template>
   `,
 };

package/ui.form-radio-group/storybook/stories.ts

@@ -9,6 +9,7 @@ import URadioGroup from "../../ui.form-radio-group/URadioGroup.vue";
 import URadio from "../../ui.form-radio/URadio.vue";
 import UAlert from "../../ui.text-alert/UAlert.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -23,14 +24,11 @@ export default {
   title: "Form Inputs & Controls / Radio Group",
   component: URadioGroup,
   args: {
-    label: "Radio Group",
-    modelValue: "One",
+    label: "Select your preferred delivery option:",
     options: [
-      { label: "Boolean", value: false },
-      { label: "String", value: "One" },
-      { label: "Number", value: 3 },
-      { label: "Object", value: { key: "value" } },
-      { label: "Array", value: ["Array", 1] },
+      { value: "standard", label: "Standard Shipping (3-5 business days)" },
+      { value: "express", label: "Express Shipping (1-2 business days)" },
+      { value: "pickup", label: "In-Store Pickup (Available same day)" },
     ],
   },
   argTypes: {
@@ -44,7 +42,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
-  components: { URadioGroup, URadio, UAlert, UCol },
+  components: { URadioGroup, URadio, UAlert, UCol, UBadge },
   setup() {
     const slots = getSlotNames(URadioGroup.__name);
 
@@ -62,8 +60,8 @@ const DefaultTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
         </URadio>
       </URadioGroup>
 
-      <UAlert color="gray" size="xs">
-        <code>Selected value: <b>{{ args.modelValue }}</b></code>
+      <UAlert size="sm" variant="thirdary" color="green" bordered>
+        <p>Selected value: {{ args.modelValue }}</p>
       </UAlert>
     </UCol>
   `,
@@ -98,21 +96,58 @@ Default.args = {
   name: "Default",
 };
 
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  name: "Description",
+  label: "Delivery Options",
+  description:
+    "Select your preferred delivery method. Additional charges may apply for expedited shipping.",
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+  name: "Error",
+  error: "Please, select at least one option to proceed.",
+};
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = {
+  name: "Disabled",
+  disabled: true,
+};
+
 export const Options = DefaultTemplate.bind({});
 Options.args = {
   name: "Options",
-  modelValue: "Custom string value",
   options: [
-    { label: "Boolean", value: false },
-    { label: "String", value: "Custom string value" },
-    { label: "Number", value: 4 },
-    { label: "Object", value: { key: "Custom object value" } },
-    { label: "Array", value: ["Custom array value", 2] },
+    { label: "String", value: "Subscribed" },
+    { label: "Number", value: 42 },
+    { label: "Boolean", value: true },
+    { label: "Object", value: { id: 101, status: "active" } },
+    { label: "Array", value: ["Admin", "Editor"] },
   ],
 };
+Options.parameters = {
+  docs: {
+    description: {
+      story:
+        "Every option you pass via the `options` prop can be of different type (see object meta keys table below).",
+    },
+  },
+};
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", name: "Sizes" };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color", name: "Colors" };
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", name: "Sizes" };
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  name: "SlotLabel",
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" color="green" variant="thirdary" />
+    </template>
+  `,
+};

package/ui.form-select/config.ts

@@ -84,7 +84,21 @@ export default /*tw*/ {
   leftSlot: "{>toggle} pl-2.5",
   rightSlot: "{>toggle} pr-2.5",
   beforeToggle: "{>toggle} cursor-auto",
-  afterToggle: "{>toggle} mr-2.5 items-start pt-3 cursor-auto",
+  afterToggle: {
+    base: "{>toggle} mr-2.5 items-start cursor-auto",
+    variants: {
+      size: {
+        sm: "pt-0.5",
+        md: "pt-1",
+        lg: "pt-1.5",
+      },
+    },
+    compoundVariants: [
+      { labelAlign: "topInside", size: "sm", class: "pt-2" },
+      { labelAlign: "topInside", size: "md", class: "pt-3" },
+      { labelAlign: "topInside", size: "lg", class: "pt-4" },
+    ],
+  },
   toggle: {
     base: "flex items-center",
     compoundVariants: [

package/ui.form-switch/config.ts

@@ -1,5 +1,9 @@
 export default /*tw*/ {
-  switchLabel: "{ULabel}",
+  switchLabel: {
+    base: "{ULabel}",
+    wrapper: "items-center",
+    content: "h-fit",
+  },
   wrapper: {
     base: `
       flex items-center p-0.5 relative rounded-full cursor-pointer transition

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

@@ -8,13 +8,14 @@ import {
 import USwitch from "../../ui.form-switch/USwitch.vue";
 import UIcon from "../../ui.image-icon/UIcon.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";
 
 interface USwitchArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "color";
+  enum: "size" | "color" | "labelAlign";
 }
 
 export default {
@@ -35,7 +36,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<USwitchArgs> = (args: USwitchArgs) => ({
-  components: { USwitch, UIcon },
+  components: { USwitch, UIcon, UBadge },
   setup() {
     const slots = getSlotNames(USwitch.__name);
 
@@ -57,7 +58,7 @@ const EnumVariantTemplate: StoryFn<USwitchArgs> = (args: USwitchArgs, { argTypes
     };
   },
   template: `
-    <URow>
+    <URow :class="{ '!flex-col max-w-fit': args.enum === 'labelAlign' }">
       <USwitch
         v-for="(option, index) in options"
         :key="index"
@@ -74,10 +75,19 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Label = DefaultTemplate.bind({});
-Label.args = { label: "Some label" };
+Label.args = { label: "Enable Notifications" };
 
 export const Description = DefaultTemplate.bind({});
-Description.args = { label: "Label", description: "Some description" };
+Description.args = {
+  label: "Enable Dark Mode",
+  description: "Switch to a darker color scheme to reduce eye strain.",
+};
+
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", color: "yellow" };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color", modelValue: true };
@@ -85,11 +95,18 @@ Colors.args = { enum: "color", modelValue: true };
 export const ToggleLabel = DefaultTemplate.bind({});
 ToggleLabel.args = { toggleLabel: true };
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", color: "yellow" };
-
-export const Icon = DefaultTemplate.bind({});
-Icon.args = { toggleIcon: true, color: "yellow" };
+export const ToggleIcon = DefaultTemplate.bind({});
+ToggleIcon.args = { toggleIcon: true, color: "yellow" };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
+
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  label: "Enable Notifications",
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" color="green" />
+    </template>
+  `,
+};