@sdata/web-vue 1.5.0 → 1.7.0

package/es/menu/style/token.scss

@@ -0,0 +1,145 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$menu-font-size: 14px;
+$menu-line-height: $line-height-base;
+$menu-border-radius: global.$radius-small;
+$menu-font-weight-item-selected: global.$font-weight-500;
+$menu-color-label-item-selected: global.$color-primary-6;
+$menu-height-label-item-selected: 3px;
+$menu-margin-left-item-suffix-icon: global.$spacing-3;
+$menu-margin-right-item-prefix-icon: global.$spacing-7;
+$menu-horizontal-margin-right-item-prefix-icon: global.$spacing-7;
+
+// vertical 模式下 item 之间的间隙
+$menu-item-gap: global.$spacing-2;
+// vertical 下嵌套子菜单的层级缩进
+$menu-item-indent-spacing: global.$spacing-8;
+
+// 折叠按钮
+$menu-width-collapse-button: global.$size-6;
+$menu-height-collapse-button: global.$size-6;
+$menu-border-radius-collapse-button: global.$radius-small;
+
+/**********************************************
+ * theme: light / dark
+ * status: default / disabled / selected / hover
+ **********************************************/
+$menu-light-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-light-bg'));
+$menu-light-color-bg-item_default: $menu-light-color-bg;
+$menu-light-color-bg-item_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$menu-light-color-bg-item_selected: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+$menu-light-color-bg-item_disabled: $menu-light-color-bg;
+$menu-light-color-item_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$menu-light-color-item_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$menu-light-color-item_selected: global.$color-primary-6;
+$menu-light-color-submenu_selected: global.$color-primary-6;
+$menu-light-color-bg-submenu_selected_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+$menu-light-color-item_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+$menu-light-color-icon_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$menu-light-color-icon_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$menu-light-color-icon_selected: global.$color-primary-6;
+$menu-light-color-icon_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+$menu-light-color-group-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$menu-dark-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
+$menu-dark-color-bg-item_default: $menu-dark-color-bg;
+$menu-dark-color-bg-item_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-hover')
+);
+$menu-dark-color-bg-item_selected: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-hover')
+);
+$menu-dark-color-bg-item_disabled: $menu-dark-color-bg;
+$menu-dark-color-submenu_selected: global.$color-primary-6;
+$menu-dark-color-bg-submenu_selected_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-hover')
+);
+$menu-dark-color-item_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+$menu-dark-color-item_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+$menu-dark-color-item_selected: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$menu-dark-color-item_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$menu-dark-color-icon_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$menu-dark-color-icon_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$menu-dark-color-icon_selected: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$menu-dark-color-icon_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$menu-dark-color-group-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+// popup sub-menu
+$menu-color-border-popup: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+// collapse button style
+$menu-light-color-bg-button: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+$menu-light-color-bg-button_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$menu-light-color-button: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$menu-dark-color-bg-button: global.$color-primary-6;
+$menu-dark-color-bg-button_hover: global.$color-primary-7;
+$menu-dark-color-button: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+/**********************************************
+ * horizontal / vertical
+ **********************************************/
+$menu-horizontal-padding-vertical: 14px;
+$menu-horizontal-padding-horizontal: global.$spacing-8;
+$menu-horizontal-item-gap: global.$spacing-6;
+$menu-horizontal-item-height: 30px;
+$menu-horizontal-item-padding-horizontal: global.$spacing-6;
+
+$menu-vertical-padding-vertical: global.$spacing-2;
+$menu-vertical-padding-horizontal: global.$spacing-4;
+$menu-vertical-item-height: 40px;
+$menu-vertical-item-padding-horizontal: global.$spacing-6;
+
+/************************************************
+ * collapse
+ ***********************************************/
+$menu-collapse-width: global.$size-12;
+$menu-collapse-padding-vertical: global.$spacing-2;
+$menu-collapse-padding-horizontal: global.$spacing-2;
+
+/************************************************
+ * popButton
+ ***********************************************/
+$menu-pop-button-size: global.$size-10;
+$menu-pop-button-margin-bottom: global.$spacing-7;
+$menu-pop-button-box-shadow: global.$shadow2-down;
+$menu-pop-button-border-color: global.$color-transparent;
+
+/**********************************************
+ * Theme dark in dropdown
+ **********************************************/
+$dropdown-dark-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
+$dropdown-dark-color-border: $dropdown-dark-color-bg;
+
+$dropdown-dark-option-color-bg_default: global.$color-transparent;
+$dropdown-dark-option-color-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-hover')
+);
+$dropdown-dark-option-color-bg_selected: global.$color-transparent;
+$dropdown-dark-option-color-bg_disabled: global.$color-transparent;
+
+$dropdown-dark-option-color-text_default: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+$dropdown-dark-option-color-text_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+$dropdown-dark-option-color-text_selected: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$dropdown-dark-option-color-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+
+$dropdown-dark-group-title-color-text: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);

package/es/menu/sub-menu-pop.vue.d.ts

