savor-ui 0.0.1

package/dist/es/theme/components/textarea.scss

@@ -0,0 +1,145 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+@use '../common/var.scss' as *;
+
+@include b(textarea) {
+  @include e(wrapper) {
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    color: getCssVar('color', 'text-1');
+    font-size: getCssVar('font-size', 'medium');
+    background-color: getCssVar('color', 'bg-2');
+    border: 1px solid getCssVar('color', 'fill-3');
+    cursor: text;
+    transition:
+      color 0.1s cubic-bezier(0, 0, 1, 1),
+      border-color 0.1s cubic-bezier(0, 0, 1, 1),
+      background-color 0.1s cubic-bezier(0, 0, 1, 1);
+    position: relative;
+    padding-right: 0;
+    padding-left: 0;
+    overflow: hidden;
+
+    &:hover {
+      border: 1px solid getCssVar('color', 'fill-4');
+    }
+    &:focus-within {
+      border-color: getCssVar('color', 'primary-6');
+    }
+    @include when(disabled) {
+      background-color: getCssVar('color', 'fill-2');
+      border-color: getCssVar('color', 'fill-2');
+      cursor: not-allowed;
+    }
+    @include when(error) {
+      border-color: getCssVar('color', 'error-6');
+      &:hover {
+        border-color: getCssVar('color', 'error-6');
+      }
+      &:focus-within {
+        border-color: getCssVar('color', 'error-6');
+      }
+      @include when(filled) {
+        background-color: getCssVar('color', 'error-1');
+        border-color: getCssVar('color', 'error-1');
+        &:hover {
+          background-color: getCssVar('color', 'error-2');
+        }
+        &:focus-within {
+          background-color: getCssVar('color', 'bg-2');
+          border-color: getCssVar('color', 'error-5');
+        }
+      }
+    }
+    @include when(filled) {
+      background-color: getCssVar('color', 'fill-2');
+      border: 1px solid getCssVar('color', 'fill-2');
+      &:hover {
+        background-color: getCssVar('color', 'fill-3');
+      }
+      &:focus-within {
+        background-color: getCssVar('color', 'bg-2');
+        border-color: getCssVar('color', 'primary-6');
+      }
+    }
+  }
+
+  @include e(inner) {
+    width: 100%;
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: 0;
+    outline: none;
+    cursor: inherit;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    display: block;
+    box-sizing: border-box;
+    height: 100%;
+    line-height: 1.5715;
+    vertical-align: top;
+    resize: vertical;
+    color: getCssVar('color', 'text-1');
+    &::placeholder {
+      color: getCssVar('color', 'text-3');
+    }
+  }
+  @include when(auto-size) {
+    resize: none;
+    overflow: hidden;
+  }
+  @include e(limit) {
+    position: absolute;
+    right: 10px;
+    bottom: 6px;
+    color: getCssVar('color', 'text-3');
+    font-size: 12px;
+    user-select: none;
+  }
+  @include e(clear) {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    transform: translateY(-50%);
+    height: 20px;
+    width: 20px;
+    border-radius: getCssVar('radius', 'circle');
+    font-size: getCssVar('font-size', 'medium');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover {
+      background-color: getCssVar('color', 'fill-3');
+    }
+  }
+
+  @each $size in $size-list {
+    @include m(#{$size}) {
+      @include be(textarea, wrapper) {
+        border-radius: getCssVar('radius', $size);
+      }
+      @include be(textarea, inner) {
+        min-height: getCssVar('size', $size);
+        @if $size == 'mini' {
+          font-size: getCssVar('font-size', $size);
+          padding: 0 8px;
+        }
+        @if $size == 'small' {
+          font-size: getCssVar('font-size', 'medium');
+          padding: 4px 8px;
+        }
+        @if $size == 'medium' {
+          font-size: getCssVar('font-size', 'medium');
+          padding: 4px 8px;
+        }
+        @if $size == 'large' {
+          font-size: getCssVar('font-size', 'medium');
+          padding: 4px 12px;
+        }
+      }
+    }
+  }
+}

