instance.$refs = allRefs.refs;
instance.$manyRefs = allRefs.manyRefs;
instance.$opts = parseOpts(name, element);
+ instance.$emit = (eventName, data = {}) => {
+ data.from = instance;
+ const event = new CustomEvent(`${name}-${eventName}`, {
+ bubbles: true,
+ detail: data
+ });
+ instance.$el.dispatchEvent(event);
+ };
if (typeof instance.setup === 'function') {
instance.setup();
}
function parseRefs(name, element) {
const refs = {};
const manyRefs = {};
+
const prefix = `${name}@`
- const refElems = element.querySelectorAll(`[refs*="${prefix}"]`);
+ const selector = `[refs*="${prefix}"]`;
+ const refElems = [...element.querySelectorAll(selector)];
+ if (element.matches(selector)) {
+ refElems.push(element);
+ }
+
for (const el of refElems) {
const refNames = el.getAttribute('refs')
.split(' ')
.filter(str => str.startsWith(prefix))
- .map(str => str.replace(prefix, ''));
+ .map(str => str.replace(prefix, ''))
+ .map(kebabToCamel);
for (const ref of refNames) {
refs[ref] = el;
if (typeof manyRefs[ref] === 'undefined') {
function kebabToCamel(kebab) {
const ucFirst = (word) => word.slice(0,1).toUpperCase() + word.slice(1);
const words = kebab.split('-');
- return words[0] + words.slice(1).map(ucFirst).join();
+ return words[0] + words.slice(1).map(ucFirst).join('');
}
/**
* @property {Object<String, HTMLElement>} $refs
* @property {Object<String, HTMLElement[]>} $manyRefs
* @property {Object<String, String>} $opts
+ * @property {function(string, Object)} $emit
*/
\ No newline at end of file