@jetlinks-web/components 3.0.0-rc → 3.0.0

package/lib/Scrollbar/Thumb.js

@@ -26,12 +26,16 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "BAR_MAP": "setup-maybe-ref",
   "renderThumbStyle": "setup-maybe-ref",
   "thumbProps": "setup-maybe-ref",
+  "useScrollbarStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "scrollbar": "setup-maybe-ref",
   "instance": "setup-ref",
   "thumb": "setup-ref",
   "thumbState": "setup-ref",
   "visible": "setup-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "cursorDown": "setup-let",
   "cursorLeave": "setup-let",
   "originalOnSelectStart": "setup-let",
@@ -48,13 +52,14 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "restoreOnselectstart": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, vShow as _vShow, normalizeClass as _normalizeClass, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { unref as _unref, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, vShow as _vShow, normalizeClass as _normalizeClass, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 import { computed, inject, onBeforeUnmount, ref, toRef } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import { isClient } from '@jetlinks-web/utils';
 import { scrollbarContextKey } from './constants';
 import { BAR_MAP, renderThumbStyle } from './util';
 import { thumbProps } from './thumbProps';
+import useScrollbarStyle from './style';
 const __sfc_main__ = _defineComponent({
     props: thumbProps,
     setup(__props) {
@@ -66,6 +71,8 @@ const __sfc_main__ = _defineComponent({
         const thumb = ref();
         const thumbState = ref({});
         const visible = ref(false);
+        const prefixCls = computed(() => 'j-scrollbar');
+        const [wrapSSR, hashId] = useScrollbarStyle(prefixCls);
         let cursorDown = false;
         let cursorLeave = false;
         let originalOnSelectStart = isClient ? document.onselectstart : null;
@@ -159,30 +166,34 @@ const __sfc_main__ = _defineComponent({
         useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mousemove', mouseMoveScrollbarHandler);
         useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mouseleave', mouseLeaveScrollbarHandler);
         return (_ctx, _cache) => {
-            return (_openBlock(), _createBlock(_Transition, {
-                name: "j-scrollbar-fade",
-                persisted: ""
-            }, {
-                default: _withCtx(() => [
-                    _withDirectives(_createElementVNode("div", {
-                        ref_key: "instance",
-                        ref: instance,
-                        class: _normalizeClass(['j-scrollbar__bar', props.vertical ? 'is-vertical' : 'is-horizontal']),
-                        onMousedown: clickTrackHandler
-                    }, [
-                        _createElementVNode("div", {
-                            ref_key: "thumb",
-                            ref: thumb,
-                            class: "j-scrollbar__thumb",
-                            style: _normalizeStyle(thumbStyle.value),
-                            onMousedown: clickThumbHandler
-                        }, null, 36 /* STYLE, NEED_HYDRATION */)
-                    ], 34 /* CLASS, NEED_HYDRATION */), [
-                        [_vShow, _ctx.always || visible.value]
-                    ])
-                ]),
-                _: 1 /* STABLE */
-            }));
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass([_unref(hashId)])
+            }, [
+                _createVNode(_Transition, {
+                    name: "j-scrollbar-fade",
+                    persisted: ""
+                }, {
+                    default: _withCtx(() => [
+                        _withDirectives(_createElementVNode("div", {
+                            ref_key: "instance",
+                            ref: instance,
+                            class: _normalizeClass(['j-scrollbar__bar', props.vertical ? 'is-vertical' : 'is-horizontal']),
+                            onMousedown: clickTrackHandler
+                        }, [
+                            _createElementVNode("div", {
+                                ref_key: "thumb",
+                                ref: thumb,
+                                class: "j-scrollbar__thumb",
+                                style: _normalizeStyle(thumbStyle.value),
+                                onMousedown: clickThumbHandler
+                            }, null, 36 /* STYLE, NEED_HYDRATION */)
+                        ], 34 /* CLASS, NEED_HYDRATION */), [
+                            [_vShow, _ctx.always || visible.value]
+                        ])
+                    ]),
+                    _: 1 /* STABLE */
+                })
+            ], 2 /* CLASS */));
         };
     }
 });

package/lib/Scrollbar/style/index.js

@@ -1,3 +1,70 @@
 "use strict";
 
-require("./index.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var scrollbarBgColor = '#909399';
+var scrollbarHoverBgColor = '#909399';
+var scrollbarHoverOpacity = 0.5;
+var scrollbarOpacity = 0.3;
+var transitionDuration = '0.3s';
+var genScrollbarStyle = function genScrollbarStyle(config) {
+  var componentCls = config.componentCls,
+    token = config.token;
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    overflow: 'hidden',
+    position: 'relative',
+    height: '100%'
+  }, "".concat(componentCls, "__wrap"), (0, _defineProperty2.default)({
+    overflow: 'auto',
+    height: '100%'
+  }, "".concat(componentCls, "--hidden-default"), {
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
+  })), "".concat(componentCls, "__thumb"), {
+    position: 'relative',
+    display: 'block',
+    width: 0,
+    height: 0,
+    cursor: 'pointer',
+    borderRadius: 'inherit',
+    backgroundColor: scrollbarBgColor,
+    transition: "".concat(transitionDuration, " background-color"),
+    opacity: scrollbarOpacity,
+    '&:hover': {
+      backgroundColor: scrollbarHoverBgColor,
+      opacity: scrollbarOpacity
+    }
+  }), "".concat(componentCls, "__bar"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'absolute',
+    right: '2px',
+    bottom: '2px',
+    zIndex: 1,
+    borderRadius: '4px'
+  }, "".concat(componentCls, "--vertical"), {
+    width: '6px',
+    top: '2px',
+    '> div': {
+      width: '100%'
+    }
+  }), "".concat(componentCls, "--horizontal"), {
+    height: '6px',
+    left: '2px',
+    '> div': {
+      height: '100%'
+    }
+  }))), "".concat(componentCls, "-fade"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-fade-enter-active"), {
+    transition: 'opacity 340ms ease-out'
+  }), "".concat(componentCls, "-fade-leave-active"), {
+    transition: 'opacity 120ms ease-out'
+  }), "".concat(componentCls, "-fade-enter-from,").concat(componentCls, "-fade-leave-active"), {
+    opacity: 0
+  }));
+};
+var _default = exports.default = (0, _styleRegister.default)([genScrollbarStyle]);

