vueless 0.0.406 → 0.0.407

package/package.json

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

package/ui.button/UButton.vue

@@ -145,7 +145,7 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Left icon name.
    */
   leftIcon: {
     type: String,
@@ -153,7 +153,7 @@ const props = defineProps({
   },
 
   /**
-   * Right side icon name.
+   * Right icon name.
    */
   rightIcon: {
     type: String,

package/ui.form-date-picker/UDatePicker.vue

@@ -195,7 +195,7 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Left icon name.
    */
   leftIcon: {
     type: String,
@@ -203,7 +203,7 @@ const props = defineProps({
   },
 
   /**
-   * Right side icon name.
+   * Right icon name.
    */
   rightIcon: {
     type: String,

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -273,7 +273,7 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Left icon name.
    */
   leftIcon: {
     type: String,
@@ -281,7 +281,7 @@ const props = defineProps({
   },
 
   /**
-   * Right side icon name.
+   * Right icon name.
    */
   rightIcon: {
     type: String,

package/ui.form-input/UInput.vue

@@ -11,7 +11,7 @@
     centred
     v-bind="inputLabelAttrs"
   >
-    <label :for="elementId" v-bind="blockAttrs">
+    <label :for="elementId" v-bind="wrapperAttrs">
       <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
         <!-- @slot Use it to add something before the text. -->
         <slot name="left" />
@@ -20,7 +20,7 @@
       <span
         v-if="hasSlotContent($slots['left-icon']) || leftIcon"
         ref="leftSlotWrapperRef"
-        v-bind="leftIconSlotAttrs"
+        v-bind="leftIconWrapperAttrs"
       >
         <!--
           @slot Use it to add icon before the text.
@@ -38,29 +38,27 @@
         </slot>
       </span>
 
-      <span v-bind="inputWrapperAttrs">
-        <input
-          :id="elementId"
-          ref="inputRef"
-          v-model="inputValue"
-          :placeholder="placeholder"
-          :type="inputType"
-          :readonly="readonly"
-          :disabled="disabled"
-          :maxlength="maxLength"
-          :inputmode="inputmode"
-          :data-test="dataTest"
-          v-bind="inputAttrs"
-          @focus="onFocus"
-          @blur="onBlur"
-          @input="onInput"
-          @change="onChange"
-          @mousedown="onMousedown"
-          @click="onClick"
-        />
-      </span>
-
-      <label v-if="isTypePassword" v-bind="rightIconSlotAttrs" :for="elementId">
+      <input
+        :id="elementId"
+        ref="inputRef"
+        v-model="inputValue"
+        :placeholder="placeholder"
+        :type="inputType"
+        :readonly="readonly"
+        :disabled="disabled"
+        :maxlength="maxLength"
+        :inputmode="inputmode"
+        :data-test="dataTest"
+        v-bind="inputAttrs"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+        @change="onChange"
+        @mousedown="onMousedown"
+        @click="onClick"
+      />
+
+      <label v-if="isTypePassword" v-bind="rightIconWrapperAttrs" :for="elementId">
         <UIcon
           v-if="isTypePassword"
           :name="
@@ -71,13 +69,13 @@
           color="gray"
           interactive
           internal
-          :data-test="`${dataTest}-show-password`"
+          :data-test="`${dataTest}-password-icon`"
           v-bind="passwordIconAttrs"
           @click="onClickShowPassword"
         />
       </label>
 
-      <span v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconSlotAttrs">
+      <span v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
         <!--
           @slot Use it to add icon after the text.
           @binding {string} icon-name
@@ -128,7 +126,7 @@ defineOptions({ inheritAttrs: false });
 
 const emit = defineEmits([
   /**
-   * Triggers when the input value is updated.
+   * Triggers when the input value is changes.
    * @property {string} modelValue
    * @property {number} modelValue
    */
@@ -160,8 +158,9 @@ const emit = defineEmits([
   "blur",
 
   /**
-   * Triggers when any validation rules are applied to input value.
-   * @property {string} value
+   * Triggers when the input value is changes.
+   * @property {string} modelValue
+   * @property {number} modelValue
    */
   "input",
 ]);
@@ -226,7 +225,7 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Left icon name.
    */
   leftIcon: {
     type: String,
@@ -234,7 +233,7 @@ const props = defineProps({
   },
 
   /**
-   * Right side icon name.
+   * Right icon name.
    */
   rightIcon: {
     type: String,
@@ -250,8 +249,8 @@ const props = defineProps({
   },
 
   /**
-   * Prevents input some characters (for ex. input numbers only).
-   * You can use predefined values or your own RegExp.
+   * Prevents some characters from input.
+   * You can use predefined values or own RegExp.
    * @values symbol, string, stringAndNumber, number, integer
    */
   validationRule: {
@@ -261,7 +260,7 @@ const props = defineProps({
   },
 
   /**
-   * Input type
+   * Input type.
    * @values text, number, tel, email, url, search, password
    */
   type: {
@@ -270,7 +269,7 @@ const props = defineProps({
   },
 
   /**
-   * Set proper keyboard on mobile devices.
+   * Set specific keyboard for mobile devices.
    * @values text, decimal, numeric, tel, email, url, search, none
    */
   inputmode: {
@@ -279,7 +278,7 @@ const props = defineProps({
   },
 
   /**
-   * Set input read-only.
+   * Make input read-only.
    */
   readonly: {
     type: Boolean,
@@ -354,14 +353,13 @@ const elementId = props.id || useId();
 const {
   config,
   inputAttrs,
-  blockAttrs,
+  wrapperAttrs,
   inputLabelAttrs,
   passwordIconAttrs,
-  leftIconSlotAttrs,
+  leftIconWrapperAttrs,
   leftIconAttrs,
-  inputWrapperAttrs,
   rightIconAttrs,
-  rightIconSlotAttrs,
+  rightIconWrapperAttrs,
   hasSlotContent,
 } = useAttrs(props, { isTypePassword, inputPasswordClasses });
 
@@ -438,9 +436,9 @@ function onClickShowPassword() {
  */
 function toggleReadonlyToPreventAutocomplete(toggleState) {
   if (props.noAutocomplete && !props.readonly) {
-    const input = document.getElementById(elementId);
-
-    toggleState ? input.setAttribute("readonly", "readonly") : input.removeAttribute("readonly");
+    toggleState
+      ? inputRef.value.setAttribute("readonly", "readonly")
+      : inputRef.value.removeAttribute("readonly");
   }
 }
 

package/ui.form-input/config.js

@@ -1,15 +1,8 @@
 export default /*tw*/ {
   inputLabel: "{ULabel}",
-  inputWrapper: "flex relative w-full",
-  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-2 gap-1 rounded-dynamic rounded-l-none",
-  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-2 gap-1 rounded-dynamic rounded-r-none",
-  leftIcon: "{UIcon}",
-  rightIcon: "{UIcon}",
-  passwordIcon: "",
-  block: {
+  wrapper: {
     base: `
-      w-full bg-white !opacity-100 relative flex transition
-      rounded-dynamic border border-solid border-gray-300
+      w-full bg-white relative flex border border-gray-300 rounded-dynamic transition
       hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
       focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
     `,
@@ -26,6 +19,11 @@ export default /*tw*/ {
       },
     },
   },
+  rightIconWrapper: "flex items-center justify-end whitespace-nowrap pr-2 gap-1 rounded-dynamic rounded-l-none",
+  leftIconWrapper: "flex items-center justify-end whitespace-nowrap pl-2 gap-1 rounded-dynamic rounded-r-none",
+  leftIcon: "{UIcon}",
+  rightIcon: "{UIcon}",
+  passwordIcon: "{UIcon}",
   input: {
     base: `
       block w-full py-2 px-3 font-normal leading-none text-gray-900 bg-white

package/ui.form-input-money/UInputMoney.vue

@@ -122,7 +122,7 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Left icon name.
    */
   leftIcon: {
     type: String,
@@ -130,7 +130,7 @@ const props = defineProps({
   },
 
   /**
-   * Right side icon name.
+   * Right icon name.
    */
   rightIcon: {
     type: String,

package/ui.form-input-search/UInputSearch.vue

@@ -112,7 +112,7 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Left icon name.
    */
   leftIcon: {
     type: String,
@@ -120,7 +120,7 @@ const props = defineProps({
   },
 
   /**
-   * Right side icon name.
+   * Right icon name.
    */
   rightIcon: {
     type: String,

package/ui.form-select/USelect.vue

@@ -397,7 +397,7 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Left icon name.
    */
   leftIcon: {
     type: String,
@@ -405,7 +405,7 @@ const props = defineProps({
   },
 
   /**
-   * Right side icon name.
+   * Right icon name.
    */
   rightIcon: {
     type: String,

package/ui.text-badge/UBadge.vue

@@ -139,7 +139,7 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Left icon name.
    */
   leftIcon: {
     type: String,
@@ -147,7 +147,7 @@ const props = defineProps({
   },
 
   /**
-   * Right side icon name.
+   * Right icon name.
    */
   rightIcon: {
     type: String,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.406",
+  "version": "0.0.407",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -500,7 +500,7 @@
             },
             {
               "name": "leftIcon",
-              "description": "Left side icon name.",
+              "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -509,7 +509,7 @@
             },
             {
               "name": "rightIcon",
-              "description": "Right side icon name.",
+              "description": "Right icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -699,7 +699,7 @@
             },
             {
               "name": "leftIcon",
-              "description": "Left side icon name.",
+              "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -708,7 +708,7 @@
             },
             {
               "name": "rightIcon",
-              "description": "Right side icon name.",
+              "description": "Right icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2434,7 +2434,7 @@
             },
             {
               "name": "leftIcon",
-              "description": "Left side icon name.",
+              "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2443,7 +2443,7 @@
             },
             {
               "name": "rightIcon",
-              "description": "Right side icon name.",
+              "description": "Right icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2637,7 +2637,7 @@
             },
             {
               "name": "leftIcon",
-              "description": "Left side icon name.",
+              "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2646,7 +2646,7 @@
             },
             {
               "name": "rightIcon",
-              "description": "Right side icon name.",
+              "description": "Right icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4406,7 +4406,7 @@
             },
             {
               "name": "leftIcon",
-              "description": "Left side icon name.",
+              "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4415,7 +4415,7 @@
             },
             {
               "name": "rightIcon",
-              "description": "Right side icon name.",
+              "description": "Right icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4433,7 +4433,7 @@
             },
             {
               "name": "validationRule",
-              "description": "Prevents input some characters (for ex. input numbers only).\nYou can use predefined values or your own RegExp.",
+              "description": "Prevents some characters from input.\nYou can use predefined values or own RegExp.",
               "value": {
                 "kind": "expression",
                 "type": "'symbol' | 'string' | 'stringAndNumber' | 'number' | 'integer'"
@@ -4442,7 +4442,7 @@
             },
             {
               "name": "type",
-              "description": "Input type",
+              "description": "Input type.",
               "value": {
                 "kind": "expression",
                 "type": "'text' | 'number' | 'tel' | 'email' | 'url' | 'search' | 'password'"
@@ -4451,7 +4451,7 @@
             },
             {
               "name": "inputmode",
-              "description": "Set proper keyboard on mobile devices.",
+              "description": "Set specific keyboard for mobile devices.",
               "value": {
                 "kind": "expression",
                 "type": "'text' | 'decimal' | 'numeric' | 'tel' | 'email' | 'url' | 'search' | 'none'"
@@ -4460,7 +4460,7 @@
             },
             {
               "name": "readonly",
-              "description": "Set input read-only.",
+              "description": "Make input read-only.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -4516,7 +4516,7 @@
           "events": [
             {
               "name": "update:modelValue",
-              "description": "Triggers when the input value is updated.",
+              "description": "Triggers when the input value is changes.",
               "properties": [
                 {
                   "type": [
@@ -4554,13 +4554,19 @@
             },
             {
               "name": "input",
-              "description": "Triggers when any validation rules are applied to input value.",
+              "description": "Triggers when the input value is changes.",
               "properties": [
                 {
                   "type": [
                     "string"
                   ],
-                  "name": "value"
+                  "name": "modelValue"
+                },
+                {
+                  "type": [
+                    "number"
+                  ],
+                  "name": "modelValue"
                 }
               ]
             }
@@ -4854,7 +4860,7 @@
             },
             {
               "name": "leftIcon",
-              "description": "Left side icon name.",
+              "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4863,7 +4869,7 @@
             },
             {
               "name": "rightIcon",
-              "description": "Right side icon name.",
+              "description": "Right icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -5291,7 +5297,7 @@
             },
             {
               "name": "leftIcon",
-              "description": "Left side icon name.",
+              "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -5300,7 +5306,7 @@
             },
             {
               "name": "rightIcon",
-              "description": "Right side icon name.",
+              "description": "Right icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -7489,7 +7495,7 @@
             },
             {
               "name": "leftIcon",
-              "description": "Left side icon name.",
+              "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -7498,7 +7504,7 @@
             },
             {
               "name": "rightIcon",
-              "description": "Right side icon name.",
+              "description": "Right icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"