smirk-ui 0.0.24 → 0.1.1

package/README.md

@@ -6,7 +6,9 @@
 >
 > 2. 主要基于 Naive UI 二次封装。包含大屏组件和业务组件等。
 >
->     **注：**开发大屏项目时，可搭配 `smirk-kit` 使用。其中 `useDsCore` 数据源引擎，为交互、接口轮询、数据管理等工作提供了极大便利。
+>     **注：开发大屏项目时，可搭配 `smirk-kit` 使用。其中 `useDsCore` 数据源引擎，为交互、接口轮询、数据管理等工作提供了极大便利。
+> 
+>     smirk-ui@0.0.24 中已将 smirk-kit 迁移过来。导入方式 `import kit from 'smirk-ui/kit'`
 
 ## 安装
 
@@ -40,6 +42,7 @@
   app.use(SmirkUI)
   // 或者 按需引入
   import { SmViewport } from 'smirk-ui'
+  import kit from 'smirk-ui/kit'
   ```
 
 ## 组件
@@ -112,21 +115,7 @@ const ecMap = reactive({
 })
 
 function getOptionFn () {
-    return {
-        xAxis: {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-        },
-        yAxis: {
-            type: 'value'
-        },
-        series: [
-            {
-                data: [150, 230, 224, 218, 135, 147, 260],
-                type: 'line'
-            }
-        ]
-    }
+    return {}
 }
 
 onMounted(() => {
@@ -134,10 +123,10 @@ onMounted(() => {
     ecMap.vmRender()
     /** 注：此刻，ecMap 对象中会增加几个属性，用于操作图表
     		ecMap = {
-    			vmBox,		// 这是宿主元素
-                vmSelf,		// 这是图表实例，即 myChart
-                vmRender,	// 渲染方法，可传入新的 option 进行重绘
-                vmClear		// 清除
+            vmBox,		// 这是宿主元素
+            vmSelf,		// 这是图表实例，即 myChart
+            vmRender,	// 渲染方法，可传入新的 option 进行重绘
+            vmClear		// 清除
     		}
     */
 })
@@ -145,7 +134,7 @@ onMounted(() => {
 
 
 
-### sm-rolling
+### smx-rolling
 
   > 基础滚动组件。基于 vue3-seamless-scroll 封装（不是虚拟列表的设计，进行了一些优化）。
   >
@@ -171,7 +160,7 @@ onMounted(() => {
 
 
 
-### sm-rolling-list
+### smx-rolling-list
 
   > 滚动的数据表格组件。为尽可能减少入参，样式可在父组件中设置。
 
@@ -257,7 +246,7 @@ onMounted(() => {
 
 ### sm-multiple-picker
 
-  > 筛选器组件。类似京东商城购买电脑时，那个选择器。多类别、多选、可折叠。
+  > 筛选器组件。多类别、多选、可折叠。
 
 `Props`
 
@@ -317,7 +306,7 @@ onMounted(() => {
 | 名称    | 参数 | 说明 |
 | ------- | ---- | ---- |
 | item-before | { p, m, s }   |  |
-| elem | { p, m, s, vf, vc }   | 表单组件（内置12种表单组件，其中日期组件又包含11种形式），共 22 种。 |
+| elem | { p, m, s, vf, vc }   | 表单组件（内置 14 种表单组件，其中日期组件又包含11种形式），共 24 种。若仍不满足，由此处插入自定义组件。 |
 | item-after | { p, m, s }   |  |
 
 `Methods`
@@ -329,13 +318,17 @@ onMounted(() => {
 | setCellAttrs | (attrs, codes) |  |
 | setDsFilter |  |  |
 
+### sm-doc-editor
+
+  > 文档编辑器组件。跟 sm-form 配置类似，需传入 template 参数（富文本字符串，字段位置用 @{ fieldCode } 占位）。一般用于合同模板、统计清单等场景。
+ 
 ### sm-table
 
   > 略略略...
 
 ### sm-dropdown-buttons
 
-> 略略略...
+> 主要是在 sm-table 的操作列使用，超过 :count 个按钮时，折叠成下拉菜单。
 >
 
 ### sm-tabs
@@ -346,6 +339,62 @@ onMounted(() => {
 
 > 略略略...
 
-### sm-file-viewer
+### smx-file-viewer
+
+> 略略略...
+>
+
+### 【smirk-ui/kit】useDsCore
+
+> 还是记录下吧。久了自己都不会用了 O(∩_∩)O~~  
+> 
+> 数据源管理（常用于大屏项目）。基于 pinia 实现（主要能够在 vue-devtools 中调试），采用发布订阅模式，使请求的触发和响应解耦。支持多个 request 聚合；支持设置轮询；支持响应结果预处理以及创建新的数据源等。
+>
+`Methods`
+```
+deps()  ——查看当前所有的依赖参数
+initDeps(params)  ——初始化依赖参数
+updateDeps(params)  ——更新依赖参数，关联的 request 会发起请求
+provide(obj|arr)  ——启动数据源引擎
+send(reqOrName, opts)  ——触发一个数据源任务，共享数据源维护的依赖参数，但不会被动执行，响应结果也不会放进数据池
+listener(name, callback)  ——监听数据源
+stop(name)  ——停止轮询
+get(name)  ——获取某数据源，一般搭配计算属性使用
+set(name, data)  ——手动新增或更新某数据源，可在 interceptor 中拦截，将一个 request 响应分别存储到多个数据源
+reload()  ——全部更新
+```
+`示例：`
+```javascript
+// apis 定义任务
+const dsTasks = {
+    foo: {
+        interval: 10,
+        deps: ['id'],
+        request: p => fetch('/api/foo?id=' + p.id),
+        interceptor: (res, o) => {
+            // 响应结果预处理
+            // 增加数据源 o.set('name1', res.xx)
+            return res
+        }
+    }
+}
+// 组件中 实例化
+import smkit from 'smirk-ui/kit'
+const dsCore = smkit.useDsCore(/*可以传个字符串，以创建多个数据源管理*/)
+
+// 启动所有任务
+dsCore.provide(dsTasks)
+
+// 更新依赖
+dsCore.updateDeps({ id: 2 })
+
+// 接收响应结果
+const foo = computed(() => dsCore.get('foo') ?? {})
+// 或
+dsCore.listener('foo', res => {
+    console.log('foo:', res)
+})
+```
+
 
-> 略略略...
+> 

package/dist/kit.es.js

@@ -558,7 +558,7 @@ const trsListToTree = (list, idField = "id", parentIdField = "parentId") => {
   });
   return tree;
 };
-const getTreePathById = (tree, targetId, idField = "id", childrenField = "children") => {
+const getTreePathById = (tree, targetId, idField = "id", removeChild = true, childrenField = "children") => {
   if (!Array.isArray(tree) || !targetId && targetId !== 0) return [];
   const findPath = (nodes, path = []) => {
     for (const node of nodes) {
@@ -587,6 +587,10 @@ const getTreePathById = (tree, targetId, idField = "id", childrenField = "childr
           } else {
             newNode[childrenField] = [];
           }
+        } else {
+          if (removeChild) {
+            delete newNode[childrenField];
+          }
         }
         newNodeList.push(newNode);
         return newNodeList;
@@ -622,7 +626,7 @@ const getTreeByLevel = (tree, maxLevel, childrenField = "children", topLevel = 0
   return tree.map((node) => {
     const newNode = { ...node };
     if (topLevel < maxLevel && newNode.children && Array.isArray(newNode.children)) {
-      newNode.children = cropTreeByLevel(newNode.children, maxLevel, "children", topLevel + 1);
+      newNode.children = getTreeByLevel(newNode.children, maxLevel, "children", topLevel + 1);
     } else {
       delete newNode.children;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "smirk-ui",
   "private": false,
-  "version": "0.0.24",
+  "version": "0.1.1",
   "license": "MIT",
   "author": "lukas <768157417@qq.com>",
   "description": "",