wip: plugins

packages/plugins/loading/index.js

@@ -0,0 +1,41 @@
+import { h, Transition, onMounted } from 'vue'
+import { Spin } from 'ant-design-vue'
+import { createReactivePlugin, createGlobalNode, createChildApp } from '../../utils/create'
+
+let uid = 0
+
+const defaults = {
+    group: '__default_group__',
+    delay: 0
+}
+
+const Plugin = createReactivePlugin({
+    isActive: false
+}, {
+    show (options) {
+        Plugin.isActive = true
+        const el = createGlobalNode('pro-loading')
+        const app = createChildApp({
+            setup () {
+                function onAfterLeave () {
+
+                }
+
+                return () => {
+                    const props = {
+                        onAfterLeave: onAfterLeave
+                    }
+                    return h(Transition, props, Spin)
+                }
+            }
+        })
+    },
+    hide () {
+
+    },
+    install () {
+
+    }
+})
+
+export default Plugin

packages/plugins/screen/index.js

@@ -3,13 +3,12 @@ import { addClass, getWindowSize, removeClass } from '../../utils/dom'
 import { addEvt } from '../../utils/event'
 import { debounce, pick } from 'lodash-es'
 
-const SIZE_LIST = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
-
 const BaseKey = Symbol('Screen')
 
 export function createScreen (options) {
     const { sizes = {}, delay = 16, classes } = options || {}
 
+    const SIZE_LIST = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
     const baseSizes = {
         xs: 0,
         sm: 576,

packages/utils/create.js

@@ -0,0 +1,50 @@
+import { createApp, reactive } from 'vue'
+import { omit } from 'lodash-es'
+
+const bodyNode = document.body
+const nodes = []
+
+export function createChildApp (rootComponent, parentApp) {
+    const appContext = omit(parentApp._context, ['reload'])
+
+    const app = createApp(rootComponent)
+    app.config.globalProperties = parentApp.config.globalProperties
+
+    Object.assign(app._context, appContext)
+    return app
+}
+
+export function createGlobalNode (id, className) {
+    const el = document.createElement('div')
+    if (className !== undefined) {
+        el.className = className
+    }
+    el.id = id
+    bodyNode.appendChild(el)
+    nodes.push(el)
+    return el
+}
+
+export function removeGlobalNode (el) {
+    const index = nodes.indexOf(el)
+    nodes.splice(index, 1)
+    el.remove()
+}
+
+export function createReactivePlugin (state, plugin) {
+    const pluginState = reactive(state)
+
+    for (const name in pluginState) {
+        Object.defineProperty(plugin, name, {
+            enumerable: true,
+            get () {
+                return pluginState[name]
+            },
+            set (value) {
+                pluginState[name] = value
+            }
+        })
+    }
+
+    return plugin
+}