savor-ui 0.0.1

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

@@ -0,0 +1,250 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+
+@include b(menu) {
+  height: 100%;
+  overflow: hidden;
+  font-size: getCssVar("font-size", "medium");
+  transition:
+    background-color 0.3s getCssVar("bezier", "1"),
+    opacity 0.3s getCssVar("bezier", "1"),
+    width 0.3s getCssVar("bezier", "1");
+  @include e(content) {
+    width: 100%;
+    display: flex;
+    gap: 4px;
+    overflow: hidden;
+  }
+  @include m(horizontal) {
+    @include be(menu, content) {
+      flex-direction: row;
+      height: 50px;
+      padding: 0 20px;
+    }
+    @include be(menu, sub-menu) {
+      width: fit-content;
+      height: 100%;
+      flex-direction: row;
+      align-items: center;
+    }
+    @include be(menu, sub-title) {
+      padding: 0 12px;
+      border-radius: getCssVar("radius", "medium");
+      @include when(active) {
+        background-color: getCssVar("color", "fill-2");
+        color: getCssVar("color", "primary-6");
+      }
+    }
+    @include be(menu, item) {
+      width: fit-content;
+      height: 100%;
+    }
+    @include be(menu, item-title) {
+      padding: 0 12px;
+      border-radius: getCssVar("radius", "medium");
+      align-items: center;
+      @include when(active) {
+        &::before {
+          content: "";
+          display: none;
+        }
+      }
+    }
+  }
+  @include m(vertical) {
+    @include be(menu, content) {
+      flex-direction: column;
+    }
+  }
+  @include e(sub-menu) {
+    width: 100%;
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    @include when(collapse) {
+      @include be(menu, sub-title) {
+        justify-content: center;
+        padding: 0;
+        @include when(active) {
+          background-color: getCssVar("color", "fill-2");
+          color: getCssVar("color", "primary-6");
+        }
+      }
+      @include be(menu, item-title) {
+        @include when(active) {
+          &::before {
+            content: "";
+            display: none;
+          }
+        }
+      }
+    }
+  }
+  @include e(sub-title) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    height: 40px;
+    gap: 8px;
+    padding-left: calc(var(--s-menu-level) * 20px);
+    padding-right: 20px;
+    &:hover {
+      background-color: getCssVar("color", "fill-2");
+    }
+    @include when(active) {
+      color: getCssVar("color", "primary-6");
+    }
+  }
+  @include e(sub-icon) {
+    display: flex;
+    align-items: center;
+  }
+  @include e(sub-label) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  @include e(sub-arrow) {
+    display: flex;
+    align-items: center;
+    font-size: getCssVar("font-size", "large");
+  }
+  @include e(sub-content) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  @include e(item-title) {
+    height: 40px;
+    width: 100%;
+    flex-shrink: 0;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    padding-left: calc(20px + var(--s-menu-level) * 20px);
+    padding-right: 20px;
+    position: relative;
+    gap: 8px;
+    &:hover {
+      background-color: getCssVar("color", "fill-2");
+    }
+    @include when(active) {
+      color: getCssVar("color", "white");
+      background-color: getCssVar("color", "primary-6");
+    }
+    @include when(active-left) {
+      background-color: getCssVar("color", "fill-2");
+      color: getCssVar("color", "primary-6");
+      &::before {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 4px;
+        top: 0;
+        left: 0;
+        background-color: getCssVar("color", "primary-6");
+      }
+    }
+    @include when(active-right) {
+      background-color: getCssVar("color", "fill-2");
+      color: getCssVar("color", "primary-6");
+      &::after {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 4px;
+        top: 0;
+        right: 0;
+        background-color: getCssVar("color", "primary-6");
+      }
+    }
+  }
+  @include e(item-icon) {
+    display: flex;
+    align-items: center;
+  }
+  @include e(item-label) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  @include e(pop-content) {
+    border-radius: getCssVar("radius", "medium");
+    background-color: getCssVar("color", "bg-3");
+    box-shadow: getCssVar("shadow", "1");
+    border: 1px solid getCssVar("color", "fill-3");
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px 0;
+
+    @include be(menu, sub-title) {
+      justify-content: flex-start !important;
+      padding: 0 20px !important;
+    }
+
+    @include be(menu, item-title) {
+      justify-content: flex-start !important;
+      padding: 0 20px !important;
+
+      @include when(active) {
+        background-color: getCssVar("color", "fill-2");
+        color: getCssVar("color", "primary-6");
+        &::before {
+          content: "";
+          display: none;
+        }
+      }
+    }
+  }
+  @include e(group) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  @include e(group-title) {
+    height: 40px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: getCssVar("font-size", "medium");
+    color: getCssVar("color", "text-2");
+    padding-left: calc(var(--s-menu-level) * 20px);
+    padding-right: 20px;
+  }
+  @include e(group-icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(group-label) {
+    flex: 1;
+  }
+  @include e(group-content) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    @include within-be(menu, item-title) {
+      padding-left: calc(20px + var(--s-menu-level) * 20px);
+    }
+    @include within-be(menu, sub-title) {
+      padding-left: calc(20px + var(--s-menu-level) * 20px);
+    }
+  }
+}

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

