@vc-shell/framework 1.0.215 → 1.0.217

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 (107) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/core/composables/useSettings/index.ts +1 -1
  3. package/dist/core/composables/useSettings/index.d.ts.map +1 -1
  4. package/dist/framework.js +32316 -24274
  5. package/dist/index.css +1 -1
  6. package/dist/locales/en.json +8 -0
  7. package/dist/shared/modules/dynamic/components/FIELD_MAP.d.ts.map +1 -1
  8. package/dist/shared/modules/dynamic/components/factories.d.ts +2 -1
  9. package/dist/shared/modules/dynamic/components/factories.d.ts.map +1 -1
  10. package/dist/shared/modules/dynamic/components/fields/InputCurrency.d.ts.map +1 -1
  11. package/dist/shared/modules/dynamic/components/fields/RadioButtonGroup.d.ts +121 -0
  12. package/dist/shared/modules/dynamic/components/fields/RadioButtonGroup.d.ts.map +1 -0
  13. package/dist/shared/modules/dynamic/components/fields/storybook/RadioButtonGroup.stories.d.ts +362 -0
  14. package/dist/shared/modules/dynamic/components/fields/storybook/RadioButtonGroup.stories.d.ts.map +1 -0
  15. package/dist/shared/modules/dynamic/composables/useFilterBuilder/index.d.ts.map +1 -1
  16. package/dist/shared/modules/dynamic/factories/types/index.d.ts +1 -1
  17. package/dist/shared/modules/dynamic/factories/types/index.d.ts.map +1 -1
  18. package/dist/shared/modules/dynamic/pages/dynamic-blade-form.vue.d.ts.map +1 -1
  19. package/dist/shared/modules/dynamic/types/index.d.ts +67 -3
  20. package/dist/shared/modules/dynamic/types/index.d.ts.map +1 -1
  21. package/dist/shared/modules/dynamic/types/models.d.ts +4 -1
  22. package/dist/shared/modules/dynamic/types/models.d.ts.map +1 -1
  23. package/dist/tsconfig.tsbuildinfo +1 -1
  24. package/dist/ui/components/atoms/index.d.ts +0 -1
  25. package/dist/ui/components/atoms/index.d.ts.map +1 -1
  26. package/dist/ui/components/atoms/vc-card/vc-card.stories.d.ts +40 -28
  27. package/dist/ui/components/atoms/vc-card/vc-card.stories.d.ts.map +1 -1
  28. package/dist/ui/components/atoms/vc-switch/vc-switch.stories.d.ts +8 -8
  29. package/dist/ui/components/atoms/vc-switch/vc-switch.vue.d.ts +1 -1
  30. package/dist/ui/components/atoms/vc-switch/vc-switch.vue.d.ts.map +1 -1
  31. package/dist/ui/components/molecules/index.d.ts +2 -0
  32. package/dist/ui/components/molecules/index.d.ts.map +1 -1
  33. package/dist/ui/components/{atoms → molecules}/vc-checkbox/index.d.ts +16 -16
  34. package/dist/ui/components/{atoms → molecules}/vc-checkbox/index.d.ts.map +1 -1
  35. package/dist/ui/components/{atoms → molecules}/vc-checkbox/vc-checkbox.stories.d.ts +160 -160
  36. package/dist/ui/components/molecules/vc-checkbox/vc-checkbox.stories.d.ts.map +1 -0
  37. package/dist/ui/components/molecules/vc-checkbox/vc-checkbox.vue.d.ts.map +1 -0
  38. package/dist/ui/components/molecules/vc-input/vc-input.stories.d.ts +40 -28
  39. package/dist/ui/components/molecules/vc-input/vc-input.stories.d.ts.map +1 -1
  40. package/dist/ui/components/molecules/vc-input/vc-input.vue.d.ts +10 -0
  41. package/dist/ui/components/molecules/vc-input/vc-input.vue.d.ts.map +1 -1
  42. package/dist/ui/components/molecules/vc-input-currency/vc-input-currency.stories.d.ts +28 -28
  43. package/dist/ui/components/molecules/vc-multivalue/vc-multivalue.stories.d.ts +63 -63
  44. package/dist/ui/components/molecules/vc-multivalue/vc-multivalue.vue.d.ts +9 -9
  45. package/dist/ui/components/molecules/vc-radio-button/index.d.ts +2 -0
  46. package/dist/ui/components/molecules/vc-radio-button/index.d.ts.map +1 -0
  47. package/dist/ui/components/molecules/vc-radio-button/vc-radio-button.stories.d.ts +687 -0
  48. package/dist/ui/components/molecules/vc-radio-button/vc-radio-button.stories.d.ts.map +1 -0
  49. package/dist/ui/components/molecules/vc-radio-button/vc-radio-button.vue.d.ts +81 -0
  50. package/dist/ui/components/molecules/vc-radio-button/vc-radio-button.vue.d.ts.map +1 -0
  51. package/dist/ui/components/molecules/vc-select/vc-select.stories.d.ts +90 -90
  52. package/dist/ui/components/molecules/vc-select/vc-select.vue.d.ts +9 -9
  53. package/dist/ui/components/molecules/vc-select/vc-select.vue.d.ts.map +1 -1
  54. package/dist/ui/components/molecules/vc-textarea/vc-textarea.stories.d.ts +168 -168
  55. package/dist/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue.d.ts +1 -0
  56. package/dist/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue.d.ts.map +1 -1
  57. package/dist/ui/components/organisms/vc-blade/vc-blade.stories.d.ts +4 -4
  58. package/dist/ui/components/organisms/vc-blade/vc-blade.vue.d.ts +1 -1
  59. package/dist/ui/components/organisms/vc-blade/vc-blade.vue.d.ts.map +1 -1
  60. package/dist/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue.d.ts.map +1 -1
  61. package/dist/ui/components/organisms/vc-gallery/vc-gallery.stories.d.ts +6 -6
  62. package/dist/ui/components/organisms/vc-login-form/index.d.ts +1 -72
  63. package/dist/ui/components/organisms/vc-login-form/index.d.ts.map +1 -1
  64. package/dist/ui/components/organisms/vc-login-form/vc-login-form.vue.d.ts +4 -2
  65. package/dist/ui/components/organisms/vc-login-form/vc-login-form.vue.d.ts.map +1 -1
  66. package/dist/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue.d.ts +3 -0
  67. package/dist/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue.d.ts.map +1 -1
  68. package/dist/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue.d.ts.map +1 -1
  69. package/dist/ui/components/organisms/vc-table/vc-table.vue.d.ts.map +1 -1
  70. package/package.json +5 -4
  71. package/shared/modules/dynamic/components/FIELD_MAP.ts +2 -0
  72. package/shared/modules/dynamic/components/factories.ts +10 -0
  73. package/shared/modules/dynamic/components/fields/InputCurrency.ts +4 -1
  74. package/shared/modules/dynamic/components/fields/RadioButtonGroup.ts +82 -0
  75. package/shared/modules/dynamic/components/fields/storybook/Checkbox.stories.ts +1 -1
  76. package/shared/modules/dynamic/components/fields/storybook/RadioButtonGroup.stories.ts +224 -0
  77. package/shared/modules/dynamic/composables/useFilterBuilder/index.ts +202 -33
  78. package/shared/modules/dynamic/factories/types/index.ts +1 -1
  79. package/shared/modules/dynamic/pages/dynamic-blade-form.vue +4 -3
  80. package/shared/modules/dynamic/pages/dynamic-blade-list.vue +1 -1
  81. package/shared/modules/dynamic/types/index.ts +72 -3
  82. package/shared/modules/dynamic/types/models.ts +5 -0
  83. package/ui/components/atoms/index.ts +0 -1
  84. package/ui/components/atoms/vc-label/vc-label.vue +1 -1
  85. package/ui/components/atoms/vc-switch/vc-switch.vue +1 -1
  86. package/ui/components/molecules/index.ts +2 -0
  87. package/ui/components/{atoms → molecules}/vc-checkbox/vc-checkbox.stories.ts +3 -3
  88. package/ui/components/molecules/vc-checkbox/vc-checkbox.vue +204 -0
  89. package/ui/components/molecules/vc-file-upload/vc-file-upload.vue +1 -1
  90. package/ui/components/molecules/vc-input/vc-input.vue +122 -33
  91. package/ui/components/molecules/vc-radio-button/index.ts +1 -0
  92. package/ui/components/molecules/vc-radio-button/vc-radio-button.stories.ts +97 -0
  93. package/ui/components/molecules/vc-radio-button/vc-radio-button.vue +197 -0
  94. package/ui/components/molecules/vc-select/vc-select.vue +1 -1
  95. package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue +42 -0
  96. package/ui/components/organisms/vc-blade/vc-blade.vue +4 -2
  97. package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue +4 -4
  98. package/ui/components/organisms/vc-login-form/index.ts +1 -10
  99. package/ui/components/organisms/vc-login-form/vc-login-form.vue +20 -0
  100. package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue +8 -0
  101. package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue +16 -22
  102. package/ui/components/organisms/vc-table/vc-table.vue +23 -3
  103. package/dist/ui/components/atoms/vc-checkbox/vc-checkbox.stories.d.ts.map +0 -1
  104. package/dist/ui/components/atoms/vc-checkbox/vc-checkbox.vue.d.ts.map +0 -1
  105. package/ui/components/atoms/vc-checkbox/vc-checkbox.vue +0 -146
  106. /package/dist/ui/components/{atoms → molecules}/vc-checkbox/vc-checkbox.vue.d.ts +0 -0
  107. /package/ui/components/{atoms → molecules}/vc-checkbox/index.ts +0 -0