@@ -255,8 +255,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         mode: "horizontal" | "vertical" | "pop" | "popButton";
         popupMaxHeight: number | boolean;
         accordion: boolean;
-        collapsed: boolean;
         theme: "dark" | "light";
+        collapsed: boolean;
         defaultCollapsed: boolean;
         autoScrollIntoView: boolean;
         inTrigger: boolean;

package/es/message/style/index.css

@@ -35,6 +35,7 @@
 .sd-message-list-bottom {
   bottom: 40px;
 }
+
 .sd-message {
   position: relative;
   display: inline-flex;
@@ -124,30 +125,38 @@
   width: 20px;
   height: 20px;
 }
+
 .fade-message-enter-from,
 .fade-message-appear-from {
   opacity: 0;
 }
+
 .fade-message-enter-to,
 .fade-message-appear-to {
   opacity: 1;
 }
+
 .fade-message-enter-active,
 .fade-message-appear-active {
   transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
 }
+
 .fade-message-leave-from {
   opacity: 1;
 }
+
 .fade-message-leave-to {
   opacity: 0;
 }
+
 .fade-message-leave-active {
   position: absolute;
 }
+
 .flip-list-move {
   transition: transform 0.8s ease;
 }
+
 @keyframes sd-msg-fade {
   from {
     opacity: 0;
@@ -163,4 +172,4 @@
   to {
     transform: scale(1);
   }
-}
+}

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

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/message/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/message/style/index.scss

@@ -0,0 +1,196 @@
+@use '@style/mixins/icon-hover.scss' as icon-hover;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@style/mixins/index.scss' as *;
+@use '@components/message/style/token.scss' as *;
+
+$message-prefix-cls: string.unquote('#{theme.$prefix}-message');
+
+.#{$message-prefix-cls}-list {
+  position: fixed;
+  left: 0;
+  z-index: theme.$z-index-message;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0 10px;
+  text-align: center;
+  pointer-events: none;
+
+  &-top {
+    top: $message-wrapper-margin-top;
+  }
+
+  &-bottom {
+    bottom: $message-wrapper-margin-bottom;
+  }
+}
+
+.#{$message-prefix-cls} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: $message-margin-bottom;
+  padding: $message-padding-top $message-padding-right $message-padding-bottom $message-padding-left;
+  overflow: hidden;
+  line-height: 1;
+  text-align: center;
+  list-style: none;
+  background-color: $message-normal-color-bg;
+  border: $message-border-width $message-border-style $message-normal-color-border;
+  border-radius: $message-border-radius;
+  box-shadow: global.$shadow2-down;
+  transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  pointer-events: auto;
+
+  &-icon {
+    display: inline-block;
+    margin-right: $message-icon-margin-right;
+    color: $message-normal-color-icon;
+    font-size: $message-font-size-icon;
+    vertical-align: middle;
+    animation:
+      #{theme.$prefix}-msg-fade theme.$transition-duration-1
+        theme.$transition-timing-function-linear,
+      #{theme.$prefix}-msg-fade theme.$transition-duration-4
+        theme.$transition-timing-function-overshoot;
+  }
+
+  &-content {
+    color: $message-normal-color-content;
+    font-size: $message-font-size-content;
+    vertical-align: middle;
+  }
+
+  &-info {
+    background-color: $message-info-color-bg;
+    border-color: $message-info-color-border;
+  }
+
+  &-info &-icon {
+    color: $message-info-color-icon;
+  }
+
+  &-info &-content {
+    color: $message-info-color-content;
+  }
+
+  &-success {
+    background-color: $message-success-color-bg;
+    border-color: $message-success-color-border;
+  }
+
+  &-success &-icon {
+    color: $message-success-color-icon;
+  }
+
+  &-success &-content {
+    color: $message-success-color-content;
+  }
+
+  &-warning {
+    background-color: $message-warning-color-bg;
+    border-color: $message-warning-color-border;
+  }
+
+  &-warning &-icon {
+    color: $message-warning-color-icon;
+  }
+
+  &-warning &-content {
+    color: $message-warning-color-content;
+  }
+
+  &-error {
+    background-color: $message-error-color-bg;
+    border-color: $message-error-color-border;
+  }
+
+  &-error &-icon {
+    color: $message-error-color-icon;
+  }
+
+  &-error &-content {
+    color: $message-error-color-content;
+  }
+
+  &-loading {
+    background-color: $message-loading-color-bg;
+    border-color: $message-loading-color-border;
+  }
+
+  &-loading &-icon {
+    color: $message-loading-color-icon;
+  }
+
+  &-loading &-content {
+    color: $message-loading-color-content;
+  }
+
+  &-close-btn {
+    margin-left: 8px;
+    color: $message-color-close-icon;
+    font-size: $message-close-icon-font-size;
+  }
+
+  @include icon-hover.icon-hover(
+    $message-prefix-cls,
+    $message-close-icon-font-size,
+    $message-close-icon-font-size + 8px
+  );
+}
+
+.fade-message-enter-from,
+.fade-message-appear-from {
+  opacity: 0;
+}
+
+.fade-message-enter-to,
+.fade-message-appear-to {
+  opacity: 1;
+}
+
+.fade-message-enter-active,
+.fade-message-appear-active {
+  transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-linear;
+}
+
+.fade-message-leave-from {
+  opacity: 1;
+}
+
+.fade-message-leave-to {
+  opacity: 0;
+}
+
+.fade-message-leave-active {
+  position: absolute;
+}
+
+.flip-list-move {
+  transition: transform 0.8s ease;
+}
+
+@keyframes #{theme.$prefix}-msg-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes #{theme.$prefix}-msg-scale {
+  from {
+    transform: scale(0);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}

