npm - @das-fed/ui - Versions diffs - 6.4.0-test.2 → 6.4.0-test.20 - Mend

@das-fed/ui 6.4.0-test.2 → 6.4.0-test.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1511) hide show

package/packages/components/scrollbar/style.css CHANGED Viewed

@@ -6,4 +6,4 @@
  * https://github.com/KingSora
  *
  * Released under the MIT license.
- */.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}.os-environment{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.os-environment div{width:200%;height:200%;margin:10px 0}.os-environment.os-environment-flexbox-glue{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;width:auto;min-height:200px;min-width:200px}.os-environment.os-environment-flexbox-glue div{flex:auto;width:auto;height:auto;max-height:100%;max-width:100%;margin:0}.os-environment.os-environment-flexbox-glue-max{max-height:200px}.os-environment.os-environment-flexbox-glue-max div{overflow:visible}.os-environment.os-environment-flexbox-glue-max div:before{content:"";display:block;height:999px;width:999px}.os-environment,[data-overlayscrollbars-viewport]{-ms-overflow-style:scrollbar!important}[data-overlayscrollbars-initialize],[data-overlayscrollbars~=scrollbarHidden],[data-overlayscrollbars-viewport~=scrollbarHidden],.os-environment-scrollbar-hidden{scrollbar-width:none!important}[data-overlayscrollbars-initialize]::-webkit-scrollbar,[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,.os-environment-scrollbar-hidden::-webkit-scrollbar,.os-environment-scrollbar-hidden::-webkit-scrollbar-corner{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars]{box-sizing:border-box;margin:0}html[data-overlayscrollbars~=body],html[data-overlayscrollbars~=body]>body{width:100%;height:100%}html[data-overlayscrollbars~=viewport]>body{overflow:visible}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]{box-sizing:inherit;position:relative;flex:auto!important;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]{--os-vaw: 0;--os-vah: 0}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]{overflow:hidden}[data-overlayscrollbars~=host],[data-overlayscrollbars~=viewport]{position:relative;overflow:hidden}[data-overlayscrollbars~=overflowVisible],[data-overlayscrollbars-padding~=overflowVisible],[data-overlayscrollbars-viewport~=overflowVisible]{overflow:visible}[data-overlayscrollbars-overflow-x=hidden]{overflow-x:hidden}[data-overlayscrollbars-overflow-x=scroll]{overflow-x:scroll}[data-overlayscrollbars-overflow-x=hidden]{overflow-y:hidden}[data-overlayscrollbars-overflow-y=scroll]{overflow-y:scroll}[data-overlayscrollbars~=scrollbarPressed],[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]{scroll-behavior:auto!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none}.os-scrollbar-track{position:relative;direction:ltr!important;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0}.os-scrollbar-vertical .os-scrollbar-handle{right:0}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}.os-scrollbar{--os-size: 0;--os-padding-perpendicular: 0;--os-padding-axis: 0;--os-track-border-radius: 0;--os-track-bg: none;--os-track-bg-hover: none;--os-track-bg-active: none;--os-track-border: none;--os-track-border-hover: none;--os-track-border-active: none;--os-handle-border-radius: 0;--os-handle-bg: none;--os-handle-bg-hover: none;--os-handle-bg-active: none;--os-handle-border: none;--os-handle-border-hover: none;--os-handle-border-active: none;--os-handle-min-size: 33px;--os-handle-max-size: none;--os-handle-perpendicular-size: 100%;--os-handle-perpendicular-size-hover: 100%;--os-handle-perpendicular-size-active: 100%;--os-handle-interactive-area-offset: 0}.os-scrollbar .os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar .os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar .os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar .os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar .os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar .os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar .os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars~=updating]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size: 10px;--os-padding-perpendicular: 2px;--os-padding-axis: 2px;--os-track-border-radius: 10px;--os-handle-interactive-area-offset: 4px;--os-handle-border-radius: 10px}.os-theme-dark{--os-handle-bg: rgba(0, 0, 0, .44);--os-handle-bg-hover: rgba(0, 0, 0, .55);--os-handle-bg-active: rgba(0, 0, 0, .66)}.os-theme-light{--os-handle-bg: rgba(255, 255, 255, .44);--os-handle-bg-hover: rgba(255, 255, 255, .55);--os-handle-bg-active: rgba(255, 255, 255, .66)}.das-scrollbar{--os-handle-bg: var(--das-ui-scrollbar-thumb-color) !important;--os-handle-bg-hover: var(--das-ui-scrollbar-thumb-hover-color) !important;--os-handle-bg-active: var(--das-ui-scrollbar-thumb-hover-color) !important;--os-padding-perpendicular: var(--das-ui-scrollbar-padding) !important;--os-size: calc(var(--das-ui-scrollbar-thumb-size) + var(--das-ui-scrollbar-padding) * 2) !important;box-sizing:border-box!important;cursor:pointer!important;transition:padding .15s!important}.das-scrollbar:hover{--os-padding-perpendicular: 0 !important}.das-scrollbar-pro[data-v-c7d8010a] .das-scrollbar-pro-wrap{display:flex;flex-direction:column}.das-scrollbar-pro[data-v-c7d8010a] .das-scrollbar-pro-view{flex:1;min-height:0}.das-scrollbar-pro[data-v-c7d8010a] .el-scrollbar__bar.is-horizontal{height:var(--das-ui-scrollbar-thumb-size)}.das-scrollbar-pro[data-v-c7d8010a] .el-scrollbar__bar.is-vertical{width:var(--das-ui-scrollbar-thumb-size)}.das-scrollbar-pro[data-v-c7d8010a] .el-scrollbar__bar{z-index:var(--das-ui-scrollbar-z-index)}.das-scrollbar-pro[data-v-c7d8010a] .el-scrollbar__bar .el-scrollbar__thumb{opacity:1;background:var(--das-ui-scrollbar-thumb-color)}.das-scrollbar-pro[data-v-c7d8010a] .el-scrollbar__bar:hover .el-scrollbar__thumb,.das-scrollbar-pro[data-v-c7d8010a] .el-scrollbar__bar:active .el-scrollbar__thumb{background:var(--das-ui-scrollbar-thumb-hover-color)}
+ */.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}.os-environment{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.os-environment div{width:200%;height:200%;margin:10px 0}.os-environment.os-environment-flexbox-glue{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;width:auto;min-height:200px;min-width:200px}.os-environment.os-environment-flexbox-glue div{flex:auto;width:auto;height:auto;max-height:100%;max-width:100%;margin:0}.os-environment.os-environment-flexbox-glue-max{max-height:200px}.os-environment.os-environment-flexbox-glue-max div{overflow:visible}.os-environment.os-environment-flexbox-glue-max div:before{content:"";display:block;height:999px;width:999px}.os-environment,[data-overlayscrollbars-viewport]{-ms-overflow-style:scrollbar!important}[data-overlayscrollbars-initialize],[data-overlayscrollbars~=scrollbarHidden],[data-overlayscrollbars-viewport~=scrollbarHidden],.os-environment-scrollbar-hidden{scrollbar-width:none!important}[data-overlayscrollbars-initialize]::-webkit-scrollbar,[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,.os-environment-scrollbar-hidden::-webkit-scrollbar,.os-environment-scrollbar-hidden::-webkit-scrollbar-corner{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars]{box-sizing:border-box;margin:0}html[data-overlayscrollbars~=body],html[data-overlayscrollbars~=body]>body{width:100%;height:100%}html[data-overlayscrollbars~=viewport]>body{overflow:visible}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]{box-sizing:inherit;position:relative;flex:auto!important;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]{--os-vaw: 0;--os-vah: 0}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]{overflow:hidden}[data-overlayscrollbars~=host],[data-overlayscrollbars~=viewport]{position:relative;overflow:hidden}[data-overlayscrollbars~=overflowVisible],[data-overlayscrollbars-padding~=overflowVisible],[data-overlayscrollbars-viewport~=overflowVisible]{overflow:visible}[data-overlayscrollbars-overflow-x=hidden]{overflow-x:hidden}[data-overlayscrollbars-overflow-x=scroll]{overflow-x:scroll}[data-overlayscrollbars-overflow-x=hidden]{overflow-y:hidden}[data-overlayscrollbars-overflow-y=scroll]{overflow-y:scroll}[data-overlayscrollbars~=scrollbarPressed],[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]{scroll-behavior:auto!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none}.os-scrollbar-track{position:relative;direction:ltr!important;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0}.os-scrollbar-vertical .os-scrollbar-handle{right:0}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}.os-scrollbar{--os-size: 0;--os-padding-perpendicular: 0;--os-padding-axis: 0;--os-track-border-radius: 0;--os-track-bg: none;--os-track-bg-hover: none;--os-track-bg-active: none;--os-track-border: none;--os-track-border-hover: none;--os-track-border-active: none;--os-handle-border-radius: 0;--os-handle-bg: none;--os-handle-bg-hover: none;--os-handle-bg-active: none;--os-handle-border: none;--os-handle-border-hover: none;--os-handle-border-active: none;--os-handle-min-size: 33px;--os-handle-max-size: none;--os-handle-perpendicular-size: 100%;--os-handle-perpendicular-size-hover: 100%;--os-handle-perpendicular-size-active: 100%;--os-handle-interactive-area-offset: 0}.os-scrollbar .os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar .os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar .os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar .os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar .os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar .os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar .os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars~=updating]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size: 10px;--os-padding-perpendicular: 2px;--os-padding-axis: 2px;--os-track-border-radius: 10px;--os-handle-interactive-area-offset: 4px;--os-handle-border-radius: 10px}.os-theme-dark{--os-handle-bg: rgba(0, 0, 0, .44);--os-handle-bg-hover: rgba(0, 0, 0, .55);--os-handle-bg-active: rgba(0, 0, 0, .66)}.os-theme-light{--os-handle-bg: rgba(255, 255, 255, .44);--os-handle-bg-hover: rgba(255, 255, 255, .55);--os-handle-bg-active: rgba(255, 255, 255, .66)}.das-scrollbar{--os-handle-bg: var(--das-ui-scrollbar-thumb-color) !important;--os-handle-bg-hover: var(--das-ui-scrollbar-thumb-hover-color) !important;--os-handle-bg-active: var(--das-ui-scrollbar-thumb-hover-color) !important;--os-padding-perpendicular: var(--das-ui-scrollbar-padding) !important;--os-size: calc(var(--das-ui-scrollbar-thumb-size) + var(--das-ui-scrollbar-padding) * 2) !important;box-sizing:border-box!important;cursor:pointer!important;transition:padding .15s!important}.das-scrollbar:hover{--os-padding-perpendicular: 0 !important}.das-scrollbar-pro[data-v-8a847b45] .das-scrollbar-pro-wrap{display:flex;flex-direction:column}.das-scrollbar-pro[data-v-8a847b45] .das-scrollbar-pro-view{flex:1;min-height:0}.das-scrollbar-pro[data-v-8a847b45] .el-scrollbar__bar.is-horizontal{height:var(--das-ui-scrollbar-thumb-size)}.das-scrollbar-pro[data-v-8a847b45] .el-scrollbar__bar.is-vertical{width:var(--das-ui-scrollbar-thumb-size)}.das-scrollbar-pro[data-v-8a847b45] .el-scrollbar__bar{z-index:var(--das-ui-scrollbar-z-index)}.das-scrollbar-pro[data-v-8a847b45] .el-scrollbar__bar .el-scrollbar__thumb{opacity:1;background:var(--das-ui-scrollbar-thumb-color)}.das-scrollbar-pro[data-v-8a847b45] .el-scrollbar__bar:hover .el-scrollbar__thumb,.das-scrollbar-pro[data-v-8a847b45] .el-scrollbar__bar:active .el-scrollbar__thumb{background:var(--das-ui-scrollbar-thumb-hover-color)}

