@timus-networks/theme 2.4.269 → 2.4.271

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.4.268",
+  "version": "2.4.270",
   "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.268";
+const version = "2.4.270";
 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

@@ -13741,9 +13741,9 @@ heights > $common-component-size
   align-items: center;
   /* Sonradan ekledim truncate etmek için */
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
   width: min-content;
+  max-width: calc(100% - 120px);
 }
 .el-select__selected-item.el-tooltip__trigger {
   min-width: min-content;
@@ -13776,6 +13776,7 @@ heights > $common-component-size
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--el-input-text-color, var(--el-text-color-regular));
+  min-width: 100%;
 }
 .el-select__placeholder.is-transparent {
   user-select: none;
@@ -13808,12 +13809,12 @@ heights > $common-component-size
 }
 
 .el-select__input-wrapper {
-  max-width: 80px;
-  width: 100%;
+  flex-grow: 1;
+  width: auto;
 }
 .el-select__input-wrapper input {
   min-width: 2px !important;
-  width: calc(100% - 3px);
+  width: calc(100% - 3px) !important;
 }
 .el-select__input-wrapper.is-hidden {
   position: absolute;

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

@@ -80,11 +80,11 @@
     <el-card>
       <template #header> Basic multiple select </template>
       <div class="flex flex-col gap-3 items-start">
-        <p>
+        <p class="max-w-lg">
           Multiple select uses tags to display selected options. Set <el-text tag="mark">multiple</el-text> attribute for el-select to enable multiple mode. In this case, the value
           of v-model will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using
           <el-text tag="mark">collapse-tags</el-text> attribute. You can check them when mouse hover collapse text by using
-          <el-text tag="mark">collapse-tags-tooltip</el-text> attribute.
+          <el-text tag="mark">collapse-tags-tooltip</el-text> attribute. Make sure to add <el-text tag="mark">class="wrap"</el-text> to the el-select to enable wrap mode.
         </p>
         <div v-for="(size, index) of sizes" :key="index + 'multiple'" class="flex flex-col items-start justify-start mb-4">
           <h3>{{ capitalize(size) }}</h3>
@@ -95,6 +95,18 @@
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </div>
+            <div class="flex gap-4 flex-col">
+              <p>Wrap mode</p>
+              <el-select v-model="multiple.one" multiple placeholder="Select" style="width: 184px" :size="size" class="wrap">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+            <div class="flex gap-4 flex-col">
+              <p>No wrap mode</p>
+              <el-select :key="multiple.one.length" v-model="multiple.one" filterable multiple placeholder="Select" :size="size">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
             <div class="flex gap-4 flex-col">
               <p>use collapse-tags</p>
               <el-select v-model="multiple.two" multiple collapse-tags placeholder="Select" style="width: 184px" :size="size">
@@ -402,6 +414,7 @@ export default defineComponent({
       model: [],
       multiple: { one: [], two: [], three: [], four: [] },
       options: [
+        { value: "0", label: "All" },
         { value: "Option 1", label: "Option 1" },
         { value: "Option 2", label: "Option 2", disabled: true },
         { value: "Option 3", label: "Option 3 uzun" },

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

@@ -12849,9 +12849,9 @@ h6,
   align-items: center;
   /* Sonradan ekledim truncate etmek için */
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
   width: min-content;
+  max-width: calc(100% - 120px);
 }
 .el-select__selected-item.el-tooltip__trigger {
   min-width: min-content;
@@ -12884,6 +12884,7 @@ h6,
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--el-input-text-color, var(--el-text-color-regular));
+  min-width: 100%;
 }
 .el-select__placeholder.is-transparent {
   user-select: none;
@@ -12916,12 +12917,12 @@ h6,
 }
 
 .el-select__input-wrapper {
-  max-width: 80px;
-  width: 100%;
+  flex-grow: 1;
+  width: auto;
 }
 .el-select__input-wrapper input {
   min-width: 2px !important;
-  width: calc(100% - 3px);
+  width: calc(100% - 3px) !important;
 }
 .el-select__input-wrapper.is-hidden {
   position: absolute;

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

@@ -591,9 +591,9 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   align-items: center;
   /* Sonradan ekledim truncate etmek için */
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
   width: min-content;
+  max-width: calc(100% - 120px);
 }
 .el-select__selected-item.el-tooltip__trigger {
   min-width: min-content;
@@ -626,6 +626,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--el-input-text-color, var(--el-text-color-regular));
+  min-width: 100%;
 }
 .el-select__placeholder.is-transparent {
   user-select: none;
@@ -658,12 +659,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 
 .el-select__input-wrapper {
-  max-width: 80px;
-  width: 100%;
+  flex-grow: 1;
+  width: auto;
 }
 .el-select__input-wrapper input {
   min-width: 2px !important;
-  width: calc(100% - 3px);
+  width: calc(100% - 3px) !important;
 }
 .el-select__input-wrapper.is-hidden {
   position: absolute;

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

@@ -591,9 +591,9 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   align-items: center;
   /* Sonradan ekledim truncate etmek için */
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
   width: min-content;
+  max-width: calc(100% - 120px);
 }
 .el-select__selected-item.el-tooltip__trigger {
   min-width: min-content;
@@ -626,6 +626,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--el-input-text-color, var(--el-text-color-regular));
+  min-width: 100%;
 }
 .el-select__placeholder.is-transparent {
   user-select: none;
@@ -658,12 +659,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 
 .el-select__input-wrapper {
-  max-width: 80px;
-  width: 100%;
+  flex-grow: 1;
+  width: auto;
 }
 .el-select__input-wrapper input {
   min-width: 2px !important;
-  width: calc(100% - 3px);
+  width: calc(100% - 3px) !important;
 }
 .el-select__input-wrapper.is-hidden {
   position: absolute;

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

@@ -179,9 +179,10 @@
 
     /* Sonradan ekledim truncate etmek için */
     white-space: nowrap;
-    overflow: hidden;
+    // overflow: hidden;
     text-overflow: ellipsis;
     width: min-content;
+    max-width: calc(100% - 120px);
 
     &.el-tooltip__trigger {
       min-width: min-content;
@@ -210,6 +211,7 @@
     width: 100%;
     @include utils-ellipsis;
     color: var(#{getCssVarName('input-text-color')}, map.get($input, 'text-color'));
+    min-width: 100%;
 
     @include when(transparent) {
       user-select: none;
@@ -223,15 +225,20 @@
 
   @include e(input-wrapper) {
     // bunu sonradan ekledim truncate etmek için max-width: 100% yerine
-    max-width: 80px;
     // max-width: 100%;
-    width: 100%;
+    //max-width: 80px;
+    //width: 100%;
+
+    // width: 100%;
+    flex-grow: 1;
+    width: auto;
+    // min-width: 120px;
 
     input {
       //max-width: 2px !important;
       // field-sizing: content;
       min-width: 2px !important;
-      width: calc(100% - 3px);
+      width: calc(100% - 3px) !important;
     }
 
     @include when(hidden) {

package/package.json

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