quasar-ui-sellmate-ui-kit 3.14.14 → 3.14.16

package/src/components/SChip.vue

@@ -1,12 +1,12 @@
 <template>
   <q-chip
-    class="no-hover row items-center text-color-Grey_Darken-4 s-chip"
+    class="no-hover row items-center text-color-grey_90 s-chip"
     square
     removable
     outline
     dense
     :clickable="!!inputValue"
-    color="Grey_Default"
+    color="grey_65"
     :ripple="false"
     :icon-remove="chipRemoveIcon"
   >
@@ -26,74 +26,74 @@
 </template>
 
 <script>
-import { defineComponent, ref, watch } from 'vue';
-import { QChip } from 'quasar';
-import { chipRemoveIcon } from '../assets/icons';
+  import { defineComponent, ref, watch } from 'vue';
+  import { QChip } from 'quasar';
+  import { chipRemoveIcon } from '../assets/icons';
 
-export default defineComponent({
-  name: 'SChip',
-  components: { QChip },
-  props: {
-    input: { type: String, default: '' },
-  },
-  setup(props, { emit }) {
-    const inputValue = ref(props.input);
-    watch(
-      () => props.input,
-      (val) => {
-        inputValue.value = val;
-      },
-    );
-    function handleInput(event) {
-      inputValue.value = event.target.outerText;
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        event.target.blur();
-        emit('update:input', inputValue.value);
+  export default defineComponent({
+    name: 'SChip',
+    components: { QChip },
+    props: {
+      input: { type: String, default: '' },
+    },
+    setup(props, { emit }) {
+      const inputValue = ref(props.input);
+      watch(
+        () => props.input,
+        val => {
+          inputValue.value = val;
+        },
+      );
+      function handleInput(event) {
+        inputValue.value = event.target.outerText;
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          event.target.blur();
+          emit('update:input', inputValue.value);
+        }
       }
-    }
-    return {
-      chipRemoveIcon,
-      inputValue,
-      handleInput,
-    };
-  },
-});
+      return {
+        chipRemoveIcon,
+        inputValue,
+        handleInput,
+      };
+    },
+  });
 </script>
 
 <style lang="scss">
-@import "../css/quasar.variables.scss";
+  @import '../css/quasar.variables.scss';
 
