tide-design-system 2.0.32 → 2.0.33

package/package.json

@@ -52,5 +52,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.32"
+  "version": "2.0.33"
 }

package/src/components/TideInputCheckbox.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { ref, watch } from 'vue';
 
   import TideIcon from '@/components/TideIcon.vue';
   import { CSS } from '@/types/Styles';
@@ -34,8 +34,6 @@
   const checked = ref(props.checked || props.indeterminate);
   const indeterminate = ref(props.indeterminate);
 
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
-
   const handleClick = () => {
     checked.value = !checked.value;
   };
@@ -88,7 +86,7 @@
       :disabled="props.disabled"
       :name="props.name"
       ref="input"
-      :id="uniqueId"
+      :id="props.inputId"
       type="checkbox"
     />
 
@@ -118,7 +116,7 @@
 
     <label
       :class="[CSS.DISPLAY.FLEX, CSS.GAP.HALF, disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER]"
-      :for="uniqueId"
+      :for="props.inputId"
       @click.prevent="checked = !checked"
       v-if="label"
     >

package/src/components/TideInputRadio.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { ref, watch } from 'vue';
 
   import { CSS } from '@/types/Styles';
 
@@ -22,8 +22,6 @@
 
   const checked = ref(props.checked);
 
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
-
   watch(
     () => props.checked,
     (newValue, oldValue) => {
@@ -39,7 +37,7 @@
     <input
       :checked="checked"
       :class="[CSS.DISPLAY.NONE]"
-      :id="uniqueId"
+      :id="props.inputId"
       name=""
       type="radio"
       value=""
@@ -63,7 +61,7 @@
 
     <label
       :class="CSS.FONT.WEIGHT.FOUR_HUNDRED"
-      :for="uniqueId"
+      :for="props.inputId"
     >
       {{ props.label }}
     </label>

package/src/components/TideInputSelect.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { getCurrentInstance, computed, ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
 
   import type { SelectField } from '@/types/Field';
   import type { SelectOption, SelectOptionGroup } from '@/types/Select';
@@ -37,8 +37,6 @@
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
   const isEmpty = computed(() => value.value === undefined);
 
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
-
   const expandOptions = () => {
     const event = new MouseEvent('mousedown');
     input?.value?.dispatchEvent(event);
@@ -99,7 +97,7 @@
             !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
             CSS.FONT.WEIGHT.FIVE_HUNDRED,
           ]"
-          :for="uniqueId"
+          :for="props.inputId"
           v-if="label"
         >
           {{ formattedLabel }}
@@ -113,7 +111,7 @@
           :required="required"
           @focus="handleFocus"
           @focusout="handleFocusOut"
-          :id="uniqueId"
+          :id="props.inputId"
           v-model="value"
         >
           <template v-for="optgroup in props.optgroups">

package/src/components/TideInputText.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
 
   import type { FormValueTransformer } from '@/types/Form';
   import type { Icon } from '@/types/Icon';
@@ -71,7 +71,6 @@
   const type = computed(() =>
     props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
   );
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
 
   const handleClear = () => {
     value.value = '';
@@ -172,7 +171,7 @@
               CSS.FONT.WEIGHT.FIVE_HUNDRED,
               CSS.CURSOR.TEXT,
             ]"
-            :for="uniqueId"
+            :for="props.inputId"
             v-if="label"
           >
             {{ formattedLabel }}
@@ -193,7 +192,7 @@
             @focus="handleFocus"
             @focusout="handleFocusOut"
             @input="handleInput"
-            :id="uniqueId"
+            :id="props.inputId"
             v-model="value"
           />
         </div>

package/src/components/TideInputTextarea.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
 
   import type { ValidationError } from '@/types/Validation';
 
@@ -47,7 +47,6 @@
   const hasError = computed(() => (props.required && !value.value) || getFieldHasError(error.value, props.error));
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
   const isEmpty = computed(() => value.value === '');
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
 
   const handleFocus = () => {
     hasFocus.value = true;
@@ -101,7 +100,7 @@
           CSS.FONT.WEIGHT.FIVE_HUNDRED,
           CSS.CURSOR.TEXT,
         ]"
-        :for="uniqueId"
+        :for="props.inputId"
         ref="label"
         v-if="label"
       >
@@ -120,7 +119,7 @@
         @change="handleValidation"
         @focus="handleFocus"
         @focusout="handleFocusOut"
-        :id="uniqueId"
+        :id="props.inputId"
         v-model="value"
       />
     </div>