fix: fixes related to migration/compat build

carbon-design-system · Dec 8, 2023 · 525bc93 · 525bc93
1 parent bff4456
commit 525bc93
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 25 deletions.
diff --git a/src/components/CvDatePicker/CvDatePicker.vue b/src/components/CvDatePicker/CvDatePicker.vue
@@ -42,8 +42,8 @@
             data-date-picker-input
             role="datepicker"
             :data-invalid="isInvalid || null"
-            :disabled="disabled"
-            :data-date-picker-input-from="getKind === 'range'"
+            :disabled="disabled || null"
+            :data-date-picker-input-from="`${getKind === 'range'}`"
             :class="`${carbonPrefix}--date-picker__input`"
             :pattern="pattern"
             :placeholder="placeholder"
@@ -87,9 +87,9 @@
             type="text"
             data-date-picker-input
             role="todatepicker"
-            :data-date-picker-input-to="kind === 'range'"
+            :data-date-picker-input-to="`${kind === 'range'}`"
             :data-invalid="isInvalid || null"
-            :disabled="disabled"
+            :disabled="disabled || null"
             :class="`${carbonPrefix}--date-picker__input`"
             :pattern="pattern"
             :placeholder="placeholder"

diff --git a/src/components/CvModal/CvModal.vue b/src/components/CvModal/CvModal.vue
@@ -8,7 +8,7 @@
         `cv-modal ${carbonPrefix}--modal`,
         {
           'is-visible': dataVisible,
-          [`${carbonPrefix}--modal--danger`]: kind === 'danger',
+          [`${carbonPrefix}--modal--danger`]: kind === MODAL_KIND_DANGER,
         },
       ]"
       tabindex="-1"
@@ -119,6 +119,15 @@
 </template>
 
 <script setup>
+import {
+  MODAL_KIND_DANGER,
+  MODAL_KIND_PRIMARY,
+  MODAL_KINDS,
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_LARGE,
+  MODAL_SIZE_SMALL,
+  MODAL_SIZES,
+} from './index';
 import CvButton from '../CvButton/CvButton.vue';
 import { carbonPrefix } from '../../global/settings';
 import { props as propsCvId, useCvId } from '../../use/cvId';
