@timus-networks/theme 2.4.141 → 2.4.143

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.4.140",
+  "version": "2.4.142",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -11,7 +11,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@timus-networks/theme";
-const version = "2.4.140";
+const version = "2.4.142";
 const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
 const type = "module";
 const exports = {

package/dist/runtime/assets/scss/main.css

@@ -2405,6 +2405,7 @@ body {
 }
 .el-button:empty {
   padding: 0;
+  min-width: 36px;
 }
 .el-button:hover {
   color: var(--el-button-hover-text-color);
@@ -10312,7 +10313,7 @@ heights > $common-component-size
   height: 100%;
   display: inline-flex;
   align-items: center;
-  color: var(--el-color-info);
+  color: var(--el-color-neutral-light-3);
   font-size: 12px;
 }
 .el-input .el-input__count .el-input__count-inner {
@@ -11140,7 +11141,8 @@ heights > $common-component-size
   --el-menu-text-color: var(--el-color-neutral-light-9);
   --el-menu-hover-text-color: var(--el-color-primary);
   --el-menu-bg-color: var(--el-color-white);
-  --el-menu-hover-bg-color: var(--el-color-white);
+  --el-menu-hover-bg-color: var(--el-color-neutral-light-1);
+  --el-menu-pressed-bg-color: var(--el-color-neutral-light-2);
   --el-menu-item-height: 36px;
   --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 0px);
   --el-menu-horizontal-height: 60px;
@@ -11304,7 +11306,7 @@ heights > $common-component-size
   height: var(--el-menu-item-height);
   line-height: var(--el-menu-item-height);
   font-size: var(--el-menu-item-font-size);
-  color: var(--el-menu-text-color);
+  color: var(--el-color-neutral-light-9);
   padding: var(--el-menu-base-level-padding);
   list-style: none;
   cursor: pointer;
@@ -11324,7 +11326,11 @@ heights > $common-component-size
 }
 .el-menu-item:hover {
   background-color: var(--el-menu-hover-bg-color);
-  color: var(--el-color-primary);
+  color: var(--el-color-neutral-light-9);
+}
+.el-menu-item:active {
+  background-color: var(--el-menu-pressed-bg-color);
+  color: var(--el-color-neutral-light-9);
 }
 .el-menu-item.is-disabled {
   opacity: 0.25;
@@ -11370,7 +11376,7 @@ heights > $common-component-size
   height: var(--el-menu-item-height);
   line-height: var(--el-menu-item-height);
   font-size: var(--el-menu-item-font-size);
-  color: var(--el-menu-text-color);
+  color: var(--el-color-neutral-light-9);
   padding: var(--el-menu-base-level-padding);
   list-style: none;
   cursor: pointer;
@@ -11390,7 +11396,11 @@ heights > $common-component-size
 }
 .el-sub-menu__title:hover {
   background-color: var(--el-menu-hover-bg-color);
-  color: var(--el-color-primary);
+  color: var(--el-color-neutral-light-9);
+}
+.el-sub-menu__title:active {
+  background-color: var(--el-menu-pressed-bg-color);
+  color: var(--el-color-neutral-light-9);
 }
 .el-sub-menu__title.is-disabled {
   opacity: 0.25;
@@ -12238,10 +12248,6 @@ heights > $common-component-size
 .el-pagination__total[disabled=true] {
   color: var(--el-text-color-placeholder);
 }
-.el-pagination__total::after {
-  content: "Records";
-  padding-left: 4px;
-}
 
 .el-pagination__jump {
   display: flex;
@@ -16897,6 +16903,13 @@ mark.el-text {
   height: calc(50% - 10px);
 }
 
+.el-tooltip.el-popper.is-dark {
+  padding: 8px 16px;
+  background-color: var(--el-color-neutral-light-9);
+  color: var(--el-color-neutral-light-6);
+  box-shadow: 0 2px 2px 0 var(--el-color-neutral-light-6);
+}
+
 .el-tooltip-v2__content {
   --el-tooltip-v2-padding: 5px 10px;
   --el-tooltip-v2-border-radius: 4px;
@@ -18034,15 +18047,6 @@ mark.el-text {
   border-right-color: transparent !important;
   border-top-color: transparent !important;
 }
-.el-popper[data-popper-placement$=-end] > .el-popper__arrow {
-  left: auto !important;
-  right: 10px !important;
-}
-.el-popper[data-popper-placement$=-start] > .el-popper__arrow {
-  right: auto !important;
-  left: 10px !important;
-}
-
 .el-statistic {
   --el-statistic-title-font-weight: 400;
   --el-statistic-title-font-size: var(--el-font-size-tiny);

package/dist/runtime/components/development/example.form.vue

@@ -57,10 +57,10 @@
                 <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
               </el-col>
             </el-form-item>
-            <el-form-item class="flex gap-7">
-              <el-button class="mr-7.5" type="primary" @click="onSubmit">Create</el-button>
-              <el-button>Cancel</el-button>
-            </el-form-item>
+            <div class="page-footer">
+              <el-button type="secondary" @click="submitForm(ruleFormRef)"> Create </el-button>
+              <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+            </div>
           </el-form>
         </div>
       </div>
@@ -230,10 +230,10 @@
             <el-form-item label="Activity form" prop="desc">
               <el-input v-model="ruleForm.desc" type="textarea" />
             </el-form-item>
-            <el-form-item>
-              <el-button type="primary" class="mr-7.5" @click="submitForm(ruleFormRef)"> Create </el-button>
+            <div class="page-footer">
+              <el-button type="secondary" @click="submitForm(ruleFormRef)"> Create </el-button>
               <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
-            </el-form-item>
+            </div>
           </el-form>
         </div>
       </div>
@@ -293,10 +293,10 @@
                 <el-radio border value="Venue">Venue</el-radio>
               </el-radio-group>
             </el-form-item>
-            <el-form-item>
-              <el-button type="primary" class="mr-7.5" @click="onSubmit">Create</el-button>
-              <el-button>Cancel</el-button>
-            </el-form-item>
+            <div class="page-footer">
+              <el-button type="secondary" @click="submitForm(ruleFormRef)"> Create </el-button>
+              <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+            </div>
           </el-form>
         </div>
       </div>

package/dist/runtime/components/development/example.input.vue

@@ -18,6 +18,8 @@
             placeholder="Please input"
             :size="size !== 'default' ? size : undefined"
             :prefix-icon="ElIconSearch"
+            show-word-limit
+            maxlength="30"
           />
         </div>
       </div>
@@ -50,7 +52,16 @@
       <div class="flex flex-col gap-3 items-start">
         <p>Make the Input clearable with the <el-text tag="mark">clearable</el-text> attribute.</p>
         <div class="flex gap-4">
-          <el-input v-for="(size, index) of sizes" :key="size + index" v-model="input" placeholder="Please input" v-bind="size !== 'default' ? { size } : {}" clearable />
+          <el-input
+            v-for="(size, index) of sizes"
+            :key="size + index"
+            v-model="input"
+            show-word-limit
+            maxlength="30"
+            placeholder="Please input"
+            v-bind="size !== 'default' ? { size } : {}"
+            clearable
+          />
         </div>
       </div>
       <template #footer>

package/dist/runtime/components/development/example.menu.vue

@@ -0,0 +1,355 @@
+s
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Form</h1>
+    <p>Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.</p>
+
+    <el-card>
+      <template #header>Basic Form</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          It includes all kinds of input items, such as input, select, radio and checkbox. In each form component, you need a form-item field to be the container of your input
+          item.
+        </p>
+        <div class="flex gap-2">
+          <el-button @click="collapsed = !collapsed">Toggle</el-button>
+          <el-menu
+            id="el-menu-primary"
+            ref="menuRef"
+            data-testid="components-sidebar-vgcvofuzyo"
+            :default-active="computedStates.active_item.to"
+            class="w-full overflow-hidden !px-4 overflow-y-auto"
+            :router="true"
+            :unique-opened="true"
+            :collapse-transition="false"
+            :collapse="collapsed"
+          >
+            <el-menu-item v-index index="/" class="mat-grid-view" data-testid="components-sidebar-ycllqnbrv">
+              <template #title>{{ $t('sidebar.dashboard.text') }}</template>
+            </el-menu-item>
+            <el-menu-item v-index index="/users" class="mat-person" data-testid="components-sidebar-lhxzcthocp">
+              <template #title>{{ $t('sidebar.teams.text') }}</template>
+            </el-menu-item>
+            <el-menu-item v-index index="/devices" class="mat-devices" data-testid="components-sidebar-mpftdiklbu">
+              <template #title>{{ $t('sidebar.devices.text') }}</template>
+            </el-menu-item>
+            <el-menu-item v-index index="/agent-configuration" class="mat-folder-eye" data-testid="sidebar-agent-configuration">
+              <template #title>{{ $t('sidebar.agent_configuration.text') }}</template>
+            </el-menu-item>
+            <el-menu-item v-index data-testid="components-sidebar-yzjnblrbvn" index="/sites" regex="/sites" class="mat-lan">
+              <template #title>{{ $t(config.TP === 'berqnet' ? 'sidebar.sites.text' : 'sites.text') }}</template>
+            </el-menu-item>
+            <el-sub-menu v-index index="/rules" data-testid="components-sidebar-tmdvrlndak">
+              <template #title>
+                <i class="mat-rule" />
+                <span>{{ $t('sidebar.rules.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/rules/firewall" data-testid="components-sidebar-pezlxnffvl">
+                <template #title>{{ $t('sidebar.rules.firewall.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-if="config.TP === 'berqnet'" v-index index="/rules/routes/static" data-testid="components-sidebar-jvruigbwdp">
+                <template #title>{{ $t('sidebar.rules.routes.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/rules/forwarding" data-testid="components-sidebar-iizzyuvzkh">
+                <template #title>{{ $t('sidebar.rules.forwarding.text') }}</template>
+              </el-menu-item>
+              <!-- TODO: This feature will open after all controller versions are 14.0.0 v-if="false" <el-menu-item v-index index="/rules/qos" data-testid="components-sidebar-krxfszjkyp"> {{ $t('sidebar.rules.qos.text') }} </el-menu-item> -->
+              <el-menu-item v-index index="/rules/categories" data-testid="components-sidebar-ptienrknds">
+                <template #title>{{ $t('sidebar.settings.categories.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu v-index index="/ztna" data-testid="components-sidebar-bnihbcpjuh">
+              <template #title>
+                <i class="mat-shield" />
+                <span>{{ $t('sidebar.ztna.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/ztna/dashboard" data-testid="components-sidebar-nettrmotu">
+                <template #title>{{ $t('sidebar.ztna.dashboard.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/ztna/behavior-detection" data-testid="components-sidebar-svzpertkjn">
+                <template #title>{{ $t('sidebar.ztna.behaviors.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/ztna/device-posture-check" data-testid="components-sidebar-oreuewhqhj">
+                <template #title>{{ $t('sidebar.ztna.device_posture_check.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/ztna/user-sign-on-policies" data-testid="components-sidebar-voglodqvvx">
+                <template #title>{{ $t('sidebar.ztna.user_sign_on_policies.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/ztna/admin-sign-on-policies" data-testid="components-sidebar-vzizrrtpzn">
+                <template #title>{{ $t('sidebar.ztna.admin_sign_on_policies.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu v-index index="/insights" data-testid="components-sidebar-neymnnlec">
+              <template #title>
+                <i class="mat-folder-open" />
+                <span>{{ $t('sidebar.insights.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/insights/alerts" data-testid="components-sidebar-mtklcicmi">
+                <template #title>{{ $t('sidebar.insights.alerts.text') }}</template>
+              </el-menu-item>
+              <!--<el-menu-item v-index index="/insights/threats" data-testid="components-sidebar-pfrrtymjti">{{ $t('sidebar.threats.text') }}</el-menu-item>-->
+              <el-menu-item v-index index="/insights/network-activity" data-testid="components-sidebar-selflhiujn">
+                <template #title>{{ $t('sidebar.insights.all_traffic.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/insights/events" data-testid="components-sidebar-toksfhzzfq">
+                <template #title>{{ $t('sidebar.insights.events.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/insights/blocked-ips" data-testid="components-sidebar-kvhegftktx">
+                <template #title>{{ $t('sidebar.insights.blocked_ips.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu v-index index="/reports" data-testid="components-sidebar-bnihbcpjuh">
+              <template #title>
+                <i class="mat-bar-chart" />
+                <span>{{ $t('sidebar.reports.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/reports/automated" data-testid="components-sidebar-cnudlizsfg">
+                <template #title>{{ $t('sidebar.insights.reports.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/reports/productivity" data-testid="components-sidebar-ewrnssadfv">
+                <template #title>{{ $t('sidebar.insights.tracker.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/reports/device-posture" data-testid="components-sidebar-jdxrecyjwd">
+                <template #title>{{ $t('sidebar.insights.device_posture_check_reports.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-divider class="!my-2 !border-t-neutral-2" />
+            <el-sub-menu v-index index="/settings" data-testid="components-sidebar-jcaexatpod">
+              <template #title>
+                <i class="mat-settings" />
+                <span>{{ $t('sidebar.settings.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/settings/cache-analytics" data-testid="components-sidebar-fswikkipil">
+                <template #title>{{ $t('sidebar.settings.cache_analytics.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-if="config.TP !== 'timus'" v-index index="/settings/captive-portals" data-testid="components-sidebar-fswikkipil">
+                <template #title>{{ $t('sidebar.settings.captive_portal.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/integrations" data-testid="components-sidebar-integrations">
+                <template #title>{{ $t('sidebar.settings.integrations.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/configuration" data-testid="components-sidebar-zvuhmrdamh">
+                <template #title>{{ $t('sidebar.settings.configuration.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/tags" data-testid="components-sidebar-yxikpneqsi">
+                <template #title>{{ $t('sidebar.settings.tags.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/administrators" data-testid="components-sidebar-sjavprmmmj">
+                <template #title>{{ $t('sidebar.settings.administrators.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/organization" data-testid="components-sidebar-iywlhkkmta">
+                <template #title>{{ $t('sidebar.settings.organization.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/agent-deployment" data-testid="components-sidebar-yxbnijbpmj">
+                <template #title>{{ $t('sidebar.settings.agent_deployment.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+        </div>
+      </div>
+
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+
+  const config = useRuntimeConfig().public;
+  const menuRef = ref();
+  const menuIndexes = ref<{ value: string; to: string | undefined }[]>([]);
+  const route = useRoute();
+  const collapsed = ref(false);
+
+  /****************************************************************************
+   * Computed States
+   ****************************************************************************/
+
+  const computedStates = reactive({
+    active_item: computed(() => {
+      const currentPath = route.path;
+      const sortedIndexes = [...menuIndexes.value].sort((a, b) => b.value.length - a.value.length);
+
+      const matchingPath = sortedIndexes.find((pattern) => {
+        if (currentPath === pattern.value) return true;
+        if (currentPath.startsWith(pattern.value)) return true;
+
+        return false;
+      });
+
+      return matchingPath || { value: '/', to: '/' };
+    }),
+  });
+
+  const snippets = ref({
+    basic: `
+      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
+      </el-form>`,
+    same_line: `
+      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
+        <div class="el-form-items">
+          <el-form-item label="Activity form">
+            <el-input v-model="form.input" />
+          </el-form-item>
+          <el-form-item label="Activity zone">
+            <el-select v-model="form.region" placeholder="please select your zone" class="!w-32">
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="isax-add" />
+          </el-form-item>
+        </div>
+      </el-form>`,
+    sticky: `
+      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
+        <div class="el-form-items sticky">
+          <el-form-item label="Activity form">
+            <el-input v-model="form.input" />
+          </el-form-item>
+          <el-form-item label="Activity zone">
+            <el-select v-model="form.region" placeholder="please select your zone" class="!w-32">
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="isax-add" />
+          </el-form-item>
+        </div>
+      </el-form>
+    `,
+    validation: `
+      <el-form
+        ref="ruleFormRef"
+        style="max-width: 600px"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="auto"
+        class="demo-ruleForm"
+        :size="formSize"
+        status-icon
+        require-asterisk-position="right"
+        label-position="top"
+      />`,
+    size: `<el-form size="large" :model="ruleForm" label-width="auto" label-position="top"></el-form>`,
+  });
+
+  // Rules
+
+  import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
+
+  interface RuleForm {
+    name: string;
+    region: string;
+    count: string;
+    date1: string;
+    date2: string;
+    delivery: boolean;
+    location: string;
+    type: string[];
+    resource: string;
+    desc: string;
+  }
+
+  const formSize = ref<ComponentSize>('default');
+  const ruleFormRef = ref<FormInstance>();
+
+  const ruleForm = reactive<RuleForm>({
+    name: 'Hello',
+    region: '',
+    count: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    location: '',
+    type: [],
+    resource: '',
+    desc: '',
+  });
+
+  const locationOptions = ['Home', 'Company', 'School'];
+
+  const rules = reactive<FormRules<RuleForm>>({
+    name: [
+      { required: true, message: 'Please input Activity name', trigger: 'blur' },
+      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    region: [
+      {
+        required: true,
+        message: 'Please select Activity zone',
+        trigger: 'change',
+      },
+    ],
+    count: [
+      {
+        required: true,
+        message: 'Please select Activity count',
+        trigger: 'change',
+      },
+    ],
+    date1: [
+      {
+        type: 'date',
+        required: true,
+        message: 'Please pick a date',
+        trigger: 'change',
+      },
+    ],
+    date2: [
+      {
+        type: 'date',
+        required: true,
+        message: 'Please pick a time',
+        trigger: 'change',
+      },
+    ],
+    location: [
+      {
+        required: true,
+        message: 'Please select a location',
+        trigger: 'change',
+      },
+    ],
+    type: [
+      {
+        type: 'array',
+        required: true,
+        message: 'Please select at least one activity type',
+        trigger: 'change',
+      },
+    ],
+    resource: [
+      {
+        required: true,
+        message: 'Please select activity resource',
+        trigger: 'change',
+      },
+    ],
+    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
+  });
+
+  const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid: boolean, fields) => {
+      if (valid) {
+        console.log('submit!');
+      } else {
+        console.log('error submit!', fields);
+      }
+    });
+  };
+
+  const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.resetFields();
+  };
+
+  const options = Array.from({ length: 10000 }).map((_, idx) => ({
+    value: `${idx + 1}`,
+    label: `${idx + 1}`,
+  }));
+</script>

package/dist/runtime/components/development/example.tooltip.vue

@@ -16,48 +16,48 @@
         <section class="flex gap-7.5">
           <div class="flex flex-col items-center gap-4 grow w-[600px]">
             <div class="flex gap-7.5">
-              <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Top Left prompts info" placement="top-start">
                 <el-button>top-start</el-button>
               </el-tooltip>
-              <el-tooltip class="box-item" effect="dark" content="Top Center prompts info" placement="top">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Top Center prompts info" placement="top">
                 <el-button>top</el-button>
               </el-tooltip>
-              <el-tooltip class="box-item" effect="dark" content="Top Right prompts info" placement="top-end">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Top Right prompts info" placement="top-end">
                 <el-button>top-end</el-button>
               </el-tooltip>
             </div>
             <div class="flex gap-7.5">
-              <el-tooltip class="box-item" effect="dark" content="Left Top prompts info" placement="left-start">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Left Top prompts info" placement="left-start">
                 <el-button>left-start</el-button>
               </el-tooltip>
-              <el-tooltip class="box-item" effect="dark" content="Right Top prompts info" placement="right-start">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Right Top prompts info" placement="right-start">
                 <el-button>right-start</el-button>
               </el-tooltip>
             </div>
             <div class="flex gap-7.5">
-              <el-tooltip class="box-item" effect="dark" content="Left Center prompts info" placement="left">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Left Center prompts info" placement="left">
                 <el-button>left</el-button>
               </el-tooltip>
-              <el-tooltip class="box-item" effect="dark" content="Right Center prompts info" placement="right">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Right Center prompts info" placement="right">
                 <el-button>right</el-button>
               </el-tooltip>
             </div>
             <div class="flex gap-7.5">
-              <el-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
                 <el-button>left-end</el-button>
               </el-tooltip>
-              <el-tooltip class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end">
                 <el-button>right-end</el-button>
               </el-tooltip>
             </div>
             <div class="flex gap-7.5">
-              <el-tooltip class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
                 <el-button>bottom-start</el-button>
               </el-tooltip>
-              <el-tooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom">
                 <el-button>bottom</el-button>
               </el-tooltip>
-              <el-tooltip class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
+              <el-tooltip trigger="click" class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
                 <el-button>bottom-end</el-button>
               </el-tooltip>
             </div>
@@ -75,7 +75,7 @@
           named <el-text tag="mark">content</el-text>.
         </p>
         <section class="flex gap-7.5">
-          <el-tooltip placement="top">
+          <el-tooltip trigger="click" placement="top">
             <template #content> multiple lines<br />second line </template>
             <el-button>Top center</el-button>
           </el-tooltip>
@@ -91,11 +91,11 @@
 
   const snippets = ref({
     basic: `
-      <el-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
+      <el-tooltip trigger="click"class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
         <el-button>left-end</el-button>
       </el-tooltip>`,
     content: `
-      <el-tooltip placement="top">
+      <el-tooltip trigger="click"placement="top">
         <template #content> multiple lines<br />second line </template>
         <el-button>Top center</el-button>
       </el-tooltip>

package/dist/runtime/pages/theme.vue

@@ -15,6 +15,7 @@
     <el-tab-pane class="mt-4" label="Form" name="form" lazy><example-form /></el-tab-pane>
     <el-tab-pane class="mt-4" label="Input" name="input"><example-input /></el-tab-pane>
     <el-tab-pane class="mt-4" label="Link" name="link" lazy><example-link /></el-tab-pane>
+    <el-tab-pane class="mt-4" label="Menu" name="menu" lazy><example-menu /></el-tab-pane>
     <el-tab-pane class="mt-4" label="Message" name="message" lazy><example-message /></el-tab-pane>
     <el-tab-pane class="mt-4" label="Number" name="number" lazy><example-number /></el-tab-pane>
     <el-tab-pane class="mt-4" label="Notification" name="notification" lazy><example-notification /></el-tab-pane>

package/dist/runtime/public/scss/element-plus/button.css

@@ -345,6 +345,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-button:empty {
   padding: 0;
+  min-width: 36px;
 }
 .el-button:hover {
   color: var(--el-button-hover-text-color);

package/dist/runtime/public/scss/element-plus/button.scss

@@ -48,6 +48,7 @@ $button-icon-span-gap: map.merge(
 
   &:empty {
     padding: 0;
+    min-width: 36px;
   }
 
   &:hover {

package/dist/runtime/public/scss/element-plus/common/var.scss

@@ -1237,7 +1237,8 @@ $menu: map.merge(
     'text-color': getCssVar('color-neutral-light-9'),
     'hover-text-color': getCssVar('color-primary'),
     'bg-color': getCssVar('color-white'),
-    'hover-bg-color': getCssVar('color-white'),
+    'hover-bg-color': getCssVar('color', 'neutral', 'light-1'),
+    'pressed-bg-color': getCssVar('color', 'neutral', 'light-2'),
     'item-height': 36px,
     'sub-item-height': calc(#{getCssVar('menu-item-height')} - 0px),
     'horizontal-height': 60px,

package/dist/runtime/public/scss/element-plus/index.css

@@ -1408,6 +1408,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-button:empty {
   padding: 0;
+  min-width: 36px;
 }
 .el-button:hover {
   color: var(--el-button-hover-text-color);
@@ -9315,7 +9316,7 @@ heights > $common-component-size
   height: 100%;
   display: inline-flex;
   align-items: center;
-  color: var(--el-color-info);
+  color: var(--el-color-neutral-light-3);
   font-size: 12px;
 }
 .el-input .el-input__count .el-input__count-inner {
@@ -10254,7 +10255,8 @@ h6,
   --el-menu-text-color: var(--el-color-neutral-light-9);
   --el-menu-hover-text-color: var(--el-color-primary);
   --el-menu-bg-color: var(--el-color-white);
-  --el-menu-hover-bg-color: var(--el-color-white);
+  --el-menu-hover-bg-color: var(--el-color-neutral-light-1);
+  --el-menu-pressed-bg-color: var(--el-color-neutral-light-2);
   --el-menu-item-height: 36px;
   --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 0px);
   --el-menu-horizontal-height: 60px;
@@ -10418,7 +10420,7 @@ h6,
   height: var(--el-menu-item-height);
   line-height: var(--el-menu-item-height);
   font-size: var(--el-menu-item-font-size);
-  color: var(--el-menu-text-color);
+  color: var(--el-color-neutral-light-9);
   padding: var(--el-menu-base-level-padding);
   list-style: none;
   cursor: pointer;
@@ -10438,7 +10440,11 @@ h6,
 }
 .el-menu-item:hover {
   background-color: var(--el-menu-hover-bg-color);
-  color: var(--el-color-primary);
+  color: var(--el-color-neutral-light-9);
+}
+.el-menu-item:active {
+  background-color: var(--el-menu-pressed-bg-color);
+  color: var(--el-color-neutral-light-9);
 }
 .el-menu-item.is-disabled {
   opacity: 0.25;
@@ -10484,7 +10490,7 @@ h6,
   height: var(--el-menu-item-height);
   line-height: var(--el-menu-item-height);
   font-size: var(--el-menu-item-font-size);
-  color: var(--el-menu-text-color);
+  color: var(--el-color-neutral-light-9);
   padding: var(--el-menu-base-level-padding);
   list-style: none;
   cursor: pointer;
@@ -10504,7 +10510,11 @@ h6,
 }
 .el-sub-menu__title:hover {
   background-color: var(--el-menu-hover-bg-color);
-  color: var(--el-color-primary);
+  color: var(--el-color-neutral-light-9);
+}
+.el-sub-menu__title:active {
+  background-color: var(--el-menu-pressed-bg-color);
+  color: var(--el-color-neutral-light-9);
 }
 .el-sub-menu__title.is-disabled {
   opacity: 0.25;
@@ -11352,10 +11362,6 @@ h6,
 .el-pagination__total[disabled=true] {
   color: var(--el-text-color-placeholder);
 }
-.el-pagination__total::after {
-  content: "Records";
-  padding-left: 4px;
-}
 
 .el-pagination__jump {
   display: flex;
@@ -16011,6 +16017,13 @@ mark.el-text {
   height: calc(50% - 10px);
 }
 
+.el-tooltip.el-popper.is-dark {
+  padding: 8px 16px;
+  background-color: var(--el-color-neutral-light-9);
+  color: var(--el-color-neutral-light-6);
+  box-shadow: 0 2px 2px 0 var(--el-color-neutral-light-6);
+}
+
 .el-tooltip-v2__content {
   --el-tooltip-v2-padding: 5px 10px;
   --el-tooltip-v2-border-radius: 4px;
@@ -17148,15 +17161,6 @@ mark.el-text {
   border-right-color: transparent !important;
   border-top-color: transparent !important;
 }
-.el-popper[data-popper-placement$=-end] > .el-popper__arrow {
-  left: auto !important;
-  right: 10px !important;
-}
-.el-popper[data-popper-placement$=-start] > .el-popper__arrow {
-  right: auto !important;
-  left: 10px !important;
-}
-
 .el-statistic {
   --el-statistic-title-font-weight: 400;
   --el-statistic-title-font-size: var(--el-font-size-tiny);

package/dist/runtime/public/scss/element-plus/input.css

@@ -443,7 +443,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   height: 100%;
   display: inline-flex;
   align-items: center;
-  color: var(--el-color-info);
+  color: var(--el-color-neutral-light-3);
   font-size: 12px;
 }
 .el-input .el-input__count .el-input__count-inner {

package/dist/runtime/public/scss/element-plus/input.scss

@@ -178,7 +178,7 @@
     height: 100%;
     display: inline-flex;
     align-items: center;
-    color: getCssVar('color-info');
+    color: getCssVar('color-neutral-light-3');
     font-size: 12px;
 
     .#{$namespace}-input__count-inner {

package/dist/runtime/public/scss/element-plus/menu.css

@@ -425,7 +425,8 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-menu-text-color: var(--el-color-neutral-light-9);
   --el-menu-hover-text-color: var(--el-color-primary);
   --el-menu-bg-color: var(--el-color-white);
-  --el-menu-hover-bg-color: var(--el-color-white);
+  --el-menu-hover-bg-color: var(--el-color-neutral-light-1);
+  --el-menu-pressed-bg-color: var(--el-color-neutral-light-2);
   --el-menu-item-height: 36px;
   --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 0px);
   --el-menu-horizontal-height: 60px;
@@ -589,7 +590,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   height: var(--el-menu-item-height);
   line-height: var(--el-menu-item-height);
   font-size: var(--el-menu-item-font-size);
-  color: var(--el-menu-text-color);
+  color: var(--el-color-neutral-light-9);
   padding: var(--el-menu-base-level-padding);
   list-style: none;
   cursor: pointer;
@@ -609,7 +610,11 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-menu-item:hover {
   background-color: var(--el-menu-hover-bg-color);
-  color: var(--el-color-primary);
+  color: var(--el-color-neutral-light-9);
+}
+.el-menu-item:active {
+  background-color: var(--el-menu-pressed-bg-color);
+  color: var(--el-color-neutral-light-9);
 }
 .el-menu-item.is-disabled {
   opacity: 0.25;
@@ -655,7 +660,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   height: var(--el-menu-item-height);
   line-height: var(--el-menu-item-height);
   font-size: var(--el-menu-item-font-size);
-  color: var(--el-menu-text-color);
+  color: var(--el-color-neutral-light-9);
   padding: var(--el-menu-base-level-padding);
   list-style: none;
   cursor: pointer;
@@ -675,7 +680,11 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-sub-menu__title:hover {
   background-color: var(--el-menu-hover-bg-color);
-  color: var(--el-color-primary);
+  color: var(--el-color-neutral-light-9);
+}
+.el-sub-menu__title:active {
+  background-color: var(--el-menu-pressed-bg-color);
+  color: var(--el-color-neutral-light-9);
 }
 .el-sub-menu__title.is-disabled {
   opacity: 0.25;

package/dist/runtime/public/scss/element-plus/menu.scss

@@ -10,7 +10,7 @@
   height: getCssVar('menu-item-height');
   line-height: getCssVar('menu-item-height');
   font-size: getCssVar('menu-item-font-size');
-  color: getCssVar('menu-text-color');
+  color: getCssVar('color-neutral-light-9');
   padding: getCssVar('menu-base-level-padding');
   list-style: none;
   cursor: pointer;
@@ -37,7 +37,12 @@
 
   &:hover {
     background-color: getCssVar('menu-hover-bg-color');
-    color: getCssVar('color-primary');
+    color: getCssVar('color-neutral-light-9');
+  }
+
+  &:active {
+    background-color: getCssVar('menu-pressed-bg-color');
+    color: getCssVar('color-neutral-light-9');
   }
 
   @include when(disabled) {

package/dist/runtime/public/scss/element-plus/pagination.css

@@ -436,10 +436,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 .el-pagination__total[disabled=true] {
   color: var(--el-text-color-placeholder);
 }
-.el-pagination__total::after {
-  content: "Records";
-  padding-left: 4px;
-}
 
 .el-pagination__jump {
   display: flex;

package/dist/runtime/public/scss/element-plus/pagination.scss

@@ -125,11 +125,6 @@
     &[disabled='true'] {
       color: getCssVar('text-color', 'placeholder');
     }
-
-    &::after {
-      content: 'Records';
-      padding-left: 4px;
-    }
   }
 
   @include e(jump) {

package/dist/runtime/public/scss/element-plus/popper.css

@@ -399,12 +399,4 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 .el-popper[data-popper-placement^=right] .el-popper__arrow::before {
   border-right-color: transparent !important;
   border-top-color: transparent !important;
-}
-.el-popper[data-popper-placement$=-end] > .el-popper__arrow {
-  left: auto !important;
-  right: 10px !important;
-}
-.el-popper[data-popper-placement$=-start] > .el-popper__arrow {
-  right: auto !important;
-  left: 10px !important;
 }

package/dist/runtime/public/scss/element-plus/popper.scss

@@ -108,12 +108,12 @@
   }
 
   &[data-popper-placement$='-end'] > #{$arrow-selector} {
-    left: auto !important;
-    right: 10px !important;
+    // left: auto !important;
+    // right: 10px !important;
   }
 
   &[data-popper-placement$='-start'] > #{$arrow-selector} {
-    right: auto !important;
-    left: 10px !important;
+    // right: auto !important;
+    // left: 10px !important;
   }
 }

package/dist/runtime/public/scss/element-plus/tooltip.css

@@ -0,0 +1,308 @@
+@charset "UTF-8";
+/* Element Chalk Variables */
+:root {
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-bg-opacity: 1;
+  --el-color-white: white;
+  --el-color-black: black;
+}
+:root {
+  --el-color-light-light-1: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-light-light-2: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-light-light-3: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-light-light-4: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-light-light-5: rgba(255, 255, 255, 0.01);
+  --el-color-light: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-light-light-6: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-light-light-7: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-light-light-8: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-light-light-9: rgba(255, 255, 255, 0.01);
+}
+:root {
+  --el-color-default-light-1: #ddd7f7;
+}
+:root {
+  --el-color-default-light-2: #bcafef;
+}
+:root {
+  --el-color-default-light-3: #9a87e6;
+}
+:root {
+  --el-color-default-light-4: #795fde;
+}
+:root {
+  --el-color-default-light-5: #5737d6;
+  --el-color-default: #5737d6;
+}
+:root {
+  --el-color-default-light-6: #462cab;
+}
+:root {
+  --el-color-default-light-7: #342180;
+}
+:root {
+  --el-color-default-light-8: #231656;
+}
+:root {
+  --el-color-default-light-9: #110b2b;
+}
+:root {
+  --el-color-primary-light-1: #ddd7f7;
+}
+:root {
+  --el-color-primary-light-2: #bcafef;
+}
+:root {
+  --el-color-primary-light-3: #9a87e6;
+}
+:root {
+  --el-color-primary-light-4: #795fde;
+}
+:root {
+  --el-color-primary-light-5: #5737d6;
+  --el-color-primary: #5737d6;
+}
+:root {
+  --el-color-primary-light-6: #462cab;
+}
+:root {
+  --el-color-primary-light-7: #342180;
+}
+:root {
+  --el-color-primary-light-8: #231656;
+}
+:root {
+  --el-color-primary-light-9: #110b2b;
+}
+:root {
+  --el-color-secondary-light-1: #eeedef;
+}
+:root {
+  --el-color-secondary-light-2: #dcdbe0;
+}
+:root {
+  --el-color-secondary-light-3: #cbcad0;
+}
+:root {
+  --el-color-secondary-light-4: #b9b8c1;
+}
+:root {
+  --el-color-secondary-light-5: #a8a6b1;
+  --el-color-secondary: #a8a6b1;
+}
+:root {
+  --el-color-secondary-light-6: #8b8993;
+}
+:root {
+  --el-color-secondary-light-7: #6e6c74;
+}
+:root {
+  --el-color-secondary-light-8: #515056;
+}
+:root {
+  --el-color-secondary-light-9: #343337;
+}
+:root {
+  --el-color-neutral-light-1: #eeedef;
+}
+:root {
+  --el-color-neutral-light-2: #dcdbe0;
+}
+:root {
+  --el-color-neutral-light-3: #cbcad0;
+}
+:root {
+  --el-color-neutral-light-4: #b9b8c1;
+}
+:root {
+  --el-color-neutral-light-5: #a8a6b1;
+  --el-color-neutral: #a8a6b1;
+}
+:root {
+  --el-color-neutral-light-6: #8b8993;
+}
+:root {
+  --el-color-neutral-light-7: #6e6c74;
+}
+:root {
+  --el-color-neutral-light-8: #515056;
+}
+:root {
+  --el-color-neutral-light-9: #343337;
+}
+:root {
+  --el-color-info-light-1: #d9ecff;
+}
+:root {
+  --el-color-info-light-2: #b2d9ff;
+}
+:root {
+  --el-color-info-light-3: #8cc7fe;
+}
+:root {
+  --el-color-info-light-4: #65b4fe;
+}
+:root {
+  --el-color-info-light-5: #3fa1fe;
+  --el-color-info: #3fa1fe;
+}
+:root {
+  --el-color-info-light-6: #3283cf;
+}
+:root {
+  --el-color-info-light-7: #2665a1;
+}
+:root {
+  --el-color-info-light-8: #194772;
+}
+:root {
+  --el-color-info-light-9: #0d2944;
+}
+:root {
+  --el-color-danger-light-1: #f9dede;
+}
+:root {
+  --el-color-danger-light-2: #f4bcbd;
+}
+:root {
+  --el-color-danger-light-3: #ee9b9d;
+}
+:root {
+  --el-color-danger-light-4: #e9797c;
+}
+:root {
+  --el-color-danger-light-5: #e3585b;
+  --el-color-danger: #e3585b;
+}
+:root {
+  --el-color-danger-light-6: #b94749;
+}
+:root {
+  --el-color-danger-light-7: #8f3638;
+}
+:root {
+  --el-color-danger-light-8: #642526;
+}
+:root {
+  --el-color-danger-light-9: #3a1415;
+}
+:root {
+  --el-color-error-light-1: #f9dede;
+}
+:root {
+  --el-color-error-light-2: #f4bcbd;
+}
+:root {
+  --el-color-error-light-3: #ee9b9d;
+}
+:root {
+  --el-color-error-light-4: #e9797c;
+}
+:root {
+  --el-color-error-light-5: #e3585b;
+  --el-color-error: #e3585b;
+}
+:root {
+  --el-color-error-light-6: #b94749;
+}
+:root {
+  --el-color-error-light-7: #8f3638;
+}
+:root {
+  --el-color-error-light-8: #642526;
+}
+:root {
+  --el-color-error-light-9: #3a1415;
+}
+:root {
+  --el-color-success-light-1: #dbf1e2;
+}
+:root {
+  --el-color-success-light-2: #b7e2c6;
+}
+:root {
+  --el-color-success-light-3: #94d4a9;
+}
+:root {
+  --el-color-success-light-4: #70c58d;
+}
+:root {
+  --el-color-success-light-5: #4cb770;
+  --el-color-success: #4cb770;
+}
+:root {
+  --el-color-success-light-6: #3d925a;
+}
+:root {
+  --el-color-success-light-7: #2e6e43;
+}
+:root {
+  --el-color-success-light-8: #1e492d;
+}
+:root {
+  --el-color-success-light-9: #0f2516;
+}
+:root {
+  --el-color-warning-light-1: #faf3dc;
+}
+:root {
+  --el-color-warning-light-2: #f6e8ba;
+}
+:root {
+  --el-color-warning-light-3: #f1dc97;
+}
+:root {
+  --el-color-warning-light-4: #edd175;
+}
+:root {
+  --el-color-warning-light-5: #e8c552;
+  --el-color-warning: #e8c552;
+}
+:root {
+  --el-color-warning-light-6: #bda042;
+}
+:root {
+  --el-color-warning-light-7: #927b32;
+}
+:root {
+  --el-color-warning-light-8: #665722;
+}
+:root {
+  --el-color-warning-light-9: #3b3212;
+}
+/**
+Bununla selectorun içerisine variable ekleyebiliyorsun
+.selector{
+    // --el-button-text-color: var(--el-color-primary); -> bu eklenir
+    @include css-var-from-global(('button-text-color'), ('color-primary'));
+
+    // bununla property'ye değer atayabilirsin (hiyerarşik alıyor)
+    color: getCssVar('colors-neutral-light-2');
+
+    // bununla da property alınabililyor
+    font-size: map.get($select, 'font-size');
+}
+**/
+.el-tooltip.el-popper.is-dark {
+  padding: 8px 16px;
+  background-color: var(--el-color-neutral-light-9);
+  color: var(--el-color-neutral-light-6);
+  box-shadow: 0 2px 2px 0 var(--el-color-neutral-light-6);
+}

package/dist/runtime/public/scss/element-plus/tooltip.scss

@@ -0,0 +1,15 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use 'mixins/button' as *;
+
+.el-tooltip {
+  &.el-popper {
+    &.is-dark {
+      padding: 8px 16px;
+      background-color: var(--el-color-neutral-light-9);
+      color: var(--el-color-neutral-light-6);
+      box-shadow: 0 2px 2px 0 var(--el-color-neutral-light-6);
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timus-networks/theme",
-  "version": "2.4.141",
+  "version": "2.4.143",
   "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
   "type": "module",
   "exports": {