@@ -0,0 +1,148 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
+
+@include b(message) {
+  padding: 8px 12px;
+  max-width: 750px;
+  background-color: getCssVar("color", "bg-3");
+  border-radius: getCssVar("radius", "medium");
+  border: 1px solid getCssVar("color", "fill-3");
+  box-shadow: getCssVar("shadow", "2");
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  @include e(wrapper) {
+    display: inline-flex;
+    align-items: flex-start;
+    margin: 0 0 8px 0;
+    pointer-events: auto;
+    transition:
+      color 0.3s getCssVar("bezier", "1"),
+      box-shadow 0.3s getCssVar("bezier", "1"),
+      background-color 0.3s getCssVar("bezier", "1"),
+      opacity 0.3s getCssVar("bezier", "1"),
+      transform 0.3s getCssVar("bezier", "1"),
+      margin-bottom 0.3s getCssVar("bezier", "1");
+  }
+
+  @include e(container) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 16px;
+    pointer-events: none;
+    width: 100%;
+  }
+
+  @include e(content) {
+    display: inline-block;
+    line-height: 1.6;
+    font-size: 14px;
+  }
+
+  @include e(icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    margin-right: 10px;
+  }
+
+  @include e(close) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    width: 20px;
+    font-size: 16px;
+    margin-left: 10px;
+    border-radius: getCssVar("radius", "circle");
+    cursor: pointer;
+    &:hover {
+      background-color: getCssVar("color", "fill-3");
+    }
+  }
+
+  @include e(grouping) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 18px;
+    width: 18px;
+    font-size: 12px;
+    margin-left: 10px;
+    border-radius: getCssVar("radius", "circle");
+    background-color: getCssVar("color", "danger-6");
+    color: getCssVar("color", "white");
+    position: absolute;
+    top: -4px;
+    right: -4px;
+  }
+
+  @include m(container-top) {
+    top: 12px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    justify-content: flex-start;
+  }
+
+  @include m(container-bottom) {
+    bottom: 4px;
+    left: 0;
+    right: 0;
+    top: 0;
+    justify-content: flex-end;
+  }
+
+  @include m(container-center) {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    justify-content: center;
+  }
+
+  @include m(wrapper-top) {
+    transform-origin: top center;
+  }
+
+  @include m(wrapper-bottom) {
+    transform-origin: bottom center;
+  }
+
+  @include m(wrapper-center) {
+    transform-origin: center center;
+  }
+
+  @include m(default) {
+    color: getCssVar("color", "text-1");
+  }
+
+  @each $type in $type-list {
+    @include m(#{$type}) {
+      color: getCssVar("color", #{$type}-6);
+    }
+  }
+}
+
+.message-fade-enter-active,
+.message-fade-leave-active,
+.message-fade-move {
+  transition:
+    color 0.3s getCssVar("bezier", "1"),
+    box-shadow 0.3s getCssVar("bezier", "1"),
+    background-color 0.3s getCssVar("bezier", "1"),
+    opacity 0.3s getCssVar("bezier", "1"),
+    transform 0.3s getCssVar("bezier", "1"),
+    margin-bottom 0.3s getCssVar("bezier", "1");
+}
+
+.message-fade-enter-from,
+.message-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.85);
+}

package/dist/es/theme/components/meter-group.scss

@@ -0,0 +1,109 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(meter-group) {
+  width: 100%;
+  box-sizing: border-box;
+  @include e(wrapper) {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  @include m(position-top) {
+    flex-direction: column-reverse;
+  }
+  @include e(progress) {
+    background-color: getCssVar('color', 'fill-3');
+    border-radius: getCssVar('radius', 'round');
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    @include when(reverse) {
+      flex-direction: row-reverse;
+      @include be(meter-group, value) {
+        &:last-child {
+          border-radius: getCssVar('radius', 'round') 0 0 getCssVar('radius', 'round');
+        }
+      }
+    }
+  }
+  @include e(value) {
+    &:last-child {
+      border-radius: 0 getCssVar('radius', 'round') getCssVar('radius', 'round') 0;
+    }
+  }
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+  @include m(align-center) {
+    justify-content: center;
+  }
+  @include m(align-start) {
+    justify-content: flex-start;
+  }
+  @include m(align-end) {
+    justify-content: flex-end;
+  }
+  @include e(label) {
+    font-size: getCssVar('font-size', 'medium');
+    color: getCssVar('color', 'text-1');
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  @include e(icon) {
+    height: 14px;
+    width: 14px;
+    font-size: getCssVar('font-size', 'medium');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(dot) {
+    height: 8px;
+    width: 8px;
+    border-radius: getCssVar('radius', 'round');
+  }
+  @include when(vertical) {
+    height: 100%;
+    width: fit-content;
+    @include be(meter-group, wrapper) {
+      height: 100%;
+      flex-direction: row;
+      gap: 12px;
+    }
+    @include bm(meter-group, position-left) {
+      flex-direction: row-reverse;
+      @include be(meter-group, item) {
+        align-items: flex-end;
+      }
+      @include be(meter-group, label) {
+        flex-direction: row-reverse;
+      }
+    }
+    @include be(meter-group, progress) {
+      flex-direction: column;
+      @include when(reverse) {
+        flex-direction: column-reverse;
+        @include be(meter-group, value) {
+          &:last-child {
+            border-radius: getCssVar('radius', 'round') getCssVar('radius', 'round') 0 0;
+          }
+        }
+      }
+    }
+    @include be(meter-group, value) {
+      &:last-child {
+        border-radius: 0 0 getCssVar('radius', 'round') getCssVar('radius', 'round');
+      }
+    }
+    @include be(meter-group, item) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(modal) {
+  position: absolute;
+  color: getCssVar('color', 'text-1');
+  box-shadow: getCssVar('shadow', '1');
+  display: flex;
+  flex-direction: column;
+  border-radius: getCssVar('radius', 'larger');
+  vertical-align: middle;
+  background-color: getCssVar('color', 'bg-3');
+  transform-origin: center center;
+  backface-visibility: hidden;
+  will-change: transform;
+  overflow: hidden;
+  @include when(drag) {
+    @include be(modal, header) {
+      cursor: move;
+    }
+  }
+  @include when(fullscreen) {
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: 0;
+    box-shadow: none;
+    @include be(modal, header) {
+      cursor: default;
+    }
+  }
+  @include e(container) {
+    position: fixed;
+    inset: 0;
+  }
+  @include e(wrapper) {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    & > div {
+      pointer-events: auto;
+    }
+  }
+  @include e(mask) {
+    position: absolute;
+    inset: 0;
+    backdrop-filter: blur(3px);
+    overflow: hidden;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  @include e(header) {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 20px 0 20px;
+  }
+  @include e(header-icon) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  @include e(title) {
+    font-size: getCssVar('font-size', 'large');
+    font-weight: 500;
+    line-height: 1.5715;
+    flex: 1;
+  }
+  @include e(body) {
+    flex: 1;
+    padding: 20px;
+    overflow: hidden;
+  }
+  @include e(footer) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 20px 20px 20px;
+    gap: 8px;
+  }
+  @include e(resize-top-left) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    cursor: nw-resize;
+  }
+  @include e(resize-top) {
+    position: absolute;
+    top: 0;
+    left: 8px;
+    width: calc(100% - 16px);
+    height: 8px;
+    cursor: ns-resize;
+  }
+  @include e(resize-top-right) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 12px;
+    height: 12px;
+    cursor: ne-resize;
+  }
+  @include e(resize-bottom-left) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    cursor: sw-resize;
+  }
+  @include e(resize-bottom) {
+    position: absolute;
+    bottom: 0;
+    left: 8px;
+    width: calc(100% - 16px);
+    height: 8px;
+    cursor: ns-resize;
+  }
+  @include e(resize-bottom-right) {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 12px;
+    height: 12px;
+    cursor: se-resize;
+  }
+  @include e(resize-left) {
+    position: absolute;
+    top: 8px;
+    left: 0;
+    width: 8px;
+    height: calc(100% - 16px);
+    cursor: ew-resize;
+  }
+  @include e(resize-right) {
+    position: absolute;
+    top: 8px;
+    right: 0;
+    width: 8px;
+    height: calc(100% - 16px);
+    cursor: ew-resize;
+  }
+}

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

@@ -0,0 +1,69 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+@use '../common/var.scss' as *;
+
+@include b(pagination) {
+  display: flex;
+  align-items: center;
+  font-size: getCssVar('font-size', 'medium');
+  gap: 8px;
+  @include e(total) {
+    color: getCssVar('font-size', 'text-1');
+    white-space: nowrap;
+  }
+  @include e(list) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  @include e(navigator) {
+    &:hover {
+      background-color: getCssVar('color', 'fill-2') !important;
+      color: getCssVar('color', 'text-1') !important;
+    }
+  }
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: getCssVar('font-size', 'text-1');
+    background-color: transparent;
+    border-radius: var(--border-radius-small);
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      background-color: getCssVar('color', 'primary-1');
+      color: getCssVar('color', 'primary-6');
+    }
+    @include when(active) {
+      background-color: getCssVar('color', 'primary-1');
+      color: getCssVar('color', 'primary-6');
+    }
+  }
+  @include e(jumper) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  @include e(jumper-text) {
+    color: getCssVar('font-size', 'text-1');
+    white-space: nowrap;
+  }
+  @each $size in $size-list {
+    @include m($size) {
+      @include be(pagination, total) {
+        font-size: getCssVar('font-size', $size);
+        height: getCssVar('size', $size);
+        line-height: getCssVar('size', $size);
+      }
+      @include be(pagination, item) {
+        font-size: getCssVar('font-size', $size);
+        height: getCssVar('size', $size);
+        line-height: getCssVar('size', $size);
+        width: getCssVar('size', $size);
+        border-radius: getCssVar('radius', $size);
+      }
+    }
+  }
+}