quasar-ui-sellmate-ui-kit 2.2.2 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SButton.vue

@@ -4,6 +4,7 @@
     no-caps
     no-wrap
     unelevated
+    :color="color"
     :ripple="false"
     :class="{
       's-button-md': size === 'md',
@@ -32,6 +33,10 @@ export default defineComponent({
       type: String,
       default: 'sm',
     },
+    color: {
+      type: String,
+      default: 'Blue_B_Default',
+    },
     noHover: {
       type: Boolean,
       default: false,
@@ -41,7 +46,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
+
 // TODO: hover 색 맞추기
 .s-button {
   &.q-btn {

package/src/components/SButtonGroup.vue

@@ -28,7 +28,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-btn-group {
   .disabled {

package/src/components/SButtonToggle.vue

@@ -54,7 +54,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-btn-toggle {
     .q-btn {

package/src/components/SCaution.vue

@@ -45,7 +45,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-caution {
   padding: 20px 0;

package/src/components/SCheckbox.vue

@@ -26,7 +26,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-checkbox {
   margin: 0;

package/src/components/SChip.vue

@@ -62,7 +62,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-chip {
   padding: $with-icon-padding !important;

package/src/components/SDate.vue

@@ -551,7 +551,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-date {
     width: fit-content;

package/src/components/SDateAutoRangePicker.vue

@@ -248,7 +248,7 @@
 </script>
 
 <style lang="scss">
-@import '../css/variable.scss';
+@import '../css/quasar.variables.scss';
 
 .s-date-auto-range-picker {
   width: v-bind(dateWidth);

package/src/components/SDatePicker.vue

@@ -4,22 +4,24 @@
     outlined
     :class="{
       's-date-picker-range': range,
-      'text-Grey_Default bg-Grey_Lighten-5': $props.isDisable,
+      'text-Grey_Default bg-Grey_Lighten-5': isDisable,
       's-date-picker-inside': insideLabel,
     }"
     readonly
     class="q-pa-none s-date-picker"
-    :placeholder="$props.dateText"
+    :placeholder="dateText"
     v-model="inputDate"
-    :disable="$props.isDisable"
+    :disable="isDisable"
     @click="calendarOpen = true"
+    :name="name"
+    :type="type"
   >
-    <template v-slot:before>
-      <div class="date-picker-label" v-if="insideLabel && label">
+    <template #before v-if="insideLabel">
+      <div class="date-picker-label">
         {{ label }}
       </div>
     </template>
-    <template v-slot:prepend>
+    <template #prepend>
       <div v-if="!range">
         <q-btn
           :icon="dateRangeIcon"
@@ -28,6 +30,9 @@
           flat
           color="Grey_Darken-4"
           class="q-pa-none no-hover"
+          :nativeEl="{
+            'aria-label': 'date-button'
+          }"
         >
           <q-menu v-model="calendarOpen" fit class="date-picker-wrapper" :offset="[12, 12]">
             <q-date
@@ -50,6 +55,7 @@
           class="q-pa-none no-hover"
           @click="clickDateIcon"
           color="Grey_Darken-4"
+          aria-label="date-button"
         >
           <q-menu v-model="calendarOpen" fit class="date-picker-wrapper" :offset="[12, 12]">
             <q-date
@@ -67,13 +73,14 @@
         </q-btn>
       </div>
     </template>
-    <template v-if="useDelete" v-slot:append>
+    <template #append v-if="useDelete">
       <q-icon
         :name="closeIcon"
         size="16px"
         color="Grey_Lighten-1"
         class="cursor-pointer"
         @click="deleteDate"
+        aria-label="close-button"
       />
     </template>
   </q-input>
@@ -93,18 +100,17 @@
       QMenu,
       QIcon,
     },
-    data() {
-      return {
-        dateRangeIcon,
-      };
-    },
     props: {
       range: { type: Boolean, default: false },
-      isDisable: Boolean,
-      insideLabel: Boolean,
-      label: String,
+      isDisable: { type: Boolean, default: false },
+      insideLabel: { type: Boolean, default: false },
+      label: { type: String, default: '' },
+      name: { type: String, default: '' },
+      type: { type: String, default: 'text' },
       modelValue: {
         type: [String, Object],
+        required: true,
+        default: () => ({ from: '', to: '' }),
       },
       dateText: String,
       subtractDate: {
@@ -235,6 +241,7 @@
       }
 
       return {
+        dateRangeIcon,
         calendarOpen,
         dateValue,
         inputDate,
@@ -251,9 +258,8 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
-  // TODO : min width 만 지정 하고 넓이 빼기
   .s-date-picker {
     height: $default-height;
     .q-field__before {

package/src/components/SDateRange.vue

@@ -7,7 +7,7 @@
     readonly
     :disable="isDisable"
   >
-    <template v-slot:before v-if="insideLabel">
+    <template v-if="insideLabel" #before>
       <div class="date-picker-label">
         {{ insideLabel }}
       </div>
@@ -124,7 +124,7 @@
         </q-input>
       </div>
     </template>
-    <template v-if="useDelete" v-slot:append>
+    <template v-if="useDelete" #append>
       <q-icon
         :name="closeIcon"
         size="16px"
@@ -227,6 +227,7 @@
       },
       insideLabel: {
         type: String,
+        default: '',
       },
       lang: {
         type: String,
@@ -337,7 +338,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-date-range {
     width: fit-content;

package/src/components/SDateRangePicker.vue

@@ -4,21 +4,21 @@
     outlined
     :class="{
       'text-Grey_Default bg-Grey_Lighten-5': isDisable,
-      's-date-range-picker-inside': insideLabel,
+      's-date-range-picker--inside': insideLabel,
     }"
     readonly
-    class="q-pa-none s-date-range-picker-input bg-white"
+    class="q-pa-none s-date-range-picker bg-white"
     v-model="inputDate"
-    :disable="$props.isDisable"
+    :disable="isDisable"
     @click="calendarOpen = true"
     data-cy="rangeCalendar"
   >
-    <template v-slot:before>
-      <div class="date-picker-label" v-if="insideLabel">
+    <template #before v-if="insideLabel">
+      <div class="date-picker-label">
         {{ insideLabel }}
       </div>
     </template>
-    <template v-slot:prepend>
+    <template #prepend>
       <q-btn
         :icon="dateRangeIcon"
         dense
@@ -67,16 +67,7 @@
         </q-menu>
       </q-btn>
     </template>
-    <template v-if="useDelete" v-slot:append>
-      <q-icon
-        :name="closeIcon"
-        size="16px"
-        class="cursor-pointer"
-        @click="deleteDate"
-        data-cy="delete-icon"
-      />
-    </template>
-    <template v-slot:default>
+    <template #default>
       <div class="flex no-wrap items-center">
         <q-input
           v-if="useInput"
@@ -105,6 +96,15 @@
         }}</span>
       </div>
     </template>
+    <template #append v-if="useDelete">
+      <q-icon
+        :name="closeIcon"
+        size="16px"
+        class="cursor-pointer"
+        @click="deleteDate"
+        data-cy="delete-icon"
+      />
+    </template>
   </q-input>
 </template>
 
@@ -338,76 +338,15 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
-
-  // TODO : min width 만 지정 하고 넓이 빼기
-  .s-date-range-picker-inside {
-    height: 28px;
-
-    .q-field__before {
-      height: 100%;
-      padding: 4px 12px !important;
-      border: 1px solid $Grey_Lighten-1;
-      border-right: none;
-      border-radius: $generic-border-radius 0 0 $generic-border-radius;
-      background: $Grey_Lighten-5;
-
-      .date-picker-label {
-        font-size: $default-font;
-        font-weight: $default-font-weight;
-        color: $Grey_Darken-4;
-      }
-    }
+  @import '../css/quasar.variables.scss';
 
-    .q-field__inner {
-      .q-field__control {
-        border-radius: 0 2px 2px 0;
-        width: 220px;
-
-        .q-field__prepend {
-          .q-icon {
-            width: 20px;
-            height: 20px;
-            color: $Grey_Darken-1;
-          }
-        }
-
-        &-container {
-          > input {
-            display: none;
-          }
-
-          > div {
-            margin-left: 6.5px;
-
-            > span {
-              display: inline-flex;
-              min-width: 70px;
-              font-size: 12px !important;
-            }
-          }
-        }
-      }
-    }
-
-    &.q-field--disabled {
-      .q-field__before {
-        border: 1px solid $Grey_Lighten-2;
-        border-right: none;
-
-        .date-picker-label {
-          color: $Grey_Default;
-        }
-      }
-    }
-  }
-
-  .s-date-range-picker-input {
+  .s-date-range-picker {
     width: fit-content;
     height: $default-height;
 
-    .q-field__before {
+    &.q-field--dense .q-field__before {
       padding: 0;
+      height: 100%;
     }
 
     .q-field__inner {
@@ -521,6 +460,65 @@
       line-height: $default-content-height;
       justify-content: center;
     }
+
+    &--inside {
+      .q-field__before {
+        height: 100%;
+        padding: 4px 12px !important;
+        border: 1px solid $Grey_Lighten-1;
+        border-right: none;
+        border-radius: $generic-border-radius 0 0 $generic-border-radius;
+        background: $Grey_Lighten-5;
+
+        .date-picker-label {
+          font-size: $default-font;
+          font-weight: $default-font-weight;
+          color: $Grey_Darken-4;
+        }
+      }
+
+      .q-field__inner {
+        .q-field__control {
+          border-radius: 0 2px 2px 0;
+          width: 220px;
+
+          .q-field__prepend {
+            .q-icon {
+              width: 20px;
+              height: 20px;
+              color: $Grey_Darken-1;
+            }
+          }
+
+          &-container {
+            > input {
+              display: none;
+            }
+
+            > div {
+              margin-left: 6.5px;
+
+              > span {
+                display: inline-flex;
+                min-width: 70px;
+                font-size: 12px !important;
+              }
+            }
+          }
+        }
+      }
+
+      &.q-field--disabled {
+        .q-field__before {
+          border: 1px solid $Grey_Lighten-2;
+          border-right: none;
+
+          .date-picker-label {
+            color: $Grey_Default;
+          }
+        }
+      }
+    }
   }
 
   .date-picker-range-wrapper.q-menu {

package/src/components/SDateTimePicker.vue

@@ -260,7 +260,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-date-time-picker {
     width: fit-content;

package/src/components/SDialog.vue

@@ -162,7 +162,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-confirm {
   border-radius: 8px;

package/src/components/SDropdown.vue

@@ -73,7 +73,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-dropdown {
     min-height: 0;

package/src/components/SFilePicker.vue

@@ -2,33 +2,35 @@
   <q-file
     outlined
     dense
-    v-model="file"
-    @update:modelValue="$emit('update:modelValue', file)"
+    :model-value="modelValue"
+    @update:model-value="value => $emit('update:modelValue', value)"
     class="s-file rounded-borders"
     ref="sFilePickerRef"
+    :disable="disable"
+    :class="{ 's-file--nodata': displayPlaceholder }"
   >
-    <template v-slot:prepend>
-      <q-icon
-        :name="attachFileIcon"
-        size="20px"
-        color="Grey_Darken-4"
-        @click.stop
-      />
-      <div
-        v-if="((Array.isArray(file) && !file.length) || !file) && placeholder"
-        class="file-placeholder text-Grey_Lighten-2"
-        @click.stop
-      >
+    <template #prepend>
+      <q-icon :name="attachFileIcon" size="20px" color="Grey_Darken-4" @click.stop />
+      <div v-if="displayPlaceholder" class="file-placeholder text-Grey_Lighten-2" @click.stop>
         {{ placeholder }}
       </div>
     </template>
+    <template v-slot:append v-if="clearable">
+      <q-icon
+        :name="closeIcon"
+        size="16px"
+        class="cursor-pointer"
+        @click="clearFile"
+        data-cy="delete-icon"
+      />
+    </template>
   </q-file>
 </template>
 
 <script>
-  import { defineComponent, ref, watch } from 'vue';
+  import { defineComponent, ref, computed } from 'vue';
   import { QFile, QIcon } from 'quasar';
-  import { attachFileIcon } from '../assets/icons.js';
+  import { attachFileIcon, closeIcon } from '../assets/icons.js';
 
   export default defineComponent({
     name: 'SFilePicker',
@@ -41,33 +43,50 @@
         type: String,
         default: '파일을 업로드 해주세요',
       },
-      modelValue: [File, FileList, Array, null, undefined],
+      disable: {
+        type: Boolean,
+        default: false,
+      },
+      clearable: {
+        type: Boolean,
+        default: false,
+      },
+      modelValue: {
+        type: [File, FileList, Array, null],
+        required: true,
+      },
     },
-    setup(props) {
-      const sFilePickerRef = ref(null);
-      const file = ref(props.modelValue);
-
-      watch(
-        () => props.modelValue,
-        newVal => {
-          file.value = newVal;
-        },
-      );
-
+    setup(props, { emit }) {
+      function clearFile() {
+        emit('update:modelValue', null);
+      }
       return {
+        closeIcon,
+        clearFile,
         attachFileIcon,
-        sFilePickerRef,
-        file,
+        sFilePickerRef: ref(null),
+        displayPlaceholder: computed(
+          () => {
+            if (Array.isArray(props.modelValue)) {
+              return props.modelValue.length === 0 || (props.modelValue.length > 0
+                && props.modelValue.every(file => file instanceof File && file.size === 0));
+            }
+            if (props.modelValue === null) {
+              return true;
+            }
+            return props.modelValue instanceof File && props.modelValue.size === 0;
+          },
+        ),
       };
     },
   });
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
-  .s-file.q-file {
-    width: 290px;
+  .s-file {
+    width: fit-content;
     max-height: $default-height;
 
     .q-field__inner {
@@ -96,14 +115,13 @@
           > .q-icon {
             margin-right: $between-margin-md;
           }
-
           .file-placeholder {
             line-height: $default-line-height;
             font-size: $default-font;
             font-weight: $default-font-weight;
             height: 100%;
             display: block;
-            width: 85%;
+            width: fit-content;
           }
         }
 
@@ -129,6 +147,9 @@
           font-size: $default-font;
           width: 20px;
           padding: 0;
+          justify-content: center;
+          align-items: center;
+          margin-left: 8px;
 
           > .q-icon {
             font-size: 20px;
@@ -136,6 +157,12 @@
         }
       }
     }
+
+    &--nodata {
+      .q-field__inner .q-field__control .q-field__control-container {
+        display: none;
+      }
+    }
   }
 
   .s-file.q-field--disabled {

package/src/components/SHelp.vue

@@ -67,7 +67,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-help-btn {
   padding: 4px 16px 4px 10px;

package/src/components/SInput.vue

@@ -149,7 +149,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-input {
     height: auto;

package/src/components/SInputCounter.vue

@@ -42,5 +42,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 </style>

package/src/components/SInputNumber.vue

@@ -83,7 +83,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-input-number {
     height: $default-height;