@varlet/ui 2.18.3-alpha.1699111361708 → 2.18.3

package/es/date-picker/src/year-picker-panel.mjs

@@ -1,42 +1,120 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import dayjs from "dayjs/esm";
-import { defineComponent, computed, ref } from "vue";
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  reactive
+} from "vue";
 import { toNumber } from "@varlet/shared";
+import VarButton from "../../button/index.mjs";
+import PanelHeader from "./panel-header.mjs";
 import { createNamespace } from "../../utils/components.mjs";
 import { onSmartMounted } from "@varlet/use";
 const { n, classes } = createNamespace("year-picker");
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["onClick"];
+const { n: nDate } = createNamespace("date-picker");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, normalizeClass as _normalizeClass, Transition as _Transition } from "vue";
 function __render__(_ctx, _cache) {
-  return _openBlock(), _createElementBlock(
-    "ul",
-    {
-      ref: "panel",
-      class: _normalizeClass(_ctx.n())
-    },
-    [
-      (_openBlock(true), _createElementBlock(
-        _Fragment,
-        null,
-        _renderList(_ctx.yearList, (year) => {
-          return _openBlock(), _createElementBlock("li", {
-            key: year,
-            class: _normalizeClass(_ctx.classes(_ctx.n("item"), [year === _ctx.toNumber(_ctx.preview), _ctx.n("item--active")])),
-            style: _normalizeStyle({ color: year === _ctx.toNumber(_ctx.preview) ? _ctx.componentProps.color : "" }),
-            onClick: ($event) => _ctx.chooseYear(year)
-          }, _toDisplayString(year), 15, _hoisted_1);
-        }),
-        128
-        /* KEYED_FRAGMENT */
-      ))
-    ],
-    2
-    /* CLASS */
-  );
+  const _component_panel_header = _resolveComponent("panel-header");
+  const _component_var_sticky = _resolveComponent("var-sticky");
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock("div", null, [
+    _createVNode(_component_var_sticky, { "css-mode": "" }, {
+      default: _withCtx(() => [
+        _createVNode(_component_panel_header, {
+          ref: "headerEl",
+          type: "year",
+          date: {
+            previewYear: `${_ctx.yearList[0]} ~ ${_ctx.yearList[_ctx.yearList.length - 1]}`
+          },
+          disabled: _ctx.panelBtnDisabled,
+          onCheckDate: _ctx.checkDate
+        }, null, 8, ["date", "disabled", "onCheckDate"])
+      ]),
+      _: 1
+      /* STABLE */
+    }),
+    _createVNode(_Transition, {
+      name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
+    }, {
+      default: _withCtx(() => [
+        (_openBlock(), _createElementBlock(
+          "ul",
+          {
+            ref: "panel",
+            class: _normalizeClass(_ctx.n()),
+            key: _ctx.panelKey
+          },
+          [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.yearList, (year) => {
+                return _openBlock(), _createElementBlock("li", { key: year }, [
+                  _createVNode(_component_var_button, _mergeProps({
+                    type: "primary",
+                    "var-year-picker-cover": "",
+                    ripple: false,
+                    elevation: _ctx.componentProps.buttonElevation
+                  }, __spreadValues({}, _ctx.buttonProps(`${year}`)), {
+                    onClick: (event) => _ctx.chooseYear(year, event)
+                  }), {
+                    default: _withCtx(() => [
+                      _createTextVNode(
+                        _toDisplayString(year),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1040, ["elevation", "onClick"])
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          2
+          /* CLASS */
+        ))
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["name"])
+  ]);
 }
 const __sfc__ = defineComponent({
   name: "YearPickerPanel",
+  components: {
+    VarButton,
+    PanelHeader
+  },
   props: {
+    choose: {
+      type: Object,
+      required: true
+    },
+    current: {
+      type: String,
+      required: true
+    },
     preview: {
       type: String
     },
@@ -47,52 +125,171 @@ const __sfc__ = defineComponent({
   },
   emits: ["choose-year"],
   setup(props, { emit }) {
+    const [currentYear] = props.current.split("-");
     const panel = ref();
+    const headerEl = ref(null);
+    const reverse = ref(false);
+    const panelKey = ref(0);
+    const page = ref(0);
+    const panelBtnDisabled = reactive({
+      left: false,
+      right: false
+    });
     const yearList = computed(() => {
       const list = [];
-      const {
-        preview,
-        componentProps: { max, min }
-      } = props;
-      if (!preview)
+      if (!props.preview)
         return list;
-      let yearRange = [toNumber(preview) + 100, toNumber(preview) - 100];
-      if (max) {
-        const formatMax = dayjs(max).format("YYYY-MM-D");
-        const year = toNumber(formatMax.split("-")[0]);
-        if (year < yearRange[0] && year > yearRange[1])
-          yearRange = [year, yearRange[1]];
-        if (year <= yearRange[1])
-          return [year];
-      }
-      if (min) {
-        const formatMin = dayjs(min).format("YYYY-MM-D");
-        const year = toNumber(formatMin.split("-")[0]);
-        if (year < yearRange[0] && year > yearRange[1])
-          yearRange = [yearRange[0], year];
-        if (year >= yearRange[0])
-          return [year];
-      }
-      for (let i = yearRange[0]; i >= yearRange[1]; i--) {
+      let startYear = Math.floor(toNumber(props.preview) / 100 + page.value) * 100;
+      startYear = startYear < 0 ? 0 : startYear;
+      const yearRange = [startYear, startYear + 100];
+      for (let i = yearRange[0]; i < yearRange[1]; i++) {
         list.push(i);
       }
       return list;
     });
-    const chooseYear = (year) => {
+    const shouldChoose = (val) => {
+      const {
+        choose: { chooseMonths, chooseDays, chooseYears, chooseRangeYear },
+        componentProps: { type, range }
+      } = props;
+      if (range) {
+        if (!chooseRangeYear.length)
+          return false;
+        const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeYear[1]), "year");
+        const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeYear[0]), "year");
+        return isBeforeMax && isAfterMin;
+      }
+      if (type === "year")
+        return chooseYears.includes(val);
+      if (type === "month")
+        return chooseMonths.some((value) => value.includes(val));
+      return chooseDays.some((value) => value.includes(val));
+    };
+    const inRange = (year) => {
+      const {
+        componentProps: { min, max }
+      } = props;
+      let isBeforeMax = true;
+      let isAfterMin = true;
+      if (max)
+        isBeforeMax = dayjs(year).isSameOrBefore(dayjs(max), "year");
+      if (min)
+        isAfterMin = dayjs(year).isSameOrAfter(dayjs(min), "year");
+      return isBeforeMax && isAfterMin;
+    };
+    const buttonProps = (year) => {
+      const {
+        choose: { chooseYear: chooseYear2 },
+        componentProps: { allowedDates, color, multiple, range }
+      } = props;
+      const yearExist = () => {
+        if (range || multiple)
+          return shouldChoose(year);
+        return chooseYear2 === year;
+      };
+      const computeDisabled = () => {
+        if (!inRange(year))
+          return true;
+        if (!allowedDates)
+          return false;
+        return !allowedDates(year);
+      };
+      const disabled = computeDisabled();
+      const computeText = () => {
+        if (disabled)
+          return true;
+        if (range || multiple)
+          return !shouldChoose(year);
+        return chooseYear2 !== year;
+      };
+      const computeOutline = () => {
+        if (!(currentYear === year && props.componentProps.showCurrent))
+          return false;
+        if ((range || multiple) && disabled)
+          return true;
+        if (range || multiple)
+          return !shouldChoose(year);
+        return chooseYear2 !== currentYear;
+      };
+      const textColorOrCover = () => {
+        if (disabled)
+          return "";
+        if (computeOutline())
+          return color != null ? color : "";
+        if (yearExist())
+          return "";
+        return `${nDate()}-color-cover`;
+      };
+      const isCover = textColorOrCover().startsWith(nDate());
+      return {
+        outline: computeOutline(),
+        text: computeText(),
+        color: !computeText() ? color : "",
+        textColor: isCover ? "" : textColorOrCover(),
+        [`${nDate()}-color-cover`]: isCover,
+        class: classes(n("button"), [disabled, n("button--disabled")]),
+        disabled
+      };
+    };
+    const chooseYear = (year, event) => {
+      const buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains(n("button--disabled")))
+        return;
       emit("choose-year", year);
     };
-    onSmartMounted(() => {
-      const activeEl = panel.value.querySelector(`.${n("item--active")}`);
+    const scrollToView = () => {
+      var _a;
+      const activeEl = (_a = panel.value.querySelector(".var-button--primary")) != null ? _a : panel.value.querySelector(".var-button--outline");
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: "center"
       });
-    });
+    };
+    const checkDate = (checkType) => {
+      reverse.value = checkType === "prev";
+      panelKey.value += checkType === "prev" ? -1 : 1;
+      page.value += checkType === "prev" ? -1 : 1;
+    };
+    const forwardRef = (checkType) => {
+      headerEl.value.checkDate(checkType);
+    };
+    onSmartMounted(scrollToView);
+    watch(
+      () => props.preview,
+      () => {
+        page.value = 0;
+      }
+    );
+    watch(
+      yearList,
+      (list) => {
+        const {
+          componentProps: { min, max }
+        } = props;
+        if (max)
+          panelBtnDisabled.right = !dayjs(`${toNumber(list[list.length - 1])}`).isSameOrBefore(dayjs(max), "year");
+        if (min)
+          panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min), "year");
+        if (toNumber(list[0] <= 0))
+          panelBtnDisabled.left = false;
+      },
+      {
+        immediate: true
+      }
+    );
     return {
       n,
       classes,
+      buttonProps,
       panel,
+      headerEl,
       yearList,
+      reverse,
+      panelKey,
+      panelBtnDisabled,
+      nDate,
+      checkDate,
       chooseYear,
+      forwardRef,
       toNumber
     };
   }

package/es/date-picker/style/index.mjs

@@ -2,6 +2,7 @@ import '../../styles/common.css'
 import '../../styles/elevation.css'
 import '../../ripple/ripple.css'
 import '../../button/button.css'
+import '../../sticky/sticky.css'
 import '../../icon/icon.css'
 import '../date-picker.css'
 import '../DatePickerSfc.css'

package/es/image-preview/ImagePreview.mjs

@@ -13,6 +13,7 @@ const EVENT_DELAY = 200;
 const TAP_DELAY = 350;
 const ANIMATION_DURATION = 200;
 const LONG_PRESS_DELAY = 500;
+const BASE_RATIO = 1;
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
 const _hoisted_1 = ["onTouchstart"];
@@ -178,8 +179,8 @@ const __sfc__ = defineComponent({
       },
       { immediate: true }
     );
-    function zoomIn() {
-      scale.value = toNumber(props2.zoom);
+    function zoomIn(ratio) {
+      scale.value = toNumber(ratio);
       canSwipe.value = false;
       targets.prev = null;
       window.setTimeout(() => {
@@ -237,7 +238,7 @@ const __sfc__ = defineComponent({
         call(props2.onLongPress, idx);
       }, LONG_PRESS_DELAY);
       if (isDoubleTouch(target)) {
-        scale.value > 1 ? zoomOut() : zoomIn();
+        scale.value > BASE_RATIO ? zoomOut() : zoomIn(props2.zoom);
         return;
       }
       startTouch(event);
@@ -255,20 +256,20 @@ const __sfc__ = defineComponent({
       };
     }
     function getLimitX(target) {
-      const { zoom, imageRadio, rootRadio, width, height } = getZoom(target);
+      const { zoom: zoom2, imageRadio, rootRadio, width, height } = getZoom(target);
       if (!imageRadio) {
         return 0;
       }
       const displayWidth = imageRadio > rootRadio ? height / imageRadio : width;
-      return Math.max(0, (zoom * displayWidth - width) / 2) / zoom;
+      return Math.max(0, (zoom2 * displayWidth - width) / 2) / zoom2;
     }
     function getLimitY(target) {
-      const { zoom, imageRadio, rootRadio, width, height } = getZoom(target);
+      const { zoom: zoom2, imageRadio, rootRadio, width, height } = getZoom(target);
       if (!imageRadio) {
         return 0;
       }
       const displayHeight = imageRadio > rootRadio ? height : width * imageRadio;
-      return Math.max(0, (zoom * displayHeight - height) / 2) / zoom;
+      return Math.max(0, (zoom2 * displayHeight - height) / 2) / zoom2;
     }
     function handleTouchmove(event) {
       if (!targets.prev) {
@@ -279,7 +280,7 @@ const __sfc__ = defineComponent({
       if (distance.value > DISTANCE_OFFSET) {
         window.clearTimeout(longPressRunner);
       }
-      if (scale.value > 1) {
+      if (scale.value > BASE_RATIO) {
         const limitX = getLimitX(target);
         const limitY = getLimitY(target);
         translateX.value = clamp(translateX.value + moveX.value, -limitX, limitX);
@@ -288,13 +289,18 @@ const __sfc__ = defineComponent({
       targets.prev = target;
     }
     function close() {
-      if (scale.value > 1) {
+      if (scale.value > BASE_RATIO) {
         zoomOut();
         setTimeout(() => call(props2["onUpdate:show"], false), ANIMATION_DURATION);
         return;
       }
       call(props2["onUpdate:show"], false);
     }
+    function preventImageDefault(event) {
+      if (isPreventDefault.value) {
+        preventDefault(event);
+      }
+    }
     function prev(options) {
       var _a;
       (_a = swipeRef.value) == null ? void 0 : _a.prev(options);
@@ -307,8 +313,8 @@ const __sfc__ = defineComponent({
       var _a;
       (_a = swipeRef.value) == null ? void 0 : _a.to(idx, options);
     }
-    function preventImageDefault(event) {
-      props2.imagePreventDefault && props2.show && preventDefault(event);
+    function zoom(ratio) {
+      ratio <= BASE_RATIO ? zoomOut() : zoomIn(ratio);
     }
     return {
       swipeRef,
@@ -330,7 +336,8 @@ const __sfc__ = defineComponent({
       close,
       prev,
       next,
-      to
+      to,
+      zoom
     };
   }
 });

package/es/index.bundle.mjs

@@ -259,7 +259,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.18.3-alpha.1699111361708'
+const version = '2.18.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -172,7 +172,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.18.3-alpha.1699111361708'
+const version = '2.18.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)