@@ -0,0 +1,197 @@
1
+ <template>
2
+ <div class="vc-radio-button">
3
+ <label class="tw-text-base tw-flex tw-items-center tw-gap-[5px]">
4
+ <input
5
+ type="radio"
6
+ :name="name"
7
+ :value="value"
8
+ :checked="checked"
9
+ :disabled="disabled"
10
+ :class="{
11
+ 'vc-radio-button_error': error,
12
+ }"
13
+ @change="onChange"
14
+ />
15
+
16
+ {{ label }}</label
17
+ >
18
+ <slot
19
+ v-if="errorMessage"
20
+ name="error"
21
+ >
22
+ <VcHint class="vc-radio-button__error tw-mt-1">
23
+ {{ errorMessage }}
24
+ </VcHint>
25
+ </slot>
26
+ </div>
27
+ </template>
28
+ <!-- eslint-disable @typescript-eslint/no-explicit-any -->
29
+ <script lang="ts" setup>
30
+ import * as _ from "lodash-es";
31
+ import { computed } from "vue";
32
+
33
+ export interface Props {
34
+ /**
35
+ * Value of the radio button.
36
+ */
37
+ value: any;
38
+ /**
39
+ * Value binding of the radio button.
40
+ */
41
+ modelValue: any;
42
+ /**
43
+ * Allows to select a boolean value.
44
+ */
45
+ binary?: boolean;
46
+ /**
47
+ * Specifies that the radio button should be selected.
48
+ */
49
+ checked?: boolean;
50
+ /**
51
+ * Disables the radio button.
52
+ */
53
+ disabled?: boolean;
54
+ /**
55
+ * Name of the radio button.
56
+ */
57
+ name?: string;
58
+ /**
59
+ * Label of the radio button.
60
+ */
61
+ label?: string;
62
+ /**
63
+ * Specifies that the component should have error state style.
64
+ */
65
+ error?: boolean;
66
+ /**
67
+ * Error message to display.
68
+ */
69
+ errorMessage?: string;
70
+ }
71
+
72
+ export interface Emits {
73
+ /**
74
+ * Emits when the radio button is changed.
75
+ */
76
+ (event: "update:modelValue", value: any): void;
77
+ }
78
+
79
+ const props = withDefaults(defineProps<Props>(), {
80
+ name: "RadioField",
81
+ });
82
+ const emit = defineEmits<Emits>();
83
+
84
+ const checked = computed(() => {
85
+ return props.modelValue != null && (props.binary ? !!props.modelValue : _.isEqual(props.modelValue, props.value));
86
+ });
87
+
88
+ function onChange() {
89
+ if (!props.disabled) {
90
+ const model = props.binary ? !checked.value : props.value;
91
+
92
+ emit("update:modelValue", model);
93
+ }
94
+ }
95
+ </script>
96
+
97
+ <style lang="scss">
98
+ :root {
99
+ --radio-active: #43b0e6;
100
+ --radio-active-inner: #fff;
101
+ --radio-focus: 2px rgba(39, 94, 254, 0.3);
102
+ --radio-border: #bbc1e1;
103
+ --radio-border-hover: #43b0e6;
104
+ --radio-background: #fff;
105
+ --radio-disabled: #f6f8ff;
106
+ --radio-disabled-inner: #e1e6f9;
107
+ --radio-error: #f14e4e;
108
+ --radio-size: 14px;
109
+ }
110
+
111
+ .vc-radio-button {
112
+ input[type="radio"] {
113
+ border-radius: 50%;
114
+ appearance: none;
115
+ height: var(--radio-size);
116
+ outline: none;
117
+ display: inline-block;
118
+ vertical-align: top;
119
+ position: relative;
120
+ margin: 0;
121
+ cursor: pointer;
122
+ border: 1px solid var(--radio-border-color, var(--radio-border));
123
+ background: var(--radio-bg, var(--radio-background));
124
+ width: var(--radio-size);
125
+ transition:
126
+ background 0.3s,
127
+ border-color 0.3s,
128
+ box-shadow 0.2s;
129
+
130
+ &:after {
131
+ width: 12px;
132
+ height: 12px;
133
+ border-radius: 50%;
134
+ background: var(--radio-active-inner);
135
+ opacity: 0;
136
+ transform: scale(var(--radio-scale, 0.7));
137
+ opacity: var(--radio-after-opacity, 0);
138
+ content: "";
139
+ display: block;
140
+ left: 0;
141
+ top: 0;
142
+ position: absolute;
143
+ transition:
144
+ transform var(--radio-after-transform-duration, 0.3s) var(--radio-after-transform-ease, ease),
145
+ opacity var(--radio-after-opacity-duration, 0.2s);
146
+ }
147
+
148
+ &:checked {
149
+ --radio-bg: var(--radio-active);
150
+ --radio-border-color: var(--radio-active);
151
+ --radio-after-opacity-duration: 0.3s;
152
+ --radio-after-transform-duration: 0.6s;
153
+ --radio-after-transform-ease: cubic-bezier(0.2, 0.85, 0.32, 1.2);
154
+ --radio-scale: 0.5;
155
+ --radio-after-opacity: 1;
156
+ }
157
+
158
+ &:disabled {
159
+ --radio-bg: var(--radio-disabled);
160
+ cursor: not-allowed;
161
+ opacity: 0.9;
162
+ &:checked {
163
+ --radio-bg: var(--radio-disabled-inner);
164
+ --radio-border-color: var(--radio-border);
165
+ }
166
+ & + label {
167
+ cursor: not-allowed;
168
+ }
169
+ }
170
+
171
+ &:hover {
172
+ &:not(:checked) {
173
+ &:not(:disabled) {
174
+ --radio-border-color: var(--radio-border-hover);
175
+ }
176
+ }
177
+ }
178
+
179
+ & + label {
180
+ font-size: 14px;
181
+ line-height: 21px;
182
+ display: inline-block;
183
+ vertical-align: top;
184
+ cursor: pointer;
185
+ margin-left: 4px;
186
+ }
187
+
188
+ &.vc-radio-button_error {
189
+ --radio-border-color: var(--radio-error);
190
+ }
191
+ }
192
+
193
+ &__error {
194
+ --hint-color: var(--radio-error);
195
+ }
196
+ }
197
+ </style>
@@ -223,7 +223,7 @@
223
223
  v-if="isOpened"
