From ec0e778731b26e8629d6e742abbafe938598128f Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Fri, 11 Oct 2024 12:40:39 +0530
Subject: [PATCH] /

---
 lib/KDateRange/index.vue | 102 +++++++++++------------
 lib/KModal.vue           | 172 ++++++++++++++++++++-------------------
 2 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue
index af57bcbb2..917cbb372 100644
--- a/lib/KDateRange/index.vue
+++ b/lib/KDateRange/index.vue
@@ -1,60 +1,58 @@
 <template>
 
-  <KFocusTrap>
-    <KModal
-      :cancelText="cancelText"
-      :title="title"
-      :submitText="submitText"
-      :size="modalSize"
-      :submitDisabled="disabled"
-      data-test="dateRangeModal"
-      @submit="onSubmit"
-      @cancel="$emit('cancel')"
-    >
-      <div>
-        <!-- @slot Description of modal -->
-        <slot name="description">
-          <p id="modal-description" ref="description" class="description">
-            {{ description }}
-          </p>
-        </slot>
-        <div class="date-inputs">
-          <div class="left-input">
-            <KDateInput
-              :value="dateRange.start"
-              inputRef="dateStartRangeInput"
-              :errorMessage="invalidStartErrorMessage"
-              :legendText="startDateLegendText"
-              data-test="startDate"
-              @updateDate="debouncedSetStartDate"
-            />
-          </div>
-          <div class="right-input">
-            <KDateInput
-              :value="dateRange.end"
-              inputRef="dateEndRangeInput"
-              :errorMessage="invalidEndErrorMessage"
-              :legendText="endDateLegendText"
-              data-test="endDate"
-              @updateDate="debouncedSetEndDate"
-            />
-          </div>
+  <KModal
+    :cancelText="cancelText"
+    :title="title"
+    :submitText="submitText"
+    :size="modalSize"
+    :submitDisabled="disabled"
+    data-test="dateRangeModal"
+    @submit="onSubmit"
+    @cancel="$emit('cancel')"
+  >
+    <div>
+      <!-- @slot Description of modal -->
+      <slot name="description">
+        <p id="modal-description" ref="description" class="description">
+          {{ description }}
+        </p>
+      </slot>
+      <div class="date-inputs">
+        <div class="left-input">
+          <KDateInput
+            :value="dateRange.start"
+            inputRef="dateStartRangeInput"
+            :errorMessage="invalidStartErrorMessage"
+            :legendText="startDateLegendText"
+            data-test="startDate"
+            @updateDate="debouncedSetStartDate"
+          />
         </div>
-        <div>
-          <KDateCalendar
-            :firstAllowedDate="firstAllowedDate"
-            :lastAllowedDate="lastAllowedDate"
-            :selectedStartDate="createDate(dateRange.start)"
-            :selectedEndDate="createDate(dateRange.end)"
-            :previousMonthText="previousMonthText"
-            :nextMonthText="nextMonthText"
-            v-bind.sync="dateRange"
-            @updateSelectedDates="setSelectedDatesFromCalendar"
+        <div class="right-input">
+          <KDateInput
+            :value="dateRange.end"
+            inputRef="dateEndRangeInput"
+            :errorMessage="invalidEndErrorMessage"
+            :legendText="endDateLegendText"
+            data-test="endDate"
+            @updateDate="debouncedSetEndDate"
           />
         </div>
       </div>
-    </KModal>
-  </KFocusTrap>
+      <div>
+        <KDateCalendar
+          :firstAllowedDate="firstAllowedDate"
+          :lastAllowedDate="lastAllowedDate"
+          :selectedStartDate="createDate(dateRange.start)"
+          :selectedEndDate="createDate(dateRange.end)"
+          :previousMonthText="previousMonthText"
+          :nextMonthText="nextMonthText"
+          v-bind.sync="dateRange"
+          @updateSelectedDates="setSelectedDatesFromCalendar"
+        />
+      </div>
+    </div>
+  </KModal>
 
 </template>
 
@@ -66,7 +64,6 @@
   import get from 'lodash/get';
   import debounce from 'lodash/debounce';
   import KModal from '../KModal';
-  import KFocusTrap from '../KFocusTrap.vue';
   import KDateCalendar from './KDateCalendar';
   import KDateInput from './KDateInput';
   import { validationMachine, initialContext } from './ValidationMachine';
@@ -78,7 +75,6 @@
       KModal,
       KDateInput,
       KDateCalendar,
