adtec-core-package 2.0.0 → 2.0.1

package/src/components/ElFlex/ElFlex.vue

@@ -1,297 +1,297 @@
-<!--创建人 丁盼-->
-<!--说明: ElFlex-->
-<!--创建时间: 2024/9/5 下午3:15-->
-<!--修改时间: 2024/9/5 下午3:15-->
-<template>
-  <div :style="getStyleComp" ref="ref_div">
-    <slot />
-    <div
-      draggable="false"
-      style="
-        position: absolute;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-      "
-      :style="{
-        bottom: bottomComputed,
-        right: rightComuted,
-      }"
-      ref="ref_div_resizable"
-      @mousemove="handleMouseMove"
-      v-if="resizable"
-    >
-      <el-icons
-        v-if="parent?.props.vertical + '' === 'true'"
-        model-value="adtec-upanddownpull"
-        style="cursor: pointer; font-size: 32px; color: #cccccc"
-      ></el-icons>
-      <el-icons
-        v-else
-        model-value="adtec-aboutpull"
-        style="cursor: pointer; font-size: 32px; color: #cccccc"
-      ></el-icons>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import {
-  alignItemsEnum,
-  flexWrapEnum,
-  gapEnum,
-  justifyContentEnum,
-} from "../../interface/enum/FlexEnum.ts"
-import { computed, nextTick, onMounted, ref, watch, getCurrentInstance } from 'vue'
-import { useMousePressed } from '@vueuse/core'
-import ElIcons from '../icon/ElIcons.vue'
-const instance = getCurrentInstance()
-const parent = instance?.parent
-const ref_div = ref()
-const ref_div_resizable = ref()
-const { pressed } = useMousePressed({ target: ref_div_resizable })
-const divWidth = ref('')
-const divHeight = ref('')
-const bottomComputed = computed(() => {
-  if (parent?.props.vertical + '' === 'true') {
-    return '0px'
-  } else {
-    return '50%'
-  }
-})
-const rightComuted = computed(() => {
-  if (parent?.props.vertical + '' === 'true') {
-    return '50%'
-  } else {
-    return '0px'
-  }
-})
-watch(pressed, (val) => {
-  if (!val) {
-    document.onmousemove = null
-    document.onmouseup = null
-  }
-})
-const handleMouseMove = (e: any) => {
-  if (pressed.value) {
-    const disX = e.clientX - ref_div.value?.offsetLeft
-    const disY = e.clientY - ref_div.value?.offsetTop
-    const layoutWidth = ref_div.value?.clientWidth
-    const layoutHeight = ref_div.value?.clientHeight
-    document.onmousemove = (e) => {
-      document.body.style.cursor = 'pointer'
-      // 鼠标按下并移动的事件
-      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-      const left = e.screenX - disX
-      const top = e.clientY - disY
-      if (parent?.props.vertical) {
-        let after = layoutHeight + top
-        after = after <= 8 ? 8 : after
-        if (after < parseInt((props.minHeight + '').replace('px', ''))) {
-          after = parseInt((props.minHeight + '').replace('px', ''))
-        }
-        nextTick(() => {
-          divHeight.value = after + 'px'
-        })
-      } else {
-        let after = layoutWidth + left
-        after = after <= 8 ? 8 : after
-        if (after < parseInt((props.minWidth + '').replace('px', ''))) {
-          after = parseInt((props.minWidth + '').replace('px', ''))
-        }
-        nextTick(() => {
-          divWidth.value = after + 'px'
-        })
-      }
-    }
-    document.onmouseup = () => {
-      document.body.style.cursor = 'default'
-      document.onmousemove = null
-      document.onmouseup = null
-    }
-  }
-}
-const flexShrinkComp = computed(() => {
-  return (divHeight.value + '').indexOf('px') > -1 || (divWidth.value + '').indexOf('px') > -1
-    ? '0'
-    : 'initial'
-  // return (props.height+'').indexOf('px') > -1 || (props.width+'').indexOf('px') > -1 ? '0' : 'initial'
-})
-const heightComp = computed(() => {
-  return divHeight.value
-})
-const widthComp = computed(() => {
-  return divWidth.value
-})
-const getStyleComp = computed(() => {
-  const style = {
-    display: 'flex',
-    flexDirection: verticalComputed.value ? 'column' : 'row',
-    justifyContent: props.justify + '',
-    alignItems: props.align + '',
-    gap: props.gap + '',
-    flexWrap: props.flexWrap + '',
-    flexGrow: props.flexGrow ? props.flexGrow : 0,
-    height: heightComp.value,
-    width: widthComp.value,
-    flex: getFlex(),
-    overflow: 'auto',
-    boxSizing: 'border-box',
-    minWidth: props.minWidth ? props.minWidth : '',
-    flexShrink: flexShrinkComp.value,
-  }
-  if (props.resizable) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-expect-error
-    style.position = 'relative'
-  }
-  return style
-})
-
-const getFlex = () => {
-  let v = '0 0'
-  if ((widthComp.value + '').indexOf('px') > -1) {
-    v += ' ' + widthComp.value
-  } else {
-    v += ' 0'
-  }
-  if ((heightComp.value + '').indexOf('px') > -1) {
-    v += ' ' + heightComp.value
-  } else {
-    v += ' 0'
-  }
-  return v
-}
-onMounted(() => {
-  divWidth.value = props.width ? props.width + '' : '100%'
-  divHeight.value = props.height ? props.height + '' : '100%'
-})
-const verticalComputed = computed(() => {
-  if (typeof props.vertical === 'string') {
-    return Boolean(props.vertical)
-  } else {
-    return props.vertical
-  }
-})
-
-const props = defineProps({
-  /**
-   * @type boolean|String
-   * @default false
-   * @description 横向布局
-   */
-  //@ts-ignore
-  vertical: {
-    type: [Boolean, String],
-    default: false,
-  },
-  /**
-   * @type {"flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly"}
-   * @default 'flex-start'
-   * @description 横向对齐方式
-   */
-  justify: {
-    type: [justifyContentEnum, String],
-    default: 'flex-start',
-    validator: (value: string) =>
-      [
-        'flex-start',
-        'center',
-        'flex-end',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ].includes(value),
-  },
-  /**
-   * @type {"flex-start" | "center" | "flex-end" }
-   * @default 'flex-start'
-   * @description 纵向对齐方式
-   */
-  align: {
-    type: [alignItemsEnum, String],
-    default: 'flex-start',
-    validator: (value: string) => ['flex-start', 'center', 'flex-end'].includes(value),
-  },
-  /**
-   * @type {"8px" | "16px" | "24px" }
-   * @description 间距
-   */
-  gap: {
-    type: [gapEnum, String],
-  },
-  /**
-   * @type {"nowrap" | "wrap" | "wrap-reverse" }
-   * @default 'nowrap'
-   * @description 是否换行
-   */
-  flexWrap: {
-    type: [flexWrapEnum, String],
-    default: 'nowrap',
-    validator: (value: string) => ['nowrap', 'wrap', 'wrap-reverse'].includes(value),
-  },
-  /**
-   * @type
-   * @default 0
-   * @description 尺寸
-   */
-  flexGrow: {
-    type: [Number, String],
-    default: 0,
-  },
-  /**
-   * @type
-   * @default '100%'
-   * @description 宽度
-   */
-  width: {
-    type: [String],
-    default: '100%',
-  },
-  /**
-   * @type
-   * @default '100%'
-   * @description 高度
-   */
-  height: {
-    type: [String],
-    default: '100%',
-  },
-  /**
-   * @type
-   * @default ''
-   * @description 最小宽度
-   */
-  minWidth: {
-    type: [String],
-    default: '',
-  },
-  /**
-   * @type
-   * @default ''
-   * @description 最小高度
-   */
-  minHeigth: {
-    type: [String],
-    default: '',
-  },
-  /**
-   * @type
-   * @default false
-   * @description 可拖拽
-   */
-  resizable: {
-    type: [Boolean, String],
-    default: false,
-  },
-  flexShrink: {
-    type: [String],
-    default: 'initial',
-  },
-})
-watch(props, (val) => {
-  divWidth.value = val.width + '' ? val.width + '' : '100%'
-  divHeight.value = val.height + '' ? val.height + '' : '100%'
-})
-</script>
-<style scoped lang="scss"></style>
+<!--创建人 丁盼-->
+<!--说明: ElFlex-->
+<!--创建时间: 2024/9/5 下午3:15-->
+<!--修改时间: 2024/9/5 下午3:15-->
+<template>
+  <div :style="getStyleComp" ref="ref_div">
+    <slot />
+    <div
+      draggable="false"
+      style="
+        position: absolute;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+      "
+      :style="{
+        bottom: bottomComputed,
+        right: rightComuted,
+      }"
+      ref="ref_div_resizable"
+      @mousemove="handleMouseMove"
+      v-if="resizable"
+    >
+      <el-icons
+        v-if="parent?.props.vertical + '' === 'true'"
+        model-value="adtec-upanddownpull"
+        style="cursor: pointer; font-size: 32px; color: #cccccc"
+      ></el-icons>
+      <el-icons
+        v-else
+        model-value="adtec-aboutpull"
+        style="cursor: pointer; font-size: 32px; color: #cccccc"
+      ></el-icons>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  alignItemsEnum,
+  flexWrapEnum,
+  gapEnum,
+  justifyContentEnum,
+} from "../../interface/enum/FlexEnum.ts"
+import { computed, nextTick, onMounted, ref, watch, getCurrentInstance } from 'vue'
+import { useMousePressed } from '@vueuse/core'
+import ElIcons from '../icon/ElIcons.vue'
+const instance = getCurrentInstance()
+const parent = instance?.parent
+const ref_div = ref()
+const ref_div_resizable = ref()
+const { pressed } = useMousePressed({ target: ref_div_resizable })
+const divWidth = ref('')
+const divHeight = ref('')
+const bottomComputed = computed(() => {
+  if (parent?.props.vertical + '' === 'true') {
+    return '0px'
+  } else {
+    return '50%'
+  }
+})
+const rightComuted = computed(() => {
+  if (parent?.props.vertical + '' === 'true') {
+    return '50%'
+  } else {
+    return '0px'
+  }
+})
+watch(pressed, (val) => {
+  if (!val) {
+    document.onmousemove = null
+    document.onmouseup = null
+  }
+})
+const handleMouseMove = (e: any) => {
+  if (pressed.value) {
+    const disX = e.clientX - ref_div.value?.offsetLeft
+    const disY = e.clientY - ref_div.value?.offsetTop
+    const layoutWidth = ref_div.value?.clientWidth
+    const layoutHeight = ref_div.value?.clientHeight
+    document.onmousemove = (e) => {
+      document.body.style.cursor = 'pointer'
+      // 鼠标按下并移动的事件
+      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+      const left = e.screenX - disX
+      const top = e.clientY - disY
+      if (parent?.props.vertical) {
+        let after = layoutHeight + top
+        after = after <= 8 ? 8 : after
+        if (after < parseInt((props.minHeight + '').replace('px', ''))) {
+          after = parseInt((props.minHeight + '').replace('px', ''))
+        }
+        nextTick(() => {
+          divHeight.value = after + 'px'
+        })
+      } else {
+        let after = layoutWidth + left
+        after = after <= 8 ? 8 : after
+        if (after < parseInt((props.minWidth + '').replace('px', ''))) {
+          after = parseInt((props.minWidth + '').replace('px', ''))
+        }
+        nextTick(() => {
+          divWidth.value = after + 'px'
+        })
+      }
+    }
+    document.onmouseup = () => {
+      document.body.style.cursor = 'default'
+      document.onmousemove = null
+      document.onmouseup = null
+    }
+  }
+}
+const flexShrinkComp = computed(() => {
+  return (divHeight.value + '').indexOf('px') > -1 || (divWidth.value + '').indexOf('px') > -1
+    ? '0'
+    : 'initial'
+  // return (props.height+'').indexOf('px') > -1 || (props.width+'').indexOf('px') > -1 ? '0' : 'initial'
+})
+const heightComp = computed(() => {
+  return divHeight.value
+})
+const widthComp = computed(() => {
+  return divWidth.value
+})
+const getStyleComp = computed(() => {
+  const style = {
+    display: 'flex',
+    flexDirection: verticalComputed.value ? 'column' : 'row',
+    justifyContent: props.justify + '',
+    alignItems: props.align + '',
+    gap: props.gap + '',
+    flexWrap: props.flexWrap + '',
+    flexGrow: props.flexGrow ? props.flexGrow : 0,
+    height: heightComp.value,
+    width: widthComp.value,
+    flex: getFlex(),
+    overflow: 'auto',
+    boxSizing: 'border-box',
+    minWidth: props.minWidth ? props.minWidth : '',
+    flexShrink: flexShrinkComp.value,
+  }
+  if (props.resizable) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-expect-error
+    style.position = 'relative'
+  }
+  return style
+})
+
+const getFlex = () => {
+  let v = '0 0'
+  if ((widthComp.value + '').indexOf('px') > -1) {
+    v += ' ' + widthComp.value
+  } else {
+    v += ' 0'
+  }
+  if ((heightComp.value + '').indexOf('px') > -1) {
+    v += ' ' + heightComp.value
+  } else {
+    v += ' 0'
+  }
+  return v
+}
+onMounted(() => {
+  divWidth.value = props.width ? props.width + '' : '100%'
+  divHeight.value = props.height ? props.height + '' : '100%'
+})
+const verticalComputed = computed(() => {
+  if (typeof props.vertical === 'string') {
+    return Boolean(props.vertical)
+  } else {
+    return props.vertical
+  }
+})
+
+const props = defineProps({
+  /**
+   * @type boolean|String
+   * @default false
+   * @description 横向布局
+   */
+  //@ts-ignore
+  vertical: {
+    type: [Boolean, String],
+    default: false,
+  },
+  /**
+   * @type {"flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly"}
+   * @default 'flex-start'
+   * @description 横向对齐方式
+   */
+  justify: {
+    type: [justifyContentEnum, String],
+    default: 'flex-start',
+    validator: (value: string) =>
+      [
+        'flex-start',
+        'center',
+        'flex-end',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ].includes(value),
+  },
+  /**
+   * @type {"flex-start" | "center" | "flex-end" }
+   * @default 'flex-start'
+   * @description 纵向对齐方式
+   */
+  align: {
+    type: [alignItemsEnum, String],
+    default: 'flex-start',
+    validator: (value: string) => ['flex-start', 'center', 'flex-end'].includes(value),
+  },
+  /**
+   * @type {"8px" | "16px" | "24px" }
+   * @description 间距
+   */
+  gap: {
+    type: [gapEnum, String],
+  },
+  /**
+   * @type {"nowrap" | "wrap" | "wrap-reverse" }
+   * @default 'nowrap'
+   * @description 是否换行
+   */
+  flexWrap: {
+    type: [flexWrapEnum, String],
+    default: 'nowrap',
+    validator: (value: string) => ['nowrap', 'wrap', 'wrap-reverse'].includes(value),
+  },
+  /**
+   * @type
+   * @default 0
+   * @description 尺寸
+   */
+  flexGrow: {
+    type: [Number, String],
+    default: 0,
+  },
+  /**
+   * @type
+   * @default '100%'
+   * @description 宽度
+   */
+  width: {
+    type: [String],
+    default: '100%',
+  },
+  /**
+   * @type
+   * @default '100%'
+   * @description 高度
+   */
+  height: {
+    type: [String],
+    default: '100%',
+  },
+  /**
+   * @type
+   * @default ''
+   * @description 最小宽度
+   */
+  minWidth: {
+    type: [String],
+    default: '',
+  },
+  /**
+   * @type
+   * @default ''
+   * @description 最小高度
+   */
+  minHeigth: {
+    type: [String],
+    default: '',
+  },
+  /**
+   * @type
+   * @default false
+   * @description 可拖拽
+   */
+  resizable: {
+    type: [Boolean, String],
+    default: false,
+  },
+  flexShrink: {
+    type: [String],
+    default: 'initial',
+  },
+})
+watch(props, (val) => {
+  divWidth.value = val.width + '' ? val.width + '' : '100%'
+  divHeight.value = val.height + '' ? val.height + '' : '100%'
+})
+</script>
+<style scoped lang="scss"></style>