@sdata/web-vue 1.5.0 → 1.7.0

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

@@ -0,0 +1,411 @@
+@use '@components/input/style/token.scss' as inputToken;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@components/color-picker/style/token.scss' as *;
+
+$color-picker-prefix-cls: string.unquote('#{theme.$prefix}-color-picker');
+
+$__less-vars: (
+  'border-radius-circle': global.$border-radius-circle,
+  'border-radius-medium': global.$border-radius-medium,
+  'color-control-bar-alpha-margin-top': $color-control-bar-alpha-margin-top,
+  'color-control-bar-border-radius': $color-control-bar-border-radius,
+  'color-control-bar-handle-size': $color-control-bar-handle-size,
+  'color-control-bar-height': $color-control-bar-height,
+  'color-control-bar-width': $color-control-bar-width,
+  'color-input-bg-color': $color-input-bg-color,
+  'color-input-border-radius': $color-input-border-radius,
+  'color-input-size-mini-padding': $color-input-size-mini-padding,
+  'color-input-size-small-padding': $color-input-size-small-padding,
+  'color-input-size-medium-padding': $color-input-size-medium-padding,
+  'color-input-size-large-padding': $color-input-size-large-padding,
+  'color-palette-handle-border-size': $color-palette-handle-border-size,
+  'color-palette-handle-size': $color-palette-handle-size,
+  'color-palette-height': $color-palette-height,
+  'color-panel-alpha-input-width': $color-panel-alpha-input-width,
+  'color-panel-bg-color': $color-panel-bg-color,
+  'color-panel-block-border-radius': $color-panel-block-border-radius,
+  'color-panel-block-margin': $color-panel-block-margin,
+  'color-panel-block-size': $color-panel-block-size,
+  'color-panel-border-color': $color-panel-border-color,
+  'color-panel-border-radius': $color-panel-border-radius,
+  'color-panel-box-shadow': $color-panel-box-shadow,
+  'color-panel-empty-font-size': $color-panel-empty-font-size,
+  'color-panel-format-select-width': $color-panel-format-select-width,
+  'color-panel-input-group-margin-left': $color-panel-input-group-margin-left,
+  'color-panel-input-margin-top': $color-panel-input-margin-top,
+  'color-panel-padding': $color-panel-padding,
+  'color-panel-preview-size': $color-panel-preview-size,
+  'color-panel-section-title-font-size': $color-panel-section-title-font-size,
+  'color-panel-width': $color-panel-width,
+  'color-preview-border-color': $color-preview-border-color,
+  'color-preview-border-size': $color-preview-border-size,
+  'color-preview-size-mini': $color-preview-size-mini,
+  'color-preview-size-small': $color-preview-size-small,
+  'color-preview-size-medium': $color-preview-size-medium,
+  'color-preview-size-large': $color-preview-size-large,
+  'color-value-font-color': $color-value-font-color,
+  'color-value-font-color_disabled': $color-value-font-color_disabled,
+  'color-value-font-size': $color-value-font-size,
+  'color-value-margin-left': $color-value-margin-left,
+  'color-value-size-mini-font-size': $color-value-size-mini-font-size,
+  'color-value-size-small-font-size': $color-value-size-small-font-size,
+  'color-value-size-medium-font-size': $color-value-size-medium-font-size,
+  'color-value-size-large-font-size': $color-value-size-large-font-size,
+  'font-size-body-1': global.$font-size-body-1,
+  'font-weight-400': global.$font-weight-400,
+  'input-color-addon-border': inputToken.$input-color-addon-border,
+  'input-color-addon-border_default': inputToken.$input-color-addon-border_default,
+  'input-color-bg': inputToken.$input-color-bg,
+  'input-color-bg_disabled': inputToken.$input-color-bg_disabled,
+  'input-color-bg_error': inputToken.$input-color-bg_error,
+  'input-color-bg_error_focus': inputToken.$input-color-bg_error_focus,
+  'input-color-bg_error_hover': inputToken.$input-color-bg_error_hover,
+  'input-color-bg_focus': inputToken.$input-color-bg_focus,
+  'input-color-bg_hover': inputToken.$input-color-bg_hover,
+  'input-color-border': inputToken.$input-color-border,
+  'input-color-border_disabled': inputToken.$input-color-border_disabled,
+  'input-color-border_error': inputToken.$input-color-border_error,
+  'input-color-border_error_focus': inputToken.$input-color-border_error_focus,
+  'input-color-border_error_hover': inputToken.$input-color-border_error_hover,
+  'input-color-border_focus': inputToken.$input-color-border_focus,
+  'input-color-border_hover': inputToken.$input-color-border_hover,
+  'input-color-icon-clear-bg_hover': inputToken.$input-color-icon-clear-bg_hover,
+  'input-color-shadow_error_focus': inputToken.$input-color-shadow_error_focus,
+  'input-color-shadow_focus': inputToken.$input-color-shadow_focus,
+  'input-color-text': inputToken.$input-color-text,
+  'input-color-text_disabled': inputToken.$input-color-text_disabled,
+  'input-feedback-icon-color_error': inputToken.$input-feedback-icon-color_error,
+  'input-feedback-icon-color_success': inputToken.$input-feedback-icon-color_success,
+  'input-feedback-icon-color_validating': inputToken.$input-feedback-icon-color_validating,
+  'input-feedback-icon-color_warning': inputToken.$input-feedback-icon-color_warning,
+  'input-group-border-radius_compact': inputToken.$input-group-border-radius_compact,
+  'input-size-mini-height': inputToken.$input-size-mini-height,
+  'input-size-small-height': inputToken.$input-size-small-height,
+  'input-size-medium-height': inputToken.$input-size-medium-height,
+  'input-size-large-height': inputToken.$input-size-large-height,
+  'input-size-shadow_error_focus': inputToken.$input-size-shadow_error_focus,
+  'input-size-shadow_focus': inputToken.$input-size-shadow_focus,
+  'prefix': theme.$prefix,
+  'size-3': global.$size-3,
+  'size-mini': global.$size-mini,
+  'spacing-2': global.$spacing-2,
+  'spacing-3': global.$spacing-3,
+  'spacing-4': global.$spacing-4,
+  'spacing-6': global.$spacing-6,
+  'spacing-none': global.$spacing-none,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+.#{$color-picker-prefix-cls} {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  background-color: $color-input-bg-color;
+  border-radius: $color-input-border-radius;
+
+  &-preview {
+    box-sizing: border-box;
+    border: $color-preview-border-size solid $color-preview-border-color;
+  }
+
+  &-value {
+    margin-left: $color-value-margin-left;
+    color: $color-value-font-color;
+    font-weight: $color-value-font-size;
+  }
+
+  &-input {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--color-fill-3);
+    cursor: pointer;
+  }
+
+  @mixin size-mixin($size) {
+    height: less-var('input-size-#{$size}-height');
+    padding: less-var('color-input-size-#{$size}-padding');
+
+    .#{$color-picker-prefix-cls}-preview {
+      width: less-var('color-preview-size-#{$size}');
+      height: less-var('color-preview-size-#{$size}');
+    }
+
+    .#{$color-picker-prefix-cls}-value {
+      font-size: less-var('color-value-size-#{$size}-font-size');
+    }
+  }
+
+  &-size-medium {
+    @include size-mixin(medium);
+  }
+
+  &-size-mini {
+    @include size-mixin(mini);
+  }
+
+  &-size-small {
+    @include size-mixin(small);
+  }
+
+  &-size-large {
+    @include size-mixin(large);
+  }
+
+  &#{&}-disabled {
+    background-color: $color-input-bg-color;
+    cursor: not-allowed;
+
+    .#{$color-picker-prefix-cls}-value {
+      color: $color-value-font-color_disabled;
+    }
+  }
+}
+
+.#{$color-picker-prefix-cls}-panel {
+  width: $color-panel-width;
+  background-color: $color-panel-bg-color;
+  border-radius: $color-panel-border-radius;
+  box-shadow: $color-panel-box-shadow;
+
+  .#{$color-picker-prefix-cls}-palette {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: $color-palette-height;
+    overflow: hidden;
+    background-image:
+      linear-gradient(0deg, rgb(0 0 0), transparent),
+      linear-gradient(90deg, rgb(255 255 255), rgb(255 255 255 / 0%));
+    border-top: 1px solid $color-panel-border-color;
+    border-right: 1px solid $color-panel-border-color;
+    border-left: 1px solid $color-panel-border-color;
+    cursor: pointer;
+
+    .#{$color-picker-prefix-cls}-handler {
+      position: absolute;
+      box-sizing: border-box;
+      width: $color-palette-handle-size;
+      height: $color-palette-handle-size;
+      background-color: transparent;
+      border: $color-palette-handle-border-size solid var(--color-bg-white);
+      border-radius: global.$border-radius-circle;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .#{$color-picker-prefix-cls}-panel-control {
+    padding: $color-panel-padding;
+
+    .#{$color-picker-prefix-cls}-control-wrapper {
+      display: flex;
+      align-items: center;
+
+      .#{$color-picker-prefix-cls}-preview {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: $color-panel-preview-size;
+        height: $color-panel-preview-size;
+        margin-left: auto;
+        color: #fff;
+        font-size: ($color-panel-preview-size * 0.5);
+        border: 1px solid $color-panel-border-color;
+        border-radius: global.$border-radius-medium;
+      }
+
+      .#{$color-picker-prefix-cls}-control-bar-alpha {
+        margin-top: $color-control-bar-alpha-margin-top;
+      }
+    }
+
+    .#{$color-picker-prefix-cls}-input-wrapper {
+      display: flex;
+      margin-top: $color-panel-input-margin-top;
+
+      .#{$color-picker-prefix-cls}-group-wrapper {
+        display: flex;
+        flex: 1;
+        margin-left: $color-panel-input-group-margin-left;
+      }
+
+      .#{theme.$prefix}-select-view,
+      .#{theme.$prefix}-input-wrapper {
+        margin-right: global.$spacing-none;
+        padding: 0 global.$spacing-3;
+      }
+
+      .#{theme.$prefix}-input-suffix,
+      .#{theme.$prefix}-input-prefix,
+      .#{theme.$prefix}-select-view-suffix {
+        padding: global.$spacing-none;
+        font-size: global.$size-3;
+      }
+    }
+  }
+
+  .#{$color-picker-prefix-cls}-panel-colors {
+    padding: $color-panel-padding;
+    border-top: 1px solid var(--color-fill-3);
+
+    .#{$color-picker-prefix-cls}-colors-section:not(:first-child) {
+      margin-top: global.$spacing-6;
+    }
+
+    .#{$color-picker-prefix-cls}-colors-text {
+      color: var(--color-text-1);
+      font-weight: global.$font-weight-400;
+      font-size: $color-panel-section-title-font-size;
+    }
+
+    .#{$color-picker-prefix-cls}-colors-empty {
+      margin: global.$spacing-6 0;
+      color: var(--color-text-3);
+      font-size: $color-panel-empty-font-size;
+    }
+
+    .#{$color-picker-prefix-cls}-colors-wrapper {
+      margin-top: global.$spacing-4;
+    }
+
+    .#{$color-picker-prefix-cls}-colors-list {
+      display: flex;
+      flex-wrap: wrap;
+      margin: -8px -4px 0;
+    }
+
+    .#{$color-picker-prefix-cls}-color-block {
+      width: $color-panel-block-size;
+      height: $color-panel-block-size;
+      margin: $color-panel-block-margin ($color-panel-block-margin * 0.5) 0;
+      overflow: hidden;
+      background-image: conic-gradient(
+        rgb(0 0 0 / 6%) 0 25%,
+        transparent 0 50%,
+        rgb(0 0 0 / 6%) 0 75%,
+        transparent 0
+      );
+      background-size: 8px 8px;
+      border-radius: $color-panel-block-border-radius;
+      cursor: pointer;
+      transition: transform ease-out 60ms;
+
+      .#{$color-picker-prefix-cls}-block {
+        width: 100%;
+        height: 100%;
+      }
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .#{$color-picker-prefix-cls}-control-bar-bg {
+    background-image: conic-gradient(
+      rgb(0 0 0 / 6%) 0 25%,
+      transparent 0 50%,
+      rgb(0 0 0 / 6%) 0 75%,
+      transparent 0
+    );
+    background-size: 8px 8px;
+    border-radius: $color-control-bar-border-radius;
+  }
+
+  .#{$color-picker-prefix-cls}-control-bar {
+    position: relative;
+    box-sizing: border-box;
+    width: $color-control-bar-width;
+    height: $color-control-bar-height;
+    border: 1px solid $color-panel-border-color;
+    border-radius: $color-control-bar-border-radius;
+    cursor: pointer;
+
+    .#{$color-picker-prefix-cls}-handler {
+      position: absolute;
+      top: -2px;
+      box-sizing: border-box;
+      width: $color-control-bar-handle-size;
+      height: $color-control-bar-handle-size;
+      background-color: var(--color-bg-white);
+      border: 1px solid var(--color-border-2);
+      border-radius: global.$border-radius-circle;
+      transform: translateX(-50%);
+
+      &::before {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: var(--color-bg-white);
+        border-radius: global.$border-radius-circle;
+        content: '';
+      }
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: $color-control-bar-handle-size - 8;
+        height: $color-control-bar-handle-size - 8;
+        background: currentcolor;
+        border-radius: global.$border-radius-circle;
+        transform: translate(-50%, -50%);
+        content: '';
+      }
+    }
+
+    &-hue {
+      background: linear-gradient(
+        90deg,
+        #f00 0,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        #f00
+      );
+    }
+  }
+
+  .#{$color-picker-prefix-cls}-select {
+    width: $color-panel-format-select-width;
+  }
+
+  .#{$color-picker-prefix-cls}-input-alpha {
+    flex: 0 0 auto;
+    width: $color-panel-alpha-input-width;
+  }
+
+  .#{$color-picker-prefix-cls}-input-hex {
+    .#{theme.$prefix}-input {
+      padding-left: global.$spacing-2;
+    }
+  }
+
+  &#{&}-disabled {
+    .#{$color-picker-prefix-cls}-palette,
+    .#{$color-picker-prefix-cls}-control-bar,
+    .#{$color-picker-prefix-cls}-color-block,
+    .#{$color-picker-prefix-cls}-preview {
+      cursor: not-allowed;
+      opacity: 0.8;
+    }
+  }
+}
+
+.#{$color-picker-prefix-cls}-select-popup {
+  & .#{theme.$prefix}-select-option {
+    font-size: global.$font-size-body-1 !important;
+    line-height: global.$size-mini !important;
+  }
+}

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

