@varlet/ui 1.23.11 → 1.24.0

package/lib/loading/loading.less

@@ -1,5 +1,7 @@
 @import '../styles/var';
 
+@loading-opacity: 0.38;
+@loading-desc-margin: 8px 0 0;
 @loading-normal-width: 50px;
 @loading-normal-height: @font-size-md + 2;
 
@@ -12,10 +14,60 @@
 @loading-mini-width: 22px;
 @loading-mini-height: @font-size-xs + 2;
 
+:root {
+  --loading-opacity: @loading-opacity;
+  --loading-desc-margin: @loading-desc-margin;
+}
+
 .var-loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  position: relative;
+
+  &__content {
+    transition: opacity 0.3s;
+    opacity: 1;
+
+    &--active {
+      opacity: var(--loading-opacity);
+      user-select: none;
+    }
+  }
+
+  &__body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  &__inside {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  &__description {
+    color: currentColor;
+    margin: var(--loading-desc-margin);
+
+    &--large {
+      font-size: @font-size-lg;
+    }
+
+    &--normal {
+      font-size: @font-size-md;
+    }
+
+    &--small {
+      font-size: @font-size-sm;
+    }
+
+    &--mini {
+      font-size: @font-size-xs;
+    }
+  }
 
   &__circle {
     display: flex;

package/lib/loading/props.js

@@ -33,6 +33,13 @@ var props = {
   color: {
     type: String,
     default: 'currentColor'
+  },
+  description: {
+    type: String
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 };
 exports.props = props;

package/lib/locale/en-US.d.ts

@@ -0,0 +1,5 @@
+import type { Pack } from '../../types'
+
+declare const enUS: Pack
+
+export default enUS

package/lib/locale/zh-CN.d.ts

@@ -0,0 +1,5 @@
+import type { Pack } from '../../types'
+
+declare const zhCN: Pack
+
+export default zhCN

package/lib/select/Select.js

@@ -124,7 +124,7 @@ function render(_ctx, _cache) {
     , ["class"])], 6
     /* CLASS, STYLE */
     ), (0, _vue.createElementVNode)("label", {
-      class: (0, _vue.normalizeClass)(["var-select__placeholder", [_ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null, _ctx.computePlaceholderState(), !_ctx.hint ? 'var-select--placeholder-non-hint' : null]])
+      class: (0, _vue.normalizeClass)(["var-select__placeholder var--ellipsis", [_ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null, _ctx.computePlaceholderState(), !_ctx.hint ? 'var-select--placeholder-non-hint' : null]])
     }, (0, _vue.toDisplayString)(_ctx.placeholder), 3
     /* TEXT, CLASS */
     )], 2

package/lib/select/select.css

@@ -1 +1 @@
-:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); overflow-x: auto;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); overflow-x: auto;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}

package/lib/select/select.less

@@ -91,8 +91,9 @@
     position: absolute;
     top: 50%;
     left: 0;
+    width: 100%;
     transform-origin: left;
-    transition-property: top, transform;
+    transition-property: top, transform, width;
     transition-duration: 0.3s;
     transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1);
     font-size: var(--select-placeholder-size);
@@ -135,6 +136,7 @@
 
   &--placeholder-hint {
     top: 0;
+    width: 133.33%;
     transform: translate(0, 0) scale(0.75);
   }