vueless 0.0.237 → 0.0.238

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.237",
+  "version": "0.0.238",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-input/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    ref="labelComponent"
+    ref="labelComponentRef"
     :for="id"
     :label="label"
     :description="description"
@@ -12,14 +12,14 @@
     v-bind="labelAttrs"
   >
     <label :for="id" v-bind="blockAttrs">
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
+      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
         <!-- @slot Use it to add something before the text. -->
         <slot name="left" />
       </span>
 
       <span
         v-if="hasSlotContent($slots['icon-left']) || iconLeft"
-        ref="leftSlotWrapper"
+        ref="leftSlotWrapperRef"
         v-bind="leftIconSlotAttrs"
       >
         <!--
@@ -35,7 +35,7 @@
       <span v-bind="inputWrapperAttrs">
         <input
           :id="id"
-          ref="input"
+          ref="inputRef"
           v-model="inputValue"
           :placeholder="placeholder"
           :type="inputType"
@@ -315,11 +315,11 @@ const props = defineProps({
 const slots = useSlots();
 
 const isShownPassword = ref(false);
-const input = ref(null);
-const labelComponent = ref(null);
-const leftSlotWrapper = ref(null);
+const inputRef = ref(null);
+const labelComponentRef = ref(null);
+const leftSlotWrapperRef = ref(null);
 
-defineExpose({ input });
+defineExpose({ inputRef });
 
 const isTypePassword = computed(() => props.type === "password");
 
@@ -440,12 +440,12 @@ function setLabelPosition() {
     return;
   }
 
-  let leftSlotOrIconWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+  let leftSlotOrIconWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
-  const leftPaddingValue = parseFloat(getComputedStyle(input.value).paddingLeft);
+  const leftPaddingValue = parseFloat(getComputedStyle(inputRef.value).paddingLeft);
 
-  if (labelComponent.value.labelElement) {
-    labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
+  if (labelComponentRef.value.labelElement) {
+    labelComponentRef.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
   }
 }
 </script>

package/ui.form-select/configs/default.config.js

@@ -13,7 +13,7 @@ export default /*tw*/ {
     variants: {
       error: {
         true: `
-          border-red-300 hover:border-red-300
+          bg-red-50 border-red-300 hover:border-red-300
           focus-within:border-red-500 focus-within:ring-red-100
         `,
       },

package/ui.form-switch/configs/default.config.js

@@ -2,8 +2,7 @@ export default /*tw*/ {
   label: "{ULabel}",
   wrapper: {
     base: `
-      transition duration-300
-      flex items-center p-0.5 relative rounded-3xl cursor-pointer
+      flex items-center p-0.5 relative rounded-3xl cursor-pointer transition
       ring-opacity-10 focus-within:ring-dynamic focus-within:ring-offset-dynamic
     `,
     variants: {
@@ -28,7 +27,7 @@ export default /*tw*/ {
   },
   input: "absolute size-0 opacity-0",
   circle: {
-    base: "transition duration-300 rounded-full bg-white flex items-center justify-center",
+    base: "transition-all duration-300 rounded-full bg-white flex items-center justify-center",
     variants: {
       size: {
         sm: "size-3",
@@ -46,7 +45,7 @@ export default /*tw*/ {
   selectedIconName: "check",
   unselectedIconName: "close",
   toggleLabel: {
-    base: "absolute text-center text-2xs font-medium uppercase text-white transition duration-300",
+    base: "absolute text-center text-2xs font-medium uppercase text-white",
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },

package/ui.form-textarea/configs/default.config.js

@@ -12,7 +12,7 @@ export default /*tw*/ {
     variants: {
       error: {
         true: `
-          border-red-300
+          bg-red-50 border-red-300
           hover:border-red-400 hover:focus-within:border-red-500
           focus-within:border-red-500 focus-within:ring-red-100
         `,
@@ -51,7 +51,6 @@ export default /*tw*/ {
     type: "text",
     inputmode: "text",
     labelAlign: "topInside",
-    error: false,
     disabled: false,
     readonly: false,
     noAutocomplete: false,

package/ui.form-textarea/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    ref="labelComponent"
+    ref="labelComponentRef"
     :for="id"
     :label="label"
     :error="error"
@@ -13,17 +13,17 @@
   >
     <label
       v-if="hasSlotContent($slots['left'])"
-      ref="leftSlotWrapper"
+      ref="leftSlotWrapperRef"
       :for="id"
       v-bind="leftSlotAttrs"
     >
       <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
     </label>
-    <label ref="textareaWrapper" :for="id" v-bind="textareaWrapperAttrs">
+    <label ref="textareaWrapperRef" :for="id" v-bind="textareaWrapperAttrs">
       <textarea
         :id="id"
-        ref="textarea"
+        ref="textareaRef"
         v-model="localValue"
         :value="modelValue"
         :placeholder="placeholder"
@@ -231,10 +231,10 @@ const {
   hasSlotContent,
 } = useAttrs(props);
 
-const textarea = ref(null);
-const labelComponent = ref(null);
-const leftSlotWrapper = ref(null);
-const textareaWrapper = ref(null);
+const textareaRef = ref(null);
+const labelComponentRef = ref(null);
+const leftSlotWrapperRef = ref(null);
+const textareaWrapperRef = ref(null);
 
 const localValue = computed({
   get() {
@@ -245,7 +245,7 @@ const localValue = computed({
   },
 });
 
-defineExpose({ textarea });
+defineExpose({ textareaRef });
 
 onMounted(() => toggleReadonly(true));
 
@@ -292,13 +292,13 @@ function toggleReadonly(hasReadonly) {
 function setLabelPosition() {
   if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
 
-  const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+  const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
-  if (labelComponent.value.labelElement) {
-    labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  if (labelComponentRef.value.labelElement) {
+    labelComponentRef.value.labelElement.style.left = `${leftSlotWidth}px`;
   }
 
-  textareaWrapper.value.style.paddingLeft = `${leftSlotWidth}px`;
+  textareaWrapperRef.value.style.paddingLeft = `${leftSlotWidth}px`;
 }
 
 onMounted(() => setLabelPosition());

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.237",
+  "version": "0.0.238",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7916,7 +7916,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "false"
+              "default": "\"\""
             },
             {
               "name": "rows",