vueless 0.0.774 → 0.0.776

package/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": [

package/ui.button/config.ts

@@ -79,8 +79,8 @@ export default /*tw*/ {
         variant: "thirdary",
         class: `
           text-gray-900                              dark:text-gray-100
-          hover:text-gray-800  hover:bg-gray-800/5   dark:hover:text-gray-200  dark:hover:bg-gray-200/5
-          active:text-gray-700 active:bg-gray-700/10 dark:active:text-gray-300 dark:active:bg-gray-300/10
+          hover:text-gray-800  hover:bg-gray-800/10   dark:hover:text-gray-200  dark:hover:bg-gray-200/10
+          active:text-gray-700 active:bg-gray-700/15 dark:active:text-gray-300 dark:active:bg-gray-300/15
         `,
       },
       {
@@ -110,7 +110,7 @@ export default /*tw*/ {
         variant: "thirdary",
         class: "hover:bg-white/10 active:bg-white/15",
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-700/10 dark:bg-{color}-500/10" },
+      { filled: true, variant: "thirdary", class: "bg-{color}-700/5 dark:bg-{color}-500/5" },
       { filled: true, variant: "thirdary", color: ["grayscale", "white"], class: "bg-gray-800/5 dark:bg-gray-200/5" },
       { rightIcon: true, size: "2xs", class: "pr-1" },
       { rightIcon: true, size: "xs", class: "pr-2" },

package/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>

package/ui.data-table/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
     base: "fixed top-0 flex items-center z-30 overflow-hidden border rounded-none",
     variants: {
       actionsHeader: {
-        true: "rounded-t-dynamic border-blue-200 bg-blue-50",
+        true: "rounded-t-dynamic border-brand-200 bg-brand-50",
       },
     },
     compoundVariants: [

package/ui.data-table/storybook/stories.ts

@@ -373,14 +373,14 @@ SlotHeaderActions.args = {
         <UButton
           label="Edit"
           variant="thirdary"
-          color="blue"
+          color="brand"
           size="sm"
         />
 
         <UButton
           label="Delete"
           variant="thirdary"
-          color="blue"
+          color="brand"
           size="sm"
         />
       </URow>

package/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 />

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

@@ -12,10 +12,11 @@ import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
+import { computed } from "vue";
 
 interface UCheckboxArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "labelAlign" | "color";
 }
 
 export default {
@@ -23,7 +24,7 @@ export default {
   title: "Form Inputs & Controls / Checkbox",
   component: UCheckbox,
   args: {
-    label: "Label",
+    label: "Subscribe to the newsletter",
   },
   argTypes: {
     ...getArgTypes(UCheckbox.__name),
@@ -106,19 +107,23 @@ const ValueTypesTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
 const EnumVariantTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs, { argTypes }) => ({
   components: { UCheckbox, UCol },
   setup() {
+    const isColorStory = computed(() => args.enum === "color");
+
     return {
       args,
       options: argTypes?.[args.enum]?.options,
+      isColorStory,
     };
   },
   template: `
-    <UCol gap="xl">
+    <UCol gap="xl" :class="{ 'flex-row': isColorStory }">
       <UCheckbox
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
         :[args.enum]="option"
-        :label="option"
+        :label="isColorStory ? option : args.label"
+        :description="isColorStory ? '' : option"
       />
     </UCol>
   `,
@@ -127,23 +132,60 @@ const EnumVariantTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs, { argT
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Receive updates and exclusive offers directly to your inbox." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "Please agree to the Terms and Conditions before proceeding." };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
 export const CustomValues = ValueTypesTemplate.bind({});
 CustomValues.args = {};
+CustomValues.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "You can pass custom `trueValue` and `falseValue` props, that can be of different types (see object meta keys table below).",
+    },
+  },
+};
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Some description" };
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "color", modelValue: true };
+
+export const Partial = DefaultTemplate.bind({});
+Partial.args = { partial: true };
+Partial.parameters = {
+  docs: {
+    description: {
+      story: "Make checkbox partially checked (change the checked tick to a minus).",
+    },
+  },
+};
+
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  slotTemplate: `
+    <template #label>
+      <UBadge label="This option is required" color="red" size="sm" />
+    </template>
+  `,
+};
 
-export const SlotFooter = DefaultTemplate.bind({});
-SlotFooter.args = {
+export const SlotBottom = DefaultTemplate.bind({});
+SlotBottom.args = {
   slotTemplate: `
-    <template #footer>
-      <UBadge label="favourite" color="green" size="sm" />
+    <template #bottom>
+      <UBadge label="Subscription is optional" color="green" size="sm" />
     </template>
   `,
 };

package/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 />

package/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>
+  `,
+};

package/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"
   />

package/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,
   },
 };

package/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,7 +70,7 @@ const EnumVariantTemplate: StoryFn<UCheckboxMultiStateArgs> = (
   args: UCheckboxMultiStateArgs,
   { argTypes },
 ) => ({
-  components: { UCheckboxMultiState, URow },
+  components: { UCheckboxMultiState, UCol },
   setup() {
     return {
       args,
@@ -63,7 +78,7 @@ const EnumVariantTemplate: StoryFn<UCheckboxMultiStateArgs> = (
     };
   },
   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" };

package/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.

package/ui.form-color-picker/config.ts

@@ -8,7 +8,7 @@ export default /*tw*/ {
           filled: true,
           variant: "thirdary",
           color: "grayscale",
-          class: "focus:bg-gray-800/10 bg-gray-800/10 dark:focus:bg-gray-200/10 dark:bg-gray-200/10",
+          class: "bg-gray-800/10 dark:bg-gray-200/10",
         },
       ],
     },

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

@@ -26,7 +26,7 @@ export default {
   component: UInput,
   args: {
     label: "Full Name",
-    modelValue: "Satoshi Nakamoto",
+    modelValue: "John Doe",
   },
   argTypes: {
     ...getArgTypes(UInput.__name),

package/ui.loader-progress/useLoaderProgress.ts

@@ -1,4 +1,4 @@
-import { inject, onBeforeUnmount, readonly, ref } from "vue";
+import { inject, onBeforeMount, onBeforeUnmount, readonly, ref } from "vue";
 
 import type { Ref } from "vue";
 
@@ -49,8 +49,10 @@ export function createLoaderProgress(): LoaderProgress {
 export function useLoaderProgress(): LoaderProgress {
   const loaderProgress = inject<LoaderProgress>(LoaderProgressSymbol);
 
-  window.addEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);
-  window.addEventListener("loaderProgressOff", setLoaderOffHandler as EventListener);
+  onBeforeMount(() => {
+    window.addEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);
+    window.addEventListener("loaderProgressOff", setLoaderOffHandler as EventListener);
+  });
 
   onBeforeUnmount(() => {
     window.removeEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);

package/utils/storybook.ts

@@ -72,7 +72,7 @@ export function getDocsDescription(componentName: string | undefined) {
   let viewOnGitHub = "";
 
   if (COMPONENTS[componentName as ComponentNames]) {
-    viewOnGitHub = `| [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]})`;
+    viewOnGitHub = `| <a href="https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]}" target="_blank">View on GitHub</a>`;
   }
 
   return {