@steedos/service-plugin-amis 2.5.0-beta.1 → 2.5.0-beta.10

package/main/default/client/amis.render.client.js

@@ -81,7 +81,7 @@
                               const { $schema, body, render } = props
                               const [schema, setSchema] = amisReact.useState(null);
                               amisReact.useEffect(()=>{
-                                console.log("AmisWrapper===>==useEffect==", comp.amis.render.type, JSON.stringify(props.data?.recordId))
+                                // console.log("AmisWrapper===>==useEffect==", comp.amis.render.type, JSON.stringify(props.data?.recordId))
                                 const result = Component.class(props);
                                 if(result.then && typeof result.then === 'function'){
                                   result.then((data)=>{
@@ -92,7 +92,7 @@
                                   // console.log("AmisWrapper===>==useEffect==result", result)
                                   setSchema(result)
                                 }
-                              }, [JSON.stringify($schema), JSON.stringify(props.data?.recordId)]) //, JSON.stringify(props.data)
+                              }, [JSON.stringify($schema)]) //, JSON.stringify(props.data)
 
                               if (!schema)
                               return render('body', {
@@ -109,8 +109,7 @@
                                 console.trace('Component: ', props, 'Generated Amis Schema: ', schema);
                                 console.groupEnd();
                               }
-
-                              return amisReact.createElement(amisReact.Fragment, null, amisReact.createElement(amisReact.Fragment, null, schema && render ? render('body', schema) : ''), amisReact.createElement(amisReact.Fragment, null, render ? render('body', body) : ''));
+                              return amisReact.createElement(amisReact.Fragment, null, amisReact.createElement(amisReact.Fragment, null, schema && render ? render('body', schema) : ''));
                             }
                           }
                         // 注册amis渲染器
@@ -220,33 +219,33 @@
                 //     return div;
                 // },
                 jumpTo: (to, action) => {
-                if (to === 'goBack') {
-                    return window.history.back();
-                }
+                  if (to === 'goBack') {
+                      return window.history.back();
+                  }
 
-                to = normalizeLink(to);
+                  to = normalizeLink(to);
 
-                if (action && action.actionType === 'url') {
-                    action.blank === true ? window.open(to): (window.location.href = to);
-                    return;
-                }
+                  if (action && action.actionType === 'url') {
+                      action.blank === false ? (window.location.href = to) : window.open(to);
+                      return;
+                  }
 
-                // 主要是支持 nav 中的跳转
-                if (action && to && action.target) {
-                    window.open(to, action.target);
-                    return;
-                }
+                  // 主要是支持 nav 中的跳转
+                  if (action && to && action.target) {
+                      window.open(to, action.target);
+                      return;
+                  }
 
-                if (/^https?:\/\//.test(to)) {
-                    window.location.replace(to);
-                } else {
-                    FlowRouter.go(to);
-                }
+                  if (/^https?:\/\//.test(to)) {
+                      window.location.replace(to);
+                  } else {
+                      FlowRouter.go(to);
+                  }
                 },
                 theme: 'antd',
                 isCurrentUrl: isCurrentUrl,
             };
-
+            // 已弃用
             const AmisRender = function (props) {
                 let env = props.env;
                 const schema = props.schema;
@@ -338,10 +337,10 @@
                   return scoped = ref
                 }
 
-              
                 const amisScope = amisRequire('amis/embed').embed(root, schema, {data, name, locale: getAmisLng()}, Object.assign({}, AmisEnv, env))
                 if(window.SteedosUI && refName){
                   SteedosUI.refs[refName] = amisScope;
+                  SteedosUI.refs[refName].__$schema = schema;
                 }
             };
 

package/main/default/pages/apps_form.page.amis.json

