chore: remove custom useId implementation (#3333)

Author: FRSgit

.changeset/great-geckos-dance.md

@@ -0,0 +1,11 @@
+---
+'@storefront-ui/vue': major
+---
+
+- **[CHANGED][BREAKING]** Use `useId` method coming from `vue` package instead of custom implementation. To migrate:
+1. Update your `vue` dependency version to at least 3.5.0.
+2. Update every `useId` usage as follows:
+```diff
+-import { useId } from '@storefront-ui/vue';
++import { useId } from 'vue';
+```

apps/preview/nuxt/pages/showcases/Combobox/ComboboxBasic.vue

@@ -107,7 +107,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, watch, useId } from 'vue';
 import { offset } from '@floating-ui/vue';
 import { unrefElement } from '@vueuse/core';
 import {
@@ -118,7 +118,6 @@ import {
   useDisclosure,
   useDropdown,
   useTrapFocus,
-  useId,
 } from '@storefront-ui/vue';
 
 const inputModel = ref('');

apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue

@@ -284,7 +284,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, type Ref, watch } from 'vue';
+import { ref, type Ref, watch, useId } from 'vue';
 import {
   SfSwitch,
   SfInput,
@@ -298,7 +298,6 @@ import {
   SfIconExpandMore,
   SfListItem,
   SfIconCheck,
-  useId,
   useTrapFocus,
 } from '@storefront-ui/vue';
 import { unrefElement } from '@vueuse/core';

apps/preview/nuxt/pages/showcases/ProductCard/Details.vue

@@ -112,7 +112,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, useId } from 'vue';
 import {
   SfButton,
   SfCounter,
@@ -127,7 +127,6 @@ import {
   SfIconShoppingCart,
   SfIconAdd,
   SfIconRemove,
-  useId,
   SfIconShoppingCartCheckout,
 } from '@storefront-ui/vue';
 import { clamp } from '@storefront-ui/shared';

apps/preview/nuxt/pages/showcases/ProductCard/ProductCardHorizontal.vue

@@ -84,8 +84,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { SfLink, SfButton, SfIconSell, SfIconAdd, SfIconRemove, SfIconDelete, useId } from '@storefront-ui/vue';
+import { ref, useId } from 'vue';
+import { SfLink, SfButton, SfIconSell, SfIconAdd, SfIconRemove, SfIconDelete } from '@storefront-ui/vue';
 import { clamp } from '@storefront-ui/shared';
 import { useCounter } from '@vueuse/core';
 

apps/preview/nuxt/pages/showcases/QuantitySelector/OutOfStock.vue

@@ -23,8 +23,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { SfButton, SfIconAdd, SfIconRemove, useId } from '@storefront-ui/vue';
+import { ref, useId } from 'vue';
+import { SfButton, SfIconAdd, SfIconRemove } from '@storefront-ui/vue';
 
 const min = ref(1);
 const max = ref(10);

apps/preview/nuxt/pages/showcases/QuantitySelector/QuantitySelector.vue

@@ -40,10 +40,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, useId } from 'vue';
 import { clamp } from '@storefront-ui/shared';
 import { useCounter } from '@vueuse/core';
-import { SfButton, SfIconAdd, SfIconRemove, useId } from '@storefront-ui/vue';
+import { SfButton, SfIconAdd, SfIconRemove } from '@storefront-ui/vue';
 
 const min = ref(1);
 const max = ref(10);

apps/preview/nuxt/pages/showcases/QuantitySelector/Rounded.vue

@@ -34,9 +34,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, useId } from 'vue';
 import { useCounter } from '@vueuse/core';
-import { SfButton, SfIconAdd, SfIconRemove, useId } from '@storefront-ui/vue';
+import { SfButton, SfIconAdd, SfIconRemove } from '@storefront-ui/vue';
 import { clamp } from '@storefront-ui/shared';
 
 const min = ref(1);

apps/preview/nuxt/pages/showcases/RatingButton/Basic.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { SfRatingButton, useId } from '@storefront-ui/vue';
+import { ref, useId } from 'vue';
+import { SfRatingButton } from '@storefront-ui/vue';
 const labelId = useId();
 const modelValue = ref();
 </script>

apps/preview/nuxt/pages/showcases/RatingButton/CustomIcon.vue

@@ -21,8 +21,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { SfRatingButton, SfIconFavorite, SfIconFavoriteFilled, useId } from '@storefront-ui/vue';
+import { ref, useId } from 'vue';
+import { SfRatingButton, SfIconFavorite, SfIconFavoriteFilled } from '@storefront-ui/vue';
 const labelId = useId();
 const modelValue = ref(2);
 </script>