@sdata/web-vue 3.18.0 → 3.20.0

package/es/sender/style/css.js

@@ -0,0 +1,3 @@
+import "../../style/index.css";
+import "../../rich-text-editor/style/index.css";
+import "./index.css";

package/es/sender/style/index.css

@@ -0,0 +1,301 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.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 {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding-block: 4px 12px;
+  padding-inline: 12px;
+}
+.sd-sender-footer-content {
+  flex: auto;
+  min-width: 0;
+}
+.sd-sender-footer-suffix {
+  flex: none;
+  margin-inline-start: auto;
+}
+.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;
+  }
+}

package/es/sender/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../style/index.scss';
+import '../../rich-text-editor/style/index.scss';
+import './index.scss';

package/es/sender/style/index.js

@@ -0,0 +1,3 @@
+import "../../style/index.scss";
+import "../../rich-text-editor/style/index.scss";
+import "./index.scss";

package/es/sender/style/index.scss

@@ -0,0 +1,359 @@
+@use 'sass:string';
+@use './token.scss' as *;
+@use '@style/theme/index.scss' as theme;
+
+$sender-prefix-cls: string.unquote('#{theme.$prefix}-sender');
+
+.#{$sender-prefix-cls} {
+  box-sizing: border-box;
+
+  &-main {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    background: $sender-color-bg;
+    border: $sender-border-width solid $sender-color-border-input;
+    border-radius: $sender-border-radius;
+    box-shadow: $sender-box-shadow;
+  }
+
+  &-disabled {
+    background: $sender-color-bg-disabled;
+    border-color: transparent;
+  }
+
+  &-content {
+    display: flex;
+    gap: $sender-content-gap;
+    align-items: flex-end;
+    box-sizing: border-box;
+    width: 100%;
+    padding-block: $sender-padding-block;
+    padding-inline: $sender-padding-inline;
+  }
+
+  &-prefix,
+  &-actions-list {
+    flex: none;
+  }
+
+  &-input {
+    flex: auto;
+    align-self: center;
+    min-width: 0;
+    padding: 0;
+    color: $sender-color-text;
+    font-size: $sender-font-size;
+    caret-color: $sender-color-primary;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+
+    &.#{$sender-prefix-cls}-input.sd-textarea-wrapper {
+      overflow: visible;
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+
+      .sd-textarea {
+        min-height: $sender-control-height;
+        padding: 5px 0;
+        background: transparent;
+        border: 0;
+        box-shadow: none;
+
+        &:focus,
+        &:focus-visible {
+          border: 0;
+          outline: 0;
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  &-actions-list {
+    display: flex;
+
+    &-presets {
+      display: flex;
+      gap: $sender-content-gap;
+    }
+  }
+
+  &-actions-btn {
+    &.sd-button-text {
+      color: $sender-color-primary;
+    }
+
+    &-disabled.sd-button-text {
+      color: $sender-color-bg-actions-disabled;
+      border-color: transparent;
+    }
+
+    &-disabled:not(.sd-button-text) {
+      color: #fff;
+      background: $sender-color-bg-actions-disabled;
+      border-color: transparent;
+    }
+
+    &-loading-button {
+      padding: 0;
+      border: 0;
+    }
+
+    &-loading-icon {
+      width: $sender-control-height;
+      height: $sender-control-height;
+      vertical-align: top;
+    }
+
+    &-recording-icon {
+      width: 1.2em;
+      height: 1.2em;
+      vertical-align: top;
+    }
+  }
+
+  &-loading-spinner {
+    transform-origin: center;
+    animation: sender-loading-rotate 1s linear infinite;
+  }
+
+  &-recording-bar {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: sender-recording-bar 0.8s ease-in-out infinite;
+  }
+
+  &-footer {
+    display: flex;
+    gap: $sender-content-gap;
+    align-items: center;
+    box-sizing: border-box;
+    padding-block: $sender-footer-padding-top $sender-padding-block;
+    padding-inline: $sender-padding-inline;
+
+    &-content {
+      flex: auto;
+      min-width: 0;
+    }
+
+    &-suffix {
+      flex: none;
+      margin-inline-start: auto;
+    }
+  }
+
+  &-header {
+    overflow: hidden;
+    border-bottom: $sender-border-width solid $sender-color-border-input;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      padding-block: $sender-padding-block - theme.$border-2;
+      padding-inline: theme.$spacing-7 theme.$spacing-4;
+      font-size: $sender-font-size;
+      line-height: $sender-line-height;
+      background: $sender-color-header-bg;
+      border-radius: $sender-border-radius $sender-border-radius 0 0;
+    }
+
+    &-title {
+      flex: auto;
+    }
+
+    &-close {
+      flex: none;
+    }
+
+    &-content {
+      padding: theme.$spacing-7;
+    }
+
+    &-motion-enter-active,
+    &-motion-leave-active {
+      overflow: hidden;
+      transition:
+        height $sender-motion-duration $sender-motion-easing,
+        border-color $sender-motion-duration $sender-motion-easing;
+    }
+  }
+
+  &-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-rich-text-editor:hover,
+    &.sd-rich-text-editor:focus-within {
+      border: 0;
+      box-shadow: none;
+    }
+
+    .sd-rich-text-editor-content {
+      box-sizing: border-box;
+      padding: 0;
+      color: inherit;
+      font: inherit;
+      line-height: inherit;
+      caret-color: $sender-color-primary;
+      outline: none;
+    }
+
+    .sd-rich-text-editor-placeholder {
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      color: $sender-color-text-placeholder;
+    }
+
+    .sd-rich-text-editor-component {
+      margin-inline: $sender-slot-gap;
+    }
+
+    .sd-rich-text-editor-component-control {
+      min-height: calc(#{$sender-font-size} * #{$sender-line-height} + 2px);
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+
+  &-input-slot-content {
+    width: 100%;
+    min-height: $sender-control-height;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    cursor: text;
+  }
+
+  &-slot {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-skill {
+    display: inline-block;
+    height: calc(#{$sender-font-size} * #{$sender-line-height} + 2px);
+    margin-block: 1px;
+    margin-inline-start: -1px;
+    vertical-align: baseline;
+    word-break: break-all;
+
+    &-empty::after {
+      display: inline-block;
+      height: inherit;
+      color: $sender-color-text-placeholder;
+      content: attr(data-placeholder);
+      pointer-events: none;
+    }
+
+    &-wrapper {
+      display: inline-flex;
+      height: 100%;
+    }
+
+    &-tag {
+      display: inline-flex;
+      gap: $sender-slot-gap;
+      align-items: center;
+      height: 100%;
+      color: $sender-color-primary;
+      font-weight: theme.$font-weight-500;
+      background: $sender-color-bg-skill;
+      border-radius: $sender-slot-border-radius;
+      cursor: pointer;
+      transition: background-color $sender-motion-duration-fast $sender-motion-easing;
+      padding-inline: $sender-skill-padding-inline;
+
+      &:hover {
+        background: $sender-color-bg-skill-hover;
+      }
+
+      &-close {
+        display: inline-flex;
+        color: $sender-color-primary;
+        font-size: theme.$font-size-body-1;
+        transition: color $sender-motion-duration-fast $sender-motion-easing;
+
+        &:not(.#{$sender-prefix-cls}-skill-tag-close-disabled):hover {
+          color: $sender-color-primary-hover;
+        }
+      }
+
+      &-close-disabled {
+        color: $sender-color-text-disabled;
+        cursor: not-allowed;
+      }
+    }
+
+    &-holder {
+      width: $sender-skill-holder-width;
+      height: 100%;
+    }
+  }
+
+  &-switch {
+    display: inline-block;
+
+    .#{$sender-prefix-cls}-switch-content:not(:disabled):hover {
+      color: $sender-color-text;
+      background: $sender-switch-unchecked-hover-bg;
+      border-color: $sender-color-border;
+    }
+
+    &-checked {
+      .#{$sender-prefix-cls}-switch-content {
+        color: $sender-color-primary;
+        background: $sender-switch-checked-bg;
+        border-color: $sender-color-primary;
+
+        &:not(:disabled):hover {
+          color: $sender-color-primary;
+          background: $sender-switch-checked-hover-bg;
+          border-color: $sender-color-primary;
+        }
+      }
+    }
+  }
+}
+
+@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) {
+  .#{$sender-prefix-cls} {
+    &-loading-spinner,
+    &-recording-bar {
+      animation: none;
+    }
+
+    &-header-motion-enter-active,
+    &-header-motion-leave-active {
+      transition-duration: 0.01ms;
+    }
+  }
+}

package/es/sender/style/token.scss

@@ -0,0 +1,43 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+
+$sender-font-size: global.$font-size-body-3;
+$sender-line-height: global.$line-height-base;
+$sender-border-width: global.$border-1;
+$sender-border-radius: calc(global.$radius-medium * 2);
+$sender-slot-border-radius: global.$radius-medium;
+$sender-control-height: global.$size-default;
+
+$sender-padding-block: global.$spacing-6;
+$sender-padding-inline: global.$spacing-6;
+$sender-content-gap: global.$spacing-4;
+$sender-footer-padding-top: global.$spacing-2;
+$sender-slot-gap: global.$spacing-2;
+$sender-skill-padding-inline: global.$spacing-4;
+$sender-skill-holder-width: global.$spacing-5;
+
+$sender-color-primary: global.$color-primary-6;
+$sender-color-primary-hover: global.$color-primary-5;
+$sender-color-text: global.$color-text-1;
+$sender-color-text-disabled: global.$color-text-4;
+$sender-color-text-placeholder: global.$color-text-4;
+$sender-color-bg: global.$color-bg-2;
+$sender-color-bg-disabled: global.$color-fill-2;
+$sender-color-header-bg: global.$color-fill-2;
+$sender-color-border: global.$color-border-2;
+$sender-color-border-input: color-mix(in srgb, #{global.$color-fill-3} 10%, transparent);
+$sender-color-bg-skill: color-mix(in srgb, #{global.$color-primary-6} 8%, transparent);
+$sender-color-bg-skill-hover: color-mix(in srgb, #{global.$color-primary-6} 15%, transparent);
+$sender-color-bg-actions-disabled: color-mix(in srgb, #{global.$color-primary-6} 45%, transparent);
+$sender-switch-checked-bg: color-mix(in srgb, #{global.$color-primary-6} 8%, transparent);
+$sender-switch-checked-hover-bg: color-mix(in srgb, #{global.$color-primary-6} 10%, transparent);
+$sender-switch-unchecked-hover-bg: color-mix(in srgb, #{global.$color-fill-3} 4%, transparent);
+
+$sender-box-shadow:
+  0 1px 2px 0 rgb(0 0 0 / 3%),
+  0 1px 6px -1px rgb(0 0 0 / 2%),
+  0 2px 4px 0 rgb(0 0 0 / 2%);
+$sender-motion-duration: global.$transition-duration-3;
+$sender-motion-duration-fast: global.$transition-duration-2;
+$sender-motion-easing: global.$transition-timing-function-standard;