@jetlinks-web/components 2.0.2 → 2.0.4-1

package/{src → es}/ProTable/style/index.less

@@ -1,92 +1,92 @@
-@import '../../style/variable.less';
-//@import 'ant-design-vue/es/style/themes/variable.less';
-
-.jtable-body-spin {
-    min-height: 100%;
-    width: 100%;
-    padding: 16px 24px 24px;
-    background-color: #fff;
-
-    .ant-spin-nested-loading {
-        height: 100%;
-        .ant-spin-container {
-            height: 100%;
-        }
-    }
-
-    .jtable-body {
-        width: 100%;
-        box-sizing: border-box;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-
-        .jtable-body-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .jtable-body-header-right {
-                display: flex;
-                gap: 8px;
-                align-items: center;
-
-                .jtable-body-header-right-button {
-                    .right-button-icon {
-                        font-size: 16px;
-                        color: #d9d9d9;
-                    }
-
-                    .ant-radio-button-wrapper {
-                        padding: 0 8px;
-                    }
-
-                    .ant-radio-button-wrapper-checked {
-                        .right-button-icon {
-                            color: @primary-color;
-                        }
-                    }
-                }
-            }
-        }
-
-        .jtable-content {
-            flex: 1;
-            padding: 16px 0;
-
-            .jtable-alert {
-                margin-bottom: 16px;
-            }
-
-            .jtable-card {
-                .jtable-card-items {
-                    display: grid;
-                    grid-gap: 26px;
-
-                    .jtable-card-item {
-                        display: flex;
-                        min-width: 0;
-                    }
-                }
-            }
-        }
-
-        .jtable-pagination {
-            // position: absolute;
-            // background-color: white;
-            // padding: 10px 0;
-            // right: 0;
-            // bottom: 0;
-            width: 100%;
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        .j-table-empty {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin: 10% 0;
-        }
-    }
-}
+@import '../../style/variable.less';
+//@import 'ant-design-vue/es/style/themes/variable.less';
+
+.jtable-body-spin {
+    min-height: 100%;
+    width: 100%;
+    padding: 16px 24px 24px;
+    background-color: #fff;
+
+    .ant-spin-nested-loading {
+        height: 100%;
+        .ant-spin-container {
+            height: 100%;
+        }
+    }
+
+    .jtable-body {
+        width: 100%;
+        box-sizing: border-box;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .jtable-body-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .jtable-body-header-right {
+                display: flex;
+                gap: 8px;
+                align-items: center;
+
+                .jtable-body-header-right-button {
+                    .right-button-icon {
+                        font-size: 16px;
+                        color: #d9d9d9;
+                    }
+
+                    .ant-radio-button-wrapper {
+                        padding: 0 8px;
+                    }
+
+                    .ant-radio-button-wrapper-checked {
+                        .right-button-icon {
+                            color: @primary-color;
+                        }
+                    }
+                }
+            }
+        }
+
+        .jtable-content {
+            flex: 1;
+            padding: 16px 0;
+
+            .jtable-alert {
+                margin-bottom: 16px;
+            }
+
+            .jtable-card {
+                .jtable-card-items {
+                    display: grid;
+                    grid-gap: 26px;
+
+                    .jtable-card-item {
+                        display: flex;
+                        min-width: 0;
+                    }
+                }
+            }
+        }
+
+        .jtable-pagination {
+            // position: absolute;
+            // background-color: white;
+            // padding: 10px 0;
+            // right: 0;
+            // bottom: 0;
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .j-table-empty {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 10% 0;
+        }
+    }
+}

package/es/Scrollbar/Bar.js

