@vc-shell/framework 1.0.169 → 1.0.171
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/CHANGELOG.md +32 -0
- package/core/composables/useNotifications/index.ts +12 -5
- package/core/types/index.ts +2 -2
- package/dist/core/composables/useNotifications/index.d.ts.map +1 -1
- package/dist/core/types/index.d.ts +2 -2
- package/dist/core/types/index.d.ts.map +1 -1
- package/dist/framework.js +20534 -19207
- package/dist/index.css +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/shared/components/change-password/change-password.vue.d.ts.map +1 -1
- package/dist/shared/components/common/popup/vc-popup-error.vue.d.ts +29 -0
- package/dist/shared/components/common/popup/vc-popup-error.vue.d.ts.map +1 -0
- package/dist/shared/components/common/popup/vc-popup-warning.vue.d.ts +32 -0
- package/dist/shared/components/common/popup/vc-popup-warning.vue.d.ts.map +1 -0
- package/dist/shared/components/popup-handler/composables/usePopup/index.d.ts.map +1 -1
- package/dist/shared/components/user-dropdown-button/index.d.ts +4 -4
- package/dist/shared/components/user-dropdown-button/user-dropdown-button.vue.d.ts.map +1 -1
- package/dist/shared/modules/assets/index.d.ts.map +1 -1
- package/dist/shared/modules/assets-manager/components/assets-manager/assets-manager.vue.d.ts.map +1 -1
- package/dist/shared/modules/assets-manager/index.d.ts.map +1 -1
- package/dist/shared/modules/dynamic/composables/useToolbarReducer/index.d.ts +2 -2
- package/dist/shared/modules/dynamic/composables/useToolbarReducer/index.d.ts.map +1 -1
- package/dist/shared/modules/dynamic/pages/dynamic-blade-form.vue.d.ts +1 -1
- package/dist/shared/modules/dynamic/pages/dynamic-blade-form.vue.d.ts.map +1 -1
- package/dist/shared/modules/dynamic/pages/dynamic-blade-list.vue.d.ts +3 -2
- package/dist/shared/modules/dynamic/pages/dynamic-blade-list.vue.d.ts.map +1 -1
- package/dist/shared/modules/dynamic/types/index.d.ts +7 -1
- package/dist/shared/modules/dynamic/types/index.d.ts.map +1 -1
- package/dist/shared/pages/LoginPage/components/login/Login.vue.d.ts.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/ui/components/atoms/vc-container/vc-container.vue.d.ts.map +1 -1
- package/dist/ui/components/atoms/vc-icon/index.d.ts +1 -28
- package/dist/ui/components/atoms/vc-icon/index.d.ts.map +1 -1
- package/dist/ui/components/molecules/vc-slider/vc-slider.vue.d.ts.map +1 -1
- package/dist/ui/components/organisms/vc-app/vc-app.vue.d.ts +8 -8
- package/dist/ui/components/organisms/vc-blade/vc-blade.vue.d.ts.map +1 -1
- package/dist/ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue.d.ts +1 -1
- package/dist/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue.d.ts.map +1 -1
- package/dist/ui/components/organisms/vc-gallery/vc-gallery.vue.d.ts +1 -1
- package/dist/ui/components/organisms/vc-popup/vc-popup.vue.d.ts +52 -42
- package/dist/ui/components/organisms/vc-popup/vc-popup.vue.d.ts.map +1 -1
- package/dist/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue.d.ts +11 -4
- package/dist/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue.d.ts.map +1 -1
- package/dist/ui/components/organisms/vc-table/vc-table.vue.d.ts +6 -3
- package/dist/ui/components/organisms/vc-table/vc-table.vue.d.ts.map +1 -1
- package/package.json +6 -4
- package/shared/components/change-password/change-password.vue +17 -11
- package/shared/components/common/popup/vc-popup-error.vue +44 -0
- package/shared/components/common/popup/vc-popup-warning.vue +47 -0
- package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue +1 -0
- package/shared/components/popup-handler/composables/usePopup/index.ts +7 -8
- package/shared/components/user-dropdown-button/user-dropdown-button.vue +1 -0
- package/shared/modules/assets/index.ts +1 -2
- package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue +24 -22
- package/shared/modules/assets-manager/index.ts +1 -2
- package/shared/modules/dynamic/composables/useToolbarReducer/index.ts +2 -2
- package/shared/modules/dynamic/pages/dynamic-blade-form.vue +25 -3
- package/shared/modules/dynamic/pages/dynamic-blade-list.vue +48 -5
- package/shared/modules/dynamic/types/index.ts +9 -1
- package/shared/pages/LoginPage/components/login/Login.vue +8 -5
- package/ui/components/atoms/vc-container/vc-container.vue +41 -8
- package/ui/components/atoms/vc-icon/index.ts +1 -3
- package/ui/components/molecules/vc-slider/vc-slider.vue +4 -4
- package/ui/components/organisms/vc-blade/vc-blade.vue +4 -5
- package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue +59 -45
- package/ui/components/organisms/vc-popup/vc-popup.vue +173 -141
- package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue +171 -160
- package/ui/components/organisms/vc-table/vc-table.vue +13 -8
- package/dist/shared/modules/assets/locales/index.d.ts +0 -3
- package/dist/shared/modules/assets/locales/index.d.ts.map +0 -1
- package/dist/shared/modules/assets-manager/locales/index.d.ts +0 -3
- package/dist/shared/modules/assets-manager/locales/index.d.ts.map +0 -1
- package/dist/ui/components/organisms/vc-popup/_internal/vc-popup-error/vc-popup-error.vue.d.ts +0 -17
- package/dist/ui/components/organisms/vc-popup/_internal/vc-popup-error/vc-popup-error.vue.d.ts.map +0 -1
- package/dist/ui/components/organisms/vc-popup/_internal/vc-popup-warning/vc-popup-warning.vue.d.ts +0 -20
- package/dist/ui/components/organisms/vc-popup/_internal/vc-popup-warning/vc-popup-warning.vue.d.ts.map +0 -1
- package/shared/modules/assets/locales/en.json +0 -32
- package/shared/modules/assets/locales/index.ts +0 -2
- package/shared/modules/assets-manager/locales/en.json +0 -28
- package/shared/modules/assets-manager/locales/index.ts +0 -2
- package/ui/components/organisms/vc-popup/_internal/vc-popup-error/vc-popup-error.vue +0 -31
- package/ui/components/organisms/vc-popup/_internal/vc-popup-warning/vc-popup-warning.vue +0 -36
package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue
CHANGED
|
@@ -1,131 +1,131 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
:
|
|
6
|
-
|
|
7
|
-
@
|
|
8
|
-
@
|
|
9
|
-
@touchend="touchEnd"
|
|
10
|
-
@touchcancel="touchCancel"
|
|
3
|
+
ref="container"
|
|
4
|
+
v-on-click-outside="reset"
|
|
5
|
+
v-touch:hold="handleHold"
|
|
6
|
+
class="tw-select-none tw-relative tw-overflow-hidden tw-flex"
|
|
7
|
+
@click="handleClick"
|
|
8
|
+
@contextmenu.prevent
|
|
11
9
|
>
|
|
12
|
-
<!-- Left swipe actions-->
|
|
13
10
|
<div
|
|
14
|
-
|
|
15
|
-
class="tw-
|
|
11
|
+
ref="target"
|
|
12
|
+
class="tw-top-0 tw-left-0 tw-bottom-0 tw-right-0 tw-w-full tw-h-full tw-absolute tw-flex-shrink-0 tw-bg-white"
|
|
13
|
+
:class="{ animated: !isSwiping, 'vc-table-mobile__item_selected': isSelected }"
|
|
14
|
+
:style="{ left }"
|
|
16
15
|
>
|
|
17
|
-
<div
|
|
18
|
-
class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
|
|
19
|
-
:class="[`vc-table-mobile__item-action_${leftSwipeActions[0].variant}`]"
|
|
20
|
-
@click.stop="leftSwipeActions[0].clickHandler(item as T)"
|
|
21
|
-
>
|
|
22
|
-
<VcIcon :icon="leftSwipeActions[0].icon"></VcIcon>
|
|
23
|
-
<div class="tw-mt-1 tw-text-lg">
|
|
24
|
-
{{ leftSwipeActions[0].title }}
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
<div class="tw-flex-shrink-0 tw-w-full">
|
|
30
16
|
<!-- Mobile item slot content -->
|
|
31
17
|
<slot></slot>
|
|
32
18
|
</div>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<div
|
|
36
|
-
v-if="rightSwipeActions && rightSwipeActions.length"
|
|
37
|
-
class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
|
|
38
|
-
>
|
|
39
|
-
<!-- First available action -->
|
|
19
|
+
<div class="tw-flex tw-justify-between tw-flex-auto">
|
|
20
|
+
<!-- Left swipe actions -->
|
|
40
21
|
<div
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
22
|
+
v-if="leftSwipeActions && leftSwipeActions.length && direction === 'right'"
|
|
23
|
+
class="tw-flex-shrink-0 tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
|
|
24
|
+
:style="{
|
|
25
|
+
width: actionsWidth,
|
|
26
|
+
}"
|
|
44
27
|
>
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
{
|
|
28
|
+
<div
|
|
29
|
+
class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
|
|
30
|
+
:class="[`vc-table-mobile__item-action_${leftSwipeActions[0].type}`]"
|
|
31
|
+
@click.stop="leftSwipeActions[0].clickHandler(item as T)"
|
|
32
|
+
>
|
|
33
|
+
<VcIcon :icon="leftSwipeActions[0].icon" />
|
|
34
|
+
<div class="tw-mt-1 tw-text-lg tw-text-center">
|
|
35
|
+
{{ leftSwipeActions[0].title }}
|
|
36
|
+
</div>
|
|
48
37
|
</div>
|
|
49
38
|
</div>
|
|
50
|
-
|
|
51
|
-
<!-- Second available action -->
|
|
39
|
+
<!-- Item actions -->
|
|
52
40
|
<div
|
|
53
|
-
v-if="rightSwipeActions.length ===
|
|
54
|
-
class="tw-flex
|
|
55
|
-
:
|
|
56
|
-
|
|
41
|
+
v-if="rightSwipeActions && rightSwipeActions.length && direction === 'left'"
|
|
42
|
+
class="tw-flex-shrink-0 tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2] tw-ml-auto"
|
|
43
|
+
:style="{
|
|
44
|
+
width: actionsWidth,
|
|
45
|
+
}"
|
|
57
46
|
>
|
|
58
|
-
<VcIcon :icon="rightSwipeActions[1].icon"></VcIcon>
|
|
59
|
-
<div class="tw-mt-1 tw-text-lg">
|
|
60
|
-
{{ rightSwipeActions[1].title }}
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<!-- Other available actions -->
|
|
65
|
-
<template v-if="rightSwipeActions.length > 2">
|
|
66
47
|
<div
|
|
48
|
+
v-for="(action, index) in rightSwipeActions.slice(0, rightSwipeActions.length > 2 ? 1 : 2)"
|
|
49
|
+
:key="`rightSwipeAction-${index}`"
|
|
67
50
|
class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
|
|
68
|
-
|
|
51
|
+
:class="[`vc-table-mobile__item-action_${action.type}`]"
|
|
52
|
+
@click.stop="action.clickHandler(item as T)"
|
|
69
53
|
>
|
|
70
|
-
<VcIcon icon="
|
|
71
|
-
<div class="tw-mt-1 tw-text-lg">
|
|
54
|
+
<VcIcon :icon="action.icon" />
|
|
55
|
+
<div class="tw-mt-1 tw-text-lg tw-text-center">
|
|
56
|
+
{{ action.title }}
|
|
57
|
+
</div>
|
|
72
58
|
</div>
|
|
73
59
|
|
|
74
|
-
<!--
|
|
75
|
-
<
|
|
76
|
-
v-if="isActionsPopupVisible"
|
|
77
|
-
to="body"
|
|
78
|
-
>
|
|
60
|
+
<!-- Other available actions -->
|
|
61
|
+
<template v-if="rightSwipeActions.length > 2">
|
|
79
62
|
<div
|
|
80
|
-
class="tw-
|
|
63
|
+
class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
|
|
64
|
+
@click.stop="isActionsPopupVisible = true"
|
|
65
|
+
>
|
|
66
|
+
<VcIcon icon="fas fa-ellipsis-h" />
|
|
67
|
+
<div class="tw-mt-1 tw-text-lg">{{ $t("COMPONENTS.ORGANISMS.VC_TABLE.MORE") }}</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<!-- Actions popup -->
|
|
71
|
+
<teleport
|
|
72
|
+
v-if="isActionsPopupVisible"
|
|
73
|
+
to="body"
|
|
81
74
|
>
|
|
82
75
|
<div
|
|
83
|
-
class="tw-
|
|
76
|
+
class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-bg-[rgba(107,121,135,0.15)] tw-flex tw-items-center tw-justify-center tw-z-[99]"
|
|
84
77
|
>
|
|
85
|
-
<div
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
size="xl"
|
|
93
|
-
@click="isActionsPopupVisible = false"
|
|
94
|
-
></VcIcon>
|
|
95
|
-
</div>
|
|
96
|
-
|
|
97
|
-
<div class="tw-flex tw-flex-wrap tw-my-5 tw-justify-between">
|
|
98
|
-
<div
|
|
99
|
-
v-for="(itemAction, i) in itemActions"
|
|
100
|
-
:key="i"
|
|
101
|
-
class="tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
|
|
102
|
-
@click="itemAction.clickHandler(item as T)"
|
|
103
|
-
>
|
|
78
|
+
<div
|
|
79
|
+
class="tw-bg-white tw-rounded-[6px] tw-overflow-hidden tw-p-5 tw-max-w-[80%] tw-w-[350px] tw-border tw-border-solid tw-border-[#eef0f2] tw-box-border tw-shadow-[1px_1px_22px_rgba(126,142,157,0.2)]"
|
|
80
|
+
>
|
|
81
|
+
<div class="tw-flex tw-w-full tw-items-center">
|
|
82
|
+
<span class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]">
|
|
83
|
+
{{ t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_ACTIONS") }}
|
|
84
|
+
</span>
|
|
104
85
|
<VcIcon
|
|
105
|
-
|
|
86
|
+
class="tw-text-[#c2d7e4]"
|
|
87
|
+
icon="fas fa-times-circle"
|
|
106
88
|
size="xl"
|
|
89
|
+
@click="isActionsPopupVisible = false"
|
|
107
90
|
></VcIcon>
|
|
108
|
-
|
|
109
|
-
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div class="tw-flex tw-flex-wrap tw-my-5 tw-justify-between">
|
|
94
|
+
<div
|
|
95
|
+
v-for="(itemAction, i) in itemActions"
|
|
96
|
+
:key="i"
|
|
97
|
+
class="tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
|
|
98
|
+
@click="itemAction.clickHandler(item as T)"
|
|
99
|
+
>
|
|
100
|
+
<VcIcon
|
|
101
|
+
:icon="itemAction.icon"
|
|
102
|
+
size="xl"
|
|
103
|
+
></VcIcon>
|
|
104
|
+
<div class="tw-text-base tw-mt-2 tw-text-center">
|
|
105
|
+
{{ itemAction.title }}
|
|
106
|
+
</div>
|
|
110
107
|
</div>
|
|
111
108
|
</div>
|
|
112
109
|
</div>
|
|
113
110
|
</div>
|
|
114
|
-
</
|
|
115
|
-
</
|
|
116
|
-
</
|
|
111
|
+
</teleport>
|
|
112
|
+
</template>
|
|
113
|
+
</div>
|
|
117
114
|
</div>
|
|
118
115
|
</div>
|
|
119
116
|
</template>
|
|
120
117
|
|
|
121
118
|
<script lang="ts" setup generic="T extends TableItem | string">
|
|
122
|
-
import { Ref, computed, ref, watch } from "vue";
|
|
123
|
-
import { IActionBuilderResult } from "
|
|
119
|
+
import { Ref, computed, ref, onMounted, watch } from "vue";
|
|
120
|
+
import { IActionBuilderResult } from "../../../../../../core/types";
|
|
124
121
|
import { useI18n } from "vue-i18n";
|
|
122
|
+
import { useSwipe } from "@vueuse/core";
|
|
123
|
+
import { vOnClickOutside } from "@vueuse/components";
|
|
125
124
|
|
|
126
125
|
export interface Emits {
|
|
127
126
|
(event: "swipeStart", id: string): void;
|
|
128
127
|
(event: "click"): void;
|
|
128
|
+
(event: "select"): void;
|
|
129
129
|
}
|
|
130
130
|
export interface TableItem {
|
|
131
131
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -135,112 +135,119 @@ export interface TableItem {
|
|
|
135
135
|
|
|
136
136
|
const props = defineProps<{
|
|
137
137
|
item: T;
|
|
138
|
-
actionBuilder?: (item: T) => IActionBuilderResult[];
|
|
138
|
+
actionBuilder?: (item: T) => IActionBuilderResult[] | undefined;
|
|
139
139
|
swipingItem?: string;
|
|
140
|
+
isSelected?: boolean;
|
|
140
141
|
}>();
|
|
141
142
|
|
|
142
143
|
const emit = defineEmits<Emits>();
|
|
143
144
|
const { t } = useI18n({ useScope: "global" });
|
|
144
|
-
|
|
145
|
-
const startX = ref(0);
|
|
146
|
-
const startY = ref(0);
|
|
147
|
-
const startOffsetX = ref(0);
|
|
148
|
-
const isMoving = ref(false);
|
|
149
|
-
const threshold = 10;
|
|
150
|
-
const maxWidth = 80;
|
|
145
|
+
|
|
151
146
|
const isActionsPopupVisible = ref(false);
|
|
152
|
-
const itemActions: Ref<IActionBuilderResult<T>[]> = ref([]);
|
|
147
|
+
const itemActions: Ref<IActionBuilderResult<T>[] | undefined> = ref([]);
|
|
148
|
+
const target = ref<HTMLElement | null>(null);
|
|
149
|
+
const container = ref<HTMLElement | null>(null);
|
|
150
|
+
const containerWidth = computed(() => container.value?.offsetWidth);
|
|
151
|
+
const left = ref("0");
|
|
153
152
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
153
|
+
const actionsWidth = ref("0");
|
|
154
|
+
|
|
155
|
+
const { isSwiping, lengthX } = useSwipe(target, {
|
|
156
|
+
threshold: 0,
|
|
157
|
+
onSwipeStart() {
|
|
158
|
+
getActions();
|
|
159
|
+
if (typeof props.item !== "string") {
|
|
160
|
+
emit("swipeStart", props.item.id);
|
|
161
|
+
}
|
|
162
|
+
if (containerWidth.value) {
|
|
163
|
+
reset();
|
|
159
164
|
}
|
|
160
165
|
},
|
|
161
|
-
)
|
|
166
|
+
onSwipe() {
|
|
167
|
+
if (containerWidth.value) {
|
|
168
|
+
if (lengthX.value < 0 && leftSwipeActions.value && leftSwipeActions.value.length) {
|
|
169
|
+
left.value = `${Math.abs(lengthX.value)}px`;
|
|
170
|
+
} else if (lengthX.value > 0 && rightSwipeActions.value && rightSwipeActions.value.length) {
|
|
171
|
+
left.value = `${-lengthX.value}px`;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
actionsWidth.value = `${Math.abs(lengthX.value)}px`;
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
onSwipeEnd() {
|
|
178
|
+
if (containerWidth.value && Math.abs(lengthX.value) / containerWidth.value >= 0.1) {
|
|
179
|
+
if (lengthX.value < 0 && leftSwipeActions.value && leftSwipeActions.value.length) {
|
|
180
|
+
left.value = "80px";
|
|
181
|
+
} else if (lengthX.value > 0 && rightSwipeActions.value && rightSwipeActions.value.length) {
|
|
182
|
+
left.value = "-80px";
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
actionsWidth.value = "80px";
|
|
186
|
+
} else {
|
|
187
|
+
reset();
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
});
|
|
162
191
|
|
|
163
192
|
const rightSwipeActions = computed(
|
|
164
193
|
() =>
|
|
165
194
|
itemActions.value &&
|
|
166
195
|
itemActions.value.length &&
|
|
167
|
-
itemActions.value.filter((actions: IActionBuilderResult) =>
|
|
196
|
+
itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "right"),
|
|
168
197
|
);
|
|
169
198
|
const leftSwipeActions = computed(
|
|
170
199
|
() =>
|
|
171
200
|
itemActions.value &&
|
|
172
201
|
itemActions.value.length &&
|
|
173
|
-
itemActions.value.filter((actions: IActionBuilderResult) => actions.
|
|
202
|
+
itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "left"),
|
|
174
203
|
);
|
|
175
204
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
}
|
|
184
|
-
|
|
205
|
+
watch(
|
|
206
|
+
() => props.swipingItem,
|
|
207
|
+
(newVal) => {
|
|
208
|
+
if (typeof props.item !== "string" && newVal !== props.item.id) {
|
|
209
|
+
left.value = "0";
|
|
210
|
+
actionsWidth.value = "0";
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
);
|
|
185
214
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
startOffsetX.value = offsetX.value;
|
|
190
|
-
isMoving.value = true;
|
|
215
|
+
onMounted(() => {
|
|
216
|
+
adjustHeight();
|
|
217
|
+
});
|
|
191
218
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
219
|
+
function reset() {
|
|
220
|
+
left.value = "0";
|
|
221
|
+
actionsWidth.value = "0";
|
|
222
|
+
}
|
|
195
223
|
|
|
196
|
-
|
|
197
|
-
|
|
224
|
+
function adjustHeight() {
|
|
225
|
+
if (container.value && target.value) {
|
|
226
|
+
container.value.style.height = target.value.scrollHeight + "px";
|
|
198
227
|
}
|
|
199
228
|
}
|
|
200
229
|
|
|
201
|
-
|
|
202
|
-
if (
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
230
|
+
const direction = computed(() => {
|
|
231
|
+
if (lengthX.value < 0) {
|
|
232
|
+
return "right";
|
|
233
|
+
}
|
|
234
|
+
return "left";
|
|
235
|
+
});
|
|
206
236
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
? Math.abs(startOffsetX.value + deltaX) <= maxWidth * 2
|
|
212
|
-
: Math.abs(startOffsetX.value + deltaX) <= maxWidth
|
|
213
|
-
: Math.abs(startOffsetX.value + deltaX) <= maxWidth) &&
|
|
214
|
-
startOffsetX.value + deltaX < 0
|
|
215
|
-
) {
|
|
216
|
-
if (Math.abs(deltaY) < threshold * 2) {
|
|
217
|
-
e.preventDefault();
|
|
218
|
-
}
|
|
219
|
-
offsetX.value = startOffsetX.value + deltaX;
|
|
237
|
+
function getActions() {
|
|
238
|
+
if (!(itemActions.value && itemActions.value.length)) {
|
|
239
|
+
if (props.actionBuilder && typeof props.actionBuilder === "function") {
|
|
240
|
+
itemActions.value = props.actionBuilder(props.item);
|
|
220
241
|
}
|
|
221
242
|
}
|
|
222
243
|
}
|
|
223
244
|
|
|
224
|
-
function
|
|
225
|
-
|
|
226
|
-
if (absoluteOffsetX < maxWidth) {
|
|
227
|
-
offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
|
|
228
|
-
} else {
|
|
229
|
-
offsetX.value = absoluteOffsetX <= maxWidth * 2 - threshold * 2 ? -maxWidth : -maxWidth * 2;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
isMoving.value = false;
|
|
245
|
+
function handleHold() {
|
|
246
|
+
emit("select");
|
|
233
247
|
}
|
|
234
248
|
|
|
235
|
-
function
|
|
236
|
-
|
|
237
|
-
if (absoluteOffsetX < maxWidth) {
|
|
238
|
-
offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
|
|
239
|
-
} else {
|
|
240
|
-
offsetX.value = absoluteOffsetX <= maxWidth * 2 - threshold * 2 ? -maxWidth : -maxWidth * 2;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
isMoving.value = false;
|
|
249
|
+
function handleClick() {
|
|
250
|
+
emit("click");
|
|
244
251
|
}
|
|
245
252
|
</script>
|
|
246
253
|
|
|
@@ -255,5 +262,9 @@ function touchCancel() {
|
|
|
255
262
|
@apply tw-bg-[#ff4a4a];
|
|
256
263
|
}
|
|
257
264
|
}
|
|
265
|
+
|
|
266
|
+
&_selected {
|
|
267
|
+
@apply tw-bg-[#dfeef9] #{!important};
|
|
268
|
+
}
|
|
258
269
|
}
|
|
259
270
|
</style>
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
v-if="items && items.length"
|
|
65
65
|
ref="scrollContainer"
|
|
66
66
|
:no-padding="true"
|
|
67
|
-
class="tw-grow tw-basis-0"
|
|
67
|
+
class="tw-grow tw-basis-0 tw-relative"
|
|
68
68
|
:use-ptr="pullToReload"
|
|
69
69
|
@scroll:ptr="$emit('scroll:ptr')"
|
|
70
70
|
>
|
|
@@ -77,8 +77,10 @@
|
|
|
77
77
|
:item="item"
|
|
78
78
|
:action-builder="itemActionBuilder"
|
|
79
79
|
:swiping-item="mobileSwipeItem"
|
|
80
|
+
:is-selected="isSelected(item)"
|
|
80
81
|
@click="$emit('itemClick', item)"
|
|
81
82
|
@swipe-start="handleSwipe"
|
|
83
|
+
@select="rowCheckbox(item)"
|
|
82
84
|
>
|
|
83
85
|
<slot
|
|
84
86
|
name="mobile-item"
|
|
@@ -118,7 +120,7 @@
|
|
|
118
120
|
</div>
|
|
119
121
|
</th>
|
|
120
122
|
<th
|
|
121
|
-
v-if="itemActionBuilder"
|
|
123
|
+
v-if="enableItemActions && itemActionBuilder"
|
|
122
124
|
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]"
|
|
123
125
|
>
|
|
124
126
|
<div class="tw-w-3 tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end">
|
|
@@ -262,7 +264,7 @@
|
|
|
262
264
|
<div class="tw-w-px tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-bg-[#e5e7eb]"></div>
|
|
263
265
|
</td>
|
|
264
266
|
<td
|
|
265
|
-
v-if="itemActionBuilder && typeof item === 'object'"
|
|
267
|
+
v-if="enableItemActions && itemActionBuilder && typeof item === 'object'"
|
|
266
268
|
class="tw-box-border tw-overflow-visible tw-w-[21px] tw-max-w-[21px] tw-min-w-[21px] tw-relative"
|
|
267
269
|
@click.stop
|
|
268
270
|
>
|
|
@@ -298,7 +300,7 @@
|
|
|
298
300
|
:key="i"
|
|
299
301
|
:class="[
|
|
300
302
|
'tw-flex tw-flex-row tw-items-center tw-text-[#319ed4] tw-cursor-pointer',
|
|
301
|
-
`vc-table__body-actions-item_${itemAction.
|
|
303
|
+
`vc-table__body-actions-item_${itemAction.type}`,
|
|
302
304
|
]"
|
|
303
305
|
@click.stop="itemAction.clickHandler(item)"
|
|
304
306
|
>
|
|
@@ -477,7 +479,7 @@ const props = withDefaults(
|
|
|
477
479
|
defineProps<{
|
|
478
480
|
columns: ITableColumns[];
|
|
479
481
|
items: T[];
|
|
480
|
-
itemActionBuilder?: (item: T) => IActionBuilderResult[];
|
|
482
|
+
itemActionBuilder?: (item: T) => IActionBuilderResult[] | undefined;
|
|
481
483
|
sort?: string;
|
|
482
484
|
multiselect?: boolean;
|
|
483
485
|
expanded?: boolean;
|
|
@@ -500,6 +502,7 @@ const props = withDefaults(
|
|
|
500
502
|
reorderableRows?: boolean;
|
|
501
503
|
stateKey: string;
|
|
502
504
|
selectAll?: boolean;
|
|
505
|
+
enableItemActions?: boolean;
|
|
503
506
|
}>(),
|
|
504
507
|
{
|
|
505
508
|
items: () => [],
|
|
@@ -788,12 +791,14 @@ const arrowStyle = computed(() => {
|
|
|
788
791
|
});
|
|
789
792
|
|
|
790
793
|
async function calculateActions(items: T[]) {
|
|
791
|
-
if (typeof props.itemActionBuilder === "function") {
|
|
792
|
-
const populatedItems = [];
|
|
794
|
+
if (props.enableItemActions && typeof props.itemActionBuilder === "function") {
|
|
795
|
+
const populatedItems: IActionBuilderResult[][] = [];
|
|
793
796
|
for (let index = 0; index < items.length; index++) {
|
|
794
797
|
if (typeof items[index] === "object") {
|
|
795
798
|
const elementWithActions = await props.itemActionBuilder(items[index]);
|
|
796
|
-
|
|
799
|
+
if (elementWithActions) {
|
|
800
|
+
populatedItems.push(elementWithActions);
|
|
801
|
+
}
|
|
797
802
|
}
|
|
798
803
|
}
|
|
799
804
|
itemActions.value = populatedItems;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../shared/modules/assets/locales/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,EAAE,EAAE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../shared/modules/assets-manager/locales/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,EAAE,EAAE,CAAC"}
|
package/dist/ui/components/organisms/vc-popup/_internal/vc-popup-error/vc-popup-error.vue.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export interface Emits {
|
|
2
|
-
(event: "close"): void;
|
|
3
|
-
}
|
|
4
|
-
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
5
|
-
close: () => void;
|
|
6
|
-
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
|
|
7
|
-
onClose?: (() => any) | undefined;
|
|
8
|
-
}, {}, {}>, {
|
|
9
|
-
default?(_: {}): any;
|
|
10
|
-
}>;
|
|
11
|
-
export default _default;
|
|
12
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
13
|
-
new (): {
|
|
14
|
-
$slots: S;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=vc-popup-error.vue.d.ts.map
|
package/dist/ui/components/organisms/vc-popup/_internal/vc-popup-error/vc-popup-error.vue.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"vc-popup-error.vue.d.ts","sourceRoot":"","sources":["../../../../../../../ui/components/organisms/vc-popup/_internal/vc-popup-error/vc-popup-error.vue.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB;;;;;;;;AAoHD,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|
package/dist/ui/components/organisms/vc-popup/_internal/vc-popup-warning/vc-popup-warning.vue.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export interface Emits {
|
|
2
|
-
(event: "close"): void;
|
|
3
|
-
(event: "confirm"): void;
|
|
4
|
-
}
|
|
5
|
-
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
6
|
-
close: () => void;
|
|
7
|
-
confirm: () => void;
|
|
8
|
-
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
|
|
9
|
-
onClose?: (() => any) | undefined;
|
|
10
|
-
onConfirm?: (() => any) | undefined;
|
|
11
|
-
}, {}, {}>, {
|
|
12
|
-
default?(_: {}): any;
|
|
13
|
-
}>;
|
|
14
|
-
export default _default;
|
|
15
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
16
|
-
new (): {
|
|
17
|
-
$slots: S;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=vc-popup-warning.vue.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"vc-popup-warning.vue.d.ts","sourceRoot":"","sources":["../../../../../../../ui/components/organisms/vc-popup/_internal/vc-popup-warning/vc-popup-warning.vue.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;CAC1B;;;;;;;;;;AAgJD,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"ASSETS": {
|
|
3
|
-
"PAGES": {
|
|
4
|
-
"DETAILS": {
|
|
5
|
-
"SUBTITLE": "Asset edit",
|
|
6
|
-
"TOOLBAR": {
|
|
7
|
-
"SAVE": "Save",
|
|
8
|
-
"DELETE": "Delete"
|
|
9
|
-
},
|
|
10
|
-
"FIELDS": {
|
|
11
|
-
"SIZE": "Size",
|
|
12
|
-
"CREATED_DATE": "Created date",
|
|
13
|
-
"URL": "Url",
|
|
14
|
-
"COPY":"Copy link",
|
|
15
|
-
"NAME": {
|
|
16
|
-
"TITLE": "Asset name",
|
|
17
|
-
"PLACEHOLDER": "Enter asset name"
|
|
18
|
-
},
|
|
19
|
-
"ALT": {
|
|
20
|
-
"TITLE": "Image alternative text",
|
|
21
|
-
"PLACEHOLDER": "Enter image alt text",
|
|
22
|
-
"TOOLTIP": "This text will be displayed in case of disabled/unloaded image on the page"
|
|
23
|
-
},
|
|
24
|
-
"DESCRIPTION": {
|
|
25
|
-
"TITLE": "Meta description",
|
|
26
|
-
"PLACEHOLDER": "Enter meta description"
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"ASSETS_MANAGER": {
|
|
3
|
-
"TITLE": "Assets",
|
|
4
|
-
"TOOLBAR": {
|
|
5
|
-
"SAVE":"Save",
|
|
6
|
-
"REFRESH":"Resfresh",
|
|
7
|
-
"ADD": "Add",
|
|
8
|
-
"DELETE": "Delete selected"
|
|
9
|
-
},
|
|
10
|
-
"EMPTY": {
|
|
11
|
-
"NO_ASSETS":"Drag & drop assets here or click 'Upload' button",
|
|
12
|
-
"UPLOAD": "Upload"
|
|
13
|
-
},
|
|
14
|
-
"TABLE":{
|
|
15
|
-
"HEADER":{
|
|
16
|
-
"IMAGE": "Img",
|
|
17
|
-
"NAME":"Name",
|
|
18
|
-
"SIZE":"Size",
|
|
19
|
-
"SORT_ORDER":"Sort order",
|
|
20
|
-
"CREATED_DATE":"Created date"
|
|
21
|
-
},
|
|
22
|
-
"ACTIONS":{
|
|
23
|
-
"DELETE":"Delete",
|
|
24
|
-
"EDIT": "Edit"
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|