@@ -2,62 +2,64 @@
     "type": "page",
     "body": [
         {
-            "className": "steedos-amis-form",
-            "type": "form",
-            "mode": "normal",
-            "persistData": false,
-            "promptPageLeave": true,
-            "name": "form_edit_${recordId}",
-            "title": "",
+            "type": "service",
+            "className": "col-span-2 m-0",
+            "id": "tabs-options-service",
+            "affixFooter": false,
             "api": {
                 "method": "post",
                 "url": "${context.rootUrl}/graphql",
+                "adaptor": "let data = payload.data;\ndata.tabs_options = [];\nif (data.options && data.options.length) {\n  data.tabs_options = data.options.map(function (option) { \n    option.label = option.label + \"(\" + option.value + \")\";\n    return option;\n  });\n}\ndelete data.options\npayload.data = data;\nreturn payload;\n",
                 "data": {
-                    "$": "$$",
-                    "recordId": "${recordId}",
-                    "modalName": "${modalName}",
-                    "objectName": "${objectName}"
-                },
-                "requestAdaptor": "\nconst formData = api.data.$;\nconst recordId = formData.recordId;\nfor (key in formData){\n    // image、select等字段清空值后保存的空字符串转换为null。\n    if(formData[key] === ''){\n        formData[key] = null;\n    }\n}\nconst objectName = api.data.objectName;\nconst fieldsName = Object.keys(formData);\ndelete formData.created;\ndelete formData.created_by;\ndelete formData.modified;\ndelete formData.modified_by;\ndelete formData._display;\ndelete formData.tabs_options;\ndelete formData.tab_groups_options;\ndelete formData.sldsIconsOptions;\ndelete formData.recordId;\n\n// 新加字段tab_items，值同步回传到老字段tabs中兼容老UI界面\nformData.tabs = [];\nif (formData.tab_items && formData.tab_items.length) { \n    formData.tabs = formData.tab_items.map(function (item) { return item.tab_name; });\n}\n\n/*\ntab_items存储为：\ntab_items: {\n  test1:{\n    group:\"xxx\"\n  },\n  test3:{\n    group:\"yyy\"\n  }\n}\n而不是：\ntab_items: [\n  {\n    \"index\":1,\n    \"group\":\"xxx\"\n  },\n  {\n    \"index\":2,\n    \"group\":\"yyy\"\n  }\n]\n*/\nif (formData.tab_items) { \n    formData.tab_items = _.keyBy(formData.tab_items, \"tab_name\")\n    let tempIndex = 0;\n    _.each(formData.tab_items, function (n, k) {\n      tempIndex++;\n      n.index = tempIndex;\n      delete n.tab_name;\n    });\n}\n\nlet query = `mutation{record: ${objectName}__insert(doc: {__saveData}){_id}}`;\nif(recordId){\n    query = `mutation{record: ${objectName}__update(id: \"${recordId}\", doc: {__saveData}){_id}}`;\n};\ndelete formData._id;\nlet __saveData = JSON.stringify(JSON.stringify(formData));\n\napi.data = {query: query.replace('{__saveData}', __saveData)};\nreturn api;\n",
-                "responseData": {
-                    "recordId": "${record._id}"
+                    "query": "{options:tabs{_id label:label value:name,type,object,desktop,mobile}}"
                 },
-                "adaptor": "\nif (payload.errors) {\n  payload.status = 2;\n  payload.msg = window.t ? window.t(payload.errors[0].message) : payload.errors[0].message;\n}\nreturn payload;",
                 "headers": {
                     "Authorization": "Bearer ${context.tenantId},${context.authToken}"
                 }
             },
-            "initApi": {
-                "method": "post",
-                "url": "${context.rootUrl}/graphql",
-                "sendOn": "!!this.recordId",
-                "adaptor": "var data = payload.data.data[0];\nif(data){\n    //初始化接口返回的字段移除字段值为null的字段\n    for (key in data){\n        if(data[key] === null){\n            delete data[key];\n        }\n    }\n};\nif (data.tab_items && !_.isArray(data.tab_items)) {\n    // 数据库中存储的是对象格式而不是数组，转换为数组用于界面显示\n    let arrTabItems = [];\n    _.each(data.tab_items, function (n, k) {\n        n.tab_name = k;\n        delete n.index;\n        arrTabItems.push(n);\n    });\n    data.tab_items = arrTabItems;\n}\npayload.data = data;\ndelete payload.extensions;\nreturn payload;\n        ",
-                "data": {
-                    "query": "{data:apps(filters:[\"_id\", \"=\", \"${recordId}\"]){_id,name,code,icon_slds,visible, showSidebar, description,tabs,tab_items,tab_groups,objects,mobile_objects,is_creator,mobile,sort,url,is_use_ie,is_use_iframe,is_new_window,on_click,auth_name,secret,is_system,from_code_id,instance_state,created,created_by:created_by__expand{_id,name},modified,modified_by:modified_by__expand{_id,name},_display{visible,is_creator,mobile,is_use_ie,is_use_iframe,is_new_window,is_system,instance_state,created,modified}}}"
-                },
-                "headers": {
-                    "Authorization": "Bearer ${context.tenantId},${context.authToken}"
-                }
-            },
-            "initFetch": true,
+            "placeholder": "-",
+            "messages": {},
             "body": [
                 {
-                    "type": "service",
-                    "className": "col-span-2 m-0",
-                    "id": "tabs-options-service",
-                    "affixFooter": false,
+                    "className": "steedos-amis-form",
+                    "type": "form",
+                    "mode": "normal",
+                    "persistData": false,
+                    "canAccessSuperData": false,
+                    "promptPageLeave": true,
+                    "name": "form_edit_${recordId}",
+                    "title": "",
                     "api": {
                         "method": "post",
                         "url": "${context.rootUrl}/graphql",
-                        "adaptor": "let data = payload.data;\ndata.tabs_options = [];\nif (data.options && data.options.length) {\n  data.tabs_options = data.options.map(function (option) { \n    option.label = option.label + \"(\" + option.value + \")\";\n    return option;\n  });\n}\ndelete data.options\npayload.data = data;\nreturn payload;\n",
                         "data": {
-                            "query": "{options:tabs{_id label:label value:name,type,object,desktop,mobile}}"
+                            "$": "$$",
+                            "recordId": "${recordId}",
+                            "modalName": "${modalName}",
+                            "objectName": "${objectName}"
+                        },
+                        "requestAdaptor": "\nconst formData = api.data.$;\nconst recordId = formData.recordId;\nfor (key in formData){\n    // image、select等字段清空值后保存的空字符串转换为null。\n    if(formData[key] === ''){\n        formData[key] = null;\n    }\n}\nconst objectName = api.data.objectName;\nconst fieldsName = Object.keys(formData);\ndelete formData.created;\ndelete formData.created_by;\ndelete formData.modified;\ndelete formData.modified_by;\ndelete formData._display;\ndelete formData.tabs_options;\ndelete formData.tab_groups_options;\ndelete formData.sldsIconsOptions;\ndelete formData.recordId;\n\n// 新加字段tab_items，值同步回传到老字段tabs中兼容老UI界面\nformData.tabs = [];\nif (formData.tab_items && formData.tab_items.length) { \n    formData.tabs = formData.tab_items.map(function (item) { return item.tab_name; });\n}\n\n/*\ntab_items存储为：\ntab_items: {\n  test1:{\n    group:\"xxx\"\n  },\n  test3:{\n    group:\"yyy\"\n  }\n}\n而不是：\ntab_items: [\n  {\n    \"index\":1,\n    \"group\":\"xxx\"\n  },\n  {\n    \"index\":2,\n    \"group\":\"yyy\"\n  }\n]\n*/\nif (formData.tab_items) { \n    formData.tab_items = _.keyBy(formData.tab_items, \"tab_name\")\n    let tempIndex = 0;\n    _.each(formData.tab_items, function (n, k) {\n      tempIndex++;\n      n.index = tempIndex;\n      delete n.tab_name;\n    });\n}\n\nlet query = `mutation{record: ${objectName}__insert(doc: {__saveData}){_id}}`;\nif(recordId){\n    query = `mutation{record: ${objectName}__update(id: \"${recordId}\", doc: {__saveData}){_id}}`;\n};\ndelete formData._id;\nlet __saveData = JSON.stringify(JSON.stringify(formData));\n\napi.data = {query: query.replace('{__saveData}', __saveData)};\nreturn api;\n",
+                        "responseData": {
+                            "recordId": "${record._id}"
+                        },
+                        "adaptor": "\nif (payload.errors) {\n  payload.status = 2;\n  payload.msg = window.t ? window.t(payload.errors[0].message) : payload.errors[0].message;\n}\nreturn payload;",
+                        "headers": {
+                            "Authorization": "Bearer ${context.tenantId},${context.authToken}"
+                        }
+                    },
+                    "initApi": {
+                        "method": "post",
+                        "url": "${context.rootUrl}/graphql",
+                        "sendOn": "!!this.recordId",
+                        "adaptor": "var data = payload.data.data[0];\nif(data){\n    //初始化接口返回的字段移除字段值为null的字段\n    for (key in data){\n        if(data[key] === null){\n            delete data[key];\n        }\n    }\n};\nif (data.tab_items && !_.isArray(data.tab_items)) {\n    // 数据库中存储的是对象格式而不是数组，转换为数组用于界面显示\n    let arrTabItems = [];\n    _.each(data.tab_items, function (n, k) {\n        n.tab_name = k;\n        delete n.index;\n        arrTabItems.push(n);\n    });\n    data.tab_items = arrTabItems;\n}\npayload.data = data;\ndelete payload.extensions;\nreturn payload;\n        ",
+                        "data": {
+                            "query": "{data:apps(filters:[\"_id\", \"=\", \"${recordId}\"]){_id,name,code,icon_slds,visible, showSidebar, enable_nav_schema, description,tabs,tab_items,tab_groups,objects,mobile_objects,is_creator,mobile,sort,url,is_use_ie,is_use_iframe,is_new_window,on_click,auth_name,secret,is_system,from_code_id,instance_state,created,created_by:created_by__expand{_id,name},modified,modified_by:modified_by__expand{_id,name},_display{visible,is_creator,mobile,is_use_ie,is_use_iframe,is_new_window,is_system,instance_state,created,modified}}}"
                         },
                         "headers": {
                             "Authorization": "Bearer ${context.tenantId},${context.authToken}"
                         }
                     },
-                    "placeholder": "-",
+                    "initFetch": true,
                     "body": [
                         {
                             "type": "tabs",
@@ -506,6 +508,15 @@
                                                             "Authorization": "Bearer ${context.tenantId},${context.authToken}"
                                                         }
                                                     }
+                                                },
+                                                {
+                                                    "name": "enable_nav_schema",
+                                                    "label": "启用自定义导航",
+                                                    "type": "checkbox",
+                                                    "tpl": null,
+                                                    "className": "m-0",
+                                                    "labelClassName": "text-left",
+                                                    "id": "u:07a8a4c5f89"
                                                 }
                                             ],
                                             "size": "none"
@@ -518,39 +529,38 @@
                             "contentClassName": ""
                         }
                     ],
