@timus-networks/theme 2.4.10 → 2.4.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
3
  "configKey": "themeOptions",
4
- "version": "2.4.10",
4
+ "version": "2.4.13",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "0.8.4",
7
7
  "unbuild": "2.0.0"
package/dist/module.mjs CHANGED
@@ -12,7 +12,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
12
12
  const __dirname = __cjs_path__.dirname(__filename);
13
13
  const require = __cjs_mod__.createRequire(import.meta.url);
14
14
  const name = "@timus-networks/theme";
15
- const version = "2.4.10";
15
+ const version = "2.4.13";
16
16
  const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
17
17
  const type = "module";
18
18
  const exports = {
@@ -5,9 +5,32 @@ export default defineNuxtPlugin((nuxtApp) => {
5
5
  "Invalid prop: custom validator"
6
6
  // Add other warnings to ignore here
7
7
  ];
8
- nuxtApp.vueApp.config.warnHandler = (msg, instance, trace) => {
9
- if (!ignoredWarnings.some((warning) => msg.includes(warning))) {
10
- console.warn(`[Vue warn]: ${msg}${trace}`);
11
- }
12
- };
8
+ if (process.env.NODE_ENV === "development") {
9
+ const originalWarn = console.warn;
10
+ const safeStringify = (obj, maxDepth = 3) => {
11
+ const seen = /* @__PURE__ */ new WeakSet();
12
+ return JSON.stringify(obj, (key, value) => {
13
+ if (typeof value === "object" && value !== null) {
14
+ if (seen.has(value)) {
15
+ return "[Circular]";
16
+ }
17
+ seen.add(value);
18
+ if (maxDepth < 1) {
19
+ return "[Object]";
20
+ }
21
+ return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, safeStringify(v, maxDepth - 1)]));
22
+ }
23
+ return value;
24
+ });
25
+ };
26
+ console.warn = (...args) => {
27
+ const stringArgs = args.map((arg) => typeof arg === "string" ? arg : arg instanceof Error ? arg.toString() : safeStringify(arg, 2));
28
+ const warningMessage = stringArgs.join(" ");
29
+ if (!ignoredWarnings.some((warning) => warningMessage.includes(warning))) {
30
+ console.group("Vue Warning");
31
+ originalWarn(...args);
32
+ console.groupEnd();
33
+ }
34
+ };
35
+ }
13
36
  });
@@ -5,9 +5,32 @@ export default defineNuxtPlugin((nuxtApp) => {
5
5
  "Invalid prop: custom validator"
6
6
  // Add other warnings to ignore here
7
7
  ];
8
- nuxtApp.vueApp.config.warnHandler = (msg, instance, trace) => {
9
- if (!ignoredWarnings.some((warning) => msg.includes(warning))) {
10
- console.warn(`[Vue warn]: ${msg}${trace}`);
11
- }
12
- };
8
+ if (process.env.NODE_ENV === "development") {
9
+ const originalWarn = console.warn;
10
+ const safeStringify = (obj, maxDepth = 3) => {
11
+ const seen = /* @__PURE__ */ new WeakSet();
12
+ return JSON.stringify(obj, (key, value) => {
13
+ if (typeof value === "object" && value !== null) {
14
+ if (seen.has(value)) {
15
+ return "[Circular]";
16
+ }
17
+ seen.add(value);
18
+ if (maxDepth < 1) {
19
+ return "[Object]";
20
+ }
21
+ return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, safeStringify(v, maxDepth - 1)]));
22
+ }
23
+ return value;
24
+ });
25
+ };
26
+ console.warn = (...args) => {
27
+ const stringArgs = args.map((arg) => typeof arg === "string" ? arg : arg instanceof Error ? arg.toString() : safeStringify(arg, 2));
28
+ const warningMessage = stringArgs.join(" ");
29
+ if (!ignoredWarnings.some((warning) => warningMessage.includes(warning))) {
30
+ console.group("Vue Warning");
31
+ originalWarn(...args);
32
+ console.groupEnd();
33
+ }
34
+ };
35
+ }
13
36
  });
