@varlet/ui 3.19.1 → 3.19.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/es/button/Button.mjs +5 -5
  2. package/es/button/button.css +1 -1
  3. package/es/field-decorator/FieldDecorator.mjs +32 -17
  4. package/es/index.bundle.mjs +1 -1
  5. package/es/index.mjs +1 -1
  6. package/es/snackbar/style/index.mjs +1 -1
  7. package/es/varlet.css +1 -1
  8. package/es/varlet.esm.js +3412 -3405
  9. package/highlight/web-types.en-US.json +1 -1
  10. package/highlight/web-types.zh-CN.json +1 -1
  11. package/lib/varlet.cjs.js +33 -21
  12. package/lib/varlet.css +1 -1
  13. package/package.json +7 -7
  14. package/umd/varlet.js +7 -7
package/es/button/Button.mjs CHANGED
@@ -27,6 +27,7 @@ function __render__(_ctx, _cache) {
27
27
  [_ctx.states.text, `${_ctx.n("--text")} ${_ctx.n(`--text-${_ctx.states.type}`)}`],
28
28
  [_ctx.states.iconContainer, _ctx.n(`--icon-container-${_ctx.states.type}`)],
29
29
  [_ctx.states.filledDefault, _ctx.n("--filled-default")],
30
+ [_ctx.states.elevationDisabled, _ctx.n("--elevation-disabled")],
30
31
  [_ctx.round, _ctx.n("--round")],
31
32
  [_ctx.fab, _ctx.n("--fab")],
32
33
  [_ctx.states.outline, _ctx.n("--outline")],
@@ -101,7 +102,8 @@ const __sfc__ = defineComponent({
101
102
  textColor: props2.textColor,
102
103
  outline: props2.outline,
103
104
  iconContainer: props2.tonal || props2.iconContainer,
104
- filledDefault: (props2.type == null || props2.type === "default") && isFilledElevation(props2.elevation) && !props2.text && !props2.outline && !props2.tonal && !props2.iconContainer
105
+ elevationDisabled: props2.tonal || props2.elevation === false || toNumber(props2.elevation) === 0,
106
+ filledDefault: (props2.type == null || props2.type === "default") && (props2.elevation === false || toNumber(props2.elevation) === 0) && !props2.text && !props2.outline && !props2.tonal && !props2.iconContainer
105
107
  };
106
108
  }
107
109
  const { type, size, color, textColor, mode, elevation } = buttonGroup;
@@ -114,7 +116,8 @@ const __sfc__ = defineComponent({
114
116
  text: mode.value === "text" || mode.value === "outline",
115
117
  outline: mode.value === "outline",
116
118
  iconContainer: mode.value === "tonal" || mode.value === "icon-container",
117
- filledDefault: mode.value === "normal" && ((_g = props2.type) != null ? _g : type.value) === "default" && isFilledElevation(elevation.value)
119
+ elevationDisabled: mode.value === "tonal",
120
+ filledDefault: mode.value === "normal" && ((_g = props2.type) != null ? _g : type.value) === "default" && (elevation.value === false || toNumber(elevation.value) === 0)
118
121
  };
119
122
  });
