commit 1cb67ddba8759c430e935d38cbe7ec42909628cf Author: sajjad Date: Mon Mar 18 04:03:05 2024 -0700 fix diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..76add87 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +dist \ No newline at end of file diff --git a/build/rollup.config.js b/build/rollup.config.js new file mode 100644 index 0000000..b0bdf52 --- /dev/null +++ b/build/rollup.config.js @@ -0,0 +1,18 @@ +import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6 +import vue from 'rollup-plugin-vue'; // Handle .vue SFC files +import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support +export default { + input: 'src/main.js', // Path relative to package.json + output: { + name: 'MeshkeeToast', + exports: 'named', + }, + plugins: [ + commonjs(), + vue({ + css: true, // Dynamically inject css as a \ No newline at end of file diff --git a/src/api.js b/src/api.js new file mode 100644 index 0000000..811a1d0 --- /dev/null +++ b/src/api.js @@ -0,0 +1,55 @@ +import MeshkeeToast from './MeshkeeToast.vue' +import { createComponent } from './helpers'; +import eventBus from './bus.js'; + +export const useToast = (globalProps = {}) => { + return { + open(options) { + let message = null; + if (typeof options === 'string') message = options; + + const defaultProps = { + message + }; + + const propsData = Object.assign({}, defaultProps, globalProps, options); + const instance = createComponent(MeshkeeToast, propsData, document.body); + return { + dismiss: instance.dismiss + } + }, + clear() { + eventBus.emit('toast-clear') + }, + success(message, options = {}) { + return this.open(Object.assign({}, { + message, + type: 'success' + }, options)) + }, + error(message, options = {}) { + return this.open(Object.assign({}, { + message, + type: 'error' + }, options)) + }, + info(message, options = {}) { + return this.open(Object.assign({}, { + message, + type: 'info' + }, options)) + }, + warning(message, options = {}) { + return this.open(Object.assign({}, { + message, + type: 'warning' + }, options)) + }, + default(message, options = {}) { + return this.open(Object.assign({}, { + message, + type: 'default' + }, options)) + } + } +}; diff --git a/src/bus.js b/src/bus.js new file mode 100644 index 0000000..f6505f0 --- /dev/null +++ b/src/bus.js @@ -0,0 +1,3 @@ +import mitt from 'mitt' +const eventBus = mitt(); +export default eventBus; \ No newline at end of file diff --git a/src/helpers.js b/src/helpers.js new file mode 100644 index 0000000..fab2da6 --- /dev/null +++ b/src/helpers.js @@ -0,0 +1,49 @@ +import Vue from 'vue'; +export const removeElement = (el) => { + console.log(el); + if (typeof el.remove !== 'undefined') { + el.remove() + } else { + if (el.parentNode) el.parentNode.removeChild(el) + } +} + +export const createComponent = (component, props, parentContainer, slots = {}) => { + // const vNode = h(component, props, slots) + // const container = document.createElement('div'); + // console.log(parentContainer, container); + // container.classList.add('v-toast--pending') + // parentContainer.appendChild(container); + // h(vNode, container); + + // return vNode.component + // return Vue.component('MeshkeeToast', { + // render: (createElement) => { + // return createElement( + // 'div', + // { class: { 'v-toast--pending': true } }, + // MeshkeeToast + // ) + // } + // }); + const toastTpl = Vue.extend({ + data() { + return { + } + }, + render(h) { + return h( + component, + { + class: ['lx-toast', 'lx-toast-lx-word-wrap'], + style: this.extStyle, + props + } + ) + } + }); + let toastVM = new toastTpl(); + const tpl = toastVM.$mount().$el; + parentContainer.appendChild(tpl); + return toastVM.$children[0]; +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..e442c42 --- /dev/null +++ b/src/main.js @@ -0,0 +1,51 @@ +// Import vue component +import Vue from 'vue'; +import MeshkeeToast from './MeshkeeToast.vue'; +import { useToast } from './api'; + +// Vue.prototype.$meshkeeToast = function () { +// console.log(324); +// return 321; +// } +// // Declare install function executed by Vue.use() +// export function install(Vue) { +// console.log(43); + +// if (install.installed) return; +// install.installed = true; +// Vue.prototype.$meshkeeToast = function () { +// console.log(324); +// return 321; +// } +// Vue.component('MeshkeeToast', MeshkeeToast); +// } + +// // Create module definition for Vue.use() +// const plugin = { +// install, +// }; + +// // Auto-install when vue is found (eg. in browser via