@speckle/ui-components 2.17.2 → 2.17.4

package/dist/AvatarEditor-e223a145.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=require("@heroicons/vue/24/outline"),q=require("vue-advanced-cropper");require("vue-advanced-cropper/dist/style.css");const i=require("./lib.cjs"),c=require("vue-tippy");require("lodash");require("@heroicons/vue/24/solid");require("@heroicons/vue/20/solid");require("vee-validate");require("nanoid");require("@speckle/shared");require("@vueuse/core");require("@headlessui/vue");require("v3-infinite-loading");const R={class:"flex flex-col space-y-2"},B={class:"flex"},_={class:"flex mx-14 space-x-2"},F=e.createElementVNode("div",{class:"grow"},null,-1),D=e.defineComponent({__name:"AvatarEditor",props:{user:null,disabled:{type:Boolean},size:null},emits:["cancel","save"],setup(u,{emit:m}){const h=m,d=u,o=e.ref(null),f=e.ref(null),a=e.ref(null),r=e.ref(null),s=e.computed(()=>{switch(d.size){case"xs":return{width:64,height:64};case"xxl":return{width:140,height:140};case"editable":return{width:240,height:240};case"base":default:return{width:32,height:32}}}),p=t=>{r.value&&URL.revokeObjectURL(r.value),r.value=t},x=t=>{const l=t.files[0];l&&(a.value=l)},g=t=>{var l;return t?"border-primary":(l=a.value)!=null&&l.error?"border-danger":"border-outline-2"},C=()=>{var t;return(t=o.value)==null?void 0:t.rotate(-90)},w=()=>{var t;return(t=o.value)==null?void 0:t.rotate(90)},k=()=>{var t;return(t=o.value)==null?void 0:t.flip(1,0)},y=()=>{var t;return(t=o.value)==null?void 0:t.flip(0,1)},N=()=>{var t;return(t=f.value)==null?void 0:t.triggerPicker()},V=()=>{a.value=null,r.value=null},b=()=>{var l;const t=((l=o.value)==null?void 0:l.getResult().canvas.toDataURL("image/jpeg",.85))||null;h("save",t)};return e.onUnmounted(()=>{p(null)}),e.watch(()=>d.user.avatar,t=>{r.value=t||null},{immediate:!0}),e.watch(a,t=>{r.value=t!=null&&t.file&&!t.error?URL.createObjectURL(t.file):null},{deep:!0}),(t,l)=>(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",B,[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col px-2 space-y-1",{invisible:!r.value}])},[e.withDirectives(e.createVNode(i.FormButton,{"icon-left":e.unref(n.ArrowUturnLeftIcon),"hide-text":"",size:"sm",outlined:"",onClick:C},null,8,["icon-left"]),[[e.unref(c.directive),"Rotate left"]]),e.withDirectives(e.createVNode(i.FormButton,{"icon-left":e.unref(n.ArrowUturnRightIcon),"hide-text":"",size:"sm",outlined:"",onClick:w},null,8,["icon-left"]),[[e.unref(c.directive),"Rotate right"]]),e.withDirectives(e.createVNode(i.FormButton,{"icon-left":e.unref(n.ArrowUpOnSquareIcon),"hide-text":"",size:"sm",outlined:"",onClick:y},null,8,["icon-left"]),[[e.unref(c.directive),"Flip vertically"]]),e.withDirectives(e.createVNode(i.FormButton,{"icon-left":e.unref(n.ArrowLeftOnRectangleIcon),"hide-text":"",size:"sm",outlined:"",onClick:k},null,8,["icon-left"]),[[e.unref(c.directive),"Flip horizontally"]])],2),r.value?(e.openBlock(),e.createBlock(e.unref(q.Cropper),{key:0,ref_key:"cropper",ref:o,class:"cropper",src:r.value,"stencil-props":{aspectRatio:1/1},canvas:s.value,style:e.normalizeStyle(`width: ${s.value.width}px; height: ${s.value.height}px`)},null,8,["src","canvas","style"])):e.createCommentVNode("",!0),e.createVNode(i.FormFileUploadZone,{ref_key:"uploadZone",ref:f,class:e.normalizeClass(["cropper flex items-center justify-center",{hidden:r.value}]),accept:"image/*","size-limit":5*1024*1024,onFilesSelected:x},{default:e.withCtx(({isDraggingFiles:v,activatorOn:z})=>[e.createElementVNode("div",e.mergeProps({class:["cursor-pointer text-center w-full h-full border-dashed border-2 rounded-md p-4 flex items-center justify-center text-sm text-foreground-2",[g(v)]]},e.toHandlers(z,!0))," Click here or drag and drop an image ",16)]),_:1},8,["class"]),e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col px-2 space-y-1",{invisible:!r.value}])},[e.withDirectives(e.createVNode(i.FormButton,{"icon-left":e.unref(n.PhotoIcon),"hide-text":"",size:"sm",onClick:N},null,8,["icon-left"]),[[e.unref(c.directive),"Replace image"]]),e.withDirectives(e.createVNode(i.FormButton,{"icon-left":e.unref(n.XMarkIcon),"hide-text":"",size:"sm",color:"danger",onClick:V},null,8,["icon-left"]),[[e.unref(c.directive),"Remove"]])],2)]),e.createElementVNode("div",_,[F,e.createVNode(i.FormButton,{color:"secondary",size:"sm",onClick:l[0]||(l[0]=v=>t.$emit("cancel"))},{default:e.withCtx(()=>[e.createTextVNode(" Close ")]),_:1}),e.createVNode(i.FormButton,{size:"sm",disabled:u.disabled,onClick:b},{default:e.withCtx(()=>[e.createTextVNode("Save")]),_:1},8,["disabled"])])]))}});exports.default=D;
+//# sourceMappingURL=AvatarEditor-e223a145.cjs.map

package/dist/AvatarEditor-e223a145.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarEditor-e223a145.cjs","sources":["../src/components/user/AvatarEditor.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col space-y-2\">\n    <div class=\"flex\">\n      <div class=\"flex flex-col px-2 space-y-1\" :class=\"{ invisible: !activeImageUrl }\">\n        <FormButton\n          v-tippy=\"'Rotate left'\"\n          :icon-left=\"ArrowUturnLeftIcon\"\n          hide-text\n          size=\"sm\"\n          outlined\n          @click=\"rotateLeft\"\n        />\n        <FormButton\n          v-tippy=\"'Rotate right'\"\n          :icon-left=\"ArrowUturnRightIcon\"\n          hide-text\n          size=\"sm\"\n          outlined\n          @click=\"rotateRight\"\n        />\n        <FormButton\n          v-tippy=\"'Flip vertically'\"\n          :icon-left=\"ArrowUpOnSquareIcon\"\n          hide-text\n          size=\"sm\"\n          outlined\n          @click=\"flipVertical\"\n        />\n        <FormButton\n          v-tippy=\"'Flip horizontally'\"\n          :icon-left=\"ArrowLeftOnRectangleIcon\"\n          hide-text\n          size=\"sm\"\n          outlined\n          @click=\"flipHorizontal\"\n        />\n      </div>\n      <Cropper\n        v-if=\"activeImageUrl\"\n        ref=\"cropper\"\n        class=\"cropper\"\n        :src=\"activeImageUrl\"\n        :stencil-props=\"{\n          aspectRatio: 1 / 1\n        }\"\n        :canvas=\"canvasSize\"\n        :style=\"`width: ${canvasSize.width}px; height: ${canvasSize.height}px`\"\n      />\n      <FormFileUploadZone\n        ref=\"uploadZone\"\n        v-slot=\"{ isDraggingFiles, activatorOn }\"\n        class=\"cropper flex items-center justify-center\"\n        :class=\"{ hidden: activeImageUrl }\"\n        accept=\"image/*\"\n        :size-limit=\"5 * 1024 * 1024\"\n        @files-selected=\"onFilesSelected\"\n      >\n        <div\n          class=\"cursor-pointer text-center w-full h-full border-dashed border-2 rounded-md p-4 flex items-center justify-center text-sm text-foreground-2\"\n          :class=\"[getDashedBorderClasses(isDraggingFiles)]\"\n          v-on=\"activatorOn\"\n        >\n          Click here or drag and drop an image\n        </div>\n      </FormFileUploadZone>\n      <div class=\"flex flex-col px-2 space-y-1\" :class=\"{ invisible: !activeImageUrl }\">\n        <FormButton\n          v-tippy=\"'Replace image'\"\n          :icon-left=\"PhotoIcon\"\n          hide-text\n          size=\"sm\"\n          @click=\"onReplace\"\n        />\n        <FormButton\n          v-tippy=\"'Remove'\"\n          :icon-left=\"XMarkIcon\"\n          hide-text\n          size=\"sm\"\n          color=\"danger\"\n          @click=\"onRemove\"\n        />\n      </div>\n    </div>\n    <div class=\"flex mx-14 space-x-2\">\n      <div class=\"grow\" />\n      <FormButton color=\"secondary\" size=\"sm\" @click=\"$emit('cancel')\">\n        Close\n      </FormButton>\n      <FormButton size=\"sm\" :disabled=\"disabled\" @click=\"onSave\">Save</FormButton>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport {\n  ArrowUturnLeftIcon,\n  ArrowUturnRightIcon,\n  ArrowLeftOnRectangleIcon,\n  ArrowUpOnSquareIcon,\n  XMarkIcon,\n  PhotoIcon\n} from '@heroicons/vue/24/outline'\nimport type { Nullable } from '@speckle/shared'\nimport { onUnmounted, ref, watch, computed } from 'vue'\nimport { Cropper } from 'vue-advanced-cropper'\nimport 'vue-advanced-cropper/dist/style.css'\nimport FormButton from '~~/src/components/form/Button.vue'\nimport FormFileUploadZone from '~~/src/components/form/file-upload/Zone.vue'\nimport type { UploadableFileItem } from '~~/src/composables/form/fileUpload'\nimport type { AvatarUser, UserAvatarSize } from '~~/src/composables/user/avatar'\nimport { directive as vTippy } from 'vue-tippy'\n\n/**\n * Always try to lazy load this, as it's quite heavy\n */\n\nconst emit = defineEmits([\"cancel\", \"save\"])\n\nconst props = defineProps({\n  user: null,\n  disabled: { type: Boolean },\n  size: null\n})\n\nconst cropper = ref(\n  null as Nullable<{\n    flip: (x: number, y: number) => void\n    rotate: (angle: number) => void\n    getResult: () => { canvas: HTMLCanvasElement }\n  }>\n)\nconst uploadZone = ref(null as Nullable<{ triggerPicker: () => void }>)\nconst selectedUpload = ref(null as Nullable<UploadableFileItem>)\nconst activeImageUrl = ref(null as Nullable<string>)\n\nconst canvasSize = computed(() => {\n  switch (props.size) {\n    case 'xs' || 'sm' || 'lg' || 'xl':\n      return { width: 64, height: 64 }\n    case 'xxl':\n      return { width: 140, height: 140 }\n    case 'editable':\n      return { width: 240, height: 240 }\n    case 'base':\n    default:\n      return { width: 32, height: 32 }\n  }\n})\n\nconst setNewActiveUrl = (url: Nullable<string>) => {\n  if (activeImageUrl.value) {\n    URL.revokeObjectURL(activeImageUrl.value)\n  }\n\n  activeImageUrl.value = url\n}\n\nconst onFilesSelected = (params: { files: UploadableFileItem[] }) => {\n  const file = params.files[0]\n  if (!file) return\n  selectedUpload.value = file\n}\n\nconst getDashedBorderClasses = (isDraggingFiles: boolean) => {\n  if (isDraggingFiles) return 'border-primary'\n  if (selectedUpload.value?.error) return 'border-danger'\n\n  return 'border-outline-2'\n}\n\nconst rotateLeft = () => cropper.value?.rotate(-90)\nconst rotateRight = () => cropper.value?.rotate(90)\nconst flipHorizontal = () => cropper.value?.flip(1, 0)\nconst flipVertical = () => cropper.value?.flip(0, 1)\n\nconst onReplace = () => uploadZone.value?.triggerPicker()\nconst onRemove = () => {\n  selectedUpload.value = null\n  activeImageUrl.value = null\n}\nconst onSave = () => {\n  const newUrl = cropper.value?.getResult().canvas.toDataURL('image/jpeg', 0.85) || null\n  emit('save', newUrl)\n}\n\nonUnmounted(() => {\n  setNewActiveUrl(null)\n})\n\nwatch(\n  () => props.user.avatar,\n  (newAvatar) => {\n    activeImageUrl.value = newAvatar || null\n  },\n  { immediate: true }\n)\n\nwatch(\n  selectedUpload,\n  (newUpload) => {\n    activeImageUrl.value =\n      newUpload?.file && !newUpload.error ? URL.createObjectURL(newUpload.file) : null\n  },\n  { deep: true }\n)\n</script>\n"],"names":["emit","__emit","props","__props","cropper","ref","uploadZone","selectedUpload","activeImageUrl","canvasSize","computed","setNewActiveUrl","url","onFilesSelected","params","file","getDashedBorderClasses","isDraggingFiles","_a","rotateLeft","rotateRight","flipHorizontal","flipVertical","onReplace","onRemove","onSave","newUrl","onUnmounted","watch","newAvatar","newUpload"],"mappings":"4xBAmHA,MAAMA,EAAOC,EAEPC,EAAQC,EAMRC,EAAUC,EAAA,IACd,IAAA,EAMIC,EAAaD,MAAI,IAA+C,EAChEE,EAAiBF,MAAI,IAAoC,EACzDG,EAAiBH,MAAI,IAAwB,EAE7CI,EAAaC,EAAAA,SAAS,IAAM,CAChC,OAAQR,EAAM,KAAM,CAClB,IAAK,KACH,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAG,EACjC,IAAK,MACH,MAAO,CAAE,MAAO,IAAK,OAAQ,GAAI,EACnC,IAAK,WACH,MAAO,CAAE,MAAO,IAAK,OAAQ,GAAI,EACnC,IAAK,OACL,QACE,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAG,CACnC,CAAA,CACD,EAEKS,EAAmBC,GAA0B,CAC7CJ,EAAe,OACb,IAAA,gBAAgBA,EAAe,KAAK,EAG1CA,EAAe,MAAQI,CAAA,EAGnBC,EAAmBC,GAA4C,CAC7D,MAAAC,EAAOD,EAAO,MAAM,CAAC,EACtBC,IACLR,EAAe,MAAQQ,EAAA,EAGnBC,EAA0BC,GAA6B,OACvD,OAAAA,EAAwB,kBACxBC,EAAAX,EAAe,QAAf,MAAAW,EAAsB,MAAc,gBAEjC,kBAAA,EAGHC,EAAa,IAAA,OAAM,OAAAD,EAAAd,EAAQ,QAAR,YAAAc,EAAe,OAAO,MACzCE,EAAc,IAAA,OAAM,OAAAF,EAAAd,EAAQ,QAAR,YAAAc,EAAe,OAAO,KAC1CG,EAAiB,IAAA,OAAM,OAAAH,EAAAd,EAAQ,QAAR,YAAAc,EAAe,KAAK,EAAG,IAC9CI,EAAe,IAAA,OAAM,OAAAJ,EAAAd,EAAQ,QAAR,YAAAc,EAAe,KAAK,EAAG,IAE5CK,EAAY,IAAM,OAAA,OAAAL,EAAAZ,EAAW,QAAX,YAAAY,EAAkB,iBACpCM,EAAW,IAAM,CACrBjB,EAAe,MAAQ,KACvBC,EAAe,MAAQ,IAAA,EAEnBiB,EAAS,IAAM,OACb,MAAAC,IAASR,EAAAd,EAAQ,QAAR,YAAAc,EAAe,YAAY,OAAO,UAAU,aAAc,OAAS,KAClFlB,EAAK,OAAQ0B,CAAM,CAAA,EAGrBC,OAAAA,EAAAA,YAAY,IAAM,CAChBhB,EAAgB,IAAI,CAAA,CACrB,EAEDiB,EAAA,MACE,IAAM1B,EAAM,KAAK,OAChB2B,GAAc,CACbrB,EAAe,MAAQqB,GAAa,IACtC,EACA,CAAE,UAAW,EAAK,CAAA,EAGpBD,EAAA,MACErB,EACCuB,GAAc,CACEtB,EAAA,MACbsB,GAAA,MAAAA,EAAW,MAAQ,CAACA,EAAU,MAAQ,IAAI,gBAAgBA,EAAU,IAAI,EAAI,IAChF,EACA,CAAE,KAAM,EAAK,CAAA"}

package/dist/{AvatarEditor-8531c565.js → AvatarEditor-fda5ba41.js}

@@ -1,8 +1,8 @@
-import { defineComponent as j, ref as d, computed as N, onUnmounted as V, watch as k, openBlock as y, createElementBlock as $, createElementVNode as a, normalizeClass as m, withDirectives as s, createVNode as r, unref as t, createBlock as O, normalizeStyle as D, createCommentVNode as E, withCtx as p, mergeProps as P, toHandlers as Z, createTextVNode as z } from "vue";
-import { ArrowUturnLeftIcon as H, ArrowUturnRightIcon as q, ArrowUpOnSquareIcon as M, ArrowLeftOnRectangleIcon as T, PhotoIcon as X, XMarkIcon as G } from "@heroicons/vue/24/outline";
-import { Cropper as J } from "vue-advanced-cropper";
+import { defineComponent as N, ref as d, computed as V, onUnmounted as $, watch as k, openBlock as y, createElementBlock as O, createElementVNode as a, normalizeClass as f, withDirectives as s, createVNode as r, unref as t, createBlock as D, normalizeStyle as E, createCommentVNode as P, withCtx as p, mergeProps as Z, toHandlers as H, createTextVNode as z } from "vue";
+import { ArrowUturnLeftIcon as q, ArrowUturnRightIcon as M, ArrowUpOnSquareIcon as T, ArrowLeftOnRectangleIcon as X, PhotoIcon as G, XMarkIcon as J } from "@heroicons/vue/24/outline";
+import { Cropper as K } from "vue-advanced-cropper";
 import "vue-advanced-cropper/dist/style.css";