120
123
  function attemptAutoLoading(result) {
@@ -147,9 +150,6 @@ const __sfc__ = defineComponent({
147
150
  }
148
151
  isFocusing.value = true;
149
152
  }
150
- function isFilledElevation(elevation) {
151
- return elevation === false || toNumber(elevation) === 0;
152
- }
153
153
  return {
154
154
  pending,
155
155
  states,
package/es/button/button.css CHANGED
@@ -1 +1 @@
1
- :root { --button-default-text-color: #555; --button-primary-text-color: var(--color-on-primary); --button-danger-text-color: var(--color-on-danger); --button-success-text-color: var(--color-on-success); --button-warning-text-color: var(--color-on-warning); --button-info-text-color: var(--color-on-info); --button-default-color: #f5f5f5; --button-default-filled-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-default-icon-color: #555; --button-primary-icon-color: var(--color-on-primary-container); --button-danger-icon-color: var(--color-on-danger-container); --button-success-icon-color: var(--color-on-success-container); --button-warning-icon-color: var(--color-on-warning-container); --button-info-icon-color: var(--color-on-info-container); --button-default-icon-container-color: #f5f5f5; --button-primary-icon-container-color: var(--color-primary-container); --button-danger-icon-container-color: var(--color-danger-container); --button-success-icon-container-color: var(--color-success-container); --button-warning-icon-container-color: var(--color-warning-container); --button-info-icon-container-color: var(--color-info-container); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 8px; --button-small-padding: 0 12px; --button-normal-padding: 0 16px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-fab-size: 56px; --button-fab-border-radius: 16px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s, border-radius 0.2s; will-change: box-shadow; -webkit-tap-highlight-color: transparent; white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: var(--button-default-text-color); background-color: var(--button-default-color);}.var-button--filled-default { background-color: var(--button-default-filled-color);}.var-button--primary { color: var(--button-primary-text-color); background-color: var(--button-primary-color);}.var-button--info { color: var(--button-info-text-color); background-color: var(--button-info-color);}.var-button--success { color: var(--button-success-text-color); background-color: var(--button-success-color);}.var-button--warning { color: var(--button-warning-text-color); background-color: var(--button-warning-color);}.var-button--danger { color: var(--button-danger-text-color); background-color: var(--button-danger-color);}.var-button--loading { cursor: wait;}.var-button--block { width: 100%;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--icon-container-default { color: var(--button-default-icon-color); background-color: var(--button-default-icon-container-color);}.var-button--icon-container-primary { color: var(--button-primary-icon-color); background-color: var(--button-primary-icon-container-color);}.var-button--icon-container-info { color: var(--button-info-icon-color); background-color: var(--button-info-icon-container-color);}.var-button--icon-container-success { color: var(--button-success-icon-color); background-color: var(--button-success-icon-container-color);}.var-button--icon-container-warning { color: var(--button-warning-icon-color); background-color: var(--button-warning-icon-container-color);}.var-button--icon-container-danger { color: var(--button-danger-icon-color); background-color: var(--button-danger-icon-container-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--fab { width: var(--button-fab-size); height: var(--button-fab-size); padding: 0; border-radius: var(--button-fab-border-radius);}.var-button--round.var-button--fab { border-radius: 50%;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}
1
+ :root { --button-default-text-color: #555; --button-primary-text-color: var(--color-on-primary); --button-danger-text-color: var(--color-on-danger); --button-success-text-color: var(--color-on-success); --button-warning-text-color: var(--color-on-warning); --button-info-text-color: var(--color-on-info); --button-default-color: #f5f5f5; --button-default-filled-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-default-icon-color: #555; --button-primary-icon-color: var(--color-on-primary-container); --button-danger-icon-color: var(--color-on-danger-container); --button-success-icon-color: var(--color-on-success-container); --button-warning-icon-color: var(--color-on-warning-container); --button-info-icon-color: var(--color-on-info-container); --button-default-icon-container-color: #f5f5f5; --button-primary-icon-container-color: var(--color-primary-container); --button-danger-icon-container-color: var(--color-danger-container); --button-success-icon-container-color: var(--color-success-container); --button-warning-icon-container-color: var(--color-warning-container); --button-info-icon-container-color: var(--color-info-container); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 8px; --button-small-padding: 0 12px; --button-normal-padding: 0 16px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-fab-size: 56px; --button-fab-border-radius: 16px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s, border-radius 0.2s; will-change: box-shadow; -webkit-tap-highlight-color: transparent; white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: var(--button-default-text-color); background-color: var(--button-default-color);}.var-button--filled-default { background-color: var(--button-default-filled-color);}.var-button--primary { color: var(--button-primary-text-color); background-color: var(--button-primary-color);}.var-button--info { color: var(--button-info-text-color); background-color: var(--button-info-color);}.var-button--success { color: var(--button-success-text-color); background-color: var(--button-success-color);}.var-button--warning { color: var(--button-warning-text-color); background-color: var(--button-warning-color);}.var-button--danger { color: var(--button-danger-text-color); background-color: var(--button-danger-color);}.var-button--loading { cursor: wait;}.var-button--block { width: 100%;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--icon-container-default { color: var(--button-default-icon-color); background-color: var(--button-default-icon-container-color);}.var-button--icon-container-primary { color: var(--button-primary-icon-color); background-color: var(--button-primary-icon-container-color);}.var-button--icon-container-info { color: var(--button-info-icon-color); background-color: var(--button-info-icon-container-color);}.var-button--icon-container-success { color: var(--button-success-icon-color); background-color: var(--button-success-icon-container-color);}.var-button--icon-container-warning { color: var(--button-warning-icon-color); background-color: var(--button-warning-icon-container-color);}.var-button--icon-container-danger { color: var(--button-danger-icon-color); background-color: var(--button-danger-icon-container-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--fab { width: var(--button-fab-size); height: var(--button-fab-size); padding: 0; border-radius: var(--button-fab-border-radius);}.var-button--round.var-button--fab { border-radius: 50%;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--elevation-disabled:active { box-shadow: none;}
package/es/field-decorator/FieldDecorator.mjs CHANGED
@@ -18,7 +18,7 @@ var __async = (__this, __arguments, generator) => {
18
18
  step((generator = generator.apply(__this, __arguments)).next());
19
19
  });
20
20
  };
21
- import { call, doubleRaf, getStyle, isEmpty } from "@varlet/shared";
21
+ import { call, doubleRaf, getStyle, isEmpty, raf } from "@varlet/shared";
22
22
  import { onSmartMounted, onWindowResize, useResizeObserver } from "@varlet/use";
23
23
  import { computed, defineComponent, nextTick, onUpdated, ref, watch } from "vue";
24
24
  import VarIcon from "../icon/index.mjs";
@@ -237,11 +237,12 @@ const __sfc__ = defineComponent({
237
237
  const isFloating = computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocusing));
238
238
  const { popup, bindPopup } = usePopup();
239
239
  const { bindSwipeResizeDispatcher } = useSwipeResizeDispatcher();
240
+ let transitionVersion = 0;
240
241
  const color = computed(
241
242
  () => !props2.isError ? props2.isFocusing ? props2.focusColor : props2.blurColor : void 0
242
243
  );
243
- onWindowResize(resize);
244
- useResizeObserver(middleEl, resize);
244
+ onWindowResize(() => resize(true));
245
+ useResizeObserver(middleEl, () => resize(true));
245
246
  onSmartMounted(() => {
246
247
  resize();
247
248
  nextTick().then(() => {
@@ -252,7 +253,7 @@ const __sfc__ = defineComponent({
252
253
  call(bindPopup, null);
253
254
  call(bindSwipeResizeDispatcher, {
254
255
  onResize() {
255
- nextTick().then(resize);
256
+ nextTick().then(() => resize(true));
256
257
  }
257
258
  });
258
259
  if (popup) {
@@ -261,7 +262,7 @@ const __sfc__ = defineComponent({
261
262
  (show) => __async(null, null, function* () {
262
263
  if (show) {
263
264
  yield doubleRaf();
264
- resize();
265
+ resize(true);
265
266
  }
266
267
  })
267
268
  );
@@ -281,18 +282,32 @@ const __sfc__ = defineComponent({
281
282
  function handleClick(e) {
282
283
  call(props2.onClick, e);
283
284
  }
284
- function resize() {
285
- if (!middleEl.value) {
286
- return;
287
- }
288
- middleOffsetLeft.value = `${middleEl.value.offsetLeft}px`;
289
- middleOffsetWidth.value = `${middleEl.value.offsetWidth}px`;
290
- middleOffsetHeight.value = `${middleEl.value.offsetHeight}px`;
291
- if (props2.variant === "outlined" && placeholderTextEl.value) {
292
- const placeholderTextStyle = getStyle(placeholderTextEl.value);
293
- const placeholderSpace = `var(--field-decorator-outlined-${props2.size}-placeholder-space)`;
294
- legendWidth.value = `calc(${placeholderTextStyle.width} * 0.75 + ${placeholderSpace} * 2)`;
295
- }
285
+ function resize(disableTransition = false) {
286
+ return __async(this, null, function* () {
287
+ if (!middleEl.value) {
288
+ return;
289
+ }
290
+ if (disableTransition) {
291
+ transitionVersion++;
292
+ transitionDisabled.value = true;
293
+ }
294
+ const currentTransitionVersion = transitionVersion;
295
+ middleOffsetLeft.value = `${middleEl.value.offsetLeft}px`;
296
+ middleOffsetWidth.value = `${middleEl.value.offsetWidth}px`;
297
+ middleOffsetHeight.value = `${middleEl.value.offsetHeight}px`;
298
+ if (props2.variant === "outlined" && placeholderTextEl.value) {
299
+ const placeholderTextStyle = getStyle(placeholderTextEl.value);
300
+ const placeholderSpace = `var(--field-decorator-outlined-${props2.size}-placeholder-space)`;
301
+ legendWidth.value = `calc(${placeholderTextStyle.width} * 0.75 + ${placeholderSpace} * 2)`;
302
+ }
303
+ if (disableTransition) {
304
+ yield nextTick();
305
+ yield raf();
306
+ if (currentTransitionVersion === transitionVersion) {
307
+ transitionDisabled.value = false;
308
+ }
309
+ }
310
+ });
296
311
  }
297
312
  return {
298
313
  placeholderTextEl,
package/es/index.bundle.mjs CHANGED
@@ -307,7 +307,7 @@ import './tree-menu/style/index.mjs'
307
307
  import './uploader/style/index.mjs'
308
308
  import './watermark/style/index.mjs'
309
309
 
310
- const version = '3.19.1'
310
+ const version = '3.19.3'
311
311
 
312
312
  function install(app) {
313
313
  ActionSheet.install && app.use(ActionSheet)
package/es/index.mjs CHANGED
@@ -204,7 +204,7 @@ export * from './tree-menu/index.mjs'
204
204
  export * from './uploader/index.mjs'
205
205
  export * from './watermark/index.mjs'
206
206
 
207
- const version = '3.19.1'
207
+ const version = '3.19.3'
208
208
 
209
209
  function install(app) {
210
210
  ActionSheet.install && app.use(ActionSheet)
package/es/snackbar/style/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import '../../styles/common.css'
2
+ import '../SnackbarSfc.css'
2
3
  import '../../styles/elevation.css'
3
4
  import '../../loading/loading.css'
4
5
  import '../../icon/icon.css'
5
6
  import '../snackbar.css'
6
7
  import '../coreSfc.css'
7
- import '../SnackbarSfc.css'