84 lines
3.1 KiB
JavaScript
84 lines
3.1 KiB
JavaScript
// shortkey的 字典变量
|
||
const _s = {
|
||
def: 'default',
|
||
hand: 'pointer',
|
||
disable: 'not-allowed'
|
||
}
|
||
const clamp = (v, min, max) => Math.min(Math.max(v, min), max)
|
||
|
||
export default function builder(option) {
|
||
return {
|
||
rules: [
|
||
// 省略号 ellipsis ellipsis2 ellipsis3
|
||
['ellipsis', { overflow: 'hidden', ' text-overflow': 'ellipsis', 'white-space': 'nowrap' }],
|
||
[
|
||
/^ellipsis(\d+)$/,
|
||
([, num]) => ({
|
||
display: '-webkit-box',
|
||
overflow: 'hidden',
|
||
'-webkit-line-clamp': num,
|
||
' -webkit-box-orient': 'vertical',
|
||
'overflow-wrap': 'anywhere'
|
||
})
|
||
],
|
||
// 光标样式 cur-hand
|
||
[/^cur-(def|hand|disable)$/, ([, shape]) => ({ cursor: `${_s[shape]}` })],
|
||
// overflow of-auto ofx-hidden ofy-scroll
|
||
[/^of(\w?)-(auto|scroll|hidden|visible)$/, ([, axis, mode]) => ({ [`overflow${axis ? '-' + axis : ''}`]: mode })],
|
||
// 图片填充 img-cover
|
||
[/^img-(cover|contain|fill)$/, ([, mode]) => ({ 'object-fit': mode })],
|
||
// z-index z100
|
||
[/^z(-?\d+)$/, ([, num]) => ({ 'z-index': num })],
|
||
// 选择相关 noselect allselect nomouse 参见选择变体： select:c-primary select:bg-dark
|
||
['noselect', { 'user-select': 'none' }],
|
||
['allselect', { 'user-select': 'all' }],
|
||
['noevent', { 'pointer-events': 'none' }],
|
||
// 可见性 hide show
|
||
['hide', { visibility: 'hidden' }],
|
||
['show', { visibility: 'visible' }],
|
||
// 透明度 op100
|
||
[/^op(\d+)$/, ([, val]) => ({ opacity: clamp(val / 100, 0, 1) })],
|
||
|
||
// 小三角 caret-t-l/c/r 先边后位置，dom需要有relative caret-tc caret-rb
|
||
// caret-l-t/c/b
|
||
// caret-r-t/c/b
|
||
// caret-b-l/c/r
|
||
[
|
||
/^caret-(t|l|r|b)(t|l|r|b|c)$/,
|
||
([, side, offset], { rawSelector, currentSelector, variantHandlers, theme }) => {
|
||
const selector = e(rawSelector)
|
||
const altSideProp = { t: 'bottom', l: 'right', r: 'left', b: 'top' }[side]
|
||
|
||
let sideProp = { t: 'top', l: 'left', r: 'right', b: 'bottom' }[side]
|
||
let offsetProp =
|
||
offset === 'c' //
|
||
? { t: 'left', b: 'left', l: 'top', r: 'top' }[side] //
|
||
: { t: 'top', l: 'left', r: 'right', b: 'bottom' }[offset]
|
||
|
||
const colorCss = `border-${altSideProp}-color: var(--caret-color);`
|
||
const positionCss = `${sideProp}: calc(-2 * var(--caret-width));`
|
||
const offsetCss =
|
||
offset === 'c' //
|
||
? `${offsetProp}:calc(50% - var(--caret-offset));` //
|
||
: `${offsetProp}:var(--caret-offset);`
|
||
return `
|
||
${selector}::before {
|
||
position: absolute;
|
||
display: block;
|
||
content: " ";
|
||
width: 0;
|
||
height: 0;
|
||
border-color: transparent;
|
||
border-style: solid;
|
||
border-width: var(--caret-width);
|
||
${colorCss}
|
||
${positionCss}
|
||
${offsetCss}
|
||
}`
|
||
}
|
||
]
|
||
],
|
||
shortcuts: []
|
||
}
|
||
}
|