quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.5

package/src/components/TimePickerCard.vue

@@ -1,352 +1,352 @@
-<template>
-  <q-card class="time-picker-card flex no-wrap">
-    <q-card-section class="ampm-section flex column flex-cneter">
-      <s-button
-        :label="language[lang].am"
-        :outline="!isAm"
-        :color="isAm ? 'positive' : 'Grey_Default'"
-        @click="onClickAmPm(language[lang].am)"
-      />
-      <s-button
-        :label="language[lang].pm"
-        :outline="isAm"
-        :color="!isAm ? 'positive' : 'Grey_Default'"
-        class="q-mt-sm"
-        @click="onClickAmPm(language[lang].pm)"
-      />
-    </q-card-section>
-    <q-separator vertical color="Grey_Lighten-4" />
-    <q-card-section class="time-section flex no-wrap flex-center">
-      <div class="flex column flex-center">
-        <s-button
-          flat
-          :icon="arrowUpIcon"
-          color="Grey_Lighten-2"
-          class="no-hover"
-          @click="onClickUp('hh')"
-        />
-        <s-input
-          v-model="timeUnitModel.hour"
-          mask="##"
-          maxlength="2"
-          placeholder="00"
-          debounce="600"
-          @update:modelValue="
-            val => {
-              onUpdateTimeUnit(val, 'hour');
-            }
-          "
-          @blur="formatTimeUnit"
-        />
-
-        <s-button
-          flat
-          :icon="arrowDownIcon"
-          color="Grey_Lighten-2"
-          class="no-hover"
-          @click="onClickDown('hh')"
-        />
-      </div>
-      <div class="q-mx-sm">:</div>
-      <div class="flex column flex-center">
-        <s-button
-          flat
-          :icon="arrowUpIcon"
-          color="Grey_Lighten-2"
-          class="no-hover"
-          @click="onClickUp('mm')"
-        />
-        <s-input
-          v-model="timeUnitModel.min"
-          mask="##"
-          maxlength="2"
-          placeholder="00"
-          debounce="600"
-          @update:modelValue="
-            val => {
-              onUpdateTimeUnit(val, 'min');
-            }
-          "
-          @blur="formatTimeUnit"
-        />
-
-        <s-button
-          flat
-          :icon="arrowDownIcon"
-          color="Grey_Lighten-2"
-          class="no-hover"
-          @click="onClickDown('mm')"
-        />
-      </div>
-      <div class="q-mx-sm" v-if="useSecond">:</div>
-      <div class="flex column flex-center" v-if="useSecond">
-        <s-button
-          flat
-          :icon="arrowUpIcon"
-          color="Grey_Lighten-2"
-          class="no-hover"
-          @click="onClickUp('ss')"
-        />
-        <s-input
-          v-model="timeUnitModel.sec"
-          mask="##"
-          maxlength="2"
-          placeholder="00"
-          debounce="600"
-          @update:modelValue="
-            val => {
-              onUpdateTimeUnit(val, 'sec');
-            }
-          "
-          @blur="formatTimeUnit"
-        />
-
-        <s-button
-          flat
-          :icon="arrowDownIcon"
-          color="Grey_Lighten-2"
-          class="no-hover"
-          @click="onClickDown('ss')"
-        />
-      </div>
-    </q-card-section>
-  </q-card>
-</template>
-
-<script>
-  import { ref, nextTick, watch } from 'vue';
-  import { QCard, QCardSection, QSeparator, date } from 'quasar';
-  import { useModelBinder } from '../composables/modelBinder';
-  import { arrowUpIcon, arrowDownIcon } from '../assets/icons';
-
-  export default {
-    name: 'TimePickerCard',
-    emits: ['update:model-value'],
-    components: {
-      QCard,
-      QCardSection,
-      QSeparator,
-    },
-    props: {
-      lang: {
-        type: String,
-        default: 'ko',
-      },
-      modelValue: String,
-      useSecond: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props) {
-      const language = { ko: { am: '오전', pm: '오후' }, en: { am: 'AM', pm: 'PM' }, ja: { am: '午前', pm: '午後' } };
-      const model = useModelBinder(props);
-      const modelFormat = props.useSecond ? 'HH:mm:ss' : 'HH:mm';
-      const timeRegex = props.useSecond ? /(\d{2}):(\d{2}):(\d{2})/ : /(\d{2}):(\d{2})/;
-      const initialTimeUnits = props.modelValue.match(timeRegex).slice(1, 4);
-      const initialDate = date.buildDate({
-        hour: +initialTimeUnits[0],
-        minute: +initialTimeUnits[1],
-        second: +initialTimeUnits[2] || 0,
-      });
-      const amPmTimeUnits = date.formatDate(initialDate, 'hh:mm:ss').match(timeRegex).slice(1, 4);
-      const isAm = ref(initialDate.getHours() < 12);
-
-      const timeUnitModel = ref({
-        hour: amPmTimeUnits[0],
-        min: amPmTimeUnits[1],
-        sec: props.useSecond ? amPmTimeUnits[2] : '00',
-      });
-
-      function onClickUp(type) {
-        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
-        const modelDate = date.buildDate({
-          hour: +timeModelUnits[0],
-          minute: +timeModelUnits[1],
-          second: +timeModelUnits[2] || 0,
-        });
-        const addedDate = date.addToDate(modelDate, {
-          hour: +(type === 'hh'),
-          minute: +(type === 'mm'),
-          second: +(type === 'ss'),
-        });
-        const addedTimeUnits = date.formatDate(addedDate, 'hh:mm:ss').match(timeRegex).slice(1, 4);
-
-        isAm.value = addedDate.getHours() < 12;
-        model.value = date.formatDate(addedDate, modelFormat);
-        [
-          timeUnitModel.value.hour,
-          timeUnitModel.value.min,
-          timeUnitModel.value.sec,
-        ] = addedTimeUnits;
-      }
-
-      function onClickDown(type) {
-        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
-        const modelDate = date.buildDate({
-          hour: +timeModelUnits[0],
-          minute: +timeModelUnits[1],
-          second: +timeModelUnits[2] || 0,
-        });
-        const subtractedDate = date.subtractFromDate(modelDate, {
-          hour: +(type === 'hh'),
-          minute: +(type === 'mm'),
-          second: +(type === 'ss'),
-        });
-        const subtractedTimeUnits = date
-          .formatDate(subtractedDate, 'hh:mm:ss')
-          .match(timeRegex)
-          .slice(1, 4);
-
-        isAm.value = subtractedDate.getHours() < 12;
-        model.value = date.formatDate(subtractedDate, modelFormat);
-        [
-          timeUnitModel.value.hour,
-          timeUnitModel.value.min,
-          timeUnitModel.value.sec,
-        ] = subtractedTimeUnits;
-      }
-
-      function onClickAmPm(type) {
-        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
-        const modelDate = date.buildDate({
-          hour: +timeModelUnits[0],
-          minute: +timeModelUnits[1],
-          second: +timeModelUnits[2] || 0,
-        });
-
-        isAm.value = type === language[props.lang].am;
-        if (type === language[props.lang].am && modelDate.getHours() >= 12) {
-          const resultDate = date.subtractFromDate(modelDate, { hour: 12 });
-          model.value = date.formatDate(resultDate, modelFormat);
-        } else if (type === language[props.lang].pm && modelDate.getHours() < 12) {
-          const resultDate = date.addToDate(modelDate, { hour: 12 });
-          model.value = date.formatDate(resultDate, modelFormat);
-        }
-      }
-
-      function onUpdateTimeUnit(val, unit) {
-        const inputLimitDict = {
-          hour: 12,
-          min: 59,
-          sec: 59,
-        };
-
-        const timeUnitEnum = {
-          hour: 0,
-          min: 1,
-          sec: 2,
-        };
-
-        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
-        const modelDate = date.buildDate({
-          hour: +timeModelUnits[0],
-          minute: +timeModelUnits[1],
-          second: +timeModelUnits[2] || 0,
-        });
-        const amPmModelTimeUnits = date
-          .formatDate(modelDate, 'hh:mm:ss')
-          .match(timeRegex)
-          .slice(1, 4);
-        if (+val > inputLimitDict[unit]) {
-          nextTick(() => {
-            timeUnitModel.value[unit] = +amPmModelTimeUnits[timeUnitEnum[unit]];
-          });
-          return;
-        }
-
-        const resultDate = date.adjustDate(modelDate, {
-          hour:
-            +timeUnitModel.value.hour + (!isAm.value && +timeUnitModel.value.hour < 12 ? 12 : 0),
-          minute: +timeUnitModel.value.min,
-          second: +timeUnitModel.value.sec || 0,
-        });
-        model.value = date.formatDate(resultDate, modelFormat);
-      }
-
-      function formatTimeUnit() {
-        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
-        const modelDate = date.buildDate({
-          hour: +timeModelUnits[0],
-          minute: +timeModelUnits[1],
-          second: +timeModelUnits[2] || 0,
-        });
-        const amPmModelTimeUnits = date
-          .formatDate(modelDate, 'hh:mm:ss')
-          .match(timeRegex)
-          .slice(1, 4);
-        [
-          timeUnitModel.value.hour,
-          timeUnitModel.value.min,
-          timeUnitModel.value.sec,
-        ] = amPmModelTimeUnits;
-        isAm.value = +timeModelUnits[0] < 12;
-      }
-
-      watch(
-        () => props.modelValue,
-        () => {
-          formatTimeUnit();
-        },
-      );
-
-      return {
-        arrowUpIcon,
-        arrowDownIcon,
-        language,
-
-        model,
-        isAm,
-        timeUnitModel,
-        onClickUp,
-        onClickDown,
-        onClickAmPm,
-        onUpdateTimeUnit,
-        formatTimeUnit,
-      };
-    },
-  };
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .time-picker-card {
-    height: 124px;
-    .ampm-section {
-      padding: 30px 24px;
-      .s-button {
-        min-width: 0;
-        width: 47px;
-        height: 28px;
-      }
-      .q-btn--outline {
-        .q-btn__content {
-          > span {
-            color: $Grey_Darken-2;
-          }
-        }
-      }
-    }
-    .time-section {
-      padding: 24px;
-      > div {
-        .s-input {
-          width: 38px;
-          height: 28px;
-          .q-field__inner {
-            .q-field__control {
-              border-radius: 4px;
-              .q-field__control-container {
-                .q-field__native {
-                  text-align: center;
-                  color: $Grey_Darken-2;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <q-card class="time-picker-card flex no-wrap">
+    <q-card-section class="ampm-section flex column flex-cneter">
+      <s-button
+        :label="language[lang].am"
+        :outline="!isAm"
+        :color="isAm ? 'positive' : 'Grey_Default'"
+        @click="onClickAmPm(language[lang].am)"
+      />
+      <s-button
+        :label="language[lang].pm"
+        :outline="isAm"
+        :color="!isAm ? 'positive' : 'Grey_Default'"
+        class="q-mt-sm"
+        @click="onClickAmPm(language[lang].pm)"
+      />
+    </q-card-section>
+    <q-separator vertical color="Grey_Lighten-4" />
+    <q-card-section class="time-section flex no-wrap flex-center">
+      <div class="flex column flex-center">
+        <s-button
+          flat
+          :icon="arrowUpIcon"
+          color="Grey_Lighten-2"
+          class="no-hover"
+          @click="onClickUp('hh')"
+        />
+        <s-input
+          v-model="timeUnitModel.hour"
+          mask="##"
+          maxlength="2"
+          placeholder="00"
+          debounce="600"
+          @update:modelValue="
+            val => {
+              onUpdateTimeUnit(val, 'hour');
+            }
+          "
+          @blur="formatTimeUnit"
+        />
+
+        <s-button
+          flat
+          :icon="arrowDownIcon"
+          color="Grey_Lighten-2"
+          class="no-hover"
+          @click="onClickDown('hh')"
+        />
+      </div>
+      <div class="q-mx-xs">:</div>
+      <div class="flex column flex-center">
+        <s-button
+          flat
+          :icon="arrowUpIcon"
+          color="Grey_Lighten-2"
+          class="no-hover"
+          @click="onClickUp('mm')"
+        />
+        <s-input
+          v-model="timeUnitModel.min"
+          mask="##"
+          maxlength="2"
+          placeholder="00"
+          debounce="600"
+          @update:modelValue="
+            val => {
+              onUpdateTimeUnit(val, 'min');
+            }
+          "
+          @blur="formatTimeUnit"
+        />
+
+        <s-button
+          flat
+          :icon="arrowDownIcon"
+          color="Grey_Lighten-2"
+          class="no-hover"
+          @click="onClickDown('mm')"
+        />
+      </div>
+      <div class="q-mx-xs" v-if="useSecond">:</div>
+      <div class="flex column flex-center" v-if="useSecond">
+        <s-button
+          flat
+          :icon="arrowUpIcon"
+          color="Grey_Lighten-2"
+          class="no-hover"
+          @click="onClickUp('ss')"
+        />
+        <s-input
+          v-model="timeUnitModel.sec"
+          mask="##"
+          maxlength="2"
+          placeholder="00"
+          debounce="600"
+          @update:modelValue="
+            val => {
+              onUpdateTimeUnit(val, 'sec');
+            }
+          "
+          @blur="formatTimeUnit"
+        />
+
+        <s-button
+          flat
+          :icon="arrowDownIcon"
+          color="Grey_Lighten-2"
+          class="no-hover"
+          @click="onClickDown('ss')"
+        />
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script>
+  import { ref, nextTick, watch } from 'vue';
+  import { QCard, QCardSection, QSeparator, date } from 'quasar';
+  import { useModelBinder } from '../composables/modelBinder';
+  import { arrowUpIcon, arrowDownIcon } from '../assets/icons';
+
+  export default {
+    name: 'TimePickerCard',
+    emits: ['update:model-value'],
+    components: {
+      QCard,
+      QCardSection,
+      QSeparator,
+    },
+    props: {
+      lang: {
+        type: String,
+        default: 'ko',
+      },
+      modelValue: String,
+      useSecond: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const language = { ko: { am: '오전', pm: '오후' }, en: { am: 'AM', pm: 'PM' }, ja: { am: '午前', pm: '午後' } };
+      const model = useModelBinder(props);
+      const modelFormat = props.useSecond ? 'HH:mm:ss' : 'HH:mm';
+      const timeRegex = props.useSecond ? /(\d{2}):(\d{2}):(\d{2})/ : /(\d{2}):(\d{2})/;
+      const initialTimeUnits = props.modelValue.match(timeRegex).slice(1, 4);
+      const initialDate = date.buildDate({
+        hour: +initialTimeUnits[0],
+        minute: +initialTimeUnits[1],
+        second: +initialTimeUnits[2] || 0,
+      });
+      const amPmTimeUnits = date.formatDate(initialDate, 'hh:mm:ss').match(timeRegex).slice(1, 4);
+      const isAm = ref(initialDate.getHours() < 12);
+
+      const timeUnitModel = ref({
+        hour: amPmTimeUnits[0],
+        min: amPmTimeUnits[1],
+        sec: props.useSecond ? amPmTimeUnits[2] : '00',
+      });
+
+      function onClickUp(type) {
+        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
+        const modelDate = date.buildDate({
+          hour: +timeModelUnits[0],
+          minute: +timeModelUnits[1],
+          second: +timeModelUnits[2] || 0,
+        });
+        const addedDate = date.addToDate(modelDate, {
+          hour: +(type === 'hh'),
+          minute: +(type === 'mm'),
+          second: +(type === 'ss'),
+        });
+        const addedTimeUnits = date.formatDate(addedDate, 'hh:mm:ss').match(timeRegex).slice(1, 4);
+
+        isAm.value = addedDate.getHours() < 12;
+        model.value = date.formatDate(addedDate, modelFormat);
+        [
+          timeUnitModel.value.hour,
+          timeUnitModel.value.min,
+          timeUnitModel.value.sec,
+        ] = addedTimeUnits;
+      }
+
+      function onClickDown(type) {
+        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
+        const modelDate = date.buildDate({
+          hour: +timeModelUnits[0],
+          minute: +timeModelUnits[1],
+          second: +timeModelUnits[2] || 0,
+        });
+        const subtractedDate = date.subtractFromDate(modelDate, {
+          hour: +(type === 'hh'),
+          minute: +(type === 'mm'),
+          second: +(type === 'ss'),
+        });
+        const subtractedTimeUnits = date
+          .formatDate(subtractedDate, 'hh:mm:ss')
+          .match(timeRegex)
+          .slice(1, 4);
+
+        isAm.value = subtractedDate.getHours() < 12;
+        model.value = date.formatDate(subtractedDate, modelFormat);
+        [
+          timeUnitModel.value.hour,
+          timeUnitModel.value.min,
+          timeUnitModel.value.sec,
+        ] = subtractedTimeUnits;
+      }
+
+      function onClickAmPm(type) {
+        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
+        const modelDate = date.buildDate({
+          hour: +timeModelUnits[0],
+          minute: +timeModelUnits[1],
+          second: +timeModelUnits[2] || 0,
+        });
+
+        isAm.value = type === language[props.lang].am;
+        if (type === language[props.lang].am && modelDate.getHours() >= 12) {
+          const resultDate = date.subtractFromDate(modelDate, { hour: 12 });
+          model.value = date.formatDate(resultDate, modelFormat);
+        } else if (type === language[props.lang].pm && modelDate.getHours() < 12) {
+          const resultDate = date.addToDate(modelDate, { hour: 12 });
+          model.value = date.formatDate(resultDate, modelFormat);
+        }
+      }
+
+      function onUpdateTimeUnit(val, unit) {
+        const inputLimitDict = {
+          hour: 12,
+          min: 59,
+          sec: 59,
+        };
+
+        const timeUnitEnum = {
+          hour: 0,
+          min: 1,
+          sec: 2,
+        };
+
+        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
+        const modelDate = date.buildDate({
+          hour: +timeModelUnits[0],
+          minute: +timeModelUnits[1],
+          second: +timeModelUnits[2] || 0,
+        });
+        const amPmModelTimeUnits = date
+          .formatDate(modelDate, 'hh:mm:ss')
+          .match(timeRegex)
+          .slice(1, 4);
+        if (+val > inputLimitDict[unit]) {
+          nextTick(() => {
+            timeUnitModel.value[unit] = +amPmModelTimeUnits[timeUnitEnum[unit]];
+          });
+          return;
+        }
+
+        const resultDate = date.adjustDate(modelDate, {
+          hour:
+            +timeUnitModel.value.hour + (!isAm.value && +timeUnitModel.value.hour < 12 ? 12 : 0),
+          minute: +timeUnitModel.value.min,
+          second: +timeUnitModel.value.sec || 0,
+        });
+        model.value = date.formatDate(resultDate, modelFormat);
+      }
+
+      function formatTimeUnit() {
+        const timeModelUnits = model.value.match(timeRegex).slice(1, 4);
+        const modelDate = date.buildDate({
+          hour: +timeModelUnits[0],
+          minute: +timeModelUnits[1],
+          second: +timeModelUnits[2] || 0,
+        });
+        const amPmModelTimeUnits = date
+          .formatDate(modelDate, 'hh:mm:ss')
+          .match(timeRegex)
+          .slice(1, 4);
+        [
+          timeUnitModel.value.hour,
+          timeUnitModel.value.min,
+          timeUnitModel.value.sec,
+        ] = amPmModelTimeUnits;
+        isAm.value = +timeModelUnits[0] < 12;
+      }
+
+      watch(
+        () => props.modelValue,
+        () => {
+          formatTimeUnit();
+        },
+      );
+
+      return {
+        arrowUpIcon,
+        arrowDownIcon,
+        language,
+
+        model,
+        isAm,
+        timeUnitModel,
+        onClickUp,
+        onClickDown,
+        onClickAmPm,
+        onUpdateTimeUnit,
+        formatTimeUnit,
+      };
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .time-picker-card {
+    height: 124px;
+    .ampm-section {
+      padding: 30px 24px;
+      .s-button {
+        min-width: 0;
+        width: 47px;
+        height: 28px;
+      }
+      .q-btn--outline {
+        .q-btn__content {
+          > span {
+            color: $Grey_Darken-2;
+          }
+        }
+      }
+    }
+    .time-section {
+      padding: 24px;
+      > div {
+        .s-input {
+          width: 38px;
+          height: 28px;
+          .q-field__inner {
+            .q-field__control {
+              border-radius: 4px;
+              .q-field__control-container {
+                .q-field__native {
+                  text-align: center;
+                  color: $Grey_Darken-2;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>