@@ -0,0 +1,102 @@
+@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';
+
+@forward '@components/input/style/token.scss';
+
+@use '@style/theme/index.scss' as *;
+@use '@components/input/style/token.scss' as *;
+
+$color-preview-size-mini: global.$size-4;
+
+$color-preview-size-small: 22px;
+
+$color-preview-size-medium: global.$size-6;
+
+$color-preview-size-large: 26px;
+
+$color-input-size-mini-padding: (($input-size-mini-height - $color-preview-size-mini) * 0.5)
+  global.$spacing-2;
+
+$color-input-size-small-padding: (($input-size-small-height - $color-preview-size-small) * 0.5)
+  global.$spacing-2;
+
+$color-input-size-medium-padding: (($input-size-medium-height - $color-preview-size-medium) * 0.5)
+  global.$spacing-2;
+
+$color-input-size-large-padding: (($input-size-large-height - $color-preview-size-large) * 0.5) 5px;
+
+$color-input-bg-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$color-value-margin-left: global.$spacing-2;
+
+$color-value-font-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$color-value-font-color_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$color-value-size-mini-font-size: global.$font-size-body-1;
+
+$color-value-size-small-font-size: global.$font-size-body-3;
+
+$color-value-size-medium-font-size: global.$font-size-body-3;
+
+$color-value-size-large-font-size: global.$font-size-body-3;
+
+$color-input-border-radius: global.$border-radius-small;
+
+$color-preview-border-size: global.$border-1;
+
+$color-preview-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
+
+$color-value-font-size: global.$font-weight-400;
+
+$color-panel-width: 260px;
+
+$color-panel-padding: global.$spacing-6;
+
+$color-panel-border-radius: global.$border-radius-small;
+
+$color-panel-bg-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-1'));
+
+$color-panel-box-shadow: 0 8px 20px 0 rgb(0 0 0 / 10%);
+
+$color-palette-height: 178px;
+
+$color-palette-handle-size: global.$size-4;
+
+$color-palette-handle-border-size: global.$border-2;
+
+$color-control-bar-width: 182px;
+
+$color-control-bar-height: 14px;
+
+$color-control-bar-handle-size: global.$size-4;
+
+$color-control-bar-alpha-margin-top: global.$spacing-6;
+
+$color-control-bar-border-radius: 10px;
+
+$color-panel-input-margin-top: global.$spacing-6;
+
+$color-panel-input-group-margin-left: global.$spacing-6;
+
+$color-panel-preview-size: 40px;
+
+$color-panel-format-select-width: 58px;
+
+$color-panel-alpha-input-width: 52px;
+
+$color-panel-section-title-font-size: global.$font-size-caption;
+
+$color-panel-empty-font-size: global.$font-size-body-1;
+
+$color-panel-block-size: global.$size-4;
+
+$color-panel-block-margin: global.$spacing-3;
+
+$color-panel-block-border-radius: global.$border-2;
+
+$color-panel-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));

