@sdata/web-vue 1.6.0 → 1.7.1

package/es/_components/select-view/style/index.d.ts

@@ -1,3 +1,3 @@
 import '../../input-label/style';
 import '../../../input-tag/style';
-import './index.less';
+import './index.scss';

package/es/_components/select-view/style/index.js

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

package/es/_components/select-view/style/index.scss

@@ -0,0 +1,60 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/_components/input-label/style/input-label.scss' as *;
+@use '@components/input-tag/style/input-tag.scss' as *;
+@use '@components/_components/select-view/style/token.scss' as *;
+
+$select-view-prefix-cls: string.unquote('#{theme.$prefix}-select-view');
+
+.#{$select-view-prefix-cls} {
+  &-single {
+    @include input-label-style($select-view-prefix-cls);
+  }
+
+  &-multiple {
+    @include input-tag-style($select-view-prefix-cls);
+
+    &.#{$select-view-prefix-cls}-disabled-input {
+      cursor: pointer;
+    }
+  }
+
+  .#{$select-view-prefix-cls}.#{$select-view-prefix-cls}-borderless {
+    background: none !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  &-suffix .#{theme.$prefix}-feedback-icon {
+    margin-left: 4px;
+  }
+
+  &-clear-btn,
+  &-icon {
+    svg {
+      display: block;
+      font-size: $select-size-icon;
+    }
+  }
+
+  &-opened &-arrow-icon {
+    transform: rotateZ(180deg);
+  }
+
+  &-expand-icon {
+    transform: rotate(-45deg);
+  }
+
+  &-clear-btn {
+    display: none;
+    cursor: pointer;
+  }
+
+  &:hover &-clear-btn {
+    display: block;
+
+    & ~ * {
+      display: none;
+    }
+  }
+}

package/es/_components/select-view/style/token.scss

@@ -0,0 +1,10 @@
+@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 '@style/theme/index.scss' as *;
+
+$select-size-icon: global.$size-3;
+
+$select-size-icon-bg: global.$size-4;

package/es/_hooks/use-component-ref.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance } from 'vue';
 export declare const useComponentRef: (name: string) => {
-    componentRef: import("vue").Ref<ComponentPublicInstance | HTMLElement | undefined, ComponentPublicInstance | HTMLElement | undefined>;
+    componentRef: import("vue").Ref<HTMLElement | ComponentPublicInstance | undefined, HTMLElement | ComponentPublicInstance | undefined>;
     elementRef: import("vue").Ref<any, any>;
 };

package/es/_hooks/use-teleport-container.d.ts

@@ -1,10 +1,10 @@
 import { Ref } from 'vue';
 export declare const useTeleportContainer: ({ popupContainer, visible, defaultContainer, documentContainer, }: {
-    popupContainer: Ref<string | HTMLElement | undefined>;
+    popupContainer: Ref<string | HTMLElement | null | undefined>;
     visible: Ref<boolean>;
     defaultContainer?: string;
     documentContainer?: boolean;
 }) => {
-    teleportContainer: Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    teleportContainer: Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     containerRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
 };

package/es/_hooks/use-teleport-container.js

