quasar-ui-sellmate-ui-kit 3.9.1 → 3.9.2

package/package.json

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

package/src/assets/icons.js

@@ -30,3 +30,11 @@ export const minusIcon = 'M2 6H10@@fill:none;stroke:currentColor;stroke-width:0.
 export const searchIcon = 'M9.16634 3.33325C12.388 3.33325 14.9997 5.94492 14.9997 9.16658C14.9997 12.3882 12.388 14.9999 9.16634 14.9999C5.94468 14.9999 3.33301 12.3882 3.33301 9.16658C3.33301 5.94492 5.94468 3.33325 9.16634 3.33325Z@@fill:none;stroke:#737373;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;&&M13.5523 13.5526L16.8857 16.8859@@fill:none;stroke:#737373;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round|0 0 20 20';
 export const imageUploadFilledIcon = 'M0.5 15V3C0.5 1.61929 1.61929 0.5 3 0.5H15C16.3807 0.5 17.5 1.61929 17.5 3V15C17.5 16.3807 16.3807 17.5 15 17.5H3C1.61929 17.5 0.5 16.3807 0.5 15Z@@fill:#222222&&M11.125 5.28125C11.125 6.16145 11.8385 6.875 12.7188 6.875C13.599 6.875 14.3125 6.16145 14.3125 5.28125C14.3125 4.40105 13.599 3.6875 12.7188 3.6875C11.8385 3.6875 11.125 4.40105 11.125 5.28125Z@@fill:white&&M17.5 9.3993V11.4342L14.4626 14.2184C13.7719 14.8516 12.7052 14.8284 12.0426 14.1659L4.92678 7.05C4.82914 6.95237 4.67085 6.95237 4.57322 7.05L0.5 11.1232V9.0019L3.51256 5.98934C4.19598 5.30592 5.30402 5.30592 5.98744 5.98934L13.1033 13.1052C13.1979 13.1998 13.3503 13.2032 13.449 13.1127L17.5 9.3993Z@@fill:white|0 0 18 18';
 export const clockIcon = 'M12 7V12H17@@fill:none;stroke:currentColor;stroke-width:1.5;&&M12 21C16.9707 21 21 16.9707 21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21Z@@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round|0 0 24 24';
+
+// TODO: icon 변경
+export const tableTreeArrowRight =
+  'M14.75 9.20096C15.75 9.77831 15.75 11.2217 14.75 11.799L8 15.6962C7 16.2735 5.75 15.5518 5.75 14.3971L5.75 6.60288C5.75 5.44818 7 4.7265 8 5.30385L14.75 9.20096Z@fill:currentColor|0 0 20 21';
+export const tableTreeArrowDown =
+  'M10.799 15.75C10.2217 16.75 8.77831 16.75 8.20096 15.75L4.30385 9C3.7265 8 4.44819 6.75 5.60289 6.75L13.3971 6.75C14.5518 6.75 15.2735 8 14.6962 9L10.799 15.75Z@fill:currentColor|0 0 20 21';
+export const path =
+  'M6 1.5V6V8.5C6 9.60457 6.89543 10.5 8 10.5H16@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round|0 0 20 21';

package/src/components/SYearMonthPicker.vue

