vueless 0.0.648 → 0.0.649

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.648",
+  "version": "0.0.649",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -2,7 +2,7 @@
  * The file has `.js` extension because it is a node script.
  * Please do not change the extension if you do not fully understand the consequences.
  */
-
+import { merge } from "lodash-es";
 import forms from "@tailwindcss/forms";
 import colors from "tailwindcss/colors.js";
 import {
@@ -62,7 +62,7 @@ export const vuelessContentNuxt = [
 
 /**
  * Vueless tailwind static config.
- * Exported to use in `@vueless/module-nuxt`.
+ * Exported to use in `@vueless/nuxt`.
  */
 const safelist = getSafelist();
 const brandColors = getPalette(BRAND_COLOR);
@@ -100,7 +100,7 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-ring-offset)",
       },
       ringOffsetColor: {
-        DEFAULT: twColorWithOpacity("--vl-ring-offset-color"),
+        dynamic: twColorWithOpacity("--vl-ring-offset-color"),
       },
     },
     configViewer: {
@@ -126,7 +126,9 @@ export const vuelessTailwindConfig = {
  */
 export function vuelessPreset() {
   return {
-    ...vuelessTailwindConfig,
+    theme: merge({}, globalSettings.tailwindTheme || {}, vuelessTailwindConfig.theme),
+    darkMode: vuelessTailwindConfig.darkMode,
+    content: vuelessTailwindConfig.content,
     plugins: [forms],
     safelist,
   };

package/types.ts

@@ -56,8 +56,9 @@ import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
 import USelectConfig from "./ui.form-select/config.ts";
 
-import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
 import type { Props } from "tippy.js";
+import type { Config as TailwindConfig } from "tailwindcss";
+import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
 export enum ColorMode {
@@ -137,6 +138,12 @@ export interface Config extends ThemeConfig {
    */
   directive?: Partial<Directives>;
 
+  /**
+   * Tailwind CSS theme config.
+   * https://tailwindcss.com/docs/theme
+   */
+  tailwindTheme?: TailwindConfig["theme"];
+
   /**
    * Tailwind-merge config extension for custom classes.
    * All lists of rules available here:

package/ui.data-table/config.ts

@@ -74,7 +74,10 @@ export default /*tw*/ {
     container: "bg-gray-200",
   },
   bodyCheckbox: "{UCheckbox}",
-  bodyDateDivider: "{UDivider}",
+  bodyDateDivider: {
+    base: "{UDivider}",
+    label: "py-0",
+  },
   bodyEmptyState: "{UEmpty} my-8",
   footer: {
     base: "group/footer border-t border-solid border-gray-200",

package/utils/storybook.ts

@@ -65,11 +65,19 @@ export function getSlotNames(componentName: string | undefined) {
  * Create story param config to show component description with a link on GitHub.
  */
 export function getDocsDescription(componentName: string | undefined) {
-  if (!componentName) return {};
+  if (!componentName) {
+    return {};
+  }
+
+  let viewOnGitHub = "";
+
+  if (COMPONENTS[componentName as ComponentNames]) {
+    viewOnGitHub = `| [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]})`;
+  }
 
   return {
     description: {
-      component: `The \`${componentName}\` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]})`,
+      component: `The \`${componentName}\` component. ${viewOnGitHub}`,
     },
   };
 }

package/utils/theme.ts

@@ -151,7 +151,12 @@ export function setTheme(config: Config = {}) {
     brand = gray;
   }
 
-  const colors: DefaultColors = merge(tailwindColors, tailwindConfig?.theme?.extend?.colors || {});
+  const colors: DefaultColors = merge(
+    {},
+    tailwindColors,
+    tailwindConfig?.theme?.extend?.colors || {},
+    vuelessConfig?.tailwindTheme?.extend?.colors || {},
+  );
 
   const variables: Partial<VuelessCssVariables> = {
     "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,