agilebuilder-ui 1.1.13-tmp4 → 1.1.13-tmp6

package/src/components/Scrollbar/index.vue

@@ -1,197 +1,197 @@
-<template>
-    <el-scrollbar v-bind="mergedAttrs" ref="scrollbarRef">
-        <slot />
-    </el-scrollbar>
-</template>
-
-<script setup>
-import { ElScrollbar } from 'element-plus';
-// import { useStore } from 'vuex';
-import store from '../../store';
-import { toRefs, reactive, mergeProps, ref, onMounted, watch, useAttrs, computed, defineEmits, useSlots } from 'vue';
-
-const slots = useSlots();
-
-// const store = useStore();
-
-store?.dispatch?.('startListeningToResize');
-
-const scrollbarRef = ref(null);
-
-const scrollToEmitValue = ref(undefined)
-
-const emits = defineEmits(['scrollToTop', 'scrollToBottom']);
-
-const resizeProps = computed(() => ({
-    // 宽度
-    windowWidth: store.getters.windowWidth,
-    // 高度
-    windowHeight: store.getters.windowHeight,
-    // 是否移动端
-    isMobileResize: store.getters.isMobileResize,
-}));
-
-// 定义初始化参数
-const defaultAttrs = reactive({
-    always: false, // 滚动条是否总是显示
-    // wrapStyle: 'height: 100%', // 滚动区域的样式
-});
-
-const props = defineProps({
-    // 是否开启滚动距离阴影
-    showScrollShadow: {
-        type: Boolean,
-        default: true
-    },
-    triggerDistance: {
-        type: Number,
-        default: 0
-    },
-    // 动态计算 max-height
-    setMaxHeight: {
-        type: [Function, undefined],
-        default: () => undefined
-    },
-    // 动态计算 height
-    setHeight: {
-        type: [Function, undefined],
-        default: () => undefined
-    }
-});
-
-const { attrs } = useAttrs();
-
-// 统一写入
-const setHeightFun = (fun) => {
-    try {
-        return fun?.(resizeProps.value)
-    } catch (error) {
-        console.error(error)
-    }
-    return
-}
-
-// 合并初始化参数和传入的属性
-const mergedAttrs = computed(() => {
-    const attrsData = mergeProps(defaultAttrs, attrs)
-    return {
-        ...({
-            // 绑定 setMaxHeight 事件 返回 最大高度
-            ...(props.setMaxHeight ? { maxHeight: setHeightFun(props.setMaxHeight) } : {}),
-            // 绑定 setHeight 事件 返回 高度
-            ...(props.setHeight ? { height: setHeightFun(props.setHeight) } : {}),
-        }),
-        ...attrsData
-    }
-});
-
-// 滚动距离回调事件
-const scrollToEmits = (scrollElement) => {
-    if (!scrollElement) return
-    const isAtTop = scrollElement.scrollTop <= props.triggerDistance;
-    const isAtBottom = scrollElement.scrollTop + scrollElement.clientHeight >= (scrollElement.scrollHeight - props.triggerDistance);
-    if (isAtBottom) {
-        // scrollToEmitValue 校验确保只执行一次
-        // 底部事件 
-        !['at-bottom'].includes(scrollToEmitValue.value) && emits('scrollToBottom');
-        scrollToEmitValue.value = 'at-bottom'
-    } else if (isAtTop) {
-        // 顶部事件
-        !['at-top'].includes(scrollToEmitValue.value) && emits('scrollToTop');
-        scrollToEmitValue.value = 'at-top'
-    } else {
-        scrollToEmitValue.value = undefined
-    }
-}
-
-// 滚动阴影事件
-const handleScroll = () => {
-    const scrollElement = scrollbarRef.value?.$el.querySelector('.el-scrollbar__wrap');
-    if (scrollElement) {
-        const isAtTop = scrollElement.scrollTop === 0;
-        const isAtBottom = scrollElement.scrollTop + scrollElement.clientHeight === scrollElement.scrollHeight;
-        if (props.showScrollShadow) {
-            if (!isAtTop) {
-                scrollbarRef.value.$el.classList.add('scroll-top-shadow');
-            } else {
-                scrollbarRef.value.$el.classList.remove('scroll-top-shadow');
-            }
-            if (!isAtBottom) {
-                scrollbarRef.value.$el.classList.add('scroll-bottom-shadow');
-            } else {
-                scrollbarRef.value.$el.classList.remove('scroll-bottom-shadow');
-            }
-        } else {
-            scrollbarRef.value.$el.classList.remove('scroll-top-shadow', 'scroll-bottom-shadow');
-        }
-        scrollToEmits(scrollElement);
-    }
-};
-
-onMounted(() => {
-    const scrollElement = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
-    if (scrollElement) {
-        scrollElement.addEventListener('scroll', handleScroll);
-        handleScroll();
-        scrollToEmits(scrollElement);
-    }
-});
-
-watch(() => props.showScrollShadow, () => {
-    handleScroll();
-});
-
-watch(() => mergedAttrs?.maxHeight, () => {
-    setTimeout(handleScroll, 500);
-});
-
-watch(() => mergedAttrs?.height, () => {
-    setTimeout(handleScroll, 500);
-});
-watch(
-  () => slots.default?.(),
-  (newValue, oldValue) => {
-    if (newValue !== oldValue) {
-        setTimeout(handleScroll, 500);
-    }
-  },
-  { deep: true }
-);
-</script>
-
-<style lang="scss" scoped>
-.el-scrollbar ::v-deep {
-    position: relative;
-
-    &.scroll-top-shadow {
-        &::before {
-            content: ' ';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 8px;
-            box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.2);
-            z-index: 2;
-        }
-    }
-
-    &.scroll-bottom-shadow {
-        &::after {
-            content: ' ';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            height: 8px;
-            box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.2);
-            z-index: 2;
-        }
-    }
-
-    &>.el-scrollbar__wrap {
-        position: relative;
-        z-index: 1;
-    }
-}
+<template>
+    <el-scrollbar v-bind="mergedAttrs" ref="scrollbarRef">
+        <slot />
+    </el-scrollbar>
+</template>
+
+<script setup>
+import { ElScrollbar } from 'element-plus';
+// import { useStore } from 'vuex';
+import store from '../../store';
+import { toRefs, reactive, mergeProps, ref, onMounted, watch, useAttrs, computed, defineEmits, useSlots } from 'vue';
+
+const slots = useSlots();
+
+// const store = useStore();
+
+store?.dispatch?.('startListeningToResize');
+
+const scrollbarRef = ref(null);
+
+const scrollToEmitValue = ref(undefined)
+
+const emits = defineEmits(['scrollToTop', 'scrollToBottom']);
+
+const resizeProps = computed(() => ({
+    // 宽度
+    windowWidth: store.getters.windowWidth,
+    // 高度
+    windowHeight: store.getters.windowHeight,
+    // 是否移动端
+    isMobileResize: store.getters.isMobileResize,
+}));
+
+// 定义初始化参数
+const defaultAttrs = reactive({
+    always: false, // 滚动条是否总是显示
+    // wrapStyle: 'height: 100%', // 滚动区域的样式
+});
+
+const props = defineProps({
+    // 是否开启滚动距离阴影
+    showScrollShadow: {
+        type: Boolean,
+        default: true
+    },
+    triggerDistance: {
+        type: Number,
+        default: 0
+    },
+    // 动态计算 max-height
+    setMaxHeight: {
+        type: [Function, undefined],
+        default: () => undefined
+    },
+    // 动态计算 height
+    setHeight: {
+        type: [Function, undefined],
+        default: () => undefined
+    }
+});
+
+const { attrs } = useAttrs();
+
+// 统一写入
+const setHeightFun = (fun) => {
+    try {
+        return fun?.(resizeProps.value)
+    } catch (error) {
+        console.error(error)
+    }
+    return
+}
+
+// 合并初始化参数和传入的属性
+const mergedAttrs = computed(() => {
+    const attrsData = mergeProps(defaultAttrs, attrs)
+    return {
+        ...({
+            // 绑定 setMaxHeight 事件 返回 最大高度
+            ...(props.setMaxHeight ? { maxHeight: setHeightFun(props.setMaxHeight) } : {}),
+            // 绑定 setHeight 事件 返回 高度
+            ...(props.setHeight ? { height: setHeightFun(props.setHeight) } : {}),
+        }),
+        ...attrsData
+    }
+});
+
+// 滚动距离回调事件
+const scrollToEmits = (scrollElement) => {
+    if (!scrollElement) return
+    const isAtTop = scrollElement.scrollTop <= props.triggerDistance;
+    const isAtBottom = scrollElement.scrollTop + scrollElement.clientHeight >= (scrollElement.scrollHeight - props.triggerDistance);
+    if (isAtBottom) {
+        // scrollToEmitValue 校验确保只执行一次
+        // 底部事件 
+        !['at-bottom'].includes(scrollToEmitValue.value) && emits('scrollToBottom');
+        scrollToEmitValue.value = 'at-bottom'
+    } else if (isAtTop) {
+        // 顶部事件
+        !['at-top'].includes(scrollToEmitValue.value) && emits('scrollToTop');
+        scrollToEmitValue.value = 'at-top'
+    } else {
+        scrollToEmitValue.value = undefined
+    }
+}
+
+// 滚动阴影事件
+const handleScroll = () => {
+    const scrollElement = scrollbarRef.value?.$el.querySelector('.el-scrollbar__wrap');
+    if (scrollElement) {
+        const isAtTop = scrollElement.scrollTop === 0;
+        const isAtBottom = scrollElement.scrollTop + scrollElement.clientHeight === scrollElement.scrollHeight;
+        if (props.showScrollShadow) {
+            if (!isAtTop) {
+                scrollbarRef.value.$el.classList.add('scroll-top-shadow');
+            } else {
+                scrollbarRef.value.$el.classList.remove('scroll-top-shadow');
+            }
+            if (!isAtBottom) {
+                scrollbarRef.value.$el.classList.add('scroll-bottom-shadow');
+            } else {
+                scrollbarRef.value.$el.classList.remove('scroll-bottom-shadow');
+            }
+        } else {
+            scrollbarRef.value.$el.classList.remove('scroll-top-shadow', 'scroll-bottom-shadow');
+        }
+        scrollToEmits(scrollElement);
+    }
+};
+
+onMounted(() => {
+    const scrollElement = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
+    if (scrollElement) {
+        scrollElement.addEventListener('scroll', handleScroll);
+        handleScroll();
+        scrollToEmits(scrollElement);
+    }
+});
+
+watch(() => props.showScrollShadow, () => {
+    handleScroll();
+});
+
+watch(() => mergedAttrs?.maxHeight, () => {
+    setTimeout(handleScroll, 500);
+});
+
+watch(() => mergedAttrs?.height, () => {
+    setTimeout(handleScroll, 500);
+});
+watch(
+  () => slots.default?.(),
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+        setTimeout(handleScroll, 500);
+    }
+  },
+  { deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.el-scrollbar ::v-deep {
+    position: relative;
+
+    &.scroll-top-shadow {
+        &::before {
+            content: ' ';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.2);
+            z-index: 2;
+        }
+    }
+
+    &.scroll-bottom-shadow {
+        &::after {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.2);
+            z-index: 2;
+        }
+    }
+
+    &>.el-scrollbar__wrap {
+        position: relative;
+        z-index: 1;
+    }
+}
 </style>

