vueless 1.3.1-beta.1 → 1.3.2-beta.0

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

@@ -28,15 +28,14 @@ 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",
         subtle: "bg-muted border-default/50",
         soft: "bg-muted border-transparent",
+        inverted: "bg-inverted border-transparent",
       };
 
       Object.entries(variants).forEach(([variant, classes]) => {
@@ -51,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]",
@@ -77,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";
 
@@ -97,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",
@@ -119,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, {
@@ -136,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, {
@@ -153,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";
@@ -174,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, {
@@ -188,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";
 
@@ -205,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";
 
@@ -220,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";
 
@@ -235,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";
 
@@ -250,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";
 
@@ -265,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";
 
@@ -280,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";
 
@@ -296,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
@@ -318,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-page/types.ts

@@ -34,7 +34,7 @@ export interface Props {
   /**
    * Page variant.
    */
-  variant?: "solid" | "outlined" | "subtle" | "soft";
+  variant?: "solid" | "outlined" | "subtle" | "soft" | "inverted";
 
   /**
    * Page size (width).

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

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

@@ -0,0 +1,17 @@
+import { Markdown } from "@storybook/addon-docs/blocks";
+
+## 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>

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

@@ -158,9 +158,7 @@ export const BottomSlot = DefaultTemplate.bind({});
 BottomSlot.args = {
   slotTemplate: `
     <template #bottom>
-      <UChip icon="arrow_outward" size="sm" class="mt-2">
-        <ULink label="Learn more" size="sm" class="mr-1.5" />
-      </UChip>
+      <ULink label="Learn more" size="sm" class="mr-1.5" />
     </template>
   `,
 };

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

@@ -3,6 +3,7 @@ import { getSource } from "../../utils/storybook";
 
 import * as stories from "./stories";
 import defaultConfig from "../config?raw"
+import CheckboxOptionKeys from "../../ui.form-checkbox/storybook/optionKeys.mdx"
 
 <Meta of={stories} />
 <Title of={stories} />
@@ -12,8 +13,7 @@ import defaultConfig from "../config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## Option meta keys
-Full list of keys you may/have to provide to the component in an option object can be found here: <a href="https://ui.vueless.com/?path=/docs/3100--docs" target="_blank">UCheckbox docs</a>.
+<CheckboxOptionKeys />
 
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -3,6 +3,7 @@ import { getSource } from "../../utils/storybook";
 
 import * as stories from "./stories";
 import defaultConfig from "../config?raw"
+import CheckboxOptionKeys from "../../ui.form-checkbox/storybook/optionKeys.mdx"
 
 <Meta of={stories} />
 <Title of={stories} />
@@ -12,5 +13,7 @@ import defaultConfig from "../config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+<CheckboxOptionKeys />
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.loader/ULoader.vue

@@ -4,6 +4,8 @@ import { useTemplateRef } from "vue";
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
+import UIcon from "../ui.image-icon/UIcon.vue";
+
 import { COMPONENT_NAME, ELLIPSES_AMOUNT } from "./constants";
 import defaultConfig from "./config";
 
@@ -29,7 +31,8 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { getDataTest, config, loaderAttrs, ellipseAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, config, loaderAttrs, ellipseAttrs, spinnerIconAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -37,7 +40,12 @@ const { getDataTest, config, loaderAttrs, ellipseAttrs } = useUI<Config>(default
     <div v-if="loading" ref="loader" v-bind="loaderAttrs" :data-test="getDataTest()">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
-        <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
+        <template v-if="variant === 'spinner'">
+          <UIcon :name="config.defaults.spinnerIcon" :color="color" v-bind="spinnerIconAttrs" />
+        </template>
+        <template v-else>
+          <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
+        </template>
       </slot>
     </div>
   </Transition>

package/ui.loader/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   loader: {
-    base: "relative flex items-center",
+    base: "relative flex items-center justify-center",
     variants: {
       size: {
         sm: "h-1.5 w-9",
@@ -49,9 +49,22 @@ export default /*tw*/ {
       },
     },
   },
+  spinnerIcon: {
+    base: "{UIcon} animate-spin",
+    defaults: {
+      size: {
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      },
+    },
+  },
   defaults: {
     color: "primary",
+    variant: "dots",
     size: "md",
     loading: false,
+    /* icons */
+    spinnerIcon: "progress_activity",
   },
 };

package/ui.loader/storybook/stories.ts

@@ -16,7 +16,7 @@ import type { Props } from "../types";
 
 interface ULoaderArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "color";
+  enum: "size" | "color" | "variant";
 }
 
 export default {
@@ -82,6 +82,9 @@ const LoadingTemplate: StoryFn<ULoaderArgs> = (args: ULoaderArgs) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
+
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };