@netang/quasar 0.0.53 → 0.0.54

package/_docs/docs/.vuepress/config.js

@@ -0,0 +1,40 @@
+import path from 'path'
+import { defineUserConfig } from '@vuepress/cli'
+import { defaultTheme } from '@vuepress/theme-default'
+import { searchPlugin } from '@vuepress/plugin-search'
+
+import {
+    navbarZh,
+    sidebarZh,
+} from './configs'
+
+export default defineUserConfig({
+    // 站点的标题
+    title: 'netang-quasar',
+    // 部署站点的基础路径
+    base: '/netang-quasar/',
+    // 打包目录
+    dest: path.join(__dirname, '../../../docs'),
+    // 主题
+    theme: defaultTheme({
+        locales: {
+            '/': {
+                // navbar
+                navbar: navbarZh,
+                // sidebar
+                sidebar: sidebarZh,
+            },
+        },
+    }),
+    // 插件
+    plugins: [
+        // 搜索
+        searchPlugin({
+            locales: {
+                '/': {
+                    placeholder: '搜索',
+                },
+            },
+        }),
+    ],
+})

package/_docs/docs/.vuepress/configs/index.js

@@ -0,0 +1,2 @@
+export * from './navbar'
+export * from './sidebar'

package/_docs/docs/.vuepress/configs/navbar/index.js

@@ -0,0 +1 @@
+export * from './zh'

package/_docs/docs/.vuepress/configs/navbar/zh.js

@@ -0,0 +1,16 @@
+export const navbarZh = [
+    {
+        text: '首页',
+        link: '/',
+    },
+    {
+        text: '组件',
+        activeMatch: '/components/',
+        link: '/components/field-table',
+    },
+    {
+        text: '工具',
+        activeMatch: '/utils/',
+        link: '/utils/alert',
+    },
+]

package/_docs/docs/.vuepress/configs/sidebar/index.js

@@ -0,0 +1 @@
+export * from './zh'

package/_docs/docs/.vuepress/configs/sidebar/zh.js

@@ -0,0 +1,20 @@
+export const sidebarZh = {
+    '/components/': [
+        {
+            text: 'Components 组件',
+            children: [
+                '/components/field-table',
+                '/components/field-tree',
+            ],
+        }
+    ],
+    '/utils/': [
+        {
+            text: 'Utils 工具',
+            children: [
+                '/utils/alert',
+                '/utils/confirm',
+            ],
+        }
+    ],
+}

package/_docs/docs/.vuepress/public/css/index.css

@@ -0,0 +1,3 @@
+:root {
+    --content-width: 1200px !important;
+}

package/_docs/docs/.vuepress/styles/index.scss

@@ -0,0 +1,3 @@
+body {
+    --content-width: 1200px !important;
+}

package/_docs/docs/components/field-table.md

@@ -0,0 +1,55 @@
+# FieldTable 下拉表格
+
+继承 `<q-field>` 所有特性
+[中文文档](http://www.quasarchs.com/vue-components/field) [英文文档](https://quasar.dev/vue-components/field)
+
+## FieldTable API
+
+### FieldTable 属性
+
+| 属性名                      | 说明          | 类型                  | 可选值                                      | 默认值             |
+|--------------------------|-------------|---------------------|------------------------------------------|-----------------|
+| value / v-model          | 绑定值         | -                   | -                                        | -               |
+| value-key                | 值字段         | `String`            | -                                        | -               |
+| label-key                | 标签字段        | `String`            | -                                        | -               |
+| value-type               | 值类型         | `String`            | `string` / `stringArray` / `objectArray` | objectArray     |
+| value-separator          | 值分隔符        | `String`            | -                                        | ,               |
+| path                     | 表格请求路径      | `String`            | -                                        | -               |
+| query                    | 请求参数        | `object`            | -                                        | -               |
+| data                     | 附加请求数据      | `object`            | -                                        | -               |
+| no-default-load-selected | 初始不加载已选数据   | `Boolean`           | -                                        | false           |
+| no-update-load-selected  | 更新值时不加载已选数据 | `Boolean`           | -                                        | false           |
+| format-label             | 格式化显示标签     | `Function`          | -                                        | -               |
+| show-keys                | 下拉表格显示的字段数组 | `Array`             | -                                        | `[ 值字段, 标签字段 ]` |
+| hide-search-keys         | 隐藏搜索字段数组    | `Array`             | -                                        | -               |
+| filter-key               | 默认筛选字段      | `Array`             | -                                        | `标签字段`          |
+| filter                   | 是否开启筛选      | `Boolean`           | -                                        | false           |
+| table-props              | 表格声明属性      | `Object`            | -                                        | -               |
+| dialog-props             | 对话框声明属性     | `Object`            | -                                        | -               |
+| no-dialog                | 关闭对话框       | `Boolean`           | -                                        | false           |
+| columns                  | 表格列数据       | `Array`             | -                                        | -               |
+| rows                     | 行数据         | `Array`             | -                                        | -               |
+| multiple                 | 是否多选        | `Boolean`           | -                                        | false           |
+| collapse-tags            | 多选模式下是否折叠标签 | `Boolean`           | -                                        | false           |
+| placeholder              | 占位符         | `String`            | -                                        | -               |
+| clearable                | 是否可清除       | `Boolean`           | -                                        | false           |
+| disable                  | 是否禁用        | `Boolean`           | -                                        | false           |
+| readonly                 | 是否只读        | `Boolean`           | -                                        | false           |
+| input-debounce           | 输入防抖(毫秒)    | `Number` / `String` | -                                        | 500             |
+
+
+### FieldTable 插槽
+
+| 插槽名                      | 说明                                       |
+|--------------------------|------------------------------------------|
+| default          | 自定义默认内容（如果存在，则会隐藏下拉表格，并提供接口自定义实现） |
+
+### FieldTable `default` 默认插槽 对外暴露的方法
+
+| 属性名                      | 说明 | 类型       | 示例  |
+|--------------------------|--|----------|-----|
+| showValue          | 显示的已选值 | `String` | -   |
+| selected                | 已选数据 | `Array`  | `[ { id: 1, ... }, { id: 2, ... } ]`   |
+| onRemove                | 删除已选 | `Function`  | `onRemove(index)`   |
+| onShowDialog                | 显示对话框 | `Function`  | -   |
+| onClear                | 清空已选数据 | `Function`  | -   |

package/_docs/docs/components/field-tree.md

@@ -0,0 +1 @@
+# FieldTree 下拉树

package/{docs → _docs}/package.json

@@ -1,11 +1,11 @@
-{
-  "name": "@netang/quasar/docs",
-  "private": true,
-  "scripts": {
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs"
-  },
-  "devDependencies": {
-    "vuepress": "^2.0.0-beta.60"
-  }
-}
+{
+  "private": true,
+  "scripts": {
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
+  },
+  "devDependencies": {
+    "@vuepress/plugin-search": "^2.0.0-beta.60",
+    "vuepress": "^2.0.0-beta.60"
+  }
+}

package/components/column-title/index.vue

@@ -27,9 +27,9 @@ export default {
      */
     props: {
         // 标签
-        label: [String, Number],
+        label: [ String, Number ],
         // 提示信息
-        tooltip: [String, Number],
+        tooltip: [ String, Number ],
     },
 }
 </script>

package/components/data/index.vue

@@ -1,23 +1,20 @@
-<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>

package/components/dialog/index.vue

@@ -52,11 +52,26 @@
 import { ref, computed, defineAsyncComponent, provide, watch } from 'vue'
 import { useDialogPluginComponent, useQuasar } from 'quasar'
 
-import routers from '@/router/routers'
+import $n_has from 'lodash/has'
+import $n_get from 'lodash/get'
+import $n_isFunction from 'lodash/isFunction'
+
+import $n_indexOf from '@netang/utils/indexOf'
+import $n_runAsync from '@netang/utils/runAsync'
+import $n_slash from '@netang/utils/slash'
+import $n_px from '@netang/utils/px'
 
 import components from '../private/components'
 import { NDialogKey } from '../../utils/symbols'
 
+import $n_toast from '../../utils/toast'
+import { configs } from '../../utils/config'
+
+const {
+    // 自定义路由
+    routers,
+} = configs
+
 export default {
 
     /**
@@ -184,10 +199,10 @@ export default {
 
         function setWH(style, field, sign) {
             if (props[field]) {
-                if ($n.indexOf(props[field], '%') > -1) {
+                if ($n_indexOf(props[field], '%') > -1) {
                     style[field] = props[field].replace('%', sign)
                 } else {
-                    style[field] = $n.px(props[field])
+                    style[field] = $n_px(props[field])
                 }
             }
         }
@@ -231,10 +246,10 @@ export default {
             // 如果是路由路径
             if (props.route) {
                 // 获取路由组件
-                comp = $n.get(routers, `${$n.slash(props.route, 'start', false)}.component`)
+                comp = $n_get(routers, `${$n_slash(props.route, 'start', false)}.component`)
 
             // 如果有组件标识
-            } else if (props.name && $n.has(components, props.name)) {
+            } else if (props.name && $n_has(components, props.name)) {
                 // 获取自定义组件
                 comp = components[props.name]
             }
@@ -245,7 +260,7 @@ export default {
             }
 
             // 如果是方法, 则说明是异步组件
-            if ($n.isFunction(comp)) {
+            if ($n_isFunction(comp)) {
                 return defineAsyncComponent(comp)
             }
 
@@ -265,7 +280,7 @@ export default {
 
             return props.route ?
                 // 如果是路由路径, 则获取路由标题
-                $n.get(routers, `${$n.slash(props.route, 'start', false)}.meta.title`, '')
+                $n_get(routers, `${$n_slash(props.route, 'start', false)}.meta.title`, '')
                 : ''
         })
 
@@ -285,17 +300,17 @@ export default {
         async function onDialogConfirm() {
 
             // 如果有确定按钮
-            if ($n.isFunction(props.onConfirm)) {
+            if ($n_isFunction(props.onConfirm)) {
 
-                if (! $n.isFunction(compSubmit)) {
+                if (! $n_isFunction(compSubmit)) {
                     // 轻提示
-                    $n.toast({
+                    $n_toast({
                         message: '未调用 $dialog.submit 方法',
                     })
                     return
                 }
 
-                const res = await $n.runAsync(props.onConfirm)(await $n.runAsync(compSubmit)(), hide)
+                const res = await $n_runAsync(props.onConfirm)(await $n_runAsync(compSubmit)(), hide)
                 if (res === false) {
                     return
                 }
@@ -330,7 +345,6 @@ export default {
 </script>
 
 <style lang="scss">
-
 .n-dialog-proxy {
 
     &--fullscreen {

package/components/dialog-table/index.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import $n_dialog from '../../utils/dialog'
+
 export default {
 
     /**
@@ -43,7 +45,7 @@ export default {
     /**
      * 组合式
      */
-    setup(props, { emit }) {
+    setup(props) {
 
         // ==========【方法】=============================================================================================
 
@@ -53,7 +55,7 @@ export default {
         function onDialog() {
 
             // 创建对话框
-            $n.dialog.create({
+            $n_dialog.create({
                 // 标题
                 title: props.title,
                 // 宽

package/components/dragger/index.vue

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

package/components/drawer/index.vue

@@ -23,6 +23,15 @@
 import { ref, inject, nextTick, watch } from 'vue'
 import { useQuasar } from 'quasar'
 
+import $n_isNil from 'lodash/isNil'
+
+import $n_router from '@netang/vue-utils/router'
+
+import $n_storage from '@netang/utils/storage'
+import $n_sleep from '@netang/utils/sleep'
+import $n_percentValue from '@netang/utils/percentValue'
+import $n_pxValue from '@netang/utils/pxValue'
+
 import { layoutKey, emptyRenderFn } from 'quasar/src/utils/private/symbols.js'
 
 import { NPowerKey } from '../../utils/symbols'
@@ -126,7 +135,7 @@ export default {
         }
 
         // 创建睡眠实例
-        const sleep = $n.sleep()
+        const sleep = $n_sleep()
 
         // 缓存名
         let cacheName = ''
@@ -138,10 +147,10 @@ export default {
         if ($q.platform.is.mobile) {
 
             // 获取手机端百分比值
-            let res = $n.percentValue(props.mobileWidth, true)
+            let res = $n_percentValue(props.mobileWidth, true)
 
             // 如果是百分比值
-            if (! $n.isNil(res)) {
+            if (! $n_isNil(res)) {
                 // 原始尺寸 = 屏幕宽度 * 百分比
                 if (res) {
                     originalWidth = $q.screen.width * res
@@ -149,7 +158,7 @@ export default {
 
             } else {
                 // 原始尺寸 = 屏幕宽度像素
-                res = $n.pxValue(props.mobileWidth)
+                res = $n_pxValue(props.mobileWidth)
                 if (res) {
                     originalWidth = res
                 }
@@ -159,10 +168,10 @@ export default {
         } else if (props.drag && props.cache) {
 
             // 设置缓存名
-            cacheName = `drawer:${props.side}:${props.cache === true ? ($power && $power.routePath ? $power.routePath : $n.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 = $n.storage.get(cacheName)
+            const cache = $n_storage.get(cacheName)
             if (cache) {
                 originalWidth = cache
             }
@@ -247,7 +256,7 @@ export default {
                 sleep(500)
                     .then(function () {
                         // 设置缓存(永久缓存)
-                        $n.storage.set(cacheName, newWidth, 0)
+                        $n_storage.set(cacheName, newWidth, 0)
                     })
             }
         }
@@ -268,8 +277,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/sass/var.scss";
-
 .n-drawer {
     // 拖拽手柄
     &__drag-handle {

package/components/editor-code/index.vue

@@ -10,6 +10,13 @@
 import { ref, watch, computed, onMounted } from 'vue'
 
 import script from '@netang/utils/script'
+import $n_isNumeric from '@netang/utils/isNumeric'
+import $n_isValidValue from '@netang/utils/isValidValue'
+import $n_sleep from '@netang/utils/sleep'
+import $n_px from '@netang/utils/px'
+
+
+import $n_toast from '../../utils/toast'
 
 export default {
 
@@ -71,8 +78,8 @@ export default {
          */
         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,
+                width: $n_isNumeric(props.width) ? $n_px(props.width) : props.width,
+                height: $n_isNumeric(props.height) ? $n_px(props.height) : props.height,
             }
         })
 
@@ -88,7 +95,7 @@ export default {
         let stopValueWatcher = false
 
         // 创建睡眠实例
-        const sleep = $n.sleep()
+        const sleep = $n_sleep()
 
         // ==========【监听数据】=========================================================================================
 
@@ -238,14 +245,14 @@ export default {
                 // 如果语言为 json
                 if (
                     props.language === 'json'
-                    && $n.isValidValue(value)
+                    && $n_isValidValue(value)
                 ) {
                     try {
                         value = JSON.stringify(JSON.parse(value))
 
                     } catch (e) {
                         // 轻提示
-                        $n.toast({
+                        $n_toast({
                             message: 'JSON 语法错误'
                         })
                         return

package/components/empty/index.vue

@@ -5,7 +5,7 @@
         <q-icon
             :name="icon"
             color="grey-5"
-            :size="$n.px(iconSize)"
+            :size="toPx(iconSize)"
         />
 
         <!-- 描述文字 -->
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import $n_px from '@netang/utils/px'
+
 export default {
 
     /**
@@ -38,5 +40,18 @@ export default {
         // 描述文字
         description: String,
     },
+
+    /**
+     * 组合式
+     */
+    setup() {
+
+        // ==========【方法】=============================================================================================
+
+        return {
+            // 转像素
+            toPx: $n_px,
+        }
+    }
 }
 </script>