cynx-lib 1.3.80 → 1.3.82

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 (41) hide show
  1. package/gen.js +77 -77
  2. package/package.json +1 -1
  3. package/ui/components/Drawer.jsx +208 -208
  4. package/ui/components/Layout.jsx +138 -138
  5. package/ui/components/LoginPage.jsx +405 -405
  6. package/ui/components/Pagination.jsx +145 -145
  7. package/ui/components/PrivacyBlur.jsx +603 -603
  8. package/ui/components/Sidebar.jsx +820 -820
  9. package/utils/index.js +20 -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.js +58 -58
  14. package/utils/utils/storage.js +393 -393
  15. package/utils/utils/storage_manager.cjs +84 -7
  16. package/utils/utils/storage_manager.js +95 -8
  17. package/utils/utils/ui.js +111 -111
  18. package/vue/components/Badge.vue +79 -79
  19. package/vue/components/Button.vue +209 -209
  20. package/vue/components/Checkbox.vue +103 -103
  21. package/vue/components/CircularProgress.vue +383 -383
  22. package/vue/components/Divider.vue +94 -94
  23. package/vue/components/Drawer.vue +243 -243
  24. package/vue/components/InfoBadge.vue +223 -223
  25. package/vue/components/Input.vue +341 -341
  26. package/vue/components/LinearProgress.vue +268 -268
  27. package/vue/components/Modal.vue +226 -226
  28. package/vue/components/Pagination.vue +199 -199
  29. package/vue/components/Select.vue +713 -713
  30. package/vue/components/Sidebar.vue +955 -955
  31. package/vue/components/Skeleton.vue +91 -91
  32. package/vue/components/Spinner.vue +263 -263
  33. package/vue/components/StatusTag.vue +89 -89
  34. package/vue/components/TabBar.vue +176 -176
  35. package/vue/components/Table.vue +388 -388
  36. package/vue/components/TimePicker.vue +399 -399
  37. package/vue/components/Toggle.vue +115 -115
  38. package/vue/components/XTable.vue +119 -119
  39. package/vue/composables/useAutoSkeletonRows.ts +71 -71
  40. package/vue/index.d.ts +67 -67
  41. 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>