@sdata/web-vue 1.5.0 → 1.7.0

package/es/form/style/index.css

@@ -26,7 +26,7 @@
   border-color: transparent;
 }
 .sd-form-item-status-validating .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
-.sd-form-item-status-validating .sd-textarea-wrapper:not( .sd-textarea-disabled).sd-textarea-focus {
+.sd-form-item-status-validating .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
   box-shadow: 0 0 0 0 var(--color-primary-light-2);
@@ -41,7 +41,7 @@
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-form-item-status-validating .sd-select-view:not( .sd-select-view-disabled).sd-select-view-focus,
+.sd-form-item-status-validating .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-validating .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
@@ -55,18 +55,19 @@
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled),
-.sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled):hover {
+.sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled):hover {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
   box-shadow: 0 0 0 0 var(--color-primary-light-2);
 }
+
 .sd-form-item-status-validating .sd-form-item-message-help {
   color: rgb(var(--primary-6));
 }
 .sd-form-item-status-validating .sd-form-item-feedback {
   color: rgb(var(--primary-6));
 }
+
 .sd-form-item-status-success .sd-input-wrapper:not(.sd-input-disabled),
 .sd-form-item-status-success .sd-textarea-wrapper:not(.sd-textarea-disabled) {
   background-color: var(--color-fill-2);
@@ -78,7 +79,7 @@
   border-color: transparent;
 }
 .sd-form-item-status-success .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
-.sd-form-item-status-success .sd-textarea-wrapper:not( .sd-textarea-disabled).sd-textarea-focus {
+.sd-form-item-status-success .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--success-6));
   box-shadow: 0 0 0 0 var(--color-success-light-2);
@@ -93,7 +94,7 @@
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-form-item-status-success .sd-select-view:not( .sd-select-view-disabled).sd-select-view-focus,
+.sd-form-item-status-success .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-success .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--success-6));
@@ -107,18 +108,19 @@
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled),
-.sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled):hover {
+.sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled):hover {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--success-6));
   box-shadow: 0 0 0 0 var(--color-success-light-2);
 }
+
 .sd-form-item-status-success .sd-form-item-message-help {
   color: rgb(var(--success-6));
 }
 .sd-form-item-status-success .sd-form-item-feedback {
   color: rgb(var(--success-6));
 }
+
 .sd-form-item-status-warning .sd-input-wrapper:not(.sd-input-disabled),
 .sd-form-item-status-warning .sd-textarea-wrapper:not(.sd-textarea-disabled) {
   background-color: var(--color-warning-light-1);
@@ -130,7 +132,7 @@
   border-color: transparent;
 }
 .sd-form-item-status-warning .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
-.sd-form-item-status-warning .sd-textarea-wrapper:not( .sd-textarea-disabled).sd-textarea-focus {
+.sd-form-item-status-warning .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--warning-6));
   box-shadow: 0 0 0 0 var(--color-warning-light-2);
@@ -145,7 +147,7 @@
   background-color: var(--color-warning-light-2);
   border-color: transparent;
 }
-.sd-form-item-status-warning .sd-select-view:not( .sd-select-view-disabled).sd-select-view-focus,
+.sd-form-item-status-warning .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-warning .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--warning-6));
@@ -159,18 +161,19 @@
   background-color: var(--color-warning-light-2);
   border-color: transparent;
 }
-.sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled),
-.sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled):hover {
+.sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled):hover {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--warning-6));
   box-shadow: 0 0 0 0 var(--color-warning-light-2);
 }
+
 .sd-form-item-status-warning .sd-form-item-message-help {
   color: rgb(var(--warning-6));
 }
 .sd-form-item-status-warning .sd-form-item-feedback {
   color: rgb(var(--warning-6));
 }
+
 .sd-form-item-status-error .sd-input-wrapper:not(.sd-input-disabled),
 .sd-form-item-status-error .sd-textarea-wrapper:not(.sd-textarea-disabled) {
   background-color: var(--color-danger-light-1);
@@ -182,7 +185,7 @@
   border-color: transparent;
 }
 .sd-form-item-status-error .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
-.sd-form-item-status-error .sd-textarea-wrapper:not( .sd-textarea-disabled).sd-textarea-focus {
+.sd-form-item-status-error .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--danger-6));
   box-shadow: 0 0 0 0 var(--color-danger-light-2);
@@ -197,7 +200,7 @@
   background-color: var(--color-danger-light-2);
   border-color: transparent;
 }
