cynx-lib 1.3.83 → 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 (42) 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/Layout.jsx +37 -0
  5. package/ui/components/Pagination.jsx +145 -145
  6. package/ui/components/PrivacyBlur.jsx +603 -603
  7. package/ui/components/Sidebar.jsx +300 -134
  8. package/utils/index.cjs +5 -0
  9. package/utils/index.js +22 -20
  10. package/utils/utils/duration.js +139 -139
  11. package/utils/utils/oidc.js +214 -214
  12. package/utils/utils/realtime.js +1634 -1634
  13. package/utils/utils/session.cjs +15 -2
  14. package/utils/utils/session.js +67 -58
  15. package/utils/utils/session_manager.cjs +490 -0
  16. package/utils/utils/session_manager.js +549 -0
  17. package/utils/utils/storage.js +393 -393
  18. package/utils/utils/ui.js +111 -111
  19. package/vue/components/Badge.vue +79 -79
  20. package/vue/components/Button.vue +209 -209
  21. package/vue/components/Checkbox.vue +103 -103
  22. package/vue/components/CircularProgress.vue +383 -383
  23. package/vue/components/Divider.vue +94 -94
  24. package/vue/components/Drawer.vue +243 -243
  25. package/vue/components/InfoBadge.vue +223 -223
  26. package/vue/components/Input.vue +341 -341
  27. package/vue/components/LinearProgress.vue +268 -268
  28. package/vue/components/Modal.vue +226 -226
  29. package/vue/components/Pagination.vue +199 -199
  30. package/vue/components/Select.vue +713 -713
  31. package/vue/components/Sidebar.vue +955 -955
  32. package/vue/components/Skeleton.vue +91 -91
  33. package/vue/components/Spinner.vue +263 -263
  34. package/vue/components/StatusTag.vue +89 -89
  35. package/vue/components/TabBar.vue +176 -176
  36. package/vue/components/Table.vue +388 -388
  37. package/vue/components/TimePicker.vue +399 -399
  38. package/vue/components/Toggle.vue +115 -115
  39. package/vue/components/XTable.vue +119 -119
  40. package/vue/composables/useAutoSkeletonRows.ts +71 -71
  41. package/vue/index.d.ts +67 -67
  42. 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>