quasar-ui-sellmate-ui-kit 2.3.1 → 3.0.0

package/src/components/STableTree.vue

@@ -1,208 +1,210 @@
-<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];
-      console.log(visibleOption.value);
-    }
-    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>
+<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];
+      console.log(visibleOption.value);
+    }
+    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>

package/src/components/STabs.vue

@@ -1,32 +1,32 @@
-<template>
-  <q-tabs
-    align="left"
-    active-color="positive"
-    indicator-color="transparent"
-    no-caps
-    dense
-    class="s-tabs text-grey"
-    :model-value="tab"
-  >
-    <slot></slot>
-  </q-tabs>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue';
-import { QTabs } from 'quasar';
-
-export default defineComponent({
-  name: 'STabs',
-  components: {
-    QTabs,
-  },
-  setup(props) {
-    const tab = ref(props.modelValue);
-
-    return {
-      tab,
-    };
-  },
-});
-</script>
+<template>
+  <q-tabs
+    align="left"
+    active-color="positive"
+    indicator-color="transparent"
+    no-caps
+    dense
+    class="s-tabs text-grey"
+    :model-value="tab"
+  >
+    <slot></slot>
+  </q-tabs>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import { QTabs } from 'quasar';
+
+export default defineComponent({
+  name: 'STabs',
+  components: {
+    QTabs,
+  },
+  setup(props) {
+    const tab = ref(props.modelValue);
+
+    return {
+      tab,
+    };
+  },
+});
+</script>