vueless 0.0.340 → 0.0.342

package/composables/useAutoPosition.js

@@ -1,4 +1,5 @@
 import { computed, toValue, ref } from "vue";
+import { isSSR } from "../utils/utilHelper.js";
 
 export const POSITION = {
   left: "left",
@@ -50,7 +51,7 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
   });
 
   function adjustPositionY() {
-    if (typeof window === "undefined") return;
+    if (isSSR) return;
 
     const spaceAbove = localAnchorElement.value.getBoundingClientRect().top;
     const spaceBelow = window.innerHeight - localAnchorElement.value.getBoundingClientRect().bottom;
@@ -71,7 +72,7 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
   }
 
   function adjustPositionX() {
-    if (typeof window === "undefined") return;
+    if (isSSR) return;
 
     const spaceRight = localAnchorElement.value.getBoundingClientRect().right;
     const spaceLeft = window.innerWidth - localAnchorElement.value.getBoundingClientRect().left;

package/composables/useBreakpoint.js

@@ -1,4 +1,5 @@
 import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
+import { isSSR } from "../utils/utilHelper.js";
 
 const BREAKPOINT_NAME = {
   xs: "xs",
@@ -48,18 +49,24 @@ export default function useBreakpoint() {
   });
 
   onMounted(() => {
+    if (isSSR) return;
+
     windowWidth.value = window.innerWidth;
 
     window.addEventListener("resize", resizeListener, { passive: true });
   });
 
   onBeforeUnmount(() => {
+    if (isSSR) return;
+
     window.removeEventListener("resize", resizeListener, { passive: true });
   });
 
   watch(windowWidth, setBreakpoint, { immediate: true });
 
   function resizeListener() {
+    if (isSSR) return;
+
     if (timeout) {
       window.cancelAnimationFrame(timeout);
     }

package/composables/useMutationObserver.js

@@ -1,10 +1,13 @@
 import { onBeforeUnmount, onMounted, toValue, watch } from "vue";
+import { isSSR } from "../utils/utilHelper.js";
 
 export function useMutationObserver(
   target,
   callBack,
   config = { childList: true, attributes: true, characterData: true },
 ) {
+  if (isSSR) return;
+
   const observer = new MutationObserver(callBack);
 
   onMounted(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.340",
+  "version": "0.0.342",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -55,7 +55,7 @@
     "vite": "^5.2.13",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vue": "^3.4.27",
+    "vue": "^3.5.4",
     "vue-router": "^4.3.2"
   },
   "resolutions": {

package/ui.button/UButton.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="tag"
-    :id="id"
+    :id="elementId"
     ref="buttonRef"
     :disabled="disabled"
     v-bind="buttonAttrs"
@@ -80,9 +80,9 @@
 </template>
 
 <script setup>
-import { computed, ref, watchEffect } from "vue";
+import { computed, ref, watchEffect, useId } from "vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 import ULoader from "../ui.loader/ULoader.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
@@ -225,12 +225,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -250,6 +249,8 @@ const props = defineProps({
   },
 });
 
+const elementId = props.id || useId();
+
 const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
   useAttrs(props);
 

package/ui.button-toggle-item/UToggleItem.vue

@@ -1,7 +1,7 @@
 <template>
   <UButton
     tabindex="0"
-    :for="id"
+    :for="elementId"
     :no-ring="!getToggleSeparated()"
     color="grayscale"
     variant="secondary"
@@ -22,7 +22,7 @@
     <!-- @slot Use it to add something instead of the label. -->
     <template #default>
       <input
-        :id="id"
+        :id="elementId"
         v-model="selectedItem"
         :name="getToggleName()"
         :type="getToggleType()"
@@ -48,10 +48,10 @@
 </template>
 
 <script setup>
-import { computed, inject, onMounted, ref } from "vue";
+import { computed, inject, onMounted, ref, useId } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import { TYPE_RADIO } from "../ui.button-toggle/constants.js";
 
@@ -95,12 +95,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -142,6 +141,8 @@ const getToggleDisabled = inject("getToggleDisabled", () => props.disabled || ge
 
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
+const elementId = props.id || useId();
+
 const selectedItem = ref("");
 
 const isSelected = computed(() => {

package/ui.container-accordion/UAccordion.vue

@@ -13,7 +13,7 @@
         </slot>
       </div>
 
-      <div :id="`description-${id}`" v-bind="descriptionAttrs" v-text="description" />
+      <div :id="`description-${elementId}`" v-bind="descriptionAttrs" v-text="description" />
     </div>
 
     <UDivider :size="dividerSize" v-bind="dividerAttrs" />
@@ -21,11 +21,11 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import { UAccordion } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -68,12 +68,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -95,6 +94,8 @@ const emit = defineEmits([
 
 const isOpened = ref(false);
 
+const elementId = props.id || useId();
+
 const {
   config,
   wrapperAttrs,

package/ui.container-modal/UModal.vue

@@ -6,7 +6,7 @@
   <transition v-bind="config.wrapperTransition">
     <div
       v-if="isShownModal"
-      :id="id"
+      :id="elementId"
       ref="wrapperRef"
       tabindex="0"
       :data-test="dataTest"
@@ -109,9 +109,9 @@
 </template>
 
 <script setup>
-import { computed, useSlots, watch, ref } from "vue";
+import { computed, useSlots, watch, ref, useId } from "vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -235,11 +235,10 @@ const props = defineProps({
 
   /**
    * Unique element id.
-   * @ignore
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -264,6 +263,8 @@ const emit = defineEmits([
   "back",
 ]);
 
+const elementId = props.id || useId();
+
 const {
   config,
   modalAttrs,

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <UBadge
-      :id="id"
+      :id="elementId"
       :label="label"
       :size="size"
       :color="color"
@@ -64,13 +64,13 @@
 </template>
 
 <script setup>
-import { nextTick, ref, watch } from "vue";
+import { nextTick, ref, watch, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import vClickOutside from "../directives/vClickOutside.js";
 
@@ -175,12 +175,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -212,6 +211,8 @@ const isShownOptions = ref(false);
 const selectedItem = ref("");
 const dropdownListRef = ref(null);
 
+const elementId = props.id || useId();
+
 const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
   props,
   {

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <UButton
-      :id="id"
+      :id="elementId"
       :label="label"
       :size="size"
       :color="color"
@@ -66,13 +66,13 @@
 </template>
 
 <script setup>
-import { computed, provide, ref, watch } from "vue";
+import { computed, provide, ref, watch, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import vClickOutside from "../directives/vClickOutside.js";
 
@@ -201,12 +201,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -239,6 +238,8 @@ provide("hideDropdownOptions", hideOptions);
 const isShownOptions = ref(false);
 const selectedItem = ref("");
 
+const elementId = props.id || useId();
+
 const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapperAttrs } =
   useAttrs(props, { isShownOptions });
 

package/ui.dropdown-link/UDropdownLink.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <ULink
-      :id="id"
+      :id="elementId"
       :size="size"
       :label="label"
       :color="color"
@@ -68,13 +68,13 @@
 </template>
 
 <script setup>
-import { computed, provide, ref, watch } from "vue";
+import { computed, provide, ref, watch, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULink from "../ui.button-link/ULink.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import vClickOutside from "../directives/vClickOutside.js";
 
@@ -194,12 +194,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -232,6 +231,8 @@ provide("hideDropdownOptions", hideOptions);
 const isShownOptions = ref(false);
 const selectedItem = ref("");
 
+const elementId = props.id || useId();
+
 const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
   props,
   { isShownOptions },

package/ui.dropdown-list/UDropdownList.vue

@@ -8,10 +8,10 @@
     @keydown.self.up.prevent="pointerBackward"
     @keydown.enter.stop.self="addPointerElement"
   >
-    <ul :id="`listbox-${id}`" v-bind="listAttrs" role="listbox">
+    <ul :id="`listbox-${elementId}`" v-bind="listAttrs" role="listbox">
       <li
         v-for="(option, index) of options"
-        :id="`${id}-${index}`"
+        :id="`${elementId}-${index}`"
         :key="index"
         v-bind="listItemAttrs"
         ref="optionsRef"
@@ -103,13 +103,13 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useId } from "vue";
 import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 import { isMac } from "../utils/utilPlatform.js";
 
 import usePointer from "./usePointer.js";
@@ -183,12 +183,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -213,6 +212,8 @@ const optionsRef = ref([]);
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
   usePointer(props.options, optionsRef, wrapperRef);
 
+const elementId = props.id || useId();
+
 const {
   config,
   wrapperAttrs,

package/ui.form-checkbox/UCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    :for="id"
+    :for="elementId"
     :label="label"
     :error="error"
     :size="checkboxSize"
@@ -11,7 +11,7 @@
     :data-test="`${dataTest}-label`"
   >
     <input
-      :id="id"
+      :id="elementId"
       type="checkbox"
       :value="checkboxValue"
       :true-value="trueValue"
@@ -24,7 +24,7 @@
       @change="onChange"
     />
 
-    <label v-if="isChecked" v-bind="iconWrapperAttrs" :for="id">
+    <label v-if="isChecked" v-bind="iconWrapperAttrs" :for="elementId">
       <UIcon
         internal
         :name="partial ? config.defaults.partiallyCheckedIcon : config.defaults.checkedIcon"
@@ -41,13 +41,13 @@
 </template>
 
 <script setup>
-import { inject, ref, onMounted, computed, watchEffect, toValue } from "vue";
+import { inject, ref, onMounted, computed, watchEffect, toValue, useId } from "vue";
 import { isEqual } 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 defaultConfig from "./config.js";
 import { UCheckbox } from "./constants.js";
@@ -170,12 +170,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -213,6 +212,8 @@ const checkboxName = ref("");
 const checkboxSize = ref(props.size);
 const checkboxColor = ref(props.color);
 
+const elementId = props.id || useId();
+
 const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIconAttrs } = useAttrs(
   props,
   {

package/ui.form-color-picker/UColorPicker.vue

@@ -12,7 +12,7 @@
     <div v-bind="listAttrs">
       <div v-bind="unselectedAttrs">
         <URadio
-          :id="id"
+          :id="elementId"
           :name="name"
           :size="size"
           color="gray"
@@ -22,7 +22,7 @@
           @update:model-value="onUpdateValue('')"
         />
 
-        <label :for="id">
+        <label :for="elementId">
           <UIcon
             v-if="selectedItem === ''"
             internal
@@ -51,12 +51,12 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import URadio from "../ui.form-radio/URadio.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import { UColorPicker } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -131,12 +131,11 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Unique element id.
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -164,6 +163,8 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
+const elementId = props.id || useId();
+
 const {
   config,
   colorPickerLabelAttrs,

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

@@ -1,7 +1,7 @@
 <template>
   <div v-bind="wrapperAttrs" ref="wrapperRef">
     <UInput
-      :id="id"
+      :id="elementId"
       :key="isShownCalendar"
       v-model="userFormatDate"
       :label-align="labelAlign"
@@ -65,14 +65,14 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref } from "vue";
+import { computed, nextTick, ref, useId } from "vue";
 import { merge } from "lodash-es";
 
 import UInput from "../ui.form-input/UInput.vue";
 import UCalendar from "../ui.form-calendar/UCalendar.vue";
 import { VIEW, STANDARD_USER_FORMAT } from "../ui.form-calendar/constants.js";
 
-import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/utilUI.js";
 
 import { addDays, isSameDay } from "../ui.form-calendar/utilDate.js";
 
@@ -244,11 +244,10 @@ const props = defineProps({
 
   /**
    * Unique element id.
-   * @ignore
    */
   id: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
@@ -316,6 +315,8 @@ const localValue = computed({
 
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const elementId = props.id || useId();
+
 const { config, inputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, {
   isShownCalendar,
   isTop,