@vmz/ui 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/ui",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "type": "module",
   "description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
   "license": "MIT",

package/src/components/Autocomplete.vmz

@@ -19,8 +19,8 @@
         :aria-describedby="describedBy"
         :value="value"
         :disabled="disabled"
-        @input="onInput"
-        :onKeyDown="onKeyDown"
+        @input="this.onDomInput"
+        :onKeyDown="this.onKeyDown"
       />
       <ul
         v-if="listOpen"
@@ -28,7 +28,7 @@
         class="vmz-ui-autocomplete__list"
         role="listbox"
         data-vmz-autocomplete="list"
-        @click="onListClick"
+        @click="this.onListClick"
       >
         <li
           v-for="opt in options"
@@ -157,6 +157,10 @@ export default class Autocomplete {
 	public onInput: ((e: Event) => void) | null = null;
 	public onSelect: ((value: string) => void) | null = null;
 	public onClose: (() => void) | null = null;
+	onDomInput(e: Event) {
+		this.emit("input", e);
+		if (typeof this.onInput === "function") this.onInput(e);
+	}
 	onListClick(ev) {
 		if (this.disabled) return;
 		const t = ev && ev.target;
@@ -165,11 +169,13 @@ export default class Autocomplete {
 		if (!opt) return;
 		const next = opt.getAttribute("data-vmz-option") || "";
 		if (!next) return;
+		this.emit("select", next);
 		if (typeof this.onSelect === "function") this.onSelect(next);
 	}
 	onKeyDown(ev) {
 		if (!ev || ev.key !== "Escape") return;
 		ev.preventDefault();
+		this.emit("close");
 		if (typeof this.onClose === "function") this.onClose();
 	}
 }

package/src/components/Button.vmz

@@ -1,5 +1,23 @@
 <template>
+  <a
+      v-if="href"
+      class="vmz-ui-btn"
+      data-vmz-ui="button"
+      data-vmz-motion="control"
+      data-vmz-motion-token="motion.control"
+      :data-variant="variant"
+      :data-size="size"
+      :data-block="block ? 'true' : 'false'"
+      :href="href"
+      :target="target"
+      :rel="rel"
+      @click="this.onDomClick"
+    >
+      <span v-if="loading" class="vmz-ui-btn__spinner" aria-hidden="true"></span>
+      <slot />
+    </a>
   <button
+      v-else
       :type="type"
       class="vmz-ui-btn"
       data-vmz-ui="button"
@@ -11,7 +29,7 @@
       :data-loading="loading ? 'true' : 'false'"
       :disabled="disabled"
       :aria-busy="loading ? 'true' : 'false'"
-      @click="onClick"
+      @click="this.onDomClick"
     >
       <span v-if="loading" class="vmz-ui-btn__spinner" aria-hidden="true"></span>
       <slot />
@@ -144,6 +162,13 @@ export default class Button {
 	public loading: boolean = false;
 	public block: boolean = false;
 	public size: string = "middle";
+	public href: string = "";
+	public target: string = "";
+	public rel: string = "";
 	public onClick: ((e: Event) => void) | null = null;
+	onDomClick(e: Event) {
+		this.emit("click", e);
+		if (typeof this.onClick === "function") this.onClick(e);
+	}
 }
 </script>

package/src/components/Checkbox.vmz

@@ -7,7 +7,7 @@
         :checked="checked"
         :disabled="disabled"
         :aria-describedby="describedBy"
-        @click="onToggle"
+        @click="this.onToggle"
       />
       <span class="vmz-ui-checkbox__label">{{ label }}</span>
     </label>
@@ -64,8 +64,10 @@ export default class Checkbox {
 		if (this.disabled) return;
 		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
 		const next = !this.checked;
+		const payload = { target: { checked: next } };
+		this.emit("change", payload);
 		if (typeof this.onChange === "function") {
-			this.onChange({ target: { checked: next } });
+			this.onChange(payload);
 		}
 	}
 }

package/src/components/CodeBlock.vmz

@@ -2,7 +2,7 @@
   <figure class="vmz-ui-code-block" data-vmz-ui="code-block">
       <div class="vmz-ui-code-block__bar">
         <figcaption v-if="caption" class="vmz-ui-code-block__caption">{{ caption }}</figcaption>
