vueless 1.0.2-beta.40 → 1.0.2-beta.42

package/package.json

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

package/ui.form-checkbox/config.ts

@@ -19,7 +19,7 @@ export default /*tw*/ {
         lg: "size-6",
       },
       error: {
-        true: "!border-error focus:outline-error",
+        true: "!border-error focus-visible:outline-error",
       },
     },
   },

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

@@ -8,7 +8,6 @@ import {
 
 import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
 import UCheckboxGroup from "../../ui.form-checkbox-group/UCheckboxGroup.vue";
-import UBadge from "../../ui.text-badge/UBadge.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";
@@ -42,7 +41,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
-  components: { UCheckbox, UBadge, UIcon, ULink, UText, URow, UChip },
+  components: { UCheckbox, UIcon, ULink, UText, URow, UChip },
   setup: () => ({ args, slots: getSlotNames(UCheckbox.__name) }),
   template: `
     <UCheckbox v-bind="args" v-model="args.modelValue">
@@ -52,19 +51,11 @@ const DefaultTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
 });
 
 const ValueTypesTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
-  components: { UCheckbox, UCheckboxGroup, UCol },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      defaultValue: false,
-      arrayValue: [],
-      customValue: { vue: "less" },
-    };
-  },
+  components: { UCheckbox, UCheckboxGroup, URow },
+  setup: () => ({ args }),
+  data: () => ({ defaultValue: false, customValue: { vue: "less" } }),
   template: `
-    <UCol gap="xl">
+    <URow gap="xl">
       <UCheckbox
         v-bind="args"
         v-model="defaultValue"
@@ -80,28 +71,7 @@ const ValueTypesTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
         :description="JSON.stringify(customValue)"
         label="Custom"
       />
-
-      <div>
-        <UCheckboxGroup name="checkboxGroup" label="Checkbox group">
-          <UCheckbox
-            v-bind="args"
-            v-model="arrayValue"
-            :value="{ key: 'value' }"
-            label="Array with object value"
-          />
-          <UCheckbox
-            v-bind="args"
-            v-model="arrayValue"
-            value="someString"
-            label="Array with custom string value"
-          />
-        </UCheckboxGroup>
-
-        <span class="font-normal text-muted text-small pl-0 mt-1">
-          {{ arrayValue }}
-        </span>
-      </div>
-    </UCol>
+    </URow>
   `,
 });
 
@@ -126,8 +96,17 @@ 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 Error: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
+  components: { UCheckbox },
+  setup: () => ({ args }),
+  template: `
+    <UCheckbox
+      v-bind="args"
+      v-model="args.modelValue"
+      :error="args.modelValue ? '' : 'Please agree to the Terms and Conditions before proceeding.'"
+    />
+  `,
+});
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
@@ -179,7 +158,7 @@ export const BottomSlot = DefaultTemplate.bind({});
 BottomSlot.args = {
   slotTemplate: `
     <template #bottom>
-      <UChip icon="arrow_outward" size="3xs" class="mt-2">
+      <UChip icon="arrow_outward" size="sm" class="mt-2">
         <ULink label="Learn more" size="sm" class="mr-1.5" />
       </UChip>
     </template>

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

@@ -1,3 +1,5 @@
+import { ref } from "vue";
+
 import {
   getArgs,
   getArgTypes,
@@ -18,12 +20,10 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
-import type { UnknownObject, UnknownArray } from "../../types.ts";
 
 interface UCheckboxGroupArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "color";
-  value?: boolean | string | number | UnknownArray | UnknownObject;
 }
 
 export default {
@@ -37,7 +37,6 @@ export default {
       { label: "SMS Alerts", value: "sms" },
       { label: "Push Notifications", value: "push" },
     ],
-    value: [],
   },
   argTypes: {
     ...getArgTypes(UCheckboxGroup.__name),
@@ -50,35 +49,27 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) => ({
-  components: { UCheckboxGroup, UCheckbox, UAlert, URow, UCol, UBadge, UText, ULink, UIcon },
-  setup: () => ({ args, slots: getSlotNames(UCheckboxGroup.__name) }),
+  components: { UCheckboxGroup, UCheckbox, URow, UCol, UBadge, UText, ULink, UIcon },
+  setup: () => ({ args, slots: getSlotNames(UCheckboxGroup.__name), modelValue: ref([]) }),
   template: `
-    <UCol>
-      <UCheckboxGroup v-bind="args" v-model="args.value">
-        ${args.slotTemplate || getSlotsFragment("")}
-      </UCheckboxGroup>
-
-      <URow>
-        <UAlert size="sm" variant="ghost" color="success" bordered>
-          <p>Selected value: {{ args.value }}</p>
-        </UAlert>
-      </URow>
-    </UCol>
+    <UCheckboxGroup v-bind="args" v-model="modelValue">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UCheckboxGroup>
   `,
 });
 
 const EnumTemplate: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs, { argTypes }) => ({
-  components: { UCheckboxGroup, UCol },
-  setup: () => ({ args, argTypes, getArgs }),
+  components: { UCheckboxGroup, URow },
+  setup: () => ({ args, argTypes, getArgs, modelValue: ref([]) }),
   template: `
-    <UCol>
+    <URow>
       <UCheckboxGroup
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        v-model="args.value"
+        v-model="modelValue"
       />
-    </UCol>
+    </URow>
   `,
 });
 
