@devtable/settings-form 2.1.0 → 2.2.0

package/dist/settings-form/src/datasource/add-data-source.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { IStyles } from "./styles";
 interface IAddDataSource {
+    styles?: IStyles;
     onSuccess: () => void;
 }
-export declare function AddDataSource({ onSuccess }: IAddDataSource): JSX.Element;
+export declare function AddDataSource({ onSuccess, styles }: IAddDataSource): JSX.Element;
 export {};

package/dist/settings-form/src/datasource/data-source-list.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
-export declare function DataSourceList(): JSX.Element;
+import { IStyles } from "./styles";
+interface IDataSourceList {
+    styles?: IStyles;
+}
+export declare function DataSourceList({ styles }: IDataSourceList): JSX.Element;
+export {};

package/dist/settings-form/src/datasource/delete-data-source.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
-export declare function DeleteDataSource({ id, name, onSuccess }: {
+import { IStyles } from "./styles";
+interface IDeleteDataSource {
     id: string;
     name: string;
     onSuccess: () => void;
-}): JSX.Element;
+    styles?: IStyles;
+}
+export declare function DeleteDataSource({ id, name, onSuccess, styles }: IDeleteDataSource): JSX.Element;
+export {};

package/dist/settings-form/src/datasource/styles.d.ts

@@ -0,0 +1,6 @@
+import { MantineSize } from "@mantine/core";
+export interface IStyles {
+    size: MantineSize;
+    spacing: MantineSize;
+}
+export declare const defaultStyles: IStyles;

package/dist/settings-form.es.js

