@veritree/ui 0.13.0 → 0.15.1

package/index.js

@@ -33,6 +33,7 @@ import VTInput from "./src/components/Input/VTInput.vue";
 import VTInputDate from "./src/components/Input/VTInputDate.vue";
 import VTInputFile from "./src/components/Input/VTInputFile.vue";
 import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
+import VTProgressBar from "./src/components/ProgressBar/VTProgressBar.vue";
 
 import VTTextarea from "./src/components/Textarea/VTTextarea.vue";
 
@@ -103,6 +104,7 @@ export {
   VTInputDate,
   VTInputFile,
   VTInputUpload,
+  VTProgressBar,
   VTTextarea,
   VTModal,
   VTAccordion,

package/nuxt.js

@@ -11,6 +11,7 @@ const components = [
   'src/components/Listbox',
   'src/components/Image',
   'src/components/Popover',
+  'src/components/ProgressBar',
   'src/components/Tabs',
 ]
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.13.0",
+  "version": "0.15.1",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,6 +11,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@linusborg/vue-simple-portal": "^0.1.5",
     "@veritree/icons": "^0.19.0"
-  }
+  },
+  "devDependencies": {}
 }

package/src/components/Dialog/VTDialog.vue

@@ -1,23 +1,30 @@
 <template>
-  <div
-    v-if="visible"
-    :id="id"
-    :class="{
-      Dialog: headless,
-      'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
-    }"
-    aria-modal="true"
-    @click="onClick"
-  >
-    <slot></slot>
-  </div>
+  <Portal>
+    <div
+      v-if="visible"
+      :id="id"
+      :class="{
+        Dialog: headless,
+        'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
+      }"
+      aria-modal="true"
+      @click="onClick"
+    >
+      <slot></slot>
+    </div>
+  </Portal>
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { Portal } from '@linusborg/vue-simple-portal';
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTDialog",
+  name: 'VTDialog',
+
+  components: {
+    Portal,
+  },
 
   provide() {
     return {
@@ -56,7 +63,7 @@ export default {
   },
 
   model: {
-    prop: "visible",
+    prop: 'visible',
   },
 
   props: {
@@ -115,8 +122,8 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit("input", false);
-        this.$emit("hidden");
+        this.$emit('input', false);
+        this.$emit('hidden');
       });
     },
 

package/src/components/Drawer/VTDrawerHeader.vue

@@ -4,7 +4,7 @@
     :id="id"
     :class="{
       'Drawer-header': headless,
-      'flex items-center justify-between': !headless,
+      'mb-8 flex items-center justify-between gap-3': !headless,
     }"
   >
     <slot></slot>
@@ -13,14 +13,14 @@
 
 <script>
 export default {
-  name: "VTDrawerHeader",
+  name: 'VTDrawerHeader',
 
-  inject: ["api"],
+  inject: ['api'],
 
   props: {
     as: {
       type: String,
-      default: "header",
+      default: 'header',
     },
   },
 

package/src/components/Drawer/VTDrawerTitle.vue

@@ -4,7 +4,7 @@
     :id="id"
     :class="{
       'Drawer-title': headless,
-      'mb-8 text-2xl font-semibold': !headless,
+      'text-2xl font-semibold': !headless,
     }"
   >
     <slot></slot>
@@ -13,14 +13,14 @@
 
 <script>
 export default {
-  name: "VTDrawerTitle",
+  name: 'VTDrawerTitle',
 
-  inject: ["api"],
+  inject: ['api'],
 
   props: {
     as: {
       type: String,
-      default: "div",
+      default: 'div',
     },
   },
 
@@ -48,7 +48,7 @@ export default {
       const dialog = document.getElementById(this.api().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-labelledby", this.id);
+        dialog.setAttribute('aria-labelledby', this.id);
       }
     },
   },

package/src/components/ProgressBar/VTProgressBar.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    :class="[
+      headless
+        ? 'progress-bar'
+        : 'relative min-h-[10px] w-full overflow-hidden rounded-full bg-gray-200',
+    ]"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    :aria-valuenow="value"
+    :aria-label="label"
+  >
+    <div
+      :class="[
+        headless
+          ? 'progress-bar__indicator'
+          : 'absolute left-0 h-full bg-secondary-300',
+      ]"
+      :style="{ width: `${value}%` }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: null,
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+};
+</script>