package/dist/es/theme/components/timeline.scss

@@ -0,0 +1,111 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
+
+@include b(timeline) {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  @include when(reverse) {
+    flex-direction: column-reverse;
+  }
+  @include within-bm(timeline, alternate) {
+    @include be(timeline, item) {
+      @include be(timeline, opposite) {
+        text-align: right;
+      }
+      @include be(timeline, content) {
+        text-align: left;
+      }
+      &:nth-child(2n) {
+        flex-direction: row-reverse;
+        @include be(timeline, opposite) {
+          text-align: left;
+        }
+        @include be(timeline, content) {
+          text-align: right;
+        }
+      }
+    }
+  }
+  @include m(left) {
+    @include be(timeline, opposite) {
+      text-align: right;
+    }
+    @include be(timeline, content) {
+      text-align: left;
+    }
+  }
+  @include m(right) {
+    @include be(timeline, item) {
+      flex-direction: row-reverse;
+    }
+    @include be(timeline, opposite) {
+      text-align: left;
+    }
+    @include be(timeline, content) {
+      text-align: right;
+    }
+  }
+  @include m(default) {
+    @include be(timeline, dot-content) {
+      background: getCssVar("color", "fill-4");
+    }
+  }
+  @each $type in $type-list {
+    @include m(#{$type}) {
+      @include be(timeline, dot-content) {
+        background: getCssVar("color", #{$type}-6);
+      }
+    }
+  }
+  @include e(item) {
+    position: relative;
+    min-height: 78px;
+    color: getCssVar("color", "text-1");
+    font-size: 14px;
+    line-height: 1.5715;
+    display: flex;
+    &:last-child {
+      min-height: 0;
+    }
+  }
+  @include e(opposite) {
+    flex: 1;
+    padding: 0 12px;
+  }
+  @include e(separator) {
+    flex: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+  @include e(dot) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    align-self: baseline;
+    width: 22px;
+    height: 22px;
+  }
+  @include e(dot-content) {
+    height: 8px;
+    width: 8px;
+    border-radius: getCssVar("radius", "medium");
+  }
+  @include e(line) {
+    flex-grow: 1;
+    width: 2px;
+    background: getCssVar("color", "fill-4");
+  }
+  @include e(content) {
+    flex: 1;
+    padding: 0 12px;
+  }
+  @include e(time) {
+    font-size: 12px;
+    color: getCssVar("color", "text-2");
+  }
+}

package/dist/es/theme/components/tooltip.scss

@@ -0,0 +1,27 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(tooltip) {
+  @include e(content) {
+    background-color: getCssVar('color', 'fill-10');
+    box-shadow: getCssVar('shadow', '1');
+    padding: 8px 16px;
+    border-radius: getCssVar('radius', 'medium');
+    border: 1px solid getCssVar('color', 'fill-9');
+    color: getCssVar('color', 'white');
+    line-height: 1.5715;
+  }
+  @include m(mini) {
+    padding: 4px 8px;
+  }
+}
+html.dark {
+  @include e(content) {
+    background-color: #373739;
+    border-color: #373739;
+  }
+  @include be(popover, arrow) {
+    background-color: #373739;
+    border-color: #373739;
+  }
+}

package/dist/es/theme/components/transition.scss

@@ -0,0 +1,140 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+/** HeightTransition */
+.height-transition-enter-from,
+.height-transition-leave-to {
+  opacity: 0;
+}
+.height-transition-enter-to,
+.height-transition-leave-from {
+  opacity: 1;
+}
+.height-transition-enter-active,
+.height-transition-leave-active {
+  overflow: hidden;
+  transition:
+    max-height 0.2s getCssVar('bezier', '1'),
+    opacity 0.2s getCssVar('bezier', 'in'),
+    margin-top 0.2s getCssVar('bezier', '1'),
+    margin-bottom 0.2s getCssVar('bezier', '1'),
+    padding-top 0.2s getCssVar('bezier', '1'),
+    padding-bottom 0.2s getCssVar('bezier', '1');
+}
+.width-transition-enter-from,
+.width-transition-leave-to {
+  opacity: 0;
+}
+.width-transition-enter-to,
+.width-transition-leave-from {
+  opacity: 1;
+}
+.width-transition-enter-active,
+.width-transition-leave-active {
+  overflow: hidden;
+  transition:
+    max-width 0.2s getCssVar('bezier', '1'),
+    opacity 0.2s getCssVar('bezier', 'out'),
+    margin-top 0.2s getCssVar('bezier', '1'),
+    margin-bottom 0.2s getCssVar('bezier', '1'),
+    padding-top 0.2s getCssVar('bezier', '1'),
+    padding-bottom 0.2s getCssVar('bezier', '1');
+}
+
+/** OpacityTransition */
+.opacity-fade-enter-active,
+.opacity-fade-leave-active {
+  transition: opacity 0.3s getCssVar('bezier', '1');
+}
+
+.opacity-fade-enter-from,
+.opacity-fade-leave-to {
+  opacity: 0;
+}
+
+.opacity-fade-enter-to,
+.opacity-fade-leave-from {
+  opacity: 1;
+}
+
+/** ScaleTransition */
+.scale-fade-enter-active,
+.scale-fade-leave-active {
+  transition:
+    transform 0.3s getCssVar('bezier', '1'),
+    opacity 0.3s getCssVar('bezier', '1');
+}
+
+.scale-fade-enter-from,
+.scale-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.85);
+}
+
+.scale-fade-enter-to,
+.scale-fade-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/** SideTransition */
+/** 左侧弹出动画*/
+.side-left-fade-enter-active {
+  transition: transform 0.3s getCssVar('bezier', 'out');
+}
+.side-left-fade-leave-active {
+  transition: transform 0.2s getCssVar('bezier', 'in');
+}
+.side-left-fade-enter-from,
+.side-left-fade-leave-to {
+  transform: translateX(-100%);
+}
+.side-left-fade-enter-to,
+.side-left-fade-leave-from {
+  transform: translateX(0);
+}
+/** 右侧弹出动画*/
+.side-right-fade-enter-active {
+  transition: transform 0.3s getCssVar('bezier', 'out');
+}
+.side-right-fade-leave-active {
+  transition: transform 0.2s getCssVar('bezier', 'in');
+}
+.side-right-fade-enter-from,
+.side-right-fade-leave-to {
+  transform: translateX(100%);
+}
+.side-right-fade-enter-to,
+.side-right-fade-leave-from {
+  transform: translateX(0);
+}
+/** 上侧弹出动画 */
+.side-top-fade-enter-active {
+  transition: transform 0.3s getCssVar('bezier', 'out');
+}
+.side-top-fade-leave-active {
+  transition: transform 0.2s getCssVar('bezier', 'in');
+}
+.side-top-fade-enter-from,
+.side-top-fade-leave-to {
+  transform: translateY(-100%);
+}
+.side-top-fade-enter-to,
+.side-top-fade-leave-from {
+  transform: translateY(0);
+}
+/** 下侧弹出动画 */
+.side-bottom-fade-enter-active {
+  transition: transform 0.3s getCssVar('bezier', 'out');
+}
+.side-bottom-fade-leave-active {
+  transition: transform 0.2s getCssVar('bezier', 'in');
+}
+.side-bottom-fade-enter-from,
+.side-bottom-fade-leave-to {
+  transform: translateY(100%);
+}
+.side-bottom-fade-enter-to,
+.side-bottom-fade-leave-from {
+  transform: translateY(0);
+}

package/dist/es/theme/components/tree.scss

@@ -0,0 +1,79 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+
+@include b(tree) {
+  box-sizing: border-box;
+  transition: height 0.3s getCssVar("bezier", "1");
+  overflow: hidden;
+
+  @include e(node) {
+    border-radius: getCssVar("radius", "medium");
+    padding: 4px;
+    margin-bottom: 4px;
+    color: getCssVar("color", "text-1");
+    cursor: pointer;
+    overflow: hidden;
+
+    &:hover {
+      background-color: getCssVar("color", "fill-1");
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    @include when(selected) {
+      background-color: getCssVar("color", "fill-2");
+    }
+    @include when(disabled) {
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    gap: 8px;
+  }
+
+  @include e(expand-icon) {
+    height: 18px;
+    width: 18px;
+    font-size: 14px;
+    border-radius: getCssVar("radius", "circle");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.3s getCssVar("bezier", "1");
+    cursor: pointer;
+    &:hover {
+      background-color: getCssVar("color", "fill-3");
+    }
+    @include when(expanded) {
+      transform: rotate(90deg);
+    }
+    @include when(leaf) {
+      opacity: 0;
+    }
+  }
+
+  .tree-list-move,
+  .tree-list-enter-active,
+  .tree-list-leave-active {
+    transition: all 0.3s getCssVar("bezier", "1");
+  }
+
+  .tree-list-enter-from,
+  .tree-list-leave-to {
+    opacity: 0;
+  }
+
+  .tree-list-enter-to,
+  .tree-list-leave-from {
+    opacity: 1;
+  }
+
+  .tree-list-leave-active {
+    position: absolute;
+    pointer-events: none;
+  }
+}

package/dist/es/theme/components/upload.scss

@@ -0,0 +1,83 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(upload) {
+  width: 100%;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 12px;
+  @include e(content) {
+    display: flex;
+    flex-direction: column;
+  }
+  @include e(inner) {
+    display: none;
+  }
+  @include e(list) {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    background-color: getCssVar('color', 'fill-2');
+    padding: 8px 12px;
+    gap: 12px;
+    border-radius: getCssVar('radius', 'medium');
+  }
+  @include e(name) {
+    max-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  @include e(progress) {
+    flex: 1;
+  }
+  @include e(actions) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+  @include e(action) {
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: getCssVar('font-size', 'medium');
+    border-radius: getCssVar('radius', 'medium');
+    cursor: pointer;
+    &:hover {
+      color: getCssVar('color', 'primary-6');
+      background-color: getCssVar('color', 'fill-3');
+    }
+  }
+  @include e(drag-wrapper) {
+    background-color: getCssVar('color', 'fill-2');
+    border: 1px dashed getCssVar('color', 'fill-3');
+    border-radius: getCssVar('radius', 'medium');
+    transition: transform 0.3s getCssVar('bezier', '1');
+    &:hover {
+      background-color: getCssVar('color', 'fill-3');
+    }
+    @include when(dragover) {
+      border: 1px dashed getCssVar('color', 'primary-6');
+    }
+  }
+  @include e(drag-content) {
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    cursor: pointer;
+  }
+}

package/dist/es/theme/components/virtual-list.scss

@@ -0,0 +1,50 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(virtual-list) {
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+
+  @include e(content) {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+    position: relative;
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    &::-webkit-scrollbar-track:vertical {
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb:vertical {
+      background-color: getCssVar('color', 'fill-4');
+      -webkit-border-radius: 0;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: getCssVar('color', 'fill-5');
+      -webkit-border-radius: 0;
+    }
+    &::-webkit-scrollbar-track-piece {
+      -webkit-border-radius: 0;
+    }
+  }
+  @include e(list) {
+    width: 100%;
+    will-change: transform, height;
+    position: relative;
+  }
+  @include e(item) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(loading) {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+}

package/dist/es/theme/components/waterfall.scss

@@ -0,0 +1,12 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(waterfall) {
+  width: 100%;
+  @include e(wrapper) {
+    position: relative;
+  }
+  @include e(item) {
+    position: absolute;
+  }
+}

package/dist/es/theme/components/watermark.scss

@@ -0,0 +1,8 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(watermark) {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}