@@ -5,15 +5,18 @@ var useTeleportContainer = ({ popupContainer, visible, defaultContainer = "body"
 	const teleportContainer = ref(popupContainer.value);
 	const containerRef = ref();
 	const getContainer = () => {
-		const element = getElement(popupContainer.value);
-		const _teleportContainer = element ? popupContainer.value : defaultContainer;
+		var _popupContainer$value;
+		const resolvedPopupContainer = (_popupContainer$value = popupContainer.value) !== null && _popupContainer$value !== void 0 ? _popupContainer$value : void 0;
+		const element = getElement(resolvedPopupContainer);
+		const _teleportContainer = element ? resolvedPopupContainer : defaultContainer;
 		const _containerElement = element !== null && element !== void 0 ? element : documentContainer ? document.documentElement : getElement(defaultContainer);
 		if (_teleportContainer !== teleportContainer.value) teleportContainer.value = _teleportContainer;
 		if (_containerElement !== containerRef.value) containerRef.value = _containerElement;
 	};
 	onMounted(() => getContainer());
-	watch(visible, (visible) => {
-		if (teleportContainer.value !== popupContainer.value && visible) getContainer();
+	watch([popupContainer, visible], ([nextPopupContainer, nextVisible]) => {
+		if (!nextVisible) return;
+		if (teleportContainer.value !== nextPopupContainer) getContainer();
 	});
 	return {
 		teleportContainer,

package/es/affix/style/index.css

@@ -18,4 +18,4 @@
 .sd-affix {
   position: fixed;
   z-index: 999;
-}
+}

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

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

package/es/affix/style/index.js

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

package/es/affix/style/index.scss

@@ -0,0 +1,9 @@
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$affix-prefix-cls: string.unquote('#{$prefix}-affix');
+
+.#{$affix-prefix-cls} {
+  position: fixed;
+  z-index: $z-index-affix;
+}

package/es/alert/style/index.css

@@ -171,4 +171,4 @@
 .sd-alert-with-title .sd-alert-close-btn {
   margin-top: 0;
   margin-right: 0;
-}
+}

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

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

package/es/alert/style/index.js

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

package/es/alert/style/index.scss

@@ -0,0 +1,199 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/alert/style/token.scss' as *;
+
+$alert-prefix-cls: string.unquote('#{theme.$prefix}-alert');
+
+.#{$alert-prefix-cls} {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: $alert-padding-vertical $alert-padding-horizontal;
+  overflow: hidden;
+  font-size: $alert-font-size-text-content;
+  line-height: $alert-line-height;
+  text-align: left;
+  border-radius: $alert-border-radius;
+
+  &-with-title {
+    align-items: flex-start;
+    padding: $alert-padding-vertical_with_title $alert-padding-horizontal_with_title;
+  }
+
+  &-center {
+    justify-content: center;
+
+    .#{$alert-prefix-cls}-body {
+      flex: initial;
+    }
+  }
+
+  &-normal {
+    background-color: $alert-normal-color-bg;
+    border: $alert-border-width solid $alert-normal-color-border;
+  }
+
+  &-info {
+    background-color: $alert-info-color-bg;
+    border: $alert-border-width solid $alert-info-color-border;
+  }
+
+  &-success {
+    background-color: $alert-success-color-bg;
+    border: $alert-border-width solid $alert-success-color-border;
+  }
+
+  &-warning {
+    background-color: $alert-warning-color-bg;
+    border: $alert-border-width solid $alert-warning-color-border;
+  }
+
+  &-error {
+    background-color: $alert-error-color-bg;
+    border: $alert-border-width solid $alert-error-color-border;
+  }
+
+  &-banner {
+    border: none;
+    border-radius: 0;
+  }
+
+  &-body {
+    position: relative;
+    flex: 1;
+  }
+
+  &-title {
+    margin-bottom: $alert-title-margin-bottom;
+    font-weight: $alert-font-weight-title;
+    font-size: $alert-font-size-text-title;
+    line-height: $alert-title-line-height;
+  }
+
+  &-normal &-title {
+    color: $alert-normal-color-text-title;
+  }
+
+  &-normal &-content {
+    color: $alert-normal-color-text-content;
+  }
+
+  &-normal#{&}-with-title &-content {
+    color: $alert-normal-color-text-content_title;
+  }
+
+  &-info &-title {
+    color: $alert-info-color-text-title;
+  }
+
+  &-info &-content {
+    color: $alert-info-color-text-content;
+  }
+
+  &-info#{&}-with-title &-content {
+    color: $alert-info-color-text-content_title;
+  }
+
+  &-success &-title {
+    color: $alert-success-color-text-title;
+  }
+
+  &-success &-content {
+    color: $alert-success-color-text-content;
+  }
+
+  &-success#{&}-with-title &-content {
+    color: $alert-success-color-text-content_title;
+  }
+
+  &-warning &-title {
+    color: $alert-warning-color-text-title;
+  }
+
+  &-warning &-content {
+    color: $alert-warning-color-text-content;
+  }
+
+  &-warning#{&}-with-title &-content {
+    color: $alert-warning-color-text-content_title;
+  }
+
+  &-error &-title {
+    color: $alert-error-color-text-title;
+  }
+
+  &-error &-content {
+    color: $alert-error-color-text-content;
+  }
+
+  &-error#{&}-with-title &-content {
+    color: $alert-error-color-text-content_title;
+  }
+
+  &-icon {
+    margin-right: $alert-margin-icon-right;
+
+    svg {
+      font-size: $alert-font-size-icon;
+      vertical-align: -3px;
+    }
+  }
+
+  &-with-title &-icon svg {
+    font-size: $alert-font-size-icon_with_title;
+    vertical-align: -5px;
+  }
+
+  &-normal &-icon svg {
+    color: $alert-normal-color-icon;
+  }
+
+  &-info &-icon svg {
+    color: $alert-info-color-icon;
+  }
+
+  &-success &-icon svg {
+    color: $alert-success-color-icon;
+  }
+
+  &-warning &-icon svg {
+    color: $alert-warning-color-icon;
+  }
+
+  &-error &-icon svg {
+    color: $alert-error-color-icon;
+  }
+
+  &-close-btn {
+    top: 4px;
+    right: 0;
+    box-sizing: border-box;
+    margin-left: $alert-margin-close-icon-left;
+    padding: 0;
+    color: $alert-color-close-icon;
+    font-size: $alert-font-size-close-icon;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    transition: color theme.$transition-duration-1 theme.$transition-timing-function-linear;
+
+    &:hover {
+      color: $alert-color-close-icon_hover;
+    }
+  }
+
+  &-action + &-close-btn {
+    margin-left: $alert-margin-action-right;
+  }
+
+  &-action {
+    margin-left: $alert-margin-action-left;
+  }
+
+  &-with-title &-close-btn {
+    margin-top: 0;
+    margin-right: 0;
+  }
+}

