@timus-networks/theme 1.0.184 → 2.0.0

package/components-js/ThemeSidebar.vue

@@ -1,275 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Sizes</h1>
-      <p class="p-md-c my-6">
-        Avatarlar, resimler, ikonlar veya alfanumerik karakterleri destekler. Avatar'ın şeklini ve boyutunu ayarlamak için `shape` ve `size`
-        özelliklerini kullanabilirsiniz. Ayrıca avatarın resim kaynağını belirlemek için `src` özelliğini kullanabilirsiniz. Şekil tipleri
-        <b>'circle | square'</b> şeklindedir. Boyutlar ise <b>''large', 'medium', 'small'</b> şeklindedir. Veya boyutu manuel olarak `size` özelliğini
-        kullanarak belirleyebilirsiniz, örneğin <b>size='50'</b>.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
-        <div id="sidebar" data-testid="components-sidebar-eitdurshvb" class="flex flex-col justify-center">
-          <nuxt-link :id="'header-logo-' + TP" class="logo-small py-10" to="/" data-testid="header-manager-logo" />
-          <el-menu
-            id="el-menu-primary"
-            class="mt-4"
-            data-testid="components-sidebar-afpbszwnwh"
-            :default-active="activeMenuItem ? activeMenuItem.toString() : '1'"
-            :collapse="isCollapse"
-          >
-            <el-menu-item data-testid="components-sidebar-ycllqnbrv" index="1" data-index="1">
-              <nuxt-link class="el-menu-link" to="/" data-testid="sidebar-dashboard">
-                <el-tooltip
-                  data-testid="components-sidebar-erxgphehpj"
-                  :disabled="true"
-                  class="item"
-                  effect="dark"
-                  content="Dashboard"
-                  placement="right"
-                >
-                  <i class="isax-grid-3" />
-                </el-tooltip>
-                <span class="el-menu-text">Dashboard</span>
-              </nuxt-link>
-            </el-menu-item>
-            <el-menu-item data-testid="components-sidebar-lhxzcthocp" index="2" data-index="2">
-              <nuxt-link class="el-menu-link" to="/users" data-testid="sidebar-users">
-                <el-tooltip data-testid="components-sidebar-gegdseotki" :disabled="true" class="item" effect="dark" content="Users" placement="right">
-                  <i class="isax-profile-circle" />
-                </el-tooltip>
-                <span class="el-menu-text">User & Teams</span>
-              </nuxt-link>
-            </el-menu-item>
-            <el-menu-item data-testid="components-sidebar-mpftdiklbu" index="3" data-index="3">
-              <nuxt-link class="el-menu-link" to="/devices" data-testid="sidebar-devices">
-                <el-tooltip
-                  data-testid="components-sidebar-knxsyjfjwd"
-                  :disabled="true"
-                  class="item"
-                  effect="dark"
-                  content="Devices"
-                  placement="right"
-                >
-                  <i class="isax-monitor-mobbile" />
-                </el-tooltip>
-                <span class="el-menu-text">Devices</span>
-              </nuxt-link>
-            </el-menu-item>
-
-            <el-menu-item v-if="TP === 'berqnet'" data-testid="components-sidebar-yzjnblrbvn" index="4" data-index="4">
-              <nuxt-link class="el-menu-link" to="/sites" data-testid="sidebar-sites">
-                <el-tooltip data-testid="components-sidebar-usdojbrni" :disabled="true" class="item" effect="dark" content="Sites" placement="right">
-                  <i class="isax-driver-2" />
-                </el-tooltip>
-                <span class="el-menu-text">Sites</span>
-              </nuxt-link>
-            </el-menu-item>
-            <el-menu-item v-else data-testid="components-sidebar-wezwxkkphc" index="4" data-index="4">
-              <nuxt-link class="el-menu-link" to="/sites" data-testid="sidebar-sites">
-                <el-tooltip data-testid="components-sidebar-qjjhulhbpp" :disabled="true" class="item" effect="dark" content="Sites" placement="right">
-                  <i class="isax-driver-2" />
-                </el-tooltip>
-                <span class="el-menu-text">Sites</span>
-              </nuxt-link>
-            </el-menu-item>
-
-            <el-submenu data-testid="components-sidebar-tmdvrlndak" class="sub-menus" index="5" data-index="5">
-              <template #title>
-                <el-tooltip :disabled="true" class="item" effect="dark" content="Insights" placement="right" data-testid="sidebar-rules">
-                  <i class="isax-key-square" />
-                </el-tooltip>
-                <span class="el-menu-text">Rules</span>
-              </template>
-
-              <el-menu-item data-testid="components-sidebar-pezlxnffvl" index="5-1" data-index="5-1">
-                <nuxt-link class="el-menu-link" to="/rules/firewall" data-testid="sidebar-rules-firewall">
-                  <span class="el-menu-text">Firewall</span>
-                </nuxt-link>
-              </el-menu-item>
-
-              <el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-jvruigbwdp" index="5-2" data-index="5-2">
-                <nuxt-link class="el-menu-link" to="/rules/routes" data-testid="sidebar-rules-routes">
-                  <span class="el-menu-text">Routes</span>
-                </nuxt-link>
-              </el-menu-item>
-
-              <el-menu-item data-testid="components-sidebar-iizzyuvzkh" index="5-3" data-index="5-3">
-                <nuxt-link class="el-menu-link" to="/rules/forwarding" data-testid="sidebar-rules-forwarding">
-                  <span class="el-menu-text">Forwarding</span>
-                </nuxt-link>
-              </el-menu-item>
-
-              <!-- <el-menu-item data-testid="components-sidebar-krxfszjkyp"  index="5-4" data-index="5-4">
-                        <nuxt-link class="el-menu-link" to="/rules/optimizations" data-testid="sidebar-rules-optimizations">
-                            <span class="el-menu-text">{{ $t("sidebar.rules.optimizations.text") }}</span>
-                        </nuxt-link>
-                    </el-menu-item> -->
-
-              <el-menu-item data-testid="components-sidebar-ptienrknds" index="5-4" data-index="5-4">
-                <nuxt-link class="el-menu-link" to="/rules/acls" data-testid="sidebar-rules-acls">
-                  <span class="el-menu-text">Access Control List</span>
-                </nuxt-link>
-              </el-menu-item>
-            </el-submenu>
-
-            <el-submenu data-testid="components-sidebar-bnihbcpjuh" class="sub-menus" index="6" data-index="6">
-              <template #title>
-                <el-tooltip :disabled="true" class="item" effect="dark" content="Ztna" placement="right" data-testid="sidebar-ztna">
-                  <i class="isax-shield" />
-                </el-tooltip>
-                <span class="el-menu-text">Zero Trust Security</span>
-              </template>
-              <el-menu-item data-testid="components-sidebar-nettrmotu" index="6-1" data-index="6-1">
-                <nuxt-link class="el-menu-link" to="/ztna/dashboard" data-testid="sidebar-ztna-dashboard">
-                  <span class="el-menu-text">Dashboard</span>
-                </nuxt-link>
-              </el-menu-item>
-              <el-menu-item data-testid="components-sidebar-svzpertkjn" index="6-2" data-index="6-2">
-                <nuxt-link class="el-menu-link" to="/ztna/behavior-detection" data-testid="sidebar-ztna-behavior">
-                  <span class="el-menu-text">Behaviors</span>
-                </nuxt-link>
-              </el-menu-item>
-              <el-menu-item data-testid="components-sidebar-voglodqvvx" index="6-3" data-index="6-3">
-                <nuxt-link class="el-menu-link" to="/ztna/user-sign-on-policies" data-testid="sidebar-ztna-user-sign-on">
-                  <span class="el-menu-text">User Sign-In Policies</span>
-                </nuxt-link>
-              </el-menu-item>
-              <el-menu-item data-testid="components-sidebar-vzizrrtpzn" index="6-4" data-index="6-4">
-                <nuxt-link class="el-menu-link" to="/ztna/admin-sign-on-policies" data-testid="sidebar-ztna-admin-sign-on">
-                  <span class="el-menu-text">Admin Sign-In Policies</span>
-                </nuxt-link>
-              </el-menu-item>
-            </el-submenu>
-
-            <el-submenu data-testid="components-sidebar-neymnnlec" class="sub-menus" index="7" data-index="7">
-              <template #title>
-                <el-tooltip :disabled="true" class="item" effect="dark" content="Insights" placement="right" data-testid="sidebar-insights">
-                  <i class="isax-folder-open" />
-                </el-tooltip>
-                <span class="el-menu-text">Insights</span>
-              </template>
-
-              <el-menu-item data-testid="components-sidebar-mtklcicmi" index="7-1" data-index="7-1">
-                <nuxt-link class="el-menu-link" to="/insights/alerts" data-testid="sidebar-insights-alerts">
-                  <span class="el-menu-text">Alerts</span>
-                </nuxt-link>
-              </el-menu-item>
-
-              <!-- <el-menu-item data-testid="components-sidebar-pfrrtymjti"  index="7-2" data-index="7-2">
-                        <nuxt-link class="el-menu-link" to="/insights/threats" data-testid="sidebar-threats">
-                            <span class="el-menu-text">{{ $t("sidebar.threats.text") }}</span>
-                        </nuxt-link>
-                    </el-menu-item> -->
-
-              <el-menu-item data-testid="components-sidebar-selflhiujn" index="7-3" data-index="7-3">
-                <nuxt-link class="el-menu-link" to="/insights/traffic" data-testid="sidebar-insights-all-traffic">
-                  <span class="el-menu-text">Traffic Logs</span>
-                </nuxt-link>
-              </el-menu-item>
-
-              <el-menu-item data-testid="components-sidebar-toksfhzzfq" index="7-4" data-index="7-4">
-                <nuxt-link class="el-menu-link" to="/insights/events" data-testid="sidebar-insights-events">
-                  <span class="el-menu-text">Events</span>
-                </nuxt-link>
-              </el-menu-item>
-
-              <el-menu-item data-testid="components-sidebar-cnudlizsfg" index="7-5" data-index="7-5">
-                <nuxt-link class="el-menu-link" to="/insights/reports" data-testid="sidebar-insights-automate-reports">
-                  <span class="el-menu-text">Automated Reports</span>
-                </nuxt-link>
-              </el-menu-item>
-
-              <el-menu-item data-testid="components-sidebar-kvhegftktx" index="7-6" data-index="7-6">
-                <nuxt-link class="el-menu-link" to="/insights/blocked-ips" data-testid="sidebar-insights-blocked-ips">
-                  <span class="el-menu-text">Blocked Ip Addresses</span>
-                </nuxt-link>
-              </el-menu-item>
-
-              <el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-ewrnsjeynv" index="7-7" data-index="7-7">
-                <nuxt-link class="el-menu-link" to="/insights/signed-logs" data-testid="sidebar-insights-signed-logs">
-                  <span class="el-menu-text">{{ $t('sidebar.insights.signed_logs.text') }}</span>
-                </nuxt-link>
-              </el-menu-item>
-            </el-submenu>
-
-            <el-submenu data-testid="components-sidebar-jcaexatpod" class="sub-menus" index="8" data-index="8">
-              <template #title>
-                <el-tooltip :disabled="true" class="item" effect="dark" content="Settings" placement="right" data-testid="sidebar-settings">
-                  <i class="isax-setting-2" />
-                </el-tooltip>
-                <span class="el-menu-text">Settings</span>
-              </template>
-              <el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-fswikkipil" index="8-1" data-index="8-1">
-                <nuxt-link class="el-menu-link" to="/settings/captive-portals" data-testid="sidebar-settings-captive-portal">
-                  <span class="el-menu-text">Captive Portal</span>
-                </nuxt-link>
-              </el-menu-item>
-              <el-menu-item data-testid="components-sidebar-rcngltetam" index="8-2" data-index="8-2">
-                <nuxt-link class="el-menu-link" to="/settings/integrations" data-testid="sidebar-settings-integrations">
-                  <span class="el-menu-text">Integrations</span>
-                </nuxt-link>
-              </el-menu-item>
-              <el-menu-item data-testid="components-sidebar-zvuhmrdamh" index="8-3" data-index="8-3">
-                <nuxt-link class="el-menu-link" to="/settings/configuration" data-testid="sidebar-settings-configuration">
-                  <span class="el-menu-text">Configuration</span>
-                </nuxt-link>
-              </el-menu-item>
-              <el-menu-item data-testid="components-sidebar-sjavprmmmj" index="8-4" data-index="8-4">
-                <nuxt-link class="el-menu-link" to="/settings/administrators" data-testid="sidebar-settings-administrators">
-                  <span class="el-menu-text">Administrators</span>
-                </nuxt-link>
-              </el-menu-item>
-              <el-menu-item data-testid="components-sidebar-iywlhkkmta" index="8-5" data-index="8-5">
-                <nuxt-link class="el-menu-link" to="/settings/organization" data-testid="sidebar-settings-organization">
-                  <span class="el-menu-text">Organization</span>
-                </nuxt-link>
-              </el-menu-item>
-              <el-menu-item data-testid="components-sidebar-yxbnijbpmj" index="8-6" data-index="8-6">
-                <nuxt-link class="el-menu-link" to="/settings/downloads" data-testid="sidebar-settings-downloads">
-                  <span class="el-menu-text">Downloads</span>
-                </nuxt-link>
-              </el-menu-item>
-            </el-submenu>
-          </el-menu>
-        </div>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-avatar :size="50"&gt;SK&lt;/el-avatar&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Types</h1>
-      <p class="p-md-c my-6">You can use any 'string' expression within the tag, in addition to a type that accepts 'src' or 'icon' as a property.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
-        <el-avatar icon="isax-add-circle" />
-        <el-avatar icon="isax-add-circle" size="large" />
-        <el-avatar :src="url" />
-        <el-avatar>SK</el-avatar>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-avatar icon="isax-add-circle" size="large"&gt;&lt;/el-avatar&gt;</code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>import { defineComponent } from 'vue';
-export default defineComponent({
-    name: 'TimusCascader',
-    data() {
-        return {
-            activeMenuItem: 1,
-            TP: 'timus',
-            isCollapse: false,
-            url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
-            sizeList: ['large', 'medium', 'small'],
-        };
-    },
-});
-</script>