-        <Button type="button" variant="ghost" @click="onCopy">{{ copyLabel }}</Button>
+        <Button type="button" variant="ghost" @click="this.onCopy">{{ copyLabel }}</Button>
       </div>
       <pre class="vmz-ui-code-block__pre"><code class="vmz-ui-code-block__code">{{ code }}</code></pre>
     </figure>

package/src/components/DataTable.vmz

@@ -7,7 +7,7 @@
       :data-selected-count="selectedCount"
     >
       <table class="vmz-ui-datatable">
-        <thead @click="onHeadClick">
+        <thead @click="this.onHeadClick">
           <tr>
             <th scope="col" class="vmz-ui-datatable__check">
               <input
@@ -26,7 +26,7 @@
             <th v-if="hasRowAction" scope="col">{{ actionTitle }}</th>
           </tr>
         </thead>
-        <tbody @click="onBodyClick">
+        <tbody @click="this.onBodyClick">
           <tr
             v-for="row in rows"
             :key="row.id"

package/src/components/DatePicker.vmz

@@ -16,8 +16,8 @@
         :aria-controls="panelId"
         :aria-invalid="error ? 'true' : 'false'"
         :aria-describedby="describedBy"
-        @click="toggle"
-        :onKeyDown="onTriggerKeyDown"
+        @click="this.toggle"
+        :onKeyDown="this.onTriggerKeyDown"
       >
         <span class="vmz-ui-date-picker__value" data-vmz-date="value">{{ displayLabel }}</span>
         <span class="vmz-ui-date-picker__chev" aria-hidden="true"></span>
@@ -34,7 +34,7 @@
         data-vmz-overlay-owner="date-picker"
         data-vmz-focus="enter"
         data-vmz-date="panel"
-        :onKeyDown="onPanelKeyDown"
+        :onKeyDown="this.onPanelKeyDown"
       >
         <div class="vmz-ui-date-picker__monthbar">
           <button
@@ -42,7 +42,7 @@
             class="vmz-ui-date-picker__nav"
             data-vmz-date="prev"
             aria-label="Previous month"
-            @click="prevMonth"
+            @click="this.prevMonth"
           >‹</button>
           <p class="vmz-ui-date-picker__month" data-vmz-date="month">{{ monthLabel }}</p>
           <button
@@ -50,7 +50,7 @@
             class="vmz-ui-date-picker__nav"
             data-vmz-date="next"
             aria-label="Next month"
-            @click="nextMonth"
+            @click="this.nextMonth"
           >›</button>
         </div>
         <div class="vmz-ui-date-picker__weekdays" aria-hidden="true">
@@ -72,7 +72,7 @@
             :aria-selected="day.selected ? 'true' : 'false'"
             :aria-disabled="day.disabled ? 'true' : 'false'"
             :disabled="day.disabled"
-            @click="onDayClick"
+            @click="this.onDayClick"
           >{{ day.label }}</button>
         </div>
       </div>
@@ -431,6 +431,8 @@ export default class DatePicker {
 				start,
 				end
 			} };
+			this.emit("change", ev);
+			this.emit("input", ev);
 			if (typeof this.onChange === "function") this.onChange(ev);
 			if (typeof this.onInput === "function") this.onInput(ev);
 			return;
@@ -442,6 +444,8 @@ export default class DatePicker {
 			start: iso,
 			end: iso
 		} };
+		this.emit("change", ev);
+		this.emit("input", ev);
 		if (typeof this.onChange === "function") this.onChange(ev);
 		if (typeof this.onInput === "function") this.onInput(ev);
 	}

package/src/components/Dialog.vmz

@@ -16,7 +16,7 @@
           class="vmz-ui-dialog__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss dialog"
-          @click="dismiss"
+          @click="this.dismiss"
         ></button>
         <div
           class="vmz-ui-dialog__panel"
@@ -28,14 +28,14 @@
           data-vmz-focus="enter"
           data-vmz-motion="overlay-enter"
           data-vmz-motion-token="motion.overlay"