@@ -1,3 +1,6 @@
1
+ @use 'colors' as *;
2
+ @use 'icons' as *;
3
+
1
4
  $btn-config: (
2
5
  'xs': (
3
6
  min-width: 24px,
@@ -90,7 +93,8 @@ $btn-active-bg: 700;
90
93
  }
91
94
  }
92
95
 
93
- &-outline, &-ghost {
96
+ &-outline,
97
+ &-ghost {
94
98
  --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
95
99
  --button-border-color: var(--#{$name}-#{500});
96
100
  --button-hover-color: var(--button-hover-font-color);
@@ -1,3 +1,5 @@
1
+ @use 'icons' as *;
2
+
1
3
  $input-config: (
2
4
  'xs': (
3
5
  min-height: 24px,
@@ -2,7 +2,7 @@
2
2
  @use 'sass:string';
3
3
 
4
4
  @function rgb2hex($color) {
5
- @return unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
5
+ @return string.unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
6
6
  }
7
7
 
8
8
  // rgba color above solid color
@@ -432,6 +432,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
432
432
  position: relative;
433
433
  font-size: var(--font-size);
434
434
  min-width: 0;
435
+ align-items: flex-start;
435
436
  }
436
437
  .el-form-item__content .el-input-group {
437
438
  vertical-align: top;
@@ -160,6 +160,7 @@ $form-item-label-top-margin-bottom: map.merge(
160
160
  position: relative;
161
161
  font-size: var(--font-size);
162
162
  min-width: 0;
163
+ align-items: flex-start;
163
164
 
164
165
  .#{$namespace}-input-group {
165
166
  vertical-align: top;
@@ -8844,6 +8844,7 @@ heights > $common-component-size
8844
8844
  position: relative;
8845
8845
  font-size: var(--font-size);
8846
8846
  min-width: 0;
8847
+ align-items: flex-start;
8847
8848
  }
8848
8849
  .el-form-item__content .el-input-group {
8849
8850
  vertical-align: top;
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use 'sass:color';
2
3
 
3
4
  @use 'config';
4
5
  @use 'function' as *;
@@ -44,7 +45,12 @@
44
45
 
45
46
  @mixin set-css-color-rgb($type) {
46
47
  $color: map.get($colors, $type, 'base');
47
- @include set-css-var-value(('color', $type, 'rgb'), #{red($color), green($color), blue($color)});
48
+ @include set-css-var-value(
49
+ ('color', $type, 'rgb'),
50
+ #{color.channel($color, 'red', $space: rgb),
51
+ color.channel($color, 'green', $space: rgb),
52
+ color.channel($color, 'blue', $space: rgb)}
53
+ );
48
54
  }
49
55
 
50
56
  // generate css var from existing css var
@@ -1,16 +1,18 @@
1
1
  @use 'config';
2
+ @use 'sass:meta';
3
+ @use 'sass:string';
2
4
 
3
5
  // BEM support Func
4
6
  @function selectorToString($selector) {
5
- $selector: inspect($selector);
6
- $selector: str-slice($selector, 2, -2);
7
+ $selector: meta.inspect($selector);
8
+ $selector: string.slice($selector, 2, -2);
7
9
  @return $selector;
8
10
  }
9
11
 
10
12
  @function containsModifier($selector) {
11
13
  $selector: selectorToString($selector);
12
14
 
13
- @if str-index($selector, config.$modifier-separator) {
15
+ @if string.index($selector, config.$modifier-separator) {
14
16
  @return true;
15
17
  } @else {
16
18
  @return false;
@@ -20,7 +22,7 @@
20
22
  @function containWhenFlag($selector) {
21
23
  $selector: selectorToString($selector);
22
24
 
23
- @if str-index($selector, '.' + config.$state-prefix) {
25
+ @if string.index($selector, '.' + config.$state-prefix) {
24
26
  @return true;
25
27
  } @else {
26
28
  @return false;
@@ -30,7 +32,7 @@
30
32
  @function containPseudoClass($selector) {
31
33
  $selector: selectorToString($selector);
32
34
 
33
- @if str-index($selector, ':') {
35
+ @if string.index($selector, ':') {
34
36
  @return true;
35
37
  } @else {
36
38
  @return false;
@@ -1,3 +1,5 @@
1
+ @use 'sass:map';
2
+ @use 'sass:string';
1
3
  @use 'function' as *;
2
4
  @use '../common/var' as *;
3
5
  // forward mixins
@@ -9,8 +11,8 @@
9
11
  // Break-points
10
12
  @mixin res($key, $map: $breakpoints) {
11
13
  // loop breakpoint Map, return if present
12
- @if map-has-key($map, $key) {
13
- @media only screen and #{unquote(map-get($map, $key))} {
14
+ @if map.has-key($map, $key) {
15
+ @media only screen and #{string.unquote(map.get($map, $key))} {
14
16
  @content;
15
17
  }
16
18
  } @else {
@@ -301,6 +301,107 @@
301
301
  :root {
302
302
  --el-color-warning-light-9: #3b3212;
303
303
  }
304
+ [class^=icon],
305
+ [class*=" icon"] {
306
+ align-items: center;
307
+ display: flex;
308
+ gap: 4px;
309
+ position: relative;
310
+ }
311
+ [class^=icon-xxs]::before,
312
+ [class*=" icon-xxs"]::before, [class^=icon-xxs]::after,
313
+ [class*=" icon-xxs"]::after {
314
+ --icon-xxs-min-width: 0.75rem;
315
+ min-width: var(--icon-xxs-min-width);
316
+ --icon-xxs-min-height: 0.75rem;
317
+ min-height: var(--icon-xxs-min-height);
318
+ --icon-xxs-font-size: 0.75rem;
319
+ font-size: var(--icon-xxs-font-size);
320
+ }
321
+ .form-control-xs::before, .btn-xs::before, [class^=icon-xs]::before,
322
+ [class*=" icon-xs"]::before, .form-control-xs::after, .btn-xs::after, [class^=icon-xs]::after,
323
+ [class*=" icon-xs"]::after {
324
+ --icon-xs-min-width: 1rem;
325
+ min-width: var(--icon-xs-min-width);
326
+ --icon-xs-min-height: 1rem;
327
+ min-height: var(--icon-xs-min-height);
328
+ --icon-xs-font-size: 1rem;
329
+ font-size: var(--icon-xs-font-size);
330
+ }
331
+ .form-control-sm::before, .btn-sm::before, [class^=icon-sm]::before,
332
+ [class*=" icon-sm"]::before, .form-control-sm::after, .btn-sm::after, [class^=icon-sm]::after,
333
+ [class*=" icon-sm"]::after {
334
+ --icon-sm-min-width: 1.25rem;
335
+ min-width: var(--icon-sm-min-width);
336
+ --icon-sm-min-height: 1.25rem;
337
+ min-height: var(--icon-sm-min-height);
338
+ --icon-sm-font-size: 1.25rem;
339
+ font-size: var(--icon-sm-font-size);
340
+ }
341
+ .form-control-md::before, .btn-md::before, [class^=icon-md]::before,
342
+ [class*=" icon-md"]::before, .form-control-md::after, .btn-md::after, [class^=icon-md]::after,
343
+ [class*=" icon-md"]::after {
344
+ --icon-md-min-width: 1.25rem;
345
+ min-width: var(--icon-md-min-width);
346
+ --icon-md-min-height: 1.25rem;
347
+ min-height: var(--icon-md-min-height);
348
+ --icon-md-font-size: 1.25rem;
349
+ font-size: var(--icon-md-font-size);
350
+ }
351
+ .form-control-lg::before, .btn-lg::before, [class^=icon-lg]::before,
352
+ [class*=" icon-lg"]::before, .form-control-lg::after, .btn-lg::after, [class^=icon-lg]::after,
353
+ [class*=" icon-lg"]::after {
354
+ --icon-lg-min-width: 1.5rem;
355
+ min-width: var(--icon-lg-min-width);
356
+ --icon-lg-min-height: 1.5rem;
357
+ min-height: var(--icon-lg-min-height);
358
+ --icon-lg-font-size: 1.5rem;
359
+ font-size: var(--icon-lg-font-size);
360
+ }
361
+ .form-control-xl::before, .btn-xl::before, [class^=icon-xl]::before,
362
+ [class*=" icon-xl"]::before, .form-control-xl::after, .btn-xl::after, [class^=icon-xl]::after,
363
+ [class*=" icon-xl"]::after {
364
+ --icon-xl-min-width: 1.75rem;
365
+ min-width: var(--icon-xl-min-width);
366
+ --icon-xl-min-height: 1.75rem;
367
+ min-height: var(--icon-xl-min-height);
368
+ --icon-xl-font-size: 1.75rem;
369
+ font-size: var(--icon-xl-font-size);
370
+ }
371
+ [class^=icon-xxl]::before,
372
+ [class*=" icon-xxl"]::before, [class^=icon-xxl]::after,
373
+ [class*=" icon-xxl"]::after {
374
+ --icon-xxl-min-width: 2em;
375
+ min-width: var(--icon-xxl-min-width);
376
+ --icon-xxl-min-height: 2rem;
377
+ min-height: var(--icon-xxl-min-height);
378
+ --icon-xxl-font-size: 2rem;
379
+ font-size: var(--icon-xxl-font-size);
380
+ }
381
+ [class^=icon-left]::before,
382
+ [class*=" icon-left"]::before {
383
+ content: "";
384
+ }
385
+ [class^=icon-left]::after,
386
+ [class*=" icon-left"]::after {
387
+ content: none;
388
+ }
389
+ [class^=icon-right]::before,
390
+ [class*=" icon-right"]::before {
391
+ content: none;
392
+ }
393
+ [class^=icon]:empty,
394
+ [class*=" icon"]:empty {
395
+ justify-content: center;
396
+ margin: 0;
397
+ padding: 0;
398
+ }
399
+ [class^=icon]:empty::before, [class^=icon]:empty::after,
400
+ [class*=" icon"]:empty::before,
401
+ [class*=" icon"]:empty::after {
402
+ margin: 0;
403
+ }
404
+
304
405
  .btn {
305
406
  text-overflow: ellipsis;
306
407
  white-space: nowrap;
@@ -984,107 +1085,6 @@ h6,
984
1085
  line-height: var(---p-tiny-line-height);
985
1086
  }
986
1087
 
987
- [class^=icon],
988
- [class*=" icon"] {
989
- align-items: center;
990
- display: flex;
991
- gap: 4px;
992
- position: relative;
993
- }
994
- [class^=icon-xxs]::before,
995
- [class*=" icon-xxs"]::before, [class^=icon-xxs]::after,
996
- [class*=" icon-xxs"]::after {
997
- --icon-xxs-min-width: 0.75rem;
998
- min-width: var(--icon-xxs-min-width);
999
- --icon-xxs-min-height: 0.75rem;
1000
- min-height: var(--icon-xxs-min-height);
1001
- --icon-xxs-font-size: 0.75rem;
1002
- font-size: var(--icon-xxs-font-size);
1003
- }
1004
- .form-control-xs::before, [class^=icon-xs]::before,
1005
- [class*=" icon-xs"]::before, .btn-xs::before, .form-control-xs::after, [class^=icon-xs]::after,
1006
- [class*=" icon-xs"]::after, .btn-xs::after {
1007
- --icon-xs-min-width: 1rem;
1008
- min-width: var(--icon-xs-min-width);
1009
- --icon-xs-min-height: 1rem;
1010
- min-height: var(--icon-xs-min-height);
1011
- --icon-xs-font-size: 1rem;
1012
- font-size: var(--icon-xs-font-size);
1013
- }
1014
- .form-control-sm::before, [class^=icon-sm]::before,
1015
- [class*=" icon-sm"]::before, .btn-sm::before, .form-control-sm::after, [class^=icon-sm]::after,
1016
- [class*=" icon-sm"]::after, .btn-sm::after {
1017
- --icon-sm-min-width: 1.25rem;
1018
- min-width: var(--icon-sm-min-width);
1019
- --icon-sm-min-height: 1.25rem;
1020
- min-height: var(--icon-sm-min-height);
1021
- --icon-sm-font-size: 1.25rem;
1022
- font-size: var(--icon-sm-font-size);
1023
- }
1024
- .form-control-md::before, [class^=icon-md]::before,
1025
- [class*=" icon-md"]::before, .btn-md::before, .form-control-md::after, [class^=icon-md]::after,
1026
- [class*=" icon-md"]::after, .btn-md::after {
1027
- --icon-md-min-width: 1.25rem;
1028
- min-width: var(--icon-md-min-width);
1029
- --icon-md-min-height: 1.25rem;
1030
- min-height: var(--icon-md-min-height);
1031
- --icon-md-font-size: 1.25rem;
1032
- font-size: var(--icon-md-font-size);
1033
- }
1034
- .form-control-lg::before, [class^=icon-lg]::before,
1035
- [class*=" icon-lg"]::before, .btn-lg::before, .form-control-lg::after, [class^=icon-lg]::after,
1036
- [class*=" icon-lg"]::after, .btn-lg::after {
1037
- --icon-lg-min-width: 1.5rem;
1038
- min-width: var(--icon-lg-min-width);
1039
- --icon-lg-min-height: 1.5rem;
1040
- min-height: var(--icon-lg-min-height);
1041
- --icon-lg-font-size: 1.5rem;
1042
- font-size: var(--icon-lg-font-size);
1043
- }
1044
- .form-control-xl::before, [class^=icon-xl]::before,
1045
- [class*=" icon-xl"]::before, .btn-xl::before, .form-control-xl::after, [class^=icon-xl]::after,
1046
- [class*=" icon-xl"]::after, .btn-xl::after {
1047
- --icon-xl-min-width: 1.75rem;
1048
- min-width: var(--icon-xl-min-width);
1049
- --icon-xl-min-height: 1.75rem;
1050
- min-height: var(--icon-xl-min-height);
1051
- --icon-xl-font-size: 1.75rem;
1052
- font-size: var(--icon-xl-font-size);
1053
- }
1054
- [class^=icon-xxl]::before,
1055
- [class*=" icon-xxl"]::before, [class^=icon-xxl]::after,
1056
- [class*=" icon-xxl"]::after {
1057
- --icon-xxl-min-width: 2em;
1058
- min-width: var(--icon-xxl-min-width);
1059
- --icon-xxl-min-height: 2rem;
1060
- min-height: var(--icon-xxl-min-height);
1061
- --icon-xxl-font-size: 2rem;
1062
- font-size: var(--icon-xxl-font-size);
1063
- }
1064
- [class^=icon-left]::before,
1065
- [class*=" icon-left"]::before {
1066
- content: "";
1067
- }
1068
- [class^=icon-left]::after,
1069
- [class*=" icon-left"]::after {
1070
- content: none;
1071
- }
1072
- [class^=icon-right]::before,
1073
- [class*=" icon-right"]::before {
1074
- content: none;
1075
- }
1076
- [class^=icon]:empty,
1077
- [class*=" icon"]:empty {
1078
- justify-content: center;
1079
- margin: 0;
1080
- padding: 0;
1081
- }
1082
- [class^=icon]:empty::before, [class^=icon]:empty::after,
1083
- [class*=" icon"]:empty::before,
1084
- [class*=" icon"]:empty::after {
1085
- margin: 0;
1086
- }
1087
-
1088
1088
  .form-control {
1089
1089
  border: 1px solid var(--brand-100);
1090
1090
  border-radius: 4px;
@@ -1,13 +1,18 @@
1
- @import 'variables';
2
- @import 'colors';
3
- @import 'buttons.scss';
4
- @import 'containers';
5
- @import 'fonts';
6
- @import 'icons';
7
- @import 'inputs.scss';
8
- @import 'logo.scss';
9
- @import 'selectbox.scss';
10
- // @import 'layers.scss';
1
+ @use 'variables' as *;
2
+ @use 'colors' as *;
3
+ @use 'buttons' as *;
4
+ @use 'containers' as *;
5
+ @use 'fonts' as *;
6
+ @use 'icons' as *;
7
+ @use 'inputs' as *;
8
+ @use 'logo' as *;
9
+ @use 'selectbox' as *;
10
+ // @use 'layers' as *;
11
+
12
+ // variables.scss dosyasını forward edelim, böylece diğer dosyalar da kullanabilir
13
+
14
+ @forward 'variables';
15
+
11
16
  html,
12
17
  body,
13
18
  #main {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
- "version": "2.4.10",
3
+ "version": "2.4.13",
4
4
  "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
5
5
  "type": "module",
6
6
  "exports": {