@vmz/ui 0.1.15 → 0.1.17

package/src/components/Select.vmz

@@ -1,75 +1,75 @@
 <template>
   <div
-      class={'vmz-ui-select' + (open ? ' is-opened' : '') + (isMultiple ? ' is-multiple' : '')}
+      :class="'vmz-ui-select' + (open ? ' is-opened' : '') + (isMultiple ? ' is-multiple' : '')"
       data-vmz-ui="select"
-      data-mode={mode}
-      data-searchable={searchableAttr}
-      data-invalid={invalidAttr}
+      :data-mode="mode"
+      :data-searchable="searchableAttr"
+      :data-invalid="invalidAttr"
     >
-      <label if={label} class="vmz-ui-select__label" for={controlId}>{label}</label>
+      <label v-if="label" class="vmz-ui-select__label" :for="controlId">{{ label }}</label>
       <button
         type="button"
-        id={controlId}
+        :id="controlId"
         class="vmz-ui-select__control"
         role="combobox"
-        disabled={disabled}
+        :disabled="disabled"
         aria-haspopup="listbox"
-        aria-expanded={open ? 'true' : 'false'}
-        aria-controls={listId}
-        aria-invalid={error ? 'true' : 'false'}
-        aria-describedby={describedBy}
-        aria-multiselectable={isMultiple ? 'true' : 'false'}
-        onClick={toggle}
-        onKeyDown={onTriggerKeyDown}
+        :aria-expanded="open ? 'true' : 'false'"
+        :aria-controls="listId"
+        :aria-invalid="error ? 'true' : 'false'"
+        :aria-describedby="describedBy"
+        :aria-multiselectable="isMultiple ? 'true' : 'false'"
+        @click="toggle"
+        :onKeyDown="onTriggerKeyDown"
       >
-        <span class="vmz-ui-select__value">{displayLabel}</span>
+        <span class="vmz-ui-select__value">{{ displayLabel }}</span>
         <span class="vmz-ui-select__chev" aria-hidden="true"></span>
       </button>
       <div
-        if={open}
-        id={listId}
+        v-if="open"
+        :id="listId"
         class="vmz-ui-select__panel"
         data-vmz-overlay="select"
         data-vmz-overlay-owner="select"
         data-vmz-focus="enter"
       >
-        <div if={searchable} class="vmz-ui-select__search">
+        <div v-if="searchable" class="vmz-ui-select__search">
           <input
             type="search"
             class="vmz-ui-select__search-input"
             data-vmz-select="search"
-            value={searchQuery}
-            placeholder={searchPlaceholder}
-            aria-label={searchPlaceholder}
-            onInput={onSearchInput}
-            onKeyDown={onSearchKeyDown}
+            :value="searchQuery"
+            :placeholder="searchPlaceholder"
+            :aria-label="searchPlaceholder"
+            @input="onSearchInput"
+            :onKeyDown="onSearchKeyDown"
           />
         </div>
         <ul
           class="vmz-ui-select__list"
           role="listbox"
-          aria-multiselectable={isMultiple ? 'true' : 'false'}
+          :aria-multiselectable="isMultiple ? 'true' : 'false'"
           tabindex="-1"
-          onKeyDown={onListKeyDown}
+          :onKeyDown="onListKeyDown"
         >
-          <li if={showEmpty} class="vmz-ui-select__empty" role="presentation">{emptyText}</li>
-          <li each={visibleOptions} as="opt" key={opt.value} role="presentation">
+          <li v-if="showEmpty" class="vmz-ui-select__empty" role="presentation">{{ emptyText }}</li>
+          <li v-for="opt in visibleOptions" :key="opt.value" role="presentation">
             <button
               type="button"
-              class={'vmz-ui-select__option' + (opt.selected ? ' is-on' : '')}
+              :class="'vmz-ui-select__option' + (opt.selected ? ' is-on' : '')"
               role="option"
-              data-vmz-option={opt.value}
-              aria-selected={opt.selected ? 'true' : 'false'}
-              onClick={onOptionClick}
-            >{opt.label}</button>
+              :data-vmz-option="opt.value"
+              :aria-selected="opt.selected ? 'true' : 'false'"
+              @click="onOptionClick"
+            >{{ opt.label }}</button>
           </li>
         </ul>
-        <div if={isMultiple} class="vmz-ui-select__footer">
-          <button type="button" class="vmz-ui-select__done" data-vmz-select="done" onClick={close}>Done</button>
+        <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>
         </div>
       </div>