package/packages/components/scrollbar/style.css.gz CHANGED Viewed

Binary file

package/packages/components/search/index.d.ts CHANGED Viewed

@@ -1,99 +1,138 @@
-declare const DasSearch: import("@das-fed/utils").SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
+declare const DasSearch: import("@das-fed/utils").SFCWithInstall<import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<"small" | "custom" | "large" | "middle" | "middle-l" | "middle-xl">;
+        required: true;
         default: string;
     };
-    searchType: {
-        type: StringConstructor;
-        default: string;
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+        default: boolean;
     };
-    size: {
-        type: StringConstructor;
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
     };
-    prefixIcon: {
-        type: StringConstructor;
+    placeholder: {
+        type: import("vue").PropType<string>;
         default: string;
     };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
     suffixIcon: {
-        type: StringConstructor;
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    prefixIcon: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
     };
     isIconLeft: {
-        type: BooleanConstructor;
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-    clearable: {
-        type: BooleanConstructor;
+    border: {
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-    disabled: {
-        type: BooleanConstructor;
+    searchType: {
+        type: import("vue").PropType<"basis">;
+        default: string;
+    };
+    isTitle: {
+        type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    border: {
-        type: BooleanConstructor;
+    isExpandAtFocus: {
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    blur: (...args: any[]) => void;
-    change: (...args: any[]) => void;
-    search: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-    "press-enter": (...args: any[]) => void;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string) => void;
+    change: (val: string) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
+    size: {
+        type: import("vue").PropType<"small" | "custom" | "large" | "middle" | "middle-l" | "middle-xl">;
+        required: true;
         default: string;
     };
-    searchType: {
-        type: StringConstructor;
-        default: string;
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+        default: boolean;
     };
-    size: {
-        type: StringConstructor;
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
     };
-    prefixIcon: {
-        type: StringConstructor;
+    placeholder: {
+        type: import("vue").PropType<string>;
         default: string;
     };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
     suffixIcon: {
-        type: StringConstructor;
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    prefixIcon: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
     };
     isIconLeft: {
-        type: BooleanConstructor;
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-    clearable: {
-        type: BooleanConstructor;
+    border: {
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-    disabled: {
-        type: BooleanConstructor;
+    searchType: {
+        type: import("vue").PropType<"basis">;
+        default: string;
+    };
+    isTitle: {
+        type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    border: {
-        type: BooleanConstructor;
+    isExpandAtFocus: {
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-}>> & Readonly<{
-    onBlur?: ((...args: any[]) => any) | undefined;
-    onChange?: ((...args: any[]) => any) | undefined;
-    onSearch?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onPress-enter"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: string;
+}>> & {
+    onChange?: ((val: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+}, {
+    size: "large" | "middle" | "small" | "custom" | "middle-l" | "middle-xl";
     disabled: boolean;
-    border: boolean;
     modelValue: string;
+    placeholder: string;
     clearable: boolean;
     suffixIcon: string;
     prefixIcon: string;
     isIconLeft: boolean;
-    searchType: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+    border: boolean;
+    searchType: "basis";
+    isTitle: boolean;
+    isExpandAtFocus: boolean;
+}, {}>>;
 export { DasSearch };
 export default DasSearch;

package/packages/components/search/index.js CHANGED Viewed

@@ -1,146 +1,152 @@
 import '@das-fed/ui/packages/components/search/style.css';
-import { withInstall as y } from "@das-fed/utils/with-install/index";
-import { defineComponent as I, ref as f, watch as x, openBlock as u, createElementBlock as v, normalizeClass as V, createVNode as S, unref as n, mergeProps as k, isRef as B, withCtx as m, createBlock as h, createCommentVNode as p } from "vue";
+import { withInstall as R } from "@das-fed/utils/with-install/index";
+import { defineComponent as S, ref as o, computed as T, watch as y, openBlock as g, createElementBlock as _, normalizeClass as w, normalizeStyle as N, createVNode as x, unref as v, withCtx as k, mergeProps as O, createBlock as V, createCommentVNode as W, nextTick as P } from "vue";
 import "element-plus/es/components/input/style/css";
-import { ElInput as C } from "element-plus";
-import { DasAutoRegisterIcon as z, DasIcon as b } from "@das-fed/ui/packages/components/icon/index";
-import { setI18nRule as $ } from "@das-fed/web/packages/i18n/index";
-import { setThemeRule as D } from "@das-fed/web/packages/theme/index";
-const L = {
+import { ElInput as U } from "element-plus";
+import { DasAutoRegisterIcon as j, DasIcon as $ } from "@das-fed/ui/packages/components/icon/index";
+import { DasTooltip as q } from "@das-fed/ui/packages/components/tooltip/index";
+import { calcTextWidth as G } from "@das-fed/utils/common-tools";
+import { setThemeRule as H } from "@das-fed/web/packages/theme/index";
+const J = {
   inheritAttrs: !1
-}, R = /* @__PURE__ */ I({
-  ...L,
+}, K = /* @__PURE__ */ S({
+  ...J,
   __name: "Index",
   props: {
-    modelValue: {
-      type: String,
-      default: ""
-    },
-    /**
-     * 搜索类型
-     * basis 基础搜索
-     * quick-search 多条件搜索
-     * panel 高级搜索
-     * smart 智能搜索
-     */
-    searchType: {
-      type: String,
-      default: "basis"
-    },
-    /**
-     * 搜索框尺寸
-     * large | middle | small | custom | middle-l | middle-xl
-     * custom 自适应
-     */
-    size: {
-      type: String,
-      default: "middle"
-    },
-    /**
-     * 前缀图标
-     */
-    prefixIcon: {
-      type: String,
-      default: ""
-    },
-    /**
-     * 后缀图标
-     */
-    suffixIcon: {
-      type: String,
-      default: ""
-    },
-    isIconLeft: {
-      type: Boolean,
-      default: !1
-    },
-    //是否显示清空图标
-    clearable: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * 是否禁用
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * 是否需要边框
-     */
-    border: {
-      type: Boolean,
-      default: !1
-    }
+    modelValue: { default: "" },
+    border: { type: Boolean, default: !1 },
+    searchType: { default: "basis" },
+    placeholder: { default: "" },
+    size: { default: "middle" },
+    disabled: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !0 },
+    prefixIcon: { default: "" },
+    suffixIcon: { default: "" },
+    isIconLeft: { type: Boolean, default: !1 },
+    isTitle: { type: Boolean, default: !0 },
+    isExpandAtFocus: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue", "change", "blur", "press-enter", "search"],
-  setup(e, { emit: i }) {
-    z({
+  emits: ["update:modelValue", "change"],
+  setup(f, { emit: m }) {
+    const l = f, d = m;
+    j({
       search: import("@das-fed/ui/packages/icons/search"),
       empty: import("@das-fed/ui/packages/icons/empty")
     });
-    const l = e, r = i;
-    let t = f(l.modelValue), s = f(l.modelValue);
-    const g = () => {
-      r("update:modelValue", t.value), s.value = t.value, r("change", t.value);
-    }, c = (a) => a === null || typeof a > "u" || a === "";
-    return x(
-      () => l.modelValue,
-      (a, o) => {
-        t.value = a, !c(o) && !c(s.value) && c(a) && (s.value = "", r("change", t.value));
-      },
-      {
-        immediate: !0,
-        deep: !0
+    const p = o(null), c = o(null), a = T({
+      get: () => l.modelValue,
+      set: (e) => d("update:modelValue", e)
+    }), u = o(!1), C = T(() => a.value ? a.value : l.placeholder), F = (e) => {
+      let t = e + "";
+      a.value = t, d("change", t);
+    }, B = () => G(l.placeholder, 12);
+    y(
+      () => c.value,
+      (e) => {
+        setTimeout(() => {
+          var n, E;
+          const t = e;
+          t && (s.value = ((n = t == null ? void 0 : t.ref) == null ? void 0 : n.offsetWidth) ?? 0, r.value = a.value ? (E = t == null ? void 0 : t.ref) == null ? void 0 : E.scrollWidth : B());
+        }, 200);
+      }
+    );
+    const s = o(0), r = o(0), L = () => {
+      P(() => {
+        var e, t, n;
+        (e = c.value) != null && e.ref && (s.value = (t = c.value) == null ? void 0 : t.ref.offsetWidth, r.value = a.value ? (n = c.value) == null ? void 0 : n.ref.scrollWidth : B(), (s.value === r.value || r.value - s.value < 1) && (u.value = !1));
+      });
+    };
+    y(
+      () => [a.value, l.placeholder],
+      () => {
+        L();
       }
-    ), (a, o) => (u(), v(
-      "div",
-      {
-        class: V(`das-ui-search ${e.size}`)
+    );
+    const i = o(), A = () => {
+      s.value === r.value || r.value - s.value < 1 ? u.value = !1 : (u.value = !0, i.value && clearTimeout(i.value));
+    }, z = () => {
+      i.value = setTimeout(() => {
+        u.value = !1;
+      }, 200);
+    };
+    y(
+      () => {
+        var e;
+        return (e = p.value) == null ? void 0 : e.$tooltipRef.popperRef.contentRef;
       },
-      [
-        S(n(C), k({ ref: "$refSearch" }, a.$attrs, {
-          type: "text",
-          class: `main-input ${e.size} ${e.border ? "border" : ""} ${e.isIconLeft ? "left" : ""}`,
-          modelValue: n(t),
-          "onUpdate:modelValue": o[0] || (o[0] = (d) => B(t) ? t.value = d : t = d),
-          disabled: e.disabled,
-          onChange: g,
-          clearable: l.clearable
-        }), {
-          prefix: m(() => [
-            e.isIconLeft ? (u(), h(n(b), {
-              key: 0,
-              icon: e.prefixIcon ? e.prefixIcon : "search"
-            }, null, 8, ["icon"])) : p("v-if", !0)
-          ]),
-          suffix: m(() => [
-            e.isIconLeft ? p("v-if", !0) : (u(), h(n(b), {
-              key: 0,
-              icon: e.suffixIcon ? e.suffixIcon : "search",
-              style: { cursor: "pointer" }
-            }, null, 8, ["icon"]))
-          ]),
-          _: 1
-          /* STABLE */
-        }, 16, ["class", "modelValue", "disabled", "clearable"])
-      ],
-      2
-      /* CLASS */
-    ));
+      (e) => {
+        e && (e.addEventListener("mouseenter", function() {
+          u.value = !0, i.value && clearTimeout(i.value);
+        }), e.addEventListener("mouseleave", function() {
+          i.value = setTimeout(() => {
+            u.value = !1;
+          }, 200);
+        }));
+      }
+    );
+    const h = o(""), b = o(!1), I = T(() => (l == null ? void 0 : l.isExpandAtFocus) === !0 || (l == null ? void 0 : l.isExpandAtFocus) === "true"), D = () => {
+      !I.value || s.value > 400 || (h.value = "400px", b.value = !0);
+    }, M = (e) => {
+      I.value && (h.value = "", b.value = !1);
+    };
+    return (e, t) => (g(), _("div", {
+      class: w(`das-ui-search ${e.size}`),
+      style: N({ width: I.value && b.value ? h.value : "" })
+    }, [
+      x(v(q), {
+        ref_key: "inputTooltipRef",
+        ref: p,
+        effect: "light",
+        placement: "top",
+        manual: !0,
+        visible: u.value,
+        disabled: e.isExpandAtFocus || !e.isTitle,
+        content: C.value
+      }, {
+        default: k(() => [
+          x(v(U), O({
+            ref_key: "$refInput",
+            ref: c
+          }, e.$attrs, {
+            placeholder: e.placeholder,
+            type: "text",
+            class: `main-input ${e.size} ${e.border ? "border" : ""} ${e.isIconLeft ? "left" : ""}`,
+            modelValue: a.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (n) => a.value = n),
+            disabled: e.disabled,
+            onChange: F,
+            clearable: l.clearable,
+            onFocus: D,
+            onBlur: M,
+            onMouseenter: A,
+            onMouseleave: z
+          }), {
+            prefix: k(() => [
+              e.isIconLeft ? (g(), V(v($), {
+                key: 0,
+                icon: e.prefixIcon ? e.prefixIcon : "search"
+              }, null, 8, ["icon"])) : W("", !0)
+            ]),
+            suffix: k(() => [
+              e.isIconLeft ? W("", !0) : (g(), V(v($), {
+                key: 0,
+                icon: e.suffixIcon ? e.suffixIcon : "search",
+                style: { cursor: "pointer" }
+              }, null, 8, ["icon"]))
+            ]),
+            _: 1
+          }, 16, ["placeholder", "class", "modelValue", "disabled", "clearable"])
+        ]),
+        _: 1
+      }, 8, ["visible", "disabled", "content"])
+    ], 6));
   }
-}), E = (e, i) => {
-  const l = e.__vccOpts || e;
-  for (const [r, t] of i)
-    l[r] = t;
+}), Q = (f, m) => {
+  const l = f.__vccOpts || f;
+  for (const [d, p] of m)
+    l[d] = p;
   return l;
-}, N = /* @__PURE__ */ E(R, [["__scopeId", "data-v-ce975baa"]]), T = {
-  "demo-msg": {
-    "zh-CN": "这是第一个示例路由页面",
-    en: "This is Demo Page"
-  }
-}, w = {
+}, X = /* @__PURE__ */ Q(K, [["__scopeId", "data-v-f94032e7"]]), Y = {
   "--demo-alert-bg": {
     light: "#fff",
     dark: "rgba(255,255,255,.2)"
@@ -150,10 +156,9 @@ const L = {
   "--das-ui-search-text": "#212121",
   "--das-ui-search-border-active": "#5582F3"
 };
-$(T);
-D(w);
-const G = y(N);
+H(Y);
+const ne = R(X);
 export {
-  G as DasSearch,
-  G as default
+  ne as DasSearch,
+  ne as default
 };

package/packages/components/search/index.js.gz CHANGED Viewed

Binary file