cynx-lib 1.3.84 → 1.3.85

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.
Files changed (40) hide show
  1. package/gen.js +77 -77
  2. package/package.json +5 -1
  3. package/ui/components/Drawer.jsx +208 -208
  4. package/ui/components/Pagination.jsx +145 -145
  5. package/ui/components/PrivacyBlur.jsx +603 -603
  6. package/utils/index.cjs +5 -0
  7. package/utils/index.js +22 -20
  8. package/utils/utils/duration.js +139 -139
  9. package/utils/utils/oidc.js +214 -214
  10. package/utils/utils/realtime.js +1634 -1634
  11. package/utils/utils/session.cjs +15 -2
  12. package/utils/utils/session.js +67 -58
  13. package/utils/utils/session_manager.cjs +490 -0
  14. package/utils/utils/session_manager.js +549 -0
  15. package/utils/utils/storage.js +393 -393
  16. package/utils/utils/ui.js +111 -111
  17. package/vue/components/Badge.vue +79 -79
  18. package/vue/components/Button.vue +209 -209
  19. package/vue/components/Checkbox.vue +103 -103
  20. package/vue/components/CircularProgress.vue +383 -383
  21. package/vue/components/Divider.vue +94 -94
  22. package/vue/components/Drawer.vue +243 -243
  23. package/vue/components/InfoBadge.vue +223 -223
  24. package/vue/components/Input.vue +341 -341
  25. package/vue/components/LinearProgress.vue +268 -268
  26. package/vue/components/Modal.vue +226 -226
  27. package/vue/components/Pagination.vue +199 -199
  28. package/vue/components/Select.vue +713 -713
  29. package/vue/components/Sidebar.vue +955 -955
  30. package/vue/components/Skeleton.vue +91 -91
  31. package/vue/components/Spinner.vue +263 -263
  32. package/vue/components/StatusTag.vue +89 -89
  33. package/vue/components/TabBar.vue +176 -176
  34. package/vue/components/Table.vue +388 -388
  35. package/vue/components/TimePicker.vue +399 -399
  36. package/vue/components/Toggle.vue +115 -115
  37. package/vue/components/XTable.vue +119 -119
  38. package/vue/composables/useAutoSkeletonRows.ts +71 -71
  39. package/vue/index.d.ts +67 -67
  40. package/vue/index.js +86 -86
