br-dionysus 1.8.5 → 1.8.7

package/README.md

@@ -30,6 +30,8 @@
 
 + TabPage([标签页组件](#标签页组件))
 
++ useFormInline([筛选项配置化-hook](#筛选项配置化-hook))
+
 + usePackageConfig([配置保存与获取-hook](#配置保存与获取-hook))
 
 + useRemainingSpace([计算获取剩余空间-hook](#计算获取剩余空间-hook))
@@ -310,38 +312,38 @@ const open3 = () => {
             </el-input>
           </el-form-item>
           <el-form-item
-            label="编码"
-            prop="code"
+            label="类型"
+            prop="type"
             data-item
           >
             <el-input
-              v-model="formInline.code"
+              v-model="formInline.type"
               clearable
-              placeholder="请输入编码"
+              placeholder="请输入类型"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="角色名"
-            prop="name"
+            label="地区"
+            prop="region"
             data-item
           >
             <el-input
-              v-model="formInline.name"
+              v-model="formInline.region"
               clearable
-              placeholder="请输入角色名"
+              placeholder="请输入地区"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="时间"
-            prop="time"
+            label="等级"
+            prop="level"
             data-item
           >
             <el-input
-              v-model="formInline.time"
+              v-model="formInline.level"
               clearable
-              placeholder="请输入时间"
+              placeholder="请输入等级"
             >
             </el-input>
           </el-form-item>
@@ -357,6 +359,42 @@ const open3 = () => {
         </el-button>
       </template>
     </m-inline>
+
+    <div
+      class="j-test"
+      data="xxx"
+    >
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        111
+      </p>
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        222
+      </p>
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        333
+      </p>
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        444
+      </p>
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        555
+      </p>
+    </div>
   </div>
 </template>
 
@@ -367,7 +405,39 @@ import { reactive } from 'vue'
 const formInline = reactive({
   name: '',
   code: '',
-  time: ''
+  time: '',
+  type: '',
+  region: '',
+  level: ''
+})
+
+const dragstart = (keyName: string = '') => {
+  console.log('keyName', keyName)
+}
+const drop = (index: number) => {
+  console.log('index', index)
+}
+const dragover = (event: Event) => {
+  event.preventDefault()
+}
+const test = (keyName: string = '') => {
+  console.log('keyName', keyName)
+}
+setTimeout(() => {
+  const boxDom = document.querySelector('.j-test') as HTMLDivElement
+  boxDom.ondragover = dragover
+  const domNodeList: NodeList = document.querySelectorAll('.j-p')
+  const domList: HTMLElement[] = []
+  domNodeList.forEach(dom => domList.push(dom as HTMLElement))
+  for (let i = 0; i < domList.length; i++) {
+    const dom = domList[i]
+    if (!dom) continue
+
+    dom.draggable = true
+    dom.ondrop = () => drop(i)
+    dom.ondragstart = () => dragstart('item.props?.prop as string')
+    dom.onclick = () => test('item.props?.prop as string')
+  }
 })
 </script>
 
@@ -382,15 +452,16 @@ const formInline = reactive({
 
 ### 2) Attributes
 
-| 参数       |  说明   |   类型   |            可选值            |   默认值   |
-|----------|:-----:|:------:|:-------------------------:|:-------:|
-| minWidth | 列最小宽度 | number |             -             |   200   |
-| maxWidth | 列最大宽度 | number |             -             |   300   |
-| size     | 组件尺寸  |  enum  | large \| default \| small | default |
+| 参数        |  说明   |   类型   |            可选值            |   默认值   |
+|-----------|:-----:|:------:|:-------------------------:|:-------:|
+| minWidth  | 列最小宽度 | number |             -             |   200   |
+| maxWidth  | 列最大宽度 | number |             -             |   300   |
+| size      | 组件尺寸  |  enum  | large \| default \| small | default |
+| configKey | 配置key | string |             -             |    -    |
 
 ### 2) Events
 
-| 方法名    |           说明           |       参数        |
+| 事件名    |           说明           |       参数        |
 |--------|:----------------------:|:---------------:|
 | switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |
 
@@ -407,14 +478,54 @@ const formInline = reactive({
 
 <template>
   <div class="g-demo-m-input-number-box">
-    <m-input-number v-model="test"></m-input-number>
+    <m-input-number
+      v-model="test"
+      @input="numberInput"
+      @change="numberChange"
+    ></m-input-number>
+    <h5>对比组</h5>
+    <el-input-number
+      v-model="test2"
+      @input="numberInput2"
+      @change="numberChange2"
+    ></el-input-number>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const test = ref<number>(0)
+const numberInput = (val: number) => {
+  console.log('m1', val)
+  console.log('m2', test.value)
+}
+const numberChange = (val: number) => {
+  console.log('m3', val)
+  console.log('m4', test.value)
+}
+watch(
+  () => test.value,
+  () => {
+    console.log('m5', test.value)
+  }
+)
+
+const test2 = ref<number>(0)
+const numberInput2 = (val: number) => {
+  console.log('e1', val)
+  console.log('e2', test2.value)
+}
+const numberChange2 = (val: number) => {
+  console.log('e3', val)
+  console.log('e4', test2.value)
+}
+watch(
+  () => test2.value,
+  () => {
+    console.log('e5', test2.value)
+  }
+)
 </script>
 
 <style scoped>
@@ -2646,6 +2757,8 @@ const list = ref<{ name: string, className: string }[]>([
 
 ## Hook列表
 
++ useFormInline([筛选项配置化-hook](#筛选项配置化-hook))
+
 + usePackageConfig([配置保存与获取-hook](#配置保存与获取-hook))
 
 + useRemainingSpace([计算获取剩余空间-hook](#计算获取剩余空间-hook))
@@ -2659,6 +2772,51 @@ const list = ref<{ name: string, className: string }[]>([
 
 
 
+筛选项配置化 hook
+=================
+
+### 1) 基础用法
+
+
+
+### 2) 所需参数
+
+| 名称        | 描述            | 类型                              | 可选值 | 默认值  |
+|-----------|---------------|---------------------------------|:---:|:----:|
+| configKey | 当前配置标识，即唯一key | string                          |  -  |  ''  |
+| data      | 筛选条件关联key map | <T extends Record<string, any>> |  -  |  -   |
+| isConfig  | 是否开启配置        | boolean                         |  -  | true |
+
+### 2) 返回值
+
+| 名称 | 描述  | 类型                                 |
+|----|-----|------------------------------------|
+| -  | 返回值 | UseFormInlineReturnType<T> \| void |
+
+#### 2.1) UseFormInlineReturnType
+
+| 名称              | 描述            | 类型         |
+|-----------------|---------------|------------|
+| \[K in keyof T] | 筛选条件关联key map | T\[K]      |
+| reset           | 重置方法          | () => void |
+
+### 3) 配置结构 FormInlineConfigType<T>
+
+| 名称           | 描述   | 类型      |
+|--------------|------|---------|
+| sort         | 排序   | number  |
+| defaultValue | 默认值  | any     |
+| show         | 是否显示 | boolean |
+
+
+
+
+
+
+
+
+
+
 配置保存与获取 hook
 =================
 
@@ -2855,6 +3013,8 @@ const list = ref<{ name: string, className: string }[]>([
 + createHash([](#))
 
 + moneyFormat([](#))
+
++ slotsToData([](#))
 
 
 对话框
@@ -3126,38 +3286,38 @@ const open3 = () => {
             </el-input>
           </el-form-item>
           <el-form-item
-            label="编码"
-            prop="code"
+            label="类型"
+            prop="type"
             data-item
           >
             <el-input
-              v-model="formInline.code"
+              v-model="formInline.type"
               clearable
-              placeholder="请输入编码"
+              placeholder="请输入类型"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="角色名"
-            prop="name"
+            label="地区"
+            prop="region"
             data-item
           >
             <el-input
-              v-model="formInline.name"
+              v-model="formInline.region"
               clearable
-              placeholder="请输入角色名"
+              placeholder="请输入地区"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="时间"
-            prop="time"
+            label="等级"
+            prop="level"
             data-item
           >
             <el-input
-              v-model="formInline.time"
+              v-model="formInline.level"
               clearable
-              placeholder="请输入时间"
+              placeholder="请输入等级"
             >
             </el-input>
           </el-form-item>
@@ -3173,6 +3333,42 @@ const open3 = () => {
         </el-button>
       </template>
     </m-inline>
+
+    <div
+      class="j-test"
+      data="xxx"
+    >
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        111
+      </p>
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        222
+      </p>
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        333
+      </p>
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        444
+      </p>
+      <p
+        class="j-p"
+        draggable="true"
+      >
+        555
+      </p>
+    </div>
   </div>
 </template>
 
@@ -3183,7 +3379,39 @@ import { reactive } from 'vue'
 const formInline = reactive({
   name: '',
   code: '',
-  time: ''
+  time: '',
+  type: '',
+  region: '',
+  level: ''
+})
+
+const dragstart = (keyName: string = '') => {
+  console.log('keyName', keyName)
+}
+const drop = (index: number) => {
+  console.log('index', index)
+}
+const dragover = (event: Event) => {
+  event.preventDefault()
+}
+const test = (keyName: string = '') => {
+  console.log('keyName', keyName)
+}
+setTimeout(() => {
+  const boxDom = document.querySelector('.j-test') as HTMLDivElement
+  boxDom.ondragover = dragover
+  const domNodeList: NodeList = document.querySelectorAll('.j-p')
+  const domList: HTMLElement[] = []
+  domNodeList.forEach(dom => domList.push(dom as HTMLElement))
+  for (let i = 0; i < domList.length; i++) {
+    const dom = domList[i]
+    if (!dom) continue
+
+    dom.draggable = true
+    dom.ondrop = () => drop(i)
+    dom.ondragstart = () => dragstart('item.props?.prop as string')
+    dom.onclick = () => test('item.props?.prop as string')
+  }
 })
 </script>
 
@@ -3198,15 +3426,16 @@ const formInline = reactive({
 
 ### 2) Attributes
 
-| 参数       |  说明   |   类型   |            可选值            |   默认值   |
-|----------|:-----:|:------:|:-------------------------:|:-------:|
-| minWidth | 列最小宽度 | number |             -             |   200   |
-| maxWidth | 列最大宽度 | number |             -             |   300   |
-| size     | 组件尺寸  |  enum  | large \| default \| small | default |
+| 参数        |  说明   |   类型   |            可选值            |   默认值   |
+|-----------|:-----:|:------:|:-------------------------:|:-------:|
+| minWidth  | 列最小宽度 | number |             -             |   200   |
+| maxWidth  | 列最大宽度 | number |             -             |   300   |
+| size      | 组件尺寸  |  enum  | large \| default \| small | default |
+| configKey | 配置key | string |             -             |    -    |
 
 ### 2) Events
 
-| 方法名    |           说明           |       参数        |
+| 事件名    |           说明           |       参数        |
 |--------|:----------------------:|:---------------:|
 | switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |
 
@@ -3223,14 +3452,54 @@ const formInline = reactive({
 
 <template>
   <div class="g-demo-m-input-number-box">
-    <m-input-number v-model="test"></m-input-number>
+    <m-input-number
+      v-model="test"
+      @input="numberInput"
+      @change="numberChange"
+    ></m-input-number>
+    <h5>对比组</h5>
+    <el-input-number
+      v-model="test2"
+      @input="numberInput2"
+      @change="numberChange2"
+    ></el-input-number>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const test = ref<number>(0)
+const numberInput = (val: number) => {
+  console.log('m1', val)
+  console.log('m2', test.value)
+}
+const numberChange = (val: number) => {
+  console.log('m3', val)
+  console.log('m4', test.value)
+}
+watch(
+  () => test.value,
+  () => {
+    console.log('m5', test.value)
+  }
+)
+
+const test2 = ref<number>(0)
+const numberInput2 = (val: number) => {
+  console.log('e1', val)
+  console.log('e2', test2.value)
+}
+const numberChange2 = (val: number) => {
+  console.log('e3', val)
+  console.log('e4', test2.value)
+}
+watch(
+  () => test2.value,
+  () => {
+    console.log('e5', test2.value)
+  }
+)
 </script>
 
 <style scoped>
@@ -5533,3 +5802,33 @@ const list = ref<{ name: string, className: string }[]>([
 | repairZero  | 末尾补到几位零 | number | -   |
 
 
+
+
+## vue3的slots转json
+
+### 1) 参数
+
+| 参数    | 描述          | 类型     | 默认值       |
+|-------|-------------|--------|-----------|
+| slots | vue的slots对象 | Slots  | -         |
+| name  | 插槽名         | string | 'default' |
+
+### 2) 返参
+
+| 参数 | 描述           | 类型                | 默认值 |
+|----|--------------|-------------------|-----|
+| -  | 格式化后的slots数据 | SlotsToDataReturn | []  |
+
+#### 2.1) SlotsToDataReturn
+| 参数                | 描述           | 类型                      | 默认值 |
+|-------------------|--------------|-------------------------|-----|
+| SlotsToDataReturn | 格式化后的slots数据 | SlotsToDataReturnItem[] | []  |
+
+#### 2.1) SlotsToDataReturn
+| 参数       | 描述            | 类型                          | 默认值 |
+|----------|---------------|-----------------------------|-----|
+| name     | 标签名           | string                      | -   |
+| props    | 组件标签上的props参数 | Record<string, any> \| null | -   |
+| children | 子级            | SlotsToDataReturnItem[]     | -   |
+
+

package/dist/br-dionysus.es.js

@@ -253,11 +253,9 @@ const wl = (e) => (ml("data-v-aa54745e"), e = e(), gl(), e), Bc = { class: "g-bo
       };
       o.vSize = g[n.size], o.isTableMini = n.size === "table-mini";
     }, u = () => {
-      setTimeout(() => {
-        if (o.vValue === void 0)
-          return l("update:modelValue", null), !1;
-        l("update:modelValue", o.vValue);
-      });
+      if (o.vValue === void 0)
+        return l("update:modelValue", null), !1;
+      l("update:modelValue", o.vValue);
     }, c = (g) => {
       setTimeout(() => {
         u(), l("change", g);
@@ -309,7 +307,7 @@ const wl = (e) => (ml("data-v-aa54745e"), e = e(), gl(), e), Bc = { class: "g-bo
       ], 8, Qc);
     };
   }
-}), ri = /* @__PURE__ */ _t(td, [["__scopeId", "data-v-774e3dfc"]]), Fl = {
+}), ri = /* @__PURE__ */ _t(td, [["__scopeId", "data-v-f5462354"]]), Fl = {
   install(e) {
     e.component("MInputNumber", ri);
   }
@@ -12930,7 +12928,9 @@ const MC = { class: "g-box g-select-table-box" }, PC = {
       ...c.labelClassName ? { headerClass: c.labelClassName } : {},
       ...c.minWidth ? { minWidth: c.minWidth || c.width } : {},
       ...c.width || c.minWidth ? { width: c.width || c.minWidth || 100 } : {}
-    })))(l(n)), s = _((t == null ? void 0 : t.data) || []), i = O(() => {
+    })))(l(n));
+    console.log("tableColumn", a);
+    const s = _((t == null ? void 0 : t.data) || []), i = O(() => {
       var u;
       return ((u = s.value) == null ? void 0 : u.length) > JC;
     });