package/es/message/style/token.scss

@@ -0,0 +1,89 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$message-wrapper-margin-top: global.$spacing-12;
+
+$message-wrapper-margin-bottom: global.$spacing-12;
+
+$message-padding-top: global.$spacing-5;
+
+$message-padding-bottom: global.$spacing-5;
+
+$message-padding-left: global.$spacing-7;
+
+$message-padding-right: global.$spacing-7;
+
+$message-margin-bottom: global.$spacing-7;
+
+$message-border-radius: global.$radius-small;
+
+$message-font-size-icon: 20px;
+
+$message-font-size-content: global.$font-size-body-3;
+
+$message-icon-margin-right: global.$spacing-4;
+
+$message-border-width: 1px;
+
+$message-border-style: solid;
+
+$message-color-close-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$message-close-icon-font-size: 12px;
+
+$message-close-icon-top: 15px;
+
+$message-close-icon-right: global.$spacing-7;
+
+$message-normal-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$message-normal-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$message-normal-color-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$message-normal-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$message-info-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$message-info-color-icon: global.$color-primary-6;
+
+$message-info-color-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$message-info-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$message-success-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$message-success-color-icon: global.$color-success-6;
+
+$message-success-color-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$message-success-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$message-warning-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$message-warning-color-icon: global.$color-warning-6;
+
+$message-warning-color-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$message-warning-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$message-error-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$message-error-color-icon: global.$color-danger-6;
+
+$message-error-color-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$message-error-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$message-loading-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$message-loading-color-icon: global.$color-primary-6;
+
+$message-loading-color-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$message-loading-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));

package/es/modal/style/index.css

@@ -19,11 +19,13 @@
   position: fixed;
   inset: 0;
 }
+
 .sd-modal-mask {
   position: absolute;
   inset: 0;
   background-color: var(--color-mask-bg);
 }
+
 .sd-modal-wrapper {
   position: absolute;
   inset: 0;
@@ -38,7 +40,7 @@
   width: 0;
   height: 100%;
   vertical-align: middle;
-  content: '';
+  content: "";
 }
 .sd-modal-wrapper.sd-modal-wrapper-align-center .sd-modal {
   top: 0;
@@ -51,6 +53,7 @@
   top: 0;
   vertical-align: top;
 }
+
 .sd-modal {
   position: relative;
   top: 100px;
@@ -134,6 +137,7 @@
 .sd-modal-title-icon .sd-icon-close-circle-fill {
   color: rgb(var(--danger-6));
 }
+
 .sd-modal-simple {
   width: 400px;
   padding: 24px 32px 32px;
@@ -163,6 +167,7 @@
 .sd-modal-simple .sd-modal-body {
   padding: 0;
 }
+
 .sd-modal-fullscreen {
   top: 0;
   display: inline-flex;
@@ -174,49 +179,61 @@
 .sd-modal-fullscreen .sd-modal-footer {
   margin-top: auto;
 }
+
 .zoom-modal-enter-from,
 .zoom-modal-appear-from {
   transform: scale(0.5, 0.5);
   opacity: 0;
 }
+
 .zoom-modal-enter-to,
 .zoom-modal-appear-to {
   transform: scale(1, 1);
   opacity: 1;
 }
+
 .zoom-modal-enter-active,
 .zoom-modal-appear-active {
   transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
+
 .zoom-modal-leave-from {
   transform: scale(1, 1);
   opacity: 1;
 }
+
 .zoom-modal-leave-to {
   transform: scale(0.5, 0.5);
   opacity: 0;
 }
+
 .zoom-modal-leave-active {
   transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
+
 .fade-modal-enter-from,
 .fade-modal-appear-from {
   opacity: 0;
 }
+
 .fade-modal-enter-to,
 .fade-modal-appear-to {
   opacity: 1;
 }
+
 .fade-modal-enter-active,
 .fade-modal-appear-active {
   transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
+
 .fade-modal-leave-from {
   opacity: 1;
 }
+
 .fade-modal-leave-to {
   opacity: 0;
 }
+
 .fade-modal-leave-active {
   transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
+}

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

@@ -1,3 +1,3 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../button/style';
-import './index.less';
+import './index.scss';

package/es/modal/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";