adminforth 1.1.1 → 1.1.3

package/types/AdminForthConfig.ts

@@ -482,45 +482,45 @@ export type AdminForthResource = {
         /**
          * Custom components which can be injected into resource list page.
          * 
-         * Component accepts next props: [resource, adminUser]
+         * Component accepts next props: [resource, adminUser, meta]
          */
         list?: {
-          beforeBreadcrumbs?: string | Array<string>,
-          afterBreadcrumbs?: string | Array<string>,
-          bottom?: string | Array<string>,
+          beforeBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
 
         /**
          * Custom components which can be injected into resource show page.
          * 
-         * Component accepts next props: [record, resource, adminUser]
+         * Component accepts next props: [record, resource, adminUser, meta]
          */
         show?: {
-          beforeBreadcrumbs?: string | Array<string>,
-          afterBreadcrumbs?: string | Array<string>,
-          bottom?: string | Array<string>,
+          beforeBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
 
         /**
          * Custom components which can be injected into resource edit page.
          * 
-         * Component accepts next props: [record, resource, adminUser]
+         * Component accepts next props: [record, resource, adminUser, meta]
          */
         edit?: {
-          beforeBreadcrumbs?: string | Array<string>,
-          afterBreadcrumbs?: string | Array<string>,
-          bottom?: string | Array<string>,
+          beforeBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
 
         /**
          * Custom components which can be injected into resource create page.
          * 
-         * Component accepts next props: [resource, adminUser]
+         * Component accepts next props: [resource, adminUser, meta]
          */
         create?: {
-          beforeBreadcrumbs?: string | Array<string>,
-          afterBreadcrumbs?: string | Array<string>,
-          bottom?: string | Array<string>,
+          beforeBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
       }
     },
@@ -771,11 +771,68 @@ export type ValidationObject = {
     message: string,
   }
 
+export type AdminForthComponentDeclaration = {
+  /**
+   * Path to custom component which will be used to render field in the admin panel.
+   * e.g. `@@/MyCustomComponent.vue`
+   */
+  file : string,
+
+  /**
+   * Optional Meta object which will be passed to custom component as props. For example used by plugins
+   * to pass plugin options to custom components.
+   * 
+   * Example:
+   * 
+   * ```ts
+   * {
+   *    name: 'Country Flag',
+   *    virtual: true,
+   *    showIn: [AdminForthResourcePages.SHOW],
+   *    components: {
+   *      show: {
+   *        file: '@@/Flag.vue',
+   *        meta: {
+   *          flagType: 'country',
+   *        },
+   *      },
+   *    },
+   * },
+   * {
+   *    name: 'Team Flag',
+   *    virtual: true,
+   *    showIn: [AdminForthResourcePages.SHOW],
+   *    components: {
+   *      show: {
+   *        file: '@@/Flag.vue',
+   *        meta: {
+   *          flagType: 'team',
+   *        },
+   *     },
+   *    },
+   * }
+   * ```
+   * 
+   * In Flag.vue you can access this meta object like this:
+   * 
+   * ```vue
+   * <template>
+   *  <img :src="loadFile(`@@/flags/${meta.flagType}/${meta.flagType === 'country' ? record.countryIso : record.teamCode}.png`)" />
+   * </template>
+   * 
+   * <script setup>
+   * import { loadFile } from '@/utils';
+   * defineProps(['meta', 'record']);
+   * </script>
+   * 
+   */
+  meta?: any,
+} | string;
 
 export type AdminForthFieldComponents = {
     /**
      * Show component is used to redefine cell which renders field value in show view.
-     * Component accepts next properties: [record, column, resource, adminUser].
+     * Component accepts next properties: [record, column, resource, adminUser, meta].
      * 
      * Example: `FullName.vue`
      * 
@@ -801,33 +858,32 @@ export type AdminForthFieldComponents = {
      * ```
      * 
      */
-    show?: string,
+    show?: AdminForthComponentDeclaration,
 
     /**
      * showRow component is similar to {@link AdminForthFieldComponent.show} but rewrites full table row (both \<td\> tags)
      * Accepts next properties: [record, column, resource, adminUser]
      */
-    showRow?: string, 
+    showRow?: AdminForthComponentDeclaration, 
 
     /**
      * Create component is used to redefine input field in create view.
      * Component accepts next properties: [record, column, resource, adminUser].
      */
-    create?: string,
+    create?: AdminForthComponentDeclaration,
 
     /**
      * Edit component is used to redefine input field in edit view.
      * Component accepts next properties: [record, column, resource, adminUser].
      */
-    edit?: string,
+    edit?: AdminForthComponentDeclaration,
 
     /**
      * List component is used to redefine cell which renders field value in list view.
      * Component accepts next properties: [record, column, resource, adminUser].
      * 
-     * Exa
      */
-    list?: string,
+    list?: AdminForthComponentDeclaration,
 }
 
 export enum AdminForthDataTypes {

package/documentation/README.md

@@ -1,41 +0,0 @@
-# Website
-
-This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/documentation/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};

package/documentation/blog/2019-05-28-first-blog-post.md

@@ -1,12 +0,0 @@
----
-slug: first-blog-post
-title: First Blog Post
-authors:
-  name: Gao Wei
-  title: Docusaurus Core Team
-  url: https://github.com/wgao19
-  image_url: https://github.com/wgao19.png
-tags: [hola, docusaurus]
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

package/documentation/blog/2019-05-29-long-blog-post.md

@@ -1,44 +0,0 @@
----
-slug: long-blog-post
-title: Long Blog Post
-authors: endi
-tags: [hello, docusaurus]
----
-
-This is the summary of a very long blog post,
-
-Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
-
-<!--truncate-->
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

package/documentation/blog/2021-08-01-mdx-blog-post.mdx

@@ -1,20 +0,0 @@
----
-slug: mdx-blog-post
-title: MDX Blog Post
-authors: [slorber]
-tags: [docusaurus]
----
-
-Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
-
-:::tip
-
-Use the power of React to create interactive blog posts.
-
-```js
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-```
-
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-
-:::

package/documentation/blog/2021-08-26-welcome/index.md

@@ -1,25 +0,0 @@
----
-slug: welcome
-title: Welcome
-authors: [slorber, yangshun]
-tags: [facebook, hello, docusaurus]
----
-
-[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
-
-Simply add Markdown files (or folders) to the `blog` directory.
-
-Regular blog authors can be added to `authors.yml`.
-
-The blog post date can be extracted from filenames, such as:
-
-- `2019-05-30-welcome.md`
-- `2019-05-30-welcome/index.md`
-
-A blog post folder can be convenient to co-locate blog post images:
-
-![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
-
-The blog supports tags as well!
-
-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

package/documentation/blog/authors.yml

@@ -1,17 +0,0 @@
-endi:
-  name: Endilie Yacop Sucipto
-  title: Maintainer of Docusaurus
-  url: https://github.com/endiliey
-  image_url: https://github.com/endiliey.png
-
-yangshun:
-  name: Yangshun Tay
-  title: Front End Engineer @ Facebook
-  url: https://github.com/yangshun
-  image_url: https://github.com/yangshun.png
-
-slorber:
-  name: Sébastien Lorber
-  title: Docusaurus maintainer
-  url: https://sebastienlorber.com
-  image_url: https://github.com/slorber.png

package/documentation/blog/tags.yml

@@ -1,16 +0,0 @@
-facebook:
-  label: Facebook
-  permalink: /facebook
-  description: Facebook tag description
-hello:
-  label: Hello
-  permalink: /hello
-  description: Hello tag description
-docusaurus:
-  label: Docusaurus
-  permalink: /docusaurus
-  description: Docusaurus tag description
-hola:
-  label: Hola
-  permalink: /hola
-  description: Hola tag description