-      <p if={description} id={descriptionId} class="vmz-ui-select__description">{description}</p>
-      <p if={error} id={errorId} class="vmz-ui-select__error" role="alert">{error}</p>
+      <p v-if="description" :id="descriptionId" class="vmz-ui-select__description">{{ description }}</p>
+      <p v-if="error" :id="errorId" class="vmz-ui-select__error" role="alert">{{ error }}</p>
     </div>
 </template>
 

package/src/components/Skeleton.vmz

@@ -2,15 +2,15 @@
   <div
       class="vmz-ui-skeleton"
       data-vmz-ui="skeleton"
-      data-loading={loadingAttr}
+      :data-loading="loadingAttr"
       role="status"
       aria-live="polite"
-      aria-busy={loadingAttr}
+      :aria-busy="loadingAttr"
     >
-      <div if={loading} class="vmz-ui-skeleton__block" data-vmz-skeleton="block"></div>
-      <div if={loading} class="vmz-ui-skeleton__line" data-vmz-skeleton="line"></div>
-      <div if={loading} class="vmz-ui-skeleton__line" data-vmz-skeleton="line"></div>
-      <div if={!loading} class="vmz-ui-skeleton__content">
+      <div v-if="loading" class="vmz-ui-skeleton__block" data-vmz-skeleton="block"></div>
+      <div v-if="loading" class="vmz-ui-skeleton__line" data-vmz-skeleton="line"></div>
+      <div v-if="loading" class="vmz-ui-skeleton__line" data-vmz-skeleton="line"></div>
+      <div v-if="!loading" class="vmz-ui-skeleton__content">
         <slot />
       </div>
     </div>

package/src/components/Space.vmz

@@ -1,4 +1,4 @@
-<template><div class="vmz-ui-space" data-vmz-ui="space" data-direction={direction} data-size={size} data-wrap={wrap?'true':'false'}><slot /></div></template>
+<template><div class="vmz-ui-space" data-vmz-ui="space" :data-direction="direction" :data-size="size" :data-wrap="wrap?'true':'false'"><slot /></div></template>
 <style>
 .vmz-ui-space{display:flex;gap:var(--vmz-density-control-gap,.75rem)}
 .vmz-ui-space[data-direction='vertical']{flex-direction:column}

package/src/components/Spinner.vmz

@@ -3,7 +3,7 @@
       class="vmz-ui-spinner"
       data-vmz-ui="spinner"
       role="status"
-      aria-label={label}
+      :aria-label="label"
     ></span>
 </template>
 

package/src/components/Steps.vmz

@@ -1,18 +1,17 @@
 <template>
-  <ol class="vmz-ui-steps" data-vmz-ui="steps" aria-label={label}>
+  <ol class="vmz-ui-steps" data-vmz-ui="steps" :aria-label="label">
       <li
-        each={items}
-        as="item"
-        key={item.id}
+        v-for="item in items"
+        :key="item.id"
         class="vmz-ui-steps__item"
-        data-vmz-step={item.id}
-        data-status={item.status}
-        aria-current={current === item.id ? 'step' : 'false'}
+        :data-vmz-step="item.id"
+        :data-status="item.status"
+        :aria-current="current === item.id ? 'step' : 'false'"
       >
-        <span class="vmz-ui-steps__index" data-vmz-step-index={item.id}>{item.index}</span>
+        <span class="vmz-ui-steps__index" :data-vmz-step-index="item.id">{{ item.index }}</span>
         <span class="vmz-ui-steps__body">
-          <span class="vmz-ui-steps__title">{item.title}</span>
-          <span if={item.description} class="vmz-ui-steps__description">{item.description}</span>
+          <span class="vmz-ui-steps__title">{{ item.title }}</span>
+          <span v-if="item.description" class="vmz-ui-steps__description">{{ item.description }}</span>
         </span>
       </li>
     </ol>

package/src/components/Switch.vmz

@@ -1,19 +1,19 @@
 <template>
-  <label class="vmz-ui-switch" data-vmz-ui="switch" for={controlId}>
+  <label class="vmz-ui-switch" data-vmz-ui="switch" :for="controlId">
       <button
-        id={controlId}
+        :id="controlId"
         type="button"
         class="vmz-ui-switch__control"
         role="switch"
