vue-element-ui-x 1.0.42-beta → 1.0.43-beta

package/src/styles/Bubble.scss

@@ -1,158 +0,0 @@
-@import '../theme/var.scss';
-
-.el-x-bubble {
-  display: flex;
-  gap: var(--el-x-bubble-avatar-placeholder-gap);
-}
-
-.el-x-bubble-avatar-size {
-  ::v-deep .el-avatar {
-    width: var(--el-x-bubble-avatar-placeholder-width) !important;
-    height: var(--el-x-bubble-avatar-placeholder-height) !important;
-  }
-}
-
-.el-x-bubble-avatar-placeholder {
-  width: var(--el-x-bubble-avatar-placeholder-width) !important;
-  height: var(--el-x-bubble-avatar-placeholder-height) !important;
-}
-
-.el-x-bubble-start {
-  .el-x-bubble-content-wrapper {
-    .el-x-bubble-content-corner {
-      border-start-start-radius: $--el-x-border-radius-base - 2px;
-    }
-  }
-}
-
-.el-x-bubble-end {
-  justify-content: end;
-  flex-direction: row-reverse;
-
-  .el-x-bubble-content-wrapper {
-    align-items: flex-end;
-
-    .el-x-bubble-content-corner {
-      border-start-end-radius: $--el-x-border-radius-base - 2px;
-    }
-  }
-}
-
-.el-x-bubble-no-style {
-  .el-x-bubble-content-wrapper {
-    .el-x-bubble-content {
-      background-color: transparent;
-      padding: 0;
-    }
-  }
-}
-
-.el-x-bubble-content-wrapper {
-  flex: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  min-width: 0;
-  max-width: 100%;
-
-  .el-x-bubble-header,
-  .el-x-bubble-content,
-  .el-x-bubble-footer {
-    font-size: $--el-x-font-size-base;
-    color: $--el-x-text-color-primary;
-    line-height: $--el-x-font-line-height-primary;
-  }
-
-  // .el-x-bubble-header {
-  //   margin-bottom: var();
-  // }
-
-  .el-x-bubble-content {
-    background-color: $--el-x-fill-color;
-    padding: $--el-x-padding-md $--el-x-padding-lg;
-    border-radius: $--el-x-border-radius-base + 4px;
-    position: relative;
-    box-sizing: border-box;
-    min-width: 0;
-    max-width: var(--bubble-content-max-width);
-    color: $--el-x-text-color-primary;
-    font-size: $--el-x-font-size-base;
-    line-height: $--el-x-font-line-height-primary;
-    // min-height: calc(#{$--el-x-padding-md} * 2 + #{$--el-x-font-line-height-primary} * #{$--el-x-font-size-base} );
-    word-break: break-word;
-
-    // 打字器没有内容时候展示高度
-    .no-content {
-      // height: 16px;
-      height: 0;
-    }
-  }
-
-  // 气泡圆角
-  .el-x-bubble-content-round {
-    border-radius: $--el-x-border-radius-round;
-  }
-
-  // 气泡样式
-  .el-x-bubble-content-filled {
-    background-color: $--el-x-fill-color;
-  }
-
-  .el-x-bubble-content-borderless {
-    background-color: $--el-x-fill-color;
-    border: $--el-x-border-width solid $--el-x-border-color;
-  }
-
-  .el-x-bubble-content-outlined {
-    background: none;
-    border: $--el-x-border-width solid $--el-x-border-color;
-  }
-
-  .el-x-bubble-content-shadow {
-    background: none;
-    // box-shadow: var(--el-box-shadow-tertiary);
-    box-shadow: $--el-x-box-shadow-base;
-  }
-
-  .el-x-bubble-content-loading {
-    width: fit-content;
-
-    .el-x-bubble-loading-wrap {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      // height: 16px;
-      /* 盒子高度 */
-      gap: 5px;
-    }
-
-    .dot {
-      width: 5px;
-      height: 5px;
-      background-color: $--color-primary;
-      /* 点的颜色 */
-      border-radius: 50%;
-      /* 圆形 */
-      animation: wave 1s infinite ease-in-out;
-      /* 动画 */
-    }
-
-    /* 波浪动画 */
-    @keyframes wave {
-
-      0%,
-      100% {
-        transform: translateY(-2px);
-      }
-
-      50% {
-        transform: translateY(2px);
-        /* 上下波动 */
-      }
-    }
-  }
-
-  .el-x-bubble-footer {
-    margin-top: $--el-x-padding-sm;
-  }
-}

