tailwind-float-label
Version:
Tailwind plugin to add floating label, control with float label components
44 lines • 2.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
module.exports = floatLabelFactory;
function floatLabelFactory(options) {
const config = Object.assign({}, {
control: 'pt-1 pb-1',
label: {
['@apply leading-none text-xs px-1']: '',
// fontSize: 'calc(42 / 60 * 100%)',
top: 0,
left: '0.25rem',
},
}, options);
return ({ addComponents }) => {
const container = config.container ? toObject(config.container) : {};
const control = config.control ? toObject(config.control) : {};
const label = config.label ? toObject(config.label) : {};
const floatLabel = Object.assign(Object.assign({}, label), {
// position: absolute; top/left will be faster
// if used on elements without transitions
position: 'absolute' });
const showLabel = {
opacity: 1,
transform: 'translate(0, -50%)',
};
addComponents({
'.float-label-container': Object.assign(Object.assign({}, container), { position: 'relative', display: 'flex', flexDirection: 'column-reverse' }),
'.float-label-self': floatLabel,
'.float-label-control': Object.assign(Object.assign({}, control), { '& + .float-label-self': {
opacity: 0,
}, '&:not(:placeholder-shown) + .float-label-self': showLabel }),
'.float-label-sticky': Object.assign(Object.assign({}, floatLabel), showLabel),
'.float-label-auto': Object.assign(Object.assign({}, container), { position: 'relative', display: 'flex', flexDirection: 'column-reverse', '& > label': Object.assign(Object.assign({}, floatLabel), { opacity: 0 }), '& > input, select, textarea': Object.assign(Object.assign({}, control), { '&:not(:placeholder-shown) + label': showLabel }) }),
});
};
}
exports.default = floatLabelFactory;
function toObject(value) {
if (typeof value === 'string') {
return { [`@apply ${value}`]: '' };
}
return value;
}
//# sourceMappingURL=index.js.map