├── .DS_Store
├── .gitignore
├── README.md
├── display-email-link
    ├── dist
    │   └── index.js
    ├── package-lock.json
    ├── package.json
    └── src
    │   ├── display.vue
    │   └── index.js
├── display-euro
    ├── dist
    │   └── index.js
    ├── package-lock.json
    ├── package.json
    └── src
    │   ├── display.vue
    │   └── index.js
├── display-link
    ├── dist
    │   └── index.js
    ├── package-lock.json
    ├── package.json
    └── src
    │   ├── display.vue
    │   └── index.js
├── display-tel-link
    ├── dist
    │   └── index.js
    ├── package-lock.json
    ├── package.json
    └── src
    │   ├── display.vue
    │   └── index.js
└── install.sh


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucameusburger/directus-display-extensions/95d90583bd9a0dff9072be631ec1f02bacb8bd7b/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | pdf


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🐰 🖥 👍 directus-display-extensions
 2 | 
 3 | Some useful display extensions for 🐰 directus9!
 4 | 
 5 | By default you can not click links when viewing tables in directus9. I made some really simple extensions to make things clickable.
 6 | 
 7 | 1. Build each extension with ``npx directus-extension build``
 8 | 2. Copy index.js from dist into /extensions/displays/EXTENSION-NAME/index.js
 9 | 3. For styling (as seen in the screenshot) add the following css in the project-settings-page.
10 | 4. Enjoy
11 | 
12 | ``
13 | .display-link, .display-email-link, .display-tel-link {
14 | color: var(--v-button-background-color);
15 | }
16 | .display-link:hover, .display-email-link:hover, .display-tel-link:hover {
17 | color: var(--v-button-background-color-hover);
18 | }
19 | ``
20 | 
21 | <img width="1920" alt="directus custom displays" src="https://user-images.githubusercontent.com/25350597/144719955-d43e3ef0-b444-41eb-a2a9-c9b34bfff028.png">
22 | 


--------------------------------------------------------------------------------
/display-email-link/dist/index.js:
--------------------------------------------------------------------------------
1 | import{openBlock as i,createElementBlock as a,withModifiers as l,toDisplayString as e}from"vue";var n={props:{value:String},methods:{handleMailLink(){window.open("mailto:"+this.value)}}};n.render=function(n,s,o,r,t,p){return i(),a("a",{class:"display-email-link",onClick:s[0]||(s[0]=l((i=>p.handleMailLink()),["stop"]))},e(o.value),1)},n.__file="src/display.vue";var s={id:"display-email-link",name:"Email-Link",description:"Display as a clickable email-link",icon:"link",component:n,types:["string"]};export{s as default};
2 | 


--------------------------------------------------------------------------------
/display-email-link/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "display-email-link",
 3 |   "version": "1.0.0",
 4 |   "description": "Display a email-link",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "directus",
11 |     "directus-display",
12 |     "custom-display",
13 |     "vue",
14 |     "vuejs"
15 |   ],
16 |   "author": "Luca Meusburger",
17 |   "license": "ISC",
18 |   "devDependencies": {
19 |     "@directus/extensions-sdk": "^9.0.1"
20 |   },
21 |   "directus:extension": {
22 |     "type": "display",
23 |     "path": "dist/index.js",
24 |     "source": "src/index.js",
25 |     "host": "^9.0.0-rc.87",
26 |     "hidden": false
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/display-email-link/src/display.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<a class="display-email-link" v-on:click.stop="handleMailLink()">{{value}}</a>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 | 	props: {
 9 | 		value: String,
10 | 	},
11 | 	methods:{
12 | 		handleMailLink(){
13 | 			window.open("mailto:"+this.value);
14 | 		}
15 | 	}
16 | };
17 | </script>


--------------------------------------------------------------------------------
/display-email-link/src/index.js:
--------------------------------------------------------------------------------
 1 | import DisplayComponent from './display.vue';
 2 | 
 3 | export default {
 4 |   id: 'display-email-link',
 5 |   name: 'Email-Link',
 6 |   description: 'Display as a clickable email-link',
 7 |   icon: 'link',
 8 |   component: DisplayComponent,
 9 |   types: ['string', 'text'],
10 | };
11 | 


--------------------------------------------------------------------------------
/display-euro/dist/index.js:
--------------------------------------------------------------------------------
1 | import{openBlock as e,createElementBlock as r,toDisplayString as u}from"vue";var a={props:{value:Number}};a.render=function(a,o,n,t,l,i){return e(),r("a",null,u(new Intl.NumberFormat("de-DE",{style:"currency",currency:"EUR"}).format(n.value)),1)},a.__file="src/display.vue";var o={id:"display-euro",name:"Euro",description:"Display euro values formatted",icon:"euro",component:a,types:["number","float","integer","decimal"]};export{o as default};
2 | 


--------------------------------------------------------------------------------
/display-euro/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "display-euro",
 3 |   "version": "1.0.0",
 4 |   "description": "Display a formatted euro value",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "directus",
11 |     "directus-display",
12 |     "custom-display",
13 |     "vue",
14 |     "vuejs"
15 |   ],
16 |   "author": "Luca Meusburger",
17 |   "license": "ISC",
18 |   "devDependencies": {
19 |     "@directus/extensions-sdk": "^9.0.1"
20 |   },
21 |   "directus:extension": {
22 |     "type": "display",
23 |     "path": "dist/index.js",
24 |     "source": "src/index.js",
25 |     "host": "^9.0.0-rc.87",
26 |     "hidden": false
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/display-euro/src/display.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<a>{{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value)}}</a>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 | 	props: {
 9 | 		value: Number,
10 | 	}
11 | };
12 | </script>


