quasar-ui-sellmate-ui-kit 2.2.4 → 2.2.5

package/package.json

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

package/src/components/SFilePicker.vue

@@ -1,200 +1,200 @@
-<template>
-  <q-file
-    outlined
-    dense
-    :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 #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, computed } from 'vue';
-  import { QFile, QIcon } from 'quasar';
-  import { attachFileIcon, closeIcon } from '../assets/icons.js';
-
-  export default defineComponent({
-    name: 'SFilePicker',
-    components: {
-      QFile,
-      QIcon,
-    },
-    props: {
-      placeholder: {
-        type: String,
-        default: '파일을 업로드 해주세요',
-      },
-      disable: {
-        type: Boolean,
-        default: false,
-      },
-      clearable: {
-        type: Boolean,
-        default: false,
-      },
-      modelValue: {
-        type: [File, FileList, Array, null],
-        required: true,
-      },
-    },
-    setup(props, { emit }) {
-      function clearFile() {
-        emit('update:modelValue', null);
-      }
-      return {
-        closeIcon,
-        clearFile,
-        attachFileIcon,
-        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/quasar.variables.scss';
-
-  .s-file {
-    width: fit-content;
-    max-height: $default-height;
-
-    .q-field__inner {
-      .q-field__control {
-        align-items: center;
-        padding: 4px 8px;
-        min-height: $default-height;
-        height: $default-height;
-
-        &:hover,
-        &:active {
-          background: $Grey_Lighten-5;
-        }
-
-        &:after {
-          border: 1px solid $Grey_Lighten-1;
-          box-shadow: none;
-        }
-
-        .q-field__prepend {
-          width: fit-content;
-          height: $default-content-height;
-          padding: 0;
-          cursor: pointer;
-
-          > .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: fit-content;
-          }
-        }
-
-        &-container {
-          .q-field__native {
-            min-height: 0;
-
-            > div {
-              font-size: $default-font;
-              overflow: hidden;
-              color: $Grey_Darken-5;
-              word-break: keep-all;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              margin-right: 8px;
-              line-height: 16px;
-            }
-          }
-        }
-
-        .q-field__append {
-          height: $default-content-size;
-          font-size: $default-font;
-          width: 20px;
-          padding: 0;
-          justify-content: center;
-          align-items: center;
-          margin-left: 8px;
-
-          > .q-icon {
-            font-size: 20px;
-          }
-        }
-      }
-    }
-
-    &--nodata {
-      .q-field__inner .q-field__control .q-field__control-container {
-        display: none;
-      }
-    }
-  }
-
-  .s-file.q-field--disabled {
-    .q-field__inner {
-      .q-field__control {
-        opacity: 1 !important;
-        background: $Grey_Lighten-3;
-
-        &:after {
-          border: 1px solid $Grey_Lighten-2;
-        }
-
-        &-container {
-          .q-field__native {
-            > span {
-              color: $Grey_Default;
-            }
-          }
-        }
-
-        .q-field__prepend {
-          opacity: 1 !important;
-
-          .file-placeholder {
-            color: $Grey_Default !important;
-          }
-
-          .q-icon {
-            color: $Grey_Default !important;
-          }
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <q-file
+    outlined
+    dense
+    :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 #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, computed } from 'vue';
+  import { QFile, QIcon } from 'quasar';
+  import { attachFileIcon, closeIcon } from '../assets/icons.js';
+
+  export default defineComponent({
+    name: 'SFilePicker',
+    components: {
+      QFile,
+      QIcon,
+    },
+    props: {
+      placeholder: {
+        type: String,
+        default: '파일을 업로드 해주세요',
+      },
+      disable: {
+        type: Boolean,
+        default: false,
+      },
+      clearable: {
+        type: Boolean,
+        default: false,
+      },
+      modelValue: {
+        type: [File, FileList, Array, null],
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      function clearFile() {
+        emit('update:modelValue', null);
+      }
+      return {
+        closeIcon,
+        clearFile,
+        attachFileIcon,
+        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/quasar.variables.scss';
+
+  .s-file {
+    width: fit-content;
+    max-height: $default-height;
+
+    .q-field__inner {
+      .q-field__control {
+        align-items: center;
+        padding: 4px 8px;
+        min-height: $default-height;
+        height: $default-height;
+
+        &:hover,
+        &:active {
+          background: $Grey_Lighten-5;
+        }
+
+        &:after {
+          border: 1px solid $Grey_Lighten-1;
+          box-shadow: none;
+        }
+
+        .q-field__prepend {
+          width: fit-content;
+          height: $default-content-height;
+          padding: 0;
+          cursor: pointer;
+
+          > .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: fit-content;
+          }
+        }
+
+        &-container {
+          .q-field__native {
+            min-height: 0;
+
+            > div {
+              font-size: $default-font;
+              overflow: hidden;
+              color: $Grey_Darken-5;
+              word-break: keep-all;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              margin-right: 8px;
+              line-height: 16px;
+            }
+          }
+        }
+
+        .q-field__append {
+          height: $default-content-size;
+          font-size: $default-font;
+          width: 20px;
+          padding: 0;
+          justify-content: center;
+          align-items: center;
+          margin-left: 8px;
+
+          > .q-icon {
+            font-size: 20px;
+          }
+        }
+      }
+    }
+
+    &--nodata {
+      .q-field__inner .q-field__control .q-field__control-container {
+        display: none;
+      }
+    }
+  }
+
+  .s-file.q-field--disabled {
+    .q-field__inner {
+      .q-field__control {
+        opacity: 1 !important;
+        background: $Grey_Lighten-3;
+
+        &:after {
+          border: 1px solid $Grey_Lighten-2;
+        }
+
+        &-container {
+          .q-field__native {
+            > span {
+              color: $Grey_Default;
+            }
+          }
+        }
+
+        .q-field__prepend {
+          opacity: 1 !important;
+
+          .file-placeholder {
+            color: $Grey_Default !important;
+          }
+
+          .q-icon {
+            color: $Grey_Default !important;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/STab.vue

@@ -1,11 +1,9 @@
 <template>
-  <q-tab :name="name" :label="label" :ripple="false" class="s-tab">
-    <template v-slot:default>
-      <span
-        v-if="secondLabel"
-        class="q-ml-xs second-label"
-      >
-        {{ secondLabel }}
+  <q-tab :name="name" :ripple="false" :class="$attrs.class" class="s-tab">
+    <template #default>
+      {{ label }}
+      <span class="q-ml-xs badge" v-if="badge">
+        {{ badge }}
       </span>
     </template>
   </q-tab>
@@ -24,7 +22,7 @@ export default defineComponent({
   props: {
     name: String,
     label: String,
-    secondLabel: String,
+    badge: String,
   },
 });
 </script>
@@ -34,19 +32,23 @@ export default defineComponent({
 
 .s-tab {
   padding: $tab-padding;
-  border-radius: $button-border-radius $button-border-radius 0 0;
-  border: 1px solid $Grey_Lighten-2;
-  border-bottom: 1px solid $positive;
   background: $Grey_Lighten-5;
   color: $Grey_Default;
   min-height: 0;
+  border: 1px solid $Grey_Lighten-2;
+  border: {
+    bottom: 1px solid $positive;
+    radius: $button-border-radius $button-border-radius 0 0;
+  }
   .q-tab__content {
     padding: 0;
     height: $default-content-height;
     min-width: 0;
-    flex-wrap: nowrap;
     display: flex;
-    flex-direction: row;
+    flex: {
+      wrap: nowrap;
+      direction: row;
+    }
     .q-tab__label {
       height: $default-content-height;
       line-height: $default-line-height;
@@ -54,7 +56,6 @@ export default defineComponent({
         weight: $default-font-weight;
         size: $default-font;
       }
-
     }
   }
 }

package/src/components/STabs.vue

@@ -1,32 +1,32 @@
-<template>
-  <q-tabs
-    align="left"
-    active-color="positive"
-    indicator-color="transparent"
-    no-caps
-    dense
-    class="s-tabs text-grey"
-    :model-value="tab"
-  >
-    <slot></slot>
-  </q-tabs>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue';
-import { QTabs } from 'quasar';
-
-export default defineComponent({
-  name: 'STabs',
-  components: {
-    QTabs,
-  },
-  setup(props) {
-    const tab = ref(props.modelValue);
-
-    return {
-      tab,
-    };
-  },
-});
-</script>
+<template>
+  <q-tabs
+    align="left"
+    active-color="positive"
+    indicator-color="transparent"
+    no-caps
+    dense
+    class="s-tabs text-grey"
+    :model-value="tab"
+  >
+    <slot></slot>
+  </q-tabs>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import { QTabs } from 'quasar';
+
+export default defineComponent({
+  name: 'STabs',
+  components: {
+    QTabs,
+  },
+  setup(props) {
+    const tab = ref(props.modelValue);
+
+    return {
+      tab,
+    };
+  },
+});
+</script>

package/src/css/app.scss

@@ -68,22 +68,6 @@
   cursor: not-allowed;
 }
 
-.q-tab {
-  border: 1px solid $Grey_Lighten-2;
-  border-bottom: transparent;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  padding: 0px 20px;
-  &--active {
-    border-top: 1px solid $positive;
-    border-left: 1px solid $positive;
-    border-right: 1px solid $positive;
-  }
-  &--inactive {
-    border-bottom: 1px solid $Grey_Lighten-2;
-  }
-}
-
 .q-card {
   border-radius: 8px !important;
 }