package/vue/components/Skeleton.vue CHANGED
@@ -1,91 +1,91 @@
1
- <script setup lang="ts">
2
- import { computed } from "vue";
3
-
4
- const props = withDefaults(
5
- defineProps<{
6
- width?: string | number;
7
- height?: string | number;
8
- circle?: boolean;
9
- size?: string | number;
10
- radius?: string | number;
11
- className?: string;
12
- }>(),
13
- {
14
- width: "100%",
15
- height: 14,
16
- circle: false,
17
- size: undefined,
18
- radius: 4,
19
- className: "",
20
- }
21
- );
22
-
23
- const formatSize = (val?: string | number) => {
24
- if (val === undefined || val === null) return undefined;
25
- if (typeof val === "number") return `${val}px`;
26
- return val;
27
- };
28
-
29
- const computedWidth = computed(() => {
30
- if (props.circle) return formatSize(props.size || props.height || 24);
31
- return formatSize(props.width);
32
- });
33
-
34
- const computedHeight = computed(() => {
35
- if (props.circle) return formatSize(props.size || props.height || 24);
36
- return formatSize(props.height);
37
- });
38
-
39
- const computedRadius = computed(() => {
40
- if (props.circle) return "50%";
41
- return formatSize(props.radius);
42
- });
43
- </script>
44
-
45
- <template>
46
- <div
47
- :class="['cynx-skeleton', className]"
48
- :style="{
49
- width: computedWidth,
50
- height: computedHeight,
51
- borderRadius: computedRadius,
52
- }"
53
- />
54
- </template>
55
-
56
- <style>
57
- @keyframes cynx-sk-shimmer {
58
- 0% {
59
- background-position: -600px 0;
60
- }
61
- 100% {
62
- background-position: 600px 0;
63
- }
64
- }
65
-
66
- .cynx-skeleton {
67
- background: linear-gradient(
68
- 90deg,
69
- var(--grey-1, #f0f1f5) 25%,
70
- var(--border-light, #e4e5ec) 50%,
71
- var(--grey-1, #f0f1f5) 75%
72
- );
73
- background-size: 600px 100%;
74
- animation: cynx-sk-shimmer 1.4s ease infinite;
75
- flex-shrink: 0;
76
- display: inline-block;
77
- vertical-align: middle;
78
- }
79
-
80
- :root.dark1 .cynx-skeleton,
81
- :root.dark2 .cynx-skeleton,
82
- .dark .cynx-skeleton {
83
- background: linear-gradient(
84
- 90deg,
85
- var(--grey-1, #1c1f36) 25%,
86
- var(--border-light, #2b304f) 50%,
87
- var(--grey-1, #1c1f36) 75%
88
- );
89
- background-size: 600px 100%;
90
- }
91
- </style>
1
+ <script setup lang="ts">
2
+ import { computed } from "vue";
3
+
4
+ const props = withDefaults(
5
+ defineProps<{
6
+ width?: string | number;
7
+ height?: string | number;
8
+ circle?: boolean;
9
+ size?: string | number;
10
+ radius?: string | number;
11
+ className?: string;
12
+ }>(),
13
+ {
14
+ width: "100%",
15
+ height: 14,
16
+ circle: false,
17
+ size: undefined,
18
+ radius: 4,
19
+ className: "",
20
+ }
21
+ );
22
+
23
+ const formatSize = (val?: string | number) => {
24
+ if (val === undefined || val === null) return undefined;
25
+ if (typeof val === "number") return `${val}px`;
26
+ return val;
27
+ };
28
+
29
+ const computedWidth = computed(() => {
30
+ if (props.circle) return formatSize(props.size || props.height || 24);
31
+ return formatSize(props.width);
32
+ });
33
+
34
+ const computedHeight = computed(() => {
35
+ if (props.circle) return formatSize(props.size || props.height || 24);
36
+ return formatSize(props.height);
37
+ });
38
+
39
+ const computedRadius = computed(() => {
40
+ if (props.circle) return "50%";
41
+ return formatSize(props.radius);
42
+ });
43
+ </script>
44
+
45
+ <template>
46
+ <div
47
+ :class="['cynx-skeleton', className]"
48
+ :style="{
49
+ width: computedWidth,
50
+ height: computedHeight,
51
+ borderRadius: computedRadius,
52
+ }"
53
+ />
54
+ </template>
55
+
56
+ <style>
57
+ @keyframes cynx-sk-shimmer {
58
+ 0% {
59
+ background-position: -600px 0;
60
+ }
61
+ 100% {
62
+ background-position: 600px 0;
63
+ }
64
+ }
65
+
66
+ .cynx-skeleton {
67
+ background: linear-gradient(
68
+ 90deg,
69
+ var(--grey-1, #f0f1f5) 25%,
70
+ var(--border-light, #e4e5ec) 50%,
71
+ var(--grey-1, #f0f1f5) 75%
72
+ );
73
+ background-size: 600px 100%;
74
+ animation: cynx-sk-shimmer 1.4s ease infinite;
75
+ flex-shrink: 0;
76
+ display: inline-block;
77
+ vertical-align: middle;
78
+ }
79
+
80
+ :root.dark1 .cynx-skeleton,
81
+ :root.dark2 .cynx-skeleton,
82
+ .dark .cynx-skeleton {
83
+ background: linear-gradient(
84
+ 90deg,
85
+ var(--grey-1, #1c1f36) 25%,
86
+ var(--border-light, #2b304f) 50%,
87
+ var(--grey-1, #1c1f36) 75%
88
+ );
89
+ background-size: 600px 100%;
90
+ }
91
+ </style>