vft 0.0.362 → 0.0.363

package/es/components/carousel/use-carousel.js

@@ -1,190 +1,282 @@
-import { getCurrentInstance as ae, useSlots as oe, ref as u, computed as f, unref as g, watch as m, shallowRef as re, onMounted as ie, onBeforeUnmount as ue, provide as se, isVNode as ce } from "vue";
-import { throttle as N } from "lodash-es";
-import { useResizeObserver as ve } from "@vueuse/core";
-import { isString as fe } from "@vft/utils";
-import { debugWarn as me } from "../../utils/error.js";
-import "../config-provider/hooks/use-global-config.js";
-import { CHANGE_EVENT as he } from "../../constants/event.js";
-import { flattedChildren as de } from "../../utils/vue/vnode.js";
-import "../../hooks/use-model-toggle/index.js";
-import { useOrderedChildren as Ie } from "../../hooks/use-ordered-children/index.js";
-import "@popperjs/core";
-import "../../hooks/use-z-index/index.js";
-import { carouselContextKey as ge, CAROUSEL_ITEM_NAME as H } from "./constants.js";
-const L = 300, _e = (t, O, M) => {
+import { getCurrentInstance, useSlots, ref, computed, unref, watch, shallowRef, onMounted, onBeforeUnmount, provide, isVNode } from "vue";
+import { throttle } from "lodash-es";
+import { useResizeObserver } from "@vueuse/core";
+import { isString } from "@vft/utils";
+import { carouselContextKey, CAROUSEL_ITEM_NAME } from "./constants.js";
+import { useOrderedChildren } from "../../hooks/use-ordered-children/index.js";
+import { debugWarn } from "../../utils/error.js";
+import { CHANGE_EVENT } from "../../constants/event.js";
+import { flattedChildren } from "../../utils/vue/vnode.js";
+const THROTTLE_TIME = 300;
+const useCarousel = (props, emit, componentName) => {
   const {
-    children: o,
-    addChild: _,
-    removeChild: R,
-    ChildrenSorter: z
-  } = Ie(
-    ae(),
-    H
-  ), B = oe(), l = u(-1), s = u(null), S = u(!1), h = u(), w = u(0), c = u(!0), P = f(
-    () => t.arrow !== "never" && !g(v)
-  ), V = f(() => o.value.some(
-    (e) => e.props.label && e.props.label?.toString().length > 0
-  )), C = f(() => t.type === "card"), v = f(() => t.direction === "vertical"), k = f(() => t.height !== "auto" ? {
-    height: t.height
-  } : {
-    height: `${w.value}px`,
-    overflow: "hidden"
-  }), U = N(
-    (e) => {
-      i(e);
+    children: items,
+    addChild: addItem,
+    removeChild: removeItem,
+    ChildrenSorter: ItemsSorter
+  } = useOrderedChildren(
+    getCurrentInstance(),
+    CAROUSEL_ITEM_NAME
+  );
+  const slots = useSlots();
+  const activeIndex = ref(-1);
+  const timer = ref(null);
+  const hover = ref(false);
+  const root = ref();
+  const containerHeight = ref(0);
+  const isItemsTwoLength = ref(true);
+  const arrowDisplay = computed(
+    () => props.arrow !== "never" && !unref(isVertical)
+  );
+  const hasLabel = computed(() => {
+    return items.value.some(
+      (item) => item.props.label && item.props.label?.toString().length > 0
+    );
+  });
+  const isCardType = computed(() => props.type === "card");
+  const isVertical = computed(() => props.direction === "vertical");
+  const containerStyle = computed(() => {
+    if (props.height !== "auto") {
+      return {
+        height: props.height
+      };
+    }
+    return {
+      height: `${containerHeight.value}px`,
+      overflow: "hidden"
+    };
+  });
+  const throttledArrowClick = throttle(
+    (index) => {
+      setActiveItem(index);
     },
-    L,
-    { trailing: !0 }
-  ), D = N((e) => {
-    Q(e);
-  }, L), F = (e) => c.value ? l.value <= 1 ? e <= 1 : e > 1 : !0;
-  function d() {
-    s.value && (clearInterval(s.value), s.value = null);
-  }
-  function I() {
-    t.interval <= 0 || !t.autoplay || s.value || (s.value = setInterval(() => G(), t.interval));
-  }
-  const G = () => {
-    l.value < o.value.length - 1 ? l.value = l.value + 1 : t.loop && (l.value = 0);
+    THROTTLE_TIME,
+    { trailing: true }
+  );
+  const throttledIndicatorHover = throttle((index) => {
+    handleIndicatorHover(index);
+  }, THROTTLE_TIME);
+  const isTwoLengthShow = (index) => {
+    if (!isItemsTwoLength.value) return true;
+    return activeIndex.value <= 1 ? index <= 1 : index > 1;
+  };
+  function pauseTimer() {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  }
+  function startTimer() {
+    if (props.interval <= 0 || !props.autoplay || timer.value) return;
+    timer.value = setInterval(() => playSlides(), props.interval);
+  }
+  const playSlides = () => {
+    if (activeIndex.value < items.value.length - 1) {
+      activeIndex.value = activeIndex.value + 1;
+    } else if (props.loop) {
+      activeIndex.value = 0;
+    }
   };
-  function i(e) {
-    if (fe(e)) {
-      const r = o.value.filter(
-        (b) => b.props.name === e
+  function setActiveItem(index) {
+    if (isString(index)) {
+      const filteredItems = items.value.filter(
+        (item) => item.props.name === index
       );
-      r.length > 0 && (e = o.value.indexOf(r[0]));
+      if (filteredItems.length > 0) {
+        index = items.value.indexOf(filteredItems[0]);
+      }
     }
-    if (e = Number(e), Number.isNaN(e) || e !== Math.floor(e)) {
-      me(M, "index must be integer.");
+    index = Number(index);
+    if (Number.isNaN(index) || index !== Math.floor(index)) {
+      debugWarn(componentName, "index must be integer.");
       return;
     }
-    const n = o.value.length, a = l.value;
-    e < 0 ? l.value = t.loop ? n - 1 : 0 : e >= n ? l.value = t.loop ? 0 : n - 1 : l.value = e, a === l.value && E(a), y();
+    const itemCount = items.value.length;
+    const oldIndex = activeIndex.value;
+    if (index < 0) {
+      activeIndex.value = props.loop ? itemCount - 1 : 0;
+    } else if (index >= itemCount) {
+      activeIndex.value = props.loop ? 0 : itemCount - 1;
+    } else {
+      activeIndex.value = index;
+    }
+    if (oldIndex === activeIndex.value) {
+      resetItemPosition(oldIndex);
+    }
+    resetTimer();
   }
-  function E(e) {
-    o.value.forEach((n, a) => {
-      n.translateItem(a, l.value, e);
+  function resetItemPosition(oldIndex) {
+    items.value.forEach((item, index) => {
+      item.translateItem(index, activeIndex.value, oldIndex);
     });
   }
-  function K(e, n) {
-    const a = g(o), r = a.length;
-    if (r === 0 || !e.states.inStage) return !1;
-    const b = n + 1, p = n - 1, A = r - 1, ee = a[A].states.active, te = a[0].states.active, ne = a[b]?.states?.active, le = a[p]?.states?.active;
-    return n === A && te || ne ? "left" : n === 0 && ee || le ? "right" : !1;
+  function itemInStage(item, index) {
+    const _items = unref(items);
+    const itemCount = _items.length;
+    if (itemCount === 0 || !item.states.inStage) return false;
+    const nextItemIndex = index + 1;
+    const prevItemIndex = index - 1;
+    const lastItemIndex = itemCount - 1;
+    const isLastItemActive = _items[lastItemIndex].states.active;
+    const isFirstItemActive = _items[0].states.active;
+    const isNextItemActive = _items[nextItemIndex]?.states?.active;
+    const isPrevItemActive = _items[prevItemIndex]?.states?.active;
+    if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
+      return "left";
+    } else if (index === 0 && isLastItemActive || isPrevItemActive) {
+      return "right";
+    }
+    return false;
   }
-  function W() {
-    S.value = !0, t.pauseOnHover && d();
+  function handleMouseEnter() {
+    hover.value = true;
+    if (props.pauseOnHover) {
+      pauseTimer();
+    }
   }
-  function $() {
-    S.value = !1, I();
+  function handleMouseLeave() {
+    hover.value = false;
+    startTimer();
   }
-  function j(e) {
-    g(v) || o.value.forEach((n, a) => {
-      e === K(n, a) && (n.states.hover = !0);
+  function handleButtonEnter(arrow) {
+    if (unref(isVertical)) return;
+    items.value.forEach((item, index) => {
+      if (arrow === itemInStage(item, index)) {
+        item.states.hover = true;
+      }
     });
   }
-  function q() {
-    g(v) || o.value.forEach((e) => {
-      e.states.hover = !1;
+  function handleButtonLeave() {
+    if (unref(isVertical)) return;
+    items.value.forEach((item) => {
+      item.states.hover = false;
     });
   }
-  function J(e) {
-    l.value = e;
+  function handleIndicatorClick(index) {
+    activeIndex.value = index;
   }
-  function Q(e) {
-    t.trigger === "hover" && e !== l.value && (l.value = e);
+  function handleIndicatorHover(index) {
+    if (props.trigger === "hover" && index !== activeIndex.value) {
+      activeIndex.value = index;
+    }
   }
-  function X() {
-    i(l.value - 1);
+  function prev() {
+    setActiveItem(activeIndex.value - 1);
   }
-  function Y() {
-    i(l.value + 1);
+  function next() {
+    setActiveItem(activeIndex.value + 1);
   }
-  function y() {
-    d(), t.pauseOnHover || I();
+  function resetTimer() {
+    pauseTimer();
+    if (!props.pauseOnHover) startTimer();
   }
-  function Z(e) {
-    t.height === "auto" && (w.value = e);
+  function setContainerHeight(height) {
+    if (props.height !== "auto") return;
+    containerHeight.value = height;
   }
-  function x() {
-    const e = B.default?.();
-    if (!e) return null;
-    const a = de(e).filter((r) => ce(r) && r.type.name === H);
-    return a?.length === 2 && t.loop && !C.value ? (c.value = !0, a) : (c.value = !1, null);
+  function PlaceholderItem() {
+    const defaultSlots = slots.default?.();
+    if (!defaultSlots) return null;
+    const flatSlots = flattedChildren(defaultSlots);
+    const normalizeSlots = flatSlots.filter((slot) => {
+      return isVNode(slot) && slot.type.name === CAROUSEL_ITEM_NAME;
+    });
+    if (normalizeSlots?.length === 2 && props.loop && !isCardType.value) {
+      isItemsTwoLength.value = true;
+      return normalizeSlots;
+    }
+    isItemsTwoLength.value = false;
+    return null;
   }
-  m(
-    () => l.value,
-    (e, n) => {
-      E(n), c.value && (e = e % 2, n = n % 2), n > -1 && O(he, e, n);
+  watch(
+    () => activeIndex.value,
+    (current, prev2) => {
+      resetItemPosition(prev2);
+      if (isItemsTwoLength.value) {
+        current = current % 2;
+        prev2 = prev2 % 2;
+      }
+      if (prev2 > -1) {
+        emit(CHANGE_EVENT, current, prev2);
+      }
     }
-  ), m(
-    () => t.autoplay,
-    (e) => {
-      e ? I() : d();
+  );
+  watch(
+    () => props.autoplay,
+    (autoplay) => {
+      autoplay ? startTimer() : pauseTimer();
     }
-  ), m(
-    () => t.loop,
+  );
+  watch(
+    () => props.loop,
     () => {
-      i(l.value);
+      setActiveItem(activeIndex.value);
     }
-  ), m(
-    () => t.interval,
+  );
+  watch(
+    () => props.interval,
     () => {
-      y();
+      resetTimer();
     }
   );
-  const T = re();
-  return ie(() => {
-    m(
-      () => o.value,
+  const resizeObserver = shallowRef();
+  onMounted(() => {
+    watch(
+      () => items.value,
       () => {
-        o.value.length > 0 && i(t.initialIndex);
+        if (items.value.length > 0) setActiveItem(props.initialIndex);
       },
       {
-        immediate: !0
+        immediate: true
       }
-    ), T.value = ve(h.value, () => {
-      E();
-    }), I();
-  }), ue(() => {
-    d(), h.value && T.value && T.value.stop();
-  }), se(ge, {
-    root: h,
-    isCardType: C,
-    isVertical: v,
-    items: o,
-    loop: t.loop,
-    cardScale: t.cardScale,
-    addItem: _,
-    removeItem: R,
-    setActiveItem: i,
-    setContainerHeight: Z
-  }), {
-    root: h,
-    activeIndex: l,
-    arrowDisplay: P,
-    hasLabel: V,
-    hover: S,
-    isCardType: C,
-    items: o,
-    isVertical: v,
-    containerStyle: k,
-    isItemsTwoLength: c,
-    handleButtonEnter: j,
-    handleButtonLeave: q,
-    handleIndicatorClick: J,
-    handleMouseEnter: W,
-    handleMouseLeave: $,
-    setActiveItem: i,
-    prev: X,
-    next: Y,
-    PlaceholderItem: x,
-    isTwoLengthShow: F,
-    ItemsSorter: z,
-    throttledArrowClick: U,
-    throttledIndicatorHover: D
+    );
+    resizeObserver.value = useResizeObserver(root.value, () => {
+      resetItemPosition();
+    });
+    startTimer();
+  });
+  onBeforeUnmount(() => {
+    pauseTimer();
+    if (root.value && resizeObserver.value) resizeObserver.value.stop();
+  });
+  provide(carouselContextKey, {
+    root,
+    isCardType,
+    isVertical,
+    items,
+    loop: props.loop,
+    cardScale: props.cardScale,
+    addItem,
+    removeItem,
+    setActiveItem,
+    setContainerHeight
+  });
+  return {
+    root,
+    activeIndex,
+    arrowDisplay,
+    hasLabel,
+    hover,
+    isCardType,
+    items,
+    isVertical,
+    containerStyle,
+    isItemsTwoLength,
+    handleButtonEnter,
+    handleButtonLeave,
+    handleIndicatorClick,
+    handleMouseEnter,
+    handleMouseLeave,
+    setActiveItem,
+    prev,
+    next,
+    PlaceholderItem,
+    isTwoLengthShow,
+    ItemsSorter,
+    throttledArrowClick,
+    throttledIndicatorHover
   };
 };
 export {
-  _e as useCarousel
+  useCarousel
 };

package/es/components/carousel-item/style/css.js

@@ -1,2 +1 @@
-import "vft/theme-style/base.css";
-import "vft/theme-style/vft-carousel-item.css";
+

package/es/components/carousel-item/style/index.js

@@ -1,2 +1 @@
-import "vft/theme-style/src/base.scss";
-import "vft/theme-style/src/carousel-item.scss";
+

package/es/components/cascader/cascader.js

@@ -1,23 +1,19 @@
-import { placements as l } from "@popperjs/core";
-import "../cascader-panel/index.js";
-import "@vueuse/core";
-import { isBoolean as r } from "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import { CHANGE_EVENT as p, UPDATE_MODEL_EVENT as n } from "../../constants/event.js";
-import { componentSizes as i } from "../../constants/size.js";
-import "vue";
-import { buildProps as s, definePropType as t } from "../../utils/vue/props/runtime.js";
-import { useEmptyValuesProps as u } from "../../hooks/use-empty-values/index.js";
-import { CommonProps as f } from "../cascader-panel/config.js";
-const v = s({
-  ...f,
+import { placements } from "@popperjs/core";
+import { isBoolean } from "@vft/utils";
+import { useEmptyValuesProps } from "../../hooks/use-empty-values/index.js";
+import { CommonProps } from "../cascader-panel/config.js";
+import { buildProps, definePropType } from "../../utils/vue/props/runtime.js";
+import { componentSizes } from "../../constants/size.js";
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../constants/event.js";
+const cascaderProps = buildProps({
+  ...CommonProps,
   /**
    * @description size of input
    */
   size: {
     type: String,
-    values: i,
-    required: !1
+    values: componentSizes,
+    required: false
   },
   /**
    * @description placeholder of input
@@ -39,10 +35,10 @@ const v = s({
    * @description customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.
    */
   filterMethod: {
-    type: t(
+    type: definePropType(
       Function
     ),
-    default: (e, a) => e.text.includes(a)
+    default: (node, keyword) => node.text.includes(keyword)
   },
   /**
    * @description option label separator
@@ -56,7 +52,7 @@ const v = s({
    */
   showAllLevels: {
     type: Boolean,
-    default: !0
+    default: true
   },
   /**
    * @description whether to collapse tags in multiple selection mode
@@ -90,22 +86,22 @@ const v = s({
    * @description hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted
    */
   beforeFilter: {
-    type: t(Function),
-    default: () => !0
+    type: definePropType(Function),
+    default: () => true
   },
   /**
    * @description position of dropdown
    */
   placement: {
-    type: t(String),
-    values: l,
+    type: definePropType(String),
+    values: placements,
     default: "bottom-start"
   },
   /**
    * @description list of possible positions for dropdown
    */
   fallbackPlacements: {
-    type: t(Array),
+    type: definePropType(Array),
     default: ["bottom-start", "bottom", "top-start", "top", "right", "left"]
   },
   /**
@@ -120,7 +116,7 @@ const v = s({
    */
   teleported: {
     type: Boolean,
-    default: !0
+    default: true
   },
   /**
    * @description tooltip theme, built-in theme: `dark` / `light`
@@ -146,14 +142,14 @@ const v = s({
    */
   validateEvent: {
     type: Boolean,
-    default: !0
+    default: true
   },
   /**
    * @description when dropdown is inactive and `persistent` is `false`, dropdown will be destroyed
    */
   persistent: {
     type: Boolean,
-    default: !0
+    default: true
   },
   /**
    * @description Use `parent` when you want things tidy (like "Entire Collection" instead of listing 100 items)
@@ -173,20 +169,22 @@ const v = s({
    */
   showPrefix: {
     type: Boolean,
-    default: !0
-  },
-  ...u
-}), o = (e) => !0, C = {
-  [n]: o,
-  [p]: o,
-  focus: (e) => e instanceof FocusEvent,
-  blur: (e) => e instanceof FocusEvent,
-  clear: () => !0,
-  visibleChange: (e) => r(e),
-  expandChange: (e) => !!e,
-  removeTag: (e) => !!e
+    default: true
+  },
+  ...useEmptyValuesProps
+});
+const emitChangeFn = (value) => true;
+const cascaderEmits = {
+  [UPDATE_MODEL_EVENT]: emitChangeFn,
+  [CHANGE_EVENT]: emitChangeFn,
+  focus: (evt) => evt instanceof FocusEvent,
+  blur: (evt) => evt instanceof FocusEvent,
+  clear: () => true,
+  visibleChange: (val) => isBoolean(val),
+  expandChange: (val) => !!val,
+  removeTag: (val) => !!val
 };
 export {
-  C as cascaderEmits,
-  v as cascaderProps
+  cascaderEmits,
+  cascaderProps
 };

package/es/components/cascader/cascader.vue.js

@@ -1,4 +1,4 @@
-import f from "./cascader.vue2.js";
+import _sfc_main from "./cascader.vue2.js";
 export {
-  f as default
+  _sfc_main as default
 };