vueless 0.0.119 → 0.0.121

package/directive.tooltip/index.js

@@ -1,12 +1,15 @@
 import tippy from "tippy.js";
 import { merge } from "lodash-es";
 
-import vuelessConfig from "../../../vueless.config.js";
-
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light.css";
 import "tippy.js/animations/shift-away.css";
 
+/* Load Vueless config from the project root. */
+const [vuelessConfig] = Object.values(
+  import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
+);
+
 const globalSettings = vuelessConfig?.directive?.tooltip || {};
 const defaultSettings = {
   arrow: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -21,7 +21,7 @@
     "sb:dev": "npx @vueless/web-types && node prepare.icons && storybook dev -p 6006 --docs --no-open",
     "sb:build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "sb:preview": "vite preview --host --outDir=storybook-static",
-    "package: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.dist"
+    "package: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/"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",
@@ -37,8 +37,8 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.14",
-    "@vueless/storybook": "^0.0.20",
+    "@vueless/plugin-vite": "^0.0.19",
+    "@vueless/storybook": "^0.0.22",
     "@vueless/web-types": "^0.0.6",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",

package/preset.tailwind/constants/index.js

@@ -0,0 +1,23 @@
+export const GRAY_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
+export const GRAYSCALE_COLOR = "grayscale";
+export const BRAND_COLOR = "brand";
+export const BRAND_COLORS = [
+  BRAND_COLOR,
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+];

package/preset.tailwind/{index.js → index.cjs}

@@ -1,30 +1,11 @@
 import colors from "tailwindcss/colors.js";
 import forms from "@tailwindcss/forms";
-import vuelessConfig from "../../../vueless.config.js";
+import { BRAND_COLORS, GRAY_COLORS, GRAYSCALE_COLOR } from "./constants/index.js";
 
-export const GRAY_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
-export const GRAYSCALE_COLOR = "grayscale";
-export const BRAND_COLOR = "brand";
-export const BRAND_COLORS = [
-  BRAND_COLOR,
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
-];
+/* Load Vueless config from the project root. */
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const { default: vuelessConfig } = require(process.cwd() + "/vueless.config.js");
 
 /**
  * Generates preset for TailwindCSS base on Vueless config.

package/service.storybook/index.js

@@ -1,7 +1,10 @@
-import { contributions } from "../web-types.json";
+/* Load Web-Types from the project root. */
+const [webTypes] = Object.values(
+  import.meta.glob("/web-types.json", { eager: true, import: "default" }),
+);
 
 const getComponentData = (componentName) => {
-  return contributions.html.tags.find((item) => item.name === componentName);
+  return webTypes.contributions.html.tags.find((item) => item.name === componentName);
 };
 
 export function getSlotNames(componentName) {

package/service.ui/index.js

@@ -4,8 +4,17 @@ import { twMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";
 
 import { cloneDeep } from "../service.helper";
-import { BRAND_COLORS, GRAY_COLORS, GRAYSCALE_COLOR, BRAND_COLOR } from "../preset.tailwind";
-import vuelessConfig from "../../../vueless.config.js";
+import {
+  BRAND_COLORS,
+  GRAY_COLORS,
+  GRAYSCALE_COLOR,
+  BRAND_COLOR,
+} from "../preset.tailwind/constants";
+
+/* Load Vueless config from the project root. */
+const [vuelessConfig] = Object.values(
+  import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
+);
 
 /*
   Export cva (class variance authority) methods extended with tailwind-merge.

package/ui.data-table/configs/default.config.js

@@ -20,7 +20,7 @@ export default /*tw*/ {
   stickyHeaderColumn: "flex-none text-sm font-normal text-gray-500 p-4 whitespace-nowrap",
   selectedRowsCount: "absolute left-11 pr-2 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
   selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
-  innerWrapper: "!overflow-visible rounded-lg border border-gray-200",
+  innerWrapper: "!overflow-x-auto rounded-lg border border-gray-200",
   innerWrapperSelected: "!rounded-t-none border-t-0",
   table: "min-w-full border-none text-sm w-full",
   tableLoader: "absolute !top-auto",

package/ui.navigation-stepper/index.vue

@@ -46,7 +46,7 @@ import colors from "tailwindcss/colors";
 
 import UHeader from "../ui.text-header";
 import UIService from "../service.ui";
-import { GRAY_COLORS } from "../preset.tailwind";
+import { GRAY_COLORS } from "../preset.tailwind/constants";
 
 import { UStepper } from "./constants/index";
 import defaultConfig from "./configs/default.config";

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "contributions": {
     "html": {
       "description-markup": "markdown",