-          :onKeyDown="onPanelKeyDown"
+          :onKeyDown="this.onPanelKeyDown"
         >
           <h2 :id="titleId" class="vmz-ui-dialog__title">{{ title }}</h2>
           <div class="vmz-ui-dialog__body">
             <slot />
           </div>
           <div class="vmz-ui-dialog__actions">
-            <button type="button" class="vmz-ui-dialog__close" data-vmz-focus="close" @click="dismiss">
+            <button type="button" class="vmz-ui-dialog__close" data-vmz-focus="close" @click="this.dismiss">
               Close
             </button>
           </div>
@@ -265,10 +265,12 @@ export default class Dialog {
 				// Stale exit after interrupt/re-enter must not call onClose.
 				if (!this._exiting || exitGen !== this._motionGen) return;
 				this._exiting = false;
+				this.emit("close");
 				if (typeof this.onClose === "function") this.onClose();
 			}, ms);
 			return;
 		}
+		this.emit("close");
 		if (typeof this.onClose === "function") this.onClose();
 	}
 	_cancelExit(reason) {

package/src/components/Drawer.vmz

@@ -16,7 +16,7 @@
           class="vmz-ui-drawer__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss drawer"
-          @click="dismiss"
+          @click="this.dismiss"
         ></button>
         <div
           class="vmz-ui-drawer__panel"
@@ -28,14 +28,14 @@
           data-vmz-focus="enter"
           data-vmz-motion="overlay-enter"
           data-vmz-motion-token="motion.overlay"
-          :onKeyDown="onPanelKeyDown"
+          :onKeyDown="this.onPanelKeyDown"
         >
           <h2 :id="titleId" class="vmz-ui-drawer__title">{{ title }}</h2>
           <div class="vmz-ui-drawer__body">
             <slot />
           </div>
           <div class="vmz-ui-drawer__actions">
-            <button type="button" class="vmz-ui-drawer__close" data-vmz-focus="close" @click="dismiss">
+            <button type="button" class="vmz-ui-drawer__close" data-vmz-focus="close" @click="this.dismiss">
               Close
             </button>
           </div>
@@ -267,10 +267,12 @@ export default class Drawer {
 				this._exitTimer = null;
 				if (!this._exiting || exitGen !== this._motionGen) return;
 				this._exiting = false;
+				this.emit("close");
 				if (typeof this.onClose === "function") this.onClose();
 			}, ms);
 			return;
 		}