@@ -0,0 +1,223 @@
+<template>
+  <q-input
+    class="s-year-picker q-pa-none bg-white"
+    :class="{ 'has-label': insideLabel }"
+    dense
+    outlined
+    readonly
+    no-error-icon
+    :disable="isDisable"
+    @click="openMenu = true"
+    v-model="dateModel"
+  >
+    <template #before v-if="insideLabel">
+      <div class="year-month-picker-label">
+        {{ insideLabel }}
+      </div>
+    </template>
+
+    <template #prepend>
+      <q-icon
+        :name="dateRangeIcon"
+        size="20px"
+        color="Grey_Darken-1"
+        class="cursor-pointer"
+        @click="openMenu = true"
+      />
+    </template>
+
+    <template #default>
+      <q-menu
+        v-model="openMenu"
+        ref="singleMenuRef"
+        class="s-date-menu"
+        no-focus
+        no-refocus
+        :offset="[0, 6]"
+        no-parent-event
+      >
+        <q-date
+          ref="calendar"
+          emit-immediately
+          v-model="dateModel"
+          minimal
+          square
+          noUnset
+          flat
+          years-in-month-view
+          :default-view="defaultView"
+          color="positive"
+          class="q-pa-none"
+          :mask="defaultView === 'Years' ? 'YYYY' : 'YYYY-MM'"
+          :navigation-min-year-month="minYearMonth"
+          :navigation-max-year-month="maxYearMonth"
+          @navigation="onNavigation"
+        >
+        </q-date>
+      </q-menu>
+    </template>
+  </q-input>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  import { QIcon, QInput, QDate, QMenu } from 'quasar';
+  import { dateRangeIcon } from '../assets/icons';
+  import { useModelBinder } from '../composables/modelBinder';
+
+  export default {
+    name: 'SYearPicker',
+    components: {
+      QDate,
+      QIcon,
+      QInput,
+      QMenu,
+    },
+    props: {
+      modelValue: {
+        type: String,
+      },
+      defaultView: {
+        type: String,
+        default: 'Months',
+      },
+      isDisable: {
+        type: Boolean,
+        default: false,
+      },
+      insideLabel: {
+        type: String,
+      },
+      minYearMonth: {
+        type: String,
+      },
+      maxYearMonth: {
+        type: String,
+      },
+    },
+
+    setup(props, { emit }) {
+      const dateModel = useModelBinder(props);
+      const openMenu = ref(false);
+
+      const formatMonth = month => (month < 10 ? `0${month}` : month.toString());
+
+      function onNavigation(nav) {
+        const { defaultView } = props;
+        const { year, month } = nav;
+
+        if (defaultView === 'Years') {
+          dateModel.value = year.toString();
+          openMenu.value = false;
+        } else if (defaultView === 'Months' && month) {
+          const modelMonth = Number(dateModel.value.split('-')[1]);
+
+          if (month !== modelMonth) {
+            dateModel.value = `${year}-${formatMonth(month)}`;
+            openMenu.value = false;
+          }
+        }
+      }
+
+      return {
+        dateRangeIcon,
+        dateModel,
+        openMenu,
+        onNavigation,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '../css/quasar.variables.scss';
+  .s-year-picker {
+    width: fit-content;
+    height: $default-height;
+    border-radius: 4px;
+
+    &.has-label {
+      :deep(.q-field__inner) {
+        .q-field__control {
+          border-radius: 0 2px 2px 0 !important;
+        }
+      }
+
+      :deep(.q-field__before) {
+        height: 100%;
+        padding: 4px 12px !important;
+        border: 1px solid $Grey_Lighten-1;
+        border-right: none;
+        border-radius: 2px 0 0 2px;
+        background: $Grey_Lighten-5;
+
+        .year-month-picker-label {
+          font-size: $default-font;
+          font-weight: $default-font-weight;
+          color: $Grey_Darken-4;
+        }
+      }
+    }
+
+    &.q-field--disabled {
+      :deep(.q-field__before) {
+        border: 1px solid $Grey_Lighten-2;
+        border-right: none;
+      }
+
+      :deep(.q-field__inner) {
+        .q-field__control {
+          &:after {
+            border: 1px solid $Grey_Lighten-2;
+          }
+        }
+      }
+    }
+
+    :deep(.q-field__bottom) {
+      display: none;
+    }
+
+    :deep(.q-field__inner) {
+      .q-field__control {
+        padding: 4px 16px 4px 8px !important;
+        height: 100%;
+
+        .q-field__control-container {
+          .q-field__native {
+            text-align: center;
+          }
+        }
+
+        &:before {
+          border-style: solid;
+        }
+
+        &:after {
+          border: 1px solid $Grey_Lighten-1;
+          box-shadow: none;
+        }
+
+        &:hover,
+        &:active {
+          background: $Grey_Lighten-5 !important;
+        }
+
+        .q-field__prepend {
+          height: 20px;
+        }
+
+        .q-field__append {
+          height: 20px;
+
+          .q-icon {
+            margin-right: -8px;
+          }
+        }
+      }
+    }
+  }
+  .s-date-menu {
+    border-radius: 8px;
+  }
+</style>

package/src/vue-plugin.js

@@ -37,13 +37,14 @@ import SDateTimePicker from './components/SDateTimePicker.vue';
 import SDateRange from './components/SDateRange.vue';
 import SDate from './components/SDate.vue';
 import SDateAutoRangePicker from './components/SDateAutoRangePicker.vue';
+import SYearMonthPicker from './components/SYearMonthPicker.vue';
 import Directive from './directives/Directive';
 import SBadge from './components/SBadge.vue';
 
 const version = __UI_VERSION__;
 
 function install(app) {
-  app.component('s-badge', SBadge)
+  app.component('s-badge', SBadge);
   app.component('s-breadcrumbs', SBreadcrumbs);
   app.component('s-button', SButton);
   app.component('s-button-group', SButtonGroup);
@@ -82,6 +83,7 @@ function install(app) {
   app.component('s-date-range', SDateRange);
   app.component('s-date', SDate);
   app.component('s-date-auto-range-picker', SDateAutoRangePicker);
+  app.component('s-year-month-picker', SYearMonthPicker);
 }
 
 export {

package/src/components/STableTree.vue

@@ -1,209 +0,0 @@
-<template>
-  <q-table
-    flat
-    :separator="separator"
-    :rows="rows"
-    :columns="columns"
-    row-key="id"
-    :rows-per-page-options="[0]"
-    hide-bottom
-    :selected-rows-label="getSelectedString"
-    selection="multiple"
-    v-model:selected="selectedItem"
-  >
-    <template v-slot:header="props">
-      <tr>
-        <th
-          v-for="col in props.cols"
-          :key="col.name"
-          :class="col.align"
-        >
-          <span>{{ col.label }}</span>
-          <q-icon v-if="col.name === 'product_name'" name="info" size="sm" class="cursor-pointer">
-            <q-popup-proxy>
-              <q-banner>
-                여기는 인포
-              </q-banner>
-            </q-popup-proxy>
-          </q-icon>
-        </th>
-      </tr>
-    </template>
-
-    <template v-slot:body="props">
-      <tr class="center">
-        <td class="left">
-          <q-btn
-            round
-            flat
-            dense
-            :icon="visibleProduct[props.row.id]? 'arrow_drop_down' : 'arrow_right'"
-            @click="handleVisibleProduct(props.row.id)"
-          />
-          <q-icon class="q-ml-xs q-mr-sm" size="xs" name="folder_open" />
-          <span class="text-Grey_Lighten-1">{{ props.row.label }}</span>
-        </td>
-        <td class="left">{{ props.row.market }}</td>
-        <td class="text-positive">{{ props.row.product_code }}</td>
-        <td class="left">
-          <span style="width: 65px; display: inline-block" class="q-mr-sm">
-            <q-badge
-              outline
-              rounded
-              :color="stateColor[props.row.state]"
-              :label="props.row.state"
-            />
-          </span>
-          {{ props.row.product_name }}
-        </td>
-        <td>{{ props.row.sale_period }}</td>
-        <td>{{ props.row.stock }}</td>
-      </tr>
-
-      <tr
-        v-show="visibleProduct[props.row.id]"
-        v-for="(row, i) in props.row.children"
-        :key="i"
-        class="background-grey"
-      >
-        <td>
-          <q-btn
-          class="q-ml-lg"
-          round
-          flat
-          dense
-          :icon="visibleOption[row.subId] ? 'arrow_drop_down' : 'arrow_right'"
-          @click="handleVisibleOption(row.subId)"
-          />
-          <q-icon class="q-ml-xs q-mr-sm" size="xs" name="folder" />
-          <span class="text-Grey_Lighten-1">{{ row.label }}</span>
-        </td>
-        <td class="left">{{ row.market }}</td>
-        <td>{{ row.product_code }}</td>
-        <td class="left">{{ row.state }}{{ row.product_name }}</td>
-        <td>{{ row.sale_period }}</td>
-        <td>{{ row.stock }}</td>
-      </tr>
-
-      <tr
-        v-show="visibleOption[props.row.id]"
-        v-for="(row, i) in props.row.children[0].children"
-        :key="i"
-        class="background-grey"
-      >
-        <td class="left"><q-icon class="q-ml-xl q-pl-xl" size="xs" name="insert_drive_file" /></td>
-        <td class="left">{{ row.market }}</td>
-        <td>{{ row.product_code }}</td>
-        <td class="left">
-          <span style="width: 65px; display: inline-block" class="q-mr-sm">
-            <q-badge
-              outline
-              rounded
-              :color="stateColor[row.state]"
-              :label="row.state"
-            />
-          </span>
-          <span>{{ row.product_name }}</span>
-        </td>
-        <td>{{ row.sale_period }}</td>
-        <td class="center">{{ row.stock }}</td>
-      </tr>
-    </template>
-  </q-table>
-</template>
-
-<script>
-import { ref, onBeforeMount, watch } from 'vue';
-
-const stateColor = {
-  판매중: 'green',
-  판매중지: 'grey',
-  품절: 'red',
-};
-
-export default {
-  name: 'STableTree',
-  props: {
-    rows: Array,
-    columns: Array,
-  },
-  setup(props) {
-    const selectedItem = ref([]);
-    const visibleProduct = ref([]);
-    const visibleOption = ref([]);
-
-    const row = ref(props.rows);
-
-    const getSelectedString = ref('');
-
-    onBeforeMount(() => {
-      row.value.forEach((r) => {
-        visibleProduct.value[r.id] = true;
-        visibleOption.value[r.id] = true;
-      });
-    });
-
-    watch(
-visibleProduct.value,
-      () => {
-        const idx = visibleProduct.value.findIndex(i => i === false);
-        visibleOption.value[idx] = false;
-      },
-);
-
-    function handleVisibleProduct(id) {
-      visibleProduct.value[id] = !visibleProduct.value[id];
-    }
-
-    function handleVisibleOption(id) {
-      visibleOption.value[id] = !visibleOption.value[id];
-    }
-    return {
-      stateColor,
-      separator: ref('horizontal'),
-      selectedItem,
-      visibleProduct,
-      visibleOption,
-
-      handleVisibleProduct,
-      handleVisibleOption,
-
-      getSelectedString,
-
-    };
-  },
-};
-</script>
-
-<style scoped lang="sass">
-.q-table
-  thead
-    tr
-      height: 32px
-      th
-        padding: 0
-        background: $Grey_Lighten-5
-        border-bottom: 1px solid #777777
-        font-weight: 700
-        font-size: 12px
-        span
-          line-height: 32px
-  tbody
-    tr
-      height: 32px !important
-      td
-        padding: 0
-        border-bottom: 1px solid #777777
-        height: 32px
-    .background-grey
-      background: #E5E5E5
-
-.center
-  text-align: center !important
-
-.left
-  text-align: left !important
-
-.right
-  text-align: right !important
-</style>