br-dionysus 1.8.7 → 1.10.0

package/README.md

@@ -148,8 +148,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { MDialog } from 'packages/MDialog'
-import { useRemainingSpace } from 'packages/index'
+import { MDialog } from './../../MDialog'
+import { useRemainingSpace } from './../../index'
 
 const dialogVisible = ref<boolean>(false)
 const open = () => {
@@ -242,7 +242,11 @@ const open3 = () => {
 
 <template>
   <div class="g-demo-m-inline-box">
-    <m-inline size="small">
+    <m-inline
+      size="small"
+      :model="formInline"
+      :configKey="configKey"
+    >
       <template #inlineBtn>
         <el-button
           type="primary"
@@ -277,7 +281,7 @@ const open3 = () => {
         >
           <el-form-item
             label="编码"
-            prop="code"
+            prop="code3"
             data-item
           >
             <el-input
@@ -287,18 +291,18 @@ const open3 = () => {
             >
             </el-input>
           </el-form-item>
-          <el-form-item
-            label="角色名"
-            prop="name"
-            data-item
-          >
-            <el-input
-              v-model="formInline.name"
-              clearable
-              placeholder="请输入角色名"
-            >
-            </el-input>
-          </el-form-item>
+          <!--<el-form-item-->
+          <!--  label="角色名"-->
+          <!--  prop="name"-->
+          <!--  data-item-->
+          <!--&gt;-->
+          <!--  <el-input-->
+          <!--    v-model="formInline.name"-->
+          <!--    clearable-->
+          <!--    placeholder="请输入角色名"-->
+          <!--  >-->
+          <!--  </el-input>-->
+          <!--</el-form-item>-->
           <el-form-item
             label="时间"
             prop="time"
@@ -357,93 +361,44 @@ const open3 = () => {
         >
           搜索
         </el-button>
+        <el-button
+          icon="refresh"
+          size="small"
+          @click="formInline.reset"
+        >
+          重置
+        </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>
+    <p>{{ formInline }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import useFormInline from './../../Hook/useFormInline/useFormInline'
 
 // 列表过滤条件表单
-const formInline = reactive({
-  name: '',
-  code: '',
-  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')
-  }
+const configKey = 'FormInline'
+const formInline = useFormInline<{
+  name: string;
+  code: string;
+  time: string;
+  type: string;
+  region: string;
+  level: string;
+}>(configKey, {
+  name: '111',
+  code: '222',
+  time: '333',
+  type: '444',
+  region: '555',
+  level: '666'
 })
 </script>
 
 <style scoped>
 .g-demo-m-inline-box {
-  max-width: 1000px;
+  max-width: 1100px;
 }
 </style>
 
@@ -452,12 +407,13 @@ setTimeout(() => {
 
 ### 2) Attributes
 
-| 参数        |  说明   |   类型   |            可选值            |   默认值   |
-|-----------|:-----:|:------:|:-------------------------:|:-------:|
-| minWidth  | 列最小宽度 | number |             -             |   200   |
-| maxWidth  | 列最大宽度 | number |             -             |   300   |
-| size      | 组件尺寸  |  enum  | large \| default \| small | default |
-| configKey | 配置key | string |             -             |    -    |
+| 参数        |  说明   |             类型              |            可选值            |   默认值   |
+|-----------|:-----:|:---------------------------:|:-------------------------:|:-------:|
+| minWidth  | 列最小宽度 |           number            |             -             |   200   |
+| maxWidth  | 列最大宽度 |           number            |             -             |   300   |
+| size      | 组件尺寸  |            enum             | large \| default \| small | default |
+| configKey | 配置key |           string            |             -             |    -    |
+| model     | 筛选对象  | Record<string, any> \| null |             -             |  null   |
 
 ### 2) Events
 
@@ -719,7 +675,7 @@ const options: Option[] = [{
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { Page } from 'packages/typings/class'
+import { Page } from './../../typings/class'
 
 const commodityOptionsTitle: TableTitle[] = [{
   prop: 'PRDocType',
@@ -1217,8 +1173,8 @@ const options: Option[] = [{
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useTableConfig } from 'packages/index'
-import { MTableColumn } from 'packages/MTableColumn'
+import { useTableConfig } from './../../index'
+import { MTableColumn } from './../../MTableColumn'
 
 const privateExpandChange = (row: any, expandedRows: any[]) => {
   console.log('row', row)
@@ -1753,8 +1709,8 @@ const tableConfig = ref({
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useTableConfig } from 'packages/index'
-import { MTableColumn } from 'packages/MTableColumn'
+import { useTableConfig } from './../../index'
+import { MTableColumn } from './../../MTableColumn'
 
 const privateExpandChange = (row: any, expandedRows: any[]) => {
   console.log('row', row)
@@ -1927,7 +1883,7 @@ sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
+import useTableV2Config from './../../Hook/useTableV2Config/useTableV2Config'
 
 const tableData = ref<any[]>([])
 const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{
@@ -2037,6 +1993,7 @@ for (let i = 0; i < 1000; i++) {
       @change="size = $event.size"
     ></SkinConfig>
 
+    <p>skin: {{ skin.skinConfig }}</p>
     <div class="m-box">
       <div class="u-color-box">
         <h3>色卡</h3>
@@ -2093,8 +2050,10 @@ for (let i = 0; i < 1000; i++) {
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { SkinConfig } from 'packages/SkinConfig'
+import { SkinConfig } from './../../SkinConfig'
+import useSkin from './../src/useSkin'
 
+const skin = useSkin()
 const size = ref<string>('')
 const shinConfigRef = ref<InstanceType<typeof SkinConfig> | null>(null)
 onMounted(() => {
@@ -2724,16 +2683,23 @@ const list = ref<{ name: string, className: string }[]>([
 
 #### SkinConfig（皮肤对象）
 
-| 参数           |   说明    |   类型    |            可选值            |    默认值    |
-|--------------|:-------:|:-------:|:-------------------------:|:---------:|
-| darkTheme    | 是否为深色主题 | boolean |             -             |   false   |
-| followSystem | 是否跟随系统  | boolean |             -             |   false   |
-| size         |   大小    |  enum   | large \| default \| small |  default  |
-| primaryColor |   主题色   | string  |             -             | '#646CFF' |
-| successColor |   成功色   | string  |             -             | '#67c23a' |
-| warningColor |   警告色   | string  |             -             | '#e6a23c' |
-| dangerColor  |   危险色   | string  |             -             | '#f56c6c' |
-| infoColor    |   信息色   | string  |             -             | '#909399' |
+| 参数                 |               说明                |   类型    |                可选值                |    默认值     |
+|--------------------|:-------------------------------:|:-------:|:---------------------------------:|:----------:|
+| darkTheme          |             是否为深色主题             | boolean |                 -                 |   false    |
+| followSystem       |             是否跟随系统              | boolean |                 -                 |   false    |
+| size               |               大小                |  enum   |     large \| default \| small     |  default   |
+| primaryColor       |               主题色               | string  |                 -                 | '#646CFF'  |
+| successColor       |               成功色               | string  |                 -                 | '#67c23a'  |
+| warningColor       |               警告色               | string  |                 -                 | '#e6a23c'  |
+| dangerColor        |               危险色               | string  |                 -                 | '#f56c6c'  |
+| infoColor          |               信息色               | string  |                 -                 | '#909399'  |
+| showHeavyLoad      |             显示重载按钮              | boolean |                 -                 |   false    |
+| showBreadcrumb     |             显示面包屑导航             | boolean |                 -                 |   false    |
+| showBreadcrumbIcon |             显示面包屑图标             | boolean |                 -                 |    true    |
+| switchAnimation    |              切换动画               | boolean |                 -                 |    true    |
+| auxiliaryTools     |         辅助工具(页签，面包屑，无)          | string  | 'multiple' \| 'breadcrumb'  \| '' | 'multiple' |
+| outsideSpacingSize | 外间距大小（--m-outside-spacing-size） | number  |                 -                 |     16     |
+| insideSpacingSize  | 内间距大小（--m-inside-spacing-size）  | number  |                 -                 |     24     |
 
 ### 3) 说明
 
@@ -3122,8 +3088,8 @@ const list = ref<{ name: string, className: string }[]>([
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { MDialog } from 'packages/MDialog'
-import { useRemainingSpace } from 'packages/index'
+import { MDialog } from './../../MDialog'
+import { useRemainingSpace } from './../../index'
 
 const dialogVisible = ref<boolean>(false)
 const open = () => {
@@ -3216,7 +3182,11 @@ const open3 = () => {
 
 <template>
   <div class="g-demo-m-inline-box">
-    <m-inline size="small">
+    <m-inline
+      size="small"
+      :model="formInline"
+      :configKey="configKey"
+    >
       <template #inlineBtn>
         <el-button
           type="primary"
@@ -3251,7 +3221,7 @@ const open3 = () => {
         >
           <el-form-item
             label="编码"
-            prop="code"
+            prop="code3"
             data-item
           >
             <el-input
@@ -3261,18 +3231,18 @@ const open3 = () => {
             >
             </el-input>
           </el-form-item>
-          <el-form-item
-            label="角色名"
-            prop="name"
-            data-item
-          >
-            <el-input
-              v-model="formInline.name"
-              clearable
-              placeholder="请输入角色名"
-            >
-            </el-input>
-          </el-form-item>
+          <!--<el-form-item-->
+          <!--  label="角色名"-->
+          <!--  prop="name"-->
+          <!--  data-item-->
+          <!--&gt;-->
+          <!--  <el-input-->
+          <!--    v-model="formInline.name"-->
+          <!--    clearable-->
+          <!--    placeholder="请输入角色名"-->
+          <!--  >-->
+          <!--  </el-input>-->
+          <!--</el-form-item>-->
           <el-form-item
             label="时间"
             prop="time"
@@ -3331,93 +3301,44 @@ const open3 = () => {
         >
           搜索
         </el-button>
+        <el-button
+          icon="refresh"
+          size="small"
+          @click="formInline.reset"
+        >
+          重置
+        </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>
+    <p>{{ formInline }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import useFormInline from './../../Hook/useFormInline/useFormInline'
 
 // 列表过滤条件表单
-const formInline = reactive({
-  name: '',
-  code: '',
-  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')
-  }
+const configKey = 'FormInline'
+const formInline = useFormInline<{
+  name: string;
+  code: string;
+  time: string;
+  type: string;
+  region: string;
+  level: string;
+}>(configKey, {
+  name: '111',
+  code: '222',
+  time: '333',
+  type: '444',
+  region: '555',
+  level: '666'
 })
 </script>
 
 <style scoped>
 .g-demo-m-inline-box {
-  max-width: 1000px;
+  max-width: 1100px;
 }
 </style>
 
@@ -3426,12 +3347,13 @@ setTimeout(() => {
 
 ### 2) Attributes
 
-| 参数        |  说明   |   类型   |            可选值            |   默认值   |
-|-----------|:-----:|:------:|:-------------------------:|:-------:|
-| minWidth  | 列最小宽度 | number |             -             |   200   |
-| maxWidth  | 列最大宽度 | number |             -             |   300   |
-| size      | 组件尺寸  |  enum  | large \| default \| small | default |
-| configKey | 配置key | string |             -             |    -    |
+| 参数        |  说明   |             类型              |            可选值            |   默认值   |
+|-----------|:-----:|:---------------------------:|:-------------------------:|:-------:|
+| minWidth  | 列最小宽度 |           number            |             -             |   200   |
+| maxWidth  | 列最大宽度 |           number            |             -             |   300   |
+| size      | 组件尺寸  |            enum             | large \| default \| small | default |
+| configKey | 配置key |           string            |             -             |    -    |
+| model     | 筛选对象  | Record<string, any> \| null |             -             |  null   |
 
 ### 2) Events
 
@@ -3693,7 +3615,7 @@ const options: Option[] = [{
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { Page } from 'packages/typings/class'
+import { Page } from './../../typings/class'
 
 const commodityOptionsTitle: TableTitle[] = [{
   prop: 'PRDocType',
@@ -4191,8 +4113,8 @@ const options: Option[] = [{
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useTableConfig } from 'packages/index'
-import { MTableColumn } from 'packages/MTableColumn'
+import { useTableConfig } from './../../index'
+import { MTableColumn } from './../../MTableColumn'
 
 const privateExpandChange = (row: any, expandedRows: any[]) => {
   console.log('row', row)
@@ -4727,8 +4649,8 @@ const tableConfig = ref({
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useTableConfig } from 'packages/index'
-import { MTableColumn } from 'packages/MTableColumn'
+import { useTableConfig } from './../../index'
+import { MTableColumn } from './../../MTableColumn'
 
 const privateExpandChange = (row: any, expandedRows: any[]) => {
   console.log('row', row)
@@ -4901,7 +4823,7 @@ sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
+import useTableV2Config from './../../Hook/useTableV2Config/useTableV2Config'
 
 const tableData = ref<any[]>([])
 const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{
@@ -5011,6 +4933,7 @@ for (let i = 0; i < 1000; i++) {
       @change="size = $event.size"
     ></SkinConfig>
 
+    <p>skin: {{ skin.skinConfig }}</p>
     <div class="m-box">
       <div class="u-color-box">
         <h3>色卡</h3>
@@ -5067,8 +4990,10 @@ for (let i = 0; i < 1000; i++) {
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { SkinConfig } from 'packages/SkinConfig'
+import { SkinConfig } from './../../SkinConfig'
+import useSkin from './../src/useSkin'
 
+const skin = useSkin()
 const size = ref<string>('')
 const shinConfigRef = ref<InstanceType<typeof SkinConfig> | null>(null)
 onMounted(() => {
@@ -5698,16 +5623,23 @@ const list = ref<{ name: string, className: string }[]>([
 
 #### SkinConfig（皮肤对象）
 
-| 参数           |   说明    |   类型    |            可选值            |    默认值    |
-|--------------|:-------:|:-------:|:-------------------------:|:---------:|
-| darkTheme    | 是否为深色主题 | boolean |             -             |   false   |
-| followSystem | 是否跟随系统  | boolean |             -             |   false   |
-| size         |   大小    |  enum   | large \| default \| small |  default  |
-| primaryColor |   主题色   | string  |             -             | '#646CFF' |
-| successColor |   成功色   | string  |             -             | '#67c23a' |
-| warningColor |   警告色   | string  |             -             | '#e6a23c' |
-| dangerColor  |   危险色   | string  |             -             | '#f56c6c' |
-| infoColor    |   信息色   | string  |             -             | '#909399' |
+| 参数                 |               说明                |   类型    |                可选值                |    默认值     |
+|--------------------|:-------------------------------:|:-------:|:---------------------------------:|:----------:|
+| darkTheme          |             是否为深色主题             | boolean |                 -                 |   false    |
+| followSystem       |             是否跟随系统              | boolean |                 -                 |   false    |
+| size               |               大小                |  enum   |     large \| default \| small     |  default   |
+| primaryColor       |               主题色               | string  |                 -                 | '#646CFF'  |
+| successColor       |               成功色               | string  |                 -                 | '#67c23a'  |
+| warningColor       |               警告色               | string  |                 -                 | '#e6a23c'  |
+| dangerColor        |               危险色               | string  |                 -                 | '#f56c6c'  |
+| infoColor          |               信息色               | string  |                 -                 | '#909399'  |
+| showHeavyLoad      |             显示重载按钮              | boolean |                 -                 |   false    |
+| showBreadcrumb     |             显示面包屑导航             | boolean |                 -                 |   false    |
+| showBreadcrumbIcon |             显示面包屑图标             | boolean |                 -                 |    true    |
+| switchAnimation    |              切换动画               | boolean |                 -                 |    true    |
+| auxiliaryTools     |         辅助工具(页签，面包屑，无)          | string  | 'multiple' \| 'breadcrumb'  \| '' | 'multiple' |
+| outsideSpacingSize | 外间距大小（--m-outside-spacing-size） | number  |                 -                 |     16     |
+| insideSpacingSize  | 内间距大小（--m-inside-spacing-size）  | number  |                 -                 |     24     |
 
 ### 3) 说明