@tak-ps/vue-tabler 4.0.0 → 4.1.0
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 +4 -0
- package/components/Delete.vue +27 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/components/Delete.vue
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<button
|
|
5
5
|
class='btn btn-outline-danger'
|
|
6
6
|
:disabled='props.disabled'
|
|
7
|
-
@click.stop.prevent='
|
|
7
|
+
@click.stop.prevent='openModal'
|
|
8
8
|
>
|
|
9
9
|
<span v-text='props.label' />
|
|
10
10
|
</button>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
:class='{
|
|
16
16
|
"cursor-pointer": !props.disabled,
|
|
17
17
|
}'
|
|
18
|
-
@click.stop.prevent='
|
|
18
|
+
@click.stop.prevent='openModal'
|
|
19
19
|
>
|
|
20
20
|
<IconTrash
|
|
21
21
|
:size='32'
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<TablerIconButton
|
|
32
32
|
title='Delete'
|
|
33
33
|
:disabled='props.disabled'
|
|
34
|
-
@click.stop.prevent='
|
|
34
|
+
@click.stop.prevent='openModal'
|
|
35
35
|
>
|
|
36
36
|
<IconTrash
|
|
37
37
|
:size='props.size'
|
|
@@ -52,12 +52,25 @@
|
|
|
52
52
|
Deletion Confirmation
|
|
53
53
|
</div>
|
|
54
54
|
<div class='modal-body text-center py-4'>
|
|
55
|
-
Are you sure you wish to perform this deletion
|
|
55
|
+
<div>Are you sure you wish to perform this deletion?</div>
|
|
56
|
+
<div
|
|
57
|
+
v-if='props.match'
|
|
58
|
+
class='mt-3'
|
|
59
|
+
>
|
|
60
|
+
<div class='mb-2'>
|
|
61
|
+
Type <span class='fw-bold'>{{ props.match }}</span> to confirm
|
|
62
|
+
</div>
|
|
63
|
+
<TablerInput
|
|
64
|
+
v-model='matchInput'
|
|
65
|
+
:placeholder='props.match'
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
56
68
|
</div>
|
|
57
69
|
<div class='modal-footer'>
|
|
58
70
|
<div
|
|
59
71
|
class='btn btn-danger'
|
|
60
|
-
|
|
72
|
+
:class='{ "disabled": props.match && matchInput !== props.match }'
|
|
73
|
+
@click='(props.match && matchInput !== props.match) ? undefined : deleting()'
|
|
61
74
|
>
|
|
62
75
|
<TablerLoading
|
|
63
76
|
v-if='loading'
|
|
@@ -83,6 +96,7 @@ import { ref } from 'vue'
|
|
|
83
96
|
import TablerModal from './Modal.vue';
|
|
84
97
|
import TablerIconButton from './IconButton.vue';
|
|
85
98
|
import TablerLoading from './Loading.vue';
|
|
99
|
+
import TablerInput from './input/Input.vue';
|
|
86
100
|
import {
|
|
87
101
|
IconTrash
|
|
88
102
|
} from '@tabler/icons-vue';
|
|
@@ -92,6 +106,7 @@ export interface DeleteProps {
|
|
|
92
106
|
size?: number;
|
|
93
107
|
disabled?: boolean;
|
|
94
108
|
displaytype?: 'button' | 'icon' | 'menu';
|
|
109
|
+
match?: string;
|
|
95
110
|
}
|
|
96
111
|
|
|
97
112
|
const props = withDefaults(defineProps<DeleteProps>(), {
|
|
@@ -107,6 +122,13 @@ const emit = defineEmits<{
|
|
|
107
122
|
|
|
108
123
|
const loading = ref(false)
|
|
109
124
|
const modal = ref(false)
|
|
125
|
+
const matchInput = ref('')
|
|
126
|
+
|
|
127
|
+
const openModal = () => {
|
|
128
|
+
if (props.disabled) return;
|
|
129
|
+
matchInput.value = '';
|
|
130
|
+
modal.value = true;
|
|
131
|
+
}
|
|
110
132
|
|
|
111
133
|
const deleting = () => {
|
|
112
134
|
loading.value = true;
|