@@ -155,7 +164,11 @@ const props = defineProps({
   kind: {
     type: String,
     default: '',
-    validator: val => ['', 'danger'].includes(val),
+    validator: val => {
+      const valid = MODAL_KINDS.includes(val);
+      if (!valid) console.warn('valid kinds:', MODAL_KINDS);
+      return valid;
+    },
   },
   /**
    * boolean value if true the component user is expected to close the modal via visible property.
@@ -187,8 +200,11 @@ const props = defineProps({
    */
   size: {
     type: String,
-    validator: val =>
-      ['', 'xs', 'sm', 'small', 'md', 'large', 'lg'].includes(val),
+    validator: val => {
+      const valid = MODAL_SIZES.includes(val);
+      if (!valid) console.warn('valid sizes:', MODAL_SIZES);
+      return valid;
+    },
     default: '',
   },
   /**
@@ -333,22 +349,22 @@ const dialogAttrs = computed(() => {
   return attrs;
 });
 const primaryKind = computed(() => {
-  if (props.kind === 'danger') {
-    return 'danger';
+  if (props.kind === MODAL_KIND_DANGER) {
+    return MODAL_KIND_DANGER;
   } else {
-    return 'primary';
+    return MODAL_KIND_PRIMARY;
   }
 });
 const internalSize = computed(() => {
   switch (props.size) {
-    case 'xs':
-      return 'xs';
-    case 'sm':
+    case MODAL_SIZE_EXTRA_SMALL:
+      return MODAL_SIZE_EXTRA_SMALL;
+    case MODAL_SIZE_SMALL:
     case 'small':
-      return 'sm';
-    case 'lg':
+      return MODAL_SIZE_SMALL;
+    case MODAL_SIZE_LARGE:
     case 'large':
-      return 'lg';
+      return MODAL_SIZE_LARGE;
     default:
       return '';
   }
@@ -398,4 +414,10 @@ function onOtherBtnClick(ev) {
 onBeforeUnmount(() => {
   if (dataVisible.value) hide();
 });
+
+// exposing methods
+defineExpose({
+  show,
+  hide,
+});
 </script>
diff --git a/src/components/CvModal/__tests__/CvModal.spec.js b/src/components/CvModal/__tests__/CvModal.spec.js
@@ -1,6 +1,7 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import CvModal from '../CvModal.vue';
+import { MODAL_KIND_DANGER, MODAL_SIZE_LARGE } from '@/components/CvModal';
 
 describe('CvModal', () => {
   it('CvModal - test default and attrs', async () => {
@@ -86,9 +87,9 @@ describe('CvModal', () => {
 
     await result.rerender({
       visible: true,
-      kind: 'danger',
+      kind: MODAL_KIND_DANGER,
       primaryButtonDisabled: true,
-      size: 'lg',
+      size: MODAL_SIZE_LARGE,
       hasFormContent: true,
     });
 

diff --git a/src/components/CvModal/index.js b/src/components/CvModal/index.js
@@ -1,3 +1,31 @@
 import CvModal from './CvModal.vue';
-export { CvModal };
+
+const MODAL_SIZE_EXTRA_SMALL = 'xs';
+const MODAL_SIZE_SMALL = 'sm';
+const MODAL_SIZE_MEDIUM = 'md';
+const MODAL_SIZE_LARGE = 'lg';
+const MODAL_SIZES = [
+  '',
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_SMALL,
+  'small',
+  MODAL_SIZE_MEDIUM,
+  'medium',
+  'large',
+  MODAL_SIZE_LARGE,
+];
+const MODAL_KIND_PRIMARY = 'primary';
+const MODAL_KIND_DANGER = 'danger';
+const MODAL_KINDS = ['', MODAL_KIND_PRIMARY, MODAL_KIND_DANGER];
+
+export {
+  CvModal,
+  MODAL_SIZES,
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_SMALL,
+  MODAL_SIZE_LARGE,
+  MODAL_KINDS,
+  MODAL_KIND_PRIMARY,
+  MODAL_KIND_DANGER,
+};
 export default CvModal;
diff --git a/src/components/CvMultiSelect/CvMultiSelect.vue b/src/components/CvMultiSelect/CvMultiSelect.vue
@@ -426,8 +426,8 @@ onUpdated(checkSlots);
 onMounted(updateOptions);
 onMounted(updateSelectedItems);
 
-watch(() => props.modelValue, updateSelectedItems);
-watch(() => props.options, updateOptions);
+watch(() => props.modelValue, updateSelectedItems, { deep: true });
+watch(() => props.options, updateOptions, { deep: true });
 watch(() => props.selectionFeedback, updateOptions);
 
 const highlighted = computed({

diff --git a/src/components/CvSearch/CvSearch.vue b/src/components/CvSearch/CvSearch.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="formItem ? 'div' : CvEmpty"
-    :class="`cv-search ${carbonPrefix}--form-item`"
+    :class="[`cv-search`, `${carbonPrefix}--form-item`, $attrs.class]"
   >
     <div
       ref="elSearch"

diff --git a/src/components/CvTabs/CvTabs.vue b/src/components/CvTabs/CvTabs.vue
@@ -71,7 +71,7 @@
             role="tab"
             :aria-controls="tab.uid"
             :aria-disabled="disabledTabs.has(tab.uid) || null"
-            :aria-selected="selectedId === tab.uid"
+            :aria-selected="`${selectedId === tab.uid}`"
             :tabindex="selectedId === tab.uid ? 0 : -1"
             type="button"
             @click="onTabClick(tab.uid)"
@@ -187,7 +187,7 @@ function maybeSelectFirstTab() {
   if (index > -1) selectedId.value = tabs.value[index].uid;
 }
 onMounted(maybeSelectFirstTab);
-watch(tabs, maybeSelectFirstTab);
+watch(tabs, maybeSelectFirstTab, { deep: true });
 watch(selectedId, () => {
   nextTick(() => {
     doTabClick(selectedId.value);