swcs/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "new way to register vue parts (see directives)"

Browse Source 
This reverts commit db5b0d4066.
This commit is contained in:
Tobias Klika
2020-10-15 14:10:33 +02:00
parent 9a6d6eb734
commit 7bd6cd171c
11 changed files with 169 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Web.UI/App/directives/clickoutside.js
+54 -54
View File
@@ -1,11 +1,63 @@
import Vue from 'vue';
/// calls the passed function when a click happens outside the target element
Vue.directive('click-outside', {
bind(el, binding, vNode)
{
if (!Helpers.validate(binding)) return;
// Define Handler and cache it on the element
function handler(e)
{
if (!vNode.context) return;
// some components may have related popup item, on which we shall prevent the click outside event handler.
var elements = e.path || (e.composedPath && e.composedPath());
elements && elements.length > 0 && elements.unshift(e.target);
if (el.contains(e.target) || Helpers.isPopup(vNode.context.popupItem, elements) || !el.__vueClickOutside__)
{
return;
}
el.__vueClickOutside__.callback(e);
}
// add Event Listeners
el.__vueClickOutside__ = {
handler: handler,
callback: binding.value
};
setTimeout(() =>
{
!Helpers.isServer(vNode) && document.addEventListener('click', handler);
}, 200);
},
update(el, binding)
{
if (Helpers.validate(binding))
{
el.__vueClickOutside__.callback = binding.value;
}
},
unbind(el, binding, vNode)
{
!Helpers.isServer(vNode) && document.removeEventListener('click', el.__vueClickOutside__.handler);
delete el.__vueClickOutside__;
}
});
var Helpers = {
isServer(vNode)
{
return false;
//return typeof vNode.componentInstance !== 'undefined' && vNode.componentInstance.$isServer;
return typeof vNode.componentInstance !== 'undefined' && vNode.componentInstance.$isServer;
},
isPopup(popupItem, elements)
@@ -47,57 +99,5 @@ var Helpers = {
return true;
}
};
/// calls the passed function when a click happens outside the target element
export default {
name: 'click-outside',
beforeMount(el, binding, vNode)
{
if (!Helpers.validate(binding)) return;
// Define Handler and cache it on the element
function handler(e)
{
if (!binding.instance) return;
// some components may have related popup item, on which we shall prevent the click outside event handler.
var elements = e.path || (e.composedPath && e.composedPath());
elements && elements.length > 0 && elements.unshift(e.target);
if (el.contains(e.target) || Helpers.isPopup(binding.instance.popupItem, elements) || !el.__vueClickOutside__)
{
return;
}
el.__vueClickOutside__.callback(e);
}
// add Event Listeners
el.__vueClickOutside__ = {
handler: handler,
callback: binding.value
};
setTimeout(() =>
{
!Helpers.isServer(vNode) && document.addEventListener('click', handler);
}, 200);
},
updated(el, binding)
{
if (Helpers.validate(binding))
{
el.__vueClickOutside__.callback = binding.value;
}
},
unmounted(el, binding, vNode)
{
!Helpers.isServer(vNode) && document.removeEventListener('click', el.__vueClickOutside__.handler);
delete el.__vueClickOutside__;
}
};
zero.Web.UI/App/directives/currency.js
+6 -9
View File
@@ -1,16 +1,13 @@
import Vue from 'vue';
import Strings from 'zero/services/strings';
/// <summary>
/// Outputs a currency
/// </summary>
export default {
name: 'currency',
beforeMount(el, binding)
Vue.directive('currency', (el, binding) =>
{
if (binding.value !== binding.oldValue)
{
if (binding.value !== binding.oldValue)
{
el.innerHTML = Strings.currency(binding.value);
}
el.innerHTML = Strings.currency(binding.value);
}
};
});
zero.Web.UI/App/directives/date.js
-2
View File
@@ -4,8 +4,6 @@ import Strings from 'zero/services/strings';
/// Outputs a formatted date
/// </summary>
export default {
name: 'date',
beforeMount(el, binding)
{
if (binding.value !== binding.oldValue)
zero.Web.UI/App/directives/dropdown.js
+17
View File
@@ -0,0 +1,17 @@
import Vue from 'vue';
/// <summary>
/// This directive is used to bind an element (button or link) to a dropdown
/// </summary>
Vue.directive('dropdown', {
bind(el, binding)
{
console.info(el, binding);
},
update(el, binding)
{
}
});
zero.Web.UI/App/directives/filesize.js
+6 -9
View File
@@ -1,16 +1,13 @@
import Vue from 'vue';
import Strings from 'zero/services/strings';
/// <summary>
/// Outputs a filesize
/// </summary>
export default {
name: 'filesize',
beforeMount(el, binding)
Vue.directive('filesize', (el, binding) =>
{
if (binding.value !== binding.oldValue)
{
if (binding.value !== binding.oldValue)
{
el.innerText = Strings.filesize(binding.value);
}
el.innerText = Strings.filesize(binding.value);
}
};
});
zero.Web.UI/App/directives/globals.js
+9
View File
@@ -0,0 +1,9 @@
import './date';
import './localize';
import './resizable';
import './dropdown';
import './clickoutside';
import './filesize';
import './currency';
import './sortable';
zero.Web.UI/App/directives/localize.js
+29 -32
View File
@@ -1,41 +1,38 @@
import Vue from 'vue';
import Localization from 'zero/services/localization';
/// <summary>
/// Localizes the given property and sets the inner-text of the node to its result
/// </summary>
export default {
name: 'localize',
beforeMount(el, binding)
Vue.directive('localize', (el, binding) =>
{
if (binding.value !== binding.oldValue || !el.innerText)
{
if (binding.value !== binding.oldValue || !el.innerText)
const isObject = typeof binding.value === 'object';
let key = isObject ? binding.value.key : binding.value;
let options = isObject ? binding.value : null;
const result = Localization.localize(key, options);
// set content as html
if (binding.arg === 'html')
{
const isObject = typeof binding.value === 'object';
let key = isObject ? binding.value.key : binding.value;
let options = isObject ? binding.value : null;
const result = Localization.localize(key, options);
// set content as html
if (binding.arg === 'html')
{
el.innerHTML = result;
}
// set title
else if (binding.arg === 'title')
{
el.title = result;
}
// set attribute
else if (binding.arg)
{
el.setAttribute(binding.arg, result);
}
// set content as plain text
else
{
el.innerText = result;
}
el.innerHTML = result;
}
// set title
else if (binding.arg === 'title')
{
el.title = result;
}
// set attribute
else if (binding.arg)
{
el.setAttribute(binding.arg, result);
}
// set content as plain text
else
{
el.innerText = result;
}
}
};
});
zero.Web.UI/App/directives/register.js
-30
View File
@@ -1,30 +0,0 @@
//import Date from './date';
//import Localize from './localize';
//import Resizable from './resizable';
//import Clickoutside from './clickoutside';
//import Filesize from './filesize';
//import Currency from './currency';
//import Sortable from './sortable';
export default function (app)
{
const requireComponent = require.context('.', true, /[\w-]+\.js/);
requireComponent.keys().forEach(path =>
{
let pathParts = path.split('/');
let fileName = pathParts[pathParts.length - 1].split('.')[0];
if (fileName === 'register')
{
return;
}
const componentConfig = requireComponent(path);
const config = componentConfig.default || componentConfig;
const name = config.name || fileName;
app.directive(name, config);
});
};
zero.Web.UI/App/directives/resizable.js
+24 -12
View File
@@ -1,3 +1,27 @@
import Vue from 'vue';
/// resize an element
Vue.directive('resizable', {
bind(el, binding)
{
let resizable = new Resizable(el, binding.value);
resizable.listen();
},
update(el, binding)
{
},
unbind(el, binding)
{
}
});
// object (new) that handles resizing of an element
var Resizable = function (element, params)
@@ -124,16 +148,4 @@ var Resizable = function (element, params)
this.value = newValue;
}
}
};
/// resize an element
export default {
name: 'resizable',
beforeMount(el, binding)
{
let resizable = new Resizable(el, binding.value);
resizable.listen();
}
};
zero.Web.UI/App/directives/sortable.js
+22 -25
View File
@@ -1,33 +1,30 @@
import Vue from 'vue';
import Sortable from 'sortablejs';
/// <summary>
/// Enables sorting of a list
/// </summary>
export default {
name: 'sortable',
beforeMount(el, binding)
Vue.directive('sortable', (el, binding) =>
{
if (binding.value === binding.oldValue)
{
if (binding.value === binding.oldValue)
{
return;
}
let sortable = new Sortable(el, binding.value || {});
//if (this.arg && !this.vm.sortable)
//{
// this.vm.sortable = {};
//}
//// Throw an error if the given ID is not unique
//if (this.arg && this.vm.sortable[this.arg])
//{
// console.warn('[vue-sortable] cannot set already defined sortable id: \'' + this.arg + '\'')
//} else if (this.arg)
//{
// this.vm.sortable[this.arg] = sortable;
//}
return;
}
};
let sortable = new Sortable(el, binding.value || {});
//if (this.arg && !this.vm.sortable)
//{
// this.vm.sortable = {};
//}
//// Throw an error if the given ID is not unique
//if (this.arg && this.vm.sortable[this.arg])
//{
// console.warn('[vue-sortable] cannot set already defined sortable id: \'' + this.arg + '\'')
//} else if (this.arg)
//{
// this.vm.sortable[this.arg] = sortable;
//}
});
zero.Web.UI/app.js
+2 -5
View File
@@ -7,8 +7,8 @@ zero.apps = {
import Router from 'zero/router.config.js';
//import 'zero/components/globals';
import registerDirectives from 'zero/directives/register';
//import 'zero/filters/globals';
import 'zero/directives/globals';
import 'zero/filters/globals';
//import 'zero/renderers/globals';
//import 'zero/pages/register';
@@ -16,7 +16,4 @@ import registerDirectives from 'zero/directives/register';
const app = createApp(App);
app.use(Router);
registerDirectives(app);
console.info(app);
app.mount('#app');