vueless 0.0.647 → 0.0.649

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.647",
+  "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.button-toggle/UToggle.vue

@@ -86,6 +86,14 @@ const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig)
     v-bind="toggleLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="itemsAttrs">
       <!-- @slot Use it to add UToggleItem directly. -->
       <slot>

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/ui.form-checkbox/UCheckbox.vue

@@ -136,6 +136,14 @@ const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIcon
     v-bind="checkboxLabelAttrs"
     :data-test="`${dataTest}-label`"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <input
       :id="elementId"
       type="checkbox"

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -77,6 +77,14 @@ const { groupLabelAttrs, groupCheckboxAttrs, listAttrs } = useUI<Config>(default
     v-bind="groupLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="listAttrs">
       <!-- @slot Use it to add URadio directly. -->
       <slot>

package/ui.form-color-picker/UColorPicker.vue

@@ -69,6 +69,14 @@ const {
     v-bind="colorPickerLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="listAttrs">
       <div v-bind="unselectedAttrs">
         <URadio

package/ui.form-input/UInput.vue

@@ -266,6 +266,14 @@ const {
     interactive
     v-bind="inputLabelAttrs"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <label :for="elementId" v-bind="wrapperAttrs">
       <span
         v-if="hasSlotContent($slots['left']) || leftIcon"

package/ui.form-input-file/UInputFile.vue

@@ -274,6 +274,14 @@ const {
     interactive
     v-bind="inputLabelAttrs"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneAttrs">
       <UText v-if="hasSlotContent($slots['top'])" :size="size" v-bind="descriptionTopAttrs">
         <!-- @slot Use it to add something above the component content. -->

package/ui.form-input-number/UInputNumber.vue

@@ -76,6 +76,14 @@ const {
     v-bind="labelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <UButton
       variant="thirdary"
       size="sm"

package/ui.form-input-rating/UInputRating.vue

@@ -74,6 +74,14 @@ const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, stars
     v-bind="inputLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="containerAttrs">
       <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
         <!--

package/ui.form-label/ULabel.vue

@@ -88,13 +88,15 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
 
     <!-- `v-bind` isn't assigned, because the div is system -->
     <div v-if="label || error || description">
-      <label
-        v-if="label"
-        :for="props.for"
-        v-bind="labelAttrs"
-        :data-test="`${dataTest}-label`"
-        v-text="label"
-      />
+      <label v-if="label" :for="props.for" v-bind="labelAttrs" :data-test="`${dataTest}-label`">
+        <!--
+          @slot Use this to add custom content instead of the label.
+          @binding {string} label
+        -->
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </label>
 
       <div v-if="error" v-bind="descriptionAttrs" :data-test="`${dataTest}-error`" v-text="error" />
 
@@ -111,14 +113,15 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
   </div>
 
   <div v-else v-bind="wrapperAttrs">
-    <label
-      v-if="label"
-      ref="labelRef"
-      :for="props.for"
-      v-bind="labelAttrs"
-      :data-test="`${dataTest}-label`"
-      v-text="label"
-    />
+    <label v-if="label" :for="props.for" v-bind="labelAttrs" :data-test="`${dataTest}-label`">
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label">
+        {{ label }}
+      </slot>
+    </label>
 
     <div v-bind="contentAttrs">
       <!-- @slot Use it to add label content. -->

package/ui.form-label/storybook/stories.ts

@@ -9,6 +9,7 @@ import ULabel from "../../ui.form-label/ULabel.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UText from "../../ui.text-block/UText.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -39,7 +40,7 @@ export default {
 const defaultTemplate = "This is plain text";
 
 const DefaultTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs) => ({
-  components: { ULabel, UText, UIcon },
+  components: { ULabel, UText, UIcon, UBadge },
   setup() {
     const slots = getSlotNames(ULabel.__name);
 
@@ -108,10 +109,20 @@ Error.args = { error: "Error description" };
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  label: "Custom badge label",
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" color="green" />
+    </template>
+  `,
+};
+
 export const SlotFooter = DefaultTemplate.bind({});
 SlotFooter.args = {
   slotTemplate: `
-    <template #footer>
+    <template #bottom>
       <UIcon name="star" color="green" />
     </template>
   `,

package/ui.form-radio/URadio.vue

@@ -107,6 +107,14 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
     v-bind="radioLabelAttrs"
     :data-test="`${dataTest}-label`"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <input
       :id="elementId"
       type="radio"

package/ui.form-radio-group/URadioGroup.vue

@@ -60,6 +60,14 @@ const { groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultCon
     v-bind="groupLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="listAttrs">
       <!-- @slot Use it to add URadio directly. -->
       <slot>

package/ui.form-select/USelect.vue

@@ -456,6 +456,14 @@ const {
     :data-test="dataTest"
     :tabindex="-1"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div
       ref="wrapperRef"
       :tabindex="searchable || disabled ? -1 : 0"

package/ui.form-switch/USwitch.vue

@@ -100,6 +100,14 @@ const {
     :data-test="dataTest"
     @click="onClickToggle"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <label :for="elementId" v-bind="wrapperAttrs">
       <input
         :id="elementId"

package/ui.form-textarea/UTextarea.vue

@@ -207,6 +207,14 @@ const { textareaAttrs, textareaLabelAttrs, wrapperAttrs, leftSlotAttrs, rightSlo
     v-bind="textareaLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <label ref="wrapperRef" :for="elementId" v-bind="wrapperAttrs">
       <div
         v-if="hasSlotContent($slots['left'])"

package/ui.text-files/UFiles.vue

@@ -62,6 +62,14 @@ const { filesLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig);
     :align="labelAlign"
     v-bind="filesLabelAttrs"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="itemsAttrs">
       <!-- @slot Use it to add UFile. -->
       <slot>

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`,