ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Interactive deck board widget

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Provide relevant app state for widgets

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Adapt interactive widget

Signed-off-by: Julius Härtl <jus@bitgrid.net>

chore: fixup

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2024-02-02 14:17:35 +01:00
parent 632e70bc29
commit 5b33fcca0d
7 changed files with 112 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/init-reference.js
View File

@@ -20,34 +20,39 @@
*/
import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Functions/registerReference.js'
import { translate, translatePlural } from '@nextcloud/l10n'
import './shared-init.js'
const prepareVue = (Vue) => {
const prepareVue = async (Component = null) => {
const { default: Vue } = await import('vue')
const { default: ClickOutside } = await import('vue-click-outside')
Vue.prototype.t = translate
Vue.prototype.n = translatePlural
Vue.prototype.OC = window.OC
Vue.prototype.OCA = window.OCA
Vue.directive('click-outside', ClickOutside)
Vue.directive('focus', {
inserted(el) {
el.focus()
},
})
if (!Component) {
return Vue
}
return Vue.extend(Component)
}
registerWidget('deck-card', async (el, { richObjectType, richObject, accessible }) => {
const { default: Vue } = await import('vue')
prepareVue(Vue)
const { default: CardReferenceWidget } = await import('./views/CardReferenceWidget.vue')
const Widget = await prepareVue(CardReferenceWidget)
// trick to change the wrapper element size, otherwise it always is 100%
// which is not very nice with a simple card
el.parentNode.style['max-width'] = '400px'
el.parentNode.style['margin-left'] = '0'
el.parentNode.style['margin-right'] = '0'
const Widget = Vue.extend(CardReferenceWidget)
new Widget({
propsData: {
richObjectType,
@@ -57,34 +62,33 @@ registerWidget('deck-card', async (el, { richObjectType, richObject, accessible
}).$mount(el)
})
registerWidget('deck-board', async (el, { richObjectType, richObject, accessible }) => {
const { default: Vue } = await import('vue')
prepareVue(Vue)
const boardWidgets = {}
registerWidget('deck-board', async (el, { richObjectType, richObject, accessible, interactive }) => {
const { default: BoardReferenceWidget } = await import('./views/BoardReferenceWidget.vue')
el.parentNode.style['max-width'] = '400px'
el.parentNode.style['margin-left'] = '0'
el.parentNode.style['margin-right'] = '0'
const Widget = Vue.extend(BoardReferenceWidget)
new Widget({
const Widget = await prepareVue(BoardReferenceWidget)
boardWidgets[el] = new Widget({
propsData: {
richObjectType,
richObject,
accessible,
interactive,
},
}).$mount(el)
}, (el) => {
boardWidgets[el].$destroy()
delete boardWidgets[el]
}, {
fullWidth: true,
})
registerWidget('deck-comment', async (el, { richObjectType, richObject, accessible }) => {
const { default: Vue } = await import('vue')
prepareVue(Vue)
const { default: CommentReferenceWidget } = await import('./views/CommentReferenceWidget.vue')
const Widget = await prepareVue(CommentReferenceWidget)
el.parentNode.style['max-width'] = '400px'
el.parentNode.style['margin-left'] = '0'
el.parentNode.style['margin-right'] = '0'
const Widget = Vue.extend(CommentReferenceWidget)
new Widget({
propsData: {
richObjectType,
@@ -95,10 +99,8 @@ registerWidget('deck-comment', async (el, { richObjectType, richObject, accessib
})
registerCustomPickerElement('create-new-deck-card', async (el, { providerId, accessible }) => {
const { default: Vue } = await import('vue')
Vue.mixin({ methods: { t, n } })
const { default: CreateNewCardCustomPicker } = await import('./views/CreateNewCardCustomPicker.vue')
const Element = Vue.extend(CreateNewCardCustomPicker)
const Element = await prepareVue(CreateNewCardCustomPicker)
const vueElement = new Element({
propsData: {
providerId,