chore: remove custom useId implementation

.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>

apps/preview/nuxt/pages/showcases/RatingButton/MaxNumber.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(5);
 </script>

apps/preview/nuxt/pages/showcases/RatingForms/ProductRating.vue

@@ -39,8 +39,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { SfModal, SfButton, SfIconClose, useDisclosure, SfRatingButton, useId } from '@storefront-ui/vue';
+import { ref, useId } from 'vue';
+import { SfModal, SfButton, SfIconClose, useDisclosure, SfRatingButton } from '@storefront-ui/vue';
 
 const { isOpen, open, close } = useDisclosure({ initialValue: true });
 const modelValue = ref();

apps/preview/nuxt/pages/showcases/RatingForms/ProductRatingWithReview.vue

@@ -48,8 +48,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
-import { SfButton, SfRatingButton, SfInput, useId } from '@storefront-ui/vue';
+import { ref, computed, useId } from 'vue';
+import { SfButton, SfRatingButton, SfInput } from '@storefront-ui/vue';
 
 const ratingLabelId = useId();
 const ratingModelValue = ref();

apps/preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownDisabled.vue

@@ -59,15 +59,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, type Ref } from 'vue';
+import { ref, type Ref, useId } from 'vue';
 import { unrefElement } from '@vueuse/core';
 import {
   useDropdown,
   useDisclosure,
   SfIconExpandMore,
   SfListItem,
   SfIconCheck,
-  useId,
   useTrapFocus,
 } from '@storefront-ui/vue';
 

apps/preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownError.vue

@@ -59,15 +59,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, type Ref } from 'vue';
+import { ref, computed, type Ref, useId } from 'vue';
 import { unrefElement } from '@vueuse/core';
 import {
   useDropdown,
   useDisclosure,
   SfIconExpandMore,
   SfListItem,
   SfIconCheck,
-  useId,
   useTrapFocus,
 } from '@storefront-ui/vue';
 

apps/preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownPreselected.vue

@@ -53,15 +53,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, type Ref } from 'vue';
+import { ref, type Ref, useId } from 'vue';
 import { unrefElement } from '@vueuse/core';
 import {
   useDropdown,
   useDisclosure,
   SfIconExpandMore,
   SfListItem,
   SfIconCheck,
-  useId,
   useTrapFocus,
 } from '@storefront-ui/vue';
 

apps/preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownWithPlaceholder.vue

@@ -53,15 +53,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, type Ref } from 'vue';
+import { ref, type Ref, useId } from 'vue';
 import { unrefElement } from '@vueuse/core';
 import {
   useDropdown,
   useDisclosure,
   SfIconExpandMore,
   SfListItem,
   SfIconCheck,
-  useId,
   useTrapFocus,
 } from '@storefront-ui/vue';
 

packages/sfui/frameworks/nuxt/src/module.ts

@@ -56,8 +56,7 @@ export default defineNuxtModule<ModuleOptions>({
       if (key.startsWith('Sf') && (storefrontUi[key].__name || storefrontUi[key].name)) {
         components.push(key);
       } else if (key.startsWith('use')) {
-        // `useId` is already available in nuxtjs, we omit `useId` because of duplication warning
-        if (key !== 'useId') composables.push(key);
+        composables.push(key);
       }
     });
 

packages/sfui/frameworks/vue/components/SfChip/SfChip.vue

@@ -5,9 +5,8 @@
 };
 </script>
 <script lang="ts" setup>
-import { type PropType, type InputHTMLAttributes } from 'vue';
-import { toRefs, computed } from 'vue';
-import { useId, SfChipSize, useSlotsRef, twMerge, useTwMergeRoot } from '@storefront-ui/vue';
+import { type PropType, type InputHTMLAttributes, useId, toRefs, computed } from 'vue';
+import { SfChipSize, useSlotsRef, twMerge, useTwMergeRoot } from '@storefront-ui/vue';
 
 const props = defineProps({
   size: {
@@ -64,19 +63,19 @@
     type="checkbox"
     v-bind="inputProps"
   />
   <label
     :for="inputId"
     :class="
       twMerge(
         'cursor-pointer ring-1 ring-neutral-200 ring-inset rounded-full inline-flex items-center transition duration-300 justify-center outline-offset-2 outline-secondary-600 peer-next-checked:ring-2 peer-next-checked:ring-primary-700 hover:bg-primary-100 peer-next-hover:ring-primary-200 active:bg-primary-200 peer-next-active:ring-primary-300 peer-next-disabled:cursor-not-allowed peer-next-disabled:bg-disabled-100 peer-next-disabled:opacity-50 peer-next-disabled:ring-1 peer-next-disabled:ring-disabled-200 peer-next-disabled:hover:ring-disabled-200 peer-next-checked:hover:ring-primary-700 peer-next-checked:active:ring-primary-700 peer-next-focus-visible:outline',
         sizeClasses[size],
         ...paddingForSize,
         $attrs.class,
       )
     "
     data-testid="chip"
     v-bind="attrsWithoutClass"
   >
     <slot v-if="$slots.prefix" name="prefix" />
     <slot />
     <slot v-if="$slots.suffix" name="suffix" />

packages/sfui/frameworks/vue/shared/index.ts

@@ -2,4 +2,3 @@ export * from './props';
 export * from './reactiveContext';
 export * from './render';
 export * from './types';
-export * from './useId';