vueless 0.0.647 → 0.0.648

package/package.json

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

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.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>