-.s-chip {
-  padding: $with-icon-padding !important;
-  border-radius: $button-border-radius;
-  background-color: white;
-  min-height: 28px;
-  &:hover {
-    border-color: $Grey_Darken-4;
-    .q-focus-helper {
-      background: inherit;
+  .s-chip {
+    padding: $with-icon-padding !important;
+    border-radius: $button-border-radius;
+    background-color: white;
+    min-height: 28px;
+    &:hover {
+      border-color: $grey_90;
+      .q-focus-helper {
+        background: inherit;
+      }
+    }
+    .q-chip__content {
+      color: $grey_90;
+      font-size: $default-font;
+      font-weight: $default-font-weight;
+      height: $default-content-height;
+      min-height: $default-content-height;
+    }
+    .q-chip__icon--remove {
+      color: $grey_90;
+      font-size: $icon-size-sm;
+      margin: 0;
+      margin-left: $default-icon-margin;
     }
   }
-  .q-chip__content {
-    color: $Grey_Darken-4;
-    font-size: $default-font;
-    font-weight: $default-font-weight;
-    height: $default-content-height;
-    min-height: $default-content-height;
-  }
-  .q-chip__icon--remove {
-    color: $Grey_Darken-4;
-    font-size: $icon-size-sm;
-    margin: 0;
-    margin-left: $default-icon-margin;
-  }
-}
-.s-chip-input {
-  height: 28px;
-  padding: 4px 0 !important;
-  &:focus-visible {
-    outline: none;
+  .s-chip-input {
+    height: 28px;
+    padding: 4px 0 !important;
+    &:focus-visible {
+      outline: none;
+    }
   }
-}
 </style>

package/src/components/SDate.vue

@@ -32,7 +32,7 @@
               <q-icon
                 :name="dateRangeIcon"
                 size="20px"
-                color="Grey_Darken-1"
+                color="grey_70"
                 class="cursor-pointer"
                 @click="fromMenuRef[menuModel.from ? 'hide' : 'show']()"
               />
@@ -54,7 +54,7 @@
                     class="reset-btn no-hover"
                     flat
                     :label="lang ? locale[lang].today : '오늘'"
-                    text-color="Grey_Darken-4"
+                    text-color="grey_90"
                     :ripple="false"
                     @click="resetDate('from')"
                   />
@@ -76,7 +76,7 @@
               </q-menu>
             </template>
           </q-input>
-          <span class="q-mx-sm text-Grey_Darken-4">~</span>
+          <span class="q-mx-sm text-grey_90">~</span>
           <q-input
             v-model="dateModel.to"
             dense
@@ -91,7 +91,7 @@
               <q-icon
                 :name="dateRangeIcon"
                 size="20px"
-                color="Grey_Darken-1"
+                color="grey_70"
                 class="cursor-pointer"
                 @click="toMenuRef[menuModel.to ? 'hide' : 'show']()"
               />
@@ -113,7 +113,7 @@
                     class="reset-btn no-hover"
                     flat
                     :label="lang ? locale[lang].today : '오늘'"
-                    text-color="Grey_Darken-4"
+                    text-color="grey_90"
                     :ripple="false"
                     @click="resetDate('to')"
                   />
@@ -150,7 +150,7 @@
               <q-icon
                 :name="dateRangeIcon"
                 size="20px"
-                color="Grey_Darken-1"
+                color="grey_70"
                 class="cursor-pointer"
                 @click="singleMenuRef[menuModel.single ? 'hide' : 'show']()"
               />
@@ -172,7 +172,7 @@
                     class="reset-btn no-hover"
                     flat
                     :label="lang ? locale[lang].today : '오늘'"
-                    text-color="Grey_Darken-4"
+                    text-color="grey_90"
                     :ripple="false"
                     @click="resetDate()"
                   />
@@ -208,7 +208,7 @@
   import { QIcon, QInput, QDate, QMenu, QBtn, date } from 'quasar';
   import { dateRangeIcon, closeIcon } from '../assets/icons';
   import { useModelBinder } from '../composables/modelBinder';
-  import { initLocaleObj } from '../constants/locale'
+  import { initLocaleObj } from '../constants/locale';
 
   export default {
     name: 'SDate',
@@ -241,7 +241,7 @@
       },
       locale: {
         type: Object,
-        default: initLocaleObj
+        default: initLocaleObj,
       },
       useDelete: {
         type: Boolean,
@@ -525,29 +525,29 @@
       .q-field__before {
         height: 100%;
         padding: 4px 12px !important;
-        border: 1px solid $Grey_Lighten-1;
+        border: 1px solid $grey_55;
         border-right: none;
         border-radius: 2px 0 0 2px;
-        background: $Grey_Lighten-5;
+        background: $grey_10;
 
         .date-picker-label {
           font-size: $default-font;
           font-weight: $default-font-weight;
-          color: $Grey_Darken-4;
+          color: $grey_90;
         }
       }
     }
 
     &.q-field--disabled {
       .q-field__before {
-        border: 1px solid $Grey_Lighten-2;
+        border: 1px solid $grey_45;
         border-right: none;
       }
 
       .q-field__inner {
         .q-field__control {
           &:after {
-            border: 1px solid $Grey_Lighten-2;
+            border: 1px solid $grey_45;
           }
         }
       }
@@ -582,7 +582,7 @@
         height: 100%;
 
         &:after {
-          border: 1px solid $Grey_Lighten-1;
+          border: 1px solid $grey_55;
           box-shadow: none;
         }
 

package/src/components/SDateAutoRangePicker.vue

@@ -3,7 +3,7 @@
     dense
     outlined
     :class="{
-      'text-Grey_Default bg-Grey_Lighten-5': disable,
+      'text-grey_65 bg-grey_10': disable,
       's-date-auto-range-picker--inside': insideLabel,
       's-date-auto-range-picker--use-icon': useDelete,
     }"
@@ -16,10 +16,8 @@
   >
     <template v-slot:before v-if="insideLabel">
       <div
-        class="date-picker-label s-px-sm q-py-xs text-Grey_Darken-4 bg-Grey_Lighten-5"
-        :class="disable
-          ? 's-border-Grey_Lighten-2'
-          : 's-border-Grey_Lighten-1'"
+        class="date-picker-label s-px-sm q-py-xs text-grey_90 bg-grey_10"
+        :class="disable ? 's-border-grey_45' : 's-border-grey_55'"
       >
         {{ insideLabel }}
       </div>
@@ -29,7 +27,7 @@
         :name="dateRangeIcon"
         class="cursor-pointer q-pa-none no-hover"
         size="20px"
-        :color="disable ? 'Grey_Default' : 'Grey_Darken-1'"
+        :color="disable ? 'grey_65' : 'grey_70'"
       >
         <q-menu v-model="calendarOpen" fit class="date-picker-range-wrapper" ref="dateMenuRef">
           <q-date
@@ -41,7 +39,7 @@
             mask="YYYY-MM-DD"
             :locale="lang ? locale[lang] : {}"
             :options="optionsStartFn"
-            @update:model-value="(value) => updateDate(value, 'from')"
+            @update:model-value="value => updateDate(value, 'from')"
           />
           <q-separator vertical />
           <q-date
@@ -53,7 +51,7 @@
             mask="YYYY-MM-DD"
             :locale="lang ? locale[lang] : {}"
             :options="optionsEndFn"
-            @update:model-value="(value) => updateDate(value, 'to')"
+            @update:model-value="value => updateDate(value, 'to')"
           >
             <q-btn
               class="reset-to-today-btn no-shadow no-hover"
@@ -67,11 +65,8 @@
       </q-icon>
     </template>
     <template v-slot:default>
-      <span class="text-center date-str">{{
-        dateModel.from
-      }}</span>~<span class="text-center date-str">{{
-        dateModel.to
-      }}</span>
+      <span class="text-center date-str">{{ dateModel.from }}</span
+      >~<span class="text-center date-str">{{ dateModel.to }}</span>
     </template>
     <template v-slot:append v-if="useDelete">
       <q-icon
@@ -90,7 +85,7 @@
   import { defineComponent, ref, computed, watch } from 'vue';
   import { QInput, QBtn, QDate, QMenu, QIcon, QSeparator, date } from 'quasar';
   import { dateRangeIcon, closeIcon } from '../assets/icons';
-  import { initLocaleObj } from '../constants/locale'
+  import { initLocaleObj } from '../constants/locale';
 
   export default defineComponent({
     name: 'SDateAutoRangePicker',
@@ -115,7 +110,7 @@
         type: Object,
         /**
          * @returns {{ from: null | string; to: null | string; }}
-        */
+         */
         default: () => ({ from: null, to: null }),
         require: true,
       },
@@ -132,7 +127,7 @@
         /**
          * number 일 경우, 기본 값 date
          * @returns {null | number | { ['date' | 'month' | 'year']: number; }}
-        */
+         */
         default: null,
       },
       width: {
@@ -148,9 +143,13 @@
       const todayReset = date.formatDate(new Date(), 'YYYY/MM/DD');
 
       const dateModel = ref({ from: todayReset, to: todayReset });
-      watch(() => props.modelValue, (newValue) => {
-        dateModel.value = newValue;
-      }, { immediate: true });
+      watch(
+        () => props.modelValue,
+        newValue => {
+          dateModel.value = newValue;
+        },
+        { immediate: true },
+      );
 
       function resetDate() {
         dateModel.value.from = date.formatDate(todayReset, 'YYYY-MM-DD');
@@ -165,9 +164,13 @@
       function optionsStartFn() {
         if (dateModel.value.from && props.dateLimit) {
           limit.value = '';
-          limit.value = date.formatDate(date.addToDate(new Date(dateModel.value.from), typeof props.dateLimit === 'number'
-          ? { date: props.dateLimit }
-          : props.dateLimit), 'YYYY-MM-DD');
+          limit.value = date.formatDate(
+            date.addToDate(
+              new Date(dateModel.value.from),
+              typeof props.dateLimit === 'number' ? { date: props.dateLimit } : props.dateLimit,
+            ),
+            'YYYY-MM-DD',
+          );
         }
         return true;
       }
@@ -187,7 +190,7 @@
       /**
        * @param {string} model
        * @param {'from' | 'to'} position
-      */
+       */
       function updateDate(model, position = 'from') {
         dateModel.value[position] = model;
         emit('update:modelValue', dateModel.value);
@@ -218,94 +221,94 @@
 </script>
 
 <style lang="scss">
-@import '../css/quasar.variables.scss';
+  @import '../css/quasar.variables.scss';
 
-.s-date-auto-range-picker {
-  width: v-bind(dateWidth);
-  .q-field__control {
-    max-height: $default-height;
-    height: $default-height;
-    padding: 0;
-    &:before {
-      border: 1px solid $Grey_Lighten-1 !important;
-    }
-    &:after {
-      border-color: transparent !important;
-      box-shadow: none !important;
-    }
-    &:hover,
-    &:active {
-      box-sizing: none;
-      background-color: $Grey_Lighten-5;
-    }
-    .q-field__prepend {
-      padding: 0;
-      margin: 0 4px 0 8px;
-      height: 28px;
-      width: 20px;
-    }
-    &-container {
-      align-items: center;
-      padding: 0;
-      margin: 0 16px 0 8px;
-      .q-field__native {
-        display: none;
-      }
-      .date-str {
-        min-width: 66px;
-        line-height: $default-height;
-        font-size: $default-font;
-        display: block;
-        color: $Grey_Darken-4;
-        height: 100%;
-        user-select: none;
-        &:first-of-type {
-          margin-right: $between-margin-sm;
-        }
-        &:last-of-type {
-          margin-left: $between-margin-sm;
-        }
-      }
-    }
-    .q-field__append {
+  .s-date-auto-range-picker {
+    width: v-bind(dateWidth);
+    .q-field__control {
+      max-height: $default-height;
       height: $default-height;
       padding: 0;
-      margin: 0 8px 0 0;
-    }
-  }
-  &.q-field--disabled {
-    .q-field__control {
       &:before {
-        border: 1px solid $Grey_Lighten-2 !important;
+        border: 1px solid $grey_55 !important;
+      }
+      &:after {
+        border-color: transparent !important;
+        box-shadow: none !important;
+      }
+      &:hover,
+      &:active {
+        box-sizing: none;
+        background-color: $grey_10;
+      }
+      .q-field__prepend {
+        padding: 0;
+        margin: 0 4px 0 8px;
+        height: 28px;
+        width: 20px;
       }
       &-container {
+        align-items: center;
+        padding: 0;
+        margin: 0 16px 0 8px;
+        .q-field__native {
+          display: none;
+        }
         .date-str {
-          color: $Grey_Default;
+          min-width: 66px;
+          line-height: $default-height;
+          font-size: $default-font;
+          display: block;
+          color: $grey_90;
+          height: 100%;
+          user-select: none;
+          &:first-of-type {
+            margin-right: $between-margin-sm;
+          }
+          &:last-of-type {
+            margin-left: $between-margin-sm;
+          }
         }
       }
-    }
-  }
-  &--inside {
-    .q-field__before {
-      height: $default-height;
-      line-height: $default-content-height;
-      padding: 0;
-      .date-picker-label {
-        border-right: none !important;
-        border-radius: $generic-border-radius 0 0 $generic-border-radius;
+      .q-field__append {
         height: $default-height;
-        font-size: $default-font;
+        padding: 0;
+        margin: 0 8px 0 0;
       }
     }
-    .q-field__control {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+    &.q-field--disabled {
+      .q-field__control {
+        &:before {
+          border: 1px solid $grey_45 !important;
+        }
+        &-container {
+          .date-str {
+            color: $grey_65;
+          }
+        }
+      }
     }
-  }
-  &--use-icon {
-    .q-field__control-container {
-      margin: 0 8px 0 4px;
+    &--inside {
+      .q-field__before {
+        height: $default-height;
+        line-height: $default-content-height;
+        padding: 0;
+        .date-picker-label {
+          border-right: none !important;
+          border-radius: $generic-border-radius 0 0 $generic-border-radius;
+          height: $default-height;
+          font-size: $default-font;
+        }
+      }
+      .q-field__control {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    &--use-icon {
+      .q-field__control-container {
+        margin: 0 8px 0 4px;
+      }
     }
   }
-}
 </style>

package/src/components/SDatePicker.vue

@@ -4,7 +4,7 @@
     outlined
     :class="{
       's-date-picker-range': range,
-      'text-Grey_Default bg-Grey_Lighten-5': isDisable,
+      'text-grey_65 bg-grey_10': isDisable,
       's-date-picker-inside': insideLabel,
     }"
     readonly
@@ -27,7 +27,7 @@
         dense
         :ripple="false"
         flat
-        color="Grey_Darken-4"
+        color="grey_90"
         class="q-pa-none no-hover"
         aria-label="date-button"
       >
@@ -50,7 +50,7 @@
       <q-icon
         :name="closeIcon"
         size="16px"
-        color="Grey_Lighten-1"
+        color="grey_55"
         class="cursor-pointer"
         @click="deleteDate"
         aria-label="close-button"
@@ -265,18 +265,18 @@
         height: 100%;
         align-items: center;
         &:after {
-          border: 1px solid $Grey_Lighten-1;
+          border: 1px solid $grey_55;
           box-shadow: none;
         }
         &:hover,
         &:active {
-          background: $Grey_Lighten-5;
+          background: $grey_10;
         }
         .q-field__prepend {
           .q-icon {
             width: 20px;
             height: 20px;
-            color: $Grey_Darken-1;
+            color: $grey_70;
           }
         }
         .q-field__prepend {
@@ -310,7 +310,7 @@
               weight: $default-font-weight;
             }
             input::placeholder {
-              color: $Grey_Darken-4;
+              color: $grey_90;
             }
           }
         }
@@ -318,31 +318,31 @@
     }
   }
   .q-field--disabled.s-date-picker {
-    color: $Grey_Default !important;
+    color: $grey_65 !important;
     .q-field__inner {
-      color: $Grey_Default !important;
+      color: $grey_65 !important;
       .q-field__control {
-        color: $Grey_Default !important;
+        color: $grey_65 !important;
         opacity: 1 !important;
         &:after {
-          border: 1px solid $Grey_Lighten-2;
+          border: 1px solid $grey_45;
         }
         .q-field__prepend {
           opacity: 1 !important;
           .q-icon {
-            color: $Grey_Default;
+            color: $grey_65;
           }
         }
         &-container {
           opacity: 1 !important;
           .q-field__native {
-            color: $Grey_Default !important;
+            color: $grey_65 !important;
           }
         }
       }
     }
     &.q-field--float {
-      color: $Grey_Default !important;
+      color: $grey_65 !important;
       opacity: 0.9 !important;
     }
   }
@@ -353,14 +353,14 @@
       height: 100%;
       line-height: $default-content-height;
       padding: 4px 12px;
-      border: 1px solid $Grey_Lighten-1;
-      background-color: $Grey_Lighten-5;
+      border: 1px solid $grey_55;
+      background-color: $grey_10;
       border-right: none;
       border-radius: 2px 0 0 2px;
       .date-picker-label {
         font-size: $default-font;
         font-weight: $default-font-weight;
-        color: $Grey_Darken-4;
+        color: $grey_90;
       }
     }
     .q-field__inner {
@@ -370,10 +370,10 @@
     }
     &.q-field--disabled {
       .q-field__before {
-        border: 1px solid $Grey_Lighten-2;
+        border: 1px solid $grey_45;
         border-right: none;
         .date-picker-label {
-          color: $Grey_Default;
+          color: $grey_65;
         }
       }
     }