quasar-ui-sellmate-ui-kit 2.2.33 → 2.3.1

package/src/components/STimePicker.vue

@@ -1,159 +1,159 @@
-<template>
-  <div
-    class="s-time-picker flex no-wrap items-center rounded-borders bg-white"
-    :class="disabled && 's-time-picker-disabled'"
-  >
-    <div v-if="insideLabel" class="inside-label bg-Grey_Lighten-5 full-height flex flex-center">
-      {{ insideLabel }}
-    </div>
-
-    <div
-      class="time-picker full-width flex no-wrap items-center text-Grey_Darken-4 q-pl-sm"
-      :style="range ? 'min-width: 179px' : 'min-width: 122px;'"
-    >
-      <q-icon :name="clockIcon" size="20px" color="Grey_Darken-1" />
-      <div v-if="range" class="content">
-        <span class="cursor-pointer">
-          {{ timeFormat(model.from) }}
-          <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
-            <time-picker-card
-              :lang="lang"
-              :useSecond="useSecond"
-              v-model="model.from"
-              @update:modelValue="handleModel"
-            />
-          </q-menu>
-        </span>
-        <span class="q-mx-sm">~</span>
-        <span class="cursor-pointer">
-          {{ timeFormat(model.to) }}
-          <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
-            <time-picker-card
-              :lang="lang"
-              :useSecond="useSecond"
-              v-model="model.to"
-              @update:modelValue="handleModel"
-            />
-          </q-menu>
-        </span>
-      </div>
-      <div v-else class="cursor-pointer content">
-        {{ timeFormat(model) }}
-        <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
-          <time-picker-card
-            :lang="lang"
-            :useSecond="useSecond"
-            v-model="model"
-            @update:modelValue="handleModel"
-          />
-        </q-menu>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import { defineComponent, ref } from 'vue';
-  import { QIcon, QMenu, date } from 'quasar';
-  import { clockIcon } from '../assets/icons.js';
-  import TimePickerCard from './TimePickerCard.vue';
-
-  export default defineComponent({
-    name: 'STimePicker',
-    components: {
-      QIcon,
-      QMenu,
-      TimePickerCard,
-    },
-    props: {
-      modelValue: {
-        type: [String, Object],
-      },
-      range: {
-        type: Boolean,
-        default: true,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      insideLabel: {
-        type: String,
-        default: '',
-      },
-      lang: {
-        type: String,
-        default: 'ko',
-      },
-      useSecond: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    emits: ['update:modelValue'],
-    setup(props, { emit }) {
-      const model = ref(props.modelValue);
-      const language = { ko: { am: '오전', pm: '오후' }, en: { am: 'AM', pm: 'PM' }, ja: { am: '午前', pm: '午後' } };
-
-      function timeFormat(time) {
-        const timeRegex = props.useSecond ? /(\d{2}):(\d{2}):(\d{2})/ : /(\d{2}):(\d{2})/;
-        const timeUnits = time.match(timeRegex).slice(1, 4);
-        const modelDate = date.buildDate({
-          hour: +timeUnits[0],
-          minute: +timeUnits[1],
-          second: +timeUnits[2] || 0,
-        });
-        const amPmModelTimeUnits = date.formatDate(modelDate, 'hh:mm:ss');
-        return `${+timeUnits[0] < 12 ? language[props.lang].am : language[props.lang].pm} ${
-          props.useSecond ? amPmModelTimeUnits : amPmModelTimeUnits.slice(0, 5)
-        }`;
-      }
-
-      function handleModel() {
-        emit('update:modelValue', model.value);
-      }
-
-      return {
-        model,
-        clockIcon,
-        handleModel,
-        timeFormat,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-time-picker {
-    width: fit-content;
-    height: 28px;
-    border: 1px solid $Grey_Lighten-1;
-    > .inside-label {
-      border-right: 1px solid $Grey_Lighten-1;
-      padding: 0 12px;
-    }
-    > .time-picker {
-      > .content {
-        width: 100%;
-        text-align: center;
-        margin-right: 4px;
-      }
-    }
-    &:hover {
-      background: $Grey_Lighten-5;
-    }
-    &.s-time-picker-disabled {
-      background: $Grey_Lighten-4 !important;
-      border: 1px solid $Grey_Lighten-2;
-      cursor: not-allowed !important;
-      > .time-picker {
-        color: $Grey_Default !important;
-      }
-    }
-  }
-  .time-picker-menu {
-    border-radius: 8px !important;
-  }
-</style>
+<template>
+  <div
+    class="s-time-picker flex no-wrap items-center rounded-borders bg-white"
+    :class="disabled && 's-time-picker-disabled'"
+  >
+    <div v-if="insideLabel" class="inside-label bg-Grey_Lighten-5 full-height flex flex-center">
+      {{ insideLabel }}
+    </div>
+
+    <div
+      class="time-picker full-width flex no-wrap items-center text-Grey_Darken-4 q-pl-sm"
+      :style="range ? 'min-width: 179px' : 'min-width: 122px;'"
+    >
+      <q-icon :name="clockIcon" size="20px" color="Grey_Darken-1" />
+      <div v-if="range" class="content">
+        <span class="cursor-pointer">
+          {{ timeFormat(model.from) }}
+          <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
+            <time-picker-card
+              :lang="lang"
+              :useSecond="useSecond"
+              v-model="model.from"
+              @update:modelValue="handleModel"
+            />
+          </q-menu>
+        </span>
+        <span class="q-mx-sm">~</span>
+        <span class="cursor-pointer">
+          {{ timeFormat(model.to) }}
+          <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
+            <time-picker-card
+              :lang="lang"
+              :useSecond="useSecond"
+              v-model="model.to"
+              @update:modelValue="handleModel"
+            />
+          </q-menu>
+        </span>
+      </div>
+      <div v-else class="cursor-pointer content">
+        {{ timeFormat(model) }}
+        <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
+          <time-picker-card
+            :lang="lang"
+            :useSecond="useSecond"
+            v-model="model"
+            @update:modelValue="handleModel"
+          />
+        </q-menu>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, ref } from 'vue';
+  import { QIcon, QMenu, date } from 'quasar';
+  import { clockIcon } from '../assets/icons.js';
+  import TimePickerCard from './TimePickerCard.vue';
+
+  export default defineComponent({
+    name: 'STimePicker',
+    components: {
+      QIcon,
+      QMenu,
+      TimePickerCard,
+    },
+    props: {
+      modelValue: {
+        type: [String, Object],
+      },
+      range: {
+        type: Boolean,
+        default: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      insideLabel: {
+        type: String,
+        default: '',
+      },
+      lang: {
+        type: String,
+        default: 'ko',
+      },
+      useSecond: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+      const model = ref(props.modelValue);
+      const language = { ko: { am: '오전', pm: '오후' }, en: { am: 'AM', pm: 'PM' }, ja: { am: '午前', pm: '午後' } };
+
+      function timeFormat(time) {
+        const timeRegex = props.useSecond ? /(\d{2}):(\d{2}):(\d{2})/ : /(\d{2}):(\d{2})/;
+        const timeUnits = time.match(timeRegex).slice(1, 4);
+        const modelDate = date.buildDate({
+          hour: +timeUnits[0],
+          minute: +timeUnits[1],
+          second: +timeUnits[2] || 0,
+        });
+        const amPmModelTimeUnits = date.formatDate(modelDate, 'hh:mm:ss');
+        return `${+timeUnits[0] < 12 ? language[props.lang].am : language[props.lang].pm} ${
+          props.useSecond ? amPmModelTimeUnits : amPmModelTimeUnits.slice(0, 5)
+        }`;
+      }
+
+      function handleModel() {
+        emit('update:modelValue', model.value);
+      }
+
+      return {
+        model,
+        clockIcon,
+        handleModel,
+        timeFormat,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-time-picker {
+    width: fit-content;
+    height: 28px;
+    border: 1px solid $Grey_Lighten-1;
+    > .inside-label {
+      border-right: 1px solid $Grey_Lighten-1;
+      padding: 0 12px;
+    }
+    > .time-picker {
+      > .content {
+        width: 100%;
+        text-align: center;
+        margin-right: 4px;
+      }
+    }
+    &:hover {
+      background: $Grey_Lighten-5;
+    }
+    &.s-time-picker-disabled {
+      background: $Grey_Lighten-4 !important;
+      border: 1px solid $Grey_Lighten-2;
+      cursor: not-allowed !important;
+      > .time-picker {
+        color: $Grey_Default !important;
+      }
+    }
+  }
+  .time-picker-menu {
+    border-radius: 8px !important;
+  }
+</style>

package/src/components/SToggle.vue

@@ -1,68 +1,68 @@
-<template>
-  <q-toggle color="positive" dense class="s-toggle" />
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import { QToggle } from 'quasar';
-
-export default defineComponent({
-  name: 'SToggle',
-  components: {
-    QToggle,
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-.s-toggle {
-  height: $default-content-height;
-  .q-toggle__inner {
-    padding: 0;
-    width: 36px;
-    height: $default-content-height;
-    .q-toggle__track {
-      width: inherit;
-      height: $default-content-height;
-      background: $Grey_Lighten-2;
-      border-radius: 12px;
-      margin-right: 0;
-      opacity: 1;
-    }
-    .q-toggle__thumb {
-      font-size: $default-font;
-      width: $default-icon-size;
-      height: $default-icon-size;
-      top: 2px;
-      left: 2px;
-    }
-    &--truthy {
-      .q-toggle__track {
-        background: $positive;
-      }
-      .q-toggle__thumb {
-        left: 1.5em;
-        color: white;
-
-      }
-    }
-  }
-}
-
-.disabled.s-toggle {
-  border: none;
-  background: none !important;
-  opacity: 1 !important;
-  .q-toggle__inner {
-    .q-toggle__track {
-      background: $Grey_Lighten-4;
-    }
-    &--truthy {
-      .q-toggle__track {
-        background: $Blue_C_Lighten-4;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <q-toggle color="positive" dense class="s-toggle" />
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { QToggle } from 'quasar';
+
+export default defineComponent({
+  name: 'SToggle',
+  components: {
+    QToggle,
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+.s-toggle {
+  height: $default-content-height;
+  .q-toggle__inner {
+    padding: 0;
+    width: 36px;
+    height: $default-content-height;
+    .q-toggle__track {
+      width: inherit;
+      height: $default-content-height;
+      background: $Grey_Lighten-2;
+      border-radius: 12px;
+      margin-right: 0;
+      opacity: 1;
+    }
+    .q-toggle__thumb {
+      font-size: $default-font;
+      width: $default-icon-size;
+      height: $default-icon-size;
+      top: 2px;
+      left: 2px;
+    }
+    &--truthy {
+      .q-toggle__track {
+        background: $positive;
+      }
+      .q-toggle__thumb {
+        left: 1.5em;
+        color: white;
+
+      }
+    }
+  }
+}
+
+.disabled.s-toggle {
+  border: none;
+  background: none !important;
+  opacity: 1 !important;
+  .q-toggle__inner {
+    .q-toggle__track {
+      background: $Grey_Lighten-4;
+    }
+    &--truthy {
+      .q-toggle__track {
+        background: $Blue_C_Lighten-4;
+      }
+    }
+  }
+}
+</style>