@timus-networks/theme 2.4.7 → 2.4.9

package/dist/module.json

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

package/dist/module.mjs

@@ -12,7 +12,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.7";
+const version = "2.4.9";
 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/components/development/example.checkbox.vue

@@ -59,6 +59,20 @@
       </template>
     </el-card>
 
+    <el-card>
+      <template #header>Vertical Group</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>To made checkbox group vertical just add <el-text tag="mark">class="el-vertical-group"</el-text> to <el-text tag="mark">el-checkbox-group</el-text> component.</p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-checkbox-group v-model="checkList" class="el-vertical-group">
+            <el-checkbox v-for="(size, index) of sizes" :key="index" :value="index" :size="size">Option 1</el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.vertical" /> </template>
+    </el-card>
+
     <el-card>
       <template #header> Indeterminate </template>
       <div class="flex flex-col gap-3 items-start">
@@ -148,7 +162,8 @@ export default defineComponent({
             </el-checkbox-group>
           `,
         indeterminate: ` <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"> Check all </el-checkbox> `,
-        min_max: ``
+        min_max: ``,
+        vertical: ` <el-checkbox-group v-model="value" class="el-vertical-group" />`
       },
       checkAll: false,
       checkList: ["Value selected and disabled", "Value A"],

package/dist/runtime/components/development/example.checkbox.vue.d.ts

@@ -10,6 +10,7 @@ declare const _default: import("vue").DefineComponent<{}, {}, {
         group: string;
         indeterminate: string;
         min_max: string;
+        vertical: string;
     };
     checkAll: boolean;
     checkList: string[];

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

@@ -18,10 +18,17 @@
             </template>
           </el-popover>
 
-          <el-popover placement="bottom" title="Title" :width="200" trigger="click" content="this is content, this is content, this is content">
+          <el-popover placement="bottom" trigger="click" popper-class="custom-popover">
             <template #reference>
-              <el-button>Click to activate</el-button>
+              <el-button type="primary">popover</el-button>
             </template>
+            <div class="table-filter-box" style="padding: 10px">
+              <el-select v-model="model" style="width: 200px" :teleported="false">
+                <el-option label="item1" value="item1" />
+                <el-option label="item2" value="item2" />
+                <el-option label="item3" value="item3" />
+              </el-select>
+            </div>
           </el-popover>
 
           <el-popover ref="popoverRef" placement="right" title="Title" :width="200" trigger="focus" content="this is content, this is content, this is content">
@@ -97,6 +104,8 @@
   const onClickOutside = () => {
     unref(popoverRef).popperRef?.delayHide?.();
   };
+  const sizes = ['default', 'large', 'medium', 'small', 'mini'];
+  const model = ref('');
   const snippets = {
     basic: `
       <el-popover placement="top-start" title="Title" :width="200" trigger="hover" content="this is content, this is content, this is content">

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

@@ -21,6 +21,20 @@
       <template #footer> <html-encode :tag="snippets.sizes" /> </template>
     </el-card>
 
+    <el-card>
+      <template #header>Vertical Group</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>To made radio group vertical just add <el-text tag="mark">class="el-vertical-group"</el-text> to <el-text tag="mark">el-radio-group</el-text> component.</p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-radio-group v-model="value" class="el-vertical-group">
+            <el-radio v-for="(size, index) of sizes" :key="index" :value="index" :size="size">Option 1</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.vertical" /> </template>
+    </el-card>
+
     <el-card>
       <template #header> Disabled </template>
       <div class="flex flex-col gap-3 items-start">
@@ -135,7 +149,8 @@ export default defineComponent({
               <el-radio :value="1" border>Option A</el-radio>
               <el-radio :value="2" border>Option B</el-radio>
             </el-radio-group>
-          `
+          `,
+        vertical: ` <el-radio-group v-model="value" class="el-vertical-group" />`
       },
       checkAll: false,
       checkList: ["Value selected and disabled", "Value A"],

package/dist/runtime/components/development/example.radio.vue.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<{}, {}, {
         group: string;
         button: string;
         bordered: string;
+        vertical: string;
     };
     checkAll: boolean;
     checkList: string[];

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

@@ -20,7 +20,19 @@
           <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
           <el-table-column property="city" label="City" show-overflow-tooltip />
           <el-table-column property="zip" label="Zip" show-overflow-tooltip />
-          <el-table-column property="address" label="Address" width="140" show-overflow-tooltip fixed="right" />
+          <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
+          <el-table-column min-width="37" fixed="right">
+            <el-dropdown>
+              <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
+                  <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
+                  <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
+                  <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-table-column>
         </el-table>
       </div>
       <template #footer>

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

@@ -379,7 +379,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-overlay-color: rgba(0, 0, 0, 0.8);
   --el-overlay-color-light: rgba(0, 0, 0, 0.7);
   --el-overlay-color-lighter: #69b64f;
-  --el-mask-color: rgba(255, 255, 255, 0.9);
+  --el-mask-color: rgba(255, 255, 255, 0.8);
   --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
   --el-border-width: 1px;
   --el-border-style: solid;

package/dist/runtime/public/scss/element-plus/checkbox-group.css

@@ -304,4 +304,8 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   display: inline-flex;
   font-size: 0;
   line-height: 0;
+}
+.el-checkbox-group.el-vertical-group {
+  align-items: flex-start;
+  flex-direction: column;
 }

package/dist/runtime/public/scss/element-plus/checkbox-group.scss

@@ -5,4 +5,9 @@
   display: inline-flex;
   font-size: 0;
   line-height: 0;
+
+  &.el-vertical-group {
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }

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

@@ -276,7 +276,7 @@ $overlay-color: map.merge(
 $mask-color: () !default;
 $mask-color: map.merge(
   (
-    '': rgba(255, 255, 255, 0.9),
+    '': rgba(255, 255, 255, 0.8),
     'extra-light': rgba(255, 255, 255, 0.3),
   ),
   $mask-color
@@ -1004,6 +1004,7 @@ $pagination: map.merge(
     'button-color': getCssVar('color-neutral-light-4'),
     'button-width': 32px,
     'button-height': 30px,
+    'select-height': 20px,
     'button-disabled-color': getCssVar('text-color-placeholder'),
     'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
     'button-bg-color': getCssVar('fill-color'),

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

@@ -379,7 +379,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-overlay-color: rgba(0, 0, 0, 0.8);
   --el-overlay-color-light: rgba(0, 0, 0, 0.7);
   --el-overlay-color-lighter: #69b64f;
-  --el-mask-color: rgba(255, 255, 255, 0.9);
+  --el-mask-color: rgba(255, 255, 255, 0.8);
   --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
   --el-border-width: 1px;
   --el-border-style: solid;
@@ -3102,6 +3102,10 @@ heights > $common-component-size
   font-size: 0;
   line-height: 0;
 }
+.el-checkbox-group.el-vertical-group {
+  align-items: flex-start;
+  flex-direction: column;
+}
 
 .el-checkbox {
   --el-checkbox-font-size: 14px;
@@ -9932,11 +9936,12 @@ heights > $common-component-size
   z-index: 2000;
   background-color: var(--el-mask-color);
   margin: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
   transition: opacity var(--el-transition-duration);
+  border-radius: 0;
 }
 .el-loading-mask.is-fullscreen {
   position: fixed;
@@ -10956,6 +10961,7 @@ heights > $common-component-size
   --el-pagination-button-color: var(--el-color-neutral-light-4);
   --el-pagination-button-width: 32px;
   --el-pagination-button-height: 30px;
+  --el-pagination-select-height: 20px;
   --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
   --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
   --el-pagination-button-bg-color: var(--el-fill-color);
@@ -10974,6 +10980,7 @@ heights > $common-component-size
   --el-pagination-button-color: var(--el-color-neutral-light-4);
   --el-pagination-button-width: 32px;
   --el-pagination-button-height: 30px;
+  --el-pagination-select-height: 20px;
   --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
   --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
   --el-pagination-button-bg-color: var(--el-fill-color);
@@ -11002,6 +11009,7 @@ heights > $common-component-size
   width: 128px;
 }
 .el-pagination .el-select .el-select__wrapper {
+  height: var(--el-pagination-select-height);
   min-height: var(--el-pagination-button-height);
 }
 .el-pagination button {
@@ -11271,6 +11279,7 @@ heights > $common-component-size
   box-shadow: var(--el-box-shadow-light);
   overflow-wrap: break-word;
   box-sizing: border-box;
+  width: auto !important;
 }
 .el-popover.el-popper--plain {
   padding: var(--el-popover-padding-large);
@@ -11601,10 +11610,13 @@ heights > $common-component-size
 
 .el-radio-group {
   display: inline-flex;
-  align-items: center;
   flex-wrap: wrap;
   font-size: 0;
 }
+.el-radio-group.el-vertical-group {
+  align-items: flex-start;
+  flex-direction: column;
+}
 
 .el-radio {
   --el-radio-font-size: var(--el-font-size-base);
@@ -12108,13 +12120,13 @@ heights > $common-component-size
 
 .el-scrollbar__bar {
   position: absolute;
-  right: 2px;
-  bottom: 2px;
+  right: 0;
+  bottom: 0;
   z-index: 1;
   border-radius: 4px;
 }
 .el-scrollbar__bar.is-vertical {
-  width: 6px;
+  width: 4px;
   top: 2px;
 }
 .el-scrollbar__bar.is-vertical > div {
@@ -12122,7 +12134,7 @@ heights > $common-component-size
 }
 
 .el-scrollbar__bar.is-horizontal {
-  height: 6px;
+  height: 4px;
   left: 2px;
 }
 .el-scrollbar__bar.is-horizontal > div {
@@ -13807,6 +13819,18 @@ heights > $common-component-size
   font-size: var(--el-table-font-size);
   line-height: 16px;
 }
+.el-table .cell .more-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-color-neutral-light-3);
+  width: 24px;
+  height: 24px;
+}
+.el-table .cell .more-icon svg {
+  width: 24px;
+  height: 20px;
+}
 .el-table--large {
   font-size: var(--el-font-size-base);
 }

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

@@ -318,11 +318,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   z-index: 2000;
   background-color: var(--el-mask-color);
   margin: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
   transition: opacity var(--el-transition-duration);
+  border-radius: 0;
 }
 .el-loading-mask.is-fullscreen {
   position: fixed;

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

@@ -21,11 +21,12 @@
   z-index: 2000;
   background-color: getCssVar('mask-color');
   margin: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
   transition: opacity getCssVar('transition-duration');
+  border-radius: 0;
 
   @include when(fullscreen) {
     position: fixed;

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

@@ -308,6 +308,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-pagination-button-color: var(--el-color-neutral-light-4);
   --el-pagination-button-width: 32px;
   --el-pagination-button-height: 30px;
+  --el-pagination-select-height: 20px;
   --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
   --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
   --el-pagination-button-bg-color: var(--el-fill-color);
@@ -326,6 +327,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-pagination-button-color: var(--el-color-neutral-light-4);
   --el-pagination-button-width: 32px;
   --el-pagination-button-height: 30px;
+  --el-pagination-select-height: 20px;
   --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
   --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
   --el-pagination-button-bg-color: var(--el-fill-color);
@@ -354,6 +356,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   width: 128px;
 }
 .el-pagination .el-select .el-select__wrapper {
+  height: var(--el-pagination-select-height);
   min-height: var(--el-pagination-button-height);
 }
 .el-pagination button {

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

@@ -76,6 +76,7 @@
     width: 128px;
 
     .#{$namespace}-select__wrapper {
+      height: getCssVar('pagination-select-height');
       min-height: getCssVar('pagination-button-height');
     }
   }

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

@@ -324,6 +324,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   box-shadow: var(--el-box-shadow-light);
   overflow-wrap: break-word;
   box-sizing: border-box;
+  width: auto !important;
 }
 .el-popover.el-popper--plain {
   padding: var(--el-popover-padding-large);

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

@@ -18,6 +18,7 @@
     box-shadow: getCssVar('box-shadow-light');
     overflow-wrap: break-word;
     box-sizing: border-box;
+    width: auto !important;
 
     @include m(plain) {
       padding: getCssVar('popover-padding-large');

package/dist/runtime/public/scss/element-plus/radio-group.css

@@ -302,7 +302,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 **/
 .el-radio-group {
   display: inline-flex;
-  align-items: center;
   flex-wrap: wrap;
   font-size: 0;
+}
+.el-radio-group.el-vertical-group {
+  align-items: flex-start;
+  flex-direction: column;
 }

package/dist/runtime/public/scss/element-plus/radio-group.scss

@@ -3,7 +3,11 @@
 
 @include b(radio-group) {
   display: inline-flex;
-  align-items: center;
   flex-wrap: wrap;
   font-size: 0;
+
+  &.el-vertical-group {
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }

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

@@ -341,13 +341,13 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 
 .el-scrollbar__bar {
   position: absolute;
-  right: 2px;
-  bottom: 2px;
+  right: 0;
+  bottom: 0;
   z-index: 1;
   border-radius: 4px;
 }
 .el-scrollbar__bar.is-vertical {
-  width: 6px;
+  width: 4px;
   top: 2px;
 }
 .el-scrollbar__bar.is-vertical > div {
@@ -355,7 +355,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 
 .el-scrollbar__bar.is-horizontal {
-  height: 6px;
+  height: 4px;
   left: 2px;
 }
 .el-scrollbar__bar.is-horizontal > div {

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

@@ -44,13 +44,13 @@
 
   @include e(bar) {
     position: absolute;
-    right: 2px;
-    bottom: 2px;
+    right: 0;
+    bottom: 0;
     z-index: 1;
     border-radius: 4px;
 
     @include when(vertical) {
-      width: 6px;
+      width: 4px;
       top: 2px;
 
       > div {
@@ -59,7 +59,7 @@
     }
 
     @include when(horizontal) {
-      height: 6px;
+      height: 4px;
       left: 2px;
 
       > div {

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

@@ -488,6 +488,18 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   font-size: var(--el-table-font-size);
   line-height: 16px;
 }
+.el-table .cell .more-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-color-neutral-light-3);
+  width: 24px;
+  height: 24px;
+}
+.el-table .cell .more-icon svg {
+  width: 24px;
+  height: 20px;
+}
 .el-table--large {
   font-size: var(--el-font-size-base);
 }

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

@@ -203,6 +203,7 @@
     &:last-of-type {
       .cell {
         padding-right: 0;
+        // padding-left: 0;
       }
     }
   }
@@ -225,6 +226,21 @@
       font-size: getCssVar('table-font-size');
       line-height: 16px;
     }
+
+    .more-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--el-color-neutral-light-3);
+      width: 24px;
+      height: 24px;
+      // margin-left: 4px;
+
+      svg {
+        width: 24px;
+        height: 20px;
+      }
+    }
   }
 
   @each $size in (large, default, small) {

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

@@ -379,7 +379,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-overlay-color: rgba(0, 0, 0, 0.8);
   --el-overlay-color-light: rgba(0, 0, 0, 0.7);
   --el-overlay-color-lighter: #69b64f;
-  --el-mask-color: rgba(255, 255, 255, 0.9);
+  --el-mask-color: rgba(255, 255, 255, 0.8);
   --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
   --el-border-width: 1px;
   --el-border-style: solid;

package/package.json

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