@varlet/ui 3.20.6 → 3.20.8

package/es/ellipsis/Ellipsis.mjs

@@ -14,8 +14,8 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { useVModel } from "@varlet/use";
-import { computed, defineComponent } from "vue";
+import { onSmartMounted, useResizeObserver, useVModel } from "@varlet/use";
+import { computed, defineComponent, onUpdated, ref, watch } from "vue";
 import VarTooltip from "../tooltip/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { props } from "./props.mjs";
@@ -25,7 +25,8 @@ const _hoisted_1 = { key: 0 };
 function __render__(_ctx, _cache) {
   const _component_var_tooltip = _resolveComponent("var-tooltip");
   return _openBlock(), _createBlock(_component_var_tooltip, _mergeProps({
-    class: _ctx.classes(_ctx.n(), [_ctx.lineClamp, _ctx.n("--clamp"), _ctx.n("--line")], [_ctx.expandTrigger, _ctx.n("--cursor")], [_ctx.expanding, _ctx.n("--expand")]),
+    ref: "rootRef",
+    class: _ctx.classes(_ctx.n(), [_ctx.lineClamp, _ctx.n("--clamp"), _ctx.n("--line")], [_ctx.clickable, _ctx.n("--cursor")], [_ctx.expanding, _ctx.n("--expand")]),
     "var-ellipsis-cover": "",
     style: _ctx.rootStyles
   }, _ctx.tooltipProps, { onClick: _ctx.handleClick }), {
@@ -57,10 +58,16 @@ const __sfc__ = defineComponent({
   components: { VarTooltip },
   props,
   setup(props2) {
+    const rootRef = ref(null);
+    const truncated = ref(false);
     const expanding = useVModel(props2, "expand");
+    let previousWidth;
+    const clickable = computed(
+      () => !!props2.expandTrigger && (!props2.expandableOnOverflow || truncated.value || expanding.value)
+    );
     const rootStyles = computed(() => props2.lineClamp ? { "-webkit-line-clamp": props2.lineClamp } : {});
     const tooltipProps = computed(() => {
-      if (props2.tooltip === false) {
+      if (props2.tooltip === false || props2.tooltipOnOverflow && !truncated.value) {
         return {
           disabled: true
         };
@@ -72,19 +79,53 @@ const __sfc__ = defineComponent({
       }
       return __spreadValues({ sameWidth: true }, props2.tooltip);
     });
+    function getRootElement() {
+      var _a;
+      if (!rootRef.value) {
+        return null;
+      }
+      return (_a = rootRef.value.$el) != null ? _a : rootRef.value;
+    }
+    function checkTruncated() {
+      const element = getRootElement();
+      if (!element) {
+        return;
+      }
+      const next = props2.lineClamp ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth;
+      if (next !== truncated.value) {
+        truncated.value = next;
+      }
+    }
     function handleClick() {
-      if (!props2.expandTrigger) {
+      if (!clickable.value) {
         return;
       }
       expanding.value = !expanding.value;
     }
+    function handleResize(entries) {
+      var _a;
+      const width = (_a = entries[0]) == null ? void 0 : _a.contentRect.width;
+      if (width !== void 0 && width !== previousWidth && previousWidth !== void 0 && props2.expandableOnOverflow && expanding.value) {
+        expanding.value = false;
+      }
+      previousWidth = width;
+      checkTruncated();
+    }
+    useResizeObserver(getRootElement, handleResize);
+    watch(() => props2.lineClamp, checkTruncated);
+    onSmartMounted(checkTruncated);
+    onUpdated(checkTruncated);
     return {
+      rootRef,
+      truncated,
+      clickable,
       tooltipProps,
       expanding,
       rootStyles,
       n,
       classes,
-      handleClick
+      handleClick,
+      handleResize
     };
   }
 });

package/es/ellipsis/props.mjs

@@ -2,7 +2,9 @@ import { defineListenerProp } from "../utils/components.mjs";
 const props = {
   expand: Boolean,
   expandTrigger: String,
+  expandableOnOverflow: Boolean,
   lineClamp: [Number, String],
+  tooltipOnOverflow: Boolean,
   tooltip: {
     type: [Object, Boolean],
     default: true

package/es/index.bundle.mjs

@@ -310,7 +310,7 @@ import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.20.6'
+const version = '3.20.8'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -206,7 +206,7 @@ export * from './tree-menu/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.20.6'
+const version = '3.20.8'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/snackbar/core.mjs

@@ -1,6 +1,6 @@
 import { call } from "@varlet/shared";
 import { onSmartMounted } from "@varlet/use";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, onUnmounted, shallowRef, watch } from "vue";
 import { useLock } from "../context/lock.mjs";
 import { useZIndex } from "../context/zIndex.mjs";
 import VarIcon from "../icon/index.mjs";
@@ -18,6 +18,7 @@ const ICON_TYPE_DICT = {
 };
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, vShow as _vShow, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
+  var _a;
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_loading = _resolveComponent("var-loading");
   return _withDirectives((_openBlock(), _createElementBlock(
@@ -36,6 +37,7 @@ function __render__(_ctx, _cache) {
               _ctx.n(`wrapper-${_ctx.position}`),
               _ctx.formatElevation(_ctx.elevation, 4),
               [_ctx.vertical, _ctx.n("vertical")],
+              [_ctx.showProgress, _ctx.n("wrapper--progress")],
               [_ctx.type && _ctx.SNACKBAR_TYPE.includes(_ctx.type), _ctx.n(`wrapper-${_ctx.type}`)]
             )
           ),
@@ -93,6 +95,28 @@ function __render__(_ctx, _cache) {
             ],
             2
             /* CLASS */
+          )) : _createCommentVNode("v-if", true),
+          _ctx.showProgress ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: (_a = _ctx.countdown) == null ? void 0 : _a.id,
+              class: _normalizeClass(_ctx.n("progress")),
+              "aria-hidden": "true"
+            },
+            [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("progress-bar")),
+                  style: _normalizeStyle(_ctx.progressStyle)
+                },
+                null,
+                6
+                /* CLASS, STYLE */
+              )
+            ],
+            2
+            /* CLASS */
           )) : _createCommentVNode("v-if", true)
         ],
         6
@@ -113,7 +137,9 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
-    const timer = ref(null);
+    let timer;
+    let countdownId = 0;
+    const countdown = shallowRef();
     const { zIndex } = useZIndex(() => props2.show, 1);
     useLock(
       () => props2.show,
@@ -124,11 +150,33 @@ const __sfc__ = defineComponent({
       return type === "loading" || forbidClick;
     });
     const iconName = computed(() => !props2.type ? "" : ICON_TYPE_DICT[props2.type]);
+    const showProgress = computed(
+      () => props2.progress && countdown.value !== void 0 && countdown.value.duration > 0 && Number.isFinite(countdown.value.duration)
+    );
+    const progressStyle = computed(() => {
+      if (!props2.progress || !countdown.value) {
+        return;
+      }
+      const { duration, startedAt } = countdown.value;
+      return {
+        animationDuration: `${duration}ms`,
+        animationDelay: `${-Math.max(0, Date.now() - startedAt)}ms`
+      };
+    });
+    function clearCountdown() {
+      clearTimeout(timer);
+      timer = void 0;
+      countdown.value = void 0;
+    }
     function updateAfterDuration() {
-      timer.value = setTimeout(() => {
-        if (props2.type !== "loading") {
-          call(props2["onUpdate:show"], false);
-        }
+      clearCountdown();
+      if (!props2.show || props2.type === "loading") {
+        return;
+      }
+      countdown.value = { id: countdownId++, duration: props2.duration, startedAt: Date.now() };
+      timer = setTimeout(() => {
+        clearCountdown();
+        call(props2["onUpdate:show"], false);
       }, props2.duration);
     }
     watch(
@@ -136,31 +184,27 @@ const __sfc__ = defineComponent({
       (show) => {
         if (show) {
           call(props2.onOpen);
-          updateAfterDuration();
         } else {
-          clearTimeout(timer.value);
           call(props2.onClose);
         }
       }
     );
-    watch(
-      () => props2._update,
-      () => {
-        clearTimeout(timer.value);
-        updateAfterDuration();
-      }
-    );
+    watch([() => props2.show, () => props2.type === "loading", () => props2._update], updateAfterDuration);
     onSmartMounted(() => {
       if (props2.show) {
         call(props2.onOpen);
         updateAfterDuration();
       }
     });
+    onUnmounted(clearCountdown);
     return {
       SNACKBAR_TYPE,
       zIndex,
       iconName,
       isForbidClick,
+      countdown,
+      showProgress,
+      progressStyle,
       n,
       classes,
       formatElevation

package/es/snackbar/index.mjs

@@ -34,6 +34,7 @@ const defaultOptionsValue = {
   action: "",
   position: "top",
   duration: 3e3,
+  progress: false,
   elevation: true,
   vertical: false,
   contentClass: void 0,

package/es/snackbar/props.mjs

@@ -31,6 +31,7 @@ const props = {
     type: Number,
     default: 3e3
   },
+  progress: Boolean,
   elevation: {
     type: [Boolean, String, Number],
     default: true

package/es/snackbar/snackbar.css

@@ -1 +1 @@
-:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 8px; --snackbar-vertical-action-margin: 0 8px 8px 0; --snackbar-icon-margin: 0 8px;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__icon { margin: var(--snackbar-icon-margin);}.var-snackbar__content { flex-grow: 1; word-break: break-all; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin: var(--snackbar-vertical-action-margin);}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}
+:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 8px; --snackbar-vertical-action-margin: 0 8px 8px 0; --snackbar-icon-margin: 0 8px; --snackbar-progress-height: 4px; --snackbar-progress-color: currentColor;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper--progress { position: relative;}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__icon { margin: var(--snackbar-icon-margin);}.var-snackbar__progress { position: absolute; right: 0; bottom: 0; left: 0; height: var(--snackbar-progress-height); overflow: hidden; border-radius: 0 0 var(--snackbar-border-radius) var(--snackbar-border-radius); pointer-events: none;}.var-snackbar__progress-bar { height: 100%; background: var(--snackbar-progress-color); opacity: 0.4; transform-origin: left; animation: var-snackbar-progress linear forwards;}.var-snackbar__content { flex-grow: 1; word-break: break-all; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin: var(--snackbar-vertical-action-margin);}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}@keyframes var-snackbar-progress { from { transform: scaleX(1); } to { transform: scaleX(0); }}

package/es/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'