-        aria-checked={checked}
-        aria-describedby={describedBy}
-        disabled={disabled}
-        onClick={toggle}
-        onKeyDown={onKeyDown}
+        :aria-checked="checked"
+        :aria-describedby="describedBy"
+        :disabled="disabled"
+        @click="toggle"
+        :onKeyDown="onKeyDown"
       >
         <span class="vmz-ui-switch__thumb" aria-hidden="true"></span>
       </button>
-      <span class="vmz-ui-switch__label">{label}</span>
+      <span class="vmz-ui-switch__label">{{ label }}</span>
     </label>
 </template>
 

package/src/components/Table.vmz

@@ -1,27 +1,27 @@
 <template>
-  <div class="vmz-ui-table-wrap" data-vmz-ui="table" data-sort-key={sortKey} data-sort-dir={sortDir}>
+  <div class="vmz-ui-table-wrap" data-vmz-ui="table" :data-sort-key="sortKey" :data-sort-dir="sortDir">
       <table class="vmz-ui-table">
-        <thead onClick={onHeadClick}>
+        <thead @click="onHeadClick">
           <tr>
-            <th each={columns} as="col" key={col.id} scope="col" data-vmz-col={col.id}>
-              <button type="button" class="vmz-ui-table__sort" data-vmz-sort={col.id}>
-                {col.title}
+            <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">
+                {{ col.title }}
               </button>
             </th>
-            <th if={hasRowAction} scope="col">{actionTitle}</th>
+            <th v-if="hasRowAction" scope="col">{{ actionTitle }}</th>
           </tr>
         </thead>
-        <tbody onClick={onBodyClick}>
-          <tr each={rows} as="row" key={row.id} data-vmz-row={row.id}>
-            <td each={row.cells} as="cell">{cell}</td>
-            <td if={hasRowAction}>
+        <tbody @click="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">
               <button
                 type="button"
                 class="vmz-ui-table__row-action"
-                data-vmz-row-action={row.id}
-                disabled={rowActionDisabled}
+                :data-vmz-row-action="row.id"
+                :disabled="rowActionDisabled"
               >
-                {actionLabel}
+                {{ actionLabel }}
               </button>
             </td>
           </tr>

package/src/components/Tabs.vmz

@@ -3,32 +3,31 @@
       <div
         class="vmz-ui-tabs__list"
         role="tablist"
-        aria-label={label}
-        onKeyDown={onListKeyDown}
-        onClick={onListClick}
+        :aria-label="label"
+        :onKeyDown="onListKeyDown"
+        @click="onListClick"
       >
         <button
-          each={items}
-          as="item"
-          key={item.id}
+          v-for="item in items"
+          :key="item.id"
           type="button"
           class="vmz-ui-tabs__tab"
           role="tab"
-          id={item.id}
-          data-vmz-tab={item.id}
-          aria-selected={selected === item.id ? 'true' : 'false'}
-          aria-controls={item.controls}
-          tabindex={selected === item.id ? 0 : -1}
+          :id="item.id"
+          :data-vmz-tab="item.id"
+          :aria-selected="selected === item.id ? 'true' : 'false'"
+          :aria-controls="item.controls"
+          :tabindex="selected === item.id ? 0 : -1"
         >
-          {item.title}
+          {{ item.title }}
         </button>
       </div>
       <div
         class="vmz-ui-tabs__panel"
         role="tabpanel"
-        id={panelId}
-        data-vmz-tab-panel={selected}
-        aria-labelledby={selected}
+        :id="panelId"
+        :data-vmz-tab-panel="selected"
+        :aria-labelledby="selected"
         tabindex="0"
       >
         <slot />

package/src/components/Tag.vmz

@@ -1,4 +1,11 @@
-<template><span class="vmz-ui-tag" data-vmz-ui="tag" data-status={status||undefined}><slot /></span></template>
+<template>
+  <span
+    class="vmz-ui-tag"
+    data-vmz-ui="tag"
+    :data-status="status || undefined"
+    :data-vmz-tag-status="status || undefined"
+  ><slot /></span>
+</template>
 <style>
 .vmz-ui-tag{display:inline-flex;align-items:center;min-height:1.5rem;padding:0 .45rem;border:1px solid var(--vmz-line-default);border-radius:var(--vmz-radius-sm,2px);background:var(--vmz-surface-mist);color:var(--vmz-text-steel);font-size:.75rem;line-height:1}
 .vmz-ui-tag[data-status='success']{color:var(--vmz-status-success-foreground);background:color-mix(in srgb,var(--vmz-status-success-accent) 12%,var(--vmz-surface-paper));border-color:color-mix(in srgb,var(--vmz-status-success-accent) 45%,var(--vmz-line-default))}

