Description

Creates a modal. Modal wraps user input so that it is displayed in the center of the screen. User is responsible for supplying logic to show/hide the modal.

Usage

Import with:

import { ModalWrapper } from '@michael-chiang-dev5/lib-vue-modal'
import '@michael-chiang-dev5/lib-vue-modal/style.css'

Emits

@close - callback that will be called when the top-right 'x' button is clicked

Example

This is how you might write a modal that asks the user to confirm a delete action.

<template>
    <ModalWrapper @close="handleCancel">
        <h1>Are you sure you want to delete?</h1>
        <div class="confirm-delete">
            <div class="actions">
                <button type="button" @click="handleCancel()">
                    No
                </button>
                <button type="button" @click="handleConfirm()">
                    Yes
                </button>
            </div>
        </div>
    </ModalWrapper>
</template>

<script setup>
import { ModalWrapper } from '@michael-chiang-dev5/lib-vue-modal'
import '@michael-chiang-dev5/lib-vue-modal/style.css'
const emit = defineEmits(['confirm', 'cancel'])
const handleCancel = () => emit('cancel')
const handleConfirm = () => emit('confirm')
</script>

Publishing

• copy/paste folder my-library and rename it to <LIB_FOLDER_NAME>
• Search/replace "MyVueComponent" --> <NAME_OF_YOUR_COMPONENT>. Also rename src/components/MyVueComponent.vue
• Give your library a name: Search/replace "@michael-chiang-dev5/example-vue-component-lib" to <NPM_LIBRARY_NAME>
• Test that component transpiles properly with npm run build
• Publish with: npm publish --access public

Importing

• You can import by npm link (preferred)
• You can import by symlinking directly
  • add to package.json: "<NPM_LIBRARY_NAME": "file:<PATH><LIB_FOLDER_NAME>"
• You can import by npm install <NPM_LIBRARY_NAME>

Usage

import { NAME_OF_YOUR_COMPONENT } from 'NPM_LIBRARY_NAME'

Notes

• Note all dependencies are devDependencies. This is because the component is compiled into a single file when bundled as a library.
• For more information (especially about TS) see: https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library-update/