@@ -0,0 +1,114 @@
+function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+        return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+        lastAccessLHS = value;
+        value = fn(value);
+    }
+    else if (op === 'call' || op === 'optionalCall') {
+        value = fn((...args) => value.call(lastAccessLHS, ...args));
+        lastAccessLHS = undefined;
+    }
+} return value; }
+/* Analyzed bindings: {
+  "always": "props",
+  "minSize": "props",
+  "inject": "setup-const",
+  "ref": "setup-const",
+  "GAP": "setup-maybe-ref",
+  "Thumb": "setup-const",
+  "scrollbarContextKey": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "scrollbar": "setup-maybe-ref",
+  "moveX": "setup-ref",
+  "moveY": "setup-ref",
+  "sizeWidth": "setup-ref",
+  "sizeHeight": "setup-ref",
+  "ratioY": "setup-ref",
+  "ratioX": "setup-ref",
+  "handleScroll": "setup-const",
+  "update": "setup-const"
+} */
+import { defineComponent as _defineComponent } from 'vue';
+import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { inject, ref } from 'vue';
+import { GAP } from './util';
+import Thumb from './Thumb.js';
+import { scrollbarContextKey } from './constants';
+const __sfc_main__ = _defineComponent({
+    props: {
+        always: {
+            type: Boolean,
+            default: true,
+        },
+        minSize: {
+            type: Number,
+            required: true,
+        }
+    },
+    setup(__props, { expose: __expose }) {
+        const props = __props;
+        const scrollbar = inject(scrollbarContextKey);
+        const moveX = ref(0);
+        const moveY = ref(0);
+        const sizeWidth = ref('');
+        const sizeHeight = ref('');
+        const ratioY = ref(1);
+        const ratioX = ref(1);
+        const handleScroll = (wrap) => {
+            if (wrap) {
+                const offsetHeight = wrap.offsetHeight - GAP;
+                const offsetWidth = wrap.offsetWidth - GAP;
+                moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * ratioY.value;
+                moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * ratioX.value;
+            }
+        };
+        const update = () => {
+            const wrap = _optionalChain([scrollbar, 'optionalAccess', _ => _.wrapElement]);
+            if (!wrap)
+                return;
+            const offsetHeight = wrap.offsetHeight - GAP;
+            const offsetWidth = wrap.offsetWidth - GAP;
+            const originalHeight = offsetHeight ** 2 / wrap.scrollHeight;
+            const originalWidth = offsetWidth ** 2 / wrap.scrollWidth;
+            const height = Math.max(originalHeight, props.minSize);
+            const width = Math.max(originalWidth, props.minSize);
+            ratioY.value =
+                originalHeight /
+                    (offsetHeight - originalHeight) /
+                    (height / (offsetHeight - height));
+            ratioX.value =
+                originalWidth /
+                    (offsetWidth - originalWidth) /
+                    (width / (offsetWidth - width));
+            sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : '';
+            sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : '';
+        };
+        __expose({
+            handleScroll,
+            update,
+        });
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock(_Fragment, null, [
+                _createVNode(Thumb, {
+                    move: moveX.value,
+                    ratio: ratioX.value,
+                    size: sizeWidth.value,
+                    always: __props.always
+                }, null, 8 /* PROPS */, ["move", "ratio", "size", "always"]),
+                _createVNode(Thumb, {
+                    move: moveY.value,
+                    ratio: ratioY.value,
+                    size: sizeHeight.value,
+                    vertical: "",
+                    always: __props.always
+                }, null, 8 /* PROPS */, ["move", "ratio", "size", "always"])
+            ], 64 /* STABLE_FRAGMENT */));
+        };
+    }
+});
+export default __sfc_main__;

package/es/Scrollbar/Scrollbar.js

