@nethru/ui 1.0.28 → 1.0.30

package/dist/AppendableFormList.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { Box, Button, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function AppendableFormList({
+  forms,
+  onAppend,
+  onRemove
+}) {
+  return /*#__PURE__*/_jsxs(Stack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsxs(_Fragment, {
+      children: [forms.map((form, index) => /*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        alignItems: "end",
+        gap: 2,
+        children: [form, /*#__PURE__*/_jsx(Tooltip, {
+          title: "\uC0AD\uC81C",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: _ => onRemove(index),
+            size: "small",
+            sx: {
+              ml: '-10px',
+              mb: '-5px'
+            },
+            children: /*#__PURE__*/_jsx(DeleteIcon, {
+              fontSize: "small"
+            })
+          })
+        })]
+      }, index)), forms.length === 0 && /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        sx: {
+          color: '#999'
+        },
+        children: "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+        onClick: onAppend,
+        children: "\uCD94\uAC00"
+      })
+    })]
+  });
+}

package/dist/ColumnedSection.js

@@ -0,0 +1,62 @@
+import { List, Stack } from "@mui/material";
+import ListItem from "./ListItem";
+import ListItemGrid from "./ListItemGrid";
+import { useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ColumnedSection({
+  columns,
+  labels = [],
+  contents = [],
+  sx
+}) {
+  const width = useMemo(() => {
+    return `${100 / columns}%`;
+  }, [columns]);
+  const styles = useMemo(() => {
+    return {
+      width: width,
+      bgcolor: '#f8f9fa',
+      p: '10px 20px',
+      borderRadius: '7px'
+    };
+  }, [width]);
+  return /*#__PURE__*/_jsx(List, {
+    children: /*#__PURE__*/_jsxs(ListItem, {
+      grid: true,
+      children: [labels.length > 0 && /*#__PURE__*/_jsx(ListItemGrid, {
+        xs: 12,
+        children: /*#__PURE__*/_jsx(Stack, {
+          direction: "row",
+          gap: 1,
+          children: labels.map((label, index) => /*#__PURE__*/_jsx(Stack, {
+            spacing: 1,
+            sx: {
+              width: width
+            },
+            children: /*#__PURE__*/_jsx(Stack, {
+              direction: "row",
+              alignItems: "baseline",
+              spacing: 1,
+              children: label
+            })
+          }, index))
+        })
+      }), /*#__PURE__*/_jsx(ListItemGrid, {
+        xs: 12,
+        children: /*#__PURE__*/_jsx(Stack, {
+          direction: "row",
+          gap: 1,
+          children: contents.map((content, index) => /*#__PURE__*/_jsx(Stack, {
+            spacing: 1,
+            sx: {
+              ...styles,
+              ...sx
+            },
+            children: content
+          }, index))
+        })
+      })]
+    })
+  });
+}

package/dist/index.js

@@ -3,9 +3,11 @@ export { default as AccordionDetails } from "./AccordionDetails";
 export { default as AccordionSummary } from "./AccordionSummary";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as AppBar } from "./AppBar";
+export { default as AppendableFormList } from "./AppendableFormList";
 export { default as AvatarDropdown } from "./AvatarDropdown";
 export { default as Checkbox } from "./Checkbox";
 export { default as CircularProgress } from "./CircularProgress";
+export { default as ColumnedSection } from "./ColumnedSection";
 export { default as ConfirmDialog } from "./ConfirmDialog";
 export { default as DataGrid } from "./DataGrid";
 export { default as Dialog } from "./Dialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "main": "dist/index.js",
   "files": [
     "/dist"