+		this.emit("close");
 		if (typeof this.onClose === "function") this.onClose();
 	}
 	_cancelExit(reason) {

package/src/components/Field.vmz

@@ -12,7 +12,7 @@
         :disabled="disabled"
         :aria-invalid="error ? 'true' : 'false'"
         :aria-describedby="describedBy"
-        @input="onInput"
+        @input="this.onDomInput"
       />
       <p v-if="description" :id="descriptionId" class="vmz-ui-field__description">{{ description }}</p>
       <p v-if="error" :id="errorId" class="vmz-ui-field__error" role="alert">{{ error }}</p>
@@ -113,5 +113,9 @@ export default class Field {
 	public errorId: string = "vmz-field-err";
 	public describedBy: string = "";
 	public onInput: ((e: Event) => void) | null = null;
+	onDomInput(e: Event) {
+		this.emit("input", e);
+		if (typeof this.onInput === "function") this.onInput(e);
+	}
 }
 </script>

package/src/components/Form.vmz

@@ -6,8 +6,8 @@
       data-novalidate="true"
       :aria-label="label"
       :aria-describedby="describedBy"
-      @submit="onSubmitGuard"
-      :onReset="onResetGuard"
+      @submit="this.onSubmitGuard"
+      @reset="this.onResetGuard"
     >
       <div v-if="errorSummary" :id="summaryId" class="vmz-ui-form__summary" role="alert" data-vmz-form="summary">
         {{ errorSummary }}
@@ -59,11 +59,13 @@ export default class Form {
 	onSubmitGuard(ev) {
 		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
 		if (this.disabled) return;
+		this.emit("submit");
 		if (typeof this.onSubmit === "function") this.onSubmit();
 	}
 	onResetGuard(ev) {
 		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
 		if (this.disabled) return;
+		this.emit("reset");
 		if (typeof this.onReset === "function") this.onReset();
 	}
 }

package/src/components/List.vmz

@@ -6,8 +6,8 @@
         role="listbox"
         :aria-labelledby="labelId"
         :aria-label="label"
-        @click="onListClick"
-        :onKeyDown="onListKeyDown"
+        @click="this.onListClick"
+        :onKeyDown="this.onListKeyDown"
       >
         <li
           v-for="item in items"

package/src/components/Menu.vmz

@@ -7,8 +7,8 @@
         aria-haspopup="menu"
         :aria-expanded="open ? 'true' : 'false'"
         :aria-controls="menuId"
-        @click="toggle"
-        :onKeyDown="onTriggerKeyDown"
+        @click="this.toggle"
+        :onKeyDown="this.onTriggerKeyDown"
       >
         {{ label }}
       </button>
@@ -21,7 +21,7 @@
         data-vmz-overlay-owner="menu"
         data-vmz-focus="enter"
         tabindex="-1"
-        :onKeyDown="onMenuKeyDown"
+        :onKeyDown="this.onMenuKeyDown"
       >
         <button
           v-for="item in items"
@@ -30,7 +30,7 @@
           class="vmz-ui-menu__item"
           role="menuitem"
           :data-vmz-menu-item="item.id"
-          @click="onItemClick"
+          @click="this.onItemClick"
         >
           {{ item.title }}
         </button>

package/src/components/Pagination.vmz

@@ -4,7 +4,7 @@
         type="button"
         class="vmz-ui-pagination__btn"
         :disabled="prevDisabled"
-        @click="onPrevClick"
+        @click="this.onPrevClick"
       >
         Previous
       </button>
@@ -13,7 +13,7 @@
         type="button"
         class="vmz-ui-pagination__btn"
         :disabled="nextDisabled"
-        @click="onNextClick"
+        @click="this.onNextClick"
       >
         Next
       </button>

package/src/components/Popover.vmz

@@ -16,7 +16,7 @@
           class="vmz-ui-popover__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss popover"
-          @click="dismiss"
+          @click="this.dismiss"
         ></button>
         <div
           class="vmz-ui-popover__panel"
@@ -26,14 +26,14 @@
           tabindex="-1"
           data-vmz-overlay-layer="panel"
           data-vmz-focus="enter"
-          :onKeyDown="onPanelKeyDown"
+          :onKeyDown="this.onPanelKeyDown"
         >
           <h2 :id="titleId" class="vmz-ui-popover__title">{{ title }}</h2>
           <div class="vmz-ui-popover__body">
             <slot />
           </div>
           <div class="vmz-ui-popover__actions">
-            <button type="button" class="vmz-ui-popover__close" data-vmz-focus="close" @click="dismiss">
+            <button type="button" class="vmz-ui-popover__close" data-vmz-focus="close" @click="this.dismiss">
               Close
             </button>
           </div>
@@ -162,6 +162,7 @@ export default class Popover {
 		this._restoreFocus = null;
 	}
 	dismiss() {
+		this.emit("close");
 		if (typeof this.onClose === "function") this.onClose();
 	}
 	_stackValue() {

package/src/components/QueryForm.vmz

@@ -4,7 +4,7 @@
       data-vmz-ui="query-form"
       data-dense="true"
       :aria-label="label"
-      @submit="onSubmitGuard"
+      @submit="this.onSubmitGuard"
     >
       <slot />
     </form>
@@ -32,6 +32,7 @@ export default class QueryForm {
 	public onSubmit: (() => void) | null = null;
 	onSubmitGuard(ev) {
 		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+		this.emit("submit");
 		if (typeof this.onSubmit === "function") this.onSubmit();
 	}
 }

package/src/components/RadioGroup.vmz

@@ -7,7 +7,7 @@
       :disabled="disabled"
     >
       <legend class="vmz-ui-radio-group__legend">{{ label }}</legend>
-      <div class="vmz-ui-radio-group__list" role="radiogroup" :aria-label="label" @click="onListClick">
+      <div class="vmz-ui-radio-group__list" role="radiogroup" :aria-label="label" @click="this.onListClick">
         <label
           v-for="item in items"
           :key="item.value"
@@ -131,6 +131,7 @@ export default class RadioGroup {
 		if (!input) return;
 		const next = input.getAttribute("data-vmz-radio") || input.value || "";
 		if (!next || next === this.value) return;
+		this.emit("change", next);
 		if (typeof this.onChange === "function") this.onChange(next);
 	}
 }

package/src/components/Segmented.vmz

@@ -23,6 +23,7 @@ export default class Segmented {
   public options: Array<{ value: string; label: string }> = [];
   public onChange: ((value: string) => void) | null = null;
   onPick(next: string) {
+    this.emit('change', next);
     if (typeof this.onChange === 'function') this.onChange(next);
   }
 }

package/src/components/Select.vmz

@@ -19,8 +19,8 @@
         :aria-invalid="error ? 'true' : 'false'"
         :aria-describedby="describedBy"
         :aria-multiselectable="isMultiple ? 'true' : 'false'"
-        @click="toggle"
-        :onKeyDown="onTriggerKeyDown"
+        @click="this.toggle"
+        :onKeyDown="this.onTriggerKeyDown"
       >
         <span class="vmz-ui-select__value">{{ displayLabel }}</span>
         <span class="vmz-ui-select__chev" aria-hidden="true"></span>
@@ -41,8 +41,8 @@
             :value="searchQuery"
             :placeholder="searchPlaceholder"
             :aria-label="searchPlaceholder"
-            @input="onSearchInput"
-            :onKeyDown="onSearchKeyDown"
+            @input="this.onSearchInput"
+            :onKeyDown="this.onSearchKeyDown"
           />
         </div>
         <ul
@@ -50,7 +50,7 @@
           role="listbox"
           :aria-multiselectable="isMultiple ? 'true' : 'false'"
           tabindex="-1"
-          :onKeyDown="onListKeyDown"
+          :onKeyDown="this.onListKeyDown"
         >
           <li v-if="showEmpty" class="vmz-ui-select__empty" role="presentation">{{ emptyText }}</li>
           <li v-for="opt in visibleOptions" :key="opt.value" role="presentation">
@@ -60,12 +60,12 @@
               role="option"
               :data-vmz-option="opt.value"
               :aria-selected="opt.selected ? 'true' : 'false'"
-              @click="onOptionClick"
+              @click="this.onOptionClick"
             >{{ opt.label }}</button>
           </li>
         </ul>
         <div v-if="isMultiple" class="vmz-ui-select__footer">
-          <button type="button" class="vmz-ui-select__done" data-vmz-select="done" @click="close">Done</button>
+          <button type="button" class="vmz-ui-select__done" data-vmz-select="done" @click="this.close">Done</button>
         </div>
       </div>
       <p v-if="description" :id="descriptionId" class="vmz-ui-select__description">{{ description }}</p>
@@ -387,11 +387,13 @@ export default class Select {
 		this._rebuildVisible();
 	}
 	_emit(nextValue: string, nextValues: string[]) {
+		const payload = { target: {
+			value: nextValue,
+			values: nextValues
+		} };
+		this.emit("change", payload);
 		if (typeof this.onChange === "function") {
-			this.onChange({ target: {
-				value: nextValue,
-				values: nextValues
-			} });
+			this.onChange(payload);
 		}
 	}
 	/** Parent-owned prop writes (bindComponentProp) — keep derived label/options in sync. */

package/src/components/Switch.vmz

@@ -8,8 +8,8 @@
         :aria-checked="checked"
         :aria-describedby="describedBy"
         :disabled="disabled"
-        @click="toggle"
-        :onKeyDown="onKeyDown"
+        @click="this.toggle"
+        :onKeyDown="this.onKeyDown"
       >
         <span class="vmz-ui-switch__thumb" aria-hidden="true"></span>
       </button>
@@ -94,6 +94,7 @@ export default class Switch {
 	toggle() {
 		if (this.disabled) return;
 		const next = !this.checked;
+		this.emit("change", next);
 		if (typeof this.onChange === "function") this.onChange(next);
 	}
 	onKeyDown(ev) {

package/src/components/Table.vmz

@@ -1,7 +1,7 @@
 <template>
   <div class="vmz-ui-table-wrap" data-vmz-ui="table" :data-sort-key="sortKey" :data-sort-dir="sortDir">
       <table class="vmz-ui-table">
-        <thead @click="onHeadClick">
+        <thead @click="this.onHeadClick">
           <tr>
             <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
               <button type="button" class="vmz-ui-table__sort" :data-vmz-sort="col.id">
@@ -11,7 +11,7 @@
             <th v-if="hasRowAction" scope="col">{{ actionTitle }}</th>
           </tr>
         </thead>
-        <tbody @click="onBodyClick">
+        <tbody @click="this.onBodyClick">
           <tr v-for="row in rows" :key="row.id" :data-vmz-row="row.id">
             <td v-for="cell in row.cells">{{ cell }}</td>
             <td v-if="hasRowAction">

package/src/components/Tabs.vmz

@@ -4,8 +4,8 @@
         class="vmz-ui-tabs__list"
         role="tablist"
         :aria-label="label"
-        :onKeyDown="onListKeyDown"
-        @click="onListClick"
+        :onKeyDown="this.onListKeyDown"
+        @click="this.onListClick"
       >
         <button
           v-for="item in items"

package/src/components/TextArea.vmz

@@ -10,7 +10,7 @@
         :readonly="readonly"
         :aria-invalid="error ? 'true' : 'false'"
         :aria-describedby="describedBy"
-        @input="onInput"
+        @input="this.onDomInput"
       ></textarea>
       <p v-if="description" :id="descriptionId" class="vmz-ui-textarea__description">{{ description }}</p>
       <p v-if="error" :id="errorId" class="vmz-ui-textarea__error" role="alert">{{ error }}</p>
@@ -114,5 +114,9 @@ export default class TextArea {
 	public errorId: string = "vmz-textarea-err";
 	public describedBy: string = "";
 	public onInput: ((e: Event) => void) | null = null;
+	onDomInput(e: Event) {
+		this.emit("input", e);
+		if (typeof this.onInput === "function") this.onInput(e);
+	}
 }
 </script>

package/src/components/Tree.vmz

@@ -6,8 +6,8 @@
         role="tree"
         :aria-labelledby="labelId"
         :aria-label="label"
-        @click="onTreeClick"
-        :onKeyDown="onTreeKeyDown"
+        @click="this.onTreeClick"
+        :onKeyDown="this.onTreeKeyDown"
       >
         <li
           v-for="item in items"

package/src/components/Upload.vmz

@@ -10,10 +10,10 @@
       :data-invalid="invalidAttr"
       :data-vmz-upload-status="status"
       :data-progress="progress"
-      :onDragEnter="onDragEnter"
-      :onDragOver="onDragOver"
-      :onDragLeave="onDragLeave"
-      :onDrop="onDrop"
+      :onDragEnter="this.onDragEnter"
+      :onDragOver="this.onDragOver"
+      :onDragLeave="this.onDragLeave"
+      :onDrop="this.onDrop"
     >
       <label v-if="label" class="vmz-ui-upload__label" :for="controlId">{{ label }}</label>
 
@@ -28,7 +28,7 @@
           :aria-invalid="error ? 'true' : 'false'"
           :aria-describedby="describedBy"
           :data-vmz-upload-directory="directoryAttr"
-          @change="onPick"
+          @change="this.onPick"
         />
         <p class="vmz-ui-upload__hint" data-vmz-upload="hint">{{ zoneHint }}</p>
       </div>
@@ -58,10 +58,10 @@
       <p v-if="resultText" class="vmz-ui-upload__result" data-vmz-upload="result">{{ resultText }}</p>
 
       <div v-if="showActions" class="vmz-ui-upload__actions" data-vmz-upload="actions">
-        <button v-if="canCancel" type="button" class="vmz-ui-upload__cancel" data-vmz-upload="cancel" @click="onCancelClick">
+        <button v-if="canCancel" type="button" class="vmz-ui-upload__cancel" data-vmz-upload="cancel" @click="this.onCancelClick">
           {{ cancelLabel }}
         </button>
-        <button v-if="canResume" type="button" class="vmz-ui-upload__resume" data-vmz-upload="resume" @click="onResumeClick">
+        <button v-if="canResume" type="button" class="vmz-ui-upload__resume" data-vmz-upload="resume" @click="this.onResumeClick">
           {{ resumeLabel }}
         </button>
       </div>