quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.4

package/src/components/SInput.vue

@@ -1,343 +1,343 @@
-<template>
-  <q-input
-    ref="qInputRef"
-    class="s-input"
-    outlined
-    placeholder="   "
-    dense
-    :type="
-      type === 'password' && !isVisible
-        ? 'password'
-        : type === 'password' && isVisible
-        ? 'text'
-        : $props.type
-    "
-    :class="{
-      's-input__right-slot q-pa-none': rightSlot,
-      's-input__password': type === 'password',
-      's-input__text-area': type === 'textarea',
-      's-input__inside-label': label || insideLabel,
-    }"
-    v-model="model"
-    @update:modelValue="
-      value => {
-        rightSlot ? getValidmodel(value) : $emit('update:modelValue', value);
-      }
-    "
-    no-error-icon
-    hide-bottom-space
-  >
-    <template v-for="(_, slotName, index) in $slots" #[slotName]="data">
-      <!-- eslint-disable-next-line -->
-      <slot :key="index" :name="slotName" v-bind="data"> </slot>
-    </template>
-    <template v-slot:before v-if="label || insideLabel">
-      <div v-if="!insideLabel" class="input-label">{{ label }}</div>
-      <div v-else-if="insideLabel" class="input-addon bg-Grey_Lighten-5">
-        {{ insideLabel }}
-      </div>
-    </template>
-    <template v-slot:after v-if="rightSlot">
-      <slot name="beforeCounter"></slot>
-      <div v-if="maxByte" class="self-center">
-        {{ model ? getByte(model) : 0 }} / {{ maxByte }} byte
-      </div>
-      <div v-else class="self-center">{{ model ? getByte(model) : 0 }} byte</div>
-    </template>
-    <template v-slot:append v-if="type === 'password'">
-      <q-icon
-        size="16px"
-        :name="isVisible ? 'visibility' : 'visibility_off'"
-        @click="isVisible = !isVisible"
-      />
-    </template>
-  </q-input>
-</template>
-
-<script>
-  import { ref, watch, defineComponent } from 'vue';
-  import { QInput, QIcon } from 'quasar';
-
-  export default defineComponent({
-    name: 'SInput',
-    components: {
-      QInput,
-      QIcon,
-    },
-    props: {
-      modelValue: {
-        type: [String, Number],
-      },
-      label: String,
-      insideLabel: { type: String, default: '' },
-      type: { type: String, default: 'text' },
-      rightSlot: { type: Boolean, default: false },
-      maxByte: { type: [String, Number], default: '' || 0 },
-    },
-    setup(props, { emit }) {
-      // TODO: 유효성 검사 기능 추가 필요
-      const model = ref(props.modelValue);
-      const qInputRef = ref(null);
-      watch(
-        () => props.modelValue,
-        value => {
-          model.value = value;
-        },
-      );
-
-      function getByteLength(decimal) {
-        const lineFeed = 10; // \n
-        return decimal >> 7 || lineFeed === decimal ? 2 : 1;
-      }
-
-      function getByte(str) {
-        return str
-          .split('')
-          .map(v => v.charCodeAt(0))
-          .reduce((prev, unicodeDecimalValue) => prev + getByteLength(unicodeDecimalValue), 0);
-      }
-
-      function getLimitedByteText(val, max) {
-        const characters = val.split('');
-        let validText = '';
-        let totalByte = 0;
-        for (let i = 0; i < characters.length; i++) {
-          const character = characters[i];
-          const decimal = character.charCodeAt(0);
-          const byte = getByteLength(decimal);
-          if (totalByte + byte <= max) {
-            totalByte += byte;
-            validText += character;
-          } else {
-            break;
-          }
-        }
-        return validText;
-      }
-
-      function checkValueByte(val) {
-        const value = val || '';
-        let validValue = '';
-        if (props.maxByte) {
-          const isValidByte = getByte(value) <= props.maxByte;
-          validValue = isValidByte ? value : getLimitedByteText(value, props.maxByte);
-        } else {
-          validValue = getByte(value);
-        }
-
-        return validValue;
-      }
-
-      function getValidmodel(val) {
-        const validValue = checkValueByte(val);
-        model.value = validValue;
-        emit('update:modelValue', model.value);
-      }
-
-      return {
-        isVisible: ref(false),
-        model,
-        qInputRef,
-
-        getByte,
-        checkValueByte,
-        getLimitedByteText,
-        getValidmodel,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-input {
-    height: auto;
-    width: fit-content;
-    .q-field__inner {
-      .q-field__control {
-        background: white;
-        padding: 0;
-        height: 28px;
-        &:before {
-          border: 1px solid $Grey_Lighten-1;
-        }
-        &-container {
-          padding: $button-padding-sm;
-          .q-field__native {
-            font-size: $default-font;
-            font-weight: $default-font-weight;
-            color: $Grey_Darken-4;
-            padding: 0;
-          }
-          input::placeholder {
-            color: $Grey_Lighten-1;
-          }
-          .q-field__prefix {
-            padding: 0 4px 0 0;
-            line-height: 100%;
-          }
-          .q-field__suffix {
-            padding: 0 0 0 4px;
-            line-height: 100%;
-          }
-        }
-        .q-field__append {
-          padding: 0 8px 0 0;
-          height: 100%;
-          .q-icon {
-            color: $Grey_Default;
-          }
-        }
-        .q-field__prepend {
-          padding: 0 0 0 8px;
-          height: $default-height;
-          .q-icon {
-            color: $Grey_Default;
-          }
-        }
-      }
-      .q-field__bottom {
-        padding: 8px 0px 0px 0px;
-        color: $Grey_Darken-1;
-        font-size: 12px;
-        .q-field__messages {
-          div[role='alert'] {
-            color: $Red_Lighten-1;
-          }
-          .error-msg {
-            color: $Red_Default;
-            flex-wrap: nowrap;
-            width: 250px;
-            gap: 4px;
-            > p {
-              line-height: 14px;
-            }
-          }
-        }
-      }
-    }
-    .q-field__before {
-      height: $default-height;
-      padding: 0;
-      .input-label {
-        padding: 4px 12px 4px 0;
-        color: $Grey_Darken-4;
-        font: {
-          size: $default-font;
-          weight: $default-font-weight;
-        }
-      }
-      .input-addon {
-        color: $Grey_Darken-4;
-        height: 100%;
-        line-height: 150%;
-        padding: $button-padding-sm;
-        border: 1px solid $Grey_Lighten-1;
-        border: {
-          right: none;
-          radius: 2px 0 0 2px;
-        }
-        font: {
-          size: $default-font;
-          weight: $default-font-weight;
-        }
-      }
-    }
-    &.q-field--disabled {
-      .q-field__inner {
-        .q-field__control {
-          opacity: 1 !important;
-          background: $Grey_Lighten-4;
-          &:after {
-            border: 1px solid $Grey_Lighten-2;
-          }
-          &-container {
-            .q-field__native {
-              color: $Grey_Default;
-            }
-            & > input::placeholder {
-              color: $Grey_Default;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .s-input__password.q-field--focused {
-    .q-field__inner {
-      .q-field__control {
-        .q-field__append {
-          .q-icon {
-            color: $positive;
-          }
-        }
-      }
-    }
-  }
-
-  .s-input__right-slot {
-    position: relative;
-    .q-field__inner {
-      .q-field__bottom {
-        padding: 0;
-        min-height: 0;
-        .q-field__counter {
-          height: 28px;
-          position: absolute;
-          right: -69px;
-          top: -28px;
-          display: flex;
-          align-items: center;
-          color: $Grey_Lighten-1;
-          padding: 0;
-        }
-      }
-    }
-    .q-field__after {
-      height: 28px;
-      font-size: 12px;
-      color: $Grey_Lighten-1;
-      align-items: end;
-      padding-left: 8px;
-    }
-  }
-
-  .s-input__text-area {
-    height: auto;
-    min-width: 320px;
-    min-height: 211px;
-    .q-field__inner {
-      .q-field__control {
-        height: 100%;
-        &-container {
-          padding: 12px 16px !important;
-          height: 100%;
-          textarea {
-            min-height: 211px;
-            padding: 4px 12px - 3px 4px - 3px 12px;
-            line-height: $default-line-height;
-          }
-        }
-      }
-      .q-field__bottom {
-        padding: 0;
-        padding-top: 4px;
-        .q-field__counter {
-          padding: 0;
-          color: $Grey_Lighten-2;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-
-  .s-input__inside-label {
-    .q-field__inner {
-      .q-field__control {
-        border-radius: 0 2px 2px 0;
-      }
-    }
-  }
-</style>
+<template>
+  <q-input
+    ref="qInputRef"
+    class="s-input"
+    outlined
+    placeholder="   "
+    dense
+    :type="
+      type === 'password' && !isVisible
+        ? 'password'
+        : type === 'password' && isVisible
+        ? 'text'
+        : $props.type
+    "
+    :class="{
+      's-input__right-slot q-pa-none': rightSlot,
+      's-input__password': type === 'password',
+      's-input__text-area': type === 'textarea',
+      's-input__inside-label': label || insideLabel,
+    }"
+    v-model="model"
+    @update:modelValue="
+      value => {
+        rightSlot ? getValidmodel(value) : $emit('update:modelValue', value);
+      }
+    "
+    no-error-icon
+    hide-bottom-space
+  >
+    <template v-for="(_, slotName, index) in $slots" #[slotName]="data">
+      <!-- eslint-disable-next-line -->
+      <slot :key="index" :name="slotName" v-bind="data"> </slot>
+    </template>
+    <template v-slot:before v-if="label || insideLabel">
+      <div v-if="!insideLabel" class="input-label">{{ label }}</div>
+      <div v-else-if="insideLabel" class="input-addon bg-Grey_Lighten-5">
+        {{ insideLabel }}
+      </div>
+    </template>
+    <template v-slot:after v-if="rightSlot">
+      <slot name="beforeCounter"></slot>
+      <div v-if="maxByte" class="self-center">
+        {{ model ? getByte(model) : 0 }} / {{ maxByte }} byte
+      </div>
+      <div v-else class="self-center">{{ model ? getByte(model) : 0 }} byte</div>
+    </template>
+    <template v-slot:append v-if="type === 'password'">
+      <q-icon
+        size="16px"
+        :name="isVisible ? 'visibility' : 'visibility_off'"
+        @click="isVisible = !isVisible"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script>
+  import { ref, watch, defineComponent } from 'vue';
+  import { QInput, QIcon } from 'quasar';
+
+  export default defineComponent({
+    name: 'SInput',
+    components: {
+      QInput,
+      QIcon,
+    },
+    props: {
+      modelValue: {
+        type: [String, Number],
+      },
+      label: String,
+      insideLabel: { type: String, default: '' },
+      type: { type: String, default: 'text' },
+      rightSlot: { type: Boolean, default: false },
+      maxByte: { type: [String, Number], default: '' || 0 },
+    },
+    setup(props, { emit }) {
+      // TODO: 유효성 검사 기능 추가 필요
+      const model = ref(props.modelValue);
+      const qInputRef = ref(null);
+      watch(
+        () => props.modelValue,
+        value => {
+          model.value = value;
+        },
+      );
+
+      function getByteLength(decimal) {
+        const lineFeed = 10; // \n
+        return decimal >> 7 || lineFeed === decimal ? 2 : 1;
+      }
+
+      function getByte(str) {
+        return str
+          .split('')
+          .map(v => v.charCodeAt(0))
+          .reduce((prev, unicodeDecimalValue) => prev + getByteLength(unicodeDecimalValue), 0);
+      }
+
+      function getLimitedByteText(val, max) {
+        const characters = val.split('');
+        let validText = '';
+        let totalByte = 0;
+        for (let i = 0; i < characters.length; i++) {
+          const character = characters[i];
+          const decimal = character.charCodeAt(0);
+          const byte = getByteLength(decimal);
+          if (totalByte + byte <= max) {
+            totalByte += byte;
+            validText += character;
+          } else {
+            break;
+          }
+        }
+        return validText;
+      }
+
+      function checkValueByte(val) {
+        const value = val || '';
+        let validValue = '';
+        if (props.maxByte) {
+          const isValidByte = getByte(value) <= props.maxByte;
+          validValue = isValidByte ? value : getLimitedByteText(value, props.maxByte);
+        } else {
+          validValue = getByte(value);
+        }
+
+        return validValue;
+      }
+
+      function getValidmodel(val) {
+        const validValue = checkValueByte(val);
+        model.value = validValue;
+        emit('update:modelValue', model.value);
+      }
+
+      return {
+        isVisible: ref(false),
+        model,
+        qInputRef,
+
+        getByte,
+        checkValueByte,
+        getLimitedByteText,
+        getValidmodel,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-input {
+    height: auto;
+    width: fit-content;
+    .q-field__inner {
+      .q-field__control {
+        background: white;
+        padding: 0;
+        height: 28px;
+        &:before {
+          border: 1px solid $Grey_Lighten-1;
+        }
+        &-container {
+          padding: $button-padding-sm;
+          .q-field__native {
+            font-size: $default-font;
+            font-weight: $default-font-weight;
+            color: $Grey_Darken-4;
+            padding: 0;
+          }
+          input::placeholder {
+            color: $Grey_Lighten-1;
+          }
+          .q-field__prefix {
+            padding: 0 4px 0 0;
+            line-height: 100%;
+          }
+          .q-field__suffix {
+            padding: 0 0 0 4px;
+            line-height: 100%;
+          }
+        }
+        .q-field__append {
+          padding: 0 8px 0 0;
+          height: 100%;
+          .q-icon {
+            color: $Grey_Default;
+          }
+        }
+        .q-field__prepend {
+          padding: 0 0 0 8px;
+          height: $default-height;
+          .q-icon {
+            color: $Grey_Default;
+          }
+        }
+      }
+      .q-field__bottom {
+        padding: 8px 0px 0px 0px;
+        color: $Grey_Darken-1;
+        font-size: 12px;
+        .q-field__messages {
+          div[role='alert'] {
+            color: $Red_Lighten-1;
+          }
+          .error-msg {
+            color: $Red_Default;
+            flex-wrap: nowrap;
+            width: 250px;
+            gap: 4px;
+            > p {
+              line-height: 14px;
+            }
+          }
+        }
+      }
+    }
+    .q-field__before {
+      height: $default-height;
+      padding: 0;
+      .input-label {
+        padding: 4px 12px 4px 0;
+        color: $Grey_Darken-4;
+        font: {
+          size: $default-font;
+          weight: $default-font-weight;
+        }
+      }
+      .input-addon {
+        color: $Grey_Darken-4;
+        height: 100%;
+        line-height: 150%;
+        padding: $button-padding-sm;
+        border: 1px solid $Grey_Lighten-1;
+        border: {
+          right: none;
+          radius: 2px 0 0 2px;
+        }
+        font: {
+          size: $default-font;
+          weight: $default-font-weight;
+        }
+      }
+    }
+    &.q-field--disabled {
+      .q-field__inner {
+        .q-field__control {
+          opacity: 1 !important;
+          background: $Grey_Lighten-4;
+          &:after {
+            border: 1px solid $Grey_Lighten-2;
+          }
+          &-container {
+            .q-field__native {
+              color: $Grey_Default;
+            }
+            & > input::placeholder {
+              color: $Grey_Default;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .s-input__password.q-field--focused {
+    .q-field__inner {
+      .q-field__control {
+        .q-field__append {
+          .q-icon {
+            color: $positive;
+          }
+        }
+      }
+    }
+  }
+
+  .s-input__right-slot {
+    position: relative;
+    .q-field__inner {
+      .q-field__bottom {
+        padding: 0;
+        min-height: 0;
+        .q-field__counter {
+          height: 28px;
+          position: absolute;
+          right: -69px;
+          top: -28px;
+          display: flex;
+          align-items: center;
+          color: $Grey_Lighten-1;
+          padding: 0;
+        }
+      }
+    }
+    .q-field__after {
+      height: 28px;
+      font-size: 12px;
+      color: $Grey_Lighten-1;
+      align-items: end;
+      padding-left: 8px;
+    }
+  }
+
+  .s-input__text-area {
+    height: auto;
+    min-width: 320px;
+    min-height: 211px;
+    .q-field__inner {
+      .q-field__control {
+        height: 100%;
+        &-container {
+          padding: 12px 16px !important;
+          height: 100%;
+          textarea {
+            min-height: 211px;
+            padding: 4px 12px - 3px 4px - 3px 12px;
+            line-height: $default-line-height;
+          }
+        }
+      }
+      .q-field__bottom {
+        padding: 0;
+        padding-top: 4px;
+        .q-field__counter {
+          padding: 0;
+          color: $Grey_Lighten-2;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .s-input__inside-label {
+    .q-field__inner {
+      .q-field__control {
+        border-radius: 0 2px 2px 0;
+      }
+    }
+  }
+</style>