package/es/comment/style/index.css

@@ -21,8 +21,7 @@
   font-size: 14px;
   line-height: 1.5715;
 }
-.sd-comment:not(:first-of-type),
-.sd-comment-inner-comment {
+.sd-comment:not(:first-of-type), .sd-comment-inner-comment {
   margin-top: 20px;
 }
 .sd-comment-inner {
@@ -65,4 +64,4 @@
 .sd-comment-actions-align-right {
   display: flex;
   justify-content: flex-end;
-}
+}

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

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

package/es/comment/style/index.js

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

package/es/comment/style/index.scss

@@ -0,0 +1,69 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/comment/style/token.scss' as *;
+
+$comment-prefix-cls: string.unquote('#{theme.$prefix}-comment');
+
+.#{$comment-prefix-cls} {
+  display: flex;
+  flex-wrap: nowrap;
+  font-size: $comment-font-size;
+  line-height: theme.$line-height-base;
+
+  &:not(:first-of-type),
+  &-inner-comment {
+    margin-top: $comment-margin-bottom;
+  }
+
+  &-inner {
+    flex: 1;
+  }
+
+  &-avatar {
+    flex-shrink: 0;
+    margin-right: $comment-margin-avatar-right;
+    cursor: pointer;
+
+    > img {
+      width: $comment-size-avatar-width;
+      height: $comment-size-avatar-width;
+      border-radius: global.$radius-circle;
+    }
+  }
+
+  &-author {
+    margin-right: $comment-margin-author-right;
+    color: $comment-color-author-text;
+    font-size: $comment-font-author-size;
+  }
+
+  &-datetime {
+    color: $comment-color-datetime-text;
+    font-size: $comment-font-datetime-size;
+  }
+
+  &-content {
+    color: $comment-color-content-text;
+  }
+
+  &-title-align-right {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &-actions {
+    margin-top: $comment-margin-actions-top;
+    color: $comment-color-actions-text;
+    font-size: $comment-font-action-size;
+
+    > *:not(:last-child) {
+      margin-right: $comment-margin-actions-right;
+    }
+  }
+
+  &-actions-align-right {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/es/comment/style/token.scss

@@ -0,0 +1,35 @@
+@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 *;
+
+$comment-color-author-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$comment-color-datetime-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$comment-color-content-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$comment-color-actions-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$comment-font-size: global.$font-size-body-3;
+
+$comment-font-author-size: global.$font-size-body-3;
+
+$comment-font-datetime-size: global.$font-size-body-1;
+
+$comment-margin-avatar-right: global.$spacing-6;
+
+$comment-margin-author-right: global.$spacing-4;
+
+$comment-margin-actions-top: global.$spacing-4;
+
+$comment-margin-bottom: global.$spacing-8;
+
+$comment-margin-actions-right: global.$spacing-4;
+
+$comment-size-avatar-width: global.$size-8;
+
+$comment-font-action-size: global.$font-size-body-3;

package/es/config-provider/config-provider.js

@@ -1,9 +1,21 @@
 import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
 import config_provider_vue_vue_type_script_lang_default from "./config-provider.vue_vue_type_script_lang.js";
-import { renderSlot } from "vue";
+import { createBlock, openBlock, renderSlot, resolveComponent, withCtx } from "vue";
 //#region components/config-provider/config-provider.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return renderSlot(_ctx.$slots, "default");
+	const _component_ThemeProvider = resolveComponent("ThemeProvider");
+	return openBlock(), createBlock(_component_ThemeProvider, {
+		theme: _ctx.theme,
+		"theme-mode": _ctx.themeMode,
+		global: _ctx.global
+	}, {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, [
+		"theme",
+		"theme-mode",
+		"global"
+	]);
 }
 var config_provider_default = /* @__PURE__ */ _plugin_vue_export_helper_default(config_provider_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion