@timus-networks/theme 2.4.8 → 2.4.10

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.4.8",
+  "version": "2.4.10",
   "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.8";
+const version = "2.4.10";
 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.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/plugins/disable-warnings-plugin.js

@@ -5,14 +5,9 @@ export default defineNuxtPlugin((nuxtApp) => {
     "Invalid prop: custom validator"
     // Add other warnings to ignore here
   ];
-  if (process.env.NODE_ENV === "development") {
-    const originalWarn = console.warn;
-    console.warn = (...args) => {
-      if (!ignoredWarnings.some((warning) => args[0]?.includes(warning))) {
-        console.group("Vue Warning");
-        originalWarn(...args);
-        console.groupEnd();
-      }
-    };
-  }
+  nuxtApp.vueApp.config.warnHandler = (msg, instance, trace) => {
+    if (!ignoredWarnings.some((warning) => msg.includes(warning))) {
+      console.warn(`[Vue warn]: ${msg}${trace}`);
+    }
+  };
 });

package/dist/runtime/plugins/disable-warnings-plugin.mjs

@@ -5,14 +5,9 @@ export default defineNuxtPlugin((nuxtApp) => {
     "Invalid prop: custom validator"
     // Add other warnings to ignore here
   ];
-  if (process.env.NODE_ENV === "development") {
-    const originalWarn = console.warn;
-    console.warn = (...args) => {
-      if (!ignoredWarnings.some((warning) => args[0]?.includes(warning))) {
-        console.group("Vue Warning");
-        originalWarn(...args);
-        console.groupEnd();
-      }
-    };
-  }
+  nuxtApp.vueApp.config.warnHandler = (msg, instance, trace) => {
+    if (!ignoredWarnings.some((warning) => msg.includes(warning))) {
+      console.warn(`[Vue warn]: ${msg}${trace}`);
+    }
+  };
 });

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

@@ -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;
@@ -11606,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);

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

@@ -1206,7 +1206,9 @@ select {
   white-space: nowrap;
 }
 
-html, body, #main {
+html,
+body,
+#main {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -1218,51 +1220,31 @@ body {
   font-family: var(--font-family);
 }
 
-[v-cloak] {
-  border: 1px solid red;
-  display: none;
-}
-
-/**
-
-.layout-enter-active,
-.layout-leave-active {
-  transition: opacity 0.4s;
-  background-color: red;
-  opacity: 0;
+.page-footer {
+  align-items: center;
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  padding: 8px 0;
 }
-.layout-enter-from,
-.layout-leave-to {
-  transition: opacity 0.4s;
-  background-color: blue;
-  opacity: 0;
+.page-footer .el-button {
+  flex-basis: 100%;
+  justify-content: center;
 }
 
-*/
-/*
-bu okey
 .page-enter-active,
-.page-leave-active {
-  transition: opacity 2s;
-  background-color: red;
-  opacity: 0;
-}
-
-.page-enter-to,
-.page-leave-from {
-  transition: opacity 2s;
-  transition-delay: 2s;
-  opacity: 1;
-  background-color: blue;
-}
-*/
-.page-enter-active, .page-leave-active, .layout-enter-active, .layout-leave-active {
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
   opacity: 1;
   transition: opacity 0.4s;
   transition-delay: 0.4s;
 }
 
-.page-enter-from, .page-leave-to, .layout-enter-from, .layout-leave-to {
+.page-enter-from,
+.page-leave-to,
+.layout-enter-from,
+.layout-leave-to {
   opacity: 0;
   transition: opacity 0.4s;
 }

package/dist/runtime/public/scss/theme.scss

@@ -8,7 +8,9 @@
 @import 'logo.scss';
 @import 'selectbox.scss';
 // @import 'layers.scss';
-html, body, #main {
+html,
+body,
+#main {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -20,53 +22,32 @@ body {
   font-family: var(--font-family);
 }
 
-[v-cloak] {
-  border: 1px solid red;
-  display: none;
-}
-
-/**
+.page-footer {
+  align-items: center;
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  padding: 8px 0;
 
-.layout-enter-active,
-.layout-leave-active {
-  transition: opacity 0.4s;
-  background-color: red;
-  opacity: 0;
-}
-.layout-enter-from,
-.layout-leave-to {
-  transition: opacity 0.4s;
-  background-color: blue;
-  opacity: 0;
+  .el-button {
+    flex-basis: 100%;
+    justify-content: center;
+  }
 }
 
-*/
-
-/*
-bu okey
 .page-enter-active,
-.page-leave-active {
-  transition: opacity 2s;
-  background-color: red;
-  opacity: 0;
-}
-
-.page-enter-to,
-.page-leave-from {
-  transition: opacity 2s;
-  transition-delay: 2s;
-  opacity: 1;
-  background-color: blue;
-}
-*/
-
-.page-enter-active, .page-leave-active, .layout-enter-active, .layout-leave-active {
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
   opacity: 1;
   transition: opacity 0.4s;
   transition-delay: 0.4s;
 }
 
-.page-enter-from, .page-leave-to, .layout-enter-from, .layout-leave-to {
+.page-enter-from,
+.page-leave-to,
+.layout-enter-from,
+.layout-leave-to {
   opacity: 0;
   transition: opacity 0.4s;
 }

package/package.json

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