vueless 1.4.7-beta.1 → 1.4.7-beta.3

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

@@ -15,6 +15,7 @@ import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
+import { ref } from "vue";
 
 interface USwitchArgs extends Props {
   slotTemplate?: string;
@@ -89,15 +90,38 @@ ToggleIcon.args = { toggleIcon: true };
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const LabelSlot = DefaultTemplate.bind({});
-LabelSlot.args = {
-  label: "Enable Notifications",
-  slotTemplate: `
-    <template #label="{ label }">
-      <URow gap="2xs" align="center">
-        <UText>I agree to the <ULink label="Privacy Policy" /></UText>
-        <UIcon name="contract" size="xs" />
-      </URow>
-    </template>
+export const Slots: StoryFn<USwitchArgs> = (args) => ({
+  components: { USwitch, UCol, UText, URow, ULink, UIcon },
+  setup: () => ({ args, labelSlotValue: ref(false), descriptionSlotValue: ref(false) }),
+  template: `
+    <UCol gap="3xl">
+      <USwitch
+        v-bind="args"
+        v-model="labelSlotValue"
+        label="Enable Notifications"
+      >
+        <template #label="{ label }">
+          <URow gap="2xs" align="center">
+            <UText :label="label" />
+            <UIcon name="notifications" size="xs" />
+          </URow>
+        </template>
+      </USwitch>
+
+      <USwitch
+        v-model="descriptionSlotValue"
+        label="Auto-save drafts"
+      >
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="cloud_sync" size="xs" class="mt-0.5" color="primary" />
+            <UText size="sm">
+              Drafts sync across devices.
+              <ULink label="Learn more" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </USwitch>
+    </UCol>
   `,
-};
+});

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

@@ -12,9 +12,11 @@ import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
 import tooltip from "../../v.tooltip/vTooltip";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
+import { ref } from "vue";
 
 interface UTextareaArgs extends Props {
   slotTemplate?: string;
@@ -138,27 +140,66 @@ NoAutocomplete.parameters = {
 };
 
 export const Slots: StoryFn<UTextareaArgs> = (args) => ({
-  components: { UTextarea, URow, UIcon, UText },
+  components: { UTextarea, URow, UCol, UIcon, UText, ULink },
   directives: { tooltip },
-  setup: () => ({ args }),
+  setup: () => ({
+    args,
+    descriptionSlotValue: ref(""),
+    errorSlotValue: ref(""),
+  }),
   template: `
-    <URow>
-      <UTextarea v-bind="args" v-model="args.modelValue" :max-length="300">
-        <template #left>
-          <UText :label="args.modelValue?.length + '/300'" variant="lifted" />
-        </template>
-      </UTextarea>
-
-      <UTextarea v-bind="args">
-        <template #right>
-          <UIcon
-            name="send"
-            color="success"
-            v-tooltip="'Send message'"
-            interactive
-          />
-        </template>
-      </UTextarea>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UTextarea v-bind="args" v-model="args.modelValue" :max-length="300">
+          <template #left>
+            <UText :label="args.modelValue?.length + '/300'" variant="lifted" />
+          </template>
+        </UTextarea>
+
+        <UTextarea v-bind="args">
+          <template #right>
+            <UIcon
+              name="send"
+              color="success"
+              v-tooltip="'Send message'"
+              interactive
+            />
+          </template>
+        </UTextarea>
+      </URow>
+
+      <URow block>
+        <UTextarea v-model="descriptionSlotValue" label="Feedback">
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="format_quote" size="xs" class="mt-0.5" color="primary" />
+              <UText size="sm">
+                Markdown is not supported. See
+                <ULink label="content guidelines" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </UTextarea>
+
+        <UTextarea
+          v-model="errorSlotValue"
+          label="Message"
+          :error="true"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>Message is too short (minimum 10 characters)</li>
+                  <li>Remove disallowed characters from your text</li>
+                  <li>Try again after fixing the issues above</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UTextarea>
+      </URow>
+    </UCol>
   `,
 });

package/ui.loader/tests/ULoader.test.ts

@@ -57,10 +57,10 @@ describe("ULoader.vue", () => {
         // Check if the ellipses have the correct color class
         const ellipses = component.findAll("[vl-key='ellipse']");
 
+        const expectedClass = color === "inherit" ? "bg-current" : `bg-${color}`;
+
         ellipses.forEach((ellipse) => {
-          color === "inherit"
-            ? expect(ellipse.classes()).toContain("bg-current")
-            : expect(ellipse.classes()).toContain(`bg-${color}`);
+          expect(ellipse.classes()).toContain(expectedClass);
         });
       });
     });

package/ui.navigation-progress/tests/UProgress.test.ts

@@ -133,9 +133,8 @@ describe("UProgress.vue", () => {
         const progressElement = component.find("progress");
         const stepperElement = component.findComponent(UStepperProgress);
 
-        isProgress
-          ? expect(progressElement.exists()).toBe(isProgress)
-          : expect(stepperElement.exists()).toBe(!isProgress);
+        expect(progressElement.exists()).toBe(isProgress);
+        expect(stepperElement.exists()).toBe(!isProgress);
       });
     });
 

package/ui.text-block/tests/UText.test.ts

@@ -66,9 +66,9 @@ describe("UText.vue", () => {
           },
         });
 
-        color === "text"
-          ? expect(component.attributes("class")).toContain("text-default")
-          : expect(component.attributes("class")).toContain(color);
+        const expectedInClass = color === "text" ? "text-default" : color;
+
+        expect(component.attributes("class")).toContain(expectedInClass);
       });
     });
 

package/ui.text-files/storybook/stories.ts

@@ -8,7 +8,10 @@ import {
 
 import UFiles from "../../ui.text-files/UFiles.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -80,25 +83,39 @@ export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
 export const Slots: StoryFn<UFilesArgs> = (args) => ({
-  components: { UFiles, URow, UIcon },
+  components: { UFiles, URow, UCol, UIcon, UText, ULink },
   setup() {
     return { args };
   },
   template: `
-    <URow>
-      <UFiles v-bind="args">
-        <template #before-file="{ index }">
-          <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
-          <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
-        </template>
-      </UFiles>
+    <UCol gap="3xl">
+      <URow block>
+        <UFiles v-bind="args">
+          <template #before-file="{ index }">
+            <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
+            <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
+          </template>
+        </UFiles>
 
-      <UFiles v-bind="args">
-        <template #after-file="{ index }">
-          <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
-          <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
+        <UFiles v-bind="args">
+          <template #after-file="{ index }">
+            <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
+            <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
+          </template>
+        </UFiles>
+      </URow>
+
+      <UFiles v-bind="args" label="Documents">
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="folder" size="xs" class="mt-0.5" color="primary" />
+            <UText size="sm">
+              Files are read-only here.
+              <ULink label="Manage in storage" underlined size="sm" />.
+            </UText>
+          </URow>
         </template>
       </UFiles>
-    </URow>
+    </UCol>
   `,
 });

package/ui.text-header/tests/UHeader.test.ts

@@ -49,9 +49,9 @@ describe("UHeader.vue", () => {
           },
         });
 
-        color === "text"
-          ? expect(component.attributes("class")).toContain("text-default")
-          : expect(component.attributes("class")).toContain(color);
+        const expectedInClass = color === "text" ? "text-default" : color;
+
+        expect(component.attributes("class")).toContain(expectedInClass);
       });
     });
 

package/ui.text-notify/tests/UNotify.test.ts

@@ -48,35 +48,31 @@ describe("UNotify.vue", () => {
 
   describe("Props", () => {
     it("X Position – applies the correct xPosition style", async () => {
-      const positions = ["left", "center", "right"];
+      async function mountAndGetPositionStyles(xPosition: Props["xPosition"]) {
+        const component = mountWithLocale({ xPosition });
 
-      for (const position of positions) {
-        const component = mountWithLocale({
-          xPosition: position as Props["xPosition"],
-        });
-
-        // Add a notification to ensure the component is rendered
         dispatchNotifyEvent("notifyStart", mockNotification);
         await component.vm.$nextTick();
 
-        // Manually trigger setPosition since waitForPageElement won't find the elements in tests
         // @ts-expect-error - Accessing private method for testing
         component.vm.setPosition();
         await component.vm.$nextTick();
 
-        // Access the internal notifyPositionStyles ref
         // @ts-expect-error - Accessing private property for testing
-        const positionStyles = component.vm.notifyPositionStyles;
+        return component.vm.notifyPositionStyles as Record<string, string | undefined>;
+      }
 
-        // For center position, we expect a calculated left value
-        if (position === "center") {
-          expect(positionStyles).toHaveProperty("left");
-          expect(positionStyles.left).toBeDefined();
-        } else {
-          expect(positionStyles).toHaveProperty(position);
-          expect(positionStyles[position]).toBe("0px");
-        }
+      for (const position of ["left", "right"] as const) {
+        const positionStyles = await mountAndGetPositionStyles(position);
+
+        expect(positionStyles).toHaveProperty(position);
+        expect(positionStyles[position]).toBe("0px");
       }
+
+      const centerStyles = await mountAndGetPositionStyles("center");
+
+      expect(centerStyles).toHaveProperty("left");
+      expect(centerStyles.left).toBeDefined();
     });
 
     it("Y Position – applies the correct yPosition style", async () => {

package/utils/node/helper.js

@@ -1,4 +1,4 @@
-import esbuild from "esbuild";
+import { build as rolldownBuild } from "rolldown";
 import path from "node:path";
 import { cwd } from "node:process";
 import { pathToFileURL } from "node:url";
@@ -191,21 +191,20 @@ export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
 }
 
 /**
- * Builds a TypeScript file into a JavaScript file using esbuild.
+ * Bundles a TypeScript component config to ESM `.mjs` via Rolldown (Oxc transform).
  *
  * @param {string} entryPath - The path to the TypeScript file to be built.
  * @param {string} configOutFile - The output path for the resulting JavaScript file.
  * @return {Promise<void>} A promise that resolves when the build is complete.
  */
 export async function buildTSFile(entryPath, configOutFile) {
-  await esbuild.build({
-    entryPoints: [entryPath],
-    outfile: configOutFile,
-    bundle: true,
+  await rolldownBuild({
+    input: entryPath,
     platform: "node",
-    format: "esm",
-    target: "ESNext",
-    loader: { ".ts": "ts" },
+    output: {
+      file: configOutFile,
+      format: "esm",
+    },
   });
 }