@varlet/ui 3.5.1 → 3.5.2

package/es/collapse-item/CollapseItem.mjs

@@ -0,0 +1,165 @@
+import VarIcon from "../icon/index.mjs";
+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, 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";
+const _hoisted_1 = ["aria-expanded", "aria-disabled", "role"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.offset && _ctx.isShow, _ctx.n("--active")], [_ctx.disabled, _ctx.n("--disable")])),
+      style: _normalizeStyle(`--collapse-divider-top: ${_ctx.divider ? "var(--collapse-border-top)" : "none"}`)
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n("shadow"), _ctx.formatElevation(_ctx.elevation, 2)))
+        },
+        null,
+        2
+        /* CLASS */
+      ),
+      _createElementVNode("div", {
+        class: _normalizeClass(_ctx.classes(_ctx.n("header"), [!_ctx.disabled, _ctx.n("header--cursor-pointer")])),
+        "aria-expanded": _ctx.isShow,
+        "aria-disabled": _ctx.disabled,
+        role: _ctx.accordion ? "tab" : "button",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
+      }, [
+        _ctx.$slots.title || _ctx.title ? (_openBlock(), _createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: _normalizeClass(_ctx.n("header-title"))
+          },
+          [
+            _renderSlot(_ctx.$slots, "title", {}, () => [
+              _createTextVNode(
+                _toDisplayString(_ctx.title),
+                1
+                /* TEXT */
+              )
+            ])
+          ],
+          2
+          /* CLASS */
+        )) : _createCommentVNode("v-if", true),
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.n("header-icon"))
+          },
+          [
+            _renderSlot(_ctx.$slots, "icon", {}, () => [
+              _createVNode(_component_var_icon, {
+                name: _ctx.icon,
+                transition: 250,
+                class: _normalizeClass(
+                  _ctx.classes(
+                    _ctx.n("header-icon"),
+                    [_ctx.isShow && _ctx.icon === "chevron-down", _ctx.n("header-open")],
+                    [_ctx.disabled, _ctx.n("header--disable")]
+                  )
+                )
+              }, null, 8, ["name", "class"])
+            ])
+          ],
+          2
+          /* CLASS */
+        )
+      ], 10, _hoisted_1),
+      _withDirectives(_createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("content")),
+          ref: "contentEl",
+          onTransitionend: _cache[1] || (_cache[1] = (...args) => _ctx.handleTransitionEnd && _ctx.handleTransitionEnd(...args)),
+          onTransitionstart: _cache[2] || (_cache[2] = (...args) => _ctx.handleTransitionStart && _ctx.handleTransitionStart(...args))
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("content-wrap"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default")
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        34
+        /* CLASS, NEED_HYDRATION */
+      ), [
+        [_vShow, _ctx.showContent]
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarIcon
+  },
+  props,
+  setup(props2) {
+    const isShow = ref(false);
+    const showContent = ref(false);
+    const contentEl = ref(null);
+    const name2 = computed(() => props2.name);
+    const disabled = computed(() => props2.disabled);
+    const { index, collapse, bindCollapse } = useCollapse();
+    const { offset, divider, elevation, accordion, updateItem } = collapse;
+    const collapseItemProvider = {
+      index,
+      name: name2,
+      disabled,
+      init
+    };
+    bindCollapse(collapseItemProvider);
+    const { handleTransitionEnd, handleTransitionStart } = useCollapseTransition({
+      contentEl,
+      showContent,
+      expand: isShow
+    });
+    function init(show) {
+      isShow.value = show;
+    }
+    function toggle() {
+      var _a;
+      if (props2.disabled) {
+        return;
+      }
+      updateItem((_a = props2.name) != null ? _a : index.value, !isShow.value);
+    }
+    return {
+      isShow,
+      showContent,
+      offset,
+      divider,
+      elevation,
+      contentEl,
+      accordion,
+      n,
+      classes,
+      toggle,
+      formatElevation,
+      handleTransitionEnd,
+      handleTransitionStart
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/collapse-item/collapseItem.css

@@ -0,0 +1 @@
+:root { --collapse-background: var(--color-surface-container-highest); --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid var(--color-outline);}.var-collapse-item { -webkit-tap-highlight-color: transparent; box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__header--cursor-pointer { cursor: pointer;}.var-collapse-item__content { font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/es/collapse-item/index.mjs

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

package/es/collapse-item/props.mjs

@@ -0,0 +1,12 @@
+const props = {
+  name: [String, Number],
+  title: String,
+  icon: {
+    type: String,
+    default: "chevron-down"
+  },
+  disabled: Boolean
+};
+export {
+  props
+};

package/es/collapse-item/provide.mjs

@@ -0,0 +1,19 @@
+import { useParent } from "@varlet/use";
+import { error } from "../utils/logger.mjs";
+import { COLLAPSE_BIND_COLLAPSE_ITEM_KEY } from "../collapse/provide.mjs";
+function useCollapse() {
+  const { parentProvider, index, bindParent } = useParent(
+    COLLAPSE_BIND_COLLAPSE_ITEM_KEY
+  );
+  if (!bindParent) {
+    error("Collapse", "<var-collapse-item/> must in <var-collapse>");
+  }
+  return {
+    index,
+    collapse: parentProvider,
+    bindCollapse: bindParent
+  };
+}
+export {
+  useCollapse
+};

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

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../collapseItem.css'
+import '../CollapseItemSfc.css'

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: height 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/context/index.mjs

@@ -0,0 +1,12 @@
+import { reactive } from "vue";
+const context = {
+  locks: {},
+  zIndex: 2e3,
+  enableRipple: true
+};
+const _ContextComponent = reactive(context);
+var stdin_default = reactive(context);
+export {
+  _ContextComponent,
+  stdin_default as default
+};

package/es/context/lock.mjs

@@ -0,0 +1,76 @@
+import context from "./index.mjs";
+import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+const { n } = createNamespace("");
+function resolveLock() {
+  const lockCounts = Object.keys(context.locks).length;
+  lockCounts <= 0 ? document.body.classList.remove(n("$--lock")) : document.body.classList.add(n("$--lock"));
+}
+function addLock(uid) {
+  context.locks[uid] = 1;
+  resolveLock();
+}
+function releaseLock(uid) {
+  delete context.locks[uid];
+  resolveLock();
+}
+function useLock(source, useSource) {
+  const { uid } = getCurrentInstance();
+  if (useSource) {
+    watch(useSource, (newValue) => {
+      if (newValue === false) {
+        releaseLock(uid);
+      } else if (newValue === true && source() === true) {
+        addLock(uid);
+      }
+    });
+  }
+  watch(source, (newValue) => {
+    if (useSource && useSource() === false) {
+      return;
+    }
+    if (newValue === true) {
+      addLock(uid);
+    } else {
+      releaseLock(uid);
+    }
+  });
+  onBeforeMount(() => {
+    if (useSource && useSource() === false) {
+      return;
+    }
+    if (source() === true) {
+      addLock(uid);
+    }
+  });
+  onUnmounted(() => {
+    if (useSource && useSource() === false) {
+      return;
+    }
+    if (source() === true) {
+      releaseLock(uid);
+    }
+  });
+  onActivated(() => {
+    if (useSource && useSource() === false) {
+      return;
+    }
+    if (source() === true) {
+      addLock(uid);
+    }
+  });
+  onDeactivated(() => {
+    if (useSource && useSource() === false) {
+      return;
+    }
+    if (source() === true) {
+      releaseLock(uid);
+    }
+  });
+}
+export {
+  addLock,
+  releaseLock,
+  resolveLock,
+  useLock
+};

package/es/context/stack.mjs

@@ -0,0 +1,46 @@
+import { getCurrentInstance, watch } from "vue";
+import { removeItem } from "@varlet/shared";
+import { onSmartUnmounted, onSmartMounted } from "@varlet/use";
+const stack = [];
+function useStack(activeGetter, zIndex) {
+  const { uid } = getCurrentInstance();
+  watch(activeGetter, (isActive) => {
+    if (isActive && !getStackItem(uid)) {
+      pushStackItem();
+    } else {
+      setTimeout(() => {
+        removeItem(stack, getStackItem(uid));
+      });
+    }
+  });
+  onSmartMounted(() => {
+    if (activeGetter()) {
+      pushStackItem();
+    }
+  });
+  onSmartUnmounted(() => {
+    removeItem(stack, getStackItem(uid));
+  });
+  function onStackTop() {
+    if (stack.length === 0) {
+      return true;
+    }
+    stack.sort((a, b) => a.zIndex.value - b.zIndex.value);
+    return stack[stack.length - 1].uid === uid;
+  }
+  function pushStackItem() {
+    if (getStackItem(uid)) {
+      return;
+    }
+    stack.push({ uid, zIndex });
+  }
+  function getStackItem(uid2) {
+    return stack.find((item) => item.uid === uid2);
+  }
+  return {
+    onStackTop
+  };
+}
+export {
+  useStack
+};

package/es/context/zIndex.mjs

@@ -0,0 +1,19 @@
+import context from "./index.mjs";
+import { watch, ref } from "vue";
+function useZIndex(source, count) {
+  const zIndex = ref(context.zIndex);
+  watch(
+    source,
+    (newValue) => {
+      if (newValue) {
+        context.zIndex += process.env.NODE_ENV === "test" ? 0 : count;
+        zIndex.value = context.zIndex;
+      }
+    },
+    { immediate: true }
+  );
+  return { zIndex };
+}
+export {
+  useZIndex
+};