-      KFocusTrap,
     },
     props: {
       /**
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 71bb228b2..9bd7e8c12 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -3,98 +3,100 @@
   <component :is="wrapper">
     <!-- Accessibility properties for the overlay -->
     <transition name="modal-fade" appear>
-      <div
-        id="modal-window"
-        ref="modal-overlay"
-        class="modal-overlay"
-        @keyup.esc.stop="emitCancelEvent"
-        @keyup.enter="handleEnter"
-      >
-        <!-- KeenUiSelect targets modal by using div.modal selector -->
+      <KFocusTrap>
         <div
-          ref="modal"
-          class="modal"
-          :tabindex="0"
-          role="dialog"
-          aria-labelledby="modal-title"
-          :style="[
-            modalSizeStyles,
-            { background: $themeTokens.surface },
-            containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
-          ]"
+          id="modal-window"
+          ref="modal-overlay"
+          class="modal-overlay"
+          @keyup.esc.stop="emitCancelEvent"
+          @keyup.enter="handleEnter"
         >
-
-          <!-- Modal Title -->
-          <h1
-            id="modal-title"
-            ref="title"
-            class="title"
+          <!-- KeenUiSelect targets modal by using div.modal selector -->
+          <div
+            ref="modal"
+            class="modal"
+            :tabindex="0"
+            role="dialog"
+            aria-labelledby="modal-title"
+            :style="[
+              modalSizeStyles,
+              { background: $themeTokens.surface },
+              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+            ]"
           >
-            {{ title }}
-            <!-- Accessible error reporting per @radina -->
-            <span
-              v-if="hasError"
-              class="visuallyhidden"
+
+            <!-- Modal Title -->
+            <h1
+              id="modal-title"
+              ref="title"
+              class="title"
             >
-              {{ errorMessage }}
-            </span>
-          </h1>
-
-          <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
-          <form
-            class="form"
-            @submit.prevent="emitSubmitEvent"
-            @keyup.enter.stop
-          >
-            <!-- Wrapper for main content -->
-            <div
-              ref="content"
-              class="content"
-              :style="[ contentSectionMaxHeight, scrollShadow ? {
-                borderTop: `1px solid ${$themeTokens.fineLine}`,
-                borderBottom: `1px solid ${$themeTokens.fineLine}`,
-              } : {} ]"
-              :class="{
-                'scroll-shadow': scrollShadow,
-                'contains-kselect': containsKSelect
-              }"
+              {{ title }}
+              <!-- Accessible error reporting per @radina -->
+              <span
+                v-if="hasError"
+                class="visuallyhidden"
+              >
+                {{ errorMessage }}
+              </span>
+            </h1>
+
+            <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+            <form
+              class="form"
+              @submit.prevent="emitSubmitEvent"
+              @keyup.enter.stop
             >
-              <!-- @slot Main content of modal -->
-              <slot></slot>
-            </div>
+              <!-- Wrapper for main content -->
+              <div
+                ref="content"
+                class="content"
+                :style="[ contentSectionMaxHeight, scrollShadow ? {
+                  borderTop: `1px solid ${$themeTokens.fineLine}`,
+                  borderBottom: `1px solid ${$themeTokens.fineLine}`,
+                } : {} ]"
+                :class="{
+                  'scroll-shadow': scrollShadow,
+                  'contains-kselect': containsKSelect
+                }"
+              >
+                <!-- @slot Main content of modal -->
+                <slot></slot>
+              </div>
 
-            <div
-              ref="actions"
-              class="actions"
-            >
-              <!-- @slot Alternative buttons and actions below main content -->
-              <slot
-                v-if="$slots.actions"
-                name="actions"
+              <div
+                ref="actions"
+                class="actions"
               >
-              </slot>
-              <template v-else>
-                <KButton
-                  v-if="cancelText"
-                  name="cancel"
-                  :text="cancelText"
-                  appearance="flat-button"
-                  :disabled="cancelDisabled || $attrs.disabled"
-                  @click="emitCancelEvent"
-                />
-                <KButton
-                  v-if="submitText"
-                  name="submit"
-                  :text="submitText"
-                  :primary="true"
-                  :disabled="submitDisabled || $attrs.disabled"
-                  type="submit"
-                />
-              </template>
-            </div>
-          </form>
+                <!-- @slot Alternative buttons and actions below main content -->
+                <slot
+                  v-if="$slots.actions"
+                  name="actions"
+                >
+                </slot>
+                <template v-else>
+                  <KButton
+                    v-if="cancelText"
+                    name="cancel"
+                    :text="cancelText"
+                    appearance="flat-button"
+                    :disabled="cancelDisabled || $attrs.disabled"
+                    @click="emitCancelEvent"
+                  />
+                  <KButton
+                    v-if="submitText"
+                    name="submit"
+                    :text="submitText"
+                    :primary="true"
+                    :disabled="submitDisabled || $attrs.disabled"
+                    type="submit"
+                  />
+                </template>
+              </div>
+            </form>
+          </div>
         </div>
-      </div>
+      </KFocusTrap>
     </transition>
   </component>
 
@@ -106,6 +108,8 @@
   import debounce from 'lodash/debounce';
   import useKResponsiveWindow from './composables/useKResponsiveWindow';
 
+  cla;
+
   const SIZE_SM = 'small';
   const SIZE_MD = 'medium';
   const SIZE_LG = 'large';