224
224
  ref="dropdownRef"
225
225
  v-on-click-outside="[toggleDropdown, { ignore: [dropdownToggleRef] }]"
226
- class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-border-t-[color:var(--select-background-color)] tw-rounded-b-[var(--select-border-radius)] tw-p-2"
226
+ class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-[101] tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-border-t-[color:var(--select-background-color)] tw-rounded-b-[var(--select-border-radius)] tw-p-2"
227
227
  :style="dropdownStyle"
228
228
  >
229
229
  <input
@@ -2,6 +2,33 @@
2
2
  <div
3
3
  class="tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-4 tw-border-solid tw-border-b tw-border-b-[color:#eaedf3]"
4
4
  >
5
+ <div
6
+ v-if="typeof modified !== 'undefined'"
7
+ ref="tooltipIconRef"
8
+ :class="{
9
+ '!tw-bg-[color:var(--blade-not-edited)]': !modified,
10
+ '!tw-bg-[color:var(--blade-edited)]': modified,
11
+ }"
12
+ class="tw-block tw-w-[7px] tw-h-[7px] tw-rounded-full tw-z-[1] tw-mr-2"
13
+ @mouseenter="tooltipVisible = true"
14
+ @mouseleave="tooltipVisible = false"
15
+ >
16
+ <teleport to="body">
17
+ <span
18
+ v-if="tooltipVisible"
19
+ ref="tooltipRef"
20
+ :style="floatingStyles"
21
+ class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
22
+ >
23
+ {{
24
+ modified
25
+ ? $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.UNSAVED_CHANGES")
26
+ : $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.NO_CHANGES")
27
+ }}
28
+ </span>
29
+ </teleport>
30
+ </div>
31
+
5
32
  <div
