vueless 1.3.6 → 1.3.7-beta.1

package/bin/commands/init.js

@@ -12,7 +12,7 @@ import { DEFAULT_VUELESS_CONFIG_CONTENT } from "../constants.js";
 import {
   JAVASCRIPT_EXT,
   TYPESCRIPT_EXT,
-  VUELESS_CONFIG_DIR,
+  VUELESS_APP_DIR,
   CONFIG_INDEX_FILE_NAME,
   VUELESS_CONFIG_FILE_NAME,
 } from "../../constants.js";
@@ -51,8 +51,8 @@ export async function vuelessInit(options) {
   /* Create a default config file. */
   await createVuelessConfig(destPath);
 
-  /* Create a vueless config directory and index file. */
-  await createVuelessConfigDir(fileExt);
+  /* Create a vueless app directory and index file. */
+  await createVuelessAppDir(fileExt);
 
   /* Create pnpm package manager config. */
   if (options.includes("--pnpm")) {
@@ -111,17 +111,17 @@ async function createVuelessConfig(destPath) {
 }
 
 /**
- * Creates a Vueless config directory and index file.
+ * Creates a Vueless app directory and index file.
  * @param {string} fileExt - The file extension to use for the index file.
  */
-async function createVuelessConfigDir(fileExt) {
-  const vuelessDir = path.join(cwd(), VUELESS_CONFIG_DIR);
+async function createVuelessAppDir(fileExt) {
+  const vuelessDir = path.join(cwd(), VUELESS_APP_DIR);
 
   if (existsSync(vuelessDir)) return;
 
   mkdirSync(vuelessDir);
   console.log(
-    styleText("green", `The '${VUELESS_CONFIG_DIR}' directory was created in the project root.`),
+    styleText("green", `The '${VUELESS_APP_DIR}' directory was created in the project root.`),
   );
 
   const indexFileContent = await generateConfigIndexContent();

package/constants.d.ts

@@ -339,7 +339,8 @@ export const VUELESS_CONFIGS_CACHED_DIR: "node_modules/.cache/vueless/configs";
 export const VUELESS_MERGED_CONFIGS_CACHED_DIR: "node_modules/.cache/vueless/mergedConfigs";
 export const VUELESS_CONFIG_FILE_NAME: "vueless.config";
 export const CONFIG_INDEX_FILE_NAME: "index";
-export const VUELESS_CONFIG_DIR: ".vueless";
+export const VUELESS_APP_DIR: ".vueless";
+export const VUELESS_APP_CONFIGS_DIR: ".vueless/configs";
 export const VUELESS_USER_COMPONENTS_DIR: ".vueless/components";
 export const SRC_USER_COMPONENTS_DIR: "src/components";
 export const DEFAULT_EXIT_CODE: 0;

package/constants.js

@@ -420,8 +420,9 @@ export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
 export const VUELESS_MERGED_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/mergedConfigs`;
 export const VUELESS_CONFIG_FILE_NAME = "vueless.config";
 export const CONFIG_INDEX_FILE_NAME = "index";
-export const VUELESS_CONFIG_DIR = ".vueless";
-export const VUELESS_USER_COMPONENTS_DIR = `${VUELESS_CONFIG_DIR}/components`;
+export const VUELESS_APP_DIR = ".vueless";
+export const VUELESS_APP_CONFIGS_DIR = `${VUELESS_APP_DIR}/configs`;
+export const VUELESS_USER_COMPONENTS_DIR = `${VUELESS_APP_DIR}/components`;
 export const SRC_USER_COMPONENTS_DIR = `${SRC_DIR}/components`;
 
 /* System error codes */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.6",
+  "version": "1.3.7-beta.1",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/plugin-vite.js

@@ -24,7 +24,7 @@ import { overrideComponents, restoreComponents } from "./utils/node/componentOve
 import {
   getNuxtDirs,
   getVueDirs,
-  getVuelessConfigDirs,
+  getVuelessAppDirs,
   cacheMergedConfigs,
   autoImportUserConfigs,
 } from "./utils/node/helper.js";
@@ -77,7 +77,7 @@ export const Vueless = function (options = {}) {
 
   const targetFiles = [
     ...(include || []),
-    ...getVuelessConfigDirs(),
+    ...getVuelessAppDirs(),
     ...(isNuxtModuleEnv ? getNuxtDirs() : getVueDirs()),
   ];
 

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/utils/node/helper.d.ts

@@ -4,7 +4,7 @@ export function getDirFiles(dirPath: string, ext: string, { recursive, exclude }
 }): Promise<string[]>;
 export function getNuxtDirs(): string[];
 export function getVueDirs(): string[];
-export function getVuelessConfigDirs(): string[];
+export function getVuelessAppDirs(): string[];
 export function getMergedComponentConfig(name: string): Promise<Object>;
 export function getDefaultComponentConfig(name: string, configDir: string): Promise<Object>;
 export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {

package/utils/node/helper.js

@@ -12,7 +12,8 @@ import {
   JAVASCRIPT_EXT,
   TYPESCRIPT_EXT,
   SUPPRESS_TS_CHECK,
-  VUELESS_CONFIG_DIR,
+  VUELESS_APP_DIR,
+  VUELESS_APP_CONFIGS_DIR,
   COMPONENTS_INDEX_EXPORT,
   COMPONENTS_INDEX_COMMENT,
   VUELESS_CONFIGS_CACHED_DIR,
@@ -108,8 +109,8 @@ export function getVueDirs() {
  * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vueless project.
  * @return {string[]}.
  */
-export function getVuelessConfigDirs() {
-  return [path.join(cwd(), VUELESS_CONFIG_DIR)];
+export function getVuelessAppDirs() {
+  return [path.join(cwd(), VUELESS_APP_DIR)];
 }
 
 /**
@@ -251,7 +252,7 @@ export async function detectTypeScript() {
  * @return {Promise<void>} A promise that resolves when the configuration import and index file generation is completed.
  */
 export async function autoImportUserConfigs(basePath = "") {
-  const vuelessConfigDir = path.join(cwd(), basePath, VUELESS_CONFIG_DIR);
+  const vuelessConfigDir = path.join(cwd(), basePath, VUELESS_APP_CONFIGS_DIR);
 
   const indexTsPath = path.join(vuelessConfigDir, `${CONFIG_INDEX_FILE_NAME}${TYPESCRIPT_EXT}`);
   const indexJsPath = path.join(vuelessConfigDir, `${CONFIG_INDEX_FILE_NAME}${JAVASCRIPT_EXT}`);