package/es/alert/style/token.scss

@@ -0,0 +1,82 @@
+@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 *;
+
+$alert-border-width: global.$border-1;
+$alert-min-height: global.$size-10;
+$alert-border-radius: global.$radius-small;
+$alert-line-height: 1.5715;
+$alert-title-line-height: 1.5;
+$alert-title-margin-bottom: global.$spacing-2;
+$alert-margin-icon-right: global.$spacing-4;
+
+$alert-padding-horizontal: global.$spacing-7 - $alert-border-width;
+$alert-padding-vertical: 9px - $alert-border-width;
+$alert-padding-horizontal_with_title: global.$spacing-7 - $alert-border-width;
+$alert-padding-vertical_with_title: global.$spacing-7 - $alert-border-width;
+
+$alert-font-weight-title: global.$font-weight-500;
+$alert-font-size-text-title: global.$font-size-title-1;
+$alert-font-size-text-content: global.$font-size-body-3;
+$alert-font-size-icon: 16px;
+$alert-font-size-icon_with_title: 18px;
+$alert-font-size-close-icon: 12px;
+
+/*****************************************************
+ * type: info / warning / error /success
+ *****************************************************/
+$alert-normal-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-2'));
+$alert-normal-color-border: global.$color-transparent;
+$alert-normal-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-4'));
+$alert-normal-color-text-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-normal-color-text-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-normal-color-text-content_title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+
+$alert-info-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1'));
+$alert-info-color-border: global.$color-transparent;
+$alert-info-color-icon: global.$color-primary-6;
+$alert-info-color-text-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-info-color-text-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-info-color-text-content_title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+
+$alert-warning-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-warning-light-1'));
+$alert-warning-color-border: global.$color-transparent;
+$alert-warning-color-icon: global.$color-warning-6;
+$alert-warning-color-text-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-warning-color-text-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-warning-color-text-content_title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+
+$alert-error-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-1'));
+$alert-error-color-border: global.$color-transparent;
+$alert-error-color-icon: global.$color-danger-6;
+$alert-error-color-text-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-error-color-text-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-error-color-text-content_title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+
+$alert-success-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-success-light-1'));
+$alert-success-color-border: global.$color-transparent;
+$alert-success-color-icon: global.$color-success-6;
+$alert-success-color-text-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-success-color-text-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-success-color-text-content_title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+
+// 关闭图标
+$alert-color-close-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$alert-color-close-icon_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$alert-margin-close-icon-left: global.$spacing-4;
+$alert-margin-action-left: global.$spacing-4;
+$alert-margin-action-right: global.$spacing-4;

package/es/anchor/style/index.css

@@ -45,7 +45,7 @@
   width: 2px;
   height: 100%;
   background-color: var(--color-fill-3);
-  content: '';
+  content: "";
 }
 .sd-anchor-sublist {
   margin-top: 0;
@@ -93,4 +93,4 @@
   color: rgb(var(--primary-6));
   font-weight: 500;
   background-color: var(--color-fill-2);
-}
+}

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

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

package/es/anchor/style/index.js

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

