vueless 0.0.655 → 0.0.657

package/composables/useUI.ts

@@ -95,7 +95,7 @@ export default function useUI<T>(
 
       classes = classes.replaceAll(EXTENDS_PATTERN_REG_EXP, "");
 
-      return color ? setColor(classes, color) : classes;
+      return color && !getNestedComponent(value) ? setColor(classes, color) : classes;
     });
   }
 

package/package.json

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

package/ui.button-toggle-item/config.ts

@@ -3,7 +3,6 @@ export default /*tw*/ {
     base: "{UButton} font-normal",
     defaults: {
       variant: "thirdary",
-      color: "brand",
     },
   },
   toggleButtonInactive: "{>toggleButton} text-gray-900",

package/ui.form-label/ULabel.vue

@@ -3,6 +3,7 @@ import { computed, ref } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import defaultConfig from "./config.ts";
 import { COMPONENT_NAME, PLACEMENT } from "./constants.ts";
@@ -87,8 +88,14 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
     </div>
 
     <!-- `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`">
+    <div v-if="label || hasSlotContent($slots['label']) || error || description">
+      <label
+        v-if="label || hasSlotContent($slots['label'])"
+        ref="labelRef"
+        :for="props.for"
+        v-bind="labelAttrs"
+        :data-test="`${dataTest}-label`"
+      >
         <!--
           @slot Use this to add custom content instead of the label.
           @binding {string} label
@@ -113,7 +120,13 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
   </div>
 
   <div v-else v-bind="wrapperAttrs">
-    <label v-if="label" :for="props.for" v-bind="labelAttrs" :data-test="`${dataTest}-label`">
+    <label
+      v-if="label || hasSlotContent($slots['label'])"
+      v-bind="labelAttrs"
+      ref="labelRef"
+      :for="props.for"
+      :data-test="`${dataTest}-label`"
+    >
       <!--
         @slot Use this to add custom content instead of the label.
         @binding {string} label

package/ui.form-textarea/UTextarea.vue

@@ -61,7 +61,7 @@ const slots = useSlots();
 const elementId = props.id || useId();
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
-const labelComponentRef = ref<{ labelElement: HTMLElement | null } | null>(null);
+const labelComponentRef = ref<InstanceType<typeof ULabel> | null>(null);
 const leftSlotWrapperRef = ref<HTMLElement | null>(null);
 const wrapperRef = ref<HTMLElement | null>(null);
 

package/utils/node/tailwindSafelist.js

@@ -214,7 +214,9 @@ async function findComponentColors(componentName, files, vuelessConfigFiles) {
     const fileContent = await readFile(file, "utf-8");
     const isDefaultConfig = isDefaultComponentConfig(file, componentName);
     const componentRegExp = new RegExp(`<${componentName}[^>]+>`, "g");
+    const componentExtendExp = new RegExp(`{${componentName}}`, "g");
     const matchedComponent = fileContent.match(componentRegExp);
+    const matchedExtendComponent = fileContent.match(componentExtendExp);
 
     if (!isComponentExists) {
       isComponentExists = Boolean(matchedComponent);
@@ -228,6 +230,14 @@ async function findComponentColors(componentName, files, vuelessConfigFiles) {
       });
     }
 
+    if (matchedExtendComponent) {
+      const objectColors = objectColorRegExp.exec(fileContent) || [];
+
+      objectColors.forEach((color) => {
+        if (color) colors.add(color);
+      });
+    }
+
     /* Collect color from U[Component] */
     matchedComponent?.forEach((match) => {
       const [, singleColor] = singleColorRegExp.exec(match) || [];