quasar-ui-sellmate-ui-kit 1.1.96 → 2.0.1

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.1.95
+ * quasar-ui-sellmate-ui-kit v1.1.97
  * (c) 2022 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.1.95
+ * quasar-ui-sellmate-ui-kit v1.1.97
  * (c) 2022 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.1.95
+ * quasar-ui-sellmate-ui-kit v1.1.97
  * (c) 2022 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.1.95
+ * quasar-ui-sellmate-ui-kit v1.1.97
  * (c) 2022 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.1.96",
+  "version": "2.0.1",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SButton.vue

@@ -13,8 +13,8 @@
       'no-hover': noHover,
     }"
   >
-    <template v-slot>
-      <slot></slot>
+    <template v-for="(_, slotName, index) in $slots" :key="index">
+      <slot :name="slotName"></slot>
     </template>
   </q-btn>
 </template>

package/src/components/SCaution.vue

@@ -1,13 +1,26 @@
 <template>
-  <q-banner dense rounded class="text-black col s-caution">
-    <div class="s-caution-title">{{ title }}</div>
+  <q-banner
+    dense
+    rounded
+    class="text-grey-2 col relative-position s-caution"
+    :class="{
+      's-caution__title': title,
+      's-caution__page bg-red-14': !useModal,
+      'bg-red-11': useModal,
+    }"
+  >
+    <div v-if="title" class="s-caution-title">{{ title }}</div>
     <ul>
       <slot />
     </ul>
-    <q-icon class="s-caution-icon" size="240px" :name="cautionOutlineIcon" />
+    <q-icon
+      v-if="!useModal"
+      class="s-caution-icon"
+      size="240px"
+      :name="cautionOutlineIcon"
+    />
   </q-banner>
 </template>
-
 <script>
 import { defineComponent } from 'vue';
 import { QBanner, QIcon } from 'quasar';
