br-dionysus 1.6.6 → 1.6.7

package/docs/packages/Hook/useZIndex/useGlobalZIndex.ts

@@ -0,0 +1,34 @@
+import { watch } from 'vue'
+import type { Ref } from 'vue'
+import { useZIndex } from 'element-plus'
+
+interface ZIndexType {
+  /** 初始层级 */
+  initZIndex: Ref<number>,
+  /** 当前层级 */
+  currentZIndex: Ref<number>,
+  /** 下一层级 */
+  nextZIndex: Function
+}
+
+const zIndex: ZIndexType = useZIndex()
+
+/**
+ * 获取全局层级
+ * */
+const useGlobalZIndex = (externalZIndex: ZIndexType) => {
+  watch(() => externalZIndex.currentZIndex.value, () => {
+    const difference = externalZIndex.currentZIndex.value - zIndex.currentZIndex.value
+    for (let i = 0; i < difference; i++) {
+      zIndex.nextZIndex()
+    }
+  })
+  watch(() => zIndex.currentZIndex.value, () => {
+    const difference = zIndex.currentZIndex.value - externalZIndex.currentZIndex.value
+    for (let i = 0; i < difference; i++) {
+      externalZIndex.nextZIndex()
+    }
+  })
+}
+
+export default useGlobalZIndex

package/docs/packages/MDialog/docs/README.md

@@ -0,0 +1,26 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+对话框
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MDialog" demo-name="demo">
+  <demo />
+</Preview>
+
+### 2) Attributes
+
+| 参数     |      说明       |   类型    | 可选值 |                       默认值                       |
+|--------|:-------------:|:-------:|:---:|:-----------------------------------------------:|
+| resize |  是否开启拖拽改变大小   | boolean |  -  |                      false                      |
+| 其余参数   | 参考el官网的dialog |    -    |  -  | https://element-plus.org/zh-CN/component/dialog |
+
+### 2) Events
+
+| 方法名     |      说明       |                           参数                           |
+|---------|:-------------:|:------------------------------------------------------:|
+| resized |  窗口大小改变完成事件   | (contentsSize: { width: number, height: number })内容物大小 |
+| 其余参数    | 参考el官网的dialog |    https://element-plus.org/zh-CN/component/dialog     |