@@ -62,6 +62,10 @@ const datasource = {
 const APICaller = {
   datasource
 };
+const defaultStyles = {
+  size: "sm",
+  spacing: "md"
+};
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -96,7 +100,8 @@ const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
 function AddDataSourceForm({
-  postSubmit
+  postSubmit,
+  styles = defaultStyles
 }) {
   const {
     control,
@@ -159,7 +164,8 @@ function AddDataSourceForm({
           field
         }) => /* @__PURE__ */ jsx(SegmentedControl, {
           fullWidth: true,
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           data: [{
             label: "PostgreSQL",
             value: "postgresql"
@@ -179,7 +185,8 @@ function AddDataSourceForm({
         render: ({
           field
         }) => /* @__PURE__ */ jsx(TextInput, {
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           required: true,
           label: "Name",
           placeholder: "A unique name",
@@ -196,7 +203,8 @@ function AddDataSourceForm({
           render: ({
             field
           }) => /* @__PURE__ */ jsx(TextInput, {
-            mb: "md",
+            mb: styles.spacing,
+            size: styles.size,
             required: true,
             label: "Host",
             sx: {
@@ -210,7 +218,8 @@ function AddDataSourceForm({
           render: ({
             field
           }) => /* @__PURE__ */ jsx(NumberInput, {
-            mb: "md",
+            mb: styles.spacing,
+            size: styles.size,
             required: true,
             label: "Port",
             hideControls: true,
@@ -226,7 +235,8 @@ function AddDataSourceForm({
         render: ({
           field
         }) => /* @__PURE__ */ jsx(TextInput, {
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           required: true,
           label: "Username",
           ...field
@@ -237,7 +247,8 @@ function AddDataSourceForm({
         render: ({
           field
         }) => /* @__PURE__ */ jsx(PasswordInput, {
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           required: true,
           label: "Password",
           ...field
@@ -248,16 +259,18 @@ function AddDataSourceForm({
         render: ({
           field
         }) => /* @__PURE__ */ jsx(TextInput, {
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           required: true,
           label: "Database",
           ...field
         })
       }), /* @__PURE__ */ jsx(Group, {
         position: "right",
-        mt: "md",
+        mt: styles.spacing,
         children: /* @__PURE__ */ jsx(Button, {
           type: "submit",
+          size: styles.size,
           children: "Save"
         })
       })]
@@ -265,7 +278,8 @@ function AddDataSourceForm({
   });
 }
 function AddDataSource({
-  onSuccess
+  onSuccess,
+  styles = defaultStyles
 }) {
   const [opened, setOpened] = require$$0.useState(false);
   const open = () => setOpened(true);
@@ -285,10 +299,11 @@ function AddDataSource({
         e.stopPropagation();
       },
       children: /* @__PURE__ */ jsx(AddDataSourceForm, {
-        postSubmit
+        postSubmit,
+        styles
       })
     }), /* @__PURE__ */ jsx(Button, {
-      size: "sm",
+      size: styles.size,
       onClick: open,
       leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
         size: 20
@@ -300,7 +315,8 @@ function AddDataSource({
 function DeleteDataSource({
   id,
   name,
-  onSuccess
+  onSuccess,
+  styles = defaultStyles
 }) {
   const modals = useModals();
   const doDelete = async () => {
@@ -325,7 +341,7 @@ function DeleteDataSource({
   const confirmAndDelete = () => modals.openConfirmModal({
     title: "Delete this data source?",
     children: /* @__PURE__ */ jsx(Text, {
-      size: "sm",
+      size: styles.size,
       children: "This action won't affect your database."
     }),
     labels: {
@@ -336,7 +352,7 @@ function DeleteDataSource({
     onConfirm: doDelete
   });
   return /* @__PURE__ */ jsx(Button, {
-    size: "sm",
+    size: styles.size,
     color: "red",
     onClick: confirmAndDelete,
     leftIcon: /* @__PURE__ */ jsx(Trash, {
@@ -345,7 +361,9 @@ function DeleteDataSource({
     children: "Delete"
   });
 }
-function DataSourceList() {
+function DataSourceList({
+  styles = defaultStyles
+}) {
   const {
     data = [],
     loading,
@@ -360,22 +378,22 @@ function DataSourceList() {
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Group, {
-      pt: "md",
+      pt: styles.spacing,
       position: "right",
       children: /* @__PURE__ */ jsx(AddDataSource, {
         onSuccess: refresh
       })
     }), /* @__PURE__ */ jsxs(Box, {
-      mt: "xl",
+      mt: styles.spacing,
       sx: {
         position: "relative"
       },
       children: [/* @__PURE__ */ jsx(LoadingOverlay, {
         visible: loading
       }), /* @__PURE__ */ jsxs(Table, {
-        horizontalSpacing: "md",
-        verticalSpacing: "md",
-        fontSize: "md",
+        horizontalSpacing: styles.spacing,
+        verticalSpacing: styles.spacing,
+        fontSize: styles.size,
         highlightOnHover: true,
         children: [/* @__PURE__ */ jsx("thead", {
           children: /* @__PURE__ */ jsxs("tr", {

package/dist/settings-form.umd.js

@@ -1,4 +1,4 @@
-(function(o,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("@mantine/core"),require("react-hook-form"),require("@mantine/notifications"),require("react"),require("tabler-icons-react"),require("axios"),require("ahooks"),require("@mantine/modals")):typeof define=="function"&&define.amd?define(["exports","@mantine/core","react-hook-form","@mantine/notifications","react","tabler-icons-react","axios","ahooks","@mantine/modals"],a):(o=typeof globalThis!="undefined"?globalThis:o||self,a(o["settings-form"]={},o["@mantine/core"],o["react-hook-form"],o["@mantine/notifications"],o.React,o["tabler-icons-react"],o.axios,o.ahooks,o["@mantine/modals"]))})(this,function(o,a,c,m,v,b,C,T,P){"use strict";function y(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var x=y(v),O=y(C);const g=(t=>(r,i,n={})=>{const s={"X-Requested-With":"XMLHttpRequest","Content-Type":n.string?"application/x-www-form-urlencoded":"application/json",...n.headers},l={baseURL:"http://localhost:31200",method:t,url:r,params:t==="GET"?i:n.params,headers:s};return["POST","PUT"].includes(t)&&(l.data=n.string?JSON.stringify(i):i),O.default(l).then(u=>u.data).catch(u=>Promise.reject(u))})("POST"),S={datasource:{list:async()=>await g("/datasource/list",{filter:{},sort:{field:"create_time",order:"ASC"},pagination:{page:1,pagesize:100}}),create:async(t,r,i)=>{try{return await g("/datasource/create",{type:t,key:r,config:i})}catch(n){return console.error(n),!1}},delete:async t=>{await g("/datasource/delete",{id:t})}}};var p={exports:{}},h={};/**
+(function(o,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("@mantine/core"),require("react-hook-form"),require("@mantine/notifications"),require("react"),require("tabler-icons-react"),require("axios"),require("ahooks"),require("@mantine/modals")):typeof define=="function"&&define.amd?define(["exports","@mantine/core","react-hook-form","@mantine/notifications","react","tabler-icons-react","axios","ahooks","@mantine/modals"],i):(o=typeof globalThis!="undefined"?globalThis:o||self,i(o["settings-form"]={},o["@mantine/core"],o["react-hook-form"],o["@mantine/notifications"],o.React,o["tabler-icons-react"],o.axios,o.ahooks,o["@mantine/modals"]))})(this,function(o,i,u,p,T,z,P,y,O){"use strict";function w(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var _=w(T),j=w(P);const S=(r=>(t,a,n={})=>{const s={"X-Requested-With":"XMLHttpRequest","Content-Type":n.string?"application/x-www-form-urlencoded":"application/json",...n.headers},d={baseURL:"http://localhost:31200",method:r,url:t,params:r==="GET"?a:n.params,headers:s};return["POST","PUT"].includes(r)&&(d.data=n.string?JSON.stringify(a):a),j.default(d).then(l=>l.data).catch(l=>Promise.reject(l))})("POST"),b={datasource:{list:async()=>await S("/datasource/list",{filter:{},sort:{field:"create_time",order:"ASC"},pagination:{page:1,pagesize:100}}),create:async(r,t,a)=>{try{return await S("/datasource/create",{type:r,key:t,config:a})}catch(n){return console.error(n),!1}},delete:async r=>{await S("/datasource/delete",{id:r})}}},m={size:"sm",spacing:"md"};var h={exports:{}},g={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,4 +6,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var j=x.default,A=Symbol.for("react.element"),R=Symbol.for("react.fragment"),I=Object.prototype.hasOwnProperty,N=j.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,L={key:!0,ref:!0,__self:!0,__source:!0};function w(t,r,i){var n,s={},l=null,u=null;i!==void 0&&(l=""+i),r.key!==void 0&&(l=""+r.key),r.ref!==void 0&&(u=r.ref);for(n in r)I.call(r,n)&&!L.hasOwnProperty(n)&&(s[n]=r[n]);if(t&&t.defaultProps)for(n in r=t.defaultProps,r)s[n]===void 0&&(s[n]=r[n]);return{$$typeof:A,type:t,key:l,ref:u,props:s,_owner:N.current}}h.Fragment=R,h.jsx=w,h.jsxs=w,p.exports=h;const e=p.exports.jsx,f=p.exports.jsxs,_=p.exports.Fragment;function z({postSubmit:t}){const{control:r,handleSubmit:i,formState:{errors:n,isValidating:s,isValid:l}}=c.useForm({defaultValues:{type:"postgresql",key:"",config:{host:"",port:5432,username:"",password:"",database:""}}}),u=async({type:d,key:M,config:k})=>{if(m.showNotification({id:"for-creating",title:"Pending",message:"Adding data source...",loading:!0}),!await S.datasource.create(d,M,k)){m.updateNotification({id:"for-creating",title:"Failed",message:"Test connection failed with given info",color:"red"});return}m.updateNotification({id:"for-creating",title:"Successful",message:"Data source is added",color:"green"}),t()};return e(a.Box,{mx:"auto",children:f("form",{onSubmit:i(u),children:[e(c.Controller,{name:"type",control:r,render:({field:d})=>e(a.SegmentedControl,{fullWidth:!0,mb:"md",data:[{label:"PostgreSQL",value:"postgresql"},{label:"MySQL",value:"mysql"},{label:"HTTP",value:"http",disabled:!0}],...d})}),e(c.Controller,{name:"key",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Name",placeholder:"A unique name",...d})}),e(a.Divider,{label:"Connection Info",labelPosition:"center"}),f(a.Group,{grow:!0,children:[e(c.Controller,{name:"config.host",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Host",sx:{flexGrow:1},...d})}),e(c.Controller,{name:"config.port",control:r,render:({field:d})=>e(a.NumberInput,{mb:"md",required:!0,label:"Port",hideControls:!0,sx:{width:"8em"},...d})})]}),e(c.Controller,{name:"config.username",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Username",...d})}),e(c.Controller,{name:"config.password",control:r,render:({field:d})=>e(a.PasswordInput,{mb:"md",required:!0,label:"Password",...d})}),e(c.Controller,{name:"config.database",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Database",...d})}),e(a.Group,{position:"right",mt:"md",children:e(a.Button,{type:"submit",children:"Save"})})]})})}function q({onSuccess:t}){const[r,i]=x.default.useState(!1),n=()=>i(!0),s=()=>i(!1),l=()=>{t(),s()};return f(_,{children:[e(a.Modal,{overflow:"inside",opened:r,onClose:()=>i(!1),title:"Add a data source",trapFocus:!0,onDragStart:u=>{u.stopPropagation()},children:e(z,{postSubmit:l})}),e(a.Button,{size:"sm",onClick:n,leftIcon:e(b.PlaylistAdd,{size:20}),children:"Add a Data Source"})]})}function D({id:t,name:r,onSuccess:i}){const n=P.useModals(),s=async()=>{!t||(m.showNotification({id:"for-deleting",title:"Pending",message:"Deleting data source...",loading:!0}),await S.datasource.delete(t),m.updateNotification({id:"for-deleting",title:"Successful",message:`Data source [${r}] is deleted`,color:"green"}),i())},l=()=>n.openConfirmModal({title:"Delete this data source?",children:e(a.Text,{size:"sm",children:"This action won't affect your database."}),labels:{confirm:"Confirm",cancel:"Cancel"},onCancel:()=>console.log("Cancel"),onConfirm:s});return e(a.Button,{size:"sm",color:"red",onClick:l,leftIcon:e(b.Trash,{size:20}),children:"Delete"})}function E(){const{data:t=[],loading:r,refresh:i}=T.useRequest(async()=>{const{data:n}=await S.datasource.list();return n},{refreshDeps:[]});return f(_,{children:[e(a.Group,{pt:"md",position:"right",children:e(q,{onSuccess:i})}),f(a.Box,{mt:"xl",sx:{position:"relative"},children:[e(a.LoadingOverlay,{visible:r}),f(a.Table,{horizontalSpacing:"md",verticalSpacing:"md",fontSize:"md",highlightOnHover:!0,children:[e("thead",{children:f("tr",{children:[e("th",{children:"Type"}),e("th",{children:"Name"}),e("th",{children:"Action"})]})}),e("tbody",{children:t.map(({id:n,key:s,type:l})=>f("tr",{children:[e("td",{width:200,children:l}),e("td",{children:s}),e("td",{width:200,children:e(a.Group,{position:"left",children:e(D,{id:n,name:s,onSuccess:i})})})]},s))})]})]})]})}o.AddDataSource=q,o.DataSourceList=E,o.DeleteDataSource=D,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ */var A=_.default,R=Symbol.for("react.element"),I=Symbol.for("react.fragment"),N=Object.prototype.hasOwnProperty,L=A.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,E={key:!0,ref:!0,__self:!0,__source:!0};function q(r,t,a){var n,s={},d=null,l=null;a!==void 0&&(d=""+a),t.key!==void 0&&(d=""+t.key),t.ref!==void 0&&(l=t.ref);for(n in t)N.call(t,n)&&!E.hasOwnProperty(n)&&(s[n]=t[n]);if(r&&r.defaultProps)for(n in t=r.defaultProps,t)s[n]===void 0&&(s[n]=t[n]);return{$$typeof:R,type:r,key:d,ref:l,props:s,_owner:L.current}}g.Fragment=I,g.jsx=q,g.jsxs=q,h.exports=g;const e=h.exports.jsx,f=h.exports.jsxs,D=h.exports.Fragment;function M({postSubmit:r,styles:t=m}){const{control:a,handleSubmit:n,formState:{errors:s,isValidating:d,isValid:l}}=u.useForm({defaultValues:{type:"postgresql",key:"",config:{host:"",port:5432,username:"",password:"",database:""}}}),x=async({type:c,key:B,config:G})=>{if(p.showNotification({id:"for-creating",title:"Pending",message:"Adding data source...",loading:!0}),!await b.datasource.create(c,B,G)){p.updateNotification({id:"for-creating",title:"Failed",message:"Test connection failed with given info",color:"red"});return}p.updateNotification({id:"for-creating",title:"Successful",message:"Data source is added",color:"green"}),r()};return e(i.Box,{mx:"auto",children:f("form",{onSubmit:n(x),children:[e(u.Controller,{name:"type",control:a,render:({field:c})=>e(i.SegmentedControl,{fullWidth:!0,mb:t.spacing,size:t.size,data:[{label:"PostgreSQL",value:"postgresql"},{label:"MySQL",value:"mysql"},{label:"HTTP",value:"http",disabled:!0}],...c})}),e(u.Controller,{name:"key",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Name",placeholder:"A unique name",...c})}),e(i.Divider,{label:"Connection Info",labelPosition:"center"}),f(i.Group,{grow:!0,children:[e(u.Controller,{name:"config.host",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Host",sx:{flexGrow:1},...c})}),e(u.Controller,{name:"config.port",control:a,render:({field:c})=>e(i.NumberInput,{mb:t.spacing,size:t.size,required:!0,label:"Port",hideControls:!0,sx:{width:"8em"},...c})})]}),e(u.Controller,{name:"config.username",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Username",...c})}),e(u.Controller,{name:"config.password",control:a,render:({field:c})=>e(i.PasswordInput,{mb:t.spacing,size:t.size,required:!0,label:"Password",...c})}),e(u.Controller,{name:"config.database",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Database",...c})}),e(i.Group,{position:"right",mt:t.spacing,children:e(i.Button,{type:"submit",size:t.size,children:"Save"})})]})})}function v({onSuccess:r,styles:t=m}){const[a,n]=_.default.useState(!1),s=()=>n(!0),d=()=>n(!1),l=()=>{r(),d()};return f(D,{children:[e(i.Modal,{overflow:"inside",opened:a,onClose:()=>n(!1),title:"Add a data source",trapFocus:!0,onDragStart:x=>{x.stopPropagation()},children:e(M,{postSubmit:l,styles:t})}),e(i.Button,{size:t.size,onClick:s,leftIcon:e(z.PlaylistAdd,{size:20}),children:"Add a Data Source"})]})}function C({id:r,name:t,onSuccess:a,styles:n=m}){const s=O.useModals(),d=async()=>{!r||(p.showNotification({id:"for-deleting",title:"Pending",message:"Deleting data source...",loading:!0}),await b.datasource.delete(r),p.updateNotification({id:"for-deleting",title:"Successful",message:`Data source [${t}] is deleted`,color:"green"}),a())},l=()=>s.openConfirmModal({title:"Delete this data source?",children:e(i.Text,{size:n.size,children:"This action won't affect your database."}),labels:{confirm:"Confirm",cancel:"Cancel"},onCancel:()=>console.log("Cancel"),onConfirm:d});return e(i.Button,{size:n.size,color:"red",onClick:l,leftIcon:e(z.Trash,{size:20}),children:"Delete"})}function k({styles:r=m}){const{data:t=[],loading:a,refresh:n}=y.useRequest(async()=>{const{data:s}=await b.datasource.list();return s},{refreshDeps:[]});return f(D,{children:[e(i.Group,{pt:r.spacing,position:"right",children:e(v,{onSuccess:n})}),f(i.Box,{mt:r.spacing,sx:{position:"relative"},children:[e(i.LoadingOverlay,{visible:a}),f(i.Table,{horizontalSpacing:r.spacing,verticalSpacing:r.spacing,fontSize:r.size,highlightOnHover:!0,children:[e("thead",{children:f("tr",{children:[e("th",{children:"Type"}),e("th",{children:"Name"}),e("th",{children:"Action"})]})}),e("tbody",{children:t.map(({id:s,key:d,type:l})=>f("tr",{children:[e("td",{width:200,children:l}),e("td",{children:d}),e("td",{width:200,children:e(i.Group,{position:"left",children:e(C,{id:s,name:d,onSuccess:n})})})]},d))})]})]})]})}o.AddDataSource=v,o.DataSourceList=k,o.DeleteDataSource=C,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"