-                    "messages": {}
-                }
-            ],
-            "panelClassName": "m-0 -mt-3",
-            "actions": false,
-            "actionsClassName": "p-sm b-t b-light text-center",
-            "affixFooter": false,
-            "debug": false,
-            "onEvent": {
-                "inited": {
-                    "actions": [
-                        {
-                            "actionType": "custom",
-                            "script": "const data = context.props.data;\nif (!data._id) { \n  return;\n}\nif (data.tab_items) {\n  return;\n}\n\nconst tabOptions = data.tabs_options || [];\nconst tabItems = [];\n// 把应用中原来tabs属性值添加到新的tab_items属性的默认值中\nif (data.tabs && data.tabs.length) {\n  data.tabs.forEach(function (item) {\n    tabItems.push({ tab_name: item });\n  });\n}\nconst pushObjectsToTabItems = function (objects) {\n  objects.forEach(function (item) {\n    // 已经有绑定到指定对象的选项卡就不添加\n    let existObjectItem = !!tabItems.find(function (tabItem) {\n      return !!tabOptions.find(function (option) {\n        return tabItem.tab_name === tabItem.value && option.object === item;\n      });\n    });\n    if (existObjectItem) {\n      return;\n    }\n    // 找到指向指定对象的选项卡\n    let tempOption = tabOptions.find(function (option) {\n      return option.type === \"object\" && option.object === item;\n    });\n    if (!tempOption) {\n      return;\n    }\n    // 选项卡名称如果重复了就不添加\n    let existTabItem = !!tabItems.find(function (tabItem) {\n      return tabItem.tab_name === tempOption.value;\n    });\n    if (existTabItem) {\n      return;\n    }\n    if (tempOption) {\n      tabItems.push({ tab_name: tempOption.value });\n    }\n  });\n}\n// 把应用中原来objects属性值添加到新的tab_items属性的默认值中\nif (data.objects && data.objects.length) {\n  pushObjectsToTabItems(data.objects);\n}\n// 把应用中原来mobile_objects属性值添加到新的tab_items属性的默认值中\nif (data.mobile_objects && data.mobile_objects.length) {\n  pushObjectsToTabItems(data.mobile_objects);\n}\n\ndoAction({\n  actionType: 'setValue',\n  args: {\n    \"value\": { tab_items: tabItems }\n  }\n});"
-                        }
-                    ]
-                },
-                "submitSucc": {
-                    "weight": 0,
-                    "actions": [
-                      {
-                        "actionType": "broadcast",
-                        "args": {
-                            "eventName": "@data.changed.apps"
+                    "panelClassName": "m-0 -mt-3",
+                    "actions": false,
+                    "actionsClassName": "p-sm b-t b-light text-center",
+                    "affixFooter": false,
+                    "debug": false,
+                    "onEvent": {
+                        "inited": {
+                            "actions": [
+                                {
+                                    "actionType": "custom",
+                                    "script": "const data = context.props.data;\nif (!data._id) { \n  return;\n}\nif (data.tab_items) {\n  return;\n}\n\nconst tabOptions = data.tabs_options || [];\nconst tabItems = [];\n// 把应用中原来tabs属性值添加到新的tab_items属性的默认值中\nif (data.tabs && data.tabs.length) {\n  data.tabs.forEach(function (item) {\n    tabItems.push({ tab_name: item });\n  });\n}\nconst pushObjectsToTabItems = function (objects) {\n  objects.forEach(function (item) {\n    // 已经有绑定到指定对象的选项卡就不添加\n    let existObjectItem = !!tabItems.find(function (tabItem) {\n      return !!tabOptions.find(function (option) {\n        return tabItem.tab_name === tabItem.value && option.object === item;\n      });\n    });\n    if (existObjectItem) {\n      return;\n    }\n    // 找到指向指定对象的选项卡\n    let tempOption = tabOptions.find(function (option) {\n      return option.type === \"object\" && option.object === item;\n    });\n    if (!tempOption) {\n      return;\n    }\n    // 选项卡名称如果重复了就不添加\n    let existTabItem = !!tabItems.find(function (tabItem) {\n      return tabItem.tab_name === tempOption.value;\n    });\n    if (existTabItem) {\n      return;\n    }\n    if (tempOption) {\n      tabItems.push({ tab_name: tempOption.value });\n    }\n  });\n}\n// 把应用中原来objects属性值添加到新的tab_items属性的默认值中\nif (data.objects && data.objects.length) {\n  pushObjectsToTabItems(data.objects);\n}\n// 把应用中原来mobile_objects属性值添加到新的tab_items属性的默认值中\nif (data.mobile_objects && data.mobile_objects.length) {\n  pushObjectsToTabItems(data.mobile_objects);\n}\n\ndoAction({\n  actionType: 'setValue',\n  args: {\n    \"value\": { tab_items: tabItems }\n  }\n});"
+                                }
+                            ]
                         },
-                        "data": {
-                            "objectName": "apps"
-                        }
-                      }
-                    ]
-                  }
-            },
-            "id": "apps-form"
+                        "submitSucc": {
+                            "weight": 0,
+                            "actions": [
+                              {
+                                "actionType": "broadcast",
+                                "args": {
+                                    "eventName": "@data.changed.apps"
+                                },
+                                "data": {
+                                    "objectName": "apps"
+                                }
+                              }
+                            ]
+                          }
+                    },
+                    "id": "apps-form"
+                }
+            ]
         }
     ],
     "regions": [

package/main/default/pages/listview_form.page.amis.json

@@ -71,7 +71,7 @@
                             "name": "name",
                             "label": "API 名称",
                             "labelRemark": "API 名称只能包含小写字母、数字，必须以字母开头，不能以下划线字符结尾或包含两个连续的下划线字符",
-                            "required": true,
+                            "required": false,
                             "type": "input-text",
                             "className": "m-0",
                             "labelClassName": "text-left",

package/main/default/services/utils/page-schema.js

@@ -100,67 +100,22 @@ const getRecordPageInitSchema = async function (objectApiName, userSession) {
     if (hasRelatedLists) {
         content.tabs.push(related)
     }
-    const amisSchema = {
-        "type": "service",
-        "body": [
-            {
-                "type": "steedos-record-detail-header",
-                "label": "标题面板",
-                "objectApiName": "${objectName}",
-                "recordId": "${recordId}",
-                onEvent: {
-                    "recordLoaded": {
-                        "actions": [
-                            {
-                                "actionType": "reload",
-                                "data": {
-                                    "name": `\${event.data.record.${uiSchema.NAME_FIELD_KEY || 'name'}}`,
-                                    "record": `\${event.data.record}`,
-                                    "recordLoaded": true,
-                                }
-                            },
-                            {
-                                "actionType": "reload",
-                                "componentId": `page_readonly_${objectApiName}_header`,  //刷新标题, 详细页面header service 嵌套太多, 导致仅刷新第一层service无法更新recordName
-                                "data": {
-                                    "name": `\${event.data.record.${uiSchema.NAME_FIELD_KEY || 'name'}}`,
-                                    "record": `\${event.data.record}`,
-                                    "recordLoaded": true,
-                                }
-                            }
-                        ]
-                    }
-                },
-            },
-            content
-        ],
-        data: {
-            "_master.objectName": "${objectName}",
-            "_master.recordId": "${recordId}"
-        },
-        onEvent: {
-            "recordLoaded": {
-                "actions": [
-                    {
-                        "actionType": "reload",
-                        "data": {
-                            "name": `\${record.${uiSchema.NAME_FIELD_KEY || 'name'}}`,
-                            "_master.record": `\${record}`,
-                            // 不清楚reload 如何给对象下的某个key复制, 所以此处重复设置_master的objectName、recordId
-                            "_master.objectName": "${objectName}",
-                            "_master.recordId": "${recordId}"
-                        }
-                    }
-                ]
-            }
+    body = [
+        {
+            "type": "steedos-record-detail-header",
+            "label": "标题面板",
+            "objectApiName": "${objectName}",
+            "recordId": "${recordId}"
         },
-    }
-    body.push(amisSchema);
+        content
+    ];
     return {
-        type: 'page',
+        type: 'steedos-record-service',
         id: `page_${objectApiName}_record_detail`,
         name: getScopeId(objectApiName, "record_detail"),
+        objectApiName: "${objectName}",
         bodyClassName: '',
+        className: "object-detail-page",
         regions: [
             "body"
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steedos/service-plugin-amis",
-  "version": "2.5.0-beta.1",
+  "version": "2.5.0-beta.10",
   "main": "package.service.js",
   "scripts": {
     "build": "yarn build:tailwind-base && yarn build:tailwind",
@@ -13,7 +13,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5da093d78baa6f2d7011348060c30671354cc7f0",
+  "gitHead": "d751a4f5d4d6872b19a615769fe2484fc803ee82",
   "devDependencies": {
     "tailwindcss": "3.2.4"
   }

package/public/tailwind/tailwind-steedos.css

@@ -89,10 +89,6 @@
   margin: 0px
 }
 
-.m-3 {
-  margin: 0.75rem
-}
-
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem
@@ -132,14 +128,14 @@
   margin-top: -0.75rem
 }
 
-.mt-3 {
-  margin-top: 0.75rem
-}
-
 .mb-4 {
   margin-bottom: 1rem
 }
 
+.mt-3 {
+  margin-top: 0.75rem
+}
+
 .block {
   display: block
 }
@@ -200,11 +196,23 @@
   width: 50%
 }
 
+.w-96 {
+  width: 24rem
+}
+
 .min-w-max {
   min-width: -moz-max-content;
   min-width: max-content
 }
 
+.min-w-\[240px\] {
+  min-width: 240px
+}
+
+.min-w-\[200px\] {
+  min-width: 200px
+}
+
 .flex-none {
   flex: none
 }
@@ -213,6 +221,10 @@
   flex: 1 1 0%
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0
+}
+
 .-translate-x-0 {
   --tw-translate-x: -0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
@@ -247,6 +259,10 @@
        column-gap: 0.75rem
 }
 
+.overflow-auto {
+  overflow: auto
+}
+
 .overflow-hidden {
   overflow: hidden
 }
@@ -255,6 +271,10 @@
   overflow-y: auto
 }
 
+.rounded {
+  border-radius: 0.25rem
+}
+
 .border-b-\[3px\] {
   border-bottom-width: 3px
 }
@@ -286,11 +306,26 @@
   border-color: rgb(203 213 225 / var(--tw-border-opacity))
 }
 
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity))
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity))
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity))
+}
+
 .p-0 {
   padding: 0px
 }
@@ -299,6 +334,10 @@
   padding: 1rem
 }
 
+.p-2 {
+  padding: 0.5rem
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem
@@ -390,6 +429,11 @@
   color: rgb(0 0 0 / var(--tw-text-opacity))
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+
 .underline {
   text-decoration-line: underline
 }
@@ -428,11 +472,20 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px
+}
+
 @media (min-width: 640px) {
   .sm\:mt-\[90px\] {
     margin-top: 90px
   }
 
+  .sm\:mt-3 {
+    margin-top: 0.75rem
+  }
+
   .sm\:w-\[220px\] {
     width: 220px
   }
@@ -454,6 +507,10 @@
     border-color: rgb(209 213 219 / var(--tw-border-opacity))
   }
 
+  .sm\:p-3 {
+    padding: 0.75rem
+  }
+
   .sm\:shadow {
     --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -465,4 +522,20 @@
   .lg\:z-50 {
     z-index: 50
   }
+
+  .lg\:order-first {
+    order: -9999
+  }
+
+  .lg\:order-last {
+    order: 9999
+  }
+
+  .lg\:flex {
+    display: flex
+  }
+
+  .lg\:flex-col {
+    flex-direction: column
+  }
 }