@jay-js/ui
Version:
A library of UI components for Jay JS with Tailwind CSS and daisyUI.
245 lines (244 loc) • 7.64 kB
JavaScript
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _object_without_properties(source, excluded) {
if (source == null) return {};
var target = _object_without_properties_loose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
import "./TextInput.style.css";
import { Box } from "../Box/Box.js";
import { Input } from "../Input/Input.js";
import { Typography } from "../Typography/Typography.js";
import { mergeClasses } from "../../utils/mergeClasses.js";
import { Base } from "../Base/index.js";
export function TextInput(_param = {
tag: "input"
}) {
var { label, labelAlt, helpers, placeholder, bordered, ghost, color, inputSize, startAdornment, endAdornment } = _param, props = _object_without_properties(_param, [
"label",
"labelAlt",
"helpers",
"placeholder",
"bordered",
"ghost",
"color",
"inputSize",
"startAdornment",
"endAdornment"
]);
const className = mergeClasses([
"input",
ghost ? "input-ghost" : "",
color,
inputSize,
props.className,
"w-full",
bordered ? "" : "border-none",
placeholder ? "border-none" : "",
"outline-none",
"focus:outline-none"
]);
const fieldsetClassName = mergeClasses([
"-top-1",
"left-0",
"right-0",
"bottom-0",
"absolute",
"margin-0",
"pointer-events-none",
"overflow-hidden",
"min-w-[0%]",
"rounded-lg",
color,
bordered ? "input-bordered border" : ""
]);
const legendClassName = mergeClasses([
"ml-2",
"float-none",
"w-auto",
"block",
"h-2",
"text-xs",
"invisible",
"max-w-[0.01px]",
"p-0",
"whitespace-nowrap"
]);
const legendSpanClassName = mergeClasses([
"opacity-0",
placeholder ? "px-1" : "",
"text-xs"
]);
const labelClassName = mergeClasses([
"absolute",
"top-[50%]",
"left-3",
"transform",
"translate-y-[-50%]",
"pointer-events-none",
"transition-all",
"duration-200",
"ease-out",
placeholder ? "px-1" : ""
]);
const inputElement = Input(_object_spread_props(_object_spread({}, props), {
className,
tag: "input",
placeholder: " "
}));
function getLabels() {
if (label || labelAlt) {
return Box({
className: "label",
children: [
label ? Typography({
tag: "span",
className: "label-text",
children: label
}) : "",
labelAlt ? Typography({
tag: "span",
className: "label-text-alt",
children: labelAlt
}) : ""
]
});
}
return "";
}
function getHelpers() {
if (helpers) {
return Box({
className: "label",
children: helpers
});
}
return "";
}
function getStartAdornment() {
if (startAdornment) {
return Box({
className: "absolute left-3 top-1/2 z-2 transform -translate-y-1/2",
children: typeof startAdornment === "function" ? startAdornment(inputElement) : startAdornment
});
}
return "";
}
function getEndAdornment() {
if (endAdornment) {
return Box({
className: "absolute right-3 top-1/2 z-2 transform -translate-y-1/2",
children: typeof endAdornment === "function" ? endAdornment(inputElement) : endAdornment
});
}
return "";
}
return Box({
tag: "div",
className: "form-control relative",
children: [
getLabels(),
Box({
className: "input-form-control relative",
children: [
getStartAdornment(),
inputElement,
placeholder ? Typography({
tag: "label",
className: labelClassName,
children: placeholder
}) : "",
Base({
tag: "fieldset",
className: fieldsetClassName,
children: [
Base({
tag: "legend",
className: legendClassName,
children: Typography({
tag: "span",
className: legendSpanClassName,
children: placeholder
})
})
]
}),
getEndAdornment()
]
}),
getHelpers()
]
});
}