ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
386 lines (385 loc) • 9.83 kB
JavaScript
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";
import { genStyleHooks as x } from "../../theme/genStyleUtils.mjs";
const y = (t) => {
const {
antCls: i,
componentCls: e,
paddingSM: n,
padding: l,
paddingXXS: r,
colorFillTertiary: s,
marginSM: a,
colorTextDescription: d,
fontSize: p,
fontSizeSM: o,
colorTextBase: g,
motionDurationSlow: c,
colorTextLightSolid: u,
lineHeightLG: $,
marginXXS: m,
fontSizeHeading1: b,
fontSizeHeading4: h,
controlHeightLG: v,
marginXS: w,
calc: f
} = t;
return {
[e]: {
display: "flex",
[`${e}-file`]: {
display: "flex",
alignItems: "center",
padding: `${n} ${l}`,
backgroundColor: s,
borderRadius: t.borderRadius,
position: "relative",
overflow: "hidden",
boxSizing: "border-box",
width: 268,
height: "auto",
"&-pointer": {
cursor: "pointer"
},
[`${e}-file-icon`]: {
fontSize: f(b).sub(2).equal(),
marginInlineEnd: a,
display: "flex",
alignItems: "center",
justifyContent: "center"
},
[`${e}-file-content`]: {
flex: 1,
maxWidth: f("100%").sub(f(b).sub(2).equal()).sub(a).equal()
},
[`${e}-file-name`]: {
fontSize: p,
color: g,
display: "flex",
maxWidth: "100%"
},
[`${e}-file-name-prefix`]: {
flex: "0 1 auto",
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
[`${e}-file-name-suffix`]: {
flex: "none"
},
[`${e}-file-description`]: {
fontSize: o,
color: d,
lineHeight: $,
marginBottom: m
},
[`${e}-file-mask`]: {
position: "absolute",
inset: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: u,
background: "rgba(0, 0, 0, 0.5)",
cursor: "pointer",
opacity: 0,
transition: `opacity ${c}`,
"&:hover": {
opacity: 1
},
[`${e}-file-mask-info`]: {
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
padding: `0 ${r}`
}
}
},
[`${e}-file-small`]: {
borderRadius: t.borderRadius,
padding: `0 ${n}`,
height: v,
[`${e}-file-icon`]: {
fontSize: h,
marginInlineEnd: w
},
[`${e}-file-description`]: {
display: "none"
}
},
[`${e}-image`]: {
width: 268,
borderRadius: t.borderRadius,
overflow: "hidden"
},
[`${e}-image-img`]: {
width: "100%",
img: {
width: "100%",
height: "auto",
objectFit: "cover",
borderRadius: "inherit"
}
},
[`${e}-loading`]: {
width: 268,
aspectRatio: "1",
position: "relative",
borderRadius: t.borderRadius,
overflow: "hidden"
},
[`${e}-image-loading`]: {
width: "100%",
height: "100%",
position: "absolute",
insetBlockStart: 0,
insetInlineStart: 0,
background: t.colorBgBase
},
[`${e}-image-skeleton`]: {
width: "100%",
height: "100%",
position: "relative",
[`${i}-skeleton-node`]: {
width: "100%",
height: "100%"
}
},
[`${e}-image-spin`]: {
position: "absolute",
insetBlockStart: t.margin,
insetInlineStart: t.margin,
color: t.colorText,
lineHeight: t.lineHeight,
"&-default": {
fontSize: t.fontSize
},
"&-small": {
fontSize: t.fontSizeSM
},
"&-large": {
fontSize: t.fontSizeLG
}
},
[`${e}-audio`]: {
width: 268
},
[`${e}-video`]: {
width: 268,
aspectRatio: "16 / 9",
borderRadius: t.borderRadius
},
[`&${e}-rtl`]: {
direction: "rtl"
}
}
};
}, z = (t) => {
const {
componentCls: i,
padding: e,
paddingSM: n,
colorFillTertiary: l,
marginXS: r,
colorTextLabel: s,
fontSize: a,
fontSizeLG: d,
borderRadius: p,
motionDurationSlow: o,
calc: g
} = t;
return {
[`${i}-list`]: {
position: "relative",
[`${i}-list-content`]: {
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
flexDirection: "row",
flexWrap: "wrap",
gap: r,
paddingBlock: n,
paddingInline: e,
// Scrollbar none
scrollbarWidth: "none",
"-ms-overflow-style": "none",
"&::-webkit-scrollbar": {
display: "none"
},
"&:dir(ltr)": {
[`&${i}-list-overflow-ping-start ${i}-list-prev-btn`]: {
opacity: 1,
pointerEvents: "auto"
},
[`&${i}-list-overflow-ping-end ${i}-list-next-btn`]: {
opacity: 1,
pointerEvents: "auto"
}
},
"&:dir(rtl)": {
[`&${i}-list-overflow-ping-end ${i}-list-prev-btn`]: {
opacity: 1,
pointerEvents: "auto"
},
[`&${i}-list-overflow-ping-start ${i}-list-next-btn`]: {
opacity: 1,
pointerEvents: "auto"
}
}
},
// list item
[`${i}-list-item`]: {
display: "flex",
position: "relative",
[`${i}-list-remove`]: {
transition: `opacity ${t.motionDurationMid} ${t.motionEaseOut}`
},
"&:hover": {
[`${i}-list-remove`]: {
opacity: 1
}
}
},
[`${i}-list-motion`]: {
transition: `opacity ${o}`,
[`${i}-file, ${i}-image, ${i}-video, ${i}-audio`]: {
transition: ["width", "padding"].map((c) => `${c} ${o}`).join(",")
},
"&-leave-active": {
opacity: 0,
marginInlineEnd: g(r).mul(-1).equal(),
[`${i}-file, ${i}-image, ${i}-video, ${i}-audio`]: {
width: 0,
paddingInline: 0
}
}
},
[`${i}-file`]: {
[`${i}-file-content`]: {
maxWidth: 156
}
},
[`${i}-image`]: {
width: 68,
height: 68,
borderRadius: p,
display: "flex"
},
[`${i}-list-remove`]: {
position: "absolute",
insetBlockStart: 0,
insetInlineEnd: 0,
transform: "translate(50%, -50%)",
fontSize: d,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: s,
opacity: 0,
cursor: "pointer",
backgroundColor: l
},
// small size
[`${i}-list-small`]: {
[`${i}-list-remove`]: {
fontSize: a
}
},
[`${i}-list-overflow-scrollX, ${i}-list-overflow-scrollY`]: {
"&:before, &:after": {
content: '""',
position: "absolute",
opacity: 0,
transition: `opacity ${o}`,
zIndex: 1
}
},
[`${i}-list-overflow-ping-start:before`]: {
opacity: 1
},
[`${i}-list-overflow-ping-end:after`]: {
opacity: 1
},
[`${i}-list-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));"
}
}
},
[`${i}-list-overflow-scrollY`]: {
overflowX: "hidden",
overflowY: "auto",
maxHeight: 68,
boxSizing: "content-box",
"&: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));"
}
},
// prev/next btn
[`${i}-list-prev-btn,${i}-list-next-btn`]: {
position: "absolute",
insetBlockStart: "50%",
transform: "translateY(-50%)",
boxShadow: t.boxShadowTertiary,
opacity: 0,
pointerEvents: "none"
},
[`${i}-list-prev-btn`]: {
left: {
_skip_check_: !0,
value: t.padding
}
},
[`${i}-list-next-btn`]: {
right: {
_skip_check_: !0,
value: t.padding
}
}
}
};
}, I = () => ({}), H = x(
"FileCard",
(t) => {
const i = S(t, {});
return [y(i), z(i)];
},
I
);
export {
H as default,
I as prepareComponentToken
};