@@ -20,7 +33,8 @@ export default defineComponent({
     QIcon,
   },
   props: {
-    title: String,
+    title: { type: String, default: '' },
+    useModal: { type: Boolean, default: false },
   },
   setup() {
     return {
@@ -31,34 +45,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
-
 .s-caution {
   padding: 20px 0;
-  background-color: #fef1f1;
   border-radius: 4px;
-  border: 1px solid $red-9;
-  border-left: 8px solid $red-7;
-  position: relative;
   overflow: hidden;
   max: {
     height: 100%;
     width: 100%;
   }
-  .s-caution-title {
-    width: 100%;
-    height: 30px;
-    line-height: 30px;
-    color: $red-6;
-    font: {
-      size: 18px;
-      weight: 700;
-    }
-    margin: {
-      left: $caution-margin-left;
-      bottom: 16px;
-    }
-  }
   ul {
     margin: 0;
     padding: 0;
@@ -79,8 +73,28 @@ export default defineComponent({
     position: absolute;
     right: -41px;
     bottom: -34px;
-    color: #FD9595;
+    color: #fd9595;
     opacity: 0.24;
   }
 }
+.s-caution__page {
+  border: 1px solid $red-9;
+}
+.s-caution__title {
+  border-left: 8px solid $red-7;
+  .s-caution-title {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    color: $red-6;
+    font: {
+      size: 18px;
+      weight: 700;
+    }
+    margin: {
+      left: $caution-margin-left;
+      bottom: 16px;
+    }
+  }
+}
 </style>

package/src/components/SChip.vue

@@ -1,29 +1,70 @@
 <template>
   <q-chip
-    class="row items-center text-color-grey-2 s-chip"
+    class="no-hover row items-center text-color-grey-2 s-chip"
     square
     removable
     outline
     dense
+    :clickable="useInput"
     color="grey-6"
     :ripple="false"
     :icon-remove="chipRemoveIcon"
+    v-model="model"
   >
+    <template v-if="useInput">
+      <span
+        class="s-chip-input"
+        role="textbox"
+        id="inputSpan"
+        v-bind:contenteditable="useInput"
+        @keypress="handleInput"
+        >{{ inputValue }}</span>
+    </template>
     <slot></slot>
   </q-chip>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import { QChip } from 'quasar';
 import { chipRemoveIcon } from '../assets/icons.js';
 
 export default defineComponent({
   name: 'SChip',
   components: { QChip },
-  setup() {
+  props: {
+    useInput: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
+    input: { type: String, default: '' },
+  },
+  setup(props, { emit }) {
+    const model = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (val) => {
+        model.value = val;
+      },
+    );
+    const inputValue = ref(props.input);
+    watch(
+      () => props.input,
+      (val) => {
+        inputValue.value = val;
+      },
+    );
+    function handleInput(event) {
+      inputValue.value = event.target.outerText;
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.target.blur();
+        emit('update:input', inputValue.value);
+      }
+    }
     return {
       chipRemoveIcon,
+      model,
+      inputValue,
+      handleInput,
     };
   },
 });
@@ -49,7 +90,6 @@ export default defineComponent({
     font-weight: $default-font-weight;
     height: $default-content-height;
     min-height: $default-content-height;
-
   }
   .q-chip__icon--remove {
     color: $grey-2;
@@ -58,4 +98,11 @@ export default defineComponent({
     margin-left: $default-icon-margin;
   }
 }
+.s-chip-input {
+  height: 28px;
+  padding: 4px 0 !important;
+  &:focus-visible {
+    outline: none;
+  }
+}
 </style>

package/src/components/STable.vue

@@ -5,16 +5,27 @@
     hide-pagination
     hide-selected-banner
     class="s-table"
-    :class="{ 's-select-table': useSelect, 'resizable-table': resizable, 'sticky-resizable-table': stickyResizable, 'sticky-header': stickyHeader, 'before-search': beforeSearch }"
+    :class="{
+      's-select-table': useSelect,
+      'resizable-table': resizable,
+      'sticky-resizable-table': stickyResizable,
+      'sticky-header': stickyHeader,
+      'before-search': beforeSearch,
+    }"
     :table-class="{ 'resizable-table': resizable }"
     :columns="columns"
     :rows="rows"
+    v-model:pagination="paginationModel"
+    :no-data-label="noDataLabel"
     ref="sTableRef"
     @selection="updateSelected"
   >
-    <template #no-data>
-      <slot name="noData">
-        <div class="full-width text-center">데이터 조회가 필요합니다.</div>
+    <template #no-data="props">
+      <slot name="noData" v-bind="props">
+        <div class="full-width text-center">
+          {{ props }}
+          {{ props.message }}
+        </div>
       </slot>
     </template>
     <template #loading>
@@ -67,6 +78,12 @@
       </slot>
     </template>
   </q-table>
+  <s-pagination2
+    v-if="!hideBottom"
+    v-model="paginationModel.page"
+    :lastPage="pagesNumber"
+    class="q-mt-md"
+  />
 </template>
 
 <script>
@@ -74,7 +91,7 @@ import {
   QTable, QInnerLoading, QTd, QIcon,
 } from 'quasar';
 import {
-  defineComponent, onMounted, ref,
+  defineComponent, onMounted, ref, computed,
 } from 'vue';
 import { useResizable } from '../composables/table/use-resizable';
 import { useNavigator } from '../composables/table/use-navigator';
@@ -88,6 +105,21 @@ export default defineComponent({
     QIcon,
   },
   props: {
+    pagination: {
+      type: Object,
+      default: () => ({
+        page: 1,
+        rowsPerPage: 50,
+      }),
+    },
+    hideBottom: {
+      type: Boolean,
+      default: false,
+    },
+    noDataLabel: {
+      type: String,
+      default: '데이터 조회가 필요합니다',
+    },
     columns: {
       type: Array,
       default: () => [],
@@ -126,6 +158,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit, attrs }) {
+    const paginationModel = ref(props.pagination);
     const sTableRef = ref(null);
     const {
       focusCell,
@@ -164,6 +197,8 @@ export default defineComponent({
       closeInput,
       editIcon,
       updateSelected,
+      paginationModel,
+      pagesNumber: computed(() => Math.ceil((paginationModel.value.rowsNumber || props.rows.length) / paginationModel.value.rowsPerPage)),
     };
   },
 });
@@ -233,7 +268,6 @@ export default defineComponent({
   }
 }
 .s-select-table {
-  margin-bottom: $pagination-size;
   .q-table__middle {
     .q-table {
       thead {