vueless 1.4.7-beta.4 → 1.4.7-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.7-beta.4",
+  "version": "1.4.7-beta.6",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -58,7 +58,7 @@
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.9.1",
-    "@vueless/storybook": "^1.5.2",
+    "@vueless/storybook": "^1.5.4",
     "eslint": "^10.2.1",
     "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-vue": "^10.9.0",

package/ui.container-accordion/storybook/stories.ts

@@ -25,7 +25,7 @@ interface UAccordionArgs extends Props {
 }
 
 export default {
-  id: "5040",
+  id: "5050",
   title: "Containers / Accordion",
   component: UAccordion,
   args: {

package/ui.container-accordion-item/storybook/stories.ts

@@ -23,7 +23,7 @@ interface UAccordionItemArgs extends Props {
 }
 
 export default {
-  id: "5050",
+  id: "5040",
   title: "Containers / Accordion Item",
   component: UAccordionItem,
   args: {

package/ui.container-card/storybook/stories.ts

@@ -44,34 +44,34 @@ export default {
   },
 } as Meta;
 
-const defaultTemplate = `
-  <UCol
-    justify="between"
-    class="h-full"
-  >
-    <URow
-      v-for="(cookie, index) in cookieSettings"
-      :key="cookie.label"
-      justify="between"
-      align="center"
-      block
-    >
-      <UCol gap="2xs">
-        <UHeader
-          :label="cookie.label"
-          class="text-sm"
-        />
-        <UText
-          :label="cookie.description"
-          size="sm"
-          variant="lifted"
-        />
-      </UCol>
-
-      <USwitch v-model="cookieValues[index]" />
-    </URow>
-  </UCol>
-`;
+const defaultTemplate = (isInvertedExpr: string = "false") => {
+  return `
+    <UCol justify="between" block class="h-full">
+      <URow
+        v-for="(cookie, index) in cookieSettings"
+        :key="cookie.label"
+        align="center"
+        block
+        gap="sm"
+      >
+        <UCol gap="2xs" class="min-w-0 flex-1">
+          <UHeader
+            :label="cookie.label"
+            class="text-sm"
+            :class="{ 'text-inverted': ${isInvertedExpr} }"
+          />
+          <UText
+            :label="cookie.description"
+            size="sm"
+            variant="lifted"
+          />
+        </UCol>
+
+        <USwitch v-model="cookieValues[index]" class="shrink-0" />
+      </URow>
+    </UCol>
+  `;
+};
 
 const cookieSettings = ref([
   {
@@ -95,7 +95,7 @@ const DefaultTemplate: StoryFn<UCardArgs> = (args: UCardArgs) => ({
   setup: () => ({ args, slots: getSlotNames(UCard.__name), cookieSettings, cookieValues }),
   template: `
     <UCard v-bind="args" class="max-w-96">
-      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate())}
     </UCard>
   `,
 });
@@ -109,9 +109,10 @@ const EnumTemplate: StoryFn<UCardArgs> = (args: UCardArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        :config="{ title: option === 'inverted' ? 'text-inverted' : 'text-default' }"
         class="max-w-96"
       >
-        ${defaultTemplate}
+        ${defaultTemplate("option === 'inverted'")}
       </UCard>
     </URow>
   `,
@@ -135,7 +136,7 @@ NoDivided.args = {
     <template #footer-left>
       <UButton size="sm" label="Save" variant="subtle" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -145,7 +146,7 @@ BeforeTitleSlot.args = {
     <template #before-title>
       <UIcon name="cookie" color="success" size="sm" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -155,7 +156,7 @@ TitleSlot.args = {
     <template #title="{ title }">
       <UHeader :label="title" color="primary" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -165,7 +166,7 @@ AfterTitleSlot.args = {
     <template #after-title>
       <UIcon name="cookie" color="success" size="sm" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -175,18 +176,18 @@ ActionsSlot.args = {
   slotTemplate: `
     <template #actions>
       <URow align="center" class="max-w-fit">
-        <ULink label="Learn more" />
-        <UButton size="sm" label="Manage" variant="subtle" />
+        <ULink label="Learn more" size="sm" />
+        <UButton label="Manage" variant="subtle" size="xs" />
       </URow>
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
 export const FooterLeftSlot = DefaultTemplate.bind({});
 FooterLeftSlot.args = {
   slotTemplate: `
-    ${defaultTemplate}
+    ${defaultTemplate()}
     <template #footer-left>
       <UButton size="sm" label="Cancel" variant="outlined" />
     </template>
@@ -196,7 +197,7 @@ FooterLeftSlot.args = {
 export const FooterRightSlot = DefaultTemplate.bind({});
 FooterRightSlot.args = {
   slotTemplate: `
-    ${defaultTemplate}
+    ${defaultTemplate()}
     <template #footer-right>
       <UButton size="sm" label="Save" />
     </template>

package/ui.container-modal/storybook/stories.ts

@@ -264,7 +264,7 @@ WithoutDivider.args = {
   slotTemplate: `
     ${defaultTemplate}
     <template #footer-left>
-      <UButton label="Back" color="neutral" variant="subtle" />
+      <UButton label="Back" color="neutral" variant="subtle" block />
     </template>`,
 };
 WithoutDivider.parameters = {
@@ -404,7 +404,7 @@ FooterRightSlot.args = {
     </template>
 
     <template #footer-right>
-      <UButton label="Submit" variant="subtle" />
+      <UButton label="Not now" variant="subtle" color="neutral" />
     </template>
   `,
 };

package/ui.container-modal-confirm/storybook/stories.ts

@@ -27,6 +27,10 @@ interface UModalConfirmArgs extends Props {
   modelValues?: UnknownObject;
 }
 
+const confirmModalDocsLayout = {
+  innerWrapper: "w-full max-h-full",
+};
+
 export default {
   id: "5080",
   title: "Containers / Modal Confirm",
@@ -35,6 +39,9 @@ export default {
     title: "Confirm Subscription Upgrade",
     confirmLabel: "Confirm",
     modelValue: true,
+    config: {
+      confirmModal: confirmModalDocsLayout,
+    },
   },
   argTypes: {
     ...getArgTypes(UModalConfirm.__name),
@@ -152,7 +159,14 @@ export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
       resetBodyOverflow();
     }
 
-    return { args, showMainModal, showInnerModal, openMainModal, openInnerModal };
+    return {
+      args,
+      showMainModal,
+      showInnerModal,
+      openMainModal,
+      openInnerModal,
+      confirmModalDocsLayout,
+    };
   },
   template: `
     <div>
@@ -181,6 +195,7 @@ export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
           "
           confirm-label="Agree"
           inner
+          :config="{ confirmModal: confirmModalDocsLayout }"
         >
           <UText label="Click Agree to proceed with subscription upgrade." />
         </UModalConfirm>
@@ -291,7 +306,7 @@ AfterTitleSlot.args = {
 
 export const ActionsSlot = DefaultTemplate.bind({});
 ActionsSlot.args = {
-  config: { confirmModal: { closeButton: "p-0" } },
+  config: { confirmModal: { closeButton: "p-0", innerWrapper: "w-full max-h-full" } },
   slotTemplate: `
     <template #actions="{ close }">
       <UButton

package/ui.container-page/storybook/stories.ts

@@ -35,6 +35,7 @@ export default {
   component: UPage,
   args: {
     title: "Join Our Community",
+    config: { wrapper: "min-h-max", page: "min-h-max" },
   },
   argTypes: {
     ...getArgTypes(UPage.__name),
@@ -142,7 +143,11 @@ const EnumTemplate: StoryFn<UPageArgs> = (args: UPageArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        :config="{ wrapper: 'min-h-max', page: 'min-h-max mb-4' }"
+        :config="{
+          wrapper: 'min-h-max',
+          page: 'min-h-max mb-4',
+          title: option === 'inverted' ? 'text-inverted' : 'text-default'
+        }"
       >
         ${defaultTemplate}
       </UPage>

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

@@ -184,7 +184,7 @@ Loading.parameters = {
 
 export const EmptyCellLabel = DefaultTemplate.bind({});
 EmptyCellLabel.args = {
-  emptyCellLabel: "---",
+  emptyCellLabel: "NO DATA",
   rows: [
     {
       id: getRandomId(),

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

@@ -168,13 +168,10 @@ export const Slots: StoryFn<UCheckboxArgs> = (args) => ({
         label="Email me product updates"
       >
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="mail" size="xs" class="mt-0.5" color="primary" />
-            <UText size="sm">
-              Unsubscribe anytime.
-              <ULink label="Privacy policy" underlined size="sm" />.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            Unsubscribe anytime, see our
+            <ULink label="privacy policy" underlined size="sm" />.
+          </UText>
         </template>
       </UCheckbox>
 
@@ -185,16 +182,13 @@ export const Slots: StoryFn<UCheckboxArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>You must accept the terms to continue</li>
-                <li>This checkbox is required for registration</li>
-                <li>Clear the error by checking the box above</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>You must accept the terms to continue</li>
+              <li>This checkbox is required for registration</li>
+              <li>Clear the error by checking the box above</li>
+            </ul>
+          </UText>
         </template>
       </UCheckbox>
     </UCol>

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

@@ -222,9 +222,9 @@ export const Slots: StoryFn<UCheckboxGroupArgs> = (args) => ({
         <template #description>
           <URow align="center" gap="2xs" class="text-neutral">
             <UIcon name="notifications" size="xs" color="primary" />
-            <UText size="sm">
-              You can change this later.
-              <ULink label="Notification settings" underlined size="sm" />.
+            <UText size="sm" variant="lifted">
+              You can change this later in
+              <ULink label="notification settings" underlined size="sm" />.
             </UText>
           </URow>
         </template>

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

@@ -418,13 +418,10 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
           class="w-full"
         >
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="event" size="xs" color="primary" />
-              <UText size="sm">
-                Uses your local timezone.
-                <ULink label="Date policy" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Uses your local timezone, see our
+              <ULink label="date policy" underlined size="sm" />.
+            </UText>
           </template>
         </UDatePicker>
 
@@ -436,19 +433,24 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
           class="w-full"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>The selected date is not available</li>
-                  <li>Pick a day within the allowed range</li>
-                  <li>Weekends and holidays are excluded</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>The selected date is not available</li>
+                <li>Pick a day within the allowed range</li>
+                <li>Weekends and holidays are excluded</li>
+              </ul>
+            </UText>
           </template>
         </UDatePicker>
       </URow>
     </UCol>
   `,
 });
+
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "550px",
+    },
+  },
+};

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

@@ -354,13 +354,10 @@ export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
           class="w-full"
         >
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="date_range" size="xs" color="primary" />
-              <UText size="sm">
-                Inclusive of start and end.
-                <ULink label="Fiscal calendar" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Inclusive of start and end, see the
+              <ULink label="fiscal calendar" underlined size="sm" />.
+            </UText>
           </template>
         </UDatePickerRange>
 
@@ -373,16 +370,13 @@ export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
           class="w-full"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>End date must be after the start date</li>
-                  <li>Range cannot span more than 30 days</li>
-                  <li>Select both dates from the calendar</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>End date must be after the start date</li>
+                <li>Range cannot span more than 30 days</li>
+                <li>Select both dates from the calendar</li>
+              </ul>
+            </UText>
           </template>
         </UDatePickerRange>
       </URow>

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

@@ -245,13 +245,10 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
       <URow block>
         <UInput v-model="descriptionSlotValue" label="Display name">
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="info" size="xs" color="primary" />
-              <UText size="sm">
-                Shown on your public profile. Read the
-                <ULink label="naming policy" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Shown on your public profile, read the
+              <ULink label="naming policy" underlined size="sm" />.
+            </UText>
           </template>
         </UInput>
 
@@ -262,7 +259,6 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
         >
           <template #error>
             <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
               <UText size="sm" color="error">
                 <ul>
                   <li>This field failed validation</li>

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

@@ -168,13 +168,10 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
         label="Upload document"
       >
         <template #description>
-          <URow align="center" gap="2xs">
-            <UIcon name="description" size="xs" color="primary" />
-            <UText size="sm">
-              PDF or image, max 5MB.
-              <ULink label="See requirements" underlined size="sm" />.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            PDF or image, max 5MB, see
+            <ULink label="requirements" underlined size="sm" />.
+          </UText>
         </template>
       </UInputFile>
 
@@ -185,16 +182,13 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>File type is not accepted for this field</li>
-                <li>Maximum file size has been exceeded</li>
-                <li>Choose another file and upload again</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>File type is not accepted for this field</li>
+              <li>Maximum file size has been exceeded</li>
+              <li>Choose another file and upload again</li>
+            </ul>
+          </UText>
         </template>
       </UInputFile>
     </UCol>

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

@@ -247,13 +247,10 @@ export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
       <URow block>
         <UInputNumber v-model="descriptionSlotValue" label="Amount">
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="payments" size="xs" color="primary" />
-              <UText size="sm">
-                Net amount in
-                <ULink label="account currency" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Net amount in
+              <ULink label="account currency" underlined size="sm" />.
+            </UText>
           </template>
         </UInputNumber>
 
@@ -263,16 +260,13 @@ export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
           :error="true"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>Value is outside the allowed range</li>
-                  <li>Use up to two decimal places for this currency</li>
-                  <li>Enter a number greater than zero</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Value is outside the allowed range</li>
+                <li>Use up to two decimal places for this currency</li>
+                <li>Enter a number greater than zero</li>
+              </ul>
+            </UText>
           </template>
         </UInputNumber>
       </URow>

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

@@ -210,13 +210,10 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
           label="Password"
         >
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="shield" size="xs" color="primary" />
-              <UText size="sm">
-                Minimum 8 characters.
-                <ULink label="Password rules" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Minimum 8 characters, see
+              <ULink label="password rules" underlined size="sm" />.
+            </UText>
           </template>
         </UInputPassword>
 
@@ -226,16 +223,13 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
           :error="true"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>Password does not meet strength requirements</li>
-                  <li>Use at least 8 characters with mixed case and numbers</li>
-                  <li>Avoid common words and repeated characters</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Password does not meet strength requirements</li>
+                <li>Use at least 8 characters with mixed case and numbers</li>
+                <li>Avoid common words and repeated characters</li>
+              </ul>
+            </UText>
           </template>
         </UInputPassword>
       </URow>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, ref, useId, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
@@ -27,6 +27,7 @@ const emit = defineEmits([
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const instanceId = useId();
 
 const hovered = ref<number | null>(null);
 const preventHover = ref(false);
@@ -66,6 +67,10 @@ function onMouseHover(overStar: number | null = null) {
   }
 }
 
+function getStarInputId(index: number) {
+  return `${props.id ?? instanceId}-${index}`;
+}
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
@@ -112,13 +117,13 @@ const {
         v-for="(star, index) in stars"
         :key="star"
         tabindex="0"
-        :for="String(index)"
+        :for="getStarInputId(index)"
         v-bind="starLabelAttrs"
         @keydown.enter="onClickStar(star)"
         @keydown.space.prevent="onClickStar(star)"
       >
         <input
-          :id="String(index)"
+          :id="getStarInputId(index)"
           tabindex="-1"
           type="radio"
           :disabled="disabled"