vueless 1.3.1 → 1.3.2-beta.0

package/ui.container-modal/UModal.vue

@@ -101,7 +101,7 @@ function trapFocus(e: KeyboardEvent) {
     return;
   }
 
-  // Tab - if focused on last element, move to first
+  // Tab - if focused on the last element, move to the first
   if (!e.shiftKey && document.activeElement === lastElement) {
     e.preventDefault();
     firstElement.focus();

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -42,7 +42,7 @@ const emit = defineEmits([
 
 const confirmModalRef = useTemplateRef<InstanceType<typeof UModal>>("confirmModal");
 
-const modal = computed(() => {
+const modalRef = computed(() => {
   return confirmModalRef.value?.wrapperRef || null;
 });
 
@@ -80,7 +80,7 @@ defineExpose({
    * A reference to the UModal's wrapper element for direct DOM manipulation.
    * @property {InstanceType<typeof UModal>}
    */
-  modal,
+  modalRef,
 });
 
 /**

package/ui.container-modal-confirm/tests/UModalConfirm.test.ts

@@ -11,10 +11,8 @@ describe("UModalConfirm", () => {
   // Define common test value
   const modelValue = true;
 
-  // Props tests
   describe("Props", () => {
-    // ModelValue prop
-    it("renders when modelValue is true", () => {
+    it("Model Value – renders when modelValue is true", () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -27,7 +25,7 @@ describe("UModalConfirm", () => {
       expect(modal.props("modelValue")).toBe(modelValue);
     });
 
-    it("does not render modal content when modelValue is false", () => {
+    it("Model Value – does not render modal content when modelValue is false", () => {
       const modelValue = false;
 
       const component = mount(UModalConfirm, {
@@ -42,8 +40,7 @@ describe("UModalConfirm", () => {
       expect(modal.props("modelValue")).toBe(modelValue);
     });
 
-    // Title prop
-    it("passes title prop to UModal", () => {
+    it("Title – passes title prop to UModal", () => {
       const title = "Confirm Modal Title";
       const component = mount(UModalConfirm, {
         props: {
@@ -57,8 +54,7 @@ describe("UModalConfirm", () => {
       expect(modal.props("title")).toBe(title);
     });
 
-    // Description prop
-    it("passes description prop to UModal", () => {
+    it("Description – passes description prop to UModal", () => {
       const description = "Confirm Modal Description";
 
       const component = mount(UModalConfirm, {
@@ -73,8 +69,7 @@ describe("UModalConfirm", () => {
       expect(modal.props("description")).toBe(description);
     });
 
-    // ConfirmLabel prop
-    it("renders with custom confirmLabel prop", () => {
+    it("Confirm Label – renders with custom confirmLabel prop", () => {
       const confirmLabel = "Custom Confirm";
       const component = mount(UModalConfirm, {
         props: {
@@ -87,8 +82,7 @@ describe("UModalConfirm", () => {
       expect(component.find("[vl-key='confirmButton']").text()).toBe(confirmLabel);
     });
 
-    // ConfirmColor prop
-    it("applies correct confirmColor to confirm button", () => {
+    it("Confirm Color – applies correct confirmColor to confirm button", () => {
       const colors = [
         "primary",
         "secondary",
@@ -113,8 +107,7 @@ describe("UModalConfirm", () => {
       });
     });
 
-    // ConfirmDisabled prop
-    it("disables confirm button when confirmDisabled is true", () => {
+    it("Confirm Disabled – disables confirm button when confirmDisabled is true", () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -125,8 +118,7 @@ describe("UModalConfirm", () => {
       expect(component.find("[vl-key='confirmButton']").attributes("disabled")).toBeDefined();
     });
 
-    // CancelHidden prop
-    it("hides cancel button when cancelHidden is true", () => {
+    it("Cancel Hidden – hides cancel button when cancelHidden is true", () => {
       const cancelHidden = true;
 
       const component = mount(UModalConfirm, {
@@ -143,8 +135,7 @@ describe("UModalConfirm", () => {
       expect(cancelButton).toBeUndefined();
     });
 
-    // Variant prop
-    it("passes variant prop to UModal", () => {
+    it("Variant – passes variant prop to UModal", () => {
       const variants = ["solid", "outlined", "subtle", "soft", "inverted"];
 
       variants.forEach((variant) => {
@@ -161,8 +152,7 @@ describe("UModalConfirm", () => {
       });
     });
 
-    // Size prop
-    it("passes size prop to UModal", () => {
+    it("Size – passes size prop to UModal", () => {
       const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"];
 
       sizes.forEach((size) => {
@@ -179,8 +169,7 @@ describe("UModalConfirm", () => {
       });
     });
 
-    // CloseOnCross prop
-    it("passes closeOnCross prop to UModal", () => {
+    it("Close On Cross – passes closeOnCross prop to UModal", () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -193,8 +182,7 @@ describe("UModalConfirm", () => {
       expect(modal.props("closeOnCross")).toBe(false);
     });
 
-    // CloseOnOverlay prop
-    it("passes closeOnOverlay prop to UModal", () => {
+    it("Close On Overlay – passes closeOnOverlay prop to UModal", () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -221,8 +209,7 @@ describe("UModalConfirm", () => {
       expect(modal.props("closeOnEsc")).toBe(false);
     });
 
-    // Inner prop
-    it("passes inner prop to UModal", () => {
+    it("Inner – passes inner prop to UModal", () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -235,8 +222,7 @@ describe("UModalConfirm", () => {
       expect(modal.props("inner")).toBe(true);
     });
 
-    // Divided prop
-    it("passes divided prop to UModal", () => {
+    it("Divided – passes divided prop to UModal", () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -249,8 +235,7 @@ describe("UModalConfirm", () => {
       expect(modal.props("divided")).toBe(true);
     });
 
-    // DataTest prop
-    it("applies data-test attribute", () => {
+    it("Data Test – applies data-test attribute", () => {
       const dataTest = "modal-confirm-test";
       const component = mount(UModalConfirm, {
         props: {
@@ -264,10 +249,8 @@ describe("UModalConfirm", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("passes default slot content to UModal", () => {
+    it("Default – passes default slot content to UModal", () => {
       const slotClass = "default-content";
       const slotContent = "Default Content";
 
@@ -288,8 +271,7 @@ describe("UModalConfirm", () => {
       expect(modal.text()).toContain(slotContent);
     });
 
-    // Before-title slot
-    it("passes before-title slot content to UModal", () => {
+    it("Before-title – passes before-title slot content to UModal", () => {
       const slotClass = "before-title";
       const slotContent = "Before Title";
 
@@ -310,8 +292,7 @@ describe("UModalConfirm", () => {
       expect(modal.text()).toContain(slotContent);
     });
 
-    // Title slot
-    it("passes title slot content to UModal", () => {
+    it("Title – passes title slot content to UModal", () => {
       const slotClass = "title-content";
       const slotContent = "Title Content";
 
@@ -332,8 +313,7 @@ describe("UModalConfirm", () => {
       expect(modal.text()).toContain(slotContent);
     });
 
-    // After-title slot
-    it("passes after-title slot content to UModal", () => {
+    it("After-title – passes after-title slot content to UModal", () => {
       const slotClass = "after-title";
       const slotContent = "After Title";
 
@@ -354,8 +334,7 @@ describe("UModalConfirm", () => {
       expect(modal.text()).toContain(slotContent);
     });
 
-    // Actions slot
-    it("passes actions slot content to UModal", () => {
+    it("Actions – passes actions slot content to UModal", () => {
       const slotClass = "actions-content";
       const slotContent = "Actions Content";
 
@@ -376,8 +355,7 @@ describe("UModalConfirm", () => {
       expect(modal.text()).toContain(slotContent);
     });
 
-    // Footer-left slot
-    it("renders custom content in footer-left slot instead of default buttons", () => {
+    it("Footer-left – renders custom content in footer-left slot instead of default buttons", () => {
       const slotClass = "footer-left";
       const slotContent = "Footer Left";
 
@@ -405,8 +383,7 @@ describe("UModalConfirm", () => {
       expect(confirmButton).toBeUndefined();
     });
 
-    // Footer-right slot
-    it("passes footer-right slot content to UModal", () => {
+    it("Footer-right – passes footer-right slot content to UModal", () => {
       const slotClass = "footer-right";
       const slotContent = "Footer Right";
       const component = mount(UModalConfirm, {
@@ -427,10 +404,8 @@ describe("UModalConfirm", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Update:modelValue event
-    it("emits update:modelValue event when close button is clicked", async () => {
+    it("Update Model Value – emits update:modelValue event when close button is clicked", async () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -447,8 +422,7 @@ describe("UModalConfirm", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([false]);
     });
 
-    // Confirm event
-    it("emits confirm event when confirm button is clicked", async () => {
+    it("Confirm – emits confirm event when confirm button is clicked", async () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -468,8 +442,7 @@ describe("UModalConfirm", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([false]);
     });
 
-    // Close event
-    it("emits close event when cancel button is clicked", async () => {
+    it("Close – emits close event when cancel button is clicked", async () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
@@ -490,17 +463,15 @@ describe("UModalConfirm", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // modal
-    it("exposes modal ref", () => {
+    it("modalRef – exposes modal ref", () => {
       const component = mount(UModalConfirm, {
         props: {
           modelValue,
         },
       });
 
-      expect(component.vm.modal).toBeDefined();
+      expect(component.vm.modalRef).toBeDefined();
     });
   });
 });

package/ui.container-page/tests/UPage.test.ts

@@ -28,10 +28,8 @@ const mountWithRouter = (component: unknown, options: UnknownObject) => {
 };
 
 describe("UPage.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Variant prop
-    it("applies correct variant classes", () => {
+    it("Variant – applies correct variant classes", () => {
       const variants = {
         solid: "bg-default border-transparent",
         outlined: "bg-default border-muted",
@@ -52,8 +50,7 @@ describe("UPage.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies correct size classes", () => {
+    it("Size – applies correct size classes", () => {
       const sizeClasses = {
         xs: "md:w-[25rem]",
         sm: "md:w-[31.25rem]",
@@ -78,8 +75,7 @@ describe("UPage.vue", () => {
       });
     });
 
-    // TitleSize prop
-    it("applies correct titleSize to the header", () => {
+    it("Title Size – applies correct titleSize to the header", () => {
       const titleSizes = ["xs", "sm", "md", "lg", "xl", "2xl"];
       const title = "Test Title";
 
@@ -98,8 +94,7 @@ describe("UPage.vue", () => {
       });
     });
 
-    // Rounding prop
-    it("applies correct rounding classes", () => {
+    it("Rounding – applies correct rounding classes", () => {
       const variants = {
         true: "border-r-0",
         false: "rounded-large",
@@ -120,8 +115,7 @@ describe("UPage.vue", () => {
       });
     });
 
-    // Title prop
-    it("renders the title correctly", () => {
+    it("Title – renders the title correctly", () => {
       const title = "Test Title";
 
       const component = mount(UPage, {
@@ -137,8 +131,7 @@ describe("UPage.vue", () => {
       expect(header.props("label")).toBe(title);
     });
 
-    // Description prop
-    it("renders the description correctly", () => {
+    it("Description – renders the description correctly", () => {
       const description = "Test Description";
 
       const component = mount(UPage, {
@@ -154,8 +147,7 @@ describe("UPage.vue", () => {
       expect(descriptionElement.text()).toBe(description);
     });
 
-    // BackTo and BackLabel props
-    it("renders back link correctly", () => {
+    it("Back To – renders back link correctly", () => {
       // Need to provide a valid RouteLocationRaw object
       const backTo = { path: "/back" };
       const backLabel = "Back";
@@ -175,8 +167,7 @@ describe("UPage.vue", () => {
       expect(backLink.props("label")).toBe(backLabel);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("Data Test – applies the correct data-test attribute", () => {
       const dataTest = "page-test";
 
       const component = mount(UPage, {
@@ -189,10 +180,8 @@ describe("UPage.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content in default slot", () => {
+    it("Default – renders content in default slot", () => {
       const slotContent = "Default Content";
       const slotClass = "default-content";
 
@@ -206,8 +195,7 @@ describe("UPage.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Before-title slot
-    it("renders content in before-title slot", () => {
+    it("Before-title – renders content in before-title slot", () => {
       const slotContent = "Before Title Content";
       const slotClass = "before-title-content";
 
@@ -221,8 +209,7 @@ describe("UPage.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Title slot
-    it("renders content in title slot", () => {
+    it("Title – renders content in title slot", () => {
       const slotContent = "Title Content";
       const slotClass = "title-content";
 
@@ -236,8 +223,7 @@ describe("UPage.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // After-title slot
-    it("renders content in after-title slot", () => {
+    it("After-title – renders content in after-title slot", () => {
       const slotContent = "After Title Content";
       const slotClass = "after-title-content";
 
@@ -251,8 +237,7 @@ describe("UPage.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Actions slot
-    it("renders content in actions slot", () => {
+    it("Actions – renders content in actions slot", () => {
       const slotContent = "Actions Content";
       const slotClass = "actions-content";
 
@@ -266,8 +251,7 @@ describe("UPage.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Footer-left slot
-    it("renders content in footer-left slot", () => {
+    it("Footer-left – renders content in footer-left slot", () => {
       const slotContent = "Footer Left Content";
       const slotClass = "footer-left-content";
 
@@ -281,8 +265,7 @@ describe("UPage.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Footer-right slot
-    it("renders content in footer-right slot", () => {
+    it("Footer-right – renders content in footer-right slot", () => {
       const slotContent = "Footer Right Content";
       const slotClass = "footer-right-content";
 
@@ -297,10 +280,8 @@ describe("UPage.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Back event
-    it("emits back event when back link is clicked", async () => {
+    it("Back – emits back event when back link is clicked", async () => {
       const component = mountWithRouter(UPage, {
         props: {
           title: "Test Title", // Need a title to make isExistHeader true
@@ -319,10 +300,8 @@ describe("UPage.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UPage);
 
       expect(component.vm.wrapperRef).toBeDefined();

package/ui.container-row/tests/URow.test.ts

@@ -6,10 +6,8 @@ import URow from "../URow.vue";
 import type { Props } from "../types";
 
 describe("URow.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Gap prop
-    it("applies the correct gap class", () => {
+    it("Gap – applies the correct gap class", () => {
       const gapClasses = {
         none: "gap-0",
         "2xs": "gap-1",
@@ -32,8 +30,7 @@ describe("URow.vue", () => {
       });
     });
 
-    // Align prop
-    it("applies the correct align class", () => {
+    it("Align – applies the correct align class", () => {
       const alignClasses = {
         end: "items-end",
         start: "items-start",
@@ -53,8 +50,7 @@ describe("URow.vue", () => {
       });
     });
 
-    // Content prop
-    it("applies the correct content class", () => {
+    it("Content – applies the correct content class", () => {
       const contentClasses = {
         end: "content-end",
         start: "content-start",
@@ -78,8 +74,7 @@ describe("URow.vue", () => {
       });
     });
 
-    // Justify prop
-    it("applies the correct justify class", () => {
+    it("Justify – applies the correct justify class", () => {
       const justifyClasses = {
         end: "justify-end",
         start: "justify-start",
@@ -100,8 +95,7 @@ describe("URow.vue", () => {
       });
     });
 
-    // Reverse prop
-    it("applies the correct reverse class", () => {
+    it("Reverse – applies the correct reverse class", () => {
       const reverseClasses = {
         false: "flex-row",
         true: "flex-row-reverse",
@@ -118,8 +112,7 @@ describe("URow.vue", () => {
       });
     });
 
-    // Wrap prop
-    it("applies the correct wrap class", () => {
+    it("Wrap – applies the correct wrap class", () => {
       const wrap = true;
       const expectedClasses = "flex-wrap";
 
@@ -132,8 +125,7 @@ describe("URow.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
-    // Block prop
-    it("applies the correct block class", () => {
+    it("Block – applies the correct block class", () => {
       const block = true;
       const expectedClasses = "w-full";
 
@@ -146,8 +138,7 @@ describe("URow.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
-    // Tag prop
-    it("renders the correct HTML tag", () => {
+    it("Tag – renders the correct HTML tag", () => {
       const tags = ["div", "section", "article", "main", "aside", "nav", "span"];
 
       tags.forEach((tag) => {
@@ -161,8 +152,7 @@ describe("URow.vue", () => {
       });
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("Data Test – applies the correct data-test attribute", () => {
       const dataTest = "test-row";
 
       const component = mount(URow, {
@@ -175,10 +165,8 @@ describe("URow.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Content";
 
       const component = mount(URow, {
@@ -191,10 +179,8 @@ describe("URow.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(URow);
 
       expect(component.vm.wrapperRef).toBeDefined();

package/ui.form-calendar/config.ts

@@ -159,7 +159,6 @@ export default /*tw*/ {
     range: false,
     timepicker: false,
     /* icons */
-    viewSwitchIcon: "keyboard_arrow_down",
     nextYearIcon: "keyboard_double_arrow_right",
     prevYearIcon: "keyboard_double_arrow_left",
     nextIcon: "keyboard_arrow_right",

package/ui.form-checkbox/config.ts

@@ -1,9 +1,18 @@
 export default /*tw*/ {
   checkboxLabel: "{ULabel}",
+  checkboxBase: {
+    base: "rounded-small cursor-pointer transition",
+    variants: {
+      size: {
+        sm: "size-4 -ml-4",
+        md: "size-5 -ml-5",
+        lg: "size-6 -ml-6",
+      },
+    },
+  },
   checkbox: {
     base: `
-      bg-default cursor-pointer transition
-      border border-solid border-default rounded-small outline-transparent
+      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15
@@ -13,11 +22,6 @@ export default /*tw*/ {
       disabled:checked:bg-{color}/(--vl-disabled-opacity) disabled:checked:border-transparent
     `,
     variants: {
-      size: {
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-6",
-      },
       error: {
         true: "!border-error focus-visible:outline-error",
       },
@@ -25,21 +29,15 @@ export default /*tw*/ {
   },
   checked: {
     base: `
-      flex items-center justify-center absolute rounded-small cursor-pointer transition
+      {>checkboxBase} flex items-center justify-center relative
       bg-{color} hover:bg-{color}-lifted active:bg-{color}-accented
     `,
     variants: {
-      size: {
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-6",
-      },
       disabled: {
         true: "!bg-{color}/(--vl-disabled-opacity) cursor-not-allowed",
       },
     },
   },
-  partiallyChecked: "{>checked}",
   checkedIcon: {
     base: "{UIcon} text-inverted",
     defaults: {
@@ -50,9 +48,10 @@ export default /*tw*/ {
       },
     },
   },
+  partiallyChecked: "{>checked}",
   partiallyCheckedIcon: "{>checkedIcon}",
-  /* These are used for a11y. */
   i18n: {
+    /* These are used for a11y. */
     checkbox: "Checkbox",
   },
   defaults: {

package/ui.form-checkbox/storybook/docs.mdx

@@ -12,21 +12,5 @@ import defaultConfig from "../config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## Option meta keys
-Keys you may/have to provide to the 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 />