package/es/anchor/style/index.scss

@@ -0,0 +1,103 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/anchor/style/token.scss' as *;
+
+$anchor-prefix-cls: string.unquote('#{theme.$prefix}-anchor');
+
+.#{$anchor-prefix-cls} {
+  position: relative;
+  width: $anchor-width;
+  overflow: auto;
+
+  &-line {
+    &-slider {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: $anchor-line-width;
+      height: $anchor-line-slider-height;
+      margin-top: (
+        ($anchor-font-size-title * theme.$line-height-base) * 0.5 + $anchor-title-padding-vertical -
+          $anchor-line-slider-height * 0.5
+      );
+      background-color: $anchor-color-bg-line_active;
+      transition: top theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    }
+  }
+
+  &-list {
+    position: relative;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: $anchor-line-margin-right - $anchor-title-padding-horizontal;
+    padding-left: 0;
+    list-style: none;
+
+    &::before {
+      position: absolute;
+      left: -($anchor-line-margin-right - $anchor-title-padding-horizontal);
+      width: $anchor-line-width;
+      height: 100%;
+      background-color: $anchor-color-bg-line;
+      content: '';
+    }
+  }
+
+  &-sublist {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+  }
+
+  &-link-item {
+    margin-bottom: $anchor-title-margin-bottom;
+
+    .#{$anchor-prefix-cls}-link {
+      display: block;
+      margin-bottom: $anchor-title-margin-bottom;
+      padding: $anchor-title-padding-vertical $anchor-title-padding-horizontal;
+      overflow: hidden;
+      color: $anchor-color-title;
+      font-size: $anchor-font-size-title;
+      line-height: theme.$line-height-base;
+      white-space: nowrap;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      border-radius: $anchor-border-radius-title-hover;
+      cursor: pointer;
+
+      &:hover {
+        color: $anchor-color-title_hover;
+        font-weight: $anchor-font-weight-title_hover;
+        background-color: $anchor-color-bg-title_hover;
+      }
+    }
+  }
+
+  &-link-active > &-link {
+    color: $anchor-color-title_active;
+    font-weight: $anchor-font-weight-title_active;
+    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  }
+
+  &-link-item &-link-item {
+    margin-left: $anchor-item-inner-margin-left;
+  }
+
+  // line-less
+  &-line-less &-list {
+    margin-left: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  &-line-less &-link-active > &-link {
+    color: $anchor-lineless-color-title_active;
+    font-weight: $anchor-lineless-font-weight-title_active;
+    background-color: $anchor-lineless-bg-title_active;
+  }
+}

package/es/anchor/style/token.scss

@@ -0,0 +1,36 @@
+@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 *;
+
+// Line
+$anchor-width: 150px;
+$anchor-line-width: 2px;
+$anchor-line-slider-height: 12px;
+$anchor-line-margin-right: 12px;
+$anchor-color-bg-line: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$anchor-color-bg-line_active: global.$color-primary-6;
+
+$anchor-border-radius-title-hover: global.$radius-small;
+
+$anchor-item-inner-margin-left: global.$spacing-7;
+
+$anchor-title-padding-horizontal: global.$spacing-4;
+$anchor-title-padding-vertical: global.$spacing-2;
+$anchor-title-margin-bottom: global.$spacing-1;
+
+$anchor-color-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$anchor-color-title_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$anchor-color-title_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$anchor-font-weight-title_hover: global.$font-weight-500;
+$anchor-font-weight-title_active: global.$font-weight-500;
+$anchor-color-bg-title_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$anchor-font-size-title: 14px;
+
+// Lineless
+$anchor-lineless-color-title_active: global.$color-primary-6;
+$anchor-lineless-bg-title_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$anchor-lineless-font-weight-title_active: global.$font-weight-500;

package/es/auto-complete/style/index.css

@@ -37,6 +37,8 @@
   padding: 0 12px;
   font-size: 14px;
   line-height: 36px;
+}
+.sd-autocomplete-popup .sd-select-popup .sd-select-option {
   color: var(--color-text-1);
   background-color: var(--color-bg-popup);
 }
@@ -54,4 +56,4 @@
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-option-selected {
   font-weight: 500;
-}
+}

package/es/auto-complete/style/index.d.ts

@@ -1,4 +1,4 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../input/style';
 import '../../select/style';
-import './index.less';
+import './index.scss';

package/es/auto-complete/style/index.js

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