package/src/mixins/resizeMixin.js

@@ -1,49 +1,49 @@
-export default {
-    data() {
-        const element = document.querySelector('.amb-design-board');
-        let designObserver
-        if (element) {
-            this.designObserver = new ResizeObserver(entries => {
-                for (const entry of entries) {
-                    console.log(entry);
-                    this.handleDesignResize(entry?.['target'])
-                }
-            });
-            designObserver.observe(element);
-        }
-        return {
-            windowWidth: designObserver ? element.clientWidth : window.innerWidth,
-            windowHeight: designObserver ? element.clientHeight : window.innerHeight,
-            designObserver
-        };
-    },
-    computed: {
-        isMobileResize() {
-            return (this.windowWidth ?? 0) <= 768
-        }
-    },
-    mounted() {
-        if (!this.designObserver) {
-            window.addEventListener('resize', this.handleWindowResize);
-        }
-    },
-    beforeDestroy() {
-        if (this.designObserver) {
-            this.designObserver.disconnect();
-        } else {
-            window.removeEventListener('resize', this.handleWindowResize);
-        }
-    },
-    methods: {
-        handleWindowResize() {
-            this.windowWidth = window.innerWidth;
-            this.windowHeight = window.innerHeight;
-        },
-        handleDesignResize(element) {
-            if (element) {
-                this.windowWidth = element.clientWidth;
-                this.windowHeight = element.clientHeight;
-            }
-        }
-    }
+export default {
+    data() {
+        const element = document.querySelector('.amb-design-board');
+        let designObserver
+        if (element) {
+            this.designObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    console.log(entry);
+                    this.handleDesignResize(entry?.['target'])
+                }
+            });
+            designObserver.observe(element);
+        }
+        return {
+            windowWidth: designObserver ? element.clientWidth : window.innerWidth,
+            windowHeight: designObserver ? element.clientHeight : window.innerHeight,
+            designObserver
+        };
+    },
+    computed: {
+        isMobileResize() {
+            return (this.windowWidth ?? 0) <= 768
+        }
+    },
+    mounted() {
+        if (!this.designObserver) {
+            window.addEventListener('resize', this.handleWindowResize);
+        }
+    },
+    beforeDestroy() {
+        if (this.designObserver) {
+            this.designObserver.disconnect();
+        } else {
+            window.removeEventListener('resize', this.handleWindowResize);
+        }
+    },
+    methods: {
+        handleWindowResize() {
+            this.windowWidth = window.innerWidth;
+            this.windowHeight = window.innerHeight;
+        },
+        handleDesignResize(element) {
+            if (element) {
+                this.windowWidth = element.clientWidth;
+                this.windowHeight = element.clientHeight;
+            }
+        }
+    }
 };