package/components-js/ThemeTable.vue

@@ -1,305 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Fixed Height</h1>
-      <p class="p-md-c my-6">
-        This example demonstrates the basic usage of creating a data table using the `el-table` component provided by Element UI. Please note that the
-        outer border is applied with `table-container`.
-      </p>
-      <div class="grid flex-column">
-        <div class="table-container mb-4">
-          <el-table
-            ref="multipleTable"
-            :data="tableData"
-            :default-sort="{ prop: 'date', order: 'descending' }"
-            height="360px"
-            style="width: 100%"
-            @selection-change="handleSelectionChange"
-          >
-            <el-table-column type="selection" width="16" />
-            <el-table-column
-              fixed
-              prop="date"
-              label="Date"
-              sortable
-              column-key="date"
-              :filters="[
-                { text: '2016-05-01', value: '2016-05-01' },
-                { text: '2016-05-02', value: '2016-05-02' },
-                { text: '2016-05-03', value: '2016-05-03' },
-                { text: '2016-05-04', value: '2016-05-04' },
-              ]"
-              :filter-method="filterHandler"
-            />
-            <el-table-column prop="name" label="Name" width="60" :show-overflow-tooltip="true" />
-            <el-table-column prop="address" label="Address" :formatter="formatter" />
-            <el-table-column
-              prop="tag"
-              label="Tag"
-              :filters="[
-                { text: 'Home', value: 'Home' },
-                { text: 'Office', value: 'Office' },
-                { text: 'Potato', value: 'Potato' },
-              ]"
-              :filter-method="filterTag"
-              filter-placement="top-start"
-            />
-            <el-table-column prop="name" label="Name" width="120" />
-            <el-table-column prop="state" label="State" width="120" />
-            <el-table-column prop="city" label="City" width="120" />
-            <el-table-column prop="address" label="Address" width="300" />
-            <el-table-column prop="zip" label="Zip" width="120" />
-            <el-table-column fixed="right" label="Operations" width="120">
-              <template #default="scope">
-                <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)"> Remove </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <el-pagination
-          v-model:current-page="currentPage4"
-          :page-sizes="[100, 200, 300, 400]"
-          :page-size="100"
-          layout="total, prev, pager, next, jumper, sizes"
-          :total="400"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-
-      <div class="grid flex-column">
-        <div class="table-container mb-4">
-          <el-table
-            ref="multipleTable"
-            :data="tableData"
-            :default-sort="{ prop: 'date', order: 'descending' }"
-            height="360px"
-            style="width: 100%"
-            @selection-change="handleSelectionChange"
-          >
-            <el-table-column type="selection" width="16" />
-            <el-table-column
-              fixed
-              prop="date"
-              label="Date"
-              sortable
-              column-key="date"
-              :filters="[
-                { text: '2016-05-01', value: '2016-05-01' },
-                { text: '2016-05-02', value: '2016-05-02' },
-                { text: '2016-05-03', value: '2016-05-03' },
-                { text: '2016-05-04', value: '2016-05-04' },
-              ]"
-              :filter-method="filterHandler"
-            />
-            <el-table-column prop="name" label="Name" width="60" :show-overflow-tooltip="true" />
-            <el-table-column prop="address" label="Address" :formatter="formatter" />
-            <el-table-column
-              prop="tag"
-              label="Tag"
-              :filters="[
-                { text: 'Home', value: 'Home' },
-                { text: 'Office', value: 'Office' },
-                { text: 'Potato', value: 'Potato' },
-              ]"
-              :filter-method="filterTag"
-              filter-placement="top-start"
-            />
-            <el-table-column prop="name" label="Name" width="120" />
-            <el-table-column prop="state" label="State" width="120" />
-            <el-table-column prop="city" label="City" width="120" />
-            <el-table-column prop="address" label="Address" width="300" />
-            <el-table-column prop="zip" label="Zip" width="120" />
-            <el-table-column label="Operations" width="420" class="items-end patates" align="right">
-              <template #default="scope">
-                teeee <el-button size="small" @click.native.prevent="deleteRow(scope.$index, tableData)"> Remove </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <el-pagination
-          v-model:current-page="currentPage4"
-          :page-sizes="[100, 200, 300, 400]"
-          :page-size="100"
-          layout="total, prev, pager, next, jumper, sizes"
-          :total="400"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>
-            &lt;div class="table-container">&lt;el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending'
-            }"&gt;&lt;/el-table&gt;&lt;/div&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Expandable Row</h1>
-      <p class="p-md-c my-6">
-        When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature. Activate
-        expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row,
-        and you can access the same attributes as when you are using Scoped slot in custom column templates.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <div class="table-container mb-4">
-          <el-table :data="tableData" style="width: 100%">
-            <el-table-column type="expand">
-              <template #default="props">
-                <p>State: {{ props.row.state }}</p>
-                <p>City: {{ props.row.city }}</p>
-                <p>Address: {{ props.row.address }}</p>
-                <p>Zip: {{ props.row.zip }}</p>
-              </template>
-            </el-table-column>
-            <el-table-column label="Date" prop="date" />
-            <el-table-column label="Name" prop="name" />
-          </el-table>
-        </div>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>
-            &lt;el-table :data="tableData"&gt; &lt;el-table-column type="expand"&gt; &lt;template v-slot="props"&gt; &lt;p&gt;State: { props.row.state
-            } &lt;/p&gt; &lt;/template&gt; &lt;/el-table-column&gt; &lt;/el-table&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ThemeTable',
-  data() {
-    return {
-      multipleSelection: [],
-      currentPage1: 5,
-      currentPage2: 5,
-      currentPage3: 5,
-      currentPage4: 4,
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: 'Tom Tom Tom Tom Tom Tom Tom Tom Tom Tom Tom Kruz',
-          state: 'California ST',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home',
-        },
-        {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
-        },
-        {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home',
-        },
-        {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
-        },
-        {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
-        },
-        {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home',
-        },
-        {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
-        },
-      ],
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-  methods: {
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach((row) => {
-          this.$refs.multipleTable.toggleRowSelection(row);
-        });
-      } else {
-        this.$refs.multipleTable.clearSelection();
-      }
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    resetDateFilter() {
-      this.$refs.filterTable.clearFilter('date');
-    },
-    clearFilter() {
-      this.$refs.filterTable.clearFilter();
-    },
-    formatter(row, column) {
-      return row.address;
-    },
-    filterTag(value, row) {
-      return row.tag === value;
-    },
-    filterHandler(value, row, column) {
-      console.log(row, column, value);
-      const { property } = column;
-
-      return row[property] === value;
-    },
-    handleSizeChange(val) {
-      console.log(`${val} items per page`);
-    },
-    handleCurrentChange(val) {
-      console.log(`current page: ${val}`);
-    },
-  },
-});
-</script>