Merge remote-tracking branch 'origin/main'

vuelessjs · Feb 16, 2025 · 3e313a8 · 3e313a8
2 parents f8edb7f + 0ee1b66
commit 3e313a8
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 83 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.774",
+  "version": "0.0.776",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

diff --git a/src/ui.button-toggle/UToggle.vue b/src/ui.button-toggle/UToggle.vue
@@ -97,32 +97,32 @@ const { getDataTest, optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActive
     >
       <template #left="{ iconName }">
         <!--
-            @slot Use it to add something before the label.
-            @binding {object} option
-            @binding {string} icon-name
-            @binding {number} index
-          -->
+          @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>
 
       <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 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" />
       </template>
 
       <template #right="{ iconName }">
         <!--
-            @slot Use it to add something after the label.
-            @binding {object} option
-            @binding {string} icon-name
-            @binding {number} index
-          -->
+          @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>

diff --git a/src/ui.form-checkbox-group/storybook/docs.mdx b/src/ui.form-checkbox-group/storybook/docs.mdx
@@ -12,5 +12,8 @@ import defaultConfig from "../config.ts?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Option meta keys
+Full list of keys you may/have to provide to component in an option object can be found here: [UCheckbox docs](https://ui.vueless.com/?path=/docs/3100--docs).
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />
diff --git a/src/ui.form-checkbox-group/storybook/stories.ts b/src/ui.form-checkbox-group/storybook/stories.ts
@@ -10,6 +10,7 @@ import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
 import UAlert from "../../ui.text-alert/UAlert.vue";
 import UCol from "../../ui.container-col/UCol.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";
@@ -26,13 +27,13 @@ export default {
   title: "Form Inputs & Controls / Checkbox Group",
   component: UCheckboxGroup,
   args: {
-    label: "Label",
+    label: "Select your preferred communication methods:",
     options: [
-      { label: "checkbox 1", value: "1" },
-      { label: "checkbox 2", value: "2" },
-      { label: "checkbox 3", value: "3" },
+      { label: "Email Notifications", value: "email" },
+      { label: "SMS Alerts", value: "sms" },
+      { label: "Push Notifications", value: "push" },
     ],
-    value: ["One"],
+    value: [],
   },
   argTypes: {
     ...getArgTypes(UCheckboxGroup.__name),
@@ -45,7 +46,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) => ({
-  components: { UCheckboxGroup, UCheckbox, UAlert, URow, UCol },
+  components: { UCheckboxGroup, UCheckbox, UAlert, URow, UCol, UBadge },
   setup() {
     const slots = getSlotNames(UCheckboxGroup.__name);
 
@@ -63,7 +64,7 @@ const DefaultTemplate: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs)
       </UCheckboxGroup>
 
       <URow>
-        <UAlert size="sm" color="gray">
+        <UAlert size="sm" variant="thirdary" color="green" bordered>
           <p>Selected value: {{ value }}</p>
         </UAlert>
       </URow>
@@ -102,50 +103,52 @@ const EnumVariantTemplate: StoryFn<UCheckboxGroupArgs> = (
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {
-  name: "Default",
-  slotTemplate: `
-    <template v-for="(radio, index) in args.options" :key="index">
-      <UCheckbox v-bind="radio"/>
-    </template>
-  `,
-  options: [
-    { name: "Default", label: "String", value: "One" },
-    { name: "Default", label: "Boolean", value: false },
-    {
-      name: "Default",
-      label: "Object",
+Default.args = { name: "Default" };
 
-      value: { key: "value" },
-    },
-    {
-      name: "Default",
-      label: "Array",
-      value: ["Array", 1],
-    },
-  ],
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  name: "Description",
+  description: "You may select multiple options that best fit your preferences.",
 };
 
+export const Error = DefaultTemplate.bind({});
+Error.args = { name: "Error", error: "some error" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { name: "Disabled", disabled: true };
+
 export const Options = DefaultTemplate.bind({});
 Options.args = {
   name: "Options",
   options: [
-    { name: "Options", label: "Boolean", value: false },
-    { name: "Options", label: "String", value: "One" },
-    { name: "Options", label: "Number", value: 3 },
-    { name: "Options", label: "Object", value: { key: "value" } },
-    { name: "Options", label: "Array", value: ["Array", 1] },
+    { label: "String", value: "Subscribed" },
+    { label: "Number", value: 42 },
+    { label: "Boolean", value: true },
+    { label: "Object", value: { id: 101, status: "active" } },
+    { label: "Array", value: ["Admin", "Editor"] },
   ],
 };
-
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { name: "Disabled", disabled: true };
-
-export const Error = DefaultTemplate.bind({});
-Error.args = { name: "Error", error: "some error" };
+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`).",
+    },
+  },
+};
 
 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 = {
+  slotTemplate: `
+    <template #label>
+      <UBadge label="At least one option is required" color="green" />
+    </template>
+  `,
+};
diff --git a/src/ui.form-checkbox-multi-state/UCheckboxMultiState.vue b/src/ui.form-checkbox-multi-state/UCheckboxMultiState.vue
@@ -90,7 +90,8 @@ const multiStateCheckboxAttrs = computed(() => {
     :name="name"
     :size="size"
     :color="color"
-    :placement="placement"
+    :label-align="labelAlign"
+    :disabled="disabled"
     v-bind="multiStateCheckboxAttrs"
     @input="onClickCheckbox"
   />

diff --git a/src/ui.form-checkbox-multi-state/config.ts b/src/ui.form-checkbox-multi-state/config.ts
@@ -3,7 +3,7 @@ export default /*tw*/ {
   defaults: {
     color: "brand",
     size: "md",
-    placement: "left",
+    labelAlign: "right",
     disabled: false,
   },
 };
diff --git a/src/ui.form-checkbox-multi-state/storybook/stories.ts b/src/ui.form-checkbox-multi-state/storybook/stories.ts
@@ -6,14 +6,14 @@ import {
 } from "../../utils/storybook.ts";
 
 import UCheckboxMultiState from "../../ui.form-checkbox-multi-state/UCheckboxMultiState.vue";
-import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UCheckboxMultiStateArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "color" | "labelAlign";
 }
 
 export default {
@@ -22,9 +22,24 @@ export default {
   component: UCheckboxMultiState,
   args: {
     options: [
-      { value: false, label: "empty", icon: "", description: "checkbox empty" },
-      { value: true, label: "selected", icon: "check", description: "checkbox selected" },
-      { value: null, label: "not selected", icon: "remove", description: "checkbox unselected" },
+      {
+        value: false,
+        label: "Not Selected",
+        icon: "",
+        description: "The checkbox is currently not selected.",
+      },
+      {
+        value: true,
+        label: "Selected",
+        icon: "check",
+        description: "The checkbox has been selected.",
+      },
+      {
+        value: null,
+        label: "Indeterminate",
+        icon: "remove",
+        description: "The checkbox is in an indeterminate state.",
+      },
     ],
   },
   argTypes: {
@@ -55,15 +70,15 @@ const EnumVariantTemplate: StoryFn<UCheckboxMultiStateArgs> = (
   args: UCheckboxMultiStateArgs,
   { argTypes },
 ) => ({
-  components: { UCheckboxMultiState, URow },
+  components: { UCheckboxMultiState, UCol },
   setup() {
     return {
       args,
       options: argTypes?.[args.enum]?.options,
     };
   },
   template: `
-    <URow>
+    <UCol>
       <UCheckboxMultiState
         v-for="(option, index) in options"
         :key="index"
@@ -72,12 +87,21 @@ const EnumVariantTemplate: StoryFn<UCheckboxMultiStateArgs> = (
         :[args.enum]="option"
         :label="option"
       />
-    </URow>
+    </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+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" };
diff --git a/src/ui.form-checkbox-multi-state/types.ts b/src/ui.form-checkbox-multi-state/types.ts
@@ -54,7 +54,7 @@ export interface Props {
   /**
    * Label placement.
    */
-  placement?: "left" | "right";
+  labelAlign?: "left" | "right";
 
   /**
    * Make checkbox disabled.

diff --git a/src/ui.form-checkbox/storybook/docs.mdx b/src/ui.form-checkbox/storybook/docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.ts";
@@ -12,5 +12,21 @@ import defaultConfig from "../config.ts?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Option meta keys
+Keys you may/have to provide to component in an option object.
+
+<Markdown>
+{`
+|  Key name         | Description                            | Type                                   |
+| ------------------| ---------------------------------------| ---------------------------------------|
+| value             | Native value attribute                 | Boolean, String, Number, Array, Object |
+| trueValue         | Own value for checkbox checked state   | Boolean, String, Number, Array, Object |
+| falseValue        | Own value for checkbox unchecked state | Boolean, String, Number, Array, Object |
+| label             | Option label                           | String                                 |
+| icon              | Option icon                            | String                                 |
+| description       | Option description                     | Number                                 |   
+`}
+</Markdown>
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />