@b1dr/xip-ui
Version:
A UI library for SolidJS with Themescura
275 lines (256 loc) • 13.8 kB
JavaScript
import { spread, template, mergeProps as mergeProps$1, insert, createComponent, effect, className, addEventListener, setAttribute, delegateEvents, use } from 'solid-js/web';
import { splitProps, mergeProps, onMount, Show } from 'solid-js';
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') {
return;
}
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$6 = ".style-module_stack__i-Vko{align-items:var(--stack-align,stretch);display:flex;flex-direction:column;gap:var(--stack-gap,1em);justify-content:var(--stack-justify,flex-start)}";
var styles$5 = {"stack":"style-module_stack__i-Vko"};
styleInject(css_248z$6);
var _tmpl$$6 = /*#__PURE__*/template(`<div>`);
/**
* Stack in vertical direction
* Add a stack-split-child from 'stack.module.css' to the children to separate into top and bottom'
*/
const Stack = props => {
const [local, rest] = splitProps(props, ['class']);
const newProps = mergeProps({
class: `${styles$5.stack} ${local.class ?? ''}`
}, rest);
return (() => {
var _el$ = _tmpl$$6();
spread(_el$, newProps, false, false);
return _el$;
})();
};
var css_248z$5 = ".style-module_cluster__gcaE-{align-items:var(--cluster-align,center);display:flex;flex-wrap:var(--cluster-wrap,wrap);gap:var(--cluster-gap,1em);justify-content:var(--cluster-justify,flex-start)}";
var styles$4 = {"cluster":"style-module_cluster__gcaE-"};
styleInject(css_248z$5);
var _tmpl$$5 = /*#__PURE__*/template(`<div>`);
/**
* Cluster in horizontal direction
*/
const Cluster = props => {
const [local, rest] = splitProps(props, ['class']);
const newProps = mergeProps({
class: `${styles$4.cluster} ${local.class ?? ''}`
}, rest);
return (() => {
var _el$ = _tmpl$$5();
spread(_el$, newProps, false, false);
return _el$;
})();
};
var css_248z$4 = ".style-module_button__2TKn9{align-items:center;background-color:var(--surface-0);border:.125em solid transparent;border-radius:.5em;color:var(--primary-s-3);display:flex;font-family:inherit;font-size:1em;gap:.5em;outline:none;padding:.5em 1em;transition:background-color .2s,border-color .2s,color .2s;transition-timing-function:ease-in-out;iconify-icon{display:inline-block;font-size:1.2em;height:1em;width:1em}&:hover{background-color:var(--surface-1);border-color:var(--primary-s-6);color:var(--primary-s-6)}&:active{background-color:var(--background);border-color:var(--primary-s-4)}&:focus{outline:.125em solid var(--primary-b);outline-offset:.125em}&.style-module_icon__G-R5t{padding:.5em}&.style-module_rounded__OZxw2{border-radius:2em}&:disabled{background-color:transparent;border:2px solid var(--border);color:var(--text);opacity:.66}&.style-module_variant__-SPX4{background-color:var(--variant-b);border-color:var(--variant-b);color:var(--variant-o);&:hover{background-color:var(--variant-s-6);border-color:var(--variant-s-6)}&:active{background-color:var(--variant-s-4);border-color:var(--variant-s-4)}&:focus{outline-color:var(--variant-b)}}}";
var styles$3 = {"button":"style-module_button__2TKn9","icon":"style-module_icon__G-R5t","rounded":"style-module_rounded__OZxw2","variant":"style-module_variant__-SPX4"};
styleInject(css_248z$4);
var _tmpl$$4 = /*#__PURE__*/template(`<button>`);
const getVariantStyles = variant => ({
'--variant-o': `var(--${variant}-o)`,
'--variant-b': `var(--${variant}-b)`,
'--variant-s-6': `var(--${variant}-s-6)`,
'--variant-s-4': `var(--${variant}-s-4)`
});
const Button = props => {
const [local, rest] = splitProps(props, ['variant', 'class', 'classList', 'style']);
const newProps = mergeProps({
style: {
...(local.variant ? getVariantStyles(local.variant) : {}),
...local.style
},
class: `${styles$3.button} ${local.class}`,
classList: {
...local.classList,
[styles$3.variant]: !!local.variant
}
}, rest);
return (() => {
var _el$ = _tmpl$$4();
spread(_el$, newProps, false, false);
return _el$;
})();
};
var css_248z$3 = ".style-module_card__zpBOu{background:var(--surface-0);border-radius:.5em;color:var(--text);display:flex;flex-direction:column;gap:var(--card-space,1em);padding:1em;h1,h2,h3,h4,h5,h6,p{margin:0}&:has(&){border-radius:1em}&:has(&>&){border-radius:2em}&>&{background:var(--surface-1)}&>&>&{background:var(--surface-2)}}";
var styles$2 = {"card":"style-module_card__zpBOu"};
styleInject(css_248z$3);
var _tmpl$$3 = /*#__PURE__*/template(`<div>`);
const Card = props => {
return (() => {
var _el$ = _tmpl$$3();
spread(_el$, mergeProps$1(props, {
get ["class"]() {
return `${styles$2.card} ${props.class}`;
}
}), false, false);
return _el$;
})();
};
var css_248z$2 = ".style-module_input__C2tin{background-color:var(--surface-0);border:.125em solid var(--border);border-radius:.5em;color:var(--text);font-family:inherit;font-size:1em;outline:none;padding:.5em;&.style-module_rounded__1cccR{border-radius:2em;padding:.5em 1em}&:focus,&:hover{border-color:var(--primary-s-2)}}.style-module_label__DpR-I{display:flex;flex-direction:column;font-family:inherit;gap:.25em}.style-module_label_text__oWCYY{font-size:.9em}";
var inputStyles = {"input":"style-module_input__C2tin","rounded":"style-module_rounded__1cccR","label":"style-module_label__DpR-I","label_text":"style-module_label_text__oWCYY"};
styleInject(css_248z$2);
var _tmpl$$2 = /*#__PURE__*/template(`<input>`),
_tmpl$2$1 = /*#__PURE__*/template(`<label>`),
_tmpl$3 = /*#__PURE__*/template(`<div>`);
const Input = props => {
const [local, rest] = splitProps(props, ['rounded']);
return (() => {
var _el$ = _tmpl$$2();
spread(_el$, mergeProps$1(rest, {
get ["class"]() {
return `${inputStyles.input} ${props.class}`;
},
get classList() {
return {
[inputStyles.rounded]: local.rounded
};
}
}), false, false);
return _el$;
})();
};
const Label = props => (() => {
var _el$2 = _tmpl$2$1();
spread(_el$2, mergeProps$1(props, {
get ["class"]() {
return `${inputStyles.label} ${props.class}`;
}
}), false, false);
return _el$2;
})();
const LabelText = props => (() => {
var _el$3 = _tmpl$3();
spread(_el$3, mergeProps$1(props, {
get ["class"]() {
return `${inputStyles.label_text} ${props.class}`;
}
}), false, false);
return _el$3;
})();
var css_248z$1 = ".style-module_range_input_wrapper__AK17v{display:flex;flex-direction:column;gap:0;position:relative;&:hover{.style-module_value__YU22n{color:var(--primary-b)}}&:has(.style-module_range_input__ec25V:hover){.style-module_value_bar__dFiwb{background:var(--primary-b)}}}.style-module_range_input__ec25V{appearance:none;background:transparent;font-size:1em;height:1.5em;margin:0;outline:none;width:100%;z-index:4;&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--text);border:none;border-radius:50%;cursor:pointer;height:1em;outline:.125em solid transparent;outline-offset:.125em;transition:all .2s ease-in-out;width:1em}&::-moz-range-thumb{-webkit-appearance:none;appearance:none;background:var(--text);border:none;border-radius:50%;cursor:pointer;height:1em;outline:.125em solid transparent;outline-offset:.125em;transition:all .2s ease-in-out;width:1em}&:hover{&::-moz-range-thumb{background:var(--primary-b)}&::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary-b)}}&:focus{&::-moz-range-thumb{background:var(--primary-b);outline:.125em solid var(--primary-b)}&::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary-b);outline:.125em solid var(--primary-b)}}&:active{&::-moz-range-thumb{outline:.125em solid var(--primary-s-4)}&::-webkit-slider-thumb{-webkit-appearance:none;outline:.125em solid var(--primary-s-4)}}}.style-module_label_row__EFMAS{align-items:center;display:flex;gap:.5em;height:1.5em;justify-content:space-between}.style-module_value__YU22n{color:var(--text);font-weight:700;text-align:right;transition:color .2s ease;width:3ch}.style-module_slider_bar__62Dhx{background:var(--surface-0);border-radius:.5em;bottom:.25em;height:1em;width:100%;z-index:1}.style-module_slider_bar__62Dhx,.style-module_value_bar__dFiwb{pointer-events:none;position:absolute;transition:width 0s ease,background .2s ease}.style-module_value_bar__dFiwb{background:var(--text);border-radius:.25em;bottom:.5em;height:.5em;margin:0 .275em;opacity:.5;width:calc(var(--width, 0)/100*(100% - .75em));z-index:2}";
var styles$1 = {"range_input_wrapper":"style-module_range_input_wrapper__AK17v","value":"style-module_value__YU22n","range_input":"style-module_range_input__ec25V","value_bar":"style-module_value_bar__dFiwb","label_row":"style-module_label_row__EFMAS","slider_bar":"style-module_slider_bar__62Dhx"};
styleInject(css_248z$1);
var _tmpl$$1 = /*#__PURE__*/template(`<div>`),
_tmpl$2 = /*#__PURE__*/template(`<label><div><div></div></div><div></div><div></div><input type=range>`);
const RangeInput = props => {
let Input = null;
onMount(() => {
const input = Input;
if (input) {
// Call the input handler to update the value
props.onChange({
target: input,
currentTarget: input
});
}
});
return (() => {
var _el$ = _tmpl$2(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.firstChild,
_el$5 = _el$2.nextSibling,
_el$6 = _el$5.nextSibling,
_el$7 = _el$6.nextSibling;
insert(_el$3, () => props.label);
insert(_el$2, createComponent(Show, {
get when() {
return props.showValue !== false;
},
get children() {
var _el$4 = _tmpl$$1();
insert(_el$4, () => props.value);
effect(() => className(_el$4, styles$1.value));
return _el$4;
}
}), null);
addEventListener(_el$7, "input", props.onChange, true);
var _ref$ = Input;
typeof _ref$ === "function" ? use(_ref$, _el$7) : Input = _el$7;
effect(_p$ => {
var _v$ = styles$1.range_input_wrapper,
_v$2 = styles$1.label_row,
_v$3 = inputStyles.label_text,
_v$4 = styles$1.slider_bar,
_v$5 = styles$1.value_bar,
_v$6 = `${(props.value - props.min) / (props.max - props.min) * 100}`,
_v$7 = styles$1.range_input,
_v$8 = props.min,
_v$9 = props.max,
_v$10 = props.step;
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
_v$4 !== _p$.o && className(_el$5, _p$.o = _v$4);
_v$5 !== _p$.i && className(_el$6, _p$.i = _v$5);
_v$6 !== _p$.n && ((_p$.n = _v$6) != null ? _el$6.style.setProperty("--width", _v$6) : _el$6.style.removeProperty("--width"));
_v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
_v$8 !== _p$.h && setAttribute(_el$7, "min", _p$.h = _v$8);
_v$9 !== _p$.r && setAttribute(_el$7, "max", _p$.r = _v$9);
_v$10 !== _p$.d && setAttribute(_el$7, "step", _p$.d = _v$10);
return _p$;
}, {
e: undefined,
t: undefined,
a: undefined,
o: undefined,
i: undefined,
n: undefined,
s: undefined,
h: undefined,
r: undefined,
d: undefined
});
effect(() => _el$7.value = props.value);
return _el$;
})();
};
delegateEvents(["input"]);
var css_248z = ".style-module_switch_input__2apll{--check-width:max(0.1em,2px);--check-contrast-color:var(--surface-0);--check-color:var(--text);--check-color-hover:var(--textS-0);appearance:none;background:var(--surface-0);border:.1em solid var(--border);border-radius:.25em;cursor:pointer;font-size:inherit;height:1em;margin:0;outline:none;transition:background-color .2s,border-color .2s,color .2s;width:1em;z-index:4;&:hover{background:var(--surface-1);border-color:var(--primary-s-6)}&:focus{outline:.125em solid var(--primary-b);outline-offset:.125em}&:checked{background:var(--check-color);border-color:var(--check-color);&:before{border-bottom:var(--check-width) solid var(--check-contrast-color);border-radius:0 0 var(--check-width) 0;border-right:var(--check-width) solid var(--check-contrast-color);content:\"\";height:.6em;margin-left:.275em;margin-top:.05em;position:absolute;transform:rotate(45deg);width:.3em}&:hover{background:var(--check-color-hover);border-color:var(--check-color-hover)}}}.style-module_switch_label__4iYgC{align-items:center;flex-direction:row}";
var styles = {"switch_input":"style-module_switch_input__2apll","switch_label":"style-module_switch_label__4iYgC"};
styleInject(css_248z);
var _tmpl$ = /*#__PURE__*/template(`<label><input type=checkbox><div>`);
const SwitchInp = props => {
return (() => {
var _el$ = _tmpl$(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.nextSibling;
spread(_el$2, mergeProps$1(props, {
get ["class"]() {
return styles.switch_input;
}
}), false, false);
insert(_el$3, () => props.label);
effect(_p$ => {
var _v$ = `${inputStyles.label} ${styles.switch_label}`,
_v$2 = inputStyles.label_text;
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
return _p$;
}, {
e: undefined,
t: undefined
});
return _el$;
})();
};
export { Button, Card, Cluster, Input, Label, LabelText, RangeInput, Stack, SwitchInp };
//# sourceMappingURL=index.js.map