package/src/components/TextArea.vmz

@@ -1,19 +1,19 @@
 <template>
-  <div class="vmz-ui-textarea" data-vmz-ui="textarea" data-invalid={invalidAttr}>
-      <label if={label} class="vmz-ui-textarea__label" for={controlId}>{label}</label>
+  <div class="vmz-ui-textarea" data-vmz-ui="textarea" :data-invalid="invalidAttr">
+      <label v-if="label" class="vmz-ui-textarea__label" :for="controlId">{{ label }}</label>
       <textarea
-        id={controlId}
+        :id="controlId"
         class="vmz-ui-textarea__control"
-        rows={rows}
-        value={value}
-        disabled={disabled}
-        readonly={readonly}
-        aria-invalid={error ? 'true' : 'false'}
-        aria-describedby={describedBy}
-        onInput={onInput}
+        :rows="rows"
+        :value="value"
+        :disabled="disabled"
+        :readonly="readonly"
+        :aria-invalid="error ? 'true' : 'false'"
+        :aria-describedby="describedBy"
+        @input="onInput"
       ></textarea>
-      <p if={description} id={descriptionId} class="vmz-ui-textarea__description">{description}</p>
-      <p if={error} id={errorId} class="vmz-ui-textarea__error" role="alert">{error}</p>
+      <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>
     </div>
 </template>
 

package/src/components/Timeline.vmz

@@ -1,9 +1,9 @@
 <template>
-  <ol class="vmz-ui-timeline" data-vmz-ui="timeline" aria-label={label}>
-      <li each={items} as="item" key={item.id} class="vmz-ui-timeline__item" data-vmz-audit={item.id}>
-        <p class="vmz-ui-timeline__time">{item.time}</p>
-        <p class="vmz-ui-timeline__title">{item.title}</p>
-        <p if={item.detail} class="vmz-ui-timeline__detail">{item.detail}</p>
+  <ol class="vmz-ui-timeline" data-vmz-ui="timeline" :aria-label="label">
+      <li v-for="item in items" :key="item.id" class="vmz-ui-timeline__item" :data-vmz-audit="item.id">
+        <p class="vmz-ui-timeline__time">{{ item.time }}</p>
+        <p class="vmz-ui-timeline__title">{{ item.title }}</p>
+        <p v-if="item.detail" class="vmz-ui-timeline__detail">{{ item.detail }}</p>
       </li>
     </ol>
 </template>

package/src/components/Toc.vmz

@@ -1,16 +1,15 @@
 <template>
-  <aside class="vmz-ui-toc" data-vmz-ui="toc" aria-label={label}>
-      <p class="vmz-ui-toc__title">{label}</p>
+  <aside class="vmz-ui-toc" data-vmz-ui="toc" :aria-label="label">
+      <p class="vmz-ui-toc__title">{{ label }}</p>
       <nav class="vmz-ui-toc__nav">
         <a
-          each={items}
-          as="item"
-          key={item.id}
+          v-for="item in items"
+          :key="item.id"
           class="vmz-ui-toc__link"
-          href={item.href}
-          data-vmz-toc={item.id}
+          :href="item.href"
+          :data-vmz-toc="item.id"
         >
-          {item.title}
+          {{ item.title }}
         </a>
       </nav>
     </aside>

package/src/components/Tooltip.vmz

@@ -2,19 +2,19 @@
   <div
       class="vmz-ui-tooltip"
       data-vmz-ui="tooltip"
-      data-open={openAttr}
+      :data-open="openAttr"
     >
       <div class="vmz-ui-tooltip__trigger" data-vmz-tooltip="trigger">
         <slot />
       </div>
       <div
-        if={open}
+        v-if="open"
         class="vmz-ui-tooltip__bubble"
         role="tooltip"
-        id={tooltipId}
+        :id="tooltipId"
         data-vmz-tooltip="bubble"
       >
-        {content}
+        {{ content }}
       </div>
     </div>
 </template>

package/src/components/Tree.vmz

@@ -1,40 +1,39 @@
 <template>
   <div class="vmz-ui-tree" data-vmz-ui="tree">
-      <p if={label} class="vmz-ui-tree__label" id={labelId}>{label}</p>
+      <p v-if="label" class="vmz-ui-tree__label" :id="labelId">{{ label }}</p>
       <ul
         class="vmz-ui-tree__items"
         role="tree"