--------------------------------------------------------------------------------
/display-euro/src/index.js:
--------------------------------------------------------------------------------
 1 | import DisplayComponent from './display.vue';
 2 | 
 3 | export default {
 4 |   id: 'display-euro',
 5 |   name: 'Euro',
 6 |   description: 'Display euro values formatted',
 7 |   icon: 'euro',
 8 |   component: DisplayComponent,
 9 |   types: ['number', 'float', 'integer', 'decimal'],
10 | };
11 | 


--------------------------------------------------------------------------------
/display-link/dist/index.js:
--------------------------------------------------------------------------------
1 | import{openBlock as i,createElementBlock as n,withModifiers as e,toDisplayString as a}from"vue";var l={props:{value:String},methods:{handleLink(){window.open(this.value)}}};l.render=function(l,s,o,r,p,t){return i(),n("a",{class:"display-link",onClick:s[0]||(s[0]=e((i=>t.handleLink()),["stop"]))},a(o.value),1)},l.__file="src/display.vue";var s={id:"display-link",name:"Link",description:"Display as a clickable link",icon:"link",component:l,types:["string"]};export{s as default};
2 | 


--------------------------------------------------------------------------------
/display-link/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "display-link",
 3 |   "version": "1.0.0",
 4 |   "description": "Display a link",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "directus",
11 |     "directus-display",
12 |     "custom-display",
13 |     "vue",
14 |     "vuejs"
15 |   ],
16 |   "author": "Luca Meusburger",
17 |   "license": "ISC",
18 |   "devDependencies": {
19 |     "@directus/extensions-sdk": "^9.0.1"
20 |   },
21 |   "directus:extension": {
22 |     "type": "display",
23 |     "path": "dist/index.js",
24 |     "source": "src/index.js",
25 |     "host": "^9.0.0-rc.87",
26 |     "hidden": false
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/display-link/src/display.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<a class="display-link" v-on:click.stop="handleLink()">{{value}}</a>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 | 	props: {
 9 | 		value: String,
10 | 	},
11 | 	methods:{
12 | 		handleLink(){
13 | 			window.open(this.value);
14 | 		}
15 | 	}
16 | };
17 | </script>


--------------------------------------------------------------------------------
/display-link/src/index.js:
--------------------------------------------------------------------------------
 1 | import DisplayComponent from './display.vue';
 2 | 
 3 | export default {
 4 |   id: 'display-link',
 5 |   name: 'Link',
 6 |   description: 'Display as a clickable link',
 7 |   icon: 'link',
 8 |   component: DisplayComponent,
 9 |   types: ['string', 'text'],
10 | };
11 | 


--------------------------------------------------------------------------------
/display-tel-link/dist/index.js:
--------------------------------------------------------------------------------
1 | import{openBlock as e,createElementBlock as l,withModifiers as i,toDisplayString as n}from"vue";var a={props:{value:String},methods:{handleTelLink(){window.open("tel:"+this.value)}}};a.render=function(a,t,s,o,p,r){return e(),l("a",{class:"display-tel-link",onClick:t[0]||(t[0]=i((e=>r.handleTelLink()),["stop"]))},n(s.value),1)},a.__file="src/display.vue";var t={id:"display-tel-link",name:"Telephone-Link",description:"Display as a clickable tel-link",icon:"link",component:a,types:["string"]};export{t as default};
2 | 


--------------------------------------------------------------------------------
/display-tel-link/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "display-tel-link",
 3 |   "version": "1.0.0",
 4 |   "description": "Display a tel-link",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "directus",
11 |     "directus-display",
12 |     "custom-display",
13 |     "vue",
14 |     "vuejs"
15 |   ],
16 |   "author": "Luca Meusburger",
17 |   "license": "ISC",
18 |   "devDependencies": {
19 |     "@directus/extensions-sdk": "^9.0.1"
20 |   },
21 |   "directus:extension": {
22 |     "type": "display",
23 |     "path": "dist/index.js",
24 |     "source": "src/index.js",
25 |     "host": "^9.0.0-rc.87",
26 |     "hidden": false
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/display-tel-link/src/display.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<a class="display-tel-link" v-on:click.stop="handleTelLink()">{{value}}</a>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 | 	props: {
 9 | 		value: String,
10 | 	},
11 | 	methods:{
12 | 		handleTelLink(){
13 | 			window.open("tel:"+this.value);
14 | 		}
15 | 	}
16 | };
17 | </script>


--------------------------------------------------------------------------------
/display-tel-link/src/index.js:
--------------------------------------------------------------------------------
 1 | import DisplayComponent from './display.vue';
 2 | 
 3 | export default {
 4 |   id: 'display-tel-link',
 5 |   name: 'Telephone-Link',
 6 |   description: 'Display as a clickable tel-link',
 7 |   icon: 'link',
 8 |   component: DisplayComponent,
 9 |   types: ['string', 'text'],
10 | };
11 | 


--------------------------------------------------------------------------------
/install.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | EXTENSIONS_DIR="/path/to/extensions"  # Update with the correct path to the parent directory of the subfolders
 4 | 
 5 | 
 6 | for folder in */; do
 7 |     extension_name=$(basename "$folder")
 8 |     echo -n "Building extension $extension_name … "
 9 | 
10 |     # Build the extension
11 |     (cd "$folder" && npx directus-extension build)
12 | 
13 |     # Copy index.js to the specified directory
14 |     mkdir -p "$EXTENSIONS_DIR/displays/$extension_name"
15 |     cp "$folder/dist/index.js" "$EXTENSIONS_DIR/displays/$extension_name/index.js"
16 | 
17 |     echo "Extension $extension_name built and installed."
18 |     echo
19 | done


--------------------------------------------------------------------------------