package/src/styles/display-layout.scss

@@ -93,13 +93,22 @@
 .yx-card-main {
   &.is-checked {
     border-color: #409eff;
+    background-color: #ecf5ff;
   }
   &[header-padding] {
     & > .el-card__header {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: stretch;
       padding: 0 !important;
       overflow: hidden;
       min-height: 50px;
 
+      @media (max-width: 450px) {
+        min-height: 40px;
+      }
+
       & > .yx-flex-wrap {
         gap: 10px;
         height: 100%;
@@ -113,6 +122,7 @@
     }
   }
   .el-card__header {
+
     & > .yx-flex-wrap {
       flex: 1 1 auto;
 
@@ -131,6 +141,7 @@
   }
   .yx-card-body {
     padding: var(--el-card-padding);
+    background-color: var(--el-fill-color-blank);
   }
   @media (max-width: 450px) {
     &[header-padding] {

package/src/utils/guid.js

@@ -1,13 +1,13 @@
-/**
- * 获取4位随机数
- */
-export function getS4(a, b, c, d) {
-  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
-}
-
-/**
- * 生成GuId
- */
-export function getGuId(data = `{s}{s}-{s}-{s}-{s}-{s}{s}{s}`) {
-  return data.replace(/{(y|m|d|h|i|s|a)+}/g, getS4)
-}
+/**
+ * 获取4位随机数
+ */
+export function getS4(a, b, c, d) {
+  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+}
+
+/**
+ * 生成GuId
+ */
+export function getGuId(data = `{s}{s}-{s}-{s}-{s}-{s}{s}{s}`) {
+  return data.replace(/{(y|m|d|h|i|s|a)+}/g, getS4)
+}