5b6a020f.e5ab730e.js

"use strict";(self.webpackChunkadminforth=self.webpackChunkadminforth||[]).push([[6493],{8014:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>m,frontMatter:()=>s,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"api/Common/interfaces/AdminForthFieldComponents","title":"AdminForthFieldComponents","description":"Properties","source":"@site/docs/api/Common/interfaces/AdminForthFieldComponents.md","sourceDirName":"api/Common/interfaces","slug":"/api/Common/interfaces/AdminForthFieldComponents","permalink":"/docs/api/Common/interfaces/AdminForthFieldComponents","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"apiSidebar","previous":{"title":"AdminForthConfigMenuItem","permalink":"/docs/api/Common/interfaces/AdminForthConfigMenuItem"},"next":{"title":"AdminForthForeignResourceCommon","permalink":"/docs/api/Common/interfaces/AdminForthForeignResourceCommon"}}');var i=o(4848),r=o(8453);const s={},l="AdminForthFieldComponents",d={},c=[{value:"Properties",id:"properties",level:2},{value:"create?",id:"create",level:3},{value:"edit?",id:"edit",level:3},{value:"list?",id:"list",level:3},{value:"show?",id:"show",level:3},{value:"showRow?",id:"showrow",level:3}];function a(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"adminforthfieldcomponents",children:"AdminForthFieldComponents"})}),"\n",(0,i.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,i.jsx)(n.h3,{id:"create",children:"create?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"create"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/Common/type-aliases/AdminForthComponentDeclaration",children:(0,i.jsx)(n.code,{children:"AdminForthComponentDeclaration"})})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Create component is used to redefine input field in create view.\nComponent accepts next properties: [record, column, resource, adminUser]."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"edit",children:"edit?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"edit"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/Common/type-aliases/AdminForthComponentDeclaration",children:(0,i.jsx)(n.code,{children:"AdminForthComponentDeclaration"})})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Edit component is used to redefine input field in edit view.\nComponent accepts next properties: [record, column, resource, adminUser]."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"list",children:"list?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"list"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/Common/type-aliases/AdminForthComponentDeclaration",children:(0,i.jsx)(n.code,{children:"AdminForthComponentDeclaration"})})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"List component is used to redefine cell which renders field value in list view.\nComponent accepts next properties: [record, column, resource, adminUser].\nComponent can emit events:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"update:value"})," - to update record value."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"update:inValidity"})," - emit true once entered value became not valid (e.g. emit('update",":inValidity","', true) ). Emit false once entered value became valid. Emit default value in mounted hook."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"update:emptiness"})," - emit true once entered value became empty (e.g. emit('update",":emptiness","', true) ). Emit false once entered value became not empty. Emit default value in mounted hook.\nemptiness emit is optional and required for complex cases. For example for virtual columns where initial value is not set."]}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"show",children:"show?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"show"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/Common/type-aliases/AdminForthComponentDeclaration",children:(0,i.jsx)(n.code,{children:"AdminForthComponentDeclaration"})})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Show component is used to redefine cell which renders field value in show view.\nComponent accepts next properties: [record, column, resource, adminUser, meta]."}),"\n",(0,i.jsxs)(n.p,{children:["Example: ",(0,i.jsx)(n.code,{children:"FullName.vue"})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:"<template>\n  {{ record.firstName }} {{ record.lastName }}\n</template>\n\n<script setup>\ndefineProps(['record']);\n<\/script>\n\n```ts\n{\n label: 'Full Name',\n virtual: true,\n showIn: {\n   [AdminForthResourcePages.edit]: false,\n   [AdminForthResourcePages.create]: false,\n   [AdminForthResourcePages.filter]: false,\n },\n components: {\n  show: '@@/FullName.vue',\n  list: '@@/FullName.vue',\n },\n}\n"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"showrow",children:"showRow?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"showRow"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/Common/type-aliases/AdminForthComponentDeclaration",children:(0,i.jsx)(n.code,{children:"AdminForthComponentDeclaration"})})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"showRow component is similar to AdminForthFieldComponent.show but rewrites full table row (both <td> tags)\nAccepts next properties: [record, column, resource, adminUser]"})]})}function m(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},8453:(e,n,o)=>{o.d(n,{R:()=>s,x:()=>l});var t=o(6540);const i={},r=t.createContext(i);function s(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);