@sdata/web-vue 3.2.1 → 3.3.0

package/README.md

@@ -120,8 +120,8 @@ pnpm --filter @sdata/web-vue run test:update
 
 # 相关链接
 
-- [暗黑模式](https://69dcb47c8b4208264c6e77c6--sensational-caramel-b44e12.netlify.app/guides/dark)
-- [主题配置](https://69dcb47c8b4208264c6e77c6--sensational-caramel-b44e12.netlify.app/guides/theme)
+- [暗黑模式](https://sd-design.js.org/guides/dark)
+- [主题配置](https://sd-design.js.org/guides/theme)
 - [Figma 设计资源](https://www.figma.com/file/FVu1DydEeXvJqXrkOb90Oi/SD Design%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1_2.0?node-id=5472%3A308)
 
 # 参与贡献

package/dist/sd.css

@@ -2713,6 +2713,8 @@ body {
   font-size: 12px;
   white-space: pre-wrap;
   word-break: break-word;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   background-color: var(--sd-color-bg-2);
   border-color: var(--sd-color-fill-3);
 }
@@ -2796,14 +2798,14 @@ body {
   max-width: 100%;
   vertical-align: bottom;
 }
-.sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag {
+.sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-2);
 }
 .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag .sd-icon-hover:hover::before {
   background-color: var(--sd-color-fill-3);
 }
-.sd-select-view-multiple.sd-select-view-disabled .sd-select-view-tag {
+.sd-select-view-multiple.sd-select-view-disabled .sd-select-view-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   color: var(--sd-color-text-4);
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-3);
@@ -5251,6 +5253,75 @@ body.sd-tour-active .sd-tour-popover * {
   resize: vertical;
 }
 
+.sd-toolbar {
+  width: 100%;
+}
+.sd-toolbar-inner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+  width: 100%;
+}
+.sd-toolbar-with-border .sd-toolbar-inner {
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--sd-color-neutral-3);
+}
+.sd-toolbar-body {
+  flex: 1 1 0;
+  min-width: 0;
+  max-height: var(--toolbar-body-max-height);
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+.sd-toolbar-body--schema .sd-form {
+  display: grid;
+  flex: 1;
+  grid-template-columns: repeat(auto-fill, minmax(var(--toolbar-span-width), 1fr));
+  gap: 8px;
+  width: 100%;
+  background-color: var(--sd-color-bg-2);
+}
+.sd-toolbar-body--schema .sd-form > * {
+  max-width: var(--toolbar-item-max-width);
+}
+.sd-toolbar-body--schema .sd-form-item {
+  margin-bottom: 0;
+}
+.sd-toolbar-body--schema .sd-form-item-content {
+  min-height: var(--toolbar-item-height);
+}
+.sd-toolbar-body--max-width .sd-form {
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--toolbar-item-max-width), var(--toolbar-span-width)), var(--toolbar-item-max-width)));
+}
+.sd-toolbar-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  align-items: center;
+  align-self: flex-end;
+  white-space: nowrap;
+}
+.sd-toolbar-expand {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+.sd-toolbar-expand-icon {
+  transition: transform 0.3s ease;
+}
+.sd-toolbar-expand-icon--up {
+  transform: rotate(180deg);
+}
+@media screen and (width <= 640px) {
+  .sd-toolbar-body--schema .sd-form {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+  .sd-toolbar-body--schema .sd-form-item {
+    grid-column: span 1 !important;
+  }
+}
+
 .sd-tag-group {
   position: relative;
   display: inline-flex;
@@ -6232,6 +6303,9 @@ body.sd-tour-active .sd-tour-popover * {
   grid-column: 1/-1;
   grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
 }
+.sd-table-thead > .sd-table-tr, .sd-table-tbody > .sd-table-tr, .sd-table-tfoot-content > .sd-table-tr {
+  display: contents;
+}
 .sd-table-tbody > .sd-virtual-list, .sd-table-tbody > .sd-table-body {
   grid-column: 1/-1;
   width: 100%;
@@ -6566,9 +6640,10 @@ body.sd-tour-active .sd-tour-popover * {
   flex-direction: column;
   width: auto;
   height: 100%;
+  overflow: hidden;
 }
 .sd-table-container .sd-table-content-scroll-x {
-  overflow: auto hidden;
+  overflow: hidden;
 }
 .sd-table-container::before, .sd-table-container::after {
   position: absolute;
@@ -6597,6 +6672,7 @@ body.sd-tour-active .sd-tour-popover * {
   box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
 .sd-table-header {
+  flex: 0 0 auto;
   width: 100%;
   min-width: 100%;
   overflow: hidden;
@@ -6621,13 +6697,15 @@ body.sd-tour-active .sd-tour-popover * {
   background-color: transparent;
 }
 .sd-table.sd-table-empty .sd-table-header {
-  overflow-x: auto;
+  overflow-x: hidden;
 }
 .sd-table-body {
   position: relative;
+  flex: 1 1 auto;
   width: 100%;
-  min-height: 40px;
-  overflow: auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
   background-color: var(--sd-color-bg-2);
 }
 .sd-table-border .sd-table-container {
@@ -6747,7 +6825,7 @@ body.sd-tour-active .sd-tour-popover * {
   z-index: 1;
   flex-shrink: 0;
   width: 100%;
-  overflow-x: auto;
+  overflow-x: hidden;
   background-color: var(--sd-color-neutral-2);
   box-shadow: 0 -1px 0 var(--sd-color-neutral-3);
   scrollbar-color: transparent transparent;
@@ -11542,6 +11620,8 @@ body.sd-tour-active .sd-tour-popover * {
   font-size: 12px;
   white-space: pre-wrap;
   word-break: break-word;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   background-color: var(--sd-color-bg-2);
   border-color: var(--sd-color-fill-3);
 }
@@ -11625,14 +11705,14 @@ body.sd-tour-active .sd-tour-popover * {
   max-width: 100%;
   vertical-align: bottom;
 }
-.sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
+.sd-input-tag.sd-input-tag-focus .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-2);
 }
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag .sd-icon-hover:hover::before {
   background-color: var(--sd-color-fill-3);
 }
-.sd-input-tag.sd-input-tag-disabled .sd-input-tag-tag {
+.sd-input-tag.sd-input-tag-disabled .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   color: var(--sd-color-text-4);
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-3);