package/src/styles/BubbleList.scss

@@ -1,148 +0,0 @@
-@import '../theme/var.scss';
-
-.el-x-bubble-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 0;
-  max-height: var(--el-x-bubble-list-max-height);
-  overflow: auto;
-  scroll-behavior: smooth;
-
-  position: relative;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: transparent;
-    background-color: #0003;
-    border-radius: 10px;
-    transition: background-color 0.2s ease-in-out;
-  }
-
-  &::-webkit-scrollbar-track {
-    border-radius: 10px;
-    background: transparent;
-  }
-
-  &:hover {
-    &::-webkit-scrollbar-thumb {
-      background: #c1c1c1;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background: #a8a8a8;
-    }
-  }
-
-  &.always-scrollbar {
-    &::-webkit-scrollbar-thumb {
-      background: #c1c1c1;
-    }
-
-    &:hover::-webkit-scrollbar-thumb {
-      background: #a8a8a8;
-    }
-  }
-}
-
-@supports (scrollbar-color: auto) {
-  .el-x-bubble-list {
-    scrollbar-color: transparent transparent;
-    scrollbar-width: thin;
-
-    &:hover {
-      scrollbar-color: #c1c1c1 transparent;
-    }
-
-    &.always-scrollbar {
-      scrollbar-color: #c1c1c1 transparent;
-    }
-  }
-}
-
-.el-x-bubble-list-default-back-button {
-  position: sticky;
-  user-select: none;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  padding: 10px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #ffffff;
-  border-radius: 50%;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.02), 0 6px 10px 0 rgba(47, 53, 64, 0.1);
-  transition: all 0.3s ease;
-  z-index: 100;
-
-  &:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .el-x-bubble-list-back-to-bottom-icon {
-    font-size: var(--el-x-bubble-list-btn-size);
-    position: relative;
-
-    .back-to-bottom-loading-svg-bg {
-      position: absolute;
-      font-size: calc(var(--el-x-bubble-list-btn-size) + 26px);
-      animation: is-loading 1s infinite linear;
-      width: 40px;
-      height: 40px;
-    }
-
-    @keyframes is-loading {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
-
-  .back-to-bottom-loading-svg-bg {
-    position: absolute;
-    font-size: calc(var(--el-x-bubble-list-btn-size) + 26px);
-    animation: is-loading 1s infinite linear;
-    width: 40px;
-    height: 40px;
-  }
-
-  @keyframes is-loading {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}
-
-.el-x-bubble-list-back-to-bottom-solt {
-  position: sticky;
-  user-select: none;
-  cursor: initial;
-  width: fit-content;
-  height: fit-content;
-  padding: 0;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: initial;
-
-  &:hover {
-    transform: translateY(0px);
-    box-shadow: initial;
-  }
-}

package/src/styles/Conversations.scss

@@ -1,283 +0,0 @@
-.el-x-conversations-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  position: relative;
-  width: fit-content;
-  box-sizing: border-box;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
-}
-
-.el-x-conversations-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box
-}
-
-.el-x-conversations-scroll-wrapper {
-  flex: 1;
-  overflow: hidden;
-  position: relative
-}
-
-.el-x-conversations-scroll-wrapper::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 8px;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
-  pointer-events: none
-}
-
-.el-x-conversations-load-more {
-  display: flex;
-  width: calc(100% - 20px);
-  padding: 14px 10px;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  gap: 3px;
-  color: #909399;
-  background-color: var(--conversation-list-auto-bg-color, #fff);
-  margin-right: 20px;
-  border-radius: 8px;
-  height: auto;
-  min-height: var(--conversation-label-height, 20px);
-  box-sizing: border-box
-}
-
-.el-x-conversations-load-more-is-loading {
-  margin-top: 2px;
-  animation: spinloading 2s linear infinite
-}
-
-@keyframes spinloading {
-  0% {
-    transform: rotate(0deg)
-  }
-
-  100% {
-    transform: rotate(360deg)
-  }
-}
-
-.scroll-content {
-  min-height: 100%
-}
-
-.loading-more {
-  text-align: center;
-  padding: 10px 0;
-  color: #909399;
-  font-size: 14px
-}
-
-.el-x-conversation-group {
-  position: relative
-}
-
-.el-x-conversation-group:last-child {
-  margin-bottom: 0
-}
-
-.el-x-conversation-group .el-x-conversation-group-title {
-  font-size: 14px;
-  color: #909399;
-  padding: 8px 0;
-  font-weight: 500;
-  margin-bottom: 4px;
-  border-radius: 4px;
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-  width: calc(100% - 10px);
-  box-sizing: border-box
-}
-
-.el-x-conversation-group .sticky-title {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  background-color: var(--conversation-list-auto-bg-color, #fff)
-}
-
-.el-x-conversation-group .active-sticky {
-  z-index: 10
-}
-
-.el-x-conversation-group .el-x-conversation-group-items {
-  padding-top: 0
-}
-
-.scroll-to-top-btn {
-  position: absolute;
-  right: 16px;
-  bottom: 16px;
-  z-index: 99;
-  opacity: .8;
-  transition: opacity .3s
-}
-
-.scroll-to-top-btn:hover {
-  opacity: 1
-}
-
-.el-x-conversation-item {
-  padding: 14px 10px;
-  margin-right: 20px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color .2s ease
-}
-
-.el-x-conversation-item+.el-x-conversation-item {
-  margin-top: 4px
-}
-
-.el-x-conversation-item.disabled {
-  opacity: .5;
-  cursor: not-allowed;
-  color: #c0c4cc
-}
-
-.el-x-conversation-item.active {
-  background-color: #f0f0f0
-}
-
-.el-x-conversation-item.hovered,
-.el-x-conversation-item:hover {
-  background-color: #f0f0f0
-}
-
-.el-x-conversation-item.menu-opened {
-  background-color: #f0f0f0
-}
-
-.el-x-conversation-content {
-  display: flex;
-  align-items: center;
-  height: var(--conversation-label-height, 20px)
-}
-
-.el-x-conversation-content .el-x-conversation-prefix-icon {
-  margin-right: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center
-}
-
-.el-x-conversation-content .el-x-conversation-content-main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  position: relative;
-  overflow: hidden
-}
-
-.el-x-conversation-content .el-x-conversation-label-container {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  overflow: hidden
-}
-
-.el-x-conversation-content .el-x-conversation-label {
-  font-size: 14px;
-  color: #303133;
-  position: relative;
-  white-space: nowrap
-}
-
-.el-x-conversation-content .el-x-conversation-label.text-gradient {
-  mask-image: linear-gradient(to right, black 60%, transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%)
-}
-
-.el-x-conversation-content .el-x-conversation-timestamp {
-  font-size: 14px;
-  color: #909399;
-  margin-left: 8px
-}
-
-.el-x-conversation-content .el-x-conversation-suffix-icon {
-  margin-left: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center
-}
-
-.el-x-conversation-content .el-x-conversation-dropdown-more {
-  justify-self: center;
-  height: 100%;
-  display: flex;
-  align-items: center
-}
-
-.el-x-conversation-content .el-x-conversation-dropdown-more-icon {
-  font-size: 16px;
-  padding: 2px;
-  border-radius: 5px
-}
-
-.el-x-conversation-content .el-x-conversation-dropdown-more-icon:hover {
-  background-color: #d3d3d3
-}
-
-.el-x-conversation-content .el-x-conversation-menu {
-  margin-left: 8px;
-  display: flex;
-  align-items: center;
-  opacity: 0;
-  transition: opacity .2s ease
-}
-
-.hovered .el-x-conversation-content .el-x-conversation-menu,
-.active .el-x-conversation-content .el-x-conversation-menu {
-  opacity: 1
-}
-
-.el-x-conversation-dropdown-menu {
-  max-height: 300px;
-  overflow-y: auto
-}
-
-.el-x-conversations-scrollbar {
-  height: 100%;
-  overflow-y: auto
-}
-
-.el-x-conversations-scrollbar::-webkit-scrollbar {
-  width: 6px
-}
-
-.el-x-conversations-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0);
-  border-radius: 3px;
-  transition: background-color .3s ease
-}
-
-.el-x-conversations-scrollbar::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0)
-}
-
-.el-x-conversations-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: #e0e0e0
-}
-
-@supports(scrollbar-width: thin) {
-  .el-x-conversations-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
-  }
-
-  .el-x-conversations-scrollbar:hover {
-    scrollbar-color: #e0e0e0 rgba(0, 0, 0, 0)
-  }
-}