-        aria-labelledby={labelId}
-        aria-label={label}
-        onClick={onTreeClick}
-        onKeyDown={onTreeKeyDown}
+        :aria-labelledby="labelId"
+        :aria-label="label"
+        @click="onTreeClick"
+        :onKeyDown="onTreeKeyDown"
       >
         <li
-          each={items}
-          as="item"
-          key={item.id}
+          v-for="item in items"
+          :key="item.id"
           class="vmz-ui-tree__item"
           role="treeitem"
-          id={item.id}
-          data-vmz-tree-item={item.id}
-          data-depth={item.depth}
-          aria-selected={selected === item.id ? 'true' : 'false'}
-          aria-expanded={item.expandedAttr}
-          tabindex={selected === item.id ? 0 : -1}
-          style={item.padStyle}
+          :id="item.id"
+          :data-vmz-tree-item="item.id"
+          :data-depth="item.depth"
+          :aria-selected="selected === item.id ? 'true' : 'false'"
+          :aria-expanded="item.expandedAttr"
+          :tabindex="selected === item.id ? 0 : -1"
+          :style="item.padStyle"
         >
           <button
-            if={item.expandable}
+            v-if="item.expandable"
             type="button"
             class="vmz-ui-tree__twist"
-            data-vmz-tree-twist={item.id}
-            aria-label={item.twistLabel}
+            :data-vmz-tree-twist="item.id"
+            :aria-label="item.twistLabel"
             tabindex="-1"
           >
-            {item.expanded ? '−' : '+'}
+            {{ item.expanded ? '−' : '+' }}
           </button>
-          <span if={!item.expandable} class="vmz-ui-tree__twist-spacer" aria-hidden="true"></span>
-          <span class="vmz-ui-tree__title" data-vmz-tree-title={item.id}>{item.title}</span>
+          <span v-if="!item.expandable" class="vmz-ui-tree__twist-spacer" aria-hidden="true"></span>
+          <span class="vmz-ui-tree__title" :data-vmz-tree-title="item.id">{{ item.title }}</span>
         </li>
       </ul>
     </div>

package/src/components/Typography.vmz

@@ -1,4 +1,4 @@
-<template><div class="vmz-ui-typography" data-vmz-ui="typography" data-variant={variant}><slot /></div></template>
+<template><div class="vmz-ui-typography" data-vmz-ui="typography" :data-variant="variant"><slot /></div></template>
 <style>
 .vmz-ui-typography{margin:0;color:var(--vmz-text-ink);font:inherit;line-height:1.6}
 .vmz-ui-typography[data-variant='title']{font-family:var(--vmz-font-display,var(--vmz-font-sans));font-size:1.5rem;font-weight:650;line-height:1.3}

package/src/components/Upload.vmz

@@ -1,74 +1,73 @@
 <template>
   <div
-      class={'vmz-ui-upload' + (dragOver ? ' is-dragover' : '')}
+      :class="'vmz-ui-upload' + (dragOver ? ' is-dragover' : '')"
       data-vmz-ui="upload"
-      data-vmz-upload-destination={destination}
-      data-vmz-upload-mode={selectionMode}
-      data-vmz-upload-directory={directoryAttr}
-      data-vmz-upload-chunk={chunkAttr}
-      data-vmz-upload-session={sessionAttr}
-      data-invalid={invalidAttr}
-      data-vmz-upload-status={status}
-      data-progress={progress}
-      onDragEnter={onDragEnter}
-      onDragOver={onDragOver}
-      onDragLeave={onDragLeave}
-      onDrop={onDrop}
+      :data-vmz-upload-destination="destination"
+      :data-vmz-upload-mode="selectionMode"
+      :data-vmz-upload-directory="directoryAttr"
+      :data-vmz-upload-chunk="chunkAttr"
+      :data-vmz-upload-session="sessionAttr"
+      :data-invalid="invalidAttr"
+      :data-vmz-upload-status="status"
+      :data-progress="progress"
+      :onDragEnter="onDragEnter"
+      :onDragOver="onDragOver"
+      :onDragLeave="onDragLeave"
+      :onDrop="onDrop"
     >
-      <label if={label} class="vmz-ui-upload__label" for={controlId}>{label}</label>
+      <label v-if="label" class="vmz-ui-upload__label" :for="controlId">{{ label }}</label>
 
       <div class="vmz-ui-upload__zone" data-vmz-upload="zone">
         <input
-          id={controlId}
+          :id="controlId"
           class="vmz-ui-upload__control"
           type="file"
