@timus-networks/theme 2.4.140 → 2.4.142

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/autocomplete.css

@@ -377,10 +377,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   text-overflow: ellipsis;
 }
 .el-autocomplete-suggestion li:hover {
-  background-color: var(--el-color-white);
+  background-color: var(--el-color-neutral-light-1);
 }
 .el-autocomplete-suggestion li.highlighted {
-  background-color: var(--el-color-white);
+  background-color: var(--el-color-neutral-light-1);
 }
 .el-autocomplete-suggestion li.divider {
   margin-top: 6px;

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

@@ -376,8 +376,8 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
   --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
   --el-disabled-bg-color: var(--el-color-neutral-light-1);
-  --el-disabled-text-color: var(--el-color-neutral-light-4);
-  --el-disabled-border-color: var(--el-color-neutral-light-4);
+  --el-disabled-text-color: var(--el-color-neutral-light-6);
+  --el-disabled-border-color: var(--el-color-neutral-light-5);
   --el-overlay-color: rgba(0, 0, 0, 0.8);
   --el-overlay-color-light: rgba(0, 0, 0, 0.7);
   --el-overlay-color-lighter: #4cb770;

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

@@ -245,8 +245,8 @@ $disabled: () !default;
 $disabled: map.merge(
   (
     'bg-color': getCssVar('color', 'neutral', 'light-1'),
-    'text-color': getCssVar('color', 'neutral', 'light-4'),
-    'border-color': getCssVar('color', 'neutral', 'light-4'),
+    'text-color': getCssVar('color', 'neutral', 'light-6'),
+    'border-color': getCssVar('color', 'neutral', 'light-5'),
   ),
   $disabled
 );
@@ -450,11 +450,12 @@ $select: map.merge(
 $select-option: () !default;
 $select-option: map.merge(
   (
-    'text-color': getCssVar('text-color-secondary'),
+    'text-color': getCssVar('text-color', 'neutral', 'light-9'),
     'disabled-color': getCssVar('text-color-disabled'),
     'height': 32px,
-    'hover-background': getCssVar('color', 'white'),
-    'selected-text-color': getCssVar('color-primary'),
+    'hover-background': getCssVar('color', 'neutral', 'light-1'),
+    'selected-text-color': getCssVar('text-color', 'neutral', 'light-9'),
+    'selected-bg-color': getCssVar('color', 'neutral', 'light-2'),
     'padding': 16px,
   ),
   $select-option
@@ -477,7 +478,7 @@ $select-dropdown: map.merge(
     'shadow': getCssVar('box-shadow-light'),
     'empty-color': getCssVar('text-color-secondary'),
     'max-height': 274px,
-    'padding': 6px 0,
+    'padding': 8px,
     'empty-padding': 10px 0,
     'header-padding': 10px,
     'footer-padding': 10px,
@@ -1004,13 +1005,13 @@ $table-cell-padding: map.merge(
 $pagination: () !default;
 $pagination: map.merge(
   (
-    'font-size': 14px,
+    'font-size': 12px,
     'bg-color': getCssVar('fill-color', 'blank'),
-    'text-color': getCssVar('color-neutral-light-4'),
+    'text-color': getCssVar('color-neutral-light-6'),
     'border-radius': 2px,
-    'button-color': getCssVar('color-neutral-light-4'),
-    'button-width': 32px,
-    'button-height': 30px,
+    'button-color': getCssVar('color-neutral-light-6'),
+    'button-width': 24px,
+    'button-height': 28px,
     'select-height': 20px,
     'button-disabled-color': getCssVar('text-color-placeholder'),
     'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
@@ -1018,9 +1019,9 @@ $pagination: map.merge(
     'hover-color': getCssVar('color-primary'),
     'font-size-small': 12px,
     'button-width-small': 24px,
-    'button-height-small': 30px,
+    'button-height-small': 28px,
     'button-width-large': 40px,
-    'button-height-large': 30px,
+    'button-height-large': 28px,
     'item-gap': 16px,
     'width': 100%,
   ),
@@ -1165,8 +1166,8 @@ $dropdown: () !default;
 $dropdown: map.merge(
   (
     'menu-box-shadow': getCssVar('box-shadow-light'),
-    'menuItem-hover-fill': getCssVar('color-white'),
-    'menuItem-hover-color': getCssVar('color-primary'),
+    'menuItem-hover-fill': getCssVar('color-neutral-light-1'),
+    'menuItem-hover-color': getCssVar('color-neutral-light-9'),
     'menu-index': 10,
   ),
   $dropdown
@@ -1236,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,
@@ -1294,10 +1296,10 @@ $datepicker: map.merge(
 $date-editor: () !default;
 $date-editor: map.merge(
   (
-    'width': 220px,
-    'monthrange-width': 300px,
-    'daterange-width': 350px,
-    'datetimerange-width': 400px,
+    'width': 100%,
+    'monthrange-width': 100%,
+    'daterange-width': 100%,
+    'datetimerange-width': 100%,
   ),
   $date-editor
 );

package/dist/runtime/public/scss/element-plus/date-picker/picker.css

@@ -448,10 +448,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 
 .el-date-editor {
-  --el-date-editor-width: 220px;
-  --el-date-editor-monthrange-width: 300px;
-  --el-date-editor-daterange-width: 350px;
-  --el-date-editor-datetimerange-width: 400px;
+  --el-date-editor-width: 100%;
+  --el-date-editor-monthrange-width: 100%;
+  --el-date-editor-daterange-width: 100%;
+  --el-date-editor-datetimerange-width: 100%;
   --el-input-text-color: var(--el-text-color-regular);
   --el-input-border: var(--el-border);
   --el-input-hover-border: var(--el-border-color-hover);

package/dist/runtime/public/scss/element-plus/date-picker.css

@@ -831,10 +831,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 
 .el-date-editor {
-  --el-date-editor-width: 220px;
-  --el-date-editor-monthrange-width: 300px;
-  --el-date-editor-daterange-width: 350px;
-  --el-date-editor-datetimerange-width: 400px;
+  --el-date-editor-width: 100%;
+  --el-date-editor-monthrange-width: 100%;
+  --el-date-editor-daterange-width: 100%;
+  --el-date-editor-datetimerange-width: 100%;
   --el-input-text-color: var(--el-text-color-regular);
   --el-input-border: var(--el-border);
   --el-input-hover-border: var(--el-border-color-hover);