-.sd-form-item-status-error .sd-select-view:not( .sd-select-view-disabled).sd-select-view-focus,
+.sd-form-item-status-error .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-error .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--danger-6));
@@ -211,21 +214,23 @@
   background-color: var(--color-danger-light-2);
   border-color: transparent;
 }
-.sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled),
-.sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled):hover {
+.sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled):hover {
   background-color: var(--color-bg-2);
   border-color: rgb(var(--danger-6));
   box-shadow: 0 0 0 0 var(--color-danger-light-2);
 }
+
 .sd-form-item-status-error .sd-form-item-message-help {
   color: rgb(var(--danger-6));
 }
 .sd-form-item-status-error .sd-form-item-feedback {
   color: rgb(var(--danger-6));
 }
+
 .sd-form-item-control-children {
   position: relative;
 }
+
 .sd-form-item-feedback {
   position: absolute;
   top: 50%;
@@ -236,6 +241,7 @@
 .sd-form-item-feedback .sd-icon-loading {
   font-size: 12px;
 }
+
 .sd-form-item-has-feedback .sd-input,
 .sd-form-item-has-feedback .sd-input-inner-wrapper,
 .sd-form-item-has-feedback .sd-textarea {
@@ -273,12 +279,11 @@
   margin-right: 0;
   margin-left: 0;
 }
+
 .sd-form {
   display: flex;
   flex-direction: column;
   width: 100%;
-  /** size style **/
-  /** slider display: block **/
 }
 .sd-form-layout-inline {
   flex-flow: row wrap;
@@ -313,13 +318,15 @@
 .sd-form-item-label-col {
   padding-right: 16px;
 }
-.sd-form-item.sd-form-item-error,
-.sd-form-item.sd-form-item-has-help {
+.sd-form-item.sd-form-item-error, .sd-form-item.sd-form-item-has-help {
   margin-bottom: 0;
 }
 .sd-form-item-wrapper-flex.sd-col {
   flex: 1;
 }
+.sd-form {
+  /** size style **/
+}
 .sd-form-size-mini .sd-form-item-label-col {
   line-height: 24px;
 }
@@ -417,9 +424,13 @@
   align-items: center;
   justify-content: flex-start;
 }
+.sd-form {
+  /** slider display: block **/
+}
 .sd-form .sd-slider {
   display: block;
 }
+
 .sd-form-item-label-required-symbol {
   color: rgb(var(--danger-6));
   font-size: 12px;
@@ -433,19 +444,23 @@
   margin-left: 4px;
   color: var(--color-text-4);
 }
+
 .form-blink-enter-from,
 .form-blink-appear-from {
   opacity: 0;
 }
+
 .form-blink-enter-to,
 .form-blink-appear-to {
   opacity: 1;
 }
+
 .form-blink-enter-active,
 .form-blink-appear-active {
   transition: opacity 0.3s cubic-bezier(0, 0, 1, 1);
   animation: sd-form-blink 0.5s cubic-bezier(0, 0, 1, 1);
 }
+
 @keyframes sd-form-blink {
   0% {
     opacity: 1;
@@ -456,4 +471,4 @@
   100% {
     opacity: 1;
   }
-}
+}

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

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

package/es/form/style/index.js

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

package/es/form/style/index.scss

@@ -0,0 +1,257 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/form/style/token.scss' as *;
+@use '@components/form/style/status.scss' as *;
+
+$form-prefix-cls: string.unquote('#{theme.$prefix}-form');
+$form-item-prefix-cls: string.unquote('#{theme.$prefix}-form-item');
+$form-item-label-col-prefix-cls: string.unquote('#{theme.$prefix}-form-item-label-col');
+$form-item-wrapper-col-prefix-cls: string.unquote('#{theme.$prefix}-form-item-wrapper-col');
+$form-item-label-prefix-cls: string.unquote('#{theme.$prefix}-form-item-label');
+$form-item-message-prefix-cls: string.unquote('#{theme.$prefix}-form-item-message');
+
+.#{$form-prefix-cls} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &-layout-inline {
+    flex-flow: row wrap;
+  }
+
+  &-layout-inline &-item {
+    width: auto;
+    margin-bottom: $form-inline-margin-item-bottom;
+  }
+
+  &-auto-label-width &-item-label-col {
+    > .#{$form-item-label-prefix-cls} {
+      white-space: nowrap;
+    }
+  }
+
+  &-item {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+    margin-bottom: $form-size-default-margin-item-bottom;
+
+    &-layout-vertical {
+      display: block;
+
+      > .#{$form-item-prefix-cls}-label-col {
+        justify-content: flex-start;
+        margin-bottom: $form-vertical-margin-label-bottom;
+        padding: 0;
+        line-height: theme.$line-height-base;
+        white-space: normal;
+      }
+    }
+
+    &-layout-inline {
+      margin-right: $form-inline-margin-item-right;
+    }
+
+    &-label-col {
+      padding-right: $form-margin-label-right;
+    }
+
+    &#{&}-error,
+    &#{&}-has-help {
+      margin-bottom: 0;
+    }
+  }
+
+  // 用处不明
+  &-item-wrapper-flex.#{theme.$prefix}-col {
+    flex: 1;
+  }
+
+  /** size style **/
+  &-size-mini &-item-label-col {
+    line-height: global.$size-mini;
+
+    > .#{$form-item-label-prefix-cls} {
+      font-size: $form-size-mini-font-label-size;
+    }
+  }
+
+  &-size-mini &-item-content {
+    min-height: global.$size-mini;
+  }
+
+  &-size-mini &-item-wrapper-col {
+    min-height: global.$size-mini;
+  }
+
+  &-size-small &-item-label-col {
+    line-height: global.$size-small;
+
+    > .#{$form-item-label-prefix-cls} {
+      font-size: $form-size-small-font-label-size;
+    }
+  }
+
+  &-size-small &-item-content {
+    min-height: global.$size-small;
+  }
+
+  &-size-small &-item-wrapper-col {
+    min-height: global.$size-small;
+  }
+
+  &-size-large &-item-label-col {
+    line-height: global.$size-large;
+
+    > .#{$form-item-label-prefix-cls} {
+      font-size: $form-size-large-font-label-size;
+    }
+  }
+
+  &-size-large &-item-content {
+    min-height: global.$size-large;
+  }
+
+  &-size-large &-item-wrapper-col {
+    min-height: global.$size-large;
+  }
+
+  &-item-extra {
+    margin-top: $form-margin-extra-top;
+    color: $form-color-extra-text;
+    font-size: $form-font-extra-text-size;
+  }
+
+  &-item-message {
+    min-height: $form-size-default-margin-item-bottom;
+    color: $form-color-tip-text_error;
+    font-size: $form-font-error-text-size;
+    line-height: $form-size-default-margin-item-bottom;
+
+    &-help {
+      color: $form-color-extra-text;
+    }
+
+    + .#{$form-prefix-cls}-item-extra {
+      margin-top: 0;
+      margin-bottom: $form-margin-extra-bottom;
+    }
+  }
+
+  &-item-label-col {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    line-height: global.$size-default;
+    white-space: nowrap;
+
+    &-left {
+      justify-content: flex-start;
+    }
+
+    > .#{$form-item-label-prefix-cls} {
+      max-width: 100%;
+      color: $form-color-text-label;
+      font-size: $form-size-default-font-label-size;
+      white-space: normal;
+    }
+
+    &#{&}-flex {
+      box-sizing: content-box;
+    }
+
+    // 用处不明
+    //&-flex.#{$prefix}-col {
+    //  flex: 0;
+    //
+    //  > label {
+    //    white-space: nowrap;
+    //  }
+    //}
+  }
+
+  &-item-wrapper-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    min-width: 0;
+    min-height: global.$size-default;
+  }
+
+  &-item-content {
+    flex: 1;
+    max-width: 100%;
+    min-height: global.$size-default;
+
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: 100%;
+    }
+
+    &-flex {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+
+  /** slider display: block **/
+
+  .#{theme.$prefix}-slider {
+    display: block;
+  }
+}
+
+.#{$form-item-label-prefix-cls} {
+  &-required-symbol {
+    color: global.$color-danger-6;
+    font-size: global.$font-size-body-1;
+    line-height: 1;
+
+    svg {
+      display: inline-block;
+      transform: scale(0.5);
+    }
+  }
+
+  &-tooltip {
+    margin-left: $form-margin-tooltip-left;
+    color: $form-color-text-tooltip;
+  }
+}
+
+.form-blink-enter-from,
+.form-blink-appear-from {
+  opacity: 0;
+}
+
+.form-blink-enter-to,
+.form-blink-appear-to {
+  opacity: 1;
+}
+
+.form-blink-enter-active,
+.form-blink-appear-active {
+  transition: opacity theme.$transition-duration-3 theme.$transition-timing-function-linear;
+  animation: #{theme.$prefix}-form-blink theme.$transition-duration-5
+    theme.$transition-timing-function-linear;
+}
+
+@keyframes #{theme.$prefix}-form-blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}