vueless 1.3.6-beta.9 → 1.3.7-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.6-beta.9",
+  "version": "1.3.7-beta.0",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.3.14",
+    "@vueless/storybook": "^1.3.16",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/ui.container-drawer/UDrawer.vue

@@ -197,8 +197,6 @@ function closeDrawer() {
 }
 
 function onDragStart(e: MouseEvent | TouchEvent) {
-  e.preventDefault();
-
   const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
   const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
 
@@ -211,6 +209,8 @@ function onDragStart(e: MouseEvent | TouchEvent) {
 
   if (!props.handle || !isDraggingFromHandle.value) return;
 
+  e.preventDefault();
+
   document.addEventListener("mousemove", onDragMove);
   document.addEventListener("mouseup", onDragEnd);
   document.addEventListener("touchmove", onDragMove, { passive: false });
@@ -294,7 +294,7 @@ const {
   titleFallbackAttrs,
   closeButtonAttrs,
   closeIconAttrs,
-} = useUI<Config>(defaultConfig);
+} = useUI<Config>(defaultConfig, undefined, "drawer");
 </script>
 
 <template>

package/ui.container-grid/config.ts

@@ -32,33 +32,39 @@ export default /*tw*/ {
       },
       gap: {
         none: "gap-0",
+        "3xs": "gap-0.5",
         "2xs": "gap-1",
         xs: "gap-2",
         sm: "gap-3",
         md: "gap-4",
         lg: "gap-5",
         xl: "gap-6",
-        "2xl": "gap-8",
+        "2xl": "gap-7",
+        "3xl": "gap-8",
       },
       rowGap: {
         none: "gap-y-0",
+        "3xs": "gap-y-0.5",
         "2xs": "gap-y-1",
         xs: "gap-y-2",
         sm: "gap-y-3",
         md: "gap-y-4",
         lg: "gap-y-5",
         xl: "gap-y-6",
-        "2xl": "gap-y-8",
+        "2xl": "gap-y-7",
+        "3xl": "gap-y-8",
       },
       colGap: {
         none: "gap-x-0",
+        "3xs": "gap-x-0.5",
         "2xs": "gap-x-1",
         xs: "gap-x-2",
         sm: "gap-x-3",
         md: "gap-x-4",
         lg: "gap-x-5",
         xl: "gap-x-6",
-        "2xl": "gap-x-8",
+        "2xl": "gap-x-7",
+        "3xl": "gap-x-8",
       },
       align: {
         start: "items-start",

package/ui.container-grid/tests/UGrid.test.ts

@@ -64,13 +64,15 @@ describe("UGrid.vue", () => {
     it("Gap – applies the correct gap class", () => {
       const gapClasses = {
         none: "gap-0",
+        "3xs": "gap-0.5",
         "2xs": "gap-1",
         xs: "gap-2",
         sm: "gap-3",
         md: "gap-4",
         lg: "gap-5",
         xl: "gap-6",
-        "2xl": "gap-8",
+        "2xl": "gap-7",
+        "3xl": "gap-8",
       };
 
       Object.entries(gapClasses).forEach(([gap, classes]) => {
@@ -87,13 +89,15 @@ describe("UGrid.vue", () => {
     it("Row Gap – applies the correct row gap class", () => {
       const rowGapClasses = {
         none: "gap-y-0",
+        "3xs": "gap-y-0.5",
         "2xs": "gap-y-1",
         xs: "gap-y-2",
         sm: "gap-y-3",
         md: "gap-y-4",
         lg: "gap-y-5",
         xl: "gap-y-6",
-        "2xl": "gap-y-8",
+        "2xl": "gap-y-7",
+        "3xl": "gap-y-8",
       };
 
       Object.entries(rowGapClasses).forEach(([rowGap, classes]) => {
@@ -110,13 +114,15 @@ describe("UGrid.vue", () => {
     it("Col Gap – applies the correct col gap class", () => {
       const colGapClasses = {
         none: "gap-x-0",
+        "3xs": "gap-x-0.5",
         "2xs": "gap-x-1",
         xs: "gap-x-2",
         sm: "gap-x-3",
         md: "gap-x-4",
         lg: "gap-x-5",
         xl: "gap-x-6",
-        "2xl": "gap-x-8",
+        "2xl": "gap-x-7",
+        "3xl": "gap-x-8",
       };
 
       Object.entries(colGapClasses).forEach(([colGap, classes]) => {

package/ui.container-grid/types.ts

@@ -18,17 +18,17 @@ export interface Props {
   /**
    * Gap between items.
    */
-  gap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  gap?: "none" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 
   /**
    * Vertical gap override.
    */
-  rowGap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  rowGap?: "none" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 
   /**
    * Horizontal gap override.
    */
-  colGap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  colGap?: "none" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 
   /**
    * Vertical alignment (align-items).

package/ui.container-row/config.ts

@@ -20,13 +20,15 @@ export default /*tw*/ {
       },
       gap: {
         none: "gap-0",
+        "3xs": "gap-0.5",
         "2xs": "gap-1",
         xs: "gap-2",
         sm: "gap-3",
         md: "gap-4",
         lg: "gap-5",
         xl: "gap-6",
-        "2xl": "gap-8",
+        "2xl": "gap-7",
+        "3xl": "gap-8",
       },
       align: {
         end: "items-end",

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

@@ -10,13 +10,15 @@ describe("URow.vue", () => {
     it("Gap – applies the correct gap class", () => {
       const gapClasses = {
         none: "gap-0",
+        "3xs": "gap-0.5",
         "2xs": "gap-1",
         xs: "gap-2",
         sm: "gap-3",
         md: "gap-4",
         lg: "gap-5",
         xl: "gap-6",
-        "2xl": "gap-8",
+        "2xl": "gap-7",
+        "3xl": "gap-8",
       };
 
       Object.entries(gapClasses).forEach(([gap, classes]) => {

package/ui.container-row/types.ts

@@ -8,7 +8,7 @@ export interface Props {
   /**
    * The distance between nested elements.
    */
-  gap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  gap?: "none" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 
   /**
    * Items vertical align (align-items).

package/ui.data-table/tests/UTableRow.test.ts

@@ -6,7 +6,7 @@ import UTableRow from "../UTableRow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
 
-import type { FlatRow, ColumnObject, UTableRowAttrs, Config } from "../types";
+import type { FlatRow, ColumnObject, UTableRowAttrs, Config, Row } from "../types";
 
 describe("UTableRow.vue", () => {
   const defaultColumns: ColumnObject[] = [
@@ -135,7 +135,7 @@ describe("UTableRow.vue", () => {
         ...defaultRow,
         name: {
           value: "John Doe",
-          class: (value, row) => `dynamic-${row.role}`,
+          class: (value: unknown, row: Row) => `dynamic-${row.role}`,
           contentClass: (value: unknown) => `content-${value}`,
         },
       };

package/ui.data-table/types.ts

@@ -6,16 +6,15 @@ import type { Config as UDividerConfig } from "../ui.container-divider/types";
 
 export type Config = typeof defaultConfig;
 
-type RowKeys = number | string | boolean | undefined | Date | Row | Row[] | ((row: Row) => string);
-
 export interface CellObject {
   contentClass?: string | ((value: unknown | string, row: Row) => string);
   class?: string | ((value: unknown | string, row: Row) => string);
-  [key: string]: unknown | string;
+  [key: string]: unknown;
 }
 
 export type RowId = string | number;
-export type Cell = CellObject | string;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Cell = CellObject & any;
 
 export interface RowData {
   [key: string]: Cell;
@@ -32,7 +31,7 @@ export interface Row {
   rowDate?: string | Date;
   row?: Row | Row[];
   class?: string | ((row: Row) => string);
-  [key: string]: Cell | RowKeys;
+  [key: string]: unknown;
 }
 
 export interface FlatRow extends Row {