@sdata/web-vue 1.6.0 → 1.7.0

package/es/theme-provider/index.d.ts

@@ -0,0 +1,53 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _ThemeProvider from '../config-provider/theme-provider.vue';
+declare const ThemeProvider: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        theme?: import("../config-provider/theme").SDThemeConfig;
+        themeMode?: import("../config-provider/theme").SDThemeMode;
+        global?: boolean;
+        tag?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        themeMode: import("../config-provider/theme").SDThemeMode;
+        global: boolean;
+        tag: string;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        theme?: import("../config-provider/theme").SDThemeConfig;
+        themeMode?: import("../config-provider/theme").SDThemeMode;
+        global?: boolean;
+        tag?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, {
+        themeMode: import("../config-provider/theme").SDThemeMode;
+        global: boolean;
+        tag: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
+    theme?: import("../config-provider/theme").SDThemeConfig;
+    themeMode?: import("../config-provider/theme").SDThemeMode;
+    global?: boolean;
+    tag?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    themeMode: import("../config-provider/theme").SDThemeMode;
+    global: boolean;
+    tag: string;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type ThemeProviderInstance = InstanceType<typeof _ThemeProvider>;
+export default ThemeProvider;

package/es/theme-provider/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import theme_provider_default from "../config-provider/theme-provider.js";
+//#region components/theme-provider/index.ts
+var ThemeProvider = Object.assign(theme_provider_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + theme_provider_default.name, theme_provider_default);
+} });
+//#endregion
+export { ThemeProvider as default };

package/es/time-picker/style/index.css

@@ -50,7 +50,7 @@
   display: block;
   width: 100%;
   height: 192px;
-  content: '';
+  content: "";
 }
 .sd-timepicker-cell {
   padding: 4px 0;
@@ -89,4 +89,4 @@
 }
 .sd-timepicker-footer-btn-wrapper :only-child {
   margin-left: auto;
-}
+}

package/es/time-picker/style/index.d.ts

@@ -1,5 +1,5 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../input/style';
 import '../../trigger/style';
-import '../../_components/picker/style/index.less';
-import './index.less';
+import '../../_components/picker/style/index.scss';
+import './index.scss';

package/es/time-picker/style/index.js

@@ -1,3 +1,3 @@
-import "../../style/index.less";
-import "../../_components/picker/style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "../../_components/picker/style/index.scss";
+import "./index.scss";

package/es/time-picker/style/index.scss

@@ -0,0 +1,96 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/time-picker/style/token.scss' as *;
+
+$time-picker-prefix-cls: string.unquote('#{theme.$prefix}-timepicker');
+
+.#{$time-picker-prefix-cls} {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0;
+
+  &-container {
+    overflow: hidden;
+    background-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+    border: 1px solid $timepicker-color-border;
+    border-radius: $timepicker-wrapper-border-radius;
+    box-shadow: theme.$popup-box-shadow-base;
+  }
+
+  &-column {
+    box-sizing: border-box;
+    width: $timepicker-column-width;
+    height: $timepicker-column-height;
+    overflow: hidden;
+
+    &:not(:last-child) {
+      border-right: 1px solid $timepicker-color-border;
+    }
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    ul {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      &::after {
+        display: block;
+        width: 100%;
+        height: $timepicker-column-height - $timepicker-cell-height - $timepicker-cell-spacing * 2;
+        content: '';
+      }
+    }
+  }
+
+  &-cell {
+    padding: $timepicker-cell-spacing 0;
+    color: $timepicker-color-text-cell;
+    font-weight: $timepicker-font-weight-cell;
+    cursor: pointer;
+
+    &-inner {
+      height: $timepicker-cell-height;
+      padding-left: 24px;
+      font-size: 14px;
+      line-height: $timepicker-cell-height;
+    }
+
+    &:not(#{&}-selected, &-disabled):hover &-inner {
+      background-color: $timepicker-color-bg-cell_hover;
+    }
+  }
+
+  &-cell-selected &-cell-inner {
+    font-weight: $timepicker-font-weight-cell_active;
+    background-color: $timepicker-color-bg-cell_active;
+  }
+
+  &-cell-disabled {
+    color: $timepicker-color-text-cell_disabled;
+    cursor: not-allowed;
+  }
+
+  &-footer-extra-wrapper {
+    padding: 8px;
+    color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+    font-size: global.$font-size-body-1;
+    border-top: 1px solid $timepicker-color-border;
+  }
+
+  &-footer-btn-wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px;
+    border-top: 1px solid $timepicker-color-border;
+
+    & :only-child {
+      margin-left: auto;
+    }
+  }
+}

