@timus-networks/theme 2.4.285 → 2.4.288

package/dist/runtime/public/scss/element-plus/select-v2.css

@@ -488,6 +488,24 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-select__wrapper.is-filterable {
   cursor: text;
+  overflow: hidden;
+}
+.el-select__wrapper.is-filterable .el-select__selection {
+  overflow: hidden;
+}
+.el-select__wrapper.is-filterable .el-select__input-wrapper {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.el-select__wrapper.is-filterable .el-select__input {
+  min-width: 0 !important;
+  width: 100% !important;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .el-select__wrapper.is-focused {
@@ -589,17 +607,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   flex-wrap: wrap;
   user-select: none;
   align-items: center;
-  /* Sonradan ekledim truncate etmek için */
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: min-content;
-  max-width: calc(100% - 120px);
+  flex-shrink: 1;
 }
 .el-select__selected-item.el-tooltip__trigger {
-  max-width: min-content;
-}
-.el-select__selected-item {
-  /* buraya kadar ekledim truncate etmek için */
+  flex-shrink: 0;
 }
 .el-select__selected-item .el-tag.el-tag--info {
   --el-tag-bg-color: var(--el-color-primary-light-1);
@@ -607,12 +618,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-tag-hover-color: var(--el-color-primary-light-5);
   --el-tag-text-color: var(--el-color-primary-light-5);
 }
-.el-select__selected-item:has(+ .el-tooltip__trigger) {
-  max-width: calc(100% - 160px);
-}
-.el-select__selected-item:has(~ .el-select__input-wrapper.is-hidden) {
-  max-width: none;
-}
 
 .el-select__tags-text {
   display: block;
@@ -628,11 +633,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--el-input-text-color, var(--el-text-color-regular));
-  min-width: 100%;
+  min-width: 0;
 }
 .el-select__placeholder.is-transparent {
   user-select: none;
@@ -675,6 +681,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 .el-select__input-wrapper.is-hidden {
   position: absolute;
   opacity: 0;
+  display: none;
 }
 
 .el-select__input {
@@ -824,4 +831,34 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 
 .el-select.wrap .el-select__selection {
   flex-wrap: wrap;
+}
+
+.el-form-items .el-select .el-select__placeholder {
+  min-width: 0;
+  max-width: 100%;
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item:not(.el-tooltip__trigger) {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item:not(.el-tooltip__trigger):has(+ .el-select__selected-item.el-tooltip__trigger) {
+  max-width: calc(100% - 3rem);
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item:not(.el-tooltip__trigger) .el-tag {
+  max-width: 100% !important;
+  width: 100%;
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item.el-tooltip__trigger {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: none;
+  position: static;
+  display: inline-flex;
+  align-items: center;
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item.el-tooltip__trigger .el-tag {
+  width: auto !important;
+  max-width: none !important;
 }

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

@@ -488,6 +488,24 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-select__wrapper.is-filterable {
   cursor: text;
+  overflow: hidden;
+}
+.el-select__wrapper.is-filterable .el-select__selection {
+  overflow: hidden;
+}
+.el-select__wrapper.is-filterable .el-select__input-wrapper {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.el-select__wrapper.is-filterable .el-select__input {
+  min-width: 0 !important;
+  width: 100% !important;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .el-select__wrapper.is-focused {
@@ -589,17 +607,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   flex-wrap: wrap;
   user-select: none;
   align-items: center;
-  /* Sonradan ekledim truncate etmek için */
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: min-content;
-  max-width: calc(100% - 120px);
+  flex-shrink: 1;
 }
 .el-select__selected-item.el-tooltip__trigger {
-  max-width: min-content;
-}
-.el-select__selected-item {
-  /* buraya kadar ekledim truncate etmek için */
+  flex-shrink: 0;
 }
 .el-select__selected-item .el-tag.el-tag--info {
   --el-tag-bg-color: var(--el-color-primary-light-1);
@@ -607,12 +618,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-tag-hover-color: var(--el-color-primary-light-5);
   --el-tag-text-color: var(--el-color-primary-light-5);
 }
-.el-select__selected-item:has(+ .el-tooltip__trigger) {
-  max-width: calc(100% - 160px);
-}
-.el-select__selected-item:has(~ .el-select__input-wrapper.is-hidden) {
-  max-width: none;
-}
 
 .el-select__tags-text {
   display: block;
@@ -628,11 +633,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--el-input-text-color, var(--el-text-color-regular));
-  min-width: 100%;
+  min-width: 0;
 }
 .el-select__placeholder.is-transparent {
   user-select: none;
@@ -675,6 +681,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 .el-select__input-wrapper.is-hidden {
   position: absolute;
   opacity: 0;
+  display: none;
 }
 
 .el-select__input {
@@ -824,4 +831,34 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 
 .el-select.wrap .el-select__selection {
   flex-wrap: wrap;
+}
+
+.el-form-items .el-select .el-select__placeholder {
+  min-width: 0;
+  max-width: 100%;
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item:not(.el-tooltip__trigger) {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item:not(.el-tooltip__trigger):has(+ .el-select__selected-item.el-tooltip__trigger) {
+  max-width: calc(100% - 3rem);
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item:not(.el-tooltip__trigger) .el-tag {
+  max-width: 100% !important;
+  width: 100%;
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item.el-tooltip__trigger {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: none;
+  position: static;
+  display: inline-flex;
+  align-items: center;
+}
+.el-form-items .el-select .el-select__selection > .el-select__selected-item.el-tooltip__trigger .el-tag {
+  width: auto !important;
+  max-width: none !important;
 }

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

@@ -53,6 +53,27 @@
 
     @include when(filterable) {
       cursor: text;
+      overflow: hidden;
+
+      .#{$namespace}-select__selection {
+        overflow: hidden;
+      }
+
+      .#{$namespace}-select__input-wrapper {
+        flex: 1 1 0;
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
+      }
+
+      .#{$namespace}-select__input {
+        min-width: 0 !important;
+        width: 100% !important;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
 
     @include when(focused) {
@@ -176,18 +197,11 @@
     flex-wrap: wrap;
     user-select: none;
     align-items: center;
+    flex-shrink: 1;
 
-    /* Sonradan ekledim truncate etmek için */
-    white-space: nowrap;
-    // overflow: hidden;
-    text-overflow: ellipsis;
-    width: min-content;
-    max-width: calc(100% - 120px);
-
-    &.el-tooltip__trigger {
-      max-width: min-content;
+    &.#{$namespace}-tooltip__trigger {
+      flex-shrink: 0;
     }
-    /* buraya kadar ekledim truncate etmek için */
 
     .el-tag.#{$namespace}-tag--info {
       @include css-var-from-global(('tag', 'bg-color'), ('color', 'primary', 'light-1'));
@@ -195,14 +209,6 @@
       @include css-var-from-global(('tag', 'hover-color'), ('color', 'primary', 'light-5'));
       @include css-var-from-global(('tag', 'text-color'), ('color', 'primary', 'light-5'));
     }
-
-    &:has(+ .el-tooltip__trigger) {
-      max-width: calc(100% - 160px);
-    }
-
-    &:has(~ .el-select__input-wrapper.is-hidden) {
-      max-width: none;
-    }
   }
 
   @include e(tags-text) {
@@ -217,9 +223,10 @@
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
+    max-width: 100%;
     @include utils-ellipsis;
     color: var(#{getCssVarName('input-text-color')}, map.get($input, 'text-color'));
-    min-width: 100%;
+    min-width: 0;
 
     @include when(transparent) {
       user-select: none;
@@ -246,6 +253,7 @@
       // Out of the document flow
       position: absolute;
       opacity: 0;
+      display: none;
     }
   }
 
@@ -321,3 +329,43 @@
     }
   }
 }
+
+// el-form-items value selects (rules port-input, ztna source, etc.) — collapse-tags layout
+.el-form-items .#{$namespace}-select {
+  .#{$namespace}-select__placeholder {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .#{$namespace}-select__selection {
+    & > .#{$namespace}-select__selected-item:not(.#{$namespace}-tooltip__trigger) {
+      flex: 0 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      max-width: 100%;
+
+      &:has(+ .#{$namespace}-select__selected-item.#{$namespace}-tooltip__trigger) {
+        max-width: calc(100% - 3rem);
+      }
+
+      .#{$namespace}-tag {
+        max-width: 100% !important;
+        width: 100%;
+      }
+    }
+
+    & > .#{$namespace}-select__selected-item.#{$namespace}-tooltip__trigger {
+      flex: 0 0 auto;
+      width: auto;
+      max-width: none;
+      position: static;
+      display: inline-flex;
+      align-items: center;
+
+      .#{$namespace}-tag {
+        width: auto !important;
+        max-width: none !important;
+      }
+    }
+  }
+}

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

@@ -310,6 +310,9 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   background-color: var(--el-tag-bg-color);
   border-color: var(--el-tag-border-color);
   color: var(--el-tag-text-color);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   vertical-align: middle;
   height: 16px;
   padding: 0 7px;
@@ -321,9 +324,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   box-sizing: border-box;
   white-space: nowrap;
   transition: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   --el-icon-size: 14px;
   --el-tag-bg-color: var(--el-color-primary-light-1);
   --el-tag-border-color: var(--el-color-primary-light-4);
@@ -635,6 +635,13 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-tag-bg-color: var(--el-color-white);
 }
 
+.el-tag.el-tag--warning {
+  --el-tag-bg-color: var(--el-color-warning-light-1);
+  --el-tag-border-color: var(--el-color-warning-light-3);
+  --el-tag-text-color: var(--el-color-warning-light-6);
+  --el-tag-hover-color: var(--el-color-warning-light-6);
+}
+
 .el-tag.rounded {
   width: 16px;
   height: 16px;

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

@@ -52,9 +52,9 @@ $tag-icon-span-gap: map.merge(
   border-color: getCssVar('tag-border-color');
   color: getCssVar('tag-text-color');
 
-  // display: inline-flex;
-  // justify-content: center;
-  // align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   vertical-align: middle;
   height: map.get($tag-height, 'default');
   padding: 0 map.get($tag-padding, 'default') - $border-width;
@@ -68,11 +68,6 @@ $tag-icon-span-gap: map.merge(
   white-space: nowrap;
   transition: none;
 
-  // truncate
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
   @include set-css-var-value('icon-size', 14px);
   @include genTheme('light-1', 'light-4', '');
 
@@ -175,6 +170,14 @@ $tag-icon-span-gap: map.merge(
   --el-tag-bg-color: var(--el-color-white);
 }
 
+// [TC-19214] - Changed the colors of the warning type tags only to improve readability.
+.el-tag.el-tag--warning {
+  --el-tag-bg-color: var(--el-color-warning-light-1);
+  --el-tag-border-color: var(--el-color-warning-light-3);
+  --el-tag-text-color: var(--el-color-warning-light-6);
+  --el-tag-hover-color: var(--el-color-warning-light-6);
+}
+
 .el-tag {
   &.rounded {
     width: 16px;

package/package.json

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