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

package/src/components/SFilePicker.vue

@@ -1,207 +1,207 @@
-<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 v-for="(_, slotName, index) in $slots" #[slotName]="data">
-      <!-- eslint-disable-next-line -->
-      <slot :key="index" :name="slotName" v-bind="data"></slot>
-    </template>
-    <!-- NOTE: slot에 오버라이드 되어서 무조건 노출로 변경 -->
-    <template #prepend v-if="true">
-      <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 #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;
-        align-items: center;
-
-        &: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;
-          flex-grow: 1;
-          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 v-for="(_, slotName, index) in $slots" #[slotName]="data">
+      <!-- eslint-disable-next-line -->
+      <slot :key="index" :name="slotName" v-bind="data"></slot>
+    </template>
+    <!-- NOTE: slot에 오버라이드 되어서 무조건 노출로 변경 -->
+    <template #prepend v-if="true">
+      <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 #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;
+        align-items: center;
+
+        &: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;
+          flex-grow: 1;
+          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>