@@ -0,0 +1,212 @@
+function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+        return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+        lastAccessLHS = value;
+        value = fn(value);
+    }
+    else if (op === 'call' || op === 'optionalCall') {
+        value = fn((...args) => value.call(lastAccessLHS, ...args));
+        lastAccessLHS = undefined;
+    }
+} return value; }
+/* Analyzed bindings: {
+  "computed": "setup-const",
+  "nextTick": "setup-const",
+  "onMounted": "setup-const",
+  "onUpdated": "setup-const",
+  "provide": "setup-const",
+  "reactive": "setup-const",
+  "ref": "setup-const",
+  "watch": "setup-const",
+  "useEventListener": "setup-maybe-ref",
+  "useResizeObserver": "setup-maybe-ref",
+  "isNumber": "setup-maybe-ref",
+  "isObject": "setup-maybe-ref",
+  "Bar": "setup-const",
+  "scrollbarContextKey": "setup-maybe-ref",
+  "scrollbarEmits": "setup-maybe-ref",
+  "scrollbarProps": "setup-maybe-ref",
+  "BarInstance": "setup-maybe-ref",
+  "COMPONENT_NAME": "literal-const",
+  "props": "setup-reactive-const",
+  "emit": "setup-const",
+  "stopResizeObserver": "setup-let",
+  "stopResizeListener": "setup-let",
+  "scrollbarRef": "setup-ref",
+  "wrapRef": "setup-ref",
+  "resizeRef": "setup-ref",
+  "barRef": "setup-ref",
+  "wrapStyle": "setup-ref",
+  "wrapKls": "setup-ref",
+  "resizeKls": "setup-ref",
+  "handleScroll": "setup-const",
+  "scrollTo": "setup-const",
+  "setScrollTop": "setup-const",
+  "setScrollLeft": "setup-const",
+  "update": "setup-const"
+} */
+import { defineComponent as _defineComponent } from 'vue';
+import { renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock } from "vue";
+import { computed, nextTick, onMounted, onUpdated, provide, reactive, ref, watch, } from 'vue';
+import { useEventListener, useResizeObserver } from '@vueuse/core';
+import { isNumber, isObject } from '@jetlinks-web/utils';
+import Bar from './Bar.js';
+import { scrollbarContextKey } from './constants';
+import { scrollbarEmits, scrollbarProps, } from './scrollbarProps';
+const COMPONENT_NAME = 'JScrollbar';
+const __sfc_main__ = _defineComponent({
+    ...{
+        name: COMPONENT_NAME,
+    },
+    props: scrollbarProps,
+    emits: scrollbarEmits,
+    setup(__props, { expose: __expose, emit: __emit }) {
+        const props = __props;
+        const emit = __emit;
+        let stopResizeObserver = undefined;
+        let stopResizeListener = undefined;
+        const scrollbarRef = ref();
+        const wrapRef = ref();
+        const resizeRef = ref();
+        const barRef = ref();
+        const wrapStyle = computed(() => {
+            const style = {};
+            if (props.height)
+                style.height = `${props.height}px`;
+            if (props.maxHeight)
+                style.maxHeight = `${props.maxHeight}px`;
+            return [props.wrapStyle, style];
+        });
+        const wrapKls = computed(() => {
+            return [
+                'j-scrollbar__wrap',
+                'j-scrollbar__wrap--hidden-default'
+            ];
+        });
+        const resizeKls = computed(() => {
+            return ['j-scrollbar__view', props.viewClass];
+        });
+        const handleScroll = () => {
+            if (wrapRef.value) {
+                _optionalChain([barRef, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.handleScroll, 'call', _4 => _4(wrapRef.value)]);
+                emit('scroll', {
+                    scrollTop: wrapRef.value.scrollTop,
+                    scrollLeft: wrapRef.value.scrollLeft,
+                });
+            }
+        };
+        function scrollTo(arg1, arg2) {
+            if (isObject(arg1)) {
+                wrapRef.value.scrollTo(arg1);
+            }
+            else if (isNumber(arg1) && isNumber(arg2)) {
+                wrapRef.value.scrollTo(arg1, arg2);
+            }
+        }
+        const setScrollTop = (value) => {
+            if (!isNumber(value)) {
+                throw new Error('value must be a number');
+            }
+            wrapRef.value.scrollTop = value;
+        };
+        const setScrollLeft = (value) => {
+            if (!isNumber(value)) {
+                throw new Error(`[${COMPONENT_NAME}] value must be a number`);
+            }
+            wrapRef.value.scrollLeft = value;
+        };
+        const update = () => {
+            _optionalChain([barRef, 'access', _5 => _5.value, 'optionalAccess', _6 => _6.update, 'call', _7 => _7()]);
+        };
+        watch(() => props.noresize, (noResize) => {
+            if (noResize) {
+                _optionalChain([stopResizeObserver, 'optionalCall', _8 => _8()]);
+                _optionalChain([stopResizeListener, 'optionalCall', _9 => _9()]);
+            }
+            else {
+                ;
+                ({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
+                stopResizeListener = useEventListener('resize', update);
+            }
+        }, { immediate: true });
+        watch(() => [props.maxHeight, props.height], () => {
+            if (!props.native)
+                nextTick(() => {
+                    update();
+                    if (wrapRef.value) {
+                        _optionalChain([barRef, 'access', _10 => _10.value, 'optionalAccess', _11 => _11.handleScroll, 'call', _12 => _12(wrapRef.value)]);
+                    }
+                });
+        });
+        provide(scrollbarContextKey, reactive({
+            scrollbarElement: scrollbarRef,
+            wrapElement: wrapRef,
+        }));
+        onMounted(() => {
+            if (!props.native)
+                nextTick(() => {
+                    update();
+                });
+        });
+        onUpdated(() => update());
+        __expose({
+            /** @description scrollbar wrap ref */
+            wrapRef,
+            /** @description update scrollbar state manually */
+            update,
+            /** @description scrolls to a particular set of coordinates */
+            scrollTo,
+            /** @description set distance to scroll top */
+            setScrollTop,
+            /** @description set distance to scroll left */
+            setScrollLeft,
+            /** @description handle scroll event */
+            handleScroll,
+        });
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", {
+                ref_key: "scrollbarRef",
+                ref: scrollbarRef,
+                class: "j-scrollbar"
+            }, [
+                _createElementVNode("div", {
+                    ref_key: "wrapRef",
+                    ref: wrapRef,
+                    class: _normalizeClass(wrapKls.value),
+                    style: _normalizeStyle(wrapStyle.value),
+                    onScroll: handleScroll
+                }, [
+                    (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+                        id: _ctx.id,
+                        ref_key: "resizeRef",
+                        ref: resizeRef,
+                        class: _normalizeClass(resizeKls.value),
+                        role: _ctx.role,
+                        "aria-label": _ctx.ariaLabel,
+                        "aria-orientation": _ctx.ariaOrientation
+                    }, {
+                        default: _withCtx(() => [
+                            _renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3 /* FORWARDED */
+                    }, 8 /* PROPS */, ["id", "class", "role", "aria-label", "aria-orientation"]))
+                ], 38 /* CLASS, STYLE, NEED_HYDRATION */),
+                (!_ctx.native)
+                    ? (_openBlock(), _createBlock(Bar, {
+                        key: 0,
+                        ref_key: "barRef",
+                        ref: barRef,
+                        always: _ctx.always,
+                        "min-size": _ctx.minSize
+                    }, null, 8 /* PROPS */, ["always", "min-size"]))
+                    : _createCommentVNode("v-if", true)
+            ], 512 /* NEED_PATCH */));
+        };
+    }
+});
+export default __sfc_main__;