vueless 0.0.476-0 → 0.0.477-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.476-0",
+  "version": "0.0.477-beta.0",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -34,7 +34,7 @@
     "ts:check": "vue-tsc --build --force --noEmit",
     "ts:build": "vue-tsc --build --force --declaration --emitDeclarationOnly",
     "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package && npm run ts:build",
-    "release:beta": "release-it patch --ci --npm.publish --npm.tag=beta",
+    "release:beta": "release-it prepatch --ci --npm.publish --preRelease=beta",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",

package/preset.tailwind.d.ts

@@ -1,17 +1,17 @@
-import forms from "@tailwindcss/forms";
-import type { TailwindColorShades } from "./types";
-export declare const vuelessContent: string[];
-export declare const vuelessContentVue: string[];
-export declare const vuelessContentNuxt: string[];
-export declare const vuelessTailwindConfig: {
-    darkMode: string[];
-    content: string[];
-    theme: {
-        extend: {
-            colors: {
-                brand: Partial<TailwindColorShades>;
-                gray: Partial<TailwindColorShades>;
-                cool: {
+export function vuelessPreset(): Object;
+export function getSafelist(): any[];
+export const vuelessContent: string[];
+export const vuelessContentVue: string[];
+export const vuelessContentNuxt: string[];
+export namespace vuelessTailwindConfig {
+    let darkMode: string[];
+    let content: string[];
+    namespace theme {
+        namespace extend {
+            namespace colors {
+                let brand: Object;
+                let gray: Object;
+                let cool: {
                     '50': "#f9fafb";
                     '100': "#f3f4f6";
                     '200': "#e5e7eb";
@@ -24,93 +24,46 @@ export declare const vuelessTailwindConfig: {
                     '900': "#111827";
                     '950': "#030712";
                 };
-            };
-            spacing: {
-                "safe-top": string;
-                "safe-bottom": string;
-                "safe-left": string;
-                "safe-right": string;
-            };
-            fontSize: {
-                "2xs": string[];
-            };
-            borderRadius: {
-                dynamic: string;
-            };
-            ringWidth: {
-                dynamic: string;
-            };
-            ringOffsetWidth: {
-                dynamic: string;
-            };
-            ringOffsetColor: {
-                dynamic: string;
-            };
-        };
-        configViewer: {
-            themeReplacements: {
-                "var(--vl-ring)": number;
-                "var(--vl-ring-offset)": number;
-                "var(--vl-ring-offset-color)": string;
-                "var(--vl-rounding)": number;
-            };
-        };
-    };
-};
-export declare function vuelessPreset(): {
-    plugins: (typeof forms)[];
-    safelist: any;
-    darkMode: string[];
-    content: string[];
-    theme: {
-        extend: {
-            colors: {
-                brand: Partial<TailwindColorShades>;
-                gray: Partial<TailwindColorShades>;
-                cool: {
-                    '50': "#f9fafb";
-                    '100': "#f3f4f6";
-                    '200': "#e5e7eb";
-                    '300': "#d1d5db";
-                    '400': "#9ca3af";
-                    '500': "#6b7280";
-                    '600': "#4b5563";
-                    '700': "#374151";
-                    '800': "#1f2937";
-                    '900': "#111827";
-                    '950': "#030712";
-                };
-            };
-            spacing: {
+            }
+            let spacing: {
                 "safe-top": string;
                 "safe-bottom": string;
                 "safe-left": string;
                 "safe-right": string;
             };
-            fontSize: {
+            let fontSize: {
                 "2xs": string[];
             };
-            borderRadius: {
-                dynamic: string;
-            };
-            ringWidth: {
-                dynamic: string;
-            };
-            ringOffsetWidth: {
-                dynamic: string;
-            };
-            ringOffsetColor: {
-                dynamic: string;
-            };
-        };
-        configViewer: {
-            themeReplacements: {
+            namespace borderRadius {
+                let dynamic: string;
+            }
+            namespace ringWidth {
+                let dynamic_1: string;
+                export { dynamic_1 as dynamic };
+            }
+            namespace ringOffsetWidth {
+                let dynamic_2: string;
+                export { dynamic_2 as dynamic };
+            }
+            namespace ringOffsetColor {
+                let dynamic_3: Function;
+                export { dynamic_3 as dynamic };
+            }
+        }
+        namespace configViewer {
+            let themeReplacements: {
+                constructor: Function;
+                toString(): string;
+                toLocaleString(): string;
+                valueOf(): Object;
+                hasOwnProperty(v: PropertyKey): boolean;
+                isPrototypeOf(v: Object): boolean;
+                propertyIsEnumerable(v: PropertyKey): boolean;
                 "var(--vl-ring)": number;
                 "var(--vl-ring-offset)": number;
                 "var(--vl-ring-offset-color)": string;
                 "var(--vl-rounding)": number;
             };
-        };
-    };
-};
-export declare function getSafelist(): any;
+        }
+    }
+}

package/{preset.tailwind.ts → preset.tailwind.js}

@@ -15,13 +15,9 @@ import {
   GRAYSCALE_COLOR,
 } from "./constants.js";
 
-import type { BrandColors, GrayColors, TailwindColorShades, TailwindSafelist } from "./types";
-
-type TailwindColors = BrandColors | GrayColors | typeof GRAY_COLOR;
-
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
-const brandColor = (process.env.VUELESS_BRAND as BrandColors) || DEFAULT_BRAND_COLOR;
-const grayColor = (process.env.VUELESS_GRAY as GrayColors) || DEFAULT_GRAY_COLOR;
+const brandColor = process.env.VUELESS_BRAND || DEFAULT_BRAND_COLOR;
+const grayColor = process.env.VUELESS_GRAY || DEFAULT_GRAY_COLOR;
 
 /**
  * Vueless Tailwind CSS `content` config.
@@ -114,6 +110,7 @@ export const vuelessTailwindConfig = {
 
 /**
  * Generates preset for TailwindCSS base on Vueless config.
+ * @returns {Object}
  */
 export function vuelessPreset() {
   return {
@@ -125,9 +122,10 @@ export function vuelessPreset() {
 
 /**
  * Convert sting patterns to RegExp.
+ * @returns {Array} - TailwindCSS safelist.
  */
 export function getSafelist() {
-  return JSON.parse(process.env.VUELESS_SAFELIST || "[]").map((rule: TailwindSafelist) => ({
+  return JSON.parse(process.env.VUELESS_SAFELIST || "[]").map((rule) => ({
     ...rule,
     pattern: new RegExp(rule.pattern),
   }));
@@ -135,23 +133,25 @@ export function getSafelist() {
 
 /**
  * Transform CSS variable with RGB numbers into CSS color.
+ * @param { String } variableName
+ * @returns {Function}
  */
-function twColorWithOpacity(variableName: string) {
+function twColorWithOpacity(variableName) {
   return `rgba(var(${variableName}))`;
 }
 
 /**
  * Convert sting patterns to RegExp.
+ * @param { String } color (gray | brand)
+ * @returns { Object } - TailwindCSS color object palette.
  */
-function getPalette(color: string) {
-  const palette: Partial<TailwindColorShades> = {
+function getPalette(color) {
+  const palette = {
     DEFAULT: twColorWithOpacity(`--vl-color-${color}-default`),
   };
 
   COLOR_SHADES.forEach((shade) => {
-    palette[shade as keyof TailwindColorShades] = twColorWithOpacity(
-      `--vl-color-${color}-${shade}`,
-    );
+    palette[shade] = twColorWithOpacity(`--vl-color-${color}-${shade}`);
   });
 
   return palette;
@@ -159,8 +159,11 @@ function getPalette(color: string) {
 
 /**
  * Prepare a color object for theme replacement to fix missing css color variables in `tailwind-config-viewer`.
+ * @param { String } color (gray | brand)
+ * @param { String } tailwindColor any tailwind color with pallet.
+ * @returns { Object } - `tailwind-config-viewer` color replacement object.
  */
-function getReplacementColors(color: "gray" | "brand", tailwindColor: TailwindColors) {
+function getReplacementColors(color, tailwindColor) {
   if (tailwindColor === GRAYSCALE_COLOR || tailwindColor === COOL_COLOR) {
     tailwindColor = GRAY_COLOR;
   }
@@ -170,9 +173,7 @@ function getReplacementColors(color: "gray" | "brand", tailwindColor: TailwindCo
   };
 
   COLOR_SHADES.forEach((shade) => {
-    varsPalette[twColorWithOpacity(`--vl-color-${color}-${shade}`)] = (colors as never)[
-      tailwindColor
-    ][shade];
+    varsPalette[twColorWithOpacity(`--vl-color-${color}-${shade}`)] = colors[tailwindColor][shade];
   });
 
   return varsPalette;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.476-0",
+  "version": "0.0.477-beta.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",