ant-design-x-vue
Version:
Craft AI-driven interfaces effortlessly
585 lines (584 loc) • 17.1 kB
JavaScript
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
};