package/docs/packages/MDialog/docs/demo.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <p>弹窗</p>
+    <el-button @click="dialogVisible = true">默认</el-button>
+    <m-dialog
+      v-model="dialogVisible"
+      draggable
+      title="这是标题"
+      resize
+      @resized="test"
+      @opened="opened"
+    >
+      <div class="u-box j-box">
+        <p
+          class="u-table j-table"
+          :style="'height: ' + height + 'px'"
+        >
+          这是一条消息{{ height }}
+        </p>
+        <div>这是干扰元素</div>
+        <div class="u-pa">这是绝对<br/>定位元素</div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </m-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MDialog } from 'packages/MDialog'
+import { useRemainingSpace } from 'packages/index'
+
+const dialogVisible = ref<boolean>(false)
+
+const test = (size: { width: number, height: number }) => {
+  // console.log('size', size)
+}
+
+const { height, init } = useRemainingSpace('j-box', 'j-table')
+const opened = () => {
+  init()
+}
+</script>
+
+<style scoped lang="scss">
+.u-box {
+  //position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #000;
+  flex-direction: column;
+
+  .u-table {
+    border: 1px solid red;
+    box-sizing: border-box;
+  }
+
+  .u-pa {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+</style>

package/docs/packages/MDialog/index.ts

@@ -0,0 +1,10 @@
+import { App, Plugin } from 'vue'
+import MDialog from './src/MDialog.vue'
+
+export const MDialogPlugin: Plugin = {
+  install (app: App) {
+    app.component('MDialog', MDialog)
+  }
+}
+
+export { MDialog }

package/docs/packages/MDialog/src/MDialog.vue

@@ -0,0 +1,150 @@
+<template>
+  <ElDialog
+    ref="dialogRef"
+    :class="boxClass"
+    :modalClass="modalClass"
+    :width="dialogWidth"
+    :draggable="props.draggable"
+    v-bind="$attrs"
+    v-model="props.modelValue"
+  >
+    <!-- 循环处理具名插槽 -->
+    <template
+      v-for="(slotData, name) in slots"
+      #[name]
+    >
+      <slot
+        v-if="name !== 'default'"
+        :name="name"
+        v-bind="slotData"
+      ></slot>
+      <div
+        :data-mark="markDefault"
+        :style="'height: ' + dialogHeight"
+        v-if="name === 'default'"
+      >
+        <slot name="default"></slot>
+      </div>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, useSlots, watch } from 'vue'
+import { ElDialog } from 'element-plus'
+import createHash from '../../../tool/createHash'
+
+const slots = useSlots()
+
+const emit = defineEmits<{
+  /** 窗口大小改变完成事件 */
+  resized: [contentsSize: { width: number, height: number }]
+}>()
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean,
+  /** @description 对话框的宽度，默认值为 50% */
+  width?: string | number,
+  /** @description 是否开启拖拽改变大小 */
+  resize?: boolean,
+  /** @description 是否可拖动 */
+  draggable?: boolean
+}>(), {
+  modelValue: false,
+  width: '',
+  resize: false,
+  draggable: false
+})
+const boxClass = 'j-box-' + createHash(8)
+const modalClass = 'j-modal-' + createHash(8)
+const markDefault = createHash(8)
+const luClass = 'j-lu-' + createHash(8)
+const ldClass = 'j-ld-' + createHash(8)
+const ruClass = 'j-ru-' + createHash(8)
+const rdClass = 'j-rd-' + createHash(8)
+/**
+ * @description 创建拖拽节点
+ * @param className
+ * @param direction 方向
+ */
+const createResizeDom = (className: string = '', direction: 'lu' | 'ld' | 'ru' | 'rd' = 'lu') => {
+  const style = 'width: 5px;height: 5px;'
+  let directionStyle = 'position: absolute;'
+  if (direction === 'lu') directionStyle += 'left: 0;top: 0;cursor: nwse-resize;'
+  if (direction === 'ld') directionStyle += 'left: 0;bottom: 0;cursor: nesw-resize;'
+  if (direction === 'ru') directionStyle += 'right: 0;top: 0;cursor: nesw-resize;'
+  if (direction === 'rd') directionStyle += 'right: 0;bottom: 0;cursor: nwse-resize;'
+
+  const dom: any | null = document.createElement('div')
+  if (!dom) return false
+  dom.className = `j-dialog-resize ${className}`
+  dom.style = `${style}${directionStyle}`
+  const boxDom: HTMLElement | null = document.querySelector('.' + boxClass)
+  if (!boxDom) return false
+  boxDom.appendChild(dom)
+  const defaultDom: HTMLElement | null = document.querySelector('[data-mark="' + markDefault + '"]')
+  dom.onmousedown = (event: MouseEvent) => {
+    drag = true
+    dragStartX = event.clientX
+    dragStartY = event.clientY
+    boxWidth = boxDom.clientWidth
+    if (!defaultDom) return false
+    boxHeight = defaultDom.clientHeight
+  }
+}
+let drag: boolean = false
+let dragStartX: number = 0
+let dragStartY: number = 0
+const dialogWidth = ref<string | number>(props.width)
+const dialogHeight = ref<string>('auto')
+let recordingDialogWidth: number = 0
+let recordingDialogHeight: number = 0
+let boxWidth: number = 0
+let boxHeight: number = 0
+watch(
+  () => props.modelValue,
+  () => {
+    if (!props.resize) return false
+    const modalDom: HTMLElement | null = document.querySelector('.' + modalClass)
+    if (!modalDom) return false
+    modalDom.onmouseup = () => {
+      if (!drag) return false
+      drag = false
+
+      const defaultDom: HTMLElement | null = document.querySelector('[data-mark="' + markDefault + '"]')
+      if (!defaultDom) return false
+      emit('resized', {
+        width: defaultDom?.clientWidth,
+        height: recordingDialogHeight < 0 ? 0 : recordingDialogHeight
+      })
+    }
+    modalDom.onmousemove = (event: MouseEvent) => {
+      if (!drag) return false
+      recordingDialogWidth = boxWidth + (event.clientX - dragStartX) * 2
+      recordingDialogHeight = boxHeight + event.clientY - dragStartY
+      dialogWidth.value = recordingDialogWidth + 'px'
+      dialogHeight.value = recordingDialogHeight + 'px'
+    }
+    setTimeout(() => {
+      createResizeDom(luClass, 'lu')
+      createResizeDom(ldClass, 'ld')
+      createResizeDom(ruClass, 'ru')
+      createResizeDom(rdClass, 'rd')
+    })
+  }
+)
+
+const dialogRef = ref<InstanceType<typeof ElDialog> | null>(null)
+
+defineExpose({
+  open: () => dialogRef?.value.open,
+  opened: () => dialogRef?.value.opened,
+  close: () => dialogRef?.value.close,
+  closed: () => dialogRef?.value.closed,
+  openAutoFocus: () => dialogRef?.value.openAutoFocus,
+  closeAutoFocus: () => dialogRef?.value.closeAutoFocus
+})
+</script>
+
+<style scoped lang="scss">
+</style>

