https://github.com/ztrehagem/vue-modal
Stacking-managed styleless modal library for Vue.js.
https://github.com/ztrehagem/vue-modal
component modal vue vue3 vuejs
Last synced: 3 months ago
JSON representation
Stacking-managed styleless modal library for Vue.js.
- Host: GitHub
- URL: https://github.com/ztrehagem/vue-modal
- Owner: ztrehagem
- License: mit
- Created: 2019-07-27T11:57:57.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2022-05-03T05:48:08.000Z (about 3 years ago)
- Last Synced: 2025-02-15T22:02:37.355Z (4 months ago)
- Topics: component, modal, vue, vue3, vuejs
- Language: TypeScript
- Homepage: https://vue-modal.lib.ztrehagem.dev
- Size: 660 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @ztrehagem/vue-modal
Stacking-managed styleless modal library for Vue.js.
## Features
The modals are managed as a stack structure with functions such as push and pop.
Only the top of the stack is always rendered.
State of stacked modals are kept for each instance by using ``.
In addition, multiple instances of the same modal component can be in the stack.
## Installation
```sh
npm install @ztrehagem/vue-modal
```
## Usage
1. Declare all modal names and their argument schema.
In this example, there is a modal named `hello` with an argument `{ nickname: string }`.
```tsx
export interface ModalTypes {
hello: { nickname: string };
}
```
2. Implement modal components declared above.
```tsx
// HelloModal.tsx
import { useModal, VueModal } from "@ztrehagem/vue-modal";
export default defineComponent({
props: {
args: {
type: Object as PropType,
required: true,
},
},
setup(props) {
const modal = useModal();
const closeModal = (e: Event) => {
e.preventDefault();
modal.pop();
};
return () => (
Hello, {props.args.nickname}!
closeModal
);
},
});
```
3. Implement calling those modals, and mount `` and `` in the root component.
```tsx
// App.tsx
import {
useModal,
VueModalBackdrop,
VueModalRenderer,
} from "@ztrehagem/vue-modal";
export default defineComponent({
setup() {
const modal = useModal();
const nickname = ref("");
const openModal = (e: Event) => {
e.preventDefault();
modal.push("hello", { nickname: nickname.value });
};
return () => (
openModal
);
},
});
```
4. Create the ModalManager instance with the ModalTypes, and provide components for each name declared. Then install the instance to the vue app instance.
```ts
import { ModalManager } from "@ztrehagem/vue-modal";
import HelloModal from "./HelloModal";
import App from "./App";
// Styles for and .
// If you don't use these library components, this is not required.
import "@ztrehagem/vue-modal/style.css";
const modalManager = new ModalManager();
modalManager.addComponent("hello", HelloModal);
// Dynamic import is available through async components.
const asyncHelloModal = defineAsyncComponent(() => import("./HelloModal"));
modalManager.addComponent("hello", asyncHelloModal);
const app = createApp(App);
app.use(modalManager);
app.mount("#app");
```
See [src](./src) in this repo for example usage.
### Library Components
- [``](src/lib/VueModalRenderer.tsx) renders modal components with `` and ``.
- [``](src/lib/VueModal.tsx) provides default styles for CSS transition of modal components. It is optional to use.
- [``](src/lib/VueModalBackdrop.tsx) provides default styles for backdrop of modals. It is also optional to use.
## API
### class `ModalManager`
- see [src/lib/ModalManager.ts](src/lib/ModalManager.ts)