jclib-ui 1.0.149 → 1.0.150

package/dist/formDesk/formDesk.d.ts

@@ -0,0 +1,26 @@
+export default function FormDesk({ children, labelWidth, sizeBreak, lineShortWidth, gap, ...rest }: {
+    [x: string]: any;
+    children: any;
+    labelWidth?: number | undefined;
+    sizeBreak?: number | undefined;
+    lineShortWidth?: number | undefined;
+    gap?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export function FormDeskLine({ children, label, isShort, className, classNameLabel, classNameCol, extraComp, inpWidth, ...rest }: {
+    [x: string]: any;
+    children: any;
+    label?: string | undefined;
+    isShort?: boolean | undefined;
+    className?: string | undefined;
+    classNameLabel?: string | undefined;
+    classNameCol?: string | undefined;
+    extraComp: any;
+    inpWidth: any;
+}): import("react/jsx-runtime").JSX.Element;
+export function FormDeskGrid({ grid, gap, className, children, ...rest }: {
+    [x: string]: any;
+    grid: any;
+    gap?: number | undefined;
+    className?: string | undefined;
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/formDesk/formDesk.styles.d.ts

@@ -0,0 +1 @@
+export const Container: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export { CheckUpdates } from './update/update';
 export { ScrollContainer } from './ScrollContainer/ScrollContainer';
 export { default as BoxSearch } from './BoxSearch/BoxSearch';
 export { default as PrintButtons } from './printButtons/printButtons';
+export { FormDeskGrid, FormDeskLine, default as FormDesk } from './formDesk/formDesk';
 export { useLocalForage } from './hooks/useLocalForage';
 export { default as useParamId } from './hooks/useParamId';
 export { default as useQuery } from './hooks/useQuery';

package/dist/jclib-ui.es.js

@@ -4222,7 +4222,7 @@ function createApiConfig(obj = initConfig) {
   result.auth = { ...initConfig.auth, ...obj.auth };
   return result;
 }
-const Container$6 = styled.div`
+const Container$7 = styled.div`
   @media (max-width: 767px) {
     overflow-x: auto;
   }
@@ -4542,7 +4542,7 @@ function Table({
   }
   if (!dados || dados.length == 0)
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "alert alert-warning", children: msgSemDados });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$6, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableContainer, { alignTop, sizeBreak, hasBorder: border, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$7, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableContainer, { alignTop, sizeBreak, hasBorder: border, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { colunas, incColActions }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       TableBody,
@@ -4878,7 +4878,7 @@ function BoxColor({ corFonte, setCorFonte, corFundo, setCorFundo }) {
     )
   ] });
 }
-const Container$5 = styled.div`
+const Container$6 = styled.div`
   margin: ${({ noMargin }) => noMargin ? "0" : "5px 0 8px"};
   border: 1px solid var(--bi-color-border);
   border-radius: ${(props) => props.open ? "0 0 var(--pn-border-radius) var(--pn-border-radius)" : "0"};
@@ -4967,7 +4967,7 @@ function BoxInfo({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$5, { open, noMargin, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$6, { open, noMargin, ...rest, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bi-btn-area", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setOpen(!open), children: [
       title,
       " ",
@@ -5018,7 +5018,7 @@ const ButtonClose = ({ ...rest }) => {
 const ButtonBack = ({ ...rest }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStyled, { type: "button", className: "back", ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fa-solid fa-arrow-left" }) });
 };
-const Container$4 = styled.div`
+const Container$5 = styled.div`
   font-size: 1.4rem;
   line-height: 100%;
   color: #fff;
@@ -5080,7 +5080,7 @@ function ButtonTop({ smooth, center }) {
     };
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: visible && /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Container$4,
+    Container$5,
     {
       title: "Ir para o início da tela",
       visible: showBtnTop,
@@ -7657,7 +7657,7 @@ function LinkToMaps({
 function LinkToNewPage({ to: to2, children, ...rest }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: to2 || children, target: "_blank", rel: "noreferrer", ...rest, children: children || to2 });
 }
-const Container$3 = styled.div`
+const Container$4 = styled.div`
   .alert {
     font-weight: bold;
     margin-bottom: 0;
@@ -7683,7 +7683,7 @@ const Container$3 = styled.div`
   }
 `;
 function MessageNoConection() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$3, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$4, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "alert alert-danger", children: "Sem conexão com o servidor!" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
       "Possíveis causas:",
@@ -19128,7 +19128,7 @@ function Input({
       return /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "form-control", onClick: handleClick, ...props });
   }
 }
-const Container$2 = styled.div`
+const Container$3 = styled.div`
   display: inline-block;
 `;
 const Label = styled.span`
@@ -19154,7 +19154,7 @@ const InputCheckBox = ({ disabled, children, name, checked, onChange }) => {
       onChange(event);
     }
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { disabled, onClick: handleClick, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { disabled, onClick: handleClick, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
       checked && /* @__PURE__ */ jsxRuntimeExports.jsx(IconToggleOn, { color: disabled && "silver" }),
       !checked && /* @__PURE__ */ jsxRuntimeExports.jsx(IconToggleOff, { color: disabled && "silver" })
@@ -19458,7 +19458,7 @@ function TextHTML({ value }) {
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { dangerouslySetInnerHTML: { __html: value } });
 }
-const Container$1 = styled.div`
+const Container$2 = styled.div`
   --toggle-color-on: #4169ed;
   --toggle-color-off: #666;
   --toggle-color-inactive: #999;
@@ -19521,7 +19521,7 @@ function Toggle({
       });
     }
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$1, { checked, disabled, className, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$2, { checked, disabled, className, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
       style: {
@@ -19544,7 +19544,7 @@ function Toggle({
     }
   ) });
 }
-const Container = styled.div`
+const Container$1 = styled.div`
   --margin-up: 15px;
   --margin-down: -120px;
 
@@ -19679,7 +19679,7 @@ function CheckUpdates() {
   useLayoutEffect(() => {
     checkUpdate();
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { onClick: handleClick, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: showRef, className: "update-box", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$1, { onClick: handleClick, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: showRef, className: "update-box", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "update-line" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-info-circle" }),
     "Nova versão disponível, atualizando..."
@@ -19800,6 +19800,137 @@ function PrintButtons({ onClose, showTypes }) {
     ] })
   ] });
 }
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-desk-gap);
+
+  hr {
+    margin-block: 1px;
+  }
+
+  .form-desk-line {
+    display: grid;
+    grid-template-columns: var(--form-desk-label-width) 1fr;
+    gap: 0px 8px;
+
+    &[data-has-extra-comp='true'] {
+      grid-template-columns: var(--form-desk-label-width) auto 1fr;
+    }
+
+    .form-desk-label {
+      padding-top: 6px;
+    }
+
+    [data-is-line-short='true'] {
+      width: var(--form-desk-line-short-width);
+    }
+  }
+
+  .form-desk--grid {
+    display: grid;
+
+    & > div:nth-child(n + 2) {
+      --form-desk-label-width: auto;
+      .form-desk-label {
+        text-align: end;
+      }
+    }
+  }
+
+  @media (max-width: ${({ sizeBreak }) => sizeBreak}px) {
+    --form-desk-gap: 12px !important;
+
+    .form-desk-line,
+    .form-desk-line[data-has-extra-comp='true'] {
+      grid-template-columns: 1fr;
+
+      .form-desk-label {
+        padding-top: 0;
+      }
+      [data-is-line-short='true'] {
+        width: 100%;
+      }
+    }
+
+    .form-desk--grid {
+      gap: var(--form-desk-gap) !important;
+      grid-template-columns: 1fr !important;
+
+      & > div:nth-child(n + 2) {
+        .form-desk-label {
+          text-align: start;
+        }
+      }
+    }
+  }
+`;
+function FormDesk({
+  children,
+  labelWidth = 100,
+  sizeBreak = 767,
+  lineShortWidth = 250,
+  gap = "8px",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Container,
+    {
+      style: {
+        "--form-desk-label-width": `${labelWidth}px`,
+        "--form-desk-line-short-width": `${lineShortWidth}px`,
+        "--form-desk-gap": gap
+      },
+      sizeBreak,
+      ...rest,
+      children
+    }
+  );
+}
+function FormDeskLine({
+  children,
+  label = "",
+  isShort = false,
+  className = "",
+  classNameLabel = "",
+  classNameCol = "",
+  extraComp,
+  inpWidth,
+  ...rest
+}) {
+  const styles = {};
+  if (inpWidth) {
+    styles["--form-desk-line-short-width"] = inpWidth;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `form-desk-line  ${className}`,
+      "data-has-extra-comp": extraComp ? "true" : "false",
+      ...rest,
+      style: { ...rest.styles, ...styles },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: `form-desk-label ${classNameLabel}`, children: label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNameCol, "data-is-line-short": String(isShort), children }),
+        extraComp && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-auto", children: extraComp })
+      ]
+    }
+  );
+}
+function FormDeskGrid({ grid, gap = 25, className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: `form-desk--grid ${className}`,
+      style: {
+        gridTemplateColumns: grid,
+        gap
+      },
+      ...rest,
+      children
+    }
+  );
+}
 const report = localforage.createInstance({
   name: "report",
   storeName: "report"
@@ -20778,6 +20909,9 @@ export {
   DataItem,
   DropDownButton,
   DynamicCounter,
+  FormDesk,
+  FormDeskGrid,
+  FormDeskLine,
   FormEdit,
   FormEnter,
   FormatData,