@vitekdev/vue-confirm-modal 1.0.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/README.md +60 -0
- package/dist/ConfirmModalHost.vue.d.ts +14 -0
- package/dist/ConfirmModalHost.vue.d.ts.map +1 -0
- package/dist/confirmModalStore.d.ts +65 -0
- package/dist/confirmModalStore.d.ts.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/vue-confirm-modal.es.js +81 -0
- package/dist/vue-confirm-modal.umd.js +1 -0
- package/package.json +67 -0
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Vue Confirm Modal
|
|
2
|
+
|
|
3
|
+
[](https://github.com/vitek-dev/vue-confirm-modal/actions/workflows/publish.yml)
|
|
4
|
+
[](https://www.npmjs.com/package/vd-vue-confirm-modal)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install vd-vue-confirm-modal
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### Dependencies
|
|
18
|
+
|
|
19
|
+
- Pinia store
|
|
20
|
+
- Bootstrap CSS or Tabler.io Admin Dashboard CSS
|
|
21
|
+
|
|
22
|
+
### Register Host component in your main App component
|
|
23
|
+
|
|
24
|
+
```vue
|
|
25
|
+
// example:
|
|
26
|
+
<template>
|
|
27
|
+
<div>
|
|
28
|
+
<ConfirmModalHost :default-messages="{ title: 'Confirm action', description: 'Are you sure you want to perform this action?', confirmLabel: 'Yes', cancelLabel: 'No' }" />
|
|
29
|
+
|
|
30
|
+
<RouterView />
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Usage
|
|
36
|
+
|
|
37
|
+
```vue
|
|
38
|
+
<script setup>
|
|
39
|
+
import { useConfirmModalStore } from 'vue-confirm-modal'
|
|
40
|
+
|
|
41
|
+
const confirmModal = useConfirmModalStore()
|
|
42
|
+
|
|
43
|
+
async function deleteItem() {
|
|
44
|
+
const confirmed = await confirmModal.open({
|
|
45
|
+
title: 'Delete item?',
|
|
46
|
+
description: 'Are you sure you want to delete this item? This action cannot be undone.',
|
|
47
|
+
confirmLabel: 'Delete',
|
|
48
|
+
cancelLabel: 'Cancel'
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
if (confirmed) {
|
|
52
|
+
// TODO: Perform delete action
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<template>
|
|
58
|
+
<button @click="deleteItem">Delete</button>
|
|
59
|
+
</template>
|
|
60
|
+
```
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DefaultMessages } from './confirmModalStore';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
3
|
+
defaultMessages: {
|
|
4
|
+
type: () => DefaultMessages;
|
|
5
|
+
required: true;
|
|
6
|
+
};
|
|
7
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
8
|
+
defaultMessages: {
|
|
9
|
+
type: () => DefaultMessages;
|
|
10
|
+
required: true;
|
|
11
|
+
};
|
|
12
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
13
|
+
export default _default;
|
|
14
|
+
//# sourceMappingURL=ConfirmModalHost.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfirmModalHost.vue.d.ts","sourceRoot":"","sources":["../src/ConfirmModalHost.vue"],"names":[],"mappings":"AA6DA,OAAO,EAAE,eAAe,EAAwB,MAAM,qBAAqB,CAAA;;;cAkLvD,MAAM,eAAe;;;;;cAArB,MAAM,eAAe;;;;AAPzC,wBAWG"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
export type ConfirmPayload = {
|
|
2
|
+
title?: string;
|
|
3
|
+
description?: string;
|
|
4
|
+
confirmLabel?: string;
|
|
5
|
+
cancelLabel?: string;
|
|
6
|
+
};
|
|
7
|
+
export type DefaultMessages = {
|
|
8
|
+
title: string;
|
|
9
|
+
description: string;
|
|
10
|
+
confirmLabel: string;
|
|
11
|
+
cancelLabel: string;
|
|
12
|
+
};
|
|
13
|
+
export declare const useConfirmModalStore: import("pinia").StoreDefinition<"vd__confirmModal", Pick<{
|
|
14
|
+
visible: import("vue").Ref<boolean, boolean>;
|
|
15
|
+
options: import("vue").Ref<{
|
|
16
|
+
title?: string | undefined;
|
|
17
|
+
description?: string | undefined;
|
|
18
|
+
confirmLabel?: string | undefined;
|
|
19
|
+
cancelLabel?: string | undefined;
|
|
20
|
+
}, ConfirmPayload | {
|
|
21
|
+
title?: string | undefined;
|
|
22
|
+
description?: string | undefined;
|
|
23
|
+
confirmLabel?: string | undefined;
|
|
24
|
+
cancelLabel?: string | undefined;
|
|
25
|
+
}>;
|
|
26
|
+
loading: import("vue").Ref<boolean, boolean>;
|
|
27
|
+
open: (payload?: ConfirmPayload) => Promise<boolean>;
|
|
28
|
+
confirm: () => void;
|
|
29
|
+
cancel: () => void;
|
|
30
|
+
}, "visible" | "options" | "loading">, Pick<{
|
|
31
|
+
visible: import("vue").Ref<boolean, boolean>;
|
|
32
|
+
options: import("vue").Ref<{
|
|
33
|
+
title?: string | undefined;
|
|
34
|
+
description?: string | undefined;
|
|
35
|
+
confirmLabel?: string | undefined;
|
|
36
|
+
cancelLabel?: string | undefined;
|
|
37
|
+
}, ConfirmPayload | {
|
|
38
|
+
title?: string | undefined;
|
|
39
|
+
description?: string | undefined;
|
|
40
|
+
confirmLabel?: string | undefined;
|
|
41
|
+
cancelLabel?: string | undefined;
|
|
42
|
+
}>;
|
|
43
|
+
loading: import("vue").Ref<boolean, boolean>;
|
|
44
|
+
open: (payload?: ConfirmPayload) => Promise<boolean>;
|
|
45
|
+
confirm: () => void;
|
|
46
|
+
cancel: () => void;
|
|
47
|
+
}, never>, Pick<{
|
|
48
|
+
visible: import("vue").Ref<boolean, boolean>;
|
|
49
|
+
options: import("vue").Ref<{
|
|
50
|
+
title?: string | undefined;
|
|
51
|
+
description?: string | undefined;
|
|
52
|
+
confirmLabel?: string | undefined;
|
|
53
|
+
cancelLabel?: string | undefined;
|
|
54
|
+
}, ConfirmPayload | {
|
|
55
|
+
title?: string | undefined;
|
|
56
|
+
description?: string | undefined;
|
|
57
|
+
confirmLabel?: string | undefined;
|
|
58
|
+
cancelLabel?: string | undefined;
|
|
59
|
+
}>;
|
|
60
|
+
loading: import("vue").Ref<boolean, boolean>;
|
|
61
|
+
open: (payload?: ConfirmPayload) => Promise<boolean>;
|
|
62
|
+
confirm: () => void;
|
|
63
|
+
cancel: () => void;
|
|
64
|
+
}, "open" | "confirm" | "cancel">>;
|
|
65
|
+
//# sourceMappingURL=confirmModalStore.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirmModalStore.d.ts","sourceRoot":"","sources":["../src/confirmModalStore.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAKD,eAAO,MAAM,oBAAoB;;;gBAhBvB,MAAM;sBACA,MAAM;uBACL,MAAM;sBACP,MAAM;;gBAHZ,MAAM;sBACA,MAAM;uBACL,MAAM;sBACP,MAAM;;;qBAkBG,cAAc;;;;;;gBArB7B,MAAM;sBACA,MAAM;uBACL,MAAM;sBACP,MAAM;;gBAHZ,MAAM;sBACA,MAAM;uBACL,MAAM;sBACP,MAAM;;;qBAkBG,cAAc;;;;;;gBArB7B,MAAM;sBACA,MAAM;uBACL,MAAM;sBACP,MAAM;;gBAHZ,MAAM;sBACA,MAAM;uBACL,MAAM;sBACP,MAAM;;;qBAkBG,cAAc;;;kCA8BrC,CAAA"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC1D,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { ref as r, defineComponent as b, openBlock as m, createBlock as v, Teleport as g, unref as t, createElementBlock as p, createElementVNode as e, withModifiers as k, createVNode as M, toDisplayString as d, createCommentVNode as _ } from "vue";
|
|
2
|
+
import { defineStore as C, storeToRefs as w } from "pinia";
|
|
3
|
+
import { IconAlertTriangle as y } from "@tabler/icons-vue";
|
|
4
|
+
let l = null;
|
|
5
|
+
const x = C("vd__confirmModal", () => {
|
|
6
|
+
const s = r(!1), n = r({}), c = r(!1);
|
|
7
|
+
return {
|
|
8
|
+
visible: s,
|
|
9
|
+
options: n,
|
|
10
|
+
loading: c,
|
|
11
|
+
open: (i = {}) => (n.value = i, s.value = !0, new Promise((u) => {
|
|
12
|
+
l = u;
|
|
13
|
+
})),
|
|
14
|
+
confirm: () => {
|
|
15
|
+
s.value = !1, l == null || l(!0), l = null;
|
|
16
|
+
},
|
|
17
|
+
cancel: () => {
|
|
18
|
+
s.value = !1, l == null || l(!1), l = null;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
}), L = { key: 0 }, $ = { class: "modal-dialog modal-sm modal-dialog-centered" }, h = { class: "modal-content" }, B = { class: "modal-body text-center py-4" }, N = { class: "text-secondary" }, S = { class: "modal-footer" }, T = { class: "w-100" }, V = { class: "row" }, E = { class: "col" }, H = { class: "col" }, A = /* @__PURE__ */ b({
|
|
22
|
+
__name: "ConfirmModalHost",
|
|
23
|
+
props: {
|
|
24
|
+
defaultMessages: {
|
|
25
|
+
type: Object,
|
|
26
|
+
required: !0
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
setup(s) {
|
|
30
|
+
const n = x(), { visible: c, options: a } = w(n);
|
|
31
|
+
return (f, o) => (m(), v(g, { to: "body" }, [
|
|
32
|
+
t(c) ? (m(), p("div", L, [
|
|
33
|
+
e("div", {
|
|
34
|
+
class: "modal modal-blur show d-block",
|
|
35
|
+
onClick: o[3] || (o[3] = k((i) => t(n).cancel(), ["self"]))
|
|
36
|
+
}, [
|
|
37
|
+
e("div", $, [
|
|
38
|
+
e("div", h, [
|
|
39
|
+
e("button", {
|
|
40
|
+
class: "btn-close",
|
|
41
|
+
onClick: o[0] || (o[0] = (i) => t(n).cancel())
|
|
42
|
+
}),
|
|
43
|
+
o[4] || (o[4] = e("div", { class: "modal-status bg-danger" }, null, -1)),
|
|
44
|
+
e("div", B, [
|
|
45
|
+
M(t(y), {
|
|
46
|
+
size: 48,
|
|
47
|
+
class: "mb-2 text-danger"
|
|
48
|
+
}),
|
|
49
|
+
e("h3", null, d(t(a).title || s.defaultMessages.title), 1),
|
|
50
|
+
e("div", N, d(t(a).description || s.defaultMessages.description), 1)
|
|
51
|
+
]),
|
|
52
|
+
e("div", S, [
|
|
53
|
+
e("div", T, [
|
|
54
|
+
e("div", V, [
|
|
55
|
+
e("div", E, [
|
|
56
|
+
e("button", {
|
|
57
|
+
class: "btn w-100",
|
|
58
|
+
onClick: o[1] || (o[1] = (i) => t(n).cancel())
|
|
59
|
+
}, d(t(a).cancelLabel || s.defaultMessages.cancelLabel), 1)
|
|
60
|
+
]),
|
|
61
|
+
e("div", H, [
|
|
62
|
+
e("button", {
|
|
63
|
+
class: "btn btn-danger w-100",
|
|
64
|
+
onClick: o[2] || (o[2] = (i) => t(n).confirm())
|
|
65
|
+
}, d(t(a).confirmLabel || s.defaultMessages.confirmLabel), 1)
|
|
66
|
+
])
|
|
67
|
+
])
|
|
68
|
+
])
|
|
69
|
+
])
|
|
70
|
+
])
|
|
71
|
+
])
|
|
72
|
+
]),
|
|
73
|
+
o[5] || (o[5] = e("div", { class: "modal-backdrop fade show" }, null, -1))
|
|
74
|
+
])) : _("", !0)
|
|
75
|
+
]));
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
export {
|
|
79
|
+
A as ConfirmModalHost,
|
|
80
|
+
x as useConfirmModalStore
|
|
81
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("pinia"),require("@tabler/icons-vue")):typeof define=="function"&&define.amd?define(["exports","vue","pinia","@tabler/icons-vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.VueConfirmModal={},n.Vue,n.Pinia,n.TablerIconsVue))})(this,function(n,e,r,f){"use strict";let o=null;const c=r.defineStore("vd__confirmModal",()=>{const s=e.ref(!1),l=e.ref({}),a=e.ref(!1);return{visible:s,options:l,loading:a,open:(d={})=>(l.value=d,s.value=!0,new Promise(_=>{o=_})),confirm:()=>{s.value=!1,o==null||o(!0),o=null},cancel:()=>{s.value=!1,o==null||o(!1),o=null}}}),m={key:0},b={class:"modal-dialog modal-sm modal-dialog-centered"},p={class:"modal-content"},V={class:"modal-body text-center py-4"},u={class:"text-secondary"},N={class:"modal-footer"},E={class:"w-100"},g={class:"row"},y={class:"col"},M={class:"col"},k=e.defineComponent({__name:"ConfirmModalHost",props:{defaultMessages:{type:Object,required:!0}},setup(s){const l=c(),{visible:a,options:i}=r.storeToRefs(l);return(C,t)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(a)?(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("div",{class:"modal modal-blur show d-block",onClick:t[3]||(t[3]=e.withModifiers(d=>e.unref(l).cancel(),["self"]))},[e.createElementVNode("div",b,[e.createElementVNode("div",p,[e.createElementVNode("button",{class:"btn-close",onClick:t[0]||(t[0]=d=>e.unref(l).cancel())}),t[4]||(t[4]=e.createElementVNode("div",{class:"modal-status bg-danger"},null,-1)),e.createElementVNode("div",V,[e.createVNode(e.unref(f.IconAlertTriangle),{size:48,class:"mb-2 text-danger"}),e.createElementVNode("h3",null,e.toDisplayString(e.unref(i).title||s.defaultMessages.title),1),e.createElementVNode("div",u,e.toDisplayString(e.unref(i).description||s.defaultMessages.description),1)]),e.createElementVNode("div",N,[e.createElementVNode("div",E,[e.createElementVNode("div",g,[e.createElementVNode("div",y,[e.createElementVNode("button",{class:"btn w-100",onClick:t[1]||(t[1]=d=>e.unref(l).cancel())},e.toDisplayString(e.unref(i).cancelLabel||s.defaultMessages.cancelLabel),1)]),e.createElementVNode("div",M,[e.createElementVNode("button",{class:"btn btn-danger w-100",onClick:t[2]||(t[2]=d=>e.unref(l).confirm())},e.toDisplayString(e.unref(i).confirmLabel||s.defaultMessages.confirmLabel),1)])])])])])])]),t[5]||(t[5]=e.createElementVNode("div",{class:"modal-backdrop fade show"},null,-1))])):e.createCommentVNode("",!0)]))}});n.ConfirmModalHost=k,n.useConfirmModalStore=c,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@vitekdev/vue-confirm-modal",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Vue 3 confirm modal component",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Daniel Vitek",
|
|
7
|
+
"email": "daniel@vitek.dev"
|
|
8
|
+
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"url": "git+https://github.com/vitek-dev/vue-confirm-modal.git"
|
|
11
|
+
},
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"type": "module",
|
|
14
|
+
"main": "./dist/vue-confirm-modal.umd.js",
|
|
15
|
+
"module": "./dist/vue-confirm-modal.es.js",
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"import": "./dist/vue-confirm-modal.es.js",
|
|
20
|
+
"require": "./dist/vue-confirm-modal.umd.js",
|
|
21
|
+
"types": "./dist/index.d.ts"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"dist"
|
|
26
|
+
],
|
|
27
|
+
"scripts": {
|
|
28
|
+
"dev": "vite",
|
|
29
|
+
"build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
|
|
30
|
+
"preview": "vite preview",
|
|
31
|
+
"lint": "eslint . --ext .vue,.ts,.js",
|
|
32
|
+
"lint:fix": "eslint . --ext .vue,.ts,.js --fix",
|
|
33
|
+
"format": "prettier --write \"**/*.{vue,ts,js,json}\"",
|
|
34
|
+
"format:check": "prettier --check \"**/*.{vue,ts,js,json}\""
|
|
35
|
+
},
|
|
36
|
+
"keywords": [
|
|
37
|
+
"vue",
|
|
38
|
+
"vue3",
|
|
39
|
+
"modal",
|
|
40
|
+
"confirm",
|
|
41
|
+
"dialog",
|
|
42
|
+
"pinia",
|
|
43
|
+
"component"
|
|
44
|
+
],
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"@tabler/icons-vue": "^3.0.0",
|
|
47
|
+
"pinia": "^2.0.0",
|
|
48
|
+
"vue": "^3.0.0"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@tabler/icons-vue": "^3.0.0",
|
|
52
|
+
"@types/node": "^25.2.3",
|
|
53
|
+
"@typescript-eslint/eslint-plugin": "^8.55.0",
|
|
54
|
+
"@typescript-eslint/parser": "^8.55.0",
|
|
55
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
56
|
+
"eslint": "^9.39.2",
|
|
57
|
+
"eslint-config-prettier": "^10.1.8",
|
|
58
|
+
"eslint-plugin-vue": "^10.8.0",
|
|
59
|
+
"pinia": "^2.0.0",
|
|
60
|
+
"prettier": "^3.8.1",
|
|
61
|
+
"typescript": "^5.0.0",
|
|
62
|
+
"vite": "^5.0.0",
|
|
63
|
+
"vue": "^3.0.0",
|
|
64
|
+
"vue-eslint-parser": "^10.4.0",
|
|
65
|
+
"vue-tsc": "^2.0.0"
|
|
66
|
+
}
|
|
67
|
+
}
|