package/docs/packages/MInline/docs/README.md

@@ -0,0 +1,26 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+筛选
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MInline" demo-name="demo">
+  <demo />
+</Preview>
+
+### 2) Attributes
+
+| 参数       |  说明   |   类型   |            可选值            |   默认值   |
+|----------|:-----:|:------:|:-------------------------:|:-------:|
+| minWidth | 列最小宽度 | number |             -             |   200   |
+| maxWidth | 列最大宽度 | number |             -             |   300   |
+| size     | 组件尺寸  |  enum  | large \| default \| small | default |
+
+### 2) Events
+
+| 方法名    |           说明           |       参数        |
+|--------|:----------------------:|:---------------:|
+| switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |

package/docs/packages/MInline/docs/demo.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="g-demo-m-inline-box">
+    <m-inline size="small">
+      <template #inlineBtn>
+        <el-button
+          type="primary"
+          size="small"
+          icon="Plus"
+        >
+          新增
+        </el-button>
+        <el-button
+          type="success"
+          size="small"
+          icon="Edit"
+        >
+          编辑
+        </el-button>
+        <el-button
+          type="warning"
+          size="small"
+          icon="Delete"
+        >
+          删除
+        </el-button>
+      </template>
+      <template #default>
+        <el-form
+          :model="formInline"
+          labelWidth="80px"
+          :showMessage="false"
+          size="small"
+          @submit.prevent
+          data-box
+        >
+          <el-form-item
+            label="编码"
+            prop="code"
+            data-item
+          >
+            <el-input
+              v-model="formInline.code"
+              clearable
+              placeholder="请输入编码"
+            >
+            </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="time"
+            data-item
+          >
+            <el-input
+              v-model="formInline.time"
+              clearable
+              placeholder="请输入时间"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item
+            label="编码"
+            prop="code"
+            data-item
+          >
+            <el-input
+              v-model="formInline.code"
+              clearable
+              placeholder="请输入编码"
+            >
+            </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="time"
+            data-item
+          >
+            <el-input
+              v-model="formInline.time"
+              clearable
+              placeholder="请输入时间"
+            >
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </template>
+      <template #submitBtn>
+        <el-button
+          type="primary"
+          icon="Search"
+          size="small"
+        >
+          搜索
+        </el-button>
+      </template>
+    </m-inline>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+// 列表过滤条件表单
+const formInline = reactive({
+  name: '',
+  code: '',
+  time: ''
+})
+</script>
+
+<style scoped>
+.g-demo-m-inline-box {
+  max-width: 1000px;
+}
+</style>

package/docs/packages/MInline/index.ts

@@ -0,0 +1,10 @@
+import { App, Plugin } from 'vue'
+import MInline from './src/MInline.vue'
+
+export const MInlinePlugin: Plugin = {
+  install (app: App) {
+    app.component('MInline', MInline)
+  }
+}
+
+export { MInline }