@sdata/web-vue 3.18.0 → 3.19.0

package/dist/sd.css

@@ -2538,6 +2538,12 @@ body {
 .sd-select-view-single {
   cursor: pointer;
 }
+.sd-select-view-single.sd-select-view-fit-width {
+  width: fit-content;
+}
+.sd-select-view-single.sd-select-view-max-w-full {
+  max-width: 100%;
+}
 .sd-select-view-single .sd-select-view-input {
   width: 100%;
   padding-right: 0;
@@ -2738,6 +2744,12 @@ body {
   max-width: 100%;
   overflow: hidden;
 }
+.sd-select-view-multiple.sd-select-view-fit-width {
+  width: fit-content;
+}
+.sd-select-view-multiple.sd-select-view-max-w-full {
+  max-width: 100%;
+}
 .sd-select-view-multiple.sd-select-view-has-tag {
   padding-right: 4px;
   padding-left: 4px;
@@ -3000,6 +3012,12 @@ body {
   border-radius: var(--sd-border-radius-small);
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+.sd-picker.sd-picker-fit-width {
+  width: fit-content;
+}
+.sd-picker.sd-picker-max-w-full {
+  max-width: 100%;
+}
 .sd-picker-input {
   display: inline-flex;
   flex: 1;
@@ -3263,6 +3281,12 @@ body {
 .sd-input-label {
   cursor: pointer;
 }
+.sd-input-label.sd-input-label-fit-width {
+  width: fit-content;
+}
+.sd-input-label.sd-input-label-max-w-full {
+  max-width: 100%;
+}
 .sd-input-label .sd-input-label-input {
   width: 100%;
   padding-right: 0;
@@ -5257,6 +5281,12 @@ body.sd-tour-active .sd-tour-popover * {
   padding-left: 0;
   overflow: hidden;
 }
+.sd-textarea-wrapper.sd-textarea-fit-width {
+  width: fit-content;
+}
+.sd-textarea-wrapper.sd-textarea-max-w-full {
+  max-width: 100%;
+}
 .sd-textarea-wrapper .sd-textarea-word-limit {
   position: absolute;
   right: 10px;
@@ -8545,6 +8575,279 @@ body.sd-tour-active .sd-tour-popover * {
   border-top: 1px solid var(--sd-color-fill-3);
 }
 
+.sd-sender {
+  box-sizing: border-box;
+}
+.sd-sender-main {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
+  border-radius: calc(var(--sd-border-radius-medium) * 2);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+}
+.sd-sender-disabled {
+  background: var(--sd-color-neutral-2);
+  border-color: transparent;
+}
+.sd-sender-content {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  box-sizing: border-box;
+  width: 100%;
+  padding-block: 12px;
+  padding-inline: 12px;
+}
+.sd-sender-prefix, .sd-sender-actions-list {
+  flex: none;
+}
+.sd-sender-input {
+  flex: auto;
+  align-self: center;
+  min-width: 0;
+  padding: 0;
+  color: var(--sd-color-neutral-10);
+  font-size: 14px;
+  caret-color: rgb(var(--sd-primary-6));
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+}
+.sd-sender-input.sd-sender-input.sd-textarea-wrapper {
+  overflow: visible;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+.sd-sender-input.sd-sender-input.sd-textarea-wrapper .sd-textarea {
+  min-height: 32px;
+  padding: 5px 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+.sd-sender-input.sd-sender-input.sd-textarea-wrapper .sd-textarea:focus, .sd-sender-input.sd-sender-input.sd-textarea-wrapper .sd-textarea:focus-visible {
+  border: 0;
+  outline: 0;
+  box-shadow: none;
+}
+.sd-sender-actions-list {
+  display: flex;
+}
+.sd-sender-actions-list-presets {
+  display: flex;
+  gap: 8px;
+}
+.sd-sender-actions-btn.sd-button-text {
+  color: rgb(var(--sd-primary-6));
+}
+.sd-sender-actions-btn-disabled.sd-button-text {
+  color: color-mix(in srgb, rgb(var(--sd-primary-6)) 45%, transparent);
+  border-color: transparent;
+}
+.sd-sender-actions-btn-disabled:not(.sd-button-text) {
+  color: #fff;
+  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 45%, transparent);
+  border-color: transparent;
+}
+.sd-sender-actions-btn-loading-button {
+  padding: 0;
+  border: 0;
+}
+.sd-sender-actions-btn-loading-icon {
+  width: 32px;
+  height: 32px;
+  vertical-align: top;
+}
+.sd-sender-actions-btn-recording-icon {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: top;
+}
+.sd-sender-loading-spinner {
+  transform-origin: center;
+  animation: sender-loading-rotate 1s linear infinite;
+}
+.sd-sender-recording-bar {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: sender-recording-bar 0.8s ease-in-out infinite;
+}
+.sd-sender-footer {
+  box-sizing: border-box;
+  padding-block: 4px 12px;
+  padding-inline: 12px;
+}
+.sd-sender-header {
+  overflow: hidden;
+  border-bottom: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
+}
+.sd-sender-header-header {
+  display: flex;
+  align-items: center;
+  padding-block: 10px;
+  padding-inline: 16px 8px;
+  font-size: 14px;
+  line-height: 1.5715;
+  background: var(--sd-color-neutral-2);
+  border-radius: calc(var(--sd-border-radius-medium) * 2) calc(var(--sd-border-radius-medium) * 2) 0 0;
+}
+.sd-sender-header-title {
+  flex: auto;
+}
+.sd-sender-header-close {
+  flex: none;
+}
+.sd-sender-header-content {
+  padding: 16px;
+}
+.sd-sender-header-motion-enter-active, .sd-sender-header-motion-leave-active {
+  overflow: hidden;
+  transition: height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.sd-sender-input-slot.sd-rich-text-editor {
+  display: block;
+  align-self: center;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.sd-sender-input-slot.sd-rich-text-editor:hover, .sd-sender-input-slot.sd-rich-text-editor:focus-within {
+  border: 0;
+  box-shadow: none;
+}
+.sd-sender-input-slot .sd-rich-text-editor-content {
+  box-sizing: border-box;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  caret-color: rgb(var(--sd-primary-6));
+  outline: none;
+}
+.sd-sender-input-slot .sd-rich-text-editor-placeholder {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  color: var(--sd-color-neutral-4);
+}
+.sd-sender-input-slot .sd-rich-text-editor-component {
+  margin-inline: 4px;
+}
+.sd-sender-input-slot .sd-rich-text-editor-component-control {
+  min-height: calc(14px * 1.5715 + 2px);
+  font-size: inherit;
+  line-height: inherit;
+}
+.sd-sender-input-slot-content {
+  width: 100%;
+  min-height: 32px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  cursor: text;
+}
+.sd-sender-slot {
+  display: inline-flex;
+  align-items: center;
+}
+.sd-sender-skill {
+  display: inline-block;
+  height: calc(14px * 1.5715 + 2px);
+  margin-block: 1px;
+  margin-inline-start: -1px;
+  vertical-align: baseline;
+  word-break: break-all;
+}
+.sd-sender-skill-empty::after {
+  display: inline-block;
+  height: inherit;
+  color: var(--sd-color-neutral-4);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+.sd-sender-skill-wrapper {
+  display: inline-flex;
+  height: 100%;
+}
+.sd-sender-skill-tag {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  height: 100%;
+  color: rgb(var(--sd-primary-6));
+  font-weight: 500;
+  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 8%, transparent);
+  border-radius: var(--sd-border-radius-medium);
+  cursor: pointer;
+  transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  padding-inline: 8px;
+}
+.sd-sender-skill-tag:hover {
+  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 15%, transparent);
+}
+.sd-sender-skill-tag-close {
+  display: inline-flex;
+  color: rgb(var(--sd-primary-6));
+  font-size: 12px;
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.sd-sender-skill-tag-close:not(.sd-sender-skill-tag-close-disabled):hover {
+  color: rgb(var(--sd-primary-5));
+}
+.sd-sender-skill-tag-close-disabled {
+  color: var(--sd-color-neutral-4);
+  cursor: not-allowed;
+}
+.sd-sender-skill-holder {
+  width: 10px;
+  height: 100%;
+}
+.sd-sender-switch {
+  display: inline-block;
+}
+.sd-sender-switch .sd-sender-switch-content:not(:disabled):hover {
+  color: var(--sd-color-neutral-10);
+  background: color-mix(in srgb, var(--sd-color-neutral-3) 4%, transparent);
+  border-color: var(--sd-color-neutral-3);
+}
+.sd-sender-switch-checked .sd-sender-switch-content {
+  color: rgb(var(--sd-primary-6));
+  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 8%, transparent);
+  border-color: rgb(var(--sd-primary-6));
+}
+.sd-sender-switch-checked .sd-sender-switch-content:not(:disabled):hover {
+  color: rgb(var(--sd-primary-6));
+  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 10%, transparent);
+  border-color: rgb(var(--sd-primary-6));
+}
+
+@keyframes sender-loading-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes sender-recording-bar {
+  0%, 100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(2);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sd-sender-loading-spinner, .sd-sender-recording-bar {
+    animation: none;
+  }
+  .sd-sender-header-motion-enter-active, .sd-sender-header-motion-leave-active {
+    transition-duration: 0.01ms;
+  }
+}
 .sd-secret {
   display: inline-flex;
   gap: 6px;
@@ -8745,6 +9048,153 @@ body.sd-tour-active .sd-tour-popover * {
   margin-top: 20px;
 }
 
+.sd-rich-text-editor {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--sd-color-neutral-10);
+  font-size: 14px;
+  line-height: 1.5715;
+  background: #fff;
+  border: 1px solid var(--sd-color-neutral-3);
+  border-radius: var(--sd-border-radius-medium);
+  transition: border-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.sd-rich-text-editor-focusable:hover {
+  border-color: rgb(var(--sd-primary-5));
+}
+.sd-rich-text-editor:focus-within {
+  border-color: rgb(var(--sd-primary-6));
+  box-shadow: 0 0 0 2px color-mix(in srgb, rgb(var(--sd-primary-6)) 15%, transparent);
+}
+.sd-rich-text-editor-content {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(14px * 1.5715 + 24px);
+  padding-block: 12px;
+  padding-inline: 16px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  outline: none;
+  caret-color: rgb(var(--sd-primary-6));
+}
+.sd-rich-text-editor-placeholder {
+  position: absolute;
+  inset-block-start: 12px;
+  inset-inline-start: 16px;
+  overflow: hidden;
+  color: var(--sd-color-neutral-4);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+.sd-rich-text-editor-disabled {
+  color: var(--sd-color-neutral-4);
+  background: var(--sd-color-neutral-2);
+  cursor: not-allowed;
+}
+.sd-rich-text-editor-readonly {
+  cursor: default;
+}
+.sd-rich-text-editor-paragraph {
+  margin: 0;
+}
+.sd-rich-text-editor-heading-h1, .sd-rich-text-editor-heading-h2, .sd-rich-text-editor-heading-h3, .sd-rich-text-editor-heading-h4, .sd-rich-text-editor-heading-h5, .sd-rich-text-editor-heading-h6 {
+  margin-block: 0 12px;
+}
+.sd-rich-text-editor-quote {
+  margin-block: 12px;
+  margin-inline: 0;
+  padding-inline-start: 16px;
+  border-inline-start: 3px solid var(--sd-color-neutral-4);
+}
+.sd-rich-text-editor-list-ordered, .sd-rich-text-editor-list-unordered {
+  margin-block: 12px;
+  padding-inline-start: 32px;
+}
+.sd-rich-text-editor-list-item-nested {
+  list-style: none;
+}
+.sd-rich-text-editor-link {
+  color: rgb(var(--sd-link-6));
+  text-decoration: underline;
+}
+.sd-rich-text-editor-code {
+  display: block;
+  padding: 16px;
+  overflow-x: auto;
+  font-family: consolas, menlo;
+  white-space: pre;
+  background: var(--sd-color-neutral-2);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-rich-text-editor-text-bold {
+  font-weight: 600;
+}
+.sd-rich-text-editor-text-italic {
+  font-style: italic;
+}
+.sd-rich-text-editor-text-underline {
+  text-decoration: underline;
+}
+.sd-rich-text-editor-text-strikethrough {
+  text-decoration: line-through;
+}
+.sd-rich-text-editor-text-code {
+  padding-inline: 4px;
+  font-family: consolas, menlo;
+  background: var(--sd-color-neutral-2);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-rich-text-editor-component {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  margin-inline: 4px;
+  vertical-align: middle;
+}
+.sd-rich-text-editor-component-selected {
+  border-radius: var(--sd-border-radius-medium);
+  outline: 2px solid rgb(var(--sd-primary-6));
+  outline-offset: 1px;
+}
+.sd-rich-text-editor-component-input > .sd-input-wrapper, .sd-rich-text-editor-component-select > .sd-select-view {
+  display: inline-flex;
+  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 6%, transparent);
+}
+.sd-rich-text-editor-component-control {
+  max-width: 100%;
+  vertical-align: middle;
+}
+.sd-rich-text-editor-component-stretch {
+  display: inline-flex;
+  width: 12em;
+  max-width: none;
+}
+.sd-rich-text-editor-component-stretch > * {
+  box-sizing: border-box;
+  width: 100%;
+}
+.sd-rich-text-editor-component-rangePicker {
+  width: 22em;
+}
+.sd-rich-text-editor-component-tag {
+  margin: 0;
+}
+.sd-rich-text-editor-component-fallback {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.5em;
+  padding-inline: 4px;
+  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 6%, transparent);
+  border-radius: var(--sd-border-radius-medium);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sd-rich-text-editor {
+    transition-duration: 0.01ms;
+  }
+}
 .sd-resizebox {
   position: relative;
   width: 100%;
@@ -11183,6 +11633,12 @@ body.sd-tour-active .sd-tour-popover * {
   box-sizing: border-box;
   width: 100%;
 }
+.sd-mention.sd-mention-fit-width {
+  width: fit-content;
+}
+.sd-mention.sd-mention-max-w-full {
+  max-width: 100%;
+}
 .sd-mention-measure {
   position: absolute;
   inset: 0;
@@ -11741,6 +12197,12 @@ body.sd-tour-active .sd-tour-popover * {
   max-width: 100%;
   overflow: hidden;
 }
+.sd-input-tag.sd-input-tag-fit-width {
+  width: fit-content;
+}
+.sd-input-tag.sd-input-tag-max-w-full {
+  max-width: 100%;
+}
 .sd-input-tag.sd-input-tag-has-tag {
   padding-right: 4px;
   padding-left: 4px;
@@ -12228,6 +12690,12 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-input-wrapper:not(.sd-input-focus) .sd-input-icon-hover:hover::before {
   background-color: var(--sd-color-fill-4);
 }
+.sd-input-wrapper.sd-input-fit-width {
+  width: fit-content;
+}
+.sd-input-wrapper.sd-input-max-w-full {
+  max-width: 100%;
+}
 .sd-input-wrapper .sd-input {
   width: 100%;
   padding-right: 0;
@@ -12292,6 +12760,16 @@ body.sd-tour-active .sd-tour-popover * {
   display: inline-flex;
   width: 100%;
 }
+.sd-input-outer.sd-input-fit-width {
+  width: fit-content;
+}
+.sd-input-outer.sd-input-fit-width > .sd-input-wrapper {
+  flex: 0 1 auto;
+  width: auto;
+}
+.sd-input-outer.sd-input-max-w-full {
+  max-width: 100%;
+}
 .sd-input-outer > .sd-input-wrapper {
   border-radius: 0;
 }