@sdata/web-vue 1.8.0 → 1.10.0

package/dist/sd.css

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 /*! Tailwind CSS v4 preflight baseline scoped to SD Design layer */
+@import url("vue-virtual-scroller/dist/vue-virtual-scroller.css");
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -228,7 +229,7 @@
 }
 .sd-icon-hover {
   position: relative;
-  display: inline-block;
+  display: block;
   cursor: pointer;
 }
 .sd-icon-hover .sd-icon {
@@ -2012,6 +2013,7 @@ body {
 }
 .sd-select-view-multiple .sd-select-view-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -2019,9 +2021,16 @@ body {
   display: flex;
   flex-wrap: wrap;
 }
+.sd-select-view-multiple .sd-select-view-inner.sd-select-view-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -2039,6 +2048,19 @@ body {
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   width: 100%;
   padding-right: 0;
@@ -2065,6 +2087,9 @@ body {
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   box-sizing: border-box;
 }
+.sd-select-view-inner-responsive .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
+  flex: 0 0 auto;
+}
 .sd-select-view-multiple .sd-select-view-mirror {
   position: absolute;
   top: 0;
@@ -2073,6 +2098,27 @@ body {
   visibility: hidden;
   pointer-events: none;
 }
+.sd-select-view-multiple .sd-select-view-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-select-view-multiple .sd-select-view-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-select-view-multiple .sd-select-view-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);
@@ -3155,6 +3201,11 @@ body {
   padding-left: 10px;
   overflow: auto;
 }
+.sd-tree-select-popup .sd-tree-select-tree-wrapper.sd-tree-select-tree-wrapper-virtual {
+  height: auto;
+  max-height: none;
+  overflow: hidden;
+}
 .sd-tree-select-popup .sd-tree-node {
   padding-left: 0;
 }
@@ -7262,95 +7313,52 @@ body {
 
 .sd-scrollbar {
   position: relative;
-}
-.sd-scrollbar-container {
-  position: relative;
-  scrollbar-width: none;
-}
-.sd-scrollbar-container::-webkit-scrollbar {
-  display: none;
-}
-.sd-scrollbar-track {
-  position: absolute;
-  z-index: 100;
-}
-.sd-scrollbar-track-direction-horizontal {
-  bottom: 0;
-  left: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 15px;
-}
-.sd-scrollbar-track-direction-vertical {
-  top: 0;
-  right: 0;
-  box-sizing: border-box;
-  width: 15px;
-  height: 100%;
-}
-.sd-scrollbar-thumb {
-  position: absolute;
-  display: block;
-  box-sizing: border-box;
-}
-.sd-scrollbar-thumb-bar {
   width: 100%;
   height: 100%;
-  background-color: var(--color-neutral-4);
-  border-radius: 6px;
-}
-.sd-scrollbar-thumb:hover .sd-scrollbar-thumb-bar, .sd-scrollbar-thumb-dragging .sd-scrollbar-thumb-bar {
-  background-color: var(--color-neutral-6);
-}
-.sd-scrollbar-thumb-direction-horizontal .sd-scrollbar-thumb-bar {
-  height: 9px;
-  margin: 3px 0;
-}
-.sd-scrollbar-thumb-direction-vertical .sd-scrollbar-thumb-bar {
-  width: 9px;
-  margin: 0 3px;
 }
-.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb {
-  opacity: 0;
-}
-.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb-dragging {
-  opacity: 0.8;
-}
-.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb {
-  transition: opacity ease 200ms;
-}
-.sd-scrollbar.sd-scrollbar-type-embed:hover .sd-scrollbar-thumb {
-  opacity: 0.8;
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-track {
-  background-color: var(--color-neutral-1);
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-track-direction-horizontal {
-  border-top: 1px solid var(--color-neutral-3);
-  border-bottom: 1px solid var(--color-neutral-3);
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-track-direction-vertical {
-  border-right: 1px solid var(--color-neutral-3);
-  border-left: 1px solid var(--color-neutral-3);
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-thumb-direction-horizontal {
-  margin: -1px 0;
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-thumb-direction-vertical {
-  margin: 0 -1px;
-}
-.sd-scrollbar.sd-scrollbar-type-track.sd-scrollbar-both .sd-scrollbar-track-direction-vertical::after {
-  position: absolute;
-  right: -1px;
-  bottom: 0;
-  display: block;
-  box-sizing: border-box;
-  width: 15px;
-  height: 15px;
-  background-color: var(--color-neutral-1);
-  border-right: 1px solid var(--color-neutral-3);
-  border-bottom: 1px solid var(--color-neutral-3);
-  content: "";
+.sd-scrollbar-container {
+  min-width: 100%;
+  min-height: 100%;
+}
+.sd-scrollbar .os-scrollbar {
+  --os-size: 6px;
+  --os-handle-bg: var(--color-neutral-4);
+  --os-handle-bg-hover: var(--color-neutral-5);
+  --os-handle-bg-active: var(--color-neutral-6);
+  --os-track-bg: transparent;
+  --os-track-bg-hover: transparent;
+  --os-track-bg-active: transparent;
+  --os-padding-axis: 0;
+  --os-padding-perpendicular: 0;
+  --os-handle-border-radius: 6px;
+}
+.sd-scrollbar .os-scrollbar-handle {
+  transition: background-color 0.16s ease, opacity 0.16s ease;
+}
+.sd-scrollbar .sd-scrollbar-theme-embed {
+  --os-handle-perpendicular-size: 6px;
+  --os-handle-perpendicular-size-hover: 6px;
+  --os-handle-perpendicular-size-active: 6px;
+  --os-handle-interactive-area-offset: 0;
+}
+.sd-scrollbar .sd-scrollbar-theme-track {
+  --os-size: 6px;
+  --os-track-bg: var(--color-neutral-1);
+  --os-track-bg-hover: var(--color-neutral-1);
+  --os-track-bg-active: var(--color-neutral-1);
+  --os-track-border: 1px solid var(--color-neutral-3);
+  --os-handle-perpendicular-size: 6px;
+  --os-padding-axis: -1px;
+}
+.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-theme-embed {
+  --os-handle-bg: var(--color-neutral-4);
+  --os-handle-bg-hover: var(--color-neutral-5);
+  --os-handle-bg-active: var(--color-neutral-6);
+}
+.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-theme-track {
+  --os-handle-bg: var(--color-neutral-4);
+  --os-handle-bg-hover: var(--color-neutral-5);
+  --os-handle-bg-active: var(--color-neutral-6);
 }
 
 .sd-result {
@@ -10160,6 +10168,7 @@ body {
 }
 .sd-input-tag .sd-input-tag-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -10167,9 +10176,16 @@ body {
   display: flex;
   flex-wrap: wrap;
 }
+.sd-input-tag .sd-input-tag-inner.sd-input-tag-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -10187,6 +10203,19 @@ body {
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   width: 100%;
   padding-right: 0;
@@ -10213,6 +10242,9 @@ body {
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   box-sizing: border-box;
 }
+.sd-input-tag-inner-responsive .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
+  flex: 0 0 auto;
+}
 .sd-input-tag .sd-input-tag-mirror {
   position: absolute;
   top: 0;
@@ -10221,6 +10253,27 @@ body {
   visibility: hidden;
   pointer-events: none;
 }
+.sd-input-tag .sd-input-tag-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);
@@ -15288,8 +15341,10 @@ body {
 }
 .sd-cascader-list-multiple .sd-cascader-option-label, .sd-cascader-list-strictly .sd-cascader-option-label {
   padding-left: 0;
+  text-align: start;
 }
 .sd-cascader-list-multiple .sd-cascader-option, .sd-cascader-list-strictly .sd-cascader-option {
+  width: 100%;
   padding-left: 12px;
 }
 .sd-cascader-list-multiple .sd-cascader-option .sd-checkbox,
@@ -15367,6 +15422,9 @@ body {
 .sd-cascader-option-disabled .sd-icon-check, .sd-cascader-option-disabled:hover .sd-icon-check, .sd-cascader-search-option-disabled .sd-icon-check, .sd-cascader-search-option-disabled:hover .sd-icon-check {
   color: var(--color-primary-light-3);
 }
+.sd-cascader-option {
+  width: 100%;
+}
 .sd-cascader-option-active {
   color: var(--color-text-1);
   background-color: var(--color-fill-2);