@@ -91,13 +82,39 @@ Description.args = {
   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 Error: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) => ({
+  components: { UCheckboxGroup },
+  setup: () => ({ args, modelValue: ref([]) }),
+  template: `
+    <UCheckboxGroup
+      name="Error"
+      v-bind="args"
+      v-model="modelValue"
+      :error="modelValue.length ? '' : 'At least one option must be selected.'"
+    />
+  `,
+});
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { name: "Disabled", disabled: true };
 
-export const Options = DefaultTemplate.bind({});
+export const Options: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) => ({
+  components: { UCheckboxGroup, UCol, UAlert },
+  setup: () => ({ args, modelValue: ref([]) }),
+  template: `
+    <UCol>
+      <UCheckboxGroup v-bind="args" v-model="modelValue" />
+
+      <UAlert
+        :description="modelValue"
+        size="sm"
+        variant="ghost"
+        color="success"
+        bordered
+      />
+    </UCol>
+  `,
+});
 Options.args = {
   name: "Options",
   options: [
@@ -125,6 +142,7 @@ Sizes.args = { enum: "size", name: "Sizes", label: "{enumValue}" };
 
 export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
+  name: "LabelSlot",
   slotTemplate: `
     <template #label>
       <URow gap="2xs" align="center">

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

@@ -94,4 +94,4 @@ export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
 export const Colors = EnumTemplate.bind({});
-Colors.args = { enum: "color" };
+Colors.args = { enum: "color", modelValue: true };

package/ui.form-color-picker/storybook/stories.ts

@@ -26,24 +26,24 @@ export default {
     modelValue: "",
     colors: /*tw*/ {
       grayscale: "bg-grayscale",
-      neutral: "bg-neutral-600",
-      red: "bg-red-600",
-      orange: "bg-orange-600",
-      amber: "bg-amber-600",
-      yellow: "bg-yellow-600",
-      lime: "bg-lime-600",
-      green: "bg-green-600",
-      emerald: "bg-emerald-600",
-      teal: "bg-teal-600",
-      cyan: "bg-cyan-600",
-      sky: "bg-sky-600",
-      blue: "bg-blue-600",
-      indigo: "bg-indigo-600",
-      violet: "bg-violet-600",
-      purple: "bg-purple-600",
-      fuchsia: "bg-fuchsia-600",
-      pink: "bg-pink-600",
-      rose: "bg-rose-600",
+      neutral: "bg-neutral-600 dark:bg-neutral-400",
+      red: "bg-red-600 dark:bg-red-400",
+      orange: "bg-orange-600 dark:bg-orange-400",
+      amber: "bg-amber-600 dark:bg-amber-400",
+      yellow: "bg-yellow-600 dark:bg-yellow-400",
+      lime: "bg-lime-600 dark:bg-lime-400",
+      green: "bg-green-600 dark:bg-green-400",
+      emerald: "bg-emerald-600 dark:bg-emerald-400",
+      teal: "bg-teal-600 dark:bg-teal-400",
+      cyan: "bg-cyan-600 dark:bg-cyan-400",
+      sky: "bg-sky-600 dark:bg-sky-400",
+      blue: "bg-blue-600 dark:bg-blue-400",
+      indigo: "bg-indigo-600 dark:bg-indigo-400",
+      violet: "bg-violet-600 dark:bg-violet-400",
+      purple: "bg-purple-600 dark:bg-purple-400",
+      fuchsia: "bg-fuchsia-600 dark:bg-fuchsia-400",
+      pink: "bg-pink-600 dark:bg-pink-400",
+      rose: "bg-rose-600 dark:bg-rose-400",
     },
   },
   argTypes: {

package/ui.form-date-picker/storybook/stories.ts

@@ -137,8 +137,18 @@ Placeholder.args = { placeholder: "MM/DD/YYYY" };
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Please choose a date from the calendar." };
 
-export const Error = DefaultTemplate.bind({});
-Error.args = { error: "Please select a valid date." };
+export const Error: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
+  components: { UDatePicker, UIcon },
+  setup: () => ({ args, slots: getSlotNames(COMPONENT_NAME) }),
+  template: `
+    <UDatePicker
+      open-direction-y="bottom"
+      v-bind="args"
+      v-model="args.modelValue"
+      :error="args.modelValue ? '' : 'Please select a valid date.'"
+    />
+  `,
+});
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };

package/ui.form-input/UInput.vue

@@ -202,6 +202,10 @@ function setLabelPosition() {
   const shouldAlignLabelOnTop = !hasSlotContent(slots["left"]) && !props.leftIcon;
 
   if (props.labelAlign === "top" || shouldAlignLabelOnTop) {
+    if (labelComponentRef.value?.labelElement) {
+      labelComponentRef.value.labelElement.style.left = "";
+    }
+
     return;
   }
 

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

@@ -94,11 +94,7 @@ export const Error: StoryFn<UInputArgs> = (args: UInputArgs) => ({
 });
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = {
-  readonly: true,
-  label: "Readonly data",
-  modelValue: "Pre-filled content that cannot be changed",
-};
+Readonly.args = { readonly: true };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };

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

@@ -1,3 +1,5 @@
+import { ref } from "vue";
+
 import {
   getArgs,
   getArgTypes,
@@ -40,7 +42,7 @@ export default {
 
 const DefaultTemplate: StoryFn<UInputFileArgs> = (args: UInputFileArgs) => ({
   components: { UInputFile },
-  setup: () => ({ args, slots: getSlotNames(UInputFile.__name), files: [] }),
+  setup: () => ({ args, slots: getSlotNames(UInputFile.__name), files: ref([]) }),
   template: `
     <UInputFile v-bind="args" v-model="files">
       ${args.slotTemplate || getSlotsFragment("")}
@@ -50,13 +52,14 @@ const DefaultTemplate: StoryFn<UInputFileArgs> = (args: UInputFileArgs) => ({
 
 const EnumTemplate: StoryFn<UInputFileArgs> = (args: UInputFileArgs, { argTypes }) => ({
   components: { UInputFile, UCol },
-  setup: () => ({ args, argTypes, getArgs }),
+  setup: () => ({ args, argTypes, getArgs, files: ref([]) }),
   template: `
     <UCol gap="2xl">
       <UInputFile
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        v-model="files"
       />
     </UCol>
   `,

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

@@ -28,7 +28,8 @@ export default {
   title: "Form Inputs & Controls / Input Password",
   component: UInputPassword,
   args: {
-    modelValue: "",
+    modelValue: "VuelessUI",
+    label: "Password",
   },
   argTypes: {
     ...getArgTypes(UInputPassword.__name),
@@ -73,11 +74,8 @@ const EnumTemplate: StoryFn<UInputPasswordArgs> = (args: UInputPasswordArgs, { a
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Label = DefaultTemplate.bind({});
-Label.args = { label: "Password" };
-
 export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "Enter your password" };
+Placeholder.args = { placeholder: "Enter your password", modelValue: "" };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Use at least 8 characters, including a number and a symbol." };

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

@@ -32,7 +32,8 @@ export default {
     ...getArgTypes(UInputSearch.__name),
   },
   args: {
-    modelValue: "Which UI library is the best?",
+    modelValue: "Wireless headphones",
+    label: "Search for products, brands, or categories",
   },
   parameters: {
     docs: {
@@ -74,14 +75,11 @@ const EnumTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs, { argTy
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Label = DefaultTemplate.bind({});
-Label.args = { label: "Search for product or primary" };
-
 export const Placeholder = DefaultTemplate.bind({});
 Placeholder.args = { modelValue: "", placeholder: "Type to search..." };
 
 export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Search for additional details." };
+Description.args = { description: "Find exactly what you're looking for with a quick search." };
 
 export const Error: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs) => ({
   components: { UInputSearch },

package/ui.form-label/ULabel.vue

@@ -114,7 +114,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
 
       <div
         v-if="isShownError"
-        v-bind="descriptionAttrs"
+        v-bind="errorAttrs"
         :data-test="getDataTest('error')"
         v-text="error"
       />

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

@@ -96,7 +96,7 @@ For.args = {
   for: "input-id",
   slotTemplate: `
     <template #default>
-      <input class="px-4 py-2 text-sm text-black rounded-small" id="input-id" />
+      <input id="input-id" class="py-2px-3 bg-transparent border-lifted rounded-medium" />
     </template>
   `,
 };
@@ -108,9 +108,6 @@ For.parameters = {
   },
 };
 
-export const Centred = DefaultTemplate.bind({});
-Centred.args = { centred: true };
-
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 

package/ui.form-listbox/UListbox.vue

@@ -150,6 +150,8 @@ watch(
       const wrapperBorderBottom = parseFloat(wrapperStyle.borderBottomWidth || "0");
       const wrapperGap = parseFloat(wrapperStyle.gap || "0");
 
+      const addOptionHeight = addOptionRef.value?.getBoundingClientRect().height || 0;
+
       const inputEl = listboxInputRef.value?.input as HTMLInputElement | undefined;
       let listboxInputHeight = 0;
 
@@ -159,7 +161,9 @@ watch(
 
       if (inputEl) {
         const listboxInputStyle = getComputedStyle(inputEl);
-        const listboxInputLabelStyle = getComputedStyle(inputEl?.parentElement);
+        const listboxInputLabelStyle = inputEl.parentElement
+          ? getComputedStyle(inputEl.parentElement)
+          : undefined;
         const listboxInputWrapperStyle = getComputedStyle(
           inputEl.parentElement?.parentElement?.parentElement as Element,
         );
@@ -168,12 +172,13 @@ watch(
 
         listboxInputWrapperPaddingTop = parseFloat(listboxInputWrapperStyle.paddingTop || "0");
 
-        listboxInputBorderTop = parseFloat(listboxInputLabelStyle.borderTop || "0");
-        listboxInputBorderBottom = parseFloat(listboxInputLabelStyle.borderBottom || "0");
+        listboxInputBorderTop = parseFloat(listboxInputLabelStyle?.borderTop || "0");
+        listboxInputBorderBottom = parseFloat(listboxInputLabelStyle?.borderBottom || "0");
       }
 
       wrapperMaxHeight.value = `${
         maxHeight +
+        addOptionHeight +
         (props.searchable ? wrapperGap : 0) +
         wrapperPaddingTop +
         wrapperPaddingBottom +
@@ -316,9 +321,7 @@ function onClickOption(rawOption: Option) {
 }
 
 function onInputSearchBlur(event: FocusEvent) {
-  if (props.searchable) {
-    emit("searchBlur", event);
-  }
+  emit("searchBlur", event);
 }
 
 defineExpose({