-import { FormButton as i, FormFileUploadZone as K } from "./lib.js";
+import { FormButton as i, FormFileUploadZone as Q } from "./lib.js";
 import { directive as c } from "vue-tippy";
 import "lodash";
 import "@heroicons/vue/24/solid";
@@ -13,7 +13,7 @@ import "@speckle/shared";
 import "@vueuse/core";
 import "@headlessui/vue";
 import "v3-infinite-loading";
-const Q = { class: "flex flex-col space-y-2" }, W = { class: "flex" }, Y = { class: "flex mx-14 space-x-2" }, ee = /* @__PURE__ */ a("div", { class: "grow" }, null, -1), he = /* @__PURE__ */ j({
+const W = { class: "flex flex-col space-y-2" }, Y = { class: "flex" }, ee = { class: "flex mx-14 space-x-2" }, te = /* @__PURE__ */ a("div", { class: "grow" }, null, -1), xe = /* @__PURE__ */ N({
   __name: "AvatarEditor",
   props: {
     user: null,
@@ -22,9 +22,9 @@ const Q = { class: "flex flex-col space-y-2" }, W = { class: "flex" }, Y = { cla
   },
   emits: ["cancel", "save"],
   setup(v, { emit: C }) {
-    const h = v, n = d(
+    const R = C, h = v, n = d(
       null
-    ), x = d(null), u = d(null), l = d(null), f = N(() => {
+    ), x = d(null), u = d(null), l = d(null), m = V(() => {
       switch (h.size) {
         case "xs":
           return { width: 64, height: 64 };
@@ -36,38 +36,38 @@ const Q = { class: "flex flex-col space-y-2" }, W = { class: "flex" }, Y = { cla
         default:
           return { width: 32, height: 32 };
       }
-    }), R = (e) => {
+    }), _ = (e) => {
       l.value && URL.revokeObjectURL(l.value), l.value = e;
-    }, _ = (e) => {
+    }, b = (e) => {
       const o = e.files[0];
       o && (u.value = o);
-    }, b = (e) => {
+    }, w = (e) => {
       var o;
       return e ? "border-primary" : (o = u.value) != null && o.error ? "border-danger" : "border-outline-2";
-    }, w = () => {
+    }, L = () => {
       var e;
       return (e = n.value) == null ? void 0 : e.rotate(-90);
-    }, L = () => {
+    }, U = () => {
       var e;
       return (e = n.value) == null ? void 0 : e.rotate(90);
-    }, U = () => {
+    }, I = () => {
       var e;
       return (e = n.value) == null ? void 0 : e.flip(1, 0);
-    }, I = () => {
+    }, A = () => {
       var e;
       return (e = n.value) == null ? void 0 : e.flip(0, 1);
-    }, A = () => {
+    }, B = () => {
       var e;
       return (e = x.value) == null ? void 0 : e.triggerPicker();
-    }, B = () => {
-      u.value = null, l.value = null;
     }, F = () => {
+      u.value = null, l.value = null;
+    }, S = () => {
       var o;
       const e = ((o = n.value) == null ? void 0 : o.getResult().canvas.toDataURL("image/jpeg", 0.85)) || null;
-      C("save", e);
+      R("save", e);
     };
-    return V(() => {
-      R(null);
+    return $(() => {
+      _(null);
     }), k(
       () => h.user.avatar,
       (e) => {
@@ -80,49 +80,49 @@ const Q = { class: "flex flex-col space-y-2" }, W = { class: "flex" }, Y = { cla
         l.value = e != null && e.file && !e.error ? URL.createObjectURL(e.file) : null;
       },
       { deep: !0 }
-    ), (e, o) => (y(), $("div", Q, [
-      a("div", W, [
+    ), (e, o) => (y(), O("div", W, [
+      a("div", Y, [
         a("div", {
-          class: m(["flex flex-col px-2 space-y-1", { invisible: !l.value }])
+          class: f(["flex flex-col px-2 space-y-1", { invisible: !l.value }])
         }, [
           s(r(i, {
-            "icon-left": t(H),
+            "icon-left": t(q),
             "hide-text": "",
             size: "sm",
             outlined: "",
-            onClick: w
+            onClick: L
           }, null, 8, ["icon-left"]), [
             [t(c), "Rotate left"]
           ]),
           s(r(i, {
-            "icon-left": t(q),
+            "icon-left": t(M),
             "hide-text": "",
             size: "sm",
             outlined: "",
-            onClick: L
+            onClick: U
           }, null, 8, ["icon-left"]), [
             [t(c), "Rotate right"]
           ]),
           s(r(i, {
-            "icon-left": t(M),
+            "icon-left": t(T),
             "hide-text": "",
             size: "sm",
             outlined: "",
-            onClick: I
+            onClick: A
           }, null, 8, ["icon-left"]), [
             [t(c), "Flip vertically"]
           ]),
           s(r(i, {
-            "icon-left": t(T),
+            "icon-left": t(X),
             "hide-text": "",
             size: "sm",
             outlined: "",
-            onClick: U
+            onClick: I
           }, null, 8, ["icon-left"]), [
             [t(c), "Flip horizontally"]
           ])
         ], 2),
-        l.value ? (y(), O(t(J), {
+        l.value ? (y(), D(t(K), {
           key: 0,
           ref_key: "cropper",
           ref: n,
@@ -131,48 +131,48 @@ const Q = { class: "flex flex-col space-y-2" }, W = { class: "flex" }, Y = { cla
           "stencil-props": {
             aspectRatio: 1 / 1
           },
-          canvas: f.value,
-          style: D(`width: ${f.value.width}px; height: ${f.value.height}px`)
-        }, null, 8, ["src", "canvas", "style"])) : E("", !0),
-        r(K, {
+          canvas: m.value,
+          style: E(`width: ${m.value.width}px; height: ${m.value.height}px`)
+        }, null, 8, ["src", "canvas", "style"])) : P("", !0),
+        r(Q, {
           ref_key: "uploadZone",
           ref: x,
-          class: m(["cropper flex items-center justify-center", { hidden: l.value }]),
+          class: f(["cropper flex items-center justify-center", { hidden: l.value }]),
           accept: "image/*",
           "size-limit": 5 * 1024 * 1024,
-          onFilesSelected: _
+          onFilesSelected: b
         }, {
-          default: p(({ isDraggingFiles: g, activatorOn: S }) => [
-            a("div", P({
-              class: ["cursor-pointer text-center w-full h-full border-dashed border-2 rounded-md p-4 flex items-center justify-center text-sm text-foreground-2", [b(g)]]
-            }, Z(S, !0)), " Click here or drag and drop an image ", 16)
+          default: p(({ isDraggingFiles: g, activatorOn: j }) => [
+            a("div", Z({
+              class: ["cursor-pointer text-center w-full h-full border-dashed border-2 rounded-md p-4 flex items-center justify-center text-sm text-foreground-2", [w(g)]]
+            }, H(j, !0)), " Click here or drag and drop an image ", 16)
           ]),
           _: 1
         }, 8, ["class"]),
         a("div", {
-          class: m(["flex flex-col px-2 space-y-1", { invisible: !l.value }])
+          class: f(["flex flex-col px-2 space-y-1", { invisible: !l.value }])
         }, [
           s(r(i, {
-            "icon-left": t(X),
+            "icon-left": t(G),
             "hide-text": "",
             size: "sm",
-            onClick: A
+            onClick: B
           }, null, 8, ["icon-left"]), [
             [t(c), "Replace image"]
           ]),
           s(r(i, {
-            "icon-left": t(G),
+            "icon-left": t(J),
             "hide-text": "",
             size: "sm",
             color: "danger",
-            onClick: B
+            onClick: F
           }, null, 8, ["icon-left"]), [
             [t(c), "Remove"]
           ])
         ], 2)
       ]),
-      a("div", Y, [
-        ee,
+      a("div", ee, [
+        te,
         r(i, {
           color: "secondary",
           size: "sm",
@@ -186,7 +186,7 @@ const Q = { class: "flex flex-col space-y-2" }, W = { class: "flex" }, Y = { cla
         r(i, {
           size: "sm",
           disabled: v.disabled,
-          onClick: F
+          onClick: S
         }, {
           default: p(() => [
             z("Save")
@@ -198,6 +198,6 @@ const Q = { class: "flex flex-col space-y-2" }, W = { class: "flex" }, Y = { cla
   }
 });
 export {
-  he as default
+  xe as default
 };
-//# sourceMappingURL=AvatarEditor-8531c565.js.map
+//# sourceMappingURL=AvatarEditor-fda5ba41.js.map

package/dist/AvatarEditor-fda5ba41.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarEditor-fda5ba41.js","sources":["../src/components/user/AvatarEditor.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col space-y-2\">\n    <div class=\"flex\">\n      <div class=\"flex flex-col px-2 space-y-1\" :class=\"{ invisible: !activeImageUrl }\">\n        <FormButton\n          v-tippy=\"'Rotate left'\"\n          :icon-left=\"ArrowUturnLeftIcon\"\n          hide-text\n          size=\"sm\"\n          outlined\n          @click=\"rotateLeft\"\n        />\n        <FormButton\n          v-tippy=\"'Rotate right'\"\n          :icon-left=\"ArrowUturnRightIcon\"\n          hide-text\n          size=\"sm\"\n          outlined\n          @click=\"rotateRight\"\n        />\n        <FormButton\n          v-tippy=\"'Flip vertically'\"\n          :icon-left=\"ArrowUpOnSquareIcon\"\n          hide-text\n          size=\"sm\"\n          outlined\n          @click=\"flipVertical\"\n        />\n        <FormButton\n          v-tippy=\"'Flip horizontally'\"\n          :icon-left=\"ArrowLeftOnRectangleIcon\"\n          hide-text\n          size=\"sm\"\n          outlined\n          @click=\"flipHorizontal\"\n        />\n      </div>\n      <Cropper\n        v-if=\"activeImageUrl\"\n        ref=\"cropper\"\n        class=\"cropper\"\n        :src=\"activeImageUrl\"\n        :stencil-props=\"{\n          aspectRatio: 1 / 1\n        }\"\n        :canvas=\"canvasSize\"\n        :style=\"`width: ${canvasSize.width}px; height: ${canvasSize.height}px`\"\n      />\n      <FormFileUploadZone\n        ref=\"uploadZone\"\n        v-slot=\"{ isDraggingFiles, activatorOn }\"\n        class=\"cropper flex items-center justify-center\"\n        :class=\"{ hidden: activeImageUrl }\"\n        accept=\"image/*\"\n        :size-limit=\"5 * 1024 * 1024\"\n        @files-selected=\"onFilesSelected\"\n      >\n        <div\n          class=\"cursor-pointer text-center w-full h-full border-dashed border-2 rounded-md p-4 flex items-center justify-center text-sm text-foreground-2\"\n          :class=\"[getDashedBorderClasses(isDraggingFiles)]\"\n          v-on=\"activatorOn\"\n        >\n          Click here or drag and drop an image\n        </div>\n      </FormFileUploadZone>\n      <div class=\"flex flex-col px-2 space-y-1\" :class=\"{ invisible: !activeImageUrl }\">\n        <FormButton\n          v-tippy=\"'Replace image'\"\n          :icon-left=\"PhotoIcon\"\n          hide-text\n          size=\"sm\"\n          @click=\"onReplace\"\n        />\n        <FormButton\n          v-tippy=\"'Remove'\"\n          :icon-left=\"XMarkIcon\"\n          hide-text\n          size=\"sm\"\n          color=\"danger\"\n          @click=\"onRemove\"\n        />\n      </div>\n    </div>\n    <div class=\"flex mx-14 space-x-2\">\n      <div class=\"grow\" />\n      <FormButton color=\"secondary\" size=\"sm\" @click=\"$emit('cancel')\">\n        Close\n      </FormButton>\n      <FormButton size=\"sm\" :disabled=\"disabled\" @click=\"onSave\">Save</FormButton>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport {\n  ArrowUturnLeftIcon,\n  ArrowUturnRightIcon,\n  ArrowLeftOnRectangleIcon,\n  ArrowUpOnSquareIcon,\n  XMarkIcon,\n  PhotoIcon\n} from '@heroicons/vue/24/outline'\nimport type { Nullable } from '@speckle/shared'\nimport { onUnmounted, ref, watch, computed } from 'vue'\nimport { Cropper } from 'vue-advanced-cropper'\nimport 'vue-advanced-cropper/dist/style.css'\nimport FormButton from '~~/src/components/form/Button.vue'\nimport FormFileUploadZone from '~~/src/components/form/file-upload/Zone.vue'\nimport type { UploadableFileItem } from '~~/src/composables/form/fileUpload'\nimport type { AvatarUser, UserAvatarSize } from '~~/src/composables/user/avatar'\nimport { directive as vTippy } from 'vue-tippy'\n\n/**\n * Always try to lazy load this, as it's quite heavy\n */\n\nconst emit = defineEmits([\"cancel\", \"save\"])\n\nconst props = defineProps({\n  user: null,\n  disabled: { type: Boolean },\n  size: null\n})\n\nconst cropper = ref(\n  null as Nullable<{\n    flip: (x: number, y: number) => void\n    rotate: (angle: number) => void\n    getResult: () => { canvas: HTMLCanvasElement }\n  }>\n)\nconst uploadZone = ref(null as Nullable<{ triggerPicker: () => void }>)\nconst selectedUpload = ref(null as Nullable<UploadableFileItem>)\nconst activeImageUrl = ref(null as Nullable<string>)\n\nconst canvasSize = computed(() => {\n  switch (props.size) {\n    case 'xs' || 'sm' || 'lg' || 'xl':\n      return { width: 64, height: 64 }\n    case 'xxl':\n      return { width: 140, height: 140 }\n    case 'editable':\n      return { width: 240, height: 240 }\n    case 'base':\n    default:\n      return { width: 32, height: 32 }\n  }\n})\n\nconst setNewActiveUrl = (url: Nullable<string>) => {\n  if (activeImageUrl.value) {\n    URL.revokeObjectURL(activeImageUrl.value)\n  }\n\n  activeImageUrl.value = url\n}\n\nconst onFilesSelected = (params: { files: UploadableFileItem[] }) => {\n  const file = params.files[0]\n  if (!file) return\n  selectedUpload.value = file\n}\n\nconst getDashedBorderClasses = (isDraggingFiles: boolean) => {\n  if (isDraggingFiles) return 'border-primary'\n  if (selectedUpload.value?.error) return 'border-danger'\n\n  return 'border-outline-2'\n}\n\nconst rotateLeft = () => cropper.value?.rotate(-90)\nconst rotateRight = () => cropper.value?.rotate(90)\nconst flipHorizontal = () => cropper.value?.flip(1, 0)\nconst flipVertical = () => cropper.value?.flip(0, 1)\n\nconst onReplace = () => uploadZone.value?.triggerPicker()\nconst onRemove = () => {\n  selectedUpload.value = null\n  activeImageUrl.value = null\n}\nconst onSave = () => {\n  const newUrl = cropper.value?.getResult().canvas.toDataURL('image/jpeg', 0.85) || null\n  emit('save', newUrl)\n}\n\nonUnmounted(() => {\n  setNewActiveUrl(null)\n})\n\nwatch(\n  () => props.user.avatar,\n  (newAvatar) => {\n    activeImageUrl.value = newAvatar || null\n  },\n  { immediate: true }\n)\n\nwatch(\n  selectedUpload,\n  (newUpload) => {\n    activeImageUrl.value =\n      newUpload?.file && !newUpload.error ? URL.createObjectURL(newUpload.file) : null\n  },\n  { deep: true }\n)\n</script>\n"],"names":["emit","__emit","props","__props","cropper","ref","uploadZone","selectedUpload","activeImageUrl","canvasSize","computed","setNewActiveUrl","url","onFilesSelected","params","file","getDashedBorderClasses","isDraggingFiles","_a","rotateLeft","rotateRight","flipHorizontal","flipVertical","onReplace","onRemove","onSave","newUrl","onUnmounted","watch","newAvatar","newUpload"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmHA,UAAMA,IAAOC,GAEPC,IAAQC,GAMRC,IAAUC;AAAA,MACd;AAAA,IAAA,GAMIC,IAAaD,EAAI,IAA+C,GAChEE,IAAiBF,EAAI,IAAoC,GACzDG,IAAiBH,EAAI,IAAwB,GAE7CI,IAAaC,EAAS,MAAM;AAChC,cAAQR,EAAM,MAAM;AAAA,QAClB,KAAK;AACH,iBAAO,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,QACjC,KAAK;AACH,iBAAO,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,QACnC,KAAK;AACH,iBAAO,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,QACnC,KAAK;AAAA,QACL;AACE,iBAAO,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,MACnC;AAAA,IAAA,CACD,GAEKS,IAAkB,CAACC,MAA0B;AACjD,MAAIJ,EAAe,SACb,IAAA,gBAAgBA,EAAe,KAAK,GAG1CA,EAAe,QAAQI;AAAA,IAAA,GAGnBC,IAAkB,CAACC,MAA4C;AAC7D,YAAAC,IAAOD,EAAO,MAAM,CAAC;AAC3B,MAAKC,MACLR,EAAe,QAAQQ;AAAA,IAAA,GAGnBC,IAAyB,CAACC,MAA6B;;AACvD,aAAAA,IAAwB,oBACxBC,IAAAX,EAAe,UAAf,QAAAW,EAAsB,QAAc,kBAEjC;AAAA,IAAA,GAGHC,IAAa,MAAA;;AAAM,cAAAD,IAAAd,EAAQ,UAAR,gBAAAc,EAAe,OAAO;AAAA,OACzCE,IAAc,MAAA;;AAAM,cAAAF,IAAAd,EAAQ,UAAR,gBAAAc,EAAe,OAAO;AAAA,OAC1CG,IAAiB,MAAA;;AAAM,cAAAH,IAAAd,EAAQ,UAAR,gBAAAc,EAAe,KAAK,GAAG;AAAA,OAC9CI,IAAe,MAAA;;AAAM,cAAAJ,IAAAd,EAAQ,UAAR,gBAAAc,EAAe,KAAK,GAAG;AAAA,OAE5CK,IAAY,MAAM;;AAAA,cAAAL,IAAAZ,EAAW,UAAX,gBAAAY,EAAkB;AAAA,OACpCM,IAAW,MAAM;AACrB,MAAAjB,EAAe,QAAQ,MACvBC,EAAe,QAAQ;AAAA,IAAA,GAEnBiB,IAAS,MAAM;;AACb,YAAAC,MAASR,IAAAd,EAAQ,UAAR,gBAAAc,EAAe,YAAY,OAAO,UAAU,cAAc,UAAS;AAClF,MAAAlB,EAAK,QAAQ0B,CAAM;AAAA,IAAA;AAGrB,WAAAC,EAAY,MAAM;AAChB,MAAAhB,EAAgB,IAAI;AAAA,IAAA,CACrB,GAEDiB;AAAA,MACE,MAAM1B,EAAM,KAAK;AAAA,MACjB,CAAC2B,MAAc;AACb,QAAArB,EAAe,QAAQqB,KAAa;AAAA,MACtC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBD;AAAA,MACErB;AAAA,MACA,CAACuB,MAAc;AACE,QAAAtB,EAAA,QACbsB,KAAA,QAAAA,EAAW,QAAQ,CAACA,EAAU,QAAQ,IAAI,gBAAgBA,EAAU,IAAI,IAAI;AAAA,MAChF;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/InfiniteLoading.vue.d.ts

@@ -1,33 +1,46 @@
-import { InfiniteLoaderState } from '../helpers/global/components';
-declare const _default: import("vue").DefineComponent<{
-    settings: {
-        type: import("vue").PropType<{
-            target?: string | undefined;
-            distance?: number | undefined;
-            top?: boolean | undefined;
-            identifier?: any;
-            firstload?: boolean | undefined;
-        }>;
-    };
-    allowRetry: {
-        type: import("vue").PropType<boolean>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { InfiniteLoaderState } from '../helpers/global/components';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * v3-infinite-loading props, see docs or type definitions
+     */
+    settings?: {
+        target?: string | undefined;
+        distance?: number | undefined;
+        top?: boolean | undefined;
+        identifier?: any;
+        firstload?: boolean | undefined;
+    } | undefined;
+    /**
+     * Whether to allow retry and show a retry button when loading fails
+     */
+    allowRetry?: boolean | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     infinite: ($state: InfiniteLoaderState) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    settings: {
-        type: import("vue").PropType<{
-            target?: string | undefined;
-            distance?: number | undefined;
-            top?: boolean | undefined;
-            identifier?: any;
-            firstload?: boolean | undefined;
-        }>;
-    };
-    allowRetry: {
-        type: import("vue").PropType<boolean>;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * v3-infinite-loading props, see docs or type definitions
+     */
+    settings?: {
+        target?: string | undefined;
+        distance?: number | undefined;
+        top?: boolean | undefined;
+        identifier?: any;
+        firstload?: boolean | undefined;
+    } | undefined;
+    /**
+     * Whether to allow retry and show a retry button when loading fails
+     */
+    allowRetry?: boolean | undefined;
+}>>> & {
     onInfinite?: (($state: InfiniteLoaderState) => any) | undefined;
 }, {}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/SourceAppBadge.vue.d.ts

@@ -1,13 +1,16 @@
-import { SourceAppDefinition } from '@speckle/shared';
-declare const _default: import("vue").DefineComponent<{
-    sourceApp: {
-        type: import("vue").PropType<SourceAppDefinition>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    sourceApp: {
-        type: import("vue").PropType<SourceAppDefinition>;
+import type { SourceAppDefinition } from '@speckle/shared';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    sourceApp: SourceAppDefinition;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    sourceApp: SourceAppDefinition;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
         required: true;
     };
-}>>, {}, {}>;
-export default _default;
+};

package/dist/components/common/Alert.vue.d.ts

@@ -1,55 +1,37 @@
-import { ConcreteComponent } from 'vue';
+import type { PropAnyComponent } from '../../helpers/common/components';
 type AlertColor = 'success' | 'danger' | 'warning' | 'info';
 type Size = 'default' | 'xs';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    size: {
-        type: import("vue").PropType<Size>;
-        default: string;
-    };
-    color: {
-        type: import("vue").PropType<AlertColor>;
-        default: string;
-    };
-    withDismiss: {
-        type: import("vue").PropType<boolean>;
-    };
-    actions: {
-        type: import("vue").PropType<{
-            title: string;
-            url?: string | undefined;
-            onClick?: (() => void) | undefined;
-            externalUrl?: boolean | undefined;
-        }[]>;
-    };
-    customIcon: {
-        type: import("vue").PropType<ConcreteComponent>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    color?: AlertColor | undefined;
+    withDismiss?: boolean | undefined;
+    actions?: {
+        title: string;
+        url?: string | undefined;
+        onClick?: (() => void) | undefined;
+        externalUrl?: boolean | undefined;
+    }[] | undefined;
+    customIcon?: PropAnyComponent | undefined;
+    size?: Size | undefined;
+}>, {
+    color: string;
+    size: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<Size>;
-        default: string;
-    };
-    color: {
-        type: import("vue").PropType<AlertColor>;
-        default: string;
-    };
-    withDismiss: {
-        type: import("vue").PropType<boolean>;
-    };
-    actions: {
-        type: import("vue").PropType<{
-            title: string;
-            url?: string | undefined;
-            onClick?: (() => void) | undefined;
-            externalUrl?: boolean | undefined;
-        }[]>;
-    };
-    customIcon: {
-        type: import("vue").PropType<ConcreteComponent>;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    color?: AlertColor | undefined;
+    withDismiss?: boolean | undefined;
+    actions?: {
+        title: string;
+        url?: string | undefined;
+        onClick?: (() => void) | undefined;
+        externalUrl?: boolean | undefined;
+    }[] | undefined;
+    customIcon?: PropAnyComponent | undefined;
+    size?: Size | undefined;
+}>, {
+    color: string;
+    size: string;
+}>>> & {
     onDismiss?: (() => any) | undefined;
 }, {
     size: Size;
@@ -59,6 +41,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     description?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/common/Badge.vue.d.ts

@@ -1,57 +1,74 @@
-import { ConcreteComponent } from 'vue';
+import type { PropAnyComponent } from '../../helpers/common/components';
 type BadgeSize = 'base' | 'lg';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    size: {
-        type: import("vue").PropType<BadgeSize>;
-    };
-    colorClasses: {
-        type: import("vue").PropType<string>;
-    };
-    dot: {
-        type: import("vue").PropType<boolean>;
-    };
-    dotIconColorClasses: {
-        type: import("vue").PropType<string>;
-    };
-    iconLeft: {
-        type: import("vue").PropType<ConcreteComponent>;
-    };
-    rounded: {
-        type: import("vue").PropType<boolean>;
-    };
-    clickableIcon: {
-        type: import("vue").PropType<boolean>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    size?: BadgeSize | undefined;
+    /**
+     * Set text & bg color. Defaults to primary variation.
+     */
+    colorClasses?: string | undefined;
+    /**
+     * Show dot to the right
+     */
+    dot?: boolean | undefined;
+    /**
+     * Set dot/icon bg color. Defaults to primary variation.
+     */
+    dotIconColorClasses?: string | undefined;
+    /**
+     * Optionally show icon to the left of the text
+     */
+    iconLeft?: PropAnyComponent | undefined;
+    /**
+     * A more square, but still rounded look
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Track icon clicks
+     */
+    clickableIcon?: boolean | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "click-icon": (v: MouseEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<BadgeSize>;
-    };
-    colorClasses: {
-        type: import("vue").PropType<string>;
-    };
-    dot: {
-        type: import("vue").PropType<boolean>;
-    };
-    dotIconColorClasses: {
-        type: import("vue").PropType<string>;
-    };
-    iconLeft: {
-        type: import("vue").PropType<ConcreteComponent>;
-    };
-    rounded: {
-        type: import("vue").PropType<boolean>;
-    };
-    clickableIcon: {
-        type: import("vue").PropType<boolean>;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    size?: BadgeSize | undefined;
+    /**
+     * Set text & bg color. Defaults to primary variation.
+     */
+    colorClasses?: string | undefined;
+    /**
+     * Show dot to the right
+     */
+    dot?: boolean | undefined;
+    /**
+     * Set dot/icon bg color. Defaults to primary variation.
+     */
+    dotIconColorClasses?: string | undefined;
+    /**
+     * Optionally show icon to the left of the text
+     */
+    iconLeft?: PropAnyComponent | undefined;
+    /**
+     * A more square, but still rounded look
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Track icon clicks
+     */
+    clickableIcon?: boolean | undefined;
+}>>> & {
     "onClick-icon"?: ((v: MouseEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;