@varlet/ui 2.20.1 → 2.20.2

package/es/collapse-item/CollapseItem.mjs

@@ -0,0 +1,231 @@
+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 { createNamespace, formatElevation } from "../utils/components.mjs";
+import { useCollapse } from "./provide.mjs";
+import { props } from "./props.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";
+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.n("header")),
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("header-title"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "title", {}, () => [
+                _createTextVNode(
+                  _toDisplayString(_ctx.title),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ],
+            2
+            /* CLASS */
+          ),
+          _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 */
+          )
+        ],
+        2
+        /* CLASS */
+      ),
+      _withDirectives(_createElementVNode(
+        "div",
+        {
+          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))
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("content-wrap"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default")
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        34
+        /* CLASS, HYDRATE_EVENTS */
+      ), [
+        [_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, updateItem } = collapse;
+    const collapseItemProvider = {
+      index,
+      name: name2,
+      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";
+      });
+    }
+    function init(show) {
+      isShow.value = show;
+    }
+    function toggle() {
+      var _a;
+      if (props2.disabled) {
+        return;
+      }
+      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,
+      offset,
+      divider,
+      elevation,
+      contentEl,
+      n,
+      start,
+      classes,
+      toggle,
+      transitionend,
+      formatElevation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/collapse-item/collapseItem.css

@@ -0,0 +1 @@
+:root { --collapse-background: #fff; --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 rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 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-divider-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__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/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,74 @@
+import context from "./index.mjs";
+import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from "vue";
+function resolveLock() {
+  const lockCounts = Object.keys(context.locks).length;
+  lockCounts <= 0 ? document.body.classList.remove("var--lock") : document.body.classList.add("var--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/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
+};

package/es/countdown/Countdown.mjs

@@ -0,0 +1,168 @@
+import { defineComponent, onActivated, onDeactivated, onMounted, onUnmounted, ref, watch } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { padStart } from "../utils/shared.mjs";
+import { toNumber, requestAnimationFrame, cancelAnimationFrame, call } from "@varlet/shared";
+const { name, n } = createNamespace("countdown");
+const SECOND = 1e3;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _renderSlot(_ctx.$slots, "default", _normalizeProps(_guardReactiveProps(_ctx.timeData)), () => [
+        _createTextVNode(
+          _toDisplayString(_ctx.showTime),
+          1
+          /* TEXT */
+        )
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const showTime = ref("");
+    const timeData = ref({
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      milliseconds: 0
+    });
+    let endTime = 0;
+    let isStart = false;
+    let handle = 0;
+    let remainingTime = 0;
+    let cacheIsStart;
+    watch(
+      () => props2.time,
+      () => {
+        reset();
+        if (props2.autoStart) {
+          start();
+        }
+      }
+    );
+    onMounted(() => {
+      countdown();
+      if (props2.autoStart) {
+        start();
+      }
+    });
+    onActivated(() => {
+      if (cacheIsStart == null) {
+        return;
+      }
+      isStart = cacheIsStart;
+      if (isStart === true) {
+        start(true);
+      }
+    });
+    onDeactivated(() => {
+      cacheIsStart = isStart;
+      pause();
+    });
+    onUnmounted(pause);
+    function parseFormat(format, time) {
+      const scannedTimes = Object.values(time);
+      const scannedFormats = ["DD", "HH", "mm", "ss"];
+      const padValues = [24, 60, 60, 1e3];
+      scannedFormats.forEach((scannedFormat, index) => {
+        if (!format.includes(scannedFormat)) {
+          scannedTimes[index + 1] += scannedTimes[index] * padValues[index];
+        } else {
+          format = format.replace(scannedFormat, padStart(`${scannedTimes[index]}`, 2, "0"));
+        }
+      });
+      if (format.includes("S")) {
+        const ms = padStart(`${scannedTimes[scannedTimes.length - 1]}`, 3, "0");
+        if (format.includes("SSS")) {
+          format = format.replace("SSS", ms);
+        } else if (format.includes("SS")) {
+          format = format.replace("SS", ms.slice(0, 2));
+        } else {
+          format = format.replace("S", ms.slice(0, 1));
+        }
+      }
+      return format;
+    }
+    function displayTime(durationTime) {
+      const days = Math.floor(durationTime / DAY);
+      const hours = Math.floor(durationTime % DAY / HOUR);
+      const minutes = Math.floor(durationTime % HOUR / MINUTE);
+      const seconds = Math.floor(durationTime % MINUTE / SECOND);
+      const milliseconds = Math.floor(durationTime % SECOND);
+      const time = {
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds
+      };
+      timeData.value = time;
+      call(props2.onChange, timeData.value);
+      showTime.value = parseFormat(props2.format, time);
+    }
+    function countdown() {
+      const { time, onEnd } = props2;
+      const now = performance.now();
+      if (!endTime) {
+        endTime = now + toNumber(time);
+      }
+      remainingTime = endTime - now;
+      if (remainingTime < 0) {
+        remainingTime = 0;
+      }
+      displayTime(remainingTime);
+      if (remainingTime === 0) {
+        call(onEnd);
+        return;
+      }
+      if (isStart) {
+        handle = requestAnimationFrame(countdown);
+      }
+    }
+    function start(resume = false) {
+      if (isStart && !resume) {
+        return;
+      }
+      isStart = true;
+      endTime = performance.now() + (remainingTime || toNumber(props2.time));
+      countdown();
+    }
+    function pause() {
+      isStart = false;
+      cancelAnimationFrame(handle);
+    }
+    function reset() {
+      endTime = 0;
+      isStart = false;
+      cancelAnimationFrame(handle);
+      countdown();
+    }
+    return {
+      showTime,
+      timeData,
+      n,
+      start,
+      pause,
+      reset
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/countdown/countdown.css

@@ -0,0 +1 @@
+:root { --countdown-text-color: #555; --countdown-text-font-size: var(--font-size-lg);}.var-countdown { color: var(--countdown-text-color); font-size: var(--countdown-text-font-size);}

package/es/countdown/index.mjs

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

package/es/countdown/props.mjs

@@ -0,0 +1,20 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  time: {
+    type: [String, Number],
+    default: 0
+  },
+  format: {
+    type: String,
+    default: "HH : mm : ss"
+  },
+  autoStart: {
+    type: Boolean,
+    default: true
+  },
+  onEnd: defineListenerProp(),
+  onChange: defineListenerProp()
+};
+export {
+  props
+};

package/es/countdown/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../countdown.css'
+import '../CountdownSfc.css'