-          accept={accept}
-          multiple={multiple}
-          disabled={inputDisabled}
-          aria-invalid={error ? 'true' : 'false'}
-          aria-describedby={describedBy}
-          data-vmz-upload-directory={directoryAttr}
-          onChange={onPick}
+          :accept="accept"
+          :multiple="multiple"
+          :disabled="inputDisabled"
+          :aria-invalid="error ? 'true' : 'false'"
+          :aria-describedby="describedBy"
+          :data-vmz-upload-directory="directoryAttr"
+          @change="onPick"
         />
-        <p class="vmz-ui-upload__hint" data-vmz-upload="hint">{zoneHint}</p>
+        <p class="vmz-ui-upload__hint" data-vmz-upload="hint">{{ zoneHint }}</p>
       </div>
 
-      <ul if={hasItems} class="vmz-ui-upload__queue" data-vmz-upload="queue">
+      <ul v-if="hasItems" class="vmz-ui-upload__queue" data-vmz-upload="queue">
         <li
-          each={queue}
-          as="item"
-          key={item.key}
+          v-for="item in queue"
+          :key="item.key"
           class="vmz-ui-upload__item"
-          data-vmz-upload-item={item.key}
-          data-status={item.status}
+          :data-vmz-upload-item="item.key"
+          :data-status="item.status"
         >
-          <span class="vmz-ui-upload__item-name" data-vmz-upload="file">{item.name}</span>
-          <span class="vmz-ui-upload__item-meta">{item.meta}</span>
-          <span if={item.showBar} class="vmz-ui-upload__item-bar" style={item.barStyle} aria-hidden="true"></span>
+          <span class="vmz-ui-upload__item-name" data-vmz-upload="file">{{ item.name }}</span>
+          <span class="vmz-ui-upload__item-meta">{{ item.meta }}</span>
+          <span v-if="item.showBar" class="vmz-ui-upload__item-bar" :style="item.barStyle" aria-hidden="true"></span>
         </li>
       </ul>
 
-      <p if={emptyHint} class="vmz-ui-upload__empty" data-vmz-upload="empty">{emptyText}</p>
+      <p v-if="emptyHint" class="vmz-ui-upload__empty" data-vmz-upload="empty">{{ emptyText }}</p>
 
-      <div if={showProgress} class="vmz-ui-upload__progress" data-vmz-upload="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={progress} aria-label={progressLabel}>
-        <div class="vmz-ui-upload__bar" style={progressStyle}></div>
-        <span class="vmz-ui-upload__pct" data-vmz-upload="pct">{progressLabel}</span>
+      <div v-if="showProgress" class="vmz-ui-upload__progress" data-vmz-upload="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" :aria-valuenow="progress" :aria-label="progressLabel">
+        <div class="vmz-ui-upload__bar" :style="progressStyle"></div>
+        <span class="vmz-ui-upload__pct" data-vmz-upload="pct">{{ progressLabel }}</span>
       </div>
 
-      <p if={statusText} class="vmz-ui-upload__status" data-vmz-upload="status">{statusText}</p>
-      <p if={resultText} class="vmz-ui-upload__result" data-vmz-upload="result">{resultText}</p>
+      <p v-if="statusText" class="vmz-ui-upload__status" data-vmz-upload="status">{{ statusText }}</p>
+      <p v-if="resultText" class="vmz-ui-upload__result" data-vmz-upload="result">{{ resultText }}</p>
 
-      <div if={showActions} class="vmz-ui-upload__actions" data-vmz-upload="actions">
-        <button if={canCancel} type="button" class="vmz-ui-upload__cancel" data-vmz-upload="cancel" onClick={onCancelClick}>
-          {cancelLabel}
+      <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">
+          {{ cancelLabel }}
         </button>
-        <button if={canResume} type="button" class="vmz-ui-upload__resume" data-vmz-upload="resume" onClick={onResumeClick}>
-          {resumeLabel}
+        <button v-if="canResume" type="button" class="vmz-ui-upload__resume" data-vmz-upload="resume" @click="onResumeClick">
+          {{ resumeLabel }}
         </button>
       </div>
 
-      <p if={description} id={descriptionId} class="vmz-ui-upload__description">{description}</p>
-      <p if={error} id={errorId} class="vmz-ui-upload__error" role="alert">{error}</p>
+      <p v-if="description" :id="descriptionId" class="vmz-ui-upload__description">{{ description }}</p>
+      <p v-if="error" :id="errorId" class="vmz-ui-upload__error" role="alert">{{ error }}</p>
     </div>
 </template>