ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
234 lines (233 loc) • 6.76 kB
JavaScript
import { q as l } from "../../chunks/module-chunk.mjs";
import { genStyleHooks as d } from "../../theme/genStyleUtils.mjs";
import p 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 s } from "../../_util/cssinjs-utils/util/statistic.mjs";
const a = {
"&, *": {
boxSizing: "border-box"
}
}, g = (o) => {
const { componentCls: r, calc: i, antCls: e } = o, n = `${r}-drop-area`, t = `${r}-placeholder`;
return {
// ============================== Full Screen ==============================
[n]: {
position: "absolute",
inset: 0,
zIndex: o.zIndexPopupBase,
...a,
"&-on-body": {
position: "fixed",
inset: 0
},
"&-hide-placement": {
[`${t}-inner`]: {
display: "none"
}
},
[t]: {
padding: 0
}
},
"&": {
// ============================= Placeholder =============================
[t]: {
height: "100%",
borderRadius: o.borderRadius,
borderWidth: o.lineWidthBold,
borderStyle: "dashed",
borderColor: "transparent",
padding: o.padding,
position: "relative",
backdropFilter: "blur(10px)",
// background: token.colorBgPlaceholderHover,
...a,
[`${e}-upload-wrapper ${e}-upload${e}-upload-btn`]: {
padding: 0
},
[`&${t}-drag-in`]: {
borderColor: o.colorPrimaryHover
},
[`&${t}-disabled`]: {
opacity: 0.25,
pointerEvents: "none"
},
[`${t}-inner`]: {
gap: i(o.paddingXXS).div(2).equal()
},
[`${t}-icon`]: {
fontSize: o.fontSizeHeading2,
lineHeight: 1
},
[`${t}-title${t}-title`]: {
margin: 0,
fontSize: o.fontSize,
lineHeight: o.lineHeight
},
[`${t}-description`]: {}
}
}
};
}, c = (o) => {
const { componentCls: r, calc: i } = o, e = `${r}-list`, n = i(o.fontSize).mul(o.lineHeight).mul(2).add(o.paddingSM).add(o.paddingSM).equal();
return {
[r]: {
position: "relative",
width: "100%",
...a,
// =============================== File List ===============================
[e]: {
display: "flex",
flexWrap: "wrap",
gap: o.paddingSM,
fontSize: o.fontSize,
lineHeight: o.lineHeight,
color: o.colorText,
paddingBlock: o.paddingSM,
paddingInline: o.padding,
width: "100%",
background: o.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 ${o.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(n).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: n,
height: n,
fontSize: o.fontSizeHeading2,
color: "#999"
},
// ======================================================================
// == PrevNext ==
// ======================================================================
"&-prev-btn, &-next-btn": {
position: "absolute",
top: "50%",
transform: "translateY(-50%)",
boxShadow: o.boxShadowTertiary,
opacity: 0,
pointerEvents: "none"
},
"&-prev-btn": {
left: {
_skip_check_: !0,
value: o.padding
}
},
"&-next-btn": {
right: {
_skip_check_: !0,
value: o.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"
}
}
}
}
};
}, b = (o) => {
const { colorBgContainer: r } = o;
return {
colorBgPlaceholderHover: new l(r).setA(0.85).toRgbString()
};
}, x = d(
"Attachments",
(o) => {
const r = s(o, {});
return [
g(r),
c(r),
p(r)
];
},
b
);
export {
x as default,
b as prepareComponentToken
};