@netang/quasar 0.0.48 → 0.0.50

package/components/data/index.vue

@@ -1,23 +1,23 @@
-<template>
-    <slot :data="data" />
-</template>
-
-<script>
-export default {
-    /**
-     * 标识
-     */
-    name: 'NData',
-
-    /**
-     * 传参
-     */
-    props: {
-        // 数据
-        data: {},
-    },
-}
-</script>
-
-<style>
-</style>
+<template>
+    <slot :data="data" />
+</template>
+
+<script>
+export default {
+    /**
+     * 标识
+     */
+    name: 'NData',
+
+    /**
+     * 传参
+     */
+    props: {
+        // 数据
+        data: {},
+    },
+}
+</script>
+
+<style>
+</style>

package/components/dialog/index.vue

@@ -184,10 +184,10 @@ export default {
 
         function setWH(style, field, sign) {
             if (props[field]) {
-                if (utils.indexOf(props[field], '%') > -1) {
+                if ($n.indexOf(props[field], '%') > -1) {
                     style[field] = props[field].replace('%', sign)
                 } else {
-                    style[field] = utils.px(props[field])
+                    style[field] = $n.px(props[field])
                 }
             }
         }
@@ -231,10 +231,10 @@ export default {
             // 如果是路由路径
             if (props.route) {
                 // 获取路由组件
-                comp = _.get(routers, `${utils.slash(props.route, 'start', false)}.component`)
+                comp = $n.get(routers, `${$n.slash(props.route, 'start', false)}.component`)
 
             // 如果有组件标识
-            } else if (props.name && _.has(components, props.name)) {
+            } else if (props.name && $n.has(components, props.name)) {
                 // 获取自定义组件
                 comp = components[props.name]
             }
@@ -245,7 +245,7 @@ export default {
             }
 
             // 如果是方法, 则说明是异步组件
-            if (_.isFunction(comp)) {
+            if ($n.isFunction(comp)) {
                 return defineAsyncComponent(comp)
             }
 
@@ -265,7 +265,7 @@ export default {
 
             return props.route ?
                 // 如果是路由路径, 则获取路由标题
-                _.get(routers, `${utils.slash(props.route, 'start', false)}.meta.title`, '')
+                $n.get(routers, `${$n.slash(props.route, 'start', false)}.meta.title`, '')
                 : ''
         })
 
@@ -285,17 +285,17 @@ export default {
         async function onDialogConfirm() {
 
             // 如果有确定按钮
-            if (_.isFunction(props.onConfirm)) {
+            if ($n.isFunction(props.onConfirm)) {
 
-                if (! _.isFunction(compSubmit)) {
+                if (! $n.isFunction(compSubmit)) {
                     // 轻提示
-                    utils.toast({
+                    $n.toast({
                         message: '未调用 $dialog.submit 方法',
                     })
                     return
                 }
 
-                const res = await utils.runAsync(props.onConfirm)(await utils.runAsync(compSubmit)(), hide)
+                const res = await $n.runAsync(props.onConfirm)(await $n.runAsync(compSubmit)(), hide)
                 if (res === false) {
                     return
                 }

package/components/dialog-table/index.vue

@@ -53,7 +53,7 @@ export default {
         function onDialog() {
 
             // 创建对话框
-            utils.$dialog.create({
+            $n.$dialog.create({
                 // 标题
                 title: props.title,
                 // 宽

package/components/dragger/index.vue

@@ -68,7 +68,7 @@ export default {
          */
         const isDrag = computed(function() {
             return props.drag
-                && utils.isValidArray(props.modelValue)
+                && $n.isValidArray(props.modelValue)
                 && props.modelValue.length > 1
         })
 
@@ -101,7 +101,7 @@ export default {
             if (isDrag.value) {
 
                 // 如果为火狐浏览器, 则必须要setData
-                // if (_.ua.firefox) {
+                // if ($n.ua.firefox) {
                 //     e.dataTransfer.setData('info', e.target.id)
                 // }
 

package/components/drawer/index.vue

@@ -126,7 +126,7 @@ export default {
         }
 
         // 创建防抖睡眠方法
-        const sleep = utils.debounceSleep()
+        const sleep = $n.debounceSleep()
 
         // 缓存名
         let cacheName = ''
@@ -138,10 +138,10 @@ export default {
         if ($q.platform.is.mobile) {
 
             // 获取手机端百分比值
-            let res = utils.percentValue(props.mobileWidth, true)
+            let res = $n.percentValue(props.mobileWidth, true)
 
             // 如果是百分比值
-            if (! _.isNil(res)) {
+            if (! $n.isNil(res)) {
                 // 原始尺寸 = 屏幕宽度 * 百分比
                 if (res) {
                     originalWidth = $q.screen.width * res
@@ -149,7 +149,7 @@ export default {
 
             } else {
                 // 原始尺寸 = 屏幕宽度像素
-                res = utils.pxValue(props.mobileWidth)
+                res = $n.pxValue(props.mobileWidth)
                 if (res) {
                     originalWidth = res
                 }
@@ -159,10 +159,10 @@ export default {
         } else if (props.drag && props.cache) {
 
             // 设置缓存名
-            cacheName = `drawer:${props.side}:${props.cache === true ? ($power && $power.routePath ? $power.routePath : utils.router.getRoute('path')) : props.cache}`
+            cacheName = `drawer:${props.side}:${props.cache === true ? ($power && $power.routePath ? $power.routePath : $n.router.getRoute('path')) : props.cache}`
 
             // 从缓存获取宽度
-            const cache = utils.storage.get(cacheName)
+            const cache = $n.storage.get(cacheName)
             if (cache) {
                 originalWidth = cache
             }
@@ -247,7 +247,7 @@ export default {
                 sleep(500)
                     .then(function () {
                         // 设置缓存(永久缓存)
-                        utils.storage.set(cacheName, newWidth, 0)
+                        $n.storage.set(cacheName, newWidth, 0)
                     })
             }
         }

package/components/editor-code/index.vue

@@ -0,0 +1,282 @@
+<template>
+    <!-- :style="currentStyle" -->
+    <div
+        ref="targetRef"
+        :style="currentStyle"
+    ></div>
+</template>
+
+<script>
+import { ref, watch, computed, onMounted } from 'vue'
+
+import script from '@netang/utils/script'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NEditorCode',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值 v-model
+        modelValue: {
+            type: [ String, Number ],
+            default: '',
+        },
+        // 宽度
+        width: {
+            type: [ String, Number ],
+            default: '100%',
+        },
+        // 高度
+        height: [ String, Number ],
+        // 脚本语言
+        language: String,
+        // 是否只读
+        readonly: Boolean,
+        // 代码视图
+        minimap: Boolean,
+        // tab 长度
+        tabSize: {
+            type: Number,
+            default: 4,
+        },
+        // 主题
+        theme: {
+            type: String,
+            default: 'vs',
+        },
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 当前样式
+         */
+        const currentStyle = computed(function () {
+            return {
+                width: $n.isNumeric(props.width) ? $n.px(props.width) : props.width,
+                height: $n.isNumeric(props.height) ? $n.px(props.height) : props.height,
+            }
+        })
+
+        // ==========【数据】=============================================================================================
+
+        // 根节点
+        const targetRef = ref(null)
+
+        // 编辑器实例
+        let $editor = null
+
+        // 停止值观察
+        let stopValueWatcher = false
+
+        // 创建防抖睡眠方法
+        const sleep = $n.debounceSleep()
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(() => props.modelValue, function (val) {
+
+            // 如果停止值观察
+            if (stopValueWatcher) {
+
+                // 则无任何操作
+                return
+            }
+
+            // 取消停止值观察
+            stopValueWatcher = false
+
+            // 设置值
+            setValue(val)
+        })
+
+        // ==========【方法】============================================================================================
+
+        function load() {
+
+            // 如果已加载
+            if (window.monaco) {
+                // 创建编辑器
+                create()
+                return
+            }
+
+            // 版本
+            const version = '0.34.1'
+
+            // 加载 script
+            script([
+                [
+                    `https://cdn.staticfile.org/monaco-editor/${version}/min/vs/loader.js`,
+                    `https://fastly.jsdelivr.net/npm/monaco-editor@${version}/min/vs/loader.js`,
+                    `https://unpkg.com/monaco-editor@${version}/min/vs/loader.js`,
+                ]
+            ])
+                .then(function ([ url ]) {
+
+                    // 按需加载
+                    const _require = window.require
+
+                    // 配置
+                    _require.config({
+                        // 路径
+                        paths: {
+                            vs: url.replace('/loader.js', ''),
+                        },
+                        // 语言
+                        'vs/nls' : {
+                            availableLanguages: {
+                                '*': 'zh-cn',
+                            }
+                        }
+                    })
+
+                    // 加载
+                    _require(['vs/editor/editor.main'], function () {
+                        // 创建编辑器
+                        create()
+                    })
+                })
+        }
+
+        /**
+         * 创建编辑器
+         */
+        function create() {
+
+            // 创建编辑器
+            $editor = monaco.editor.create(targetRef.value, {
+                // 主题
+                theme: props.theme,
+                // 脚本语言
+                language: props.language,
+                // 自动布局
+                automaticLayout: true,
+                // 自动换行
+                wordWrap: 'on',
+                // tab 长度
+                tabSize: props.tabSize,
+                // 代码略缩图
+                minimap: {
+                    enabled: props.minimap,
+                },
+                // 右键
+                contextmenu: true,
+                // 是否只读
+                readOnly: props.readonly,
+            })
+
+            // 监听失去焦点事件
+            $editor.onDidBlurEditorText(function () {
+
+                // 获取编辑器内容
+                const value = getValue()
+                if (value === void 0) {
+                    return
+                }
+
+                // 停止值观察
+                stopValueWatcher = true
+
+                // 触发更新值
+                emit('update:modelValue', value)
+            })
+
+            // 等编辑器全部加载完成后, 设置内容值
+            sleep(300)
+                .then(function () {
+                    // 设置值
+                    setValue(props.modelValue)
+                })
+        }
+
+        /**
+         * 设置值
+         */
+        function setValue(value) {
+            if ($editor) {
+
+                // 编辑器设置内容
+                $editor.setValue(value)
+
+                // 代码格式化
+                $editor.getAction('editor.action.formatDocument').run()
+            }
+        }
+
+        /**
+         * 获取值
+         */
+        function getValue() {
+
+            if ($editor) {
+
+                // 获取编辑器的值
+                let value = $editor.getValue()
+
+                // 如果语言为 json
+                if (
+                    props.language === 'json'
+                    && $n.isValidValue(value)
+                ) {
+                    try {
+                        value = JSON.stringify(JSON.parse(value))
+
+                    } catch (e) {
+                        // 轻提示
+                        $n.toast({
+                            message: 'JSON 语法错误'
+                        })
+                        return
+                    }
+                }
+
+                return value
+            }
+
+            return ''
+        }
+
+        // ==========【生命周期】=========================================================================================
+
+        /**
+         * 实例被挂载后调用
+         */
+        onMounted(function() {
+
+            // 加载
+            load()
+        })
+
+        // ==========【返回】=========================================================================================
+
+        return {
+            // 根节点
+            targetRef,
+            // 当前样式
+            currentStyle,
+        }
+    }
+}
+</script>

package/components/empty/index.vue

@@ -1,6 +1,15 @@
 <template>
-    <div class="q-pa-lg flex flex-center absolute-full">
-        {{description || '发生未知错误'}}
+    <div class="q-pa-lg column flex-center absolute-full q-gutter-sm">
+
+        <!-- 图标 -->
+        <q-icon
+            :name="icon"
+            color="grey-5"
+            :size="$n.px(iconSize)"
+        />
+
+        <!-- 描述文字 -->
+        <div class="text-subtitle1 text-grey-7" v-if="description">{{description}}</div>
     </div>
 </template>
 
@@ -16,7 +25,17 @@ export default {
      * 声明属性
      */
     props: {
-        // 空状态描述
+        // 图标
+        icon: {
+            type: String,
+            default: 'info',
+        },
+        // 图标大小
+        iconSize: {
+            type: [ String, Number ],
+            default: 70,
+        },
+        // 描述文字
         description: String,
     },
 }