@varlet/ui 2.20.6 → 2.21.0-alpha.1704976407062

package/es/card/Card.mjs

@@ -60,6 +60,8 @@ function __render__(_ctx, _cache) {
             left: _ctx.floaterLeft,
             overflow: _ctx.floaterOverflow,
             position: _ctx.floaterPosition,
+            zIndex: _ctx.floated ? _ctx.zIndex : void 0,
+            background: _ctx.outline && !_ctx.floated ? "transparent" : void 0,
             transition: _ctx.floated ? `background-color ${_ctx.floatingDuration}ms, color ${_ctx.floatingDuration}ms, width ${_ctx.floatingDuration}ms, height ${_ctx.floatingDuration}ms, top ${_ctx.floatingDuration}ms, left ${_ctx.floatingDuration}ms` : void 0
           })
         },

package/es/checkbox/Checkbox.mjs

@@ -79,9 +79,10 @@ function __render__(_ctx, _cache) {
             [_directive_hover, _ctx.handleHovering, "desktop"],
             [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }]
           ]),
-          _createElementVNode(
+          _ctx.$slots.default ? (_openBlock(), _createElementBlock(
             "div",
             {
+              key: 0,
               class: _normalizeClass(
                 _ctx.classes(
                   _ctx.n("text"),
@@ -95,7 +96,7 @@ function __render__(_ctx, _cache) {
             ],
             2
             /* CLASS */
-          )
+          )) : _createCommentVNode("v-if", true)
         ],
         2
         /* CLASS */

package/es/collapse-item/CollapseItem.mjs

@@ -1,31 +1,11 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import VarIcon from "../icon/index.mjs";
-import { defineComponent, ref, watch, computed } from "vue";
-import { doubleRaf, raf } from "@varlet/shared";
+import { defineComponent, ref, computed } from "vue";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { useCollapse } from "./provide.mjs";
 import { props } from "./props.mjs";
+import { useCollapseTransition } from "../collapse-transition/useCollapseTransition.mjs";
 const { name, n, classes } = createNamespace("collapse-item");
-import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, normalizeStyle as _normalizeStyle } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   return _openBlock(), _createElementBlock(
@@ -51,9 +31,10 @@ function __render__(_ctx, _cache) {
           onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
         },
         [
-          _createElementVNode(
+          _ctx.$slots.title || _ctx.title ? (_openBlock(), _createElementBlock(
             "div",
             {
+              key: 0,
               class: _normalizeClass(_ctx.n("header-title"))
             },
             [
@@ -67,7 +48,7 @@ function __render__(_ctx, _cache) {
             ],
             2
             /* CLASS */
-          ),
+          )) : _createCommentVNode("v-if", true),
           _createElementVNode(
             "div",
             {
@@ -100,8 +81,8 @@ function __render__(_ctx, _cache) {
         {
           class: _normalizeClass(_ctx.n("content")),
           ref: "contentEl",
-          onTransitionend: _cache[1] || (_cache[1] = (...args) => _ctx.transitionend && _ctx.transitionend(...args)),
-          onTransitionstart: _cache[2] || (_cache[2] = (...args) => _ctx.start && _ctx.start(...args))
+          onTransitionend: _cache[1] || (_cache[1] = (...args) => _ctx.handleTransitionEnd && _ctx.handleTransitionEnd(...args)),
+          onTransitionstart: _cache[2] || (_cache[2] = (...args) => _ctx.handleTransitionStart && _ctx.handleTransitionStart(...args))
         },
         [
           _createElementVNode(
@@ -146,49 +127,12 @@ const __sfc__ = defineComponent({
       disabled,
       init
     };
-    let isInitToTrigger = true;
-    watch(isShow, (value) => {
-      value ? openPanel() : closePanel();
-    });
     bindCollapse(collapseItemProvider);
-    function openPanel() {
-      return __async(this, null, function* () {
-        if (!contentEl.value) {
-          return;
-        }
-        contentEl.value.style.height = "";
-        showContent.value = true;
-        yield raf();
-        if (!contentEl.value) {
-          return;
-        }
-        const { offsetHeight } = contentEl.value;
-        contentEl.value.style.height = "0px";
-        yield raf();
-        if (!contentEl.value) {
-          return;
-        }
-        contentEl.value.style.height = offsetHeight + "px";
-        if (!isInitToTrigger) {
-          return;
-        }
-        yield doubleRaf();
-        if (isInitToTrigger) {
-          transitionend();
-        }
-      });
-    }
-    function closePanel() {
-      return __async(this, null, function* () {
-        if (!contentEl.value) {
-          return;
-        }
-        const { offsetHeight } = contentEl.value;
-        contentEl.value.style.height = offsetHeight + "px";
-        yield raf();
-        contentEl.value.style.height = "0px";
-      });
-    }
+    const { handleTransitionEnd, handleTransitionStart } = useCollapseTransition({
+      contentEl,
+      showContent,
+      expand: isShow
+    });
     function init(show) {
       isShow.value = show;
     }
@@ -199,15 +143,6 @@ const __sfc__ = defineComponent({
       }
       updateItem((_a = props2.name) != null ? _a : index.value, !isShow.value);
     }
-    function start() {
-      isInitToTrigger = false;
-    }
-    function transitionend() {
-      if (!isShow.value) {
-        showContent.value = false;
-      }
-      contentEl.value.style.height = "";
-    }
     return {
       isShow,
       showContent,
@@ -216,11 +151,11 @@ const __sfc__ = defineComponent({
       elevation,
       contentEl,
       n,
-      start,
       classes,
       toggle,
-      transitionend,
-      formatElevation
+      formatElevation,
+      handleTransitionEnd,
+      handleTransitionStart
     };
   }
 });

package/es/collapse-transition/CollapseTransition.mjs

@@ -0,0 +1,50 @@
+import { defineComponent, ref, computed } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+import { useCollapseTransition } from "./useCollapseTransition.mjs";
+const { name, n } = createNamespace("collapse-transition");
+import { renderSlot as _renderSlot, vShow as _vShow, normalizeClass as _normalizeClass, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("content")),
+      ref: "contentEl",
+      onTransitionend: _cache[0] || (_cache[0] = (...args) => _ctx.handleTransitionEnd && _ctx.handleTransitionEnd(...args)),
+      onTransitionstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTransitionStart && _ctx.handleTransitionStart(...args))
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    34
+    /* CLASS, NEED_HYDRATION */
+  )), [
+    [_vShow, _ctx.showContent]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const showContent = ref(false);
+    const contentEl = ref(null);
+    const expand = computed(() => props2.expand);
+    const { handleTransitionEnd, handleTransitionStart } = useCollapseTransition({
+      contentEl,
+      showContent,
+      expand
+    });
+    return {
+      showContent,
+      contentEl,
+      n,
+      handleTransitionEnd,
+      handleTransitionStart
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/collapse-transition/collapseTransition.css

@@ -0,0 +1 @@
+.var-collapse-transition__content { overflow: hidden; transition: all 0.25s;}

package/es/collapse-transition/index.mjs

@@ -0,0 +1,12 @@
+import CollapseTransition from "./CollapseTransition.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as collapseTransitionProps } from "./props.mjs";
+withInstall(CollapseTransition);
+withPropsDefaultsSetter(CollapseTransition, collapseTransitionProps);
+const _CollapseTransitionComponent = CollapseTransition;
+var stdin_default = CollapseTransition;
+export {
+  _CollapseTransitionComponent,
+  collapseTransitionProps,
+  stdin_default as default
+};

package/es/collapse-transition/props.mjs

@@ -0,0 +1,6 @@
+const props = {
+  expand: Boolean
+};
+export {
+  props
+};

package/es/collapse-transition/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../collapseTransition.css'
+import '../CollapseTransitionSfc.css'

package/es/collapse-transition/useCollapseTransition.mjs

@@ -0,0 +1,87 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { raf, doubleRaf } from "@varlet/shared";
+import { nextTick, watch } from "vue";
+function useCollapseTransition(options) {
+  const { contentEl, showContent, expand } = options;
+  let isInitToTrigger = true;
+  watch(
+    expand,
+    (value) => {
+      nextTick(() => {
+        value ? open() : close();
+      });
+    },
+    { immediate: true }
+  );
+  function open() {
+    return __async(this, null, function* () {
+      if (!contentEl.value) {
+        return;
+      }
+      contentEl.value.style.height = "";
+      showContent.value = true;
+      yield raf();
+      if (!contentEl.value) {
+        return;
+      }
+      const { offsetHeight } = contentEl.value;
+      contentEl.value.style.height = "0px";
+      yield raf();
+      if (!contentEl.value) {
+        return;
+      }
+      contentEl.value.style.height = offsetHeight + "px";
+      if (!isInitToTrigger) {
+        return;
+      }
+      yield doubleRaf();
+      if (isInitToTrigger) {
+        handleTransitionEnd();
+      }
+    });
+  }
+  const close = () => __async(this, null, function* () {
+    if (!contentEl.value) {
+      return;
+    }
+    const { offsetHeight } = contentEl.value;
+    contentEl.value.style.height = offsetHeight + "px";
+    yield raf();
+    contentEl.value.style.height = "0px";
+  });
+  const handleTransitionEnd = () => {
+    if (!expand.value) {
+      showContent.value = false;
+    }
+    contentEl.value.style.height = "";
+  };
+  const handleTransitionStart = () => {
+    isInitToTrigger = false;
+  };
+  return {
+    handleTransitionEnd,
+    handleTransitionStart
+  };
+}
+export {
+  useCollapseTransition
+};

package/es/image-preview/ImagePreview.mjs

@@ -116,9 +116,10 @@ function __render__(_ctx, _cache) {
           onClick: _ctx.close
         }, null, 8, ["class", "onClick"])) : _createCommentVNode("v-if", true)
       ]),
-      _createElementVNode(
+      _ctx.$slots.extra ? (_openBlock(), _createElementBlock(
         "div",
         {
+          key: 0,
           class: _normalizeClass(_ctx.n("extra"))
         },
         [
@@ -126,7 +127,7 @@ function __render__(_ctx, _cache) {
         ],
         2
         /* CLASS */
-      )
+      )) : _createCommentVNode("v-if", true)
     ]),
     _: 3
     /* FORWARDED */

package/es/index.bundle.mjs

@@ -18,6 +18,7 @@ import Chip from './chip/index.mjs'
 import Col from './col/index.mjs'
 import Collapse from './collapse/index.mjs'
 import CollapseItem from './collapse-item/index.mjs'
+import CollapseTransition from './collapse-transition/index.mjs'
 import Context from './context/index.mjs'
 import Countdown from './countdown/index.mjs'
 import Counter from './counter/index.mjs'
@@ -105,6 +106,7 @@ export * from './chip/index.mjs'
 export * from './col/index.mjs'
 export * from './collapse/index.mjs'
 export * from './collapse-item/index.mjs'
+export * from './collapse-transition/index.mjs'
 export * from './context/index.mjs'
 export * from './countdown/index.mjs'
 export * from './counter/index.mjs'
@@ -192,6 +194,7 @@ import './chip/style/index.mjs'
 import './col/style/index.mjs'
 import './collapse/style/index.mjs'
 import './collapse-item/style/index.mjs'
+import './collapse-transition/style/index.mjs'
 import './context/style/index.mjs'
 import './countdown/style/index.mjs'
 import './counter/style/index.mjs'
@@ -259,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.20.6'
+const version = '2.21.0-alpha.1704976407062'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -282,6 +285,7 @@ function install(app) {
   Col.install && app.use(Col)
   Collapse.install && app.use(Collapse)
   CollapseItem.install && app.use(CollapseItem)
+  CollapseTransition.install && app.use(CollapseTransition)
   Context.install && app.use(Context)
   Countdown.install && app.use(Countdown)
   Counter.install && app.use(Counter)
@@ -373,6 +377,7 @@ export {
   Col,
   Collapse,
   CollapseItem,
+  CollapseTransition,
   Context,
   Countdown,
   Counter,
@@ -464,6 +469,7 @@ export default {
   Col,
   Collapse,
   CollapseItem,
+  CollapseTransition,
   Context,
   Countdown,
   Counter,

package/es/index.mjs

@@ -18,6 +18,7 @@ import Chip from './chip/index.mjs'
 import Col from './col/index.mjs'
 import Collapse from './collapse/index.mjs'
 import CollapseItem from './collapse-item/index.mjs'
+import CollapseTransition from './collapse-transition/index.mjs'
 import Context from './context/index.mjs'
 import Countdown from './countdown/index.mjs'
 import Counter from './counter/index.mjs'
@@ -105,6 +106,7 @@ export * from './chip/index.mjs'
 export * from './col/index.mjs'
 export * from './collapse/index.mjs'
 export * from './collapse-item/index.mjs'
+export * from './collapse-transition/index.mjs'
 export * from './context/index.mjs'
 export * from './countdown/index.mjs'
 export * from './counter/index.mjs'
@@ -172,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.20.6'
+const version = '2.21.0-alpha.1704976407062'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -195,6 +197,7 @@ function install(app) {
   Col.install && app.use(Col)
   Collapse.install && app.use(Collapse)
   CollapseItem.install && app.use(CollapseItem)
+  CollapseTransition.install && app.use(CollapseTransition)
   Context.install && app.use(Context)
   Countdown.install && app.use(Countdown)
   Counter.install && app.use(Counter)
@@ -286,6 +289,7 @@ export {
   Col,
   Collapse,
   CollapseItem,
+  CollapseTransition,
   Context,
   Countdown,
   Counter,
@@ -377,6 +381,7 @@ export default {
   Col,
   Collapse,
   CollapseItem,
+  CollapseTransition,
   Context,
   Countdown,
   Counter,

package/es/picker/Picker.mjs

@@ -234,7 +234,16 @@ const __sfc__ = defineComponent({
     let prevIndexes = [];
     buildScrollColumns();
     watch(() => props2.columns, buildScrollColumns, { deep: true });
-    watch(() => modelValue.value, updateScrollColumnsIndex);
+    watch(
+      () => modelValue.value,
+      () => {
+        if (props2.cascade && props2.modelValue.length) {
+          buildScrollColumns();
+        } else {
+          updateScrollColumnsIndex();
+        }
+      }
+    );
     function getOptionKey(key) {
       const keyMap = {
         text: props2.textKey,
@@ -291,6 +300,10 @@ const __sfc__ = defineComponent({
           scrolling: false
         };
         scrollColumns2.push(scrollColumn);
+        if (props2.modelValue.length) {
+          const index = children.findIndex((option) => modelValue.value[scrollColumns2.length - 1] === getValue(option));
+          scrollColumn.index = index === -1 ? 0 : index;
+        }
         scrollTo(scrollColumn);
         createChildren(scrollColumns2, (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : []);
       }
@@ -302,7 +315,9 @@ const __sfc__ = defineComponent({
     }
     function buildScrollColumns() {
       scrollColumns.value = props2.cascade ? normalizeCascadeMode(props2.columns) : normalizeNormalMode(props2.columns);
-      updateScrollColumnsIndex();
+      if (!props2.cascade) {
+        updateScrollColumnsIndex();
+      }
     }
     function updateScrollColumnsIndex() {
       scrollColumns.value.forEach((scrollColumn, idx) => {
@@ -414,7 +429,7 @@ const __sfc__ = defineComponent({
       if (isSamePicked()) {
         return;
       }
-      if (cascade) {
+      if (cascade && !props2.modelValue.length) {
         rebuildChildren(scrollColumn);
       }
       const hasScrolling = scrollColumns.value.some((scrollColumn2) => scrollColumn2.scrolling);

package/es/radio/Radio.mjs

@@ -11,7 +11,7 @@ import { useForm } from "../form/provide.mjs";
 import { call } from "@varlet/shared";
 import { useVModel } from "@varlet/use";
 const { name, n, classes } = createNamespace("radio");
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, mergeProps as _mergeProps, createElementVNode as _createElementVNode } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -70,9 +70,10 @@ function __render__(_ctx, _cache) {
             [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
             [_directive_hover, _ctx.handleHovering, "desktop"]
           ]),
-          _createElementVNode(
+          _ctx.$slots.default ? (_openBlock(), _createElementBlock(
             "div",
             {
+              key: 0,
               class: _normalizeClass(
                 _ctx.classes(
                   _ctx.n("text"),
@@ -86,7 +87,7 @@ function __render__(_ctx, _cache) {
             ],
             2
             /* CLASS */
-          )
+          )) : _createCommentVNode("v-if", true)
         ],
         16
         /* FULL_PROPS */

package/es/step/Step.mjs

@@ -5,7 +5,7 @@ import { useSteps } from "./provide.mjs";
 import { toNumber } from "@varlet/shared";
 import { createNamespace } from "../utils/components.mjs";
 const { name, n, classes } = createNamespace("step");
-import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
 const _hoisted_1 = { key: 3 };
 function __render__(_ctx, _cache) {
@@ -59,9 +59,10 @@ function __render__(_ctx, _cache) {
             6
             /* CLASS, STYLE */
           ),
-          _createElementVNode(
+          _ctx.$slots.default ? (_openBlock(), _createElementBlock(
             "div",
             {
+              key: 0,
               class: _normalizeClass(_ctx.classes(_ctx.n(`${_ctx.direction}-content`), [_ctx.isActive || _ctx.isCurrent, _ctx.n(`${_ctx.direction}-content--active`)])),
               onClick: _cache[1] || (_cache[1] = (...args) => _ctx.click && _ctx.click(...args))
             },
@@ -70,7 +71,7 @@ function __render__(_ctx, _cache) {
             ],
             2
             /* CLASS */
-          ),
+          )) : _createCommentVNode("v-if", true),
           _createElementVNode(
             "div",
             {