6
33
  v-if="icon"
7
34
  class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3"
@@ -72,6 +99,8 @@
72
99
 
73
100
  <script lang="ts" setup>
74
101
  import { VcIcon } from "./../../../../";
102
+ import { ref } from "vue";
103
+ import { useFloating, shift } from "@floating-ui/vue";
75
104
 
76
105
  export interface Props {
77
106
  expandable?: boolean;
@@ -80,11 +109,20 @@ export interface Props {
80
109
  title?: string;
81
110
  subtitle?: string;
82
111
  icon?: string;
112
+ modified?: boolean;
83
113
  }
84
114
  const props = defineProps<Props>();
85
115
 
86
116
  const emit = defineEmits(["close", "expand", "collapse"]);
87
117
 
118
+ const tooltipVisible = ref(false);
119
+ const tooltipIconRef = ref<HTMLElement | null>(null);
120
+ const tooltipRef = ref<HTMLElement | null>(null);
121
+ const { floatingStyles } = useFloating(tooltipIconRef, tooltipRef, {
122
+ placement: "bottom-start",
123
+ middleware: [shift()],
124
+ });
125
+
88
126
  function onExpand(): void {
89
127
  if (props.expandable) {
90
128
  emit("expand");
@@ -118,5 +156,9 @@ function onClose(): void {
118
156
  --blade-header-title-color: #2e3d4e;
119
157
 
120
158
  --blade-header-subtitle-color: #a1c0d4;
159
+
160
+ --blade-not-edited: #87b563;
161
+
162
+ --blade-edited: #f89406;
121
163
  }
122
164
  </style>
@@ -22,6 +22,7 @@
22
22
  :icon="icon"
23
23
  :title="title"
24
24
  :subtitle="subtitle"
25
+ :modified="modified"
25
26
  @close="$emit('close')"
26
27
  @expand="$emit('expand')"
27
28
  @collapse="$emit('collapse')"
@@ -52,7 +53,7 @@
52
53
  </template>
53
54
 
54
55
  <!-- Unsaved changes -->
55
- <template v-if="hasUnsavedChanges">
56
+ <template v-if="modified">
56
57
  <div
57
58
  class="tw-text-white tw-px-2 tw-py-1 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-unsaved-changes)]"
58
59
  >
@@ -92,7 +93,7 @@ export interface Props {
92
93
  expandable?: boolean;
93
94
  closable?: boolean;
94
95
  toolbarItems?: IBladeToolbar[];
95
- hasUnsavedChanges?: boolean;
96
+ modified?: boolean;
96
97
  }
97
98
 
98
99
  export interface Emits {
@@ -139,6 +140,7 @@ const { open } = usePopup({
139
140
  --blade-border-radius: 6px;
140
141
  --blade-color-error: #f14e4e;
141
142
  --blade-color-unsaved-changes: #82a6bd;
143
+ --blade-color-unsaved-changes: #82a6bd;
142
144
  }
143
145
 
144
146
  .vc-app_mobile .vc-blade {
@@ -177,16 +177,16 @@
177
177
  ></VcTextarea
178
178
  ></template>
179
179
  <template v-else-if="computedProperty.valueType === 'Boolean'">
180
- <VcCheckbox
180
+ <VcSwitch
181
181
  v-bind="$attrs"
182
182
  v-model="value"
183
183
  :error-message="errorMessage"
184
184
  :required="computedProperty.required"
185
185
  :disabled="disabled"
186
186
  :name="computedProperty.name"
187
+ :label="computedProperty.displayName"
187
188
  >
188
- {{ computedProperty.displayName }}
189
- </VcCheckbox>
189
+ </VcSwitch>
190
190
  </template>
191
191
  </Field>
192
192
  </template>
@@ -196,7 +196,7 @@
196
196
  import { ref, onMounted, computed, Ref, watch } from "vue";
197
197
  import { Field } from "vee-validate";
198
198
  import { useI18n } from "vue-i18n";
199
- import { VcSelect, VcInput, VcTextarea, VcCheckbox } from "./../../";
199
+ import { VcSelect, VcInput, VcTextarea, VcSwitch } from "./../../";
200
200
  import * as _ from "lodash-es";
201
201
 
202
202
  type IValidationRules = {
@@ -1,10 +1 @@
1
- import { VNode } from "vue";
2
- import _LoginForm from "./vc-login-form.vue";
3
-
4
- export const VcLoginForm = _LoginForm as typeof _LoginForm & {
5
- new (): {
6
- $slots: {
7
- default: () => VNode[];
8
- };
9
- };
10
- };
1
+ export { default as VcLoginForm } from "./vc-login-form.vue";
@@ -19,11 +19,17 @@
19
19
  <slot></slot>
20
20
  </div>
21
21
  </div>
22
+ <div
23
+ class="tw-absolute tw-bottom-[2px] tw-left-[93px] tw-text-[color:var(--login-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1"
24
+ >
25
+ {{ version }}
26
+ </div>
22
27
  </div>
23
28
  </template>
24
29
 
25
30
  <script lang="ts" setup>
26
31
  import { computed } from "vue";
32
+ import { useRouter } from "vue-router";
27
33
 
28
34
  export interface Props {
29
35
  logo?: string;
@@ -35,6 +41,12 @@ const props = withDefaults(defineProps<Props>(), {
35
41
  title: "Login",
36
42
  });
37
43
 
44
+ defineSlots<{
45
+ default: void;
46
+ }>();
47
+
48
+ const router = useRouter();
49
+
38
50
  const backgroundImageHandler = computed(() => {
39
51
  if (props.background) {
40
52
  return `background: url(${CSS.escape(props.background)}) center / cover no-repeat`;
@@ -49,5 +61,13 @@ const logoImageHandler = computed(() => {
49
61
  return undefined;
50
62
  });
51
63
 
64
+ const version = router.currentRoute.value.meta?.appVersion;
65
+
52
66
  console.debug("Init vc-login-form");
53
67
  </script>
68
+
69
+ <style lang="scss">
70
+ :root {
71
+ --login-version-color: #838d9a;
72
+ }
73
+ </style>
@@ -52,6 +52,7 @@ export interface Props {
52
52
 
53
53
  export interface Emits {
54
54
  (event: "change", value: ITableColumns): void;
55
+ (event: "onActive", value: boolean): void;
55
56
  }
56
57
 
57
58
  const props = withDefaults(defineProps<Props>(), {});
@@ -82,6 +83,13 @@ watch(
82
83
  { immediate: true, deep: true },
83
84
  );
84
85
 
86
+ watch(
87
+ () => isActive.value,
88
+ (newVal) => {
89
+ emit("onActive", newVal);
90
+ },
91
+ );
92
+
85
93
  function selectItem(item: ITableColumns) {
86
94
  emit("change", toggleVisibility(item));
87
95
  }
@@ -4,7 +4,7 @@
4
4
  <div
5
5
  ref="filterToggle"
6
6
  class="tw-rounded-[3px] tw-bg-[#43b0e6] tw-flex tw-items-center tw-px-[10px] tw-text-white tw-h-[38px] tw-box-border tw-cursor-pointer"
7
- @click="openPanel($isMobile.value)"
7
+ @click="openPanel"
8
8
  >
9
9
  <VcIcon
10
10
  icon="fas fa-filter"
@@ -30,9 +30,9 @@
30
30
  v-if="isPanelVisible"
31
31
  ref="filterPanel"
32
32
  :class="{
33
- 'vc-table-filter__panel_mobile tw-fixed tw-left-0 tw-top-0 tw-w-full tw-bottom-0 tw-z-[9999] tw-bg-[rgba(128,140,153,0.6)] tw-shadow-none tw-rounded-none tw-max-h-full tw-max-w-full tw-min-w-full':
33
+ 'vc-table-filter__panel_mobile tw-fixed tw-left-0 tw-top-0 tw-w-full tw-bottom-0 tw-z-[100] tw-bg-[rgba(128,140,153,0.6)] tw-shadow-none tw-rounded-none tw-max-h-full tw-max-w-full tw-min-w-full':
34
34
  $isMobile.value,
35
- 'vc-table-filter__panel tw-absolute tw-max-h-[400px] tw-max-w-[800px] tw-min-w-[400px] tw-z-[100] tw-shadow-[1px_1px_11px_rgba(141,152,163,0.6)] tw-rounded-[3px] tw-overflow-hidden':
35
+ 'vc-table-filter__panel tw-absolute tw-max-w-[800px] tw-min-w-[400px] tw-w-0 tw-z-[100] tw-shadow-[1px_1px_11px_rgba(141,152,163,0.6)] tw-rounded-[3px] tw-overflow-hidden':
36
36
  !$isMobile.value,
37
37
  }"
38
38
  :style="filterStyle"
@@ -57,8 +57,8 @@
57
57
  </template>
58
58
 
59
59
  <script lang="ts" setup>
60
- import { ref, watch, computed, nextTick } from "vue";
61
- import { offset, computePosition, ComputePositionReturn, ReferenceElement } from "@floating-ui/vue";
60
+ import { ref, watch, computed, inject, Ref } from "vue";
61
+ import { offset, autoUpdate, useFloating, UseFloatingReturn } from "@floating-ui/vue";
62
62
 
63
63
  export interface Props {
64
64
  title?: string;
@@ -79,8 +79,15 @@ const props = withDefaults(defineProps<Props>(), {
79
79
  const isPanelVisible = ref(false);
80
80
  const filterToggle = ref<HTMLElement | null>();
81
81
  const filterPanel = ref<HTMLElement | null>();
82
+ const isMobile = inject("isMobile") as Ref<boolean>;
82
83
 
83
- const popper = ref<ComputePositionReturn>();
84
+ const popper: UseFloatingReturn | undefined = !isMobile.value
85
+ ? useFloating(filterToggle, filterPanel, {
86
+ whileElementsMounted: autoUpdate,
87
+ placement: "bottom-end",
88
+ middleware: [offset(10)],
89
+ })
90
+ : undefined;
84
91
 
85
92
  watch(
86
93
  () => props.parentExpanded,
@@ -90,25 +97,12 @@ watch(
90
97
  );
91
98
 
92
99
  const filterStyle = computed(() => ({
93
- top: `${popper.value?.y ?? 0}px`,
94
- left: `${popper.value?.x ?? 0}px`,
100
+ top: `${popper?.y.value ?? 0}px`,
101
+ left: `${popper?.x.value ?? 0}px`,
95
102
  }));
96
103
 
97
- function openPanel(isMobile: boolean) {
104
+ function openPanel() {
98
105
  isPanelVisible.value = !isPanelVisible.value;
99
-
100
- if (!isMobile) {
101
- if (isPanelVisible.value) {
102
- nextTick(() => {
103
- if (filterToggle.value && filterPanel.value) {
104
- computePosition(filterToggle.value as ReferenceElement, filterPanel.value, {
105
- placement: "bottom-end",
106
- middleware: [offset(10)],
107
- }).then((item) => (popper.value = item));
108
- }
109
- });
110
- }
111
- }
112
106
  }
113
107
 
114
108
  function closePanel() {
@@ -105,6 +105,8 @@
105
105
  <thead
106
106
  v-if="filteredCols"
107
107
  class="vc-table__header tw-relative"
108
+ @mouseenter="handleHeaderMouseOver(true)"
109
+ @mouseleave="handleHeaderMouseOver(false)"
108
110
  >
109
111
  <tr class="vc-table__header-row">
110
112
  <th
@@ -118,7 +120,7 @@
118
120
  @click.stop
119
121
  ></VcCheckbox>
120
122
  </div>
121
- <div class="tw-w-3 tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end">
123
+ <div class="tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end">
122
124
  <div class="tw-w-px tw-bg-[#e5e7eb] tw-h-full"></div>
123
125
  </div>
124
126
  </th>
@@ -127,7 +129,7 @@
127
129
  width="21px"
128
130
  class="tw-h-[42px] tw-w-[21px] tw-max-w-[21px] tw-min-w-[21px] tw-bg-[#f9f9f9] tw-m-w-[70px] !tw-border-0 tw-shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] tw-box-border tw-sticky tw-top-0 tw-select-none tw-z-[1]"
129
131
  >
130
- <div class="tw-w-3 tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end">
132
+ <div class="tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end">
131
133
  <div class="tw-w-px tw-bg-[#e5e7eb] tw-h-full"></div>
132
134
  </div>
133
135
  </th>
@@ -190,12 +192,13 @@
190
192
  </div>
191
193
  </th>
192
194
  <div
193
- v-if="props.expanded"
195
+ v-if="isHeaderHover && props.expanded"
194
196
  class="tw-sticky tw-h-[42px] tw-z-[1] tw-right-0 tw-top-0 tw-table-cell tw-align-middle tw-w-0"
195
197
  >
196
198
  <VcTableColumnSwitcher
197
199
  :items="internalColumnsSorted"
198
200
  @change="toggleColumn"
201
+ @on-active="handleColumnSwitcher"
199
202
  ></VcTableColumnSwitcher>
200
203
  </div>
201
204
  </tr>
@@ -580,6 +583,8 @@ const nextColumn = ref<ITableColumns>();
580
583
  const lastResize = ref<number>();
581
584
  const table = useCurrentElement();
582
585
  const resizer = ref();
586
+ const isHeaderHover = ref(false);
587
+ const columnSwitcherActive = ref(false);
583
588
  const state = useLocalStorage<Partial<ITableColumns & { predefined: boolean }>[]>(
584
589
  "VC_TABLE_STATE_" + props.stateKey.toUpperCase(),
585
590
  [],
@@ -742,6 +747,21 @@ watch(
742
747
  },
743
748
  );
744
749
 
750
+ function handleHeaderMouseOver(state: boolean) {
751
+ if (columnSwitcherActive.value) {
752
+ return;
753
+ }
754
+ isHeaderHover.value = state;
755
+ }
756
+
757
+ function handleColumnSwitcher(state: boolean) {
758
+ columnSwitcherActive.value = state;
759
+
760
+ if (!state) {
761
+ isHeaderHover.value = false;
762
+ }
763
+ }
764
+
745
765
  function handleSelectAll() {
746
766
  allSelected.value = !allSelected.value;
747
767
 
@@ -1 +0,0 @@
1
- {"version":3,"file":"vc-checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../ui/components/atoms/vc-checkbox/vc-checkbox.stories.ts"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"vc-checkbox.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/atoms/vc-checkbox/vc-checkbox.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAmB,MAAM,KAAK,CAAC;AAGhD,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACpD;;;;;;;;;;;;;;;;;;;;;;;;AA+MD,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}