Skip to content

Commit

Permalink
/
Browse files Browse the repository at this point in the history
  • Loading branch information
@lokesh-sagi125
lokesh-sagi125 committed Oct 11, 2024
1 parent 1639251 commit ec0e778
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 137 deletions.
102 changes: 49 additions & 53 deletions lib/KDateRange/index.vue
View file
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -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';
Expand All @@ -78,7 +75,6 @@
KModal,
KDateInput,
KDateCalendar,
KFocusTrap,
},
props: {
/**
Expand Down
172 changes: 88 additions & 84 deletions lib/KModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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';
Expand Down

0 comments on commit ec0e778

Please sign in to comment.