vueless 0.0.341 → 0.0.342

package/ui.form-input/UInput.vue

@@ -1,7 +1,7 @@
 <template>
   <ULabel
     ref="labelComponentRef"
-    :for="id"
+    :for="elementId"
     :label="label"
     :description="description"
     :disabled="disabled"
@@ -11,7 +11,7 @@
     centred
     v-bind="inputLabelAttrs"
   >
-    <label :for="id" v-bind="blockAttrs">
+    <label :for="elementId" v-bind="blockAttrs">
       <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
         <!-- @slot Use it to add something before the text. -->
         <slot name="left" />
@@ -40,7 +40,7 @@
 
       <span v-bind="inputWrapperAttrs">
         <input
-          :id="id"
+          :id="elementId"
           ref="inputRef"
           v-model="inputValue"
           :placeholder="placeholder"
@@ -60,7 +60,7 @@
         />
       </span>
 
-      <label v-if="isTypePassword" v-bind="rightIconSlotAttrs" :for="id">
+      <label v-if="isTypePassword" v-bind="rightIconSlotAttrs" :for="elementId">
         <UIcon
           v-if="isTypePassword"
           :name="
@@ -101,7 +101,7 @@
 </template>
 
 <script>
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 const VALIDATION_RULES_REG_EX = {
   integer: /\d*/g,
@@ -113,7 +113,7 @@ const VALIDATION_RULES_REG_EX = {
 </script>
 
 <script setup>
-import { ref, computed, onMounted, useSlots } from "vue";
+import { ref, computed, onMounted, useSlots, useId } from "vue";
 
 import { useMutationObserver } from "../composables/useMutationObserver.js";
 
@@ -304,11 +304,10 @@ const props = defineProps({
 
   /**
    * Unique element id.
-   * @ignore
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -350,6 +349,8 @@ const inputPasswordClasses = computed(() => {
     : "";
 });
 
+const elementId = props.id || useId();
+
 const {
   config,
   inputAttrs,

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

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    :for="id"
+    :for="elementId"
     :size="size"
     :label="label"
     :error="error"
@@ -45,7 +45,7 @@
             <UButton
               filled
               no-ring
-              :for="id"
+              :for="elementId"
               tag="label"
               variant="thirdary"
               :size="buttonSize"
@@ -57,7 +57,7 @@
             />
 
             <input
-              :id="id"
+              :id="elementId"
               ref="fileInputRef"
               type="file"
               :disabled="disabled"
@@ -94,7 +94,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, useId } from "vue";
 import { merge } from "lodash-es";
 
 import UText from "../ui.text-block/UText.vue";
@@ -102,7 +102,7 @@ import ULabel from "../ui.form-label/ULabel.vue";
 import UButton from "../ui.button/UButton.vue";
 import UFiles from "../ui.text-files/UFiles.vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 import { getFileMbSize } from "./utilFileForm.js";
 
 import useAttrs from "./useAttrs.js";
@@ -194,12 +194,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
   /**
    * Sets component ui config object.
@@ -237,6 +236,8 @@ const { tm } = useLocale();
 const dropZoneRef = ref(null);
 const fileInputRef = ref(null);
 
+const elementId = props.id || useId();
+
 const {
   config,
   inputLabelAttrs,

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

@@ -1,6 +1,6 @@
 <template>
   <UInput
-    :id="id"
+    :id="elementId"
     ref="moneyInputRef"
     v-model="formattedValue"
     :size="size"
@@ -42,9 +42,9 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, onMounted, nextTick } from "vue";
+import { computed, ref, watch, onMounted, nextTick, useId } from "vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import UInput from "../ui.form-input/UInput.vue";
 import { SYMBOL_MINUS } from "../ui.text-money/constants.js";
@@ -212,11 +212,10 @@ const props = defineProps({
 
   /**
    * Unique element id.
-   * @ignore
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -240,6 +239,8 @@ const emit = defineEmits(["update:modelValue", "keyup", "blur", "input"]);
 
 const moneyInputRef = ref(null);
 
+const elementId = props.id || useId();
+
 const { inputAttrs } = useAttrs(props);
 
 const { formattedValue, rawValue, setValue } = useFormatCurrency(`#${props.id}`, () => ({

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

@@ -1,6 +1,6 @@
 <template>
   <UInput
-    :id="id"
+    :id="elementId"
     ref="searchInput"
     v-model="search"
     :size="size"
@@ -78,12 +78,12 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
 import UButton from "../ui.button/UButton.vue";
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 import { debounce as debounceMethod } from "../utils/utilHelper.js";
 
 import { UInputSearch } from "./constants.js";
@@ -201,11 +201,10 @@ const props = defineProps({
 
   /**
    * Unique element id.
-   * @ignore
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   debounce: {
@@ -251,6 +250,8 @@ const emit = defineEmits([
 
 const localValue = ref("");
 
+const elementId = props.id || useId();
+
 const { config, inputAttrs, searchIconAttrs, clearIconAttrs, buttonAttrs } = useAttrs(props);
 
 const search = computed({

package/ui.form-radio/URadio.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    :for="id"
+    :for="elementId"
     :label="label"
     :error="error"
     :size="radioSize"
@@ -11,7 +11,7 @@
     :data-test="`${dataTest}-label`"
   >
     <input
-      :id="id"
+      :id="elementId"
       type="radio"
       :value="radioValue"
       :name="radioName"
@@ -29,10 +29,10 @@
 </template>
 
 <script setup>
-import { computed, inject, onMounted, ref, watchEffect, toValue } from "vue";
+import { computed, inject, onMounted, ref, watchEffect, toValue, useId } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
 import useAttrs from "./useAttrs.js";
@@ -139,12 +139,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -187,6 +186,8 @@ const isChecked = computed(() => {
   return JSON.stringify(currentValue) === JSON.stringify(props.value);
 });
 
+const elementId = props.id || useId();
+
 const { radioAttrs, radioLabelAttrs } = useAttrs(props, { radioColor, radioSize });
 
 const radioValue = computed(() => {

package/ui.form-select/USelect.vue

@@ -1,7 +1,7 @@
 <template>
   <ULabel
     ref="labelComponentRef"
-    :for="id"
+    :for="elementId"
     :size="size"
     :label="label"
     :error="error"
@@ -17,7 +17,7 @@
       ref="wrapperRef"
       :tabindex="searchable || disabled ? -1 : 0"
       role="combobox"
-      :aria-owns="'listbox-' + id"
+      :aria-owns="'listbox-' + elementId"
       v-bind="wrapperAttrs"
       @focus="activate"
       @blur="deactivate"
@@ -201,7 +201,7 @@
         <div v-bind="searchAttrs">
           <input
             v-show="searchable || !localValue || multiple || !isOpen"
-            :id="id"
+            :id="elementId"
             ref="searchInputRef"
             v-model="search"
             type="text"
@@ -210,7 +210,7 @@
             :placeholder="inputPlaceholder"
             :value="search"
             :disabled="disabled"
-            :aria-controls="'listbox-' + id"
+            :aria-controls="'listbox-' + elementId"
             v-bind="searchInputAttrs"
             @focus="activate"
             @blur.prevent="deactivate"
@@ -308,13 +308,13 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick, watch, useSlots, onMounted } from "vue";
+import { ref, computed, nextTick, watch, useSlots, onMounted, useId } from "vue";
 import { debounce, merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 import { isMac } from "../utils/utilPlatform.js";
 
 import SelectService from "./utilSelect.js";
@@ -507,12 +507,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -608,6 +607,8 @@ const selectedLabel = computed(() => {
   return isLocalValue.value ? getOptionLabel(localValue.value) : "";
 });
 
+const elementId = props.id || useId();
+
 const {
   config,
   hasSlotContent,

package/ui.form-switch/USwitch.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    :for="id"
+    :for="elementId"
     :size="size"
     :label="label"
     :description="description"
@@ -10,9 +10,9 @@
     v-bind="switchLabelAttrs"
     @click="onClickToggle"
   >
-    <label :for="id" v-bind="wrapperAttrs">
+    <label :for="elementId" v-bind="wrapperAttrs">
       <input
-        :id="id"
+        :id="elementId"
         v-model="checkedValue"
         type="checkbox"
         :disabled="disabled"
@@ -38,12 +38,12 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, useId } from "vue";
 import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import { USwitch } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -129,11 +129,10 @@ const props = defineProps({
 
   /**
    * Unique element id.
-   * @ignore
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -171,6 +170,8 @@ const checkedValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const elementId = props.id || useId();
+
 const {
   config,
   toggleIconAttrs,

package/ui.form-textarea/UTextarea.vue

@@ -1,7 +1,7 @@
 <template>
   <ULabel
     ref="labelComponentRef"
-    :for="id"
+    :for="elementId"
     :label="label"
     :error="error"
     :description="description"
@@ -14,15 +14,15 @@
     <label
       v-if="hasSlotContent($slots['left'])"
       ref="leftSlotWrapperRef"
-      :for="id"
+      :for="elementId"
       v-bind="leftSlotAttrs"
     >
       <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
     </label>
-    <label ref="textareaWrapperRef" :for="id" v-bind="textareaWrapperAttrs">
+    <label ref="textareaWrapperRef" :for="elementId" v-bind="textareaWrapperAttrs">
       <textarea
-        :id="id"
+        :id="elementId"
         ref="textareaRef"
         v-model="localValue"
         :value="modelValue"
@@ -43,7 +43,7 @@
         @keydown.backspace="onBackspace"
       />
     </label>
-    <label v-if="hasSlotContent($slots['right'])" :for="id" v-bind="rightSlotAttrs">
+    <label v-if="hasSlotContent($slots['right'])" :for="elementId" v-bind="rightSlotAttrs">
       <!-- @slot Use it to add something after the text. -->
       <slot name="right" />
     </label>
@@ -51,10 +51,10 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch, useSlots } from "vue";
+import { computed, onMounted, ref, watch, useSlots, useId } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import { UTextarea } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -171,12 +171,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -231,6 +230,8 @@ const emit = defineEmits([
 
 const slots = useSlots();
 
+const elementId = props.id || useId();
+
 const {
   textareaAttrs,
   textareaLabelAttrs,

package/ui.text-file/UFile.vue

@@ -1,8 +1,8 @@
 <template>
   <ULink :href="url" no-ring v-bind="fileAttrs" :data-test="dataTest">
-    <slot name="left" :file="{ id, label, url, imageUrl }" />
+    <slot name="left" :file="{ elementId, label, url, imageUrl }" />
 
-    <slot :file="{ id, label, url, imageUrl }">
+    <slot :file="{ elementId, label, url, imageUrl }">
       <div v-bind="bodyAttrs">
         <img v-if="imageUrl" :alt="label" :src="imageUrl" v-bind="fileImageAttrs" />
 
@@ -22,17 +22,17 @@
       </div>
     </slot>
 
-    <slot name="right" :file="{ id, label, url, imageUrl }" />
+    <slot name="right" :file="{ elementId, label, url, imageUrl }" />
   </ULink>
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useId } from "vue";
 
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import useAttrs from "./useAttrs.js";
 import { UFile } from "./constants.js";
@@ -75,12 +75,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -102,6 +101,8 @@ const props = defineProps({
 
 const focus = ref(false);
 
+const elementId = props.id || useId();
+
 const { config, fileAttrs, bodyAttrs, fileIconAttrs, fileLabelAttrs, fileImageAttrs } = useAttrs(
   props,
   {

package/utils/utilUI.js

@@ -124,7 +124,7 @@ export function setColor(classes, color) {
 }
 
 /**
- Generates unique #id.
+ Generates simple unique identifier.
  @param { Number } length
  @returns { String }
  */