@timus-networks/theme 2.4.33 → 2.4.37

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.4.33",
+  "version": "2.4.37",
   "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.33";
+const version = "2.4.37";
 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.form.vue

@@ -12,6 +12,8 @@
         </p>
         <div class="flex gap-2">
           <el-form :model="form" label-width="auto" style="max-width: 600px" :label-position="labelPosition" require-asterisk-position="right">
+            <p class="el-form-title">Form Title <el-text tag="mark">p.el-form-title</el-text></p>
+
             <el-form-item label="Form Align" :required="true" class="grow">
               <el-radio-group v-model="labelPosition" aria-label="label position">
                 <el-radio-button value="left">Left</el-radio-button>
@@ -22,6 +24,8 @@
             <el-form-item label="Activity name" class="grow">
               <el-input v-model="form.name" />
             </el-form-item>
+
+            <p class="el-form-title">Technical Information Title <el-text tag="mark">p.el-form-title</el-text></p>
             <el-form-item label="Activity form">
               <el-input v-model="form.desc" type="textarea" />
             </el-form-item>

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

@@ -21,7 +21,7 @@
           <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 />
-          <el-table-column min-width="37" fixed="right">
+          <el-table-column min-width="37" width="37" fixed="right">
             <el-dropdown>
               <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
               <template #dropdown>
@@ -41,6 +41,41 @@
         </code>
       </template>
     </el-card>
+
+    <el-card>
+      <template #header> Without Border </template>
+      <div class="flex flex-col gap-7.5 items-start">
+        <p>Just add <el-text tag="mark">.no-border</el-text> to table class attribute.</p>
+        <el-table :data="tableData" style="width: 100%" flexible height="300" class="no-border">
+          <el-table-column type="selection" width="16" />
+          <el-table-column label="Date" width="120" show-overflow-tooltip>
+            <template #default="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
+          <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 />
+          <el-table-column min-width="37" 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>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.borderless" />
+        </code>
+      </template>
+    </el-card>
   </div>
 </template>
 <script lang="ts" setup>
@@ -121,5 +156,12 @@
         <el-table-column prop="address" label="Address" />
       </el-table>
     `,
+    borderless: `
+      <el-table :data="tableData" class="no-border">
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    `,
   });
 </script>

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

@@ -318,6 +318,19 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   display: block;
 }
 
+.el-form .el-form-title {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  margin-top: 32px;
+  border-bottom: 1px solid var(--el-color-neutral-light-3);
+}
+.el-form .el-form-title:first-child {
+  margin-top: 0;
+}
+
 .el-form-item {
   display: flex;
   --font-size: 14px;

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

@@ -60,7 +60,6 @@ $form-item-label-top-margin-bottom: map.merge(
 
 @include b(form) {
   @include set-component-css-var('form', $form);
-
   @include m(inline) {
     .#{$namespace}-form-item {
       display: inline-flex;
@@ -77,6 +76,20 @@ $form-item-label-top-margin-bottom: map.merge(
       }
     }
   }
+
+  .el-form-title {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 500;
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    margin-top: 32px;
+    border-bottom: 1px solid var(--el-color-neutral-light-3);
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
 }
 
 @include b(form-item) {

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

@@ -8730,6 +8730,19 @@ heights > $common-component-size
   display: block;
 }
 
+.el-form .el-form-title {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  margin-top: 32px;
+  border-bottom: 1px solid var(--el-color-neutral-light-3);
+}
+.el-form .el-form-title:first-child {
+  margin-top: 0;
+}
+
 .el-form-item {
   display: flex;
   --font-size: 14px;
@@ -14262,6 +14275,13 @@ heights > $common-component-size
 .el-table:not(.el-table--border) > .el-table__inner-wrapper::after {
   content: none;
 }
+.el-table.no-border {
+  transform: translateX(0px);
+  width: 100% !important;
+}
+.el-table.no-border::before {
+  box-shadow: none;
+}
 
 .el-table-v2 {
   --el-table-border-color: var(--el-color-neutral-light-3);

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

@@ -913,4 +913,11 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-table:not(.el-table--border) > .el-table__inner-wrapper::after {
   content: none;
+}
+.el-table.no-border {
+  transform: translateX(0px);
+  width: 100% !important;
+}
+.el-table.no-border::before {
+  box-shadow: none;
 }

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

@@ -754,4 +754,12 @@
       }
     }
   }
+
+  &.no-border {
+    transform: translateX(0px);
+    width: 100% !important;
+    &::before {
+      box-shadow: none;
+    }
+  }
 }

package/package.json

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