x-next 1.0.0 → 1.1.0

package/dist/es/components/grid/GridItem.vue2.js

@@ -0,0 +1,85 @@
+import { defineComponent as j, ref as G, inject as p, computed as o, toRefs as N, watchEffect as w, onUnmounted as O } from "vue";
+import { useIndex as R } from "../../_hooks/use-index.js";
+import { GridContextInjectionKey as k, GridDataCollectorInjectionKey as D } from "./context.js";
+import { useResponsiveState as i } from "./hook/use-responsive-state.js";
+import { resolveItemData as K } from "./utils/index.js";
+import { getClassNameMixin as L } from "../../_utils/config.js";
+const q = j({
+  name: "GridItem",
+  props: {
+    /**
+     * @zh 跨越的格数
+     * @en Number of grids spanned
+     */
+    span: {
+      type: [Number, Object],
+      default: 1
+    },
+    /**
+     * @zh 左侧的间隔格数
+     * @en Number of grids on the left
+     */
+    offset: {
+      type: [Number, Object],
+      default: 0
+    },
+    /**
+     * @zh 是否是后缀元素
+     * @en Is it a suffix element
+     */
+    suffix: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(r) {
+    const u = L("grid--item"), c = G(), { innerIndex: s } = R({
+      itemRef: c,
+      selector: `.${u.block}`
+    }), t = p(k, {
+      overflow: !1,
+      displayIndexList: [],
+      cols: 24,
+      colGap: 0
+    }), n = p(D), m = o(() => {
+      var e;
+      return (e = t == null ? void 0 : t.displayIndexList) == null ? void 0 : e.includes(s.value);
+    }), { span: v, offset: d } = N(r), x = i(v, 1), y = i(d, 0), f = o(
+      () => K(t.cols, {
+        ...r,
+        span: x.value,
+        offset: y.value
+      })
+    ), I = o(() => [u.block]), $ = o(() => {
+      const { offset: e, span: a } = f.value, { colGap: l } = t;
+      return e > 0 ? {
+        "margin-left": `calc((${`(100% - ${l * (a - 1)}px) / ${a}`} * ${e}) + ${l * e}px)`
+      } : {};
+    }), b = o(() => {
+      const { suffix: e, span: a } = f.value, { cols: l } = t;
+      return e ? `${l - a + 1}` : `span ${a}`;
+    }), S = o(() => {
+      const { span: e } = f.value;
+      return c.value ? [
+        {
+          "grid-column": `${b.value} / span ${e}`
+        },
+        $.value,
+        !m.value || e === 0 ? { display: "none" } : {}
+      ] : [];
+    });
+    return w(() => {
+      s.value !== -1 && (n == null || n.collectItemData(s.value, f.value));
+    }), O(() => {
+      s.value !== -1 && (n == null || n.removeItemData(s.value));
+    }), {
+      classNames: I,
+      style: S,
+      domRef: c,
+      overflow: o(() => t.overflow)
+    };
+  }
+});
+export {
+  q as default
+};

package/dist/es/components/grid/Row.vue.js

@@ -0,0 +1,15 @@
+import o from "./Row.vue2.js";
+import { openBlock as r, createElementBlock as s, normalizeStyle as t, normalizeClass as l, renderSlot as a } from "vue";
+import n from "../../_virtual/_plugin-vue_export-helper.js";
+function m(e, c, i, p, f, d) {
+  return r(), s("div", {
+    class: l(e.classNames),
+    style: t(e.styles)
+  }, [
+    a(e.$slots, "default")
+  ], 6);
+}
+const y = /* @__PURE__ */ n(o, [["render", m]]);
+export {
+  y as default
+};

package/dist/es/components/grid/Row.vue2.js

@@ -0,0 +1,84 @@
+import { defineComponent as w, toRefs as $, computed as r, provide as j, reactive as A } from "vue";
+import { RowContextInjectionKey as R } from "./context.js";
+import { useResponsiveState as m } from "./hook/use-responsive-state.js";
+import { getClassNameMixin as N } from "../../_utils/config.js";
+const G = w({
+  name: "Row",
+  props: {
+    /**
+     * @zh 栅格间隔，单位是`px` 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12}，传入数组 [ 水平间距， 垂直间距 ] 来设置两个方向。
+     * @en Grid interval in `px`. Pass in the responsive object like {xs: 4, sm: 6, md: 12}. Pass in the array [horizontal spacing, vertical spacing] to set two directions.
+     */
+    gutter: {
+      type: [Number, Object, Array],
+      default: 0
+    },
+    /**
+     * @zh 水平对齐方式 (`justify-content`)
+     * @en Horizontal alignment (`justify-content`)
+     */
+    justify: {
+      type: String,
+      default: "start"
+    },
+    /**
+     * @zh 竖直对齐方式 ( `align-items` )
+     * @en Vertical alignment (`align-items`)
+     */
+    align: {
+      type: String,
+      default: "start"
+    },
+    /**
+     * @zh 开启这个选项`Row`和`Col`都会被当作div而不会附带任何Grid相关的类和样式
+     * @en Enabling this option `Row` and `Col` will be treated as divs without any Grid-related classes and styles
+     */
+    div: {
+      type: Boolean
+    },
+    /**
+     * @zh `Col` 是否支持换行
+     * @en Whether `Col` can wrap onto multiple lines
+     * @version 2.13.0
+     */
+    wrap: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(c) {
+    const { gutter: t, align: s, justify: p, div: o, wrap: v } = $(c), a = N("row"), f = r(() => ({
+      [a.block]: !o.value,
+      [a.modifier("nowrap")]: !v.value,
+      [a.modifier(`align-${s.value}`)]: s.value,
+      [a.modifier(`justify-${p.value}`)]: p.value
+    })), g = r(
+      () => Array.isArray(t.value) ? t.value[0] : t.value
+    ), y = r(
+      () => Array.isArray(t.value) ? t.value[1] : 0
+    ), i = m(g, 0), u = m(y, 0), d = r(() => {
+      const e = {};
+      if ((i.value || u.value) && !o.value) {
+        const n = -i.value / 2, l = -u.value / 2;
+        n && (e.marginLeft = `${n}px`, e.marginRight = `${n}px`), l && (e.marginTop = `${l}px`, e.marginBottom = `${l}px`);
+      }
+      return e;
+    }), x = r(() => [
+      i.value,
+      u.value
+    ]);
+    return j(
+      R,
+      A({
+        gutter: x,
+        div: o
+      })
+    ), {
+      classNames: f,
+      styles: d
+    };
+  }
+});
+export {
+  G as default
+};

package/dist/es/components/grid/context.js

@@ -0,0 +1,10 @@
+const o = Symbol(
+  "RowContextInjectionKey"
+), t = Symbol(
+  "GridContextInjectionKey"
+), e = Symbol("GridDataCollectorInjectionKey");
+export {
+  t as GridContextInjectionKey,
+  e as GridDataCollectorInjectionKey,
+  o as RowContextInjectionKey
+};

package/dist/es/components/grid/hook/use-responsive-state.js

@@ -0,0 +1,40 @@
+import { ref as m, computed as p, onMounted as a, onUnmounted as v } from "vue";
+import { isObject as x } from "../../../_utils/is.js";
+import n, { responsiveArray as i } from "../../../_utils/responsive-observe.js";
+function l(e) {
+  return x(e);
+}
+function O(e, f, c = !1) {
+  const o = m({
+    xs: !0,
+    sm: !0,
+    md: !0,
+    lg: !0,
+    xl: !0,
+    xxl: !0
+  }), b = p(() => {
+    let r = f;
+    if (l(e.value))
+      for (let u = 0; u < i.length; u++) {
+        const s = i[u];
+        if ((o.value[s] || s === "xs" && c) && e.value[s] !== void 0) {
+          r = e.value[s];
+          break;
+        }
+      }
+    else
+      r = e.value;
+    return r;
+  });
+  let t = "";
+  return a(() => {
+    t = n.subscribe((r) => {
+      l(e.value) && (o.value = r);
+    });
+  }), v(() => {
+    t && n.unsubscribe(t);
+  }), b;
+}
+export {
+  O as useResponsiveState
+};

package/dist/es/components/grid/hook/use-responsive-value.js

@@ -0,0 +1,23 @@
+import { computed as v } from "vue";
+import { isNumber as u, isObject as x } from "../../../_utils/is.js";
+import { responsiveArray as p } from "../../../_utils/responsive-observe.js";
+function d(o) {
+  return o !== void 0;
+}
+function j(o) {
+  return v(() => {
+    const { val: n, key: t, xs: i, sm: l, md: m, lg: c, xl: f, xxl: a } = o.value;
+    if (![i, l, m, c, f, a].some(
+      (e) => d(e)
+    ))
+      return n;
+    const s = {};
+    return p.forEach((e) => {
+      const r = o.value[e];
+      u(r) ? s[e] = r : x(r) && u(r[t]) && (s[e] = r[t]);
+    }), s;
+  });
+}
+export {
+  j as useResponsiveValue
+};

package/dist/es/components/grid/index.js

@@ -0,0 +1,14 @@
+import t from "./Row.vue.js";
+import m from "./Col.vue.js";
+import i from "./Grid.vue.js";
+import e from "./GridItem.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as r } from "../../_utils/config.js";
+const C = o(r("Grid"), i), c = o(r("Row"), t), l = o(r("Col"), m), _ = o(r("GridItem"), e);
+export {
+  l as Col,
+  C as Grid,
+  _ as GridItem,
+  c as Row,
+  C as default
+};

package/dist/es/components/grid/utils/index.js

@@ -0,0 +1,51 @@
+function c(u, s) {
+  const o = s.span ?? 1, n = s.offset ?? 0, l = Math.min(n, u);
+  return {
+    span: Math.min(
+      l > 0 ? o + n : o,
+      u
+    ),
+    offset: l,
+    suffix: "suffix" in s ? s.suffix !== !1 : !1
+  };
+}
+function h({
+  cols: u,
+  collapsed: s,
+  collapsedRows: o,
+  itemDataList: n
+}) {
+  let l = !1, i = [];
+  function r(e) {
+    return Math.ceil(e / u) > o;
+  }
+  if (s) {
+    let e = 0;
+    for (let f = 0; f < n.length; f++)
+      n[f].suffix && (e += n[f].span, i.push(f));
+    if (!r(e)) {
+      let f = 0;
+      for (; f < n.length; ) {
+        const t = n[f];
+        if (!t.suffix) {
+          if (e += t.span, r(e))
+            break;
+          i.push(f);
+        }
+        f++;
+      }
+    }
+    l = n.some(
+      (f, t) => !f.suffix && !i.includes(t)
+    );
+  } else
+    i = n.map((e, f) => f);
+  return {
+    overflow: l,
+    displayIndexList: i
+  };
+}
+export {
+  c as resolveItemData,
+  h as setItemVisible
+};

package/dist/es/components/image/Image.vue.js

@@ -0,0 +1,91 @@
+import C from "./Image.vue2.js";
+import { resolveComponent as m, openBlock as n, createElementBlock as t, normalizeStyle as N, normalizeClass as o, createElementVNode as r, mergeProps as d, renderSlot as i, createVNode as p, toDisplayString as w, createCommentVNode as l, createBlock as g, createSlots as L, withCtx as v } from "vue";
+import u from "../../_virtual/_plugin-vue_export-helper.js";
+const $ = ["title", "alt"];
+function c(e, s, P, S, b, E) {
+  const y = m("IconImageClose"), I = m("IconLoading"), f = m("ImageFooter"), k = m("ImagePreview");
+  return n(), t("div", {
+    class: o(e.wrapperClassNames),
+    style: N(e.wrapperStyles)
+  }, [
+    r("img", d({
+      ref: "refImg",
+      class: e.className.element("img")
+    }, e.imgProps, {
+      style: { ...e.imgStyle, ...e.fitStyle },
+      title: e.title,
+      alt: e.alt,
+      onLoad: s[0] || (s[0] = (...a) => e.onImgLoaded && e.onImgLoaded(...a)),
+      onError: s[1] || (s[1] = (...a) => e.onImgLoadError && e.onImgLoadError(...a)),
+      onClick: s[2] || (s[2] = (...a) => e.onImgClick && e.onImgClick(...a))
+    }), null, 16, $),
+    e.isLoaded ? l("", !0) : (n(), t("div", {
+      key: 0,
+      class: o(e.className.element("overlay"))
+    }, [
+      e.isError ? i(e.$slots, "error", { key: 0 }, () => [
+        r("div", {
+          class: o(e.className.element("error"))
+        }, [
+          r("div", {
+            class: o(e.className.element("error-icon"))
+          }, [
+            i(e.$slots, "error-icon", {}, () => [
+              p(y)
+            ])
+          ], 2),
+          e.alt || e.description ? (n(), t("div", {
+            key: 0,
+            class: o(e.className.element("error-alt"))
+          }, w(e.alt || e.description), 3)) : l("", !0)
+        ], 2)
+      ]) : l("", !0),
+      e.isLoading && (e.showLoader || e.$slots.loader) ? i(e.$slots, "loader", { key: 1 }, () => [
+        r("div", {
+          class: o([e.className.element("loader")])
+        }, [
+          r("div", {
+            class: o(e.className.element("loader-spin"))
+          }, [
+            p(I),
+            r("div", {
+              class: o(e.className.element("loader-spin-text"))
+            }, " Loading ", 2)
+          ], 2)
+        ], 2)
+      ]) : l("", !0)
+    ], 2)),
+    e.showFooter ? (n(), g(f, {
+      key: 1,
+      class: o(e.footerClass),
+      "prefix-cls": e.className.block,
+      title: e.title,
+      description: e.description
+    }, L({ _: 2 }, [
+      e.$slots.extra ? {
+        name: "extra",
+        fn: v(() => [
+          i(e.$slots, "extra")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["class", "prefix-cls", "title", "description"])) : l("", !0),
+    e.isLoaded && e.mergePreview ? (n(), g(k, d({
+      key: 2,
+      src: e.src
+    }, e.previewProps, {
+      visible: e.mergedPreviewVisible,
+      "render-to-body": e.renderToBody,
+      onClose: e.onPreviewClose
+    }), {
+      actions: v(() => [
+        i(e.$slots, "preview-actions")
+      ]),
+      _: 3
+    }, 16, ["src", "visible", "render-to-body", "onClose"])) : l("", !0)
+  ], 6);
+}
+const z = /* @__PURE__ */ u(C, [["render", c]]);
+export {
+  z as default
+};

package/dist/es/components/image/Image.vue2.js

@@ -0,0 +1,259 @@
+import { defineComponent as q, toRefs as D, inject as H, ref as J, computed as i, reactive as Q, watchEffect as F } from "vue";
+import W from "../../icons/default/close-circle-fill.js";
+import X from "../../icons/animation/animation-loading.js";
+import Y from "./image-footer.vue.js";
+import Z from "./ImagePreview.vue.js";
+import $ from "./hooks/use-image-load-status.js";
+import { isServerRendering as x } from "../../_utils/dom.js";
+import { normalizeImageSizeProp as j } from "./utils/index.js";
+import { omit as ee } from "../../_utils/omit.js";
+import ie from "../../_hooks/use-merge-state.js";
+import { PreviewGroupInjectionKey as te } from "./context.js";
+import { isBoolean as re } from "../../_utils/is.js";
+import { getClassNameMixin as oe } from "../../_utils/config.js";
+let ae = 0;
+const Se = q({
+  name: "Image",
+  components: {
+    IconImageClose: W,
+    IconLoading: X,
+    ImageFooter: Y,
+    ImagePreview: Z
+  },
+  inheritAttrs: !1,
+  props: {
+    renderToBody: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 图片获取地址
+     * @en Image src
+     */
+    src: {
+      type: String
+    },
+    /**
+     * @zh 图片显示宽度
+     * @en Image width
+     */
+    width: {
+      type: [String, Number]
+    },
+    /**
+     * @zh 图片显示高度
+     * @en Image height
+     */
+    height: {
+      type: [String, Number]
+    },
+    /**
+     * @zh 标题
+     * @en Title
+     */
+    title: {
+      type: String
+    },
+    /**
+     * @zh 描述，将显示在底部，如果 alt 没有值，则会将其设置给 alt
+     * @en Description, will be displayed at the bottom. if alt has no value, it will be set to alt
+     */
+    description: {
+      type: String
+    },
+    /**
+     * @zh 确定图片如何适应容器框
+     * @en indicate how the image should be resized to fit its container
+     */
+    fit: {
+      type: String
+    },
+    /**
+     * @zh 图片的文字描述
+     * @en Text description of the image
+     */
+    alt: {
+      type: String
+    },
+    /**
+     * @zh 是否隐藏 footer（2.36.0 版本支持 'never' 参数，支持在加载错误时显示底部内容）
+     * @en Whether to hide footer (Version 2.36.0 supports the 'never' parameter, which supports displaying bottom content when loading errors)
+     */
+    hideFooter: {
+      type: [Boolean, String],
+      default: !1
+    },
+    /**
+     * @zh 底部显示的位置
+     * @en The position shown at the bottom
+     */
+    footerPosition: {
+      type: String,
+      default: "inner"
+    },
+    /**
+     * @zh 是否显示加载中效果
+     * @en Whether to show the loading effect
+     */
+    showLoader: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否开启预览
+     * @en Whether to enable preview
+     */
+    preview: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 控制预览的打开状态，可与 previewVisibleChange 配合使用
+     * @en Control the open state of the preview, can be used in conjunction with previewVisibleChange
+     * @vModel
+     */
+    previewVisible: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 预览的默认打开状态
+     * @en The default open state of the preview
+     */
+    defaultPreviewVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 预览的配置项（所有选项都是可选的） [ImagePreviewProps](#image-preview%20Props)
+     * @en Preview configuration items (all options are optional) [ImagePreviewProps](#image-preview%20Props)
+     */
+    previewProps: {
+      type: Object
+    },
+    /**
+     * @zh 底部显示区域的类名
+     * @en The class name of the bottom display area
+     * @version 2.23.0
+     */
+    footerClass: {
+      type: [String, Array, Object]
+    }
+  },
+  emits: [
+    /**
+     * @zh 预览的打开和关闭事件
+     * @en Preview opening and closing events
+     * @param {boolean} visible
+     */
+    "preview-visible-change",
+    "update:previewVisible"
+  ],
+  /**
+   * @zh 自定义错误状态的图标
+   * @en Customize the icon of error content.
+   * @slot error-icon
+   */
+  /**
+   * @zh 自定义错误状态内容
+   * @en Customize error content.
+   * @slot error
+   */
+  /**
+   * @zh 自定义加载状态效果
+   * @en Customize loading effect.
+   * @slot loader
+   */
+  /**
+   * @zh 底部额外内容
+   * @en Extra content at the bottom
+   * @slot extra
+   */
+  setup(a, { attrs: l, slots: N, emit: y }) {
+    const {
+      height: n,
+      width: s,
+      hideFooter: m,
+      title: u,
+      description: f,
+      src: t,
+      footerPosition: S,
+      defaultPreviewVisible: z,
+      previewVisible: A,
+      preview: v,
+      previewProps: p
+    } = D(a), e = H(te, void 0), r = oe("image"), c = J(), { isLoaded: o, isError: b, isLoading: I, setLoadStatus: d } = $(), h = i(() => ({
+      width: j(s == null ? void 0 : s.value),
+      height: j(n == null ? void 0 : n.value)
+    })), E = i(() => a.fit ? { objectFit: a.fit } : {}), _ = i(() => [
+      r.block,
+      {
+        [r.element("loading")]: I.value,
+        [r.element("loading-error")]: b.value,
+        // isLoaded / showFooter 是 ref，这里必须解引用；
+        // 直接写对象引用会让条件恒为真，没有 footer 的图片也带上定位类
+        [r.element("with-footer-inner")]: o.value && g.value && S.value === "inner",
+        [r.element("with-footer-outer")]: o.value && g.value && S.value === "outer"
+      },
+      l.class
+    ]), k = i(() => [
+      h.value,
+      l.style
+    ]), g = i(() => u != null && u.value || f != null && f.value || N.extra ? re(m.value) ? !m.value && o.value : m.value === "never" : !1), C = i(() => ee(l, ["class", "style"])), [M, P] = ie(
+      z.value,
+      Q({
+        value: A
+      })
+    ), O = i(() => !(e != null && e.preview) && v.value);
+    F(() => {
+      x || !c.value || (c.value.src = t == null ? void 0 : t.value, d("loading"));
+    });
+    const L = ae++;
+    F((U) => {
+      var B, V;
+      const w = (V = e == null ? void 0 : e.registerImageUrl) == null ? void 0 : V.call(
+        e,
+        L,
+        (((B = p == null ? void 0 : p.value) == null ? void 0 : B.src) ?? (t == null ? void 0 : t.value)) || "",
+        v.value
+      );
+      U(() => {
+        w == null || w();
+      });
+    });
+    function G() {
+      d("loaded");
+    }
+    function K() {
+      d("error");
+    }
+    function R() {
+      v.value && (e != null && e.preview ? e.preview(L) : (y("preview-visible-change", !0), P(!0)));
+    }
+    function T() {
+      y("preview-visible-change", !1), P(!1);
+    }
+    return {
+      refImg: c,
+      className: r,
+      wrapperClassNames: _,
+      wrapperStyles: k,
+      showFooter: g,
+      imgProps: C,
+      imgStyle: h,
+      isLoaded: o,
+      isError: b,
+      isLoading: I,
+      mergedPreviewVisible: M,
+      mergePreview: O,
+      onImgLoaded: G,
+      onImgLoadError: K,
+      onImgClick: R,
+      onPreviewClose: T,
+      fitStyle: E
+    };
+  }
+});
+export {
+  Se as default
+};