ant-design-x-vue 1.1.1 → 1.2.0

package/es/attachments/style/index.mjs

@@ -0,0 +1,584 @@
+import { genStyleHooks as y } from "../../theme/genStyleUtils.mjs";
+import x from "./fileCard.mjs";
+import "vue";
+import "../../_util/cssinjs/StyleContext.mjs";
+import "../../_util/cssinjs/theme/ThemeCache.mjs";
+import "../../_util/warning.mjs";
+import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
+import { merge as H } from "../../_util/cssinjs-utils/util/statistic.mjs";
+function u(s) {
+  "@babel/helpers - typeof";
+  return u = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(t) {
+    return typeof t;
+  } : function(t) {
+    return t && typeof Symbol == "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+  }, u(s);
+}
+function $(s, t) {
+  if (u(s) != "object" || !s) return s;
+  var i = s[Symbol.toPrimitive];
+  if (i !== void 0) {
+    var e = i.call(s, t);
+    if (u(e) != "object") return e;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (t === "string" ? String : Number)(s);
+}
+function w(s) {
+  var t = $(s, "string");
+  return u(t) == "symbol" ? t : t + "";
+}
+function c(s, t, i) {
+  return (t = w(t)) in s ? Object.defineProperty(s, t, {
+    value: i,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : s[t] = i, s;
+}
+const o = Math.round;
+function m(s, t) {
+  const i = s.replace(/^[^(]*\((.*)/, "$1").replace(/\).*/, "").match(/\d*\.?\d+%?/g) || [], e = i.map((r) => parseFloat(r));
+  for (let r = 0; r < 3; r += 1)
+    e[r] = t(e[r] || 0, i[r] || "", r);
+  return i[3] ? e[3] = i[3].includes("%") ? e[3] / 100 : e[3] : e[3] = 1, e;
+}
+const S = (s, t, i) => i === 0 ? s : s / 100;
+function b(s, t) {
+  const i = t || 255;
+  return s > i ? i : s < 0 ? 0 : s;
+}
+class _ {
+  constructor(t) {
+    c(this, "isValid", !0), c(this, "r", 0), c(this, "g", 0), c(this, "b", 0), c(this, "a", 1), c(this, "_h", void 0), c(this, "_s", void 0), c(this, "_l", void 0), c(this, "_v", void 0), c(this, "_max", void 0), c(this, "_min", void 0), c(this, "_brightness", void 0);
+    function i(e) {
+      return e[0] in t && e[1] in t && e[2] in t;
+    }
+    if (t) if (typeof t == "string") {
+      let r = function(n) {
+        return e.startsWith(n);
+      };
+      const e = t.trim();
+      /^#?[A-F\d]{3,8}$/i.test(e) ? this.fromHexString(e) : r("rgb") ? this.fromRgbString(e) : r("hsl") ? this.fromHslString(e) : (r("hsv") || r("hsb")) && this.fromHsvString(e);
+    } else if (t instanceof _)
+      this.r = t.r, this.g = t.g, this.b = t.b, this.a = t.a, this._h = t._h, this._s = t._s, this._l = t._l, this._v = t._v;
+    else if (i("rgb"))
+      this.r = b(t.r), this.g = b(t.g), this.b = b(t.b), this.a = typeof t.a == "number" ? b(t.a, 1) : 1;
+    else if (i("hsl"))
+      this.fromHsl(t);
+    else if (i("hsv"))
+      this.fromHsv(t);
+    else
+      throw new Error("@ant-design/fast-color: unsupported input " + JSON.stringify(t));
+  }
+  // ======================= Setter =======================
+  setR(t) {
+    return this._sc("r", t);
+  }
+  setG(t) {
+    return this._sc("g", t);
+  }
+  setB(t) {
+    return this._sc("b", t);
+  }
+  setA(t) {
+    return this._sc("a", t, 1);
+  }
+  setHue(t) {
+    const i = this.toHsv();
+    return i.h = t, this._c(i);
+  }
+  // ======================= Getter =======================
+  /**
+   * Returns the perceived luminance of a color, from 0-1.
+   * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+   */
+  getLuminance() {
+    function t(n) {
+      const l = n / 255;
+      return l <= 0.03928 ? l / 12.92 : Math.pow((l + 0.055) / 1.055, 2.4);
+    }
+    const i = t(this.r), e = t(this.g), r = t(this.b);
+    return 0.2126 * i + 0.7152 * e + 0.0722 * r;
+  }
+  getHue() {
+    if (typeof this._h > "u") {
+      const t = this.getMax() - this.getMin();
+      t === 0 ? this._h = 0 : this._h = o(60 * (this.r === this.getMax() ? (this.g - this.b) / t + (this.g < this.b ? 6 : 0) : this.g === this.getMax() ? (this.b - this.r) / t + 2 : (this.r - this.g) / t + 4));
+    }
+    return this._h;
+  }
+  getSaturation() {
+    if (typeof this._s > "u") {
+      const t = this.getMax() - this.getMin();
+      t === 0 ? this._s = 0 : this._s = t / this.getMax();
+    }
+    return this._s;
+  }
+  getLightness() {
+    return typeof this._l > "u" && (this._l = (this.getMax() + this.getMin()) / 510), this._l;
+  }
+  getValue() {
+    return typeof this._v > "u" && (this._v = this.getMax() / 255), this._v;
+  }
+  /**
+   * Returns the perceived brightness of the color, from 0-255.
+   * Note: this is not the b of HSB
+   * @see http://www.w3.org/TR/AERT#color-contrast
+   */
+  getBrightness() {
+    return typeof this._brightness > "u" && (this._brightness = (this.r * 299 + this.g * 587 + this.b * 114) / 1e3), this._brightness;
+  }
+  // ======================== Func ========================
+  darken(t = 10) {
+    const i = this.getHue(), e = this.getSaturation();
+    let r = this.getLightness() - t / 100;
+    return r < 0 && (r = 0), this._c({
+      h: i,
+      s: e,
+      l: r,
+      a: this.a
+    });
+  }
+  lighten(t = 10) {
+    const i = this.getHue(), e = this.getSaturation();
+    let r = this.getLightness() + t / 100;
+    return r > 1 && (r = 1), this._c({
+      h: i,
+      s: e,
+      l: r,
+      a: this.a
+    });
+  }
+  /**
+   * Mix the current color a given amount with another color, from 0 to 100.
+   * 0 means no mixing (return current color).
+   */
+  mix(t, i = 50) {
+    const e = this._c(t), r = i / 100, n = (g) => (e[g] - this[g]) * r + this[g], l = {
+      r: o(n("r")),
+      g: o(n("g")),
+      b: o(n("b")),
+      a: o(n("a") * 100) / 100
+    };
+    return this._c(l);
+  }
+  /**
+   * Mix the color with pure white, from 0 to 100.
+   * Providing 0 will do nothing, providing 100 will always return white.
+   */
+  tint(t = 10) {
+    return this.mix({
+      r: 255,
+      g: 255,
+      b: 255,
+      a: 1
+    }, t);
+  }
+  /**
+   * Mix the color with pure black, from 0 to 100.
+   * Providing 0 will do nothing, providing 100 will always return black.
+   */
+  shade(t = 10) {
+    return this.mix({
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 1
+    }, t);
+  }
+  onBackground(t) {
+    const i = this._c(t), e = this.a + i.a * (1 - this.a), r = (n) => o((this[n] * this.a + i[n] * i.a * (1 - this.a)) / e);
+    return this._c({
+      r: r("r"),
+      g: r("g"),
+      b: r("b"),
+      a: e
+    });
+  }
+  // ======================= Status =======================
+  isDark() {
+    return this.getBrightness() < 128;
+  }
+  isLight() {
+    return this.getBrightness() >= 128;
+  }
+  // ======================== MISC ========================
+  equals(t) {
+    return this.r === t.r && this.g === t.g && this.b === t.b && this.a === t.a;
+  }
+  clone() {
+    return this._c(this);
+  }
+  // ======================= Format =======================
+  toHexString() {
+    let t = "#";
+    const i = (this.r || 0).toString(16);
+    t += i.length === 2 ? i : "0" + i;
+    const e = (this.g || 0).toString(16);
+    t += e.length === 2 ? e : "0" + e;
+    const r = (this.b || 0).toString(16);
+    if (t += r.length === 2 ? r : "0" + r, typeof this.a == "number" && this.a >= 0 && this.a < 1) {
+      const n = o(this.a * 255).toString(16);
+      t += n.length === 2 ? n : "0" + n;
+    }
+    return t;
+  }
+  /** CSS support color pattern */
+  toHsl() {
+    return {
+      h: this.getHue(),
+      s: this.getSaturation(),
+      l: this.getLightness(),
+      a: this.a
+    };
+  }
+  /** CSS support color pattern */
+  toHslString() {
+    const t = this.getHue(), i = o(this.getSaturation() * 100), e = o(this.getLightness() * 100);
+    return this.a !== 1 ? `hsla(${t},${i}%,${e}%,${this.a})` : `hsl(${t},${i}%,${e}%)`;
+  }
+  /** Same as toHsb */
+  toHsv() {
+    return {
+      h: this.getHue(),
+      s: this.getSaturation(),
+      v: this.getValue(),
+      a: this.a
+    };
+  }
+  toRgb() {
+    return {
+      r: this.r,
+      g: this.g,
+      b: this.b,
+      a: this.a
+    };
+  }
+  toRgbString() {
+    return this.a !== 1 ? `rgba(${this.r},${this.g},${this.b},${this.a})` : `rgb(${this.r},${this.g},${this.b})`;
+  }
+  toString() {
+    return this.toRgbString();
+  }
+  // ====================== Privates ======================
+  /** Return a new FastColor object with one channel changed */
+  _sc(t, i, e) {
+    const r = this.clone();
+    return r[t] = b(i, e), r;
+  }
+  _c(t) {
+    return new this.constructor(t);
+  }
+  getMax() {
+    return typeof this._max > "u" && (this._max = Math.max(this.r, this.g, this.b)), this._max;
+  }
+  getMin() {
+    return typeof this._min > "u" && (this._min = Math.min(this.r, this.g, this.b)), this._min;
+  }
+  fromHexString(t) {
+    const i = t.replace("#", "");
+    function e(r, n) {
+      return parseInt(i[r] + i[n || r], 16);
+    }
+    i.length < 6 ? (this.r = e(0), this.g = e(1), this.b = e(2), this.a = i[3] ? e(3) / 255 : 1) : (this.r = e(0, 1), this.g = e(2, 3), this.b = e(4, 5), this.a = i[6] ? e(6, 7) / 255 : 1);
+  }
+  fromHsl({
+    h: t,
+    s: i,
+    l: e,
+    a: r
+  }) {
+    if (this._h = t % 360, this._s = i, this._l = e, this.a = typeof r == "number" ? r : 1, i <= 0) {
+      const p = o(e * 255);
+      this.r = p, this.g = p, this.b = p;
+    }
+    let n = 0, l = 0, g = 0;
+    const h = t / 60, a = (1 - Math.abs(2 * e - 1)) * i, f = a * (1 - Math.abs(h % 2 - 1));
+    h >= 0 && h < 1 ? (n = a, l = f) : h >= 1 && h < 2 ? (n = f, l = a) : h >= 2 && h < 3 ? (l = a, g = f) : h >= 3 && h < 4 ? (l = f, g = a) : h >= 4 && h < 5 ? (n = f, g = a) : h >= 5 && h < 6 && (n = a, g = f);
+    const d = e - a / 2;
+    this.r = o((n + d) * 255), this.g = o((l + d) * 255), this.b = o((g + d) * 255);
+  }
+  fromHsv({
+    h: t,
+    s: i,
+    v: e,
+    a: r
+  }) {
+    this._h = t % 360, this._s = i, this._v = e, this.a = typeof r == "number" ? r : 1;
+    const n = o(e * 255);
+    if (this.r = n, this.g = n, this.b = n, i <= 0)
+      return;
+    const l = t / 60, g = Math.floor(l), h = l - g, a = o(e * (1 - i) * 255), f = o(e * (1 - i * h) * 255), d = o(e * (1 - i * (1 - h)) * 255);
+    switch (g) {
+      case 0:
+        this.g = d, this.b = a;
+        break;
+      case 1:
+        this.r = f, this.b = a;
+        break;
+      case 2:
+        this.r = a, this.b = d;
+        break;
+      case 3:
+        this.r = a, this.g = f;
+        break;
+      case 4:
+        this.r = d, this.g = a;
+        break;
+      case 5:
+      default:
+        this.g = a, this.b = f;
+        break;
+    }
+  }
+  fromHsvString(t) {
+    const i = m(t, S);
+    this.fromHsv({
+      h: i[0],
+      s: i[1],
+      v: i[2],
+      a: i[3]
+    });
+  }
+  fromHslString(t) {
+    const i = m(t, S);
+    this.fromHsl({
+      h: i[0],
+      s: i[1],
+      l: i[2],
+      a: i[3]
+    });
+  }
+  fromRgbString(t) {
+    const i = m(t, (e, r) => (
+      // Convert percentage to number. e.g. 50% -> 128
+      r.includes("%") ? o(e / 100 * 255) : e
+    ));
+    this.r = i[0], this.g = i[1], this.b = i[2], this.a = i[3];
+  }
+}
+const v = {
+  "&, *": {
+    boxSizing: "border-box"
+  }
+}, M = (s) => {
+  const { componentCls: t, calc: i, antCls: e } = s, r = `${t}-drop-area`, n = `${t}-placeholder`;
+  return {
+    // ============================== Full Screen ==============================
+    [r]: {
+      position: "absolute",
+      inset: 0,
+      zIndex: s.zIndexPopupBase,
+      ...v,
+      "&-on-body": {
+        position: "fixed",
+        inset: 0
+      },
+      "&-hide-placement": {
+        [`${n}-inner`]: {
+          display: "none"
+        }
+      },
+      [n]: {
+        padding: 0
+      }
+    },
+    "&": {
+      // ============================= Placeholder =============================
+      [n]: {
+        height: "100%",
+        borderRadius: s.borderRadius,
+        borderWidth: s.lineWidthBold,
+        borderStyle: "dashed",
+        borderColor: "transparent",
+        padding: s.padding,
+        position: "relative",
+        backdropFilter: "blur(10px)",
+        // background: token.colorBgPlaceholderHover,
+        ...v,
+        [`${e}-upload-wrapper ${e}-upload${e}-upload-btn`]: {
+          padding: 0
+        },
+        [`&${n}-drag-in`]: {
+          borderColor: s.colorPrimaryHover
+        },
+        [`&${n}-disabled`]: {
+          opacity: 0.25,
+          pointerEvents: "none"
+        },
+        [`${n}-inner`]: {
+          gap: i(s.paddingXXS).div(2).equal()
+        },
+        [`${n}-icon`]: {
+          fontSize: s.fontSizeHeading2,
+          lineHeight: 1
+        },
+        [`${n}-title${n}-title`]: {
+          margin: 0,
+          fontSize: s.fontSize,
+          lineHeight: s.lineHeight
+        },
+        [`${n}-description`]: {}
+      }
+    }
+  };
+}, B = (s) => {
+  const { componentCls: t, calc: i } = s, e = `${t}-list`, r = i(s.fontSize).mul(s.lineHeight).mul(2).add(s.paddingSM).add(s.paddingSM).equal();
+  return {
+    [t]: {
+      position: "relative",
+      width: "100%",
+      ...v,
+      // =============================== File List ===============================
+      [e]: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: s.paddingSM,
+        fontSize: s.fontSize,
+        lineHeight: s.lineHeight,
+        color: s.colorText,
+        paddingBlock: s.paddingSM,
+        paddingInline: s.padding,
+        width: "100%",
+        background: s.colorBgContainer,
+        // Hide scrollbar
+        scrollbarWidth: "none",
+        "-ms-overflow-style": "none",
+        "&::-webkit-scrollbar": {
+          display: "none"
+        },
+        // Scroll
+        "&-overflow-scrollX, &-overflow-scrollY": {
+          "&:before, &:after": {
+            content: '""',
+            position: "absolute",
+            opacity: 0,
+            transition: `opacity ${s.motionDurationSlow}`,
+            zIndex: 1
+          }
+        },
+        "&-overflow-ping-start:before": {
+          opacity: 1
+        },
+        "&-overflow-ping-end:after": {
+          opacity: 1
+        },
+        "&-overflow-scrollX": {
+          overflowX: "auto",
+          overflowY: "hidden",
+          flexWrap: "nowrap",
+          "&:before, &:after": {
+            insetBlock: 0,
+            width: 8
+          },
+          "&:before": {
+            insetInlineStart: 0,
+            background: "linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0));"
+          },
+          "&:after": {
+            insetInlineEnd: 0,
+            background: "linear-gradient(to left, rgba(0,0,0,0.06), rgba(0,0,0,0));"
+          },
+          "&:dir(rtl)": {
+            "&:before": {
+              background: "linear-gradient(to left, rgba(0,0,0,0.06), rgba(0,0,0,0));"
+            },
+            "&:after": {
+              background: "linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0));"
+            }
+          }
+        },
+        "&-overflow-scrollY": {
+          overflowX: "hidden",
+          overflowY: "auto",
+          maxHeight: i(r).mul(3).equal(),
+          "&:before, &:after": {
+            insetInline: 0,
+            height: 8
+          },
+          "&:before": {
+            insetBlockStart: 0,
+            background: "linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0));"
+          },
+          "&:after": {
+            insetBlockEnd: 0,
+            background: "linear-gradient(to top, rgba(0,0,0,0.06), rgba(0,0,0,0));"
+          }
+        },
+        // ======================================================================
+        // ==                              Upload                              ==
+        // ======================================================================
+        "&-upload-btn": {
+          width: r,
+          height: r,
+          fontSize: s.fontSizeHeading2,
+          color: "#999"
+        },
+        // ======================================================================
+        // ==                             PrevNext                             ==
+        // ======================================================================
+        "&-prev-btn, &-next-btn": {
+          position: "absolute",
+          top: "50%",
+          transform: "translateY(-50%)",
+          boxShadow: s.boxShadowTertiary,
+          opacity: 0,
+          pointerEvents: "none"
+        },
+        "&-prev-btn": {
+          left: {
+            _skip_check_: !0,
+            value: s.padding
+          }
+        },
+        "&-next-btn": {
+          right: {
+            _skip_check_: !0,
+            value: s.padding
+          }
+        },
+        "&:dir(ltr)": {
+          [`&${e}-overflow-ping-start ${e}-prev-btn`]: {
+            opacity: 1,
+            pointerEvents: "auto"
+          },
+          [`&${e}-overflow-ping-end ${e}-next-btn`]: {
+            opacity: 1,
+            pointerEvents: "auto"
+          }
+        },
+        "&:dir(rtl)": {
+          [`&${e}-overflow-ping-end ${e}-prev-btn`]: {
+            opacity: 1,
+            pointerEvents: "auto"
+          },
+          [`&${e}-overflow-ping-start ${e}-next-btn`]: {
+            opacity: 1,
+            pointerEvents: "auto"
+          }
+        }
+      }
+    }
+  };
+}, z = (s) => {
+  const { colorBgContainer: t } = s;
+  return {
+    colorBgPlaceholderHover: new _(t).setA(0.85).toRgbString()
+  };
+}, W = y(
+  "Attachments",
+  (s) => {
+    const t = H(s, {});
+    return [
+      M(t),
+      B(t),
+      x(t)
+    ];
+  },
+  z
+);
+export {
+  W as default,
+  z as prepareComponentToken
+};

package/es/attachments/util.mjs

@@ -0,0 +1,31 @@
+const E = (e) => e.indexOf("image/") === 0;
+function g(e) {
+  return new Promise((a) => {
+    if (!e || !e.type || !E(e.type)) {
+      a("");
+      return;
+    }
+    const n = new Image();
+    if (n.onload = () => {
+      const { width: t, height: c } = n, o = t / c, i = o > 1 ? 200 : 200 * o, r = o > 1 ? 200 / o : 200, s = document.createElement("canvas");
+      s.width = i, s.height = r, s.style.cssText = `position: fixed; left: 0; top: 0; width: ${i}px; height: ${r}px; z-index: 9999; display: none;`, document.body.appendChild(s), s.getContext("2d").drawImage(n, 0, 0, i, r);
+      const d = s.toDataURL();
+      document.body.removeChild(s), window.URL.revokeObjectURL(n.src), a(d);
+    }, n.crossOrigin = "anonymous", e.type.startsWith("image/svg+xml")) {
+      const t = new FileReader();
+      t.onload = () => {
+        t.result && typeof t.result == "string" && (n.src = t.result);
+      }, t.readAsDataURL(e);
+    } else if (e.type.startsWith("image/gif")) {
+      const t = new FileReader();
+      t.onload = () => {
+        t.result && a(t.result);
+      }, t.readAsDataURL(e);
+    } else
+      n.src = window.URL.createObjectURL(e);
+  });
+}
+export {
+  E as isImageFileType,
+  g as previewImage
+};