package/lib/Search/Advanced/History.js

@@ -15,8 +15,12 @@
   "Popover": "setup-maybe-ref",
   "message": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
+  "useSearchStyle": "setup-maybe-ref",
   "emit": "setup-const",
   "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "contextLocale": "setup-maybe-ref",
   "historyList": "setup-ref",
   "historyVisible": "setup-ref",
@@ -28,15 +32,10 @@
   "deleteHistory": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, withModifiers as _withModifiers } from "vue";
-const _hoisted_1 = { class: "search-history-warp" };
-const _hoisted_2 = {
-    key: 0,
-    class: "search-history-items"
-};
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { class: "delete" };
-const _hoisted_5 = {
+import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, withModifiers as _withModifiers } from "vue";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "delete" };
+const _hoisted_3 = {
     key: 1,
     class: "search-history-empty"
 };
@@ -45,6 +44,7 @@ import { isFunction } from 'lodash-es';
 import { AIcon, Empty, Ellipsis } from '../../../';
 import { Popconfirm, Button, FormItemRest, Popover, message } from 'ant-design-vue';
 import { useLocaleReceiver } from "../../LocaleReciver";
+import useSearchStyle from '../style';
 const __sfc_main__ = _defineComponent({
     props: {
         target: {
@@ -69,6 +69,8 @@ const __sfc_main__ = _defineComponent({
     setup(__props, { emit: __emit }) {
         const emit = __emit;
         const props = __props;
+        const prefixCls = computed(() => 'JSearch');
+        const [wrapSSR, hashId] = useSearchStyle(prefixCls);
         const [contextLocale] = useLocaleReceiver('Search');
         const historyList = ref([]);
         const historyVisible = ref(false);
@@ -109,7 +111,9 @@ const __sfc_main__ = _defineComponent({
             }
         };
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['search-history-warp', _unref(hashId)])
+            }, [
                 _createVNode(_unref(FormItemRest), null, {
                     default: _withCtx(() => [
                         _createVNode(_unref(Button), {
@@ -134,7 +138,10 @@ const __sfc_main__ = _defineComponent({
                 }, {
                     content: _withCtx(() => [
                         (!showEmpty.value)
-                            ? (_openBlock(), _createElementBlock("div", _hoisted_2, [
+                            ? (_openBlock(), _createElementBlock("div", {
+                                key: 0,
+                                class: _normalizeClass(['search-history-items', _unref(hashId)])
+                            }, [
                                 (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(historyList.value, (item) => {
                                     return (_openBlock(), _createElementBlock("div", {
                                         key: item.id,
@@ -150,14 +157,14 @@ const __sfc_main__ = _defineComponent({
                                                 ]),
                                                 _: 2 /* DYNAMIC */
                                             }, 1024 /* DYNAMIC_SLOTS */)
-                                        ], 8 /* PROPS */, _hoisted_3),
+                                        ], 8 /* PROPS */, _hoisted_1),
                                         _createVNode(_unref(Popconfirm), {
                                             title: _unref(contextLocale).advanced.history.confirmDelete,
                                             placement: "top",
                                             onConfirm: ($event) => (deleteHistory(item))
                                         }, {
                                             default: _withCtx(() => [
-                                                _createElementVNode("span", _hoisted_4, [
+                                                _createElementVNode("span", _hoisted_2, [
                                                     _createVNode(_unref(AIcon), { type: "DeleteOutlined" })
                                                 ])
                                             ]),
@@ -165,8 +172,8 @@ const __sfc_main__ = _defineComponent({
                                         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["title", "onConfirm"])
                                     ]));
                                 }), 128 /* KEYED_FRAGMENT */))
-                            ]))
-                            : (_openBlock(), _createElementBlock("div", _hoisted_5, [
+                            ], 2 /* CLASS */))
+                            : (_openBlock(), _createElementBlock("div", _hoisted_3, [
                                 _createVNode(_unref(Empty))
                             ]))
                     ]),
@@ -180,7 +187,7 @@ const __sfc_main__ = _defineComponent({
                     ]),
                     _: 1 /* STABLE */
                 }, 8 /* PROPS */, ["visible"])
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });

package/lib/Search/Advanced/SaveHistory.js

@@ -22,8 +22,7 @@
   "saveHistory": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, createVNode as _createVNode, withCtx as _withCtx, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1745819698162"), n = n(), _popScopeId(), n);
+import { unref as _unref, createVNode as _createVNode, withCtx as _withCtx, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock } from "vue";
 const _hoisted_1 = {
     key: 0,
     style: { "width": "240px" }