quasar-ui-sellmate-ui-kit 1.3.17 → 1.3.18

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.3.16
+ * quasar-ui-sellmate-ui-kit v1.3.17
  * (c) 2023 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */

package/dist/index.min.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.3.16
+ * quasar-ui-sellmate-ui-kit v1.3.17
  * (c) 2023 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */

package/dist/index.rtl.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.3.16
+ * quasar-ui-sellmate-ui-kit v1.3.17
  * (c) 2023 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */

package/dist/index.rtl.min.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.3.16
+ * quasar-ui-sellmate-ui-kit v1.3.17
  * (c) 2023 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */

package/package.json

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

package/src/components/Pagination.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="pagination row">
+    <div class="icons-container" v-if="paginationInfo.startPage !== 1">
+      <q-btn
+        flat
+        dense
+        round
+        :ripple="false"
+        unelevated
+        type="button"
+        align="center"
+        class="bg-transparent first-btn"
+        text-color="grey-4"
+        :icon="paginationFirstIcon"
+        @click="updateModelValue('goFirst')"
+      />
+      <q-btn
+        flat
+        dense
+        round
+        :ripple="false"
+        unelevated
+        type="button"
+        align="center"
+        class="left-btn"
+        text-color="grey-4"
+        :icon="paginationLeftIcon"
+        @click="updateModelValue('goLeft')"
+      />
+    </div>
+    <div class="pagination-container">
+      <q-btn
+        v-for="(p, i) in 10"
+        :key="i"
+        v-show="paginationInfo.startPage + i <= paginationInfo.lastPage"
+        flat
+        dense
+        rounded
+        no-wrap
+        unelevated
+        :ripple="false"
+        :label="paginationInfo.startPage + i"
+        text-color="grey-4"
+        type="button"
+        align="center"
+        @click="updateModelValue(paginationInfo.startPage + i)"
+        class="pagination-btn"
+        :class="{
+          'pagination-active-btn':
+            paginationInfo.startPage + i === paginationInfo.currentPage,
+        }"
+      />
+    </div>
+    <div
+      class="icons-container"
+      v-if="paginationInfo.lastPage - paginationInfo.startPage >= 10"
+    >
+      <q-btn
+        flat
+        dense
+        round
+        :ripple="false"
+        unelevated
+        type="button"
+        align="center"
+        class="right-btn"
+        text-color="grey-4"
+        :icon="paginationRightIcon"
+        @click="updateModelValue('goRight')"
+      />
+      <q-btn
+        flat
+        dense
+        round
+        :ripple="false"
+        unelevated
+        type="button"
+        align="center"
+        class="last-btn"
+        text-color="grey-4"
+        :icon="paginationLastIcon"
+        @click="updateModelValue('goLast')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { QBtn } from 'quasar';
+import { defineComponent, ref, watch } from 'vue';
+// eslint-disable-next-line
+import { paginationFirstIcon, paginationLastIcon, paginationLeftIcon, paginationRightIcon } from '../assets/icons.js';
+
+export default defineComponent({
+  name: 'SPagination',
+  components: {
+    QBtn,
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1,
+    },
+    lastPage: {
+      type: Number,
+      default: 1,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const paginationInfo = ref({
+      lastPage: props.lastPage,
+      currentPage: props.modelValue,
+      startPage: Math.floor((props.modelValue - 1) / 10) * 10 + 1,
+    });
+
+    function updateModelValue(val) {
+      if (val === 'goFirst') {
+        paginationInfo.value.startPage = 1;
+        paginationInfo.value.currentPage = 1;
+      } else if (val === 'goLeft' && paginationInfo.value.startPage - 10 > 0) {
+        paginationInfo.value.startPage -= 10;
+        paginationInfo.value.currentPage = paginationInfo.value.startPage + 9;
+      } else if (
+        val === 'goRight'
+        && paginationInfo.value.startPage + 10 <= paginationInfo.value.lastPage
+      ) {
+        paginationInfo.value.startPage += 10;
+        paginationInfo.value.currentPage = paginationInfo.value.startPage;
+      } else if (val === 'goLast') {
+        if (paginationInfo.value.lastPage % 10 !== 0) {
+          paginationInfo.value.startPage = Math.floor(paginationInfo.value.lastPage / 10) * 10 + 1;
+        } else {
+          paginationInfo.value.startPage = (Math.floor(paginationInfo.value.lastPage / 10) - 1) * 10 + 1;
+        }
+        paginationInfo.value.currentPage = paginationInfo.value.lastPage;
+      } else {
+        paginationInfo.value.currentPage = val;
+      }
+      emit('update:modelValue', paginationInfo.value.currentPage);
+    }
+
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        paginationInfo.value.currentPage = newVal;
+        paginationInfo.value.startPage = Math.floor((newVal - 1) / 10) * 10 + 1;
+      },
+    );
+
+    watch(
+      () => props.lastPage,
+      (newVal) => {
+        paginationInfo.value.lastPage = newVal;
+      },
+    );
+
+    return {
+      paginationRightIcon,
+      paginationLeftIcon,
+      paginationLastIcon,
+      paginationFirstIcon,
+
+      paginationInfo,
+
+      updateModelValue,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/variable.scss";
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .q-btn {
+    min-height: $pagination-size;
+    height: $pagination-size;
+    margin: $pagination-margin;
+    justify-content: center;
+    &:hover {
+      &:before {
+        border: 1px solid $indigo-7;
+      }
+      .q-focus-helper {
+        opacity: 0 !important;
+        &:before,
+        &:after {
+          opacity: 0 !important;
+        }
+      }
+      .q-btn__content {
+        .q-icon {
+          color: $indigo-7;
+        }
+        > span {
+          color: $indigo-7;
+        }
+      }
+    }
+  }
+  > .icons-container {
+    .q-btn {
+      padding: 0 !important;
+      min-width: $pagination-size;
+      width: $pagination-size;
+      &__content {
+        .q-icon {
+          font-size: $default-font;
+          width: $icon-size-sm;
+          height: $icon-size-sm;
+        }
+      }
+    }
+  }
+  .pagination-container {
+    .q-btn {
+      min-width: $pagination-size;
+      width: fit-content;
+      padding: 0;
+      &__content {
+        padding: 2px 10px;
+        > span {
+          height: $default-content-height;
+          line-height: $default-line-height;
+          font-size: $default-font;
+          font-weight: $default-font-weight;
+        }
+      }
+    }
+    .pagination-active-btn {
+      &:before {
+        background: $indigo-7 !important;
+      }
+      .q-btn__content {
+        > span {
+          color: white !important;
+        }
+      }
+    }
+  }
+  .q-btn.disabled {
+    &:hover {
+      &:before {
+        border: none;
+      }
+      .q-btn__content {
+        .q-icon {
+          color: $grey-6;
+        }
+        > span {
+          color: $grey-6;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/SDropdown.vue

@@ -17,11 +17,11 @@
       's-dropdown-md': size === 'md',
     }"
   >
-    <q-menu class="s-dropdown-menu" :offset="[0,4]">
+    <q-menu class="s-dropdown-menu" :offset="[0, 4]">
       <q-item
         v-for="(opt, i) in options"
         :key="i"
-        clickable
+        :clickable="opt.disable === undefined || opt.disable === false"
         v-close-popup
         @click="$emit('handleClickOption', opt.value)"
       >
@@ -153,6 +153,10 @@ export default defineComponent({
       min-height: 0;
       height: 20px;
     }
+    &:not(.q-item--clickable) {
+      cursor: default;
+      color: $Grey_Lighten-1
+    }
   }
   box-shadow: 0px 2px 6px 0px #00000020;
 }

package/src/components/SSelectCheckbox.vue

@@ -18,8 +18,13 @@
     :option-group="optionGroup"
     @add="onAddChecked"
     @remove="onRemoveChecked"
+    @update:modelValue="(val) => $emit('update:modelValue', val)"
   >
-    <template v-slot:before-options >
+    <!-- TODO: 아무것도 선택되지 않았을 때 props 값으로 표기 해줘야함 기본 값은 "전체" -->
+    <!-- TODO: 모델이 업데이트가 되었을 때 value 값만 가지고 옴 모델로 {label: '...', value: '...'} 형식이 들어오고 -->
+    <!-- 이 형식으로 업데이트 시켜줘야함  -->
+    <!-- 예시 [{label: '판매처A', value: 'A'}, {label: '판매처B', value: 'B'}] -->
+    <template v-slot:before-options>
       <form v-show="searchable">
         <q-input
           v-model="search"
@@ -61,23 +66,29 @@
         </q-item-section>
       </q-item>
     </template>
-    <template v-if="useAll && model.length === options.filter(v => !v.category).length" v-slot:selected>
+    <template
+      v-if="
+        useAll && model.length === options.filter((v) => !v.category).length
+      "
+      v-slot:selected
+    >
       <div>
         {{ allPlaceholder }}
       </div>
     </template>
     <template v-slot:no-option>
       <q-input
-          v-model="search"
-          dense
-          outlined
-          autofocus
-          class="select-search-input"
-          :placeholder="searchPlaceholder"
-          @update:modelValue="onSearch"
-          ref="searchRef"
-        />
+        v-model="search"
+        dense
+        outlined
+        autofocus
+        class="select-search-input"
+        :placeholder="searchPlaceholder"
+        @update:modelValue="onSearch"
+        ref="searchRef"
+      />
       <q-item class="s-select-no-option">
+        <!-- TODO: 옵션 없을 때 따로 값을 받을 수 있고, 기본 값은 '데이터 없음' -->
         <q-item-section class="text-grey"> No results </q-item-section>
       </q-item>
     </template>
@@ -144,17 +155,17 @@ export default defineComponent({
       default: '',
     },
   },
-  setup(props, { emit }) {
+  setup(props) {
     const model = ref(props.modelValue);
     const filteredOptions = ref(props.options);
     const searchInput = ref(null);
     const placeholder = ref(props.searchPlaceholder);
     const search = ref('');
     const searchRef = ref(props.CheckBoxsearchRef);
-    const isDisable = props.options.find(v => Boolean(v.disable));
+    const isDisable = props.options.find((v) => Boolean(v.disable));
 
     function onRemoveChecked(detail) {
-      const idx = model.value.findIndex(v => v[props.optionValue] === '');
+      const idx = model.value.findIndex((v) => v[props.optionValue] === '');
       if (detail.value[props.optionValue] === '') {
         nextTick(() => {
           model.value = [];
@@ -168,12 +179,12 @@ export default defineComponent({
     function onAddChecked(detail) {
       if (detail.value === '') {
         nextTick(() => {
-          model.value = props.options.filter(v => !v.category);
+          model.value = props.options.filter((v) => !v.category);
         });
       } else {
         nextTick(() => {
           if (model.value.length === props.options.length - 1) {
-            model.value = props.options.filter(v => !v.category);
+            model.value = props.options.filter((v) => !v.category);
           }
         });
       }
@@ -189,19 +200,26 @@ export default defineComponent({
       }
     }
 
-    watch(() => props.modelValue, (val) => {
-      model.value = val;
-    });
-    watch(model, () => {
-      emit('update:modelValue', model.value);
-    });
-    watch(() => props.options, (val) => {
-      filteredOptions.value = val;
-    });
+    watch(
+      () => props.modelValue,
+      (val) => {
+        model.value = val;
+      },
+    );
+    watch(
+      () => props.options,
+      (val) => {
+        filteredOptions.value = val;
+      },
+    );
 
     onBeforeMount(() => {
-      if (props.useAll && model.value.length === 1 && !props.modelValue[0].value) {
-        model.value = props.options.filter(v => !v.category);
+      if (
+        props.useAll
+        && model.value.length === 1
+        && !props.modelValue[0].value
+      ) {
+        model.value = props.options.filter((v) => !v.category);
       }
     });
 

package/src/vue-plugin.js

@@ -19,6 +19,8 @@ import SInputCounter from './components/SInputCounter.vue';
 import SList from './components/SList.vue';
 import SMarkupTable from './components/SMarkupTable.vue';
 import SPagination from './components/SPagination.vue';
+// 하위호환성 확보 (Todo: 코드 제거)
+import Pagination from './components/Pagination.vue';
 import SRadio from './components/SRadio.vue';
 import SRouteTab from './components/SRouteTab.vue';
 import SSelect from './components/SSelect.vue';
@@ -56,6 +58,8 @@ function install(app) {
   app.component('s-list', SList);
   app.component('s-markup-table', SMarkupTable);
   app.component('s-pagination', SPagination);
+  // 하위호환성 확보 (Todo: 코드 제거)
+  app.component('s-pagination2', Pagination);
   app.component('s-radio', SRadio);
   app.component('s-select', SSelect);
   app.component('s-select-custom', SSelectCustom);