package/es/time-picker/style/token.scss

@@ -0,0 +1,33 @@
+@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 *;
+
+$timepicker-wrapper-border-radius: global.$radius-medium;
+
+$timepicker-column-width: 64px;
+
+$timepicker-column-height: 224px;
+
+$timepicker-cell-height: 24px;
+
+$timepicker-cell-spacing: 4px;
+
+$timepicker-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$timepicker-color-text-cell: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$timepicker-color-bg-cell_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$timepicker-color-bg-cell_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$timepicker-color-text-cell_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$timepicker-font-weight-cell: global.$font-weight-500;
+
+$timepicker-font-weight-cell_active: global.$font-weight-500;

package/es/timeline/style/horizontal.scss

@@ -0,0 +1,92 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/timeline/style/token.scss' as *;
+$timeline-prefix-cls: string.unquote('#{theme.$prefix}-timeline');
+$timeline-item-prefix-cls: string.unquote('#{theme.$prefix}-timeline-item');
+.#{$timeline-prefix-cls}-direction-horizontal {
+  display: flex;
+  flex-direction: row;
+
+  &.#{$timeline-prefix-cls}-is-reverse {
+    flex-direction: row-reverse;
+  }
+}
+
+.#{$timeline-prefix-cls}-item-dot-line-is-horizontal {
+  top: 50%;
+  right: $timeline-horizontal-margin-line-right;
+  left: $timeline-dot-size-width + $timeline-horizontal-margin-line-left;
+  width: unset;
+  height: $timeline-size-line-width;
+  border-top-width: $timeline-size-line-width;
+  border-left: none;
+  transform: translateY(-50%);
+}
+
+.#{$timeline-prefix-cls}-item-horizontal-bottom,
+.#{$timeline-prefix-cls}-item-horizontal-top {
+  flex: 1;
+  min-height: unset;
+  padding-right: 0;
+  padding-left: 0;
+
+  > .#{$timeline-prefix-cls}-item-dot-wrapper {
+    top: 0;
+    width: 100%;
+    height: auto;
+
+    .#{$timeline-prefix-cls}-item-dot {
+      top: unset;
+      margin-top: unset;
+    }
+
+    .#{$timeline-prefix-cls}-item-dot-content {
+      height: 6px;
+      line-height: 6px;
+    }
+  }
+}
+
+.#{$timeline-prefix-cls}-item-horizontal-top {
+  padding-top: $timeline-dot-size-width;
+
+  > .#{$timeline-prefix-cls}-item-dot-wrapper {
+    top: 0;
+    bottom: unset;
+  }
+
+  > .#{$timeline-prefix-cls}-item-content-wrapper {
+    margin-top: $timeline-horizontal-margin-content-spacing;
+    margin-left: 0;
+  }
+}
+
+.#{$timeline-prefix-cls}-item-horizontal-bottom {
+  padding-bottom: $timeline-dot-size-width;
+
+  > .#{$timeline-prefix-cls}-item-dot-wrapper {
+    top: unset;
+    bottom: 0;
+  }
+
+  > .#{$timeline-prefix-cls}-item-content-wrapper {
+    margin-bottom: $timeline-horizontal-margin-content-spacing;
+    margin-left: 0;
+  }
+}
+
+.#{$timeline-prefix-cls}-alternate.#{$timeline-prefix-cls}-direction-horizontal {
+  align-items: center;
+  min-height: 200px;
+  overflow: visible;
+
+  .#{$timeline-prefix-cls}-item-horizontal-bottom {
+    margin-top: $timeline-dot-size-width;
+    transform: translateY(-50%);
+  }
+
+  .#{$timeline-prefix-cls}-item-horizontal-top {
+    margin-top: -$timeline-dot-size-width;
+    transform: translateY(50%);
+  }
+}

package/es/timeline/style/index.css

@@ -41,6 +41,7 @@
   position: relative;
   margin-left: 16px;
 }
+
 .sd-timeline-item.sd-timeline-item-last > .sd-timeline-item-dot-wrapper .sd-timeline-item-dot-line {
   display: none;
 }
@@ -98,10 +99,12 @@
   border-left-width: 1px;
   transform: translateX(-50%);
 }
+
 /* reverse  */
 .sd-timeline-is-reverse {
   flex-direction: column-reverse;
 }
+
 /* mode  */
 .sd-timeline-alternate {
   overflow: hidden;
@@ -144,6 +147,7 @@
   margin-left: 0;
   text-align: right;
 }
+
 /* label position */
 .sd-timeline-item-label-relative > .sd-timeline-item-label {
   position: absolute;
@@ -192,6 +196,7 @@
   text-align: left;
   transform: translateY(100%);
 }
+
 .sd-timeline-alternate .sd-timeline-item-vertical-left.sd-timeline-item-label-relative {
   margin-left: 0;
 }
@@ -216,13 +221,33 @@
 .sd-timeline-alternate .sd-timeline-item-horizontal-bottom.sd-timeline-item-label-relative {
   margin-bottom: 0;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 .sd-timeline-direction-horizontal {
   display: flex;
   flex-direction: row;
 }
+
 .sd-timeline-direction-horizontal.sd-timeline-is-reverse {
   flex-direction: row-reverse;
 }
+
 .sd-timeline-item-dot-line-is-horizontal {
   top: 50%;
   right: 4px;
@@ -233,6 +258,7 @@
   border-left: none;
   transform: translateY(-50%);
 }
+
 .sd-timeline-item-horizontal-bottom,
 .sd-timeline-item-horizontal-top {
   flex: 1;
@@ -240,54 +266,66 @@
   padding-right: 0;
   padding-left: 0;
 }
+
 .sd-timeline-item-horizontal-bottom > .sd-timeline-item-dot-wrapper,
 .sd-timeline-item-horizontal-top > .sd-timeline-item-dot-wrapper {
   top: 0;
   width: 100%;
   height: auto;
 }
+
 .sd-timeline-item-horizontal-bottom > .sd-timeline-item-dot-wrapper .sd-timeline-item-dot,
 .sd-timeline-item-horizontal-top > .sd-timeline-item-dot-wrapper .sd-timeline-item-dot {
   top: unset;
   margin-top: unset;
 }
+
 .sd-timeline-item-horizontal-bottom > .sd-timeline-item-dot-wrapper .sd-timeline-item-dot-content,
 .sd-timeline-item-horizontal-top > .sd-timeline-item-dot-wrapper .sd-timeline-item-dot-content {
   height: 6px;
   line-height: 6px;
 }
+
 .sd-timeline-item-horizontal-top {
   padding-top: 6px;
 }
+
 .sd-timeline-item-horizontal-top > .sd-timeline-item-dot-wrapper {
   top: 0;
   bottom: unset;
 }
+
 .sd-timeline-item-horizontal-top > .sd-timeline-item-content-wrapper {
   margin-top: 16px;
   margin-left: 0;
 }
+
 .sd-timeline-item-horizontal-bottom {
   padding-bottom: 6px;
 }
+
 .sd-timeline-item-horizontal-bottom > .sd-timeline-item-dot-wrapper {
   top: unset;
   bottom: 0;
 }
+
 .sd-timeline-item-horizontal-bottom > .sd-timeline-item-content-wrapper {
   margin-bottom: 16px;
   margin-left: 0;
 }
+
 .sd-timeline-alternate.sd-timeline-direction-horizontal {
   align-items: center;
   min-height: 200px;
   overflow: visible;
 }
+
 .sd-timeline-alternate.sd-timeline-direction-horizontal .sd-timeline-item-horizontal-bottom {
   margin-top: 6px;
   transform: translateY(-50%);
 }
+
 .sd-timeline-alternate.sd-timeline-direction-horizontal .sd-timeline-item-horizontal-top {
   margin-top: -6px;
   transform: translateY(50%);
-}
+}

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

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

package/es/timeline/style/index.js

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