Skip to content

Commit

Permalink
#131 Removed rem() function on both components - declare the width an…
Browse files Browse the repository at this point in the history 
…d height of an e-icons with the size attribute - separate nested if statements to simplify readability - rewrite comments
  • Loading branch information
BeneRichi committed Jan 20, 2023
1 parent 4494ecf commit dbe76e9
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 59 deletions.
60 changes: 32 additions & 28 deletions src/components/c-date-picker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,7 @@
>
<e-icon
icon="i-close"
width="20"
height="20"
size="20"
/>
</button>
</div>
Expand Down Expand Up @@ -76,15 +75,15 @@
props: {
/**
* The initial start date.
* The initial start date. Provides `.sync` support.
*/
start: {
type: Date,
default: () => new Date(),
},
/**
* The initial end date.
* The initial end date. Provides `.sync` support.
*/
end: {
type: Date,
Expand Down Expand Up @@ -118,15 +117,15 @@
},
/**
* Allows to overwrite the default start input name.
* Allows to overwrite the default start input field name.
*/
startName: {
type: String,
default: 'start',
},
/**
* Allows to overwrite the default end input name.
* Allows to overwrite the default end input field name.
*/
endName: {
type: String,
Expand All @@ -142,15 +141,15 @@
},
/**
* Allows to justify the min date.
* Allows to set a min date.
*/
minDate: {
type: Date,
default: null,
},
/**
* Allows to justify the max date.
* Allows to set a min date.
*/
maxDate: {
type: Date,
Expand Down Expand Up @@ -199,13 +198,13 @@
// computed: {},
watch: {
start(value, oldValue) {
if (value.getTime() !== oldValue.getTime()) {
if (value?.getTime() !== oldValue?.getTime()) {
this.startDate = value;
}
},
end(value, oldValue) {
if (value.getTime() !== oldValue.getTime()) {
if (value?.getTime() !== oldValue?.getTime()) {
this.endDate = value;
}
},
Expand All @@ -215,16 +214,17 @@
return;
}
if (this.$dayjs(value).format() !== this.$dayjs(oldValue).format()) {
if (this.range) {
this.calendarInstance.setStartRange(value);
this.calendarInstance.draw();
} else {
this.close();
}
if (this.$dayjs(value).format() === this.$dayjs(oldValue).format()) {
return;
}
this.onChange();
if (this.range) {
this.calendarInstance.setStartRange(value);
this.calendarInstance.draw();
} else {
this.close();
}
this.onChange();
},
endDate(value, oldValue) {
Expand Down Expand Up @@ -404,7 +404,7 @@
};
const elementInFocus = document.querySelector(':focus');
// Remove focus on child elements to allow instant re-opening when clicking the elment again.
// Remove focus on child elements to allow instant re-opening when clicking the element again.
if (elementInFocus && (elementInFocus === this.$el || this.$el.contains(elementInFocus))) {
elementInFocus.blur();
}
Expand Down Expand Up @@ -511,23 +511,24 @@
.c-date-picker {
$this: &;
padding-top: variables.$spacing--20;
position: relative;
&__calendar-wrapper {
position: absolute;
min-width: 100%; // Width of anchor.
margin-top: rem(variables.$spacing--10);
margin-top: variables.$spacing--10;
background: variables.$color-grayscale--1000;
@include mixins.media(sm) {
width: rem(500px);
margin-top: rem(variables.$spacing--15);
width: 500px;
margin-top: variables.$spacing--15;
}
}
&__calendar-header {
position: relative;
padding: rem(variables.$spacing--15 variables.$spacing--55);
padding: variables.$spacing--15 variables.$spacing--55;
border-bottom: 1px solid variables.$color-grayscale--600;
text-align: center;
}
Expand All @@ -546,14 +547,17 @@
transform: translateY(-50%);
.e-icon img {
width: rem(20px);
height: rem(20px);
width: 20px;
height: 20px;
}
}
&__calendar {
display: flex;
justify-content: center;
@include mixins.media(sm) {
padding: rem(0 variables.$spacing--60 variables.$spacing--25);
padding: 0 variables.$spacing--60 variables.$spacing--25;
}
}
Expand All @@ -574,13 +578,13 @@
grid-template-areas: 'start' 'end';
grid-template-columns: 1fr;
grid-template-rows: auto auto;
row-gap: rem(variables.$spacing--10);
row-gap: variables.$spacing--10;
@include mixins.media(sm) {
grid-template-areas: 'start end';
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
column-gap: rem(variables.$spacing--25);
column-gap: variables.$spacing--25;
}
}
Expand Down
51 changes: 20 additions & 31 deletions src/components/e-date.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
:class="b('input')"
:maxlength="format.length"
:name="name"
@keypress.enter="onEnter"
@keypress.enter.prevent
@keypress="onEnter"
@focus="onFocus"
@blur="onBlur"
>
<e-icon
:class="b('icon')"
icon="i-date-picker"
width="22"
height="22"
size="20"
/>
</label>
</template>
Expand All @@ -37,14 +37,21 @@
model: {
/**
* Changes v-model behavior and use 'change' instead of 'value' as prop.
* Avoids conflict with default value attribute.
* Changes v-model behavior and use 'change' instead of 'input' as event.
*/
prop: 'value',
event: 'change',
},
props: {
/**
* The `name` value for the field.
*/
name: {
type: String,
required: true,
},
/**
* Allows to set the accepted input format.
*/
Expand All @@ -70,23 +77,14 @@
},
/**
* The label and placeholder value of the field.
* The placeholder attribute is required to make floating labels work with native CSS (ex. IE11).
* The `label` text for the field.
*/
label: {
type: String,
default() {
return this.$t('e-date.defaultLabel');
},
},
/**
* Adds name attribute
*/
name: {
type: String,
required: true,
},
},
data() {
return {
Expand Down Expand Up @@ -219,7 +217,6 @@
* @param {Event} event - The original DOM event.
*/
onEnter(event) {
event.preventDefault(); // Prevents auto submit of form.
event.target.blur(); // Triggers update.
},
Expand Down Expand Up @@ -266,19 +263,15 @@
@use '../setup/scss/functions';
.e-date {
$height: 48px;
$height: 30px;
$border: 1px;
display: flex;
align-items: center;
padding: rem(0 variables.$spacing--25); // Equalizes vertical centering
padding: 0 variables.$spacing--25; // Equalizes vertical centering
border: $border solid transparent;
border-radius: 99999px; // Force half circles.
background: variables.$color-grayscale--600;
@include mixins.media(lg) {
@include mixins.font(variables.$font-size--14, 18px);
}
background: variables.$color-grayscale--800;
border-radius: variables.$border-radius--500;
&__label-text {
grid-area: label;
Expand All @@ -297,21 +290,17 @@
grid-area: input;
width: 14ch; // 8 letters + 2 dividers + some, because IE11 does not count outer spacing of 0
height: rem($height - (2 * $border) - 1px);
height: $height - (2 * $border) - 1px;
margin-bottom: 1px; // Improves vertical centering.
@supports (display: inline-grid) {
width: var(--e-date-format-length, 10ch);
}
}
&__icon {
grid-area: icon;
margin-left: auto;
img {
width: rem(22px);
height: rem(22px);
width: 22px;
height: 22px;
}
}
Expand Down

0 comments on commit dbe76e9

Please sign in to comment.