@speckle/ui-components 2.16.1-alpha7 → 2.16.1-alpha8

package/dist/AvatarEditor-1bbae637.js

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

package/dist/AvatarEditor-1bbae637.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarEditor-1bbae637.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=\"{\n          width: 250,\n          height: 250\n        }\"\n        style=\"width: 250px; height: 250px\"\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        Cancel\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 { Nullable } from '@speckle/shared'\nimport { onUnmounted, ref, watch } 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 { UploadableFileItem } from '~~/src/composables/form/fileUpload'\nimport { AvatarUser } 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})\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 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":["cropper","ref","uploadZone","selectedUpload","activeImageUrl","setNewActiveUrl","url","onFilesSelected","params","file","getDashedBorderClasses","isDraggingFiles","_a","rotateLeft","rotateRight","flipHorizontal","flipVertical","onReplace","onRemove","onSave","newUrl","emit","onUnmounted","watch","props","newAvatar","newUpload"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBA6HMA,IAAUC;AAAA,MACd;AAAA,IAAA,GAMIC,IAAaD,EAAI,IAA+C,GAChEE,IAAiBF,EAAI,IAAoC,GACzDG,IAAiBH,EAAI,IAAwB,GAE7CI,IAAkB,CAACC,MAA0B;AACjD,MAAIF,EAAe,SACb,IAAA,gBAAgBA,EAAe,KAAK,GAG1CA,EAAe,QAAQE;AAAA,IAAA,GAGnBC,IAAkB,CAACC,MAA4C;AAC7D,YAAAC,IAAOD,EAAO,MAAM,CAAC;AAC3B,MAAKC,MACLN,EAAe,QAAQM;AAAA,IAAA,GAGnBC,IAAyB,CAACC,MAA6B;;AACvD,aAAAA,IAAwB,oBACxBC,IAAAT,EAAe,UAAf,QAAAS,EAAsB,QAAc,kBAEjC;AAAA,IAAA,GAGHC,IAAa,MAAA;;AAAM,cAAAD,IAAAZ,EAAQ,UAAR,gBAAAY,EAAe,OAAO;AAAA,OACzCE,IAAc,MAAA;;AAAM,cAAAF,IAAAZ,EAAQ,UAAR,gBAAAY,EAAe,OAAO;AAAA,OAC1CG,IAAiB,MAAA;;AAAM,cAAAH,IAAAZ,EAAQ,UAAR,gBAAAY,EAAe,KAAK,GAAG;AAAA,OAC9CI,IAAe,MAAA;;AAAM,cAAAJ,IAAAZ,EAAQ,UAAR,gBAAAY,EAAe,KAAK,GAAG;AAAA,OAE5CK,IAAY,MAAM;;AAAA,cAAAL,IAAAV,EAAW,UAAX,gBAAAU,EAAkB;AAAA,OACpCM,IAAW,MAAM;AACrB,MAAAf,EAAe,QAAQ,MACvBC,EAAe,QAAQ;AAAA,IAAA,GAEnBe,IAAS,MAAM;;AACb,YAAAC,MAASR,IAAAZ,EAAQ,UAAR,gBAAAY,EAAe,YAAY,OAAO,UAAU,cAAc,UAAS;AAClF,MAAAS,EAAK,QAAQD,CAAM;AAAA,IAAA;AAGrB,WAAAE,EAAY,MAAM;AAChB,MAAAjB,EAAgB,IAAI;AAAA,IAAA,CACrB,GAEDkB;AAAA,MACE,MAAMC,EAAM,KAAK;AAAA,MACjB,CAACC,MAAc;AACb,QAAArB,EAAe,QAAQqB,KAAa;AAAA,MACtC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBF;AAAA,MACEpB;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/AvatarEditor-f4b16291.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 o=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"},w={class:"flex"},z={class:"flex mx-14 space-x-2"},B=e.createElementVNode("div",{class:"grow"},null,-1),_=e.defineComponent({__name:"AvatarEditor",props:{user:null,disabled:{type:Boolean}},emits:["cancel","save"],setup(s,{emit:f}){const v=s,i=e.ref(null),u=e.ref(null),a=e.ref(null),r=e.ref(null),m=t=>{r.value&&URL.revokeObjectURL(r.value),r.value=t},p=t=>{const l=t.files[0];l&&(a.value=l)},h=t=>{var l;return t?"border-primary":(l=a.value)!=null&&l.error?"border-danger":"border-outline-2"},x=()=>{var t;return(t=i.value)==null?void 0:t.rotate(-90)},g=()=>{var t;return(t=i.value)==null?void 0:t.rotate(90)},C=()=>{var t;return(t=i.value)==null?void 0:t.flip(1,0)},k=()=>{var t;return(t=i.value)==null?void 0:t.flip(0,1)},N=()=>{var t;return(t=u.value)==null?void 0:t.triggerPicker()},V=()=>{a.value=null,r.value=null},y=()=>{var l;const t=((l=i.value)==null?void 0:l.getResult().canvas.toDataURL("image/jpeg",.85))||null;f("save",t)};return e.onUnmounted(()=>{m(null)}),e.watch(()=>v.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",w,[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col px-2 space-y-1",{invisible:!r.value}])},[e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.ArrowUturnLeftIcon),"hide-text":"",size:"sm",outlined:"",onClick:x},null,8,["icon-left"]),[[e.unref(c.directive),"Rotate left"]]),e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.ArrowUturnRightIcon),"hide-text":"",size:"sm",outlined:"",onClick:g},null,8,["icon-left"]),[[e.unref(c.directive),"Rotate right"]]),e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.ArrowUpOnSquareIcon),"hide-text":"",size:"sm",outlined:"",onClick:k},null,8,["icon-left"]),[[e.unref(c.directive),"Flip vertically"]]),e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.ArrowLeftOnRectangleIcon),"hide-text":"",size:"sm",outlined:"",onClick:C},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:i,class:"cropper",src:r.value,"stencil-props":{aspectRatio:1/1},canvas:{width:250,height:250},style:{width:"250px",height:"250px"}},null,8,["src"])):e.createCommentVNode("",!0),e.createVNode(o.FormFileUploadZone,{ref_key:"uploadZone",ref:u,class:e.normalizeClass(["cropper flex items-center justify-center",{hidden:r.value}]),accept:"image/*","size-limit":5*1024*1024,onFilesSelected:p},{default:e.withCtx(({isDraggingFiles:d,activatorOn:b})=>[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",[h(d)]]},e.toHandlers(b,!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(o.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(o.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",z,[B,e.createVNode(o.FormButton,{color:"secondary",size:"sm",onClick:l[0]||(l[0]=d=>t.$emit("cancel"))},{default:e.withCtx(()=>[e.createTextVNode(" Cancel ")]),_:1}),e.createVNode(o.FormButton,{size:"sm",disabled:s.disabled,onClick:y},{default:e.withCtx(()=>[e.createTextVNode("Save")]),_:1},8,["disabled"])])]))}});exports.default=_;
+//# sourceMappingURL=AvatarEditor-f4b16291.cjs.map

package/dist/AvatarEditor-f4b16291.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarEditor-f4b16291.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=\"{\n          width: 250,\n          height: 250\n        }\"\n        style=\"width: 250px; height: 250px\"\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        Cancel\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 { Nullable } from '@speckle/shared'\nimport { onUnmounted, ref, watch } 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 { UploadableFileItem } from '~~/src/composables/form/fileUpload'\nimport { AvatarUser } 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})\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 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":["cropper","ref","uploadZone","selectedUpload","activeImageUrl","setNewActiveUrl","url","onFilesSelected","params","file","getDashedBorderClasses","isDraggingFiles","_a","rotateLeft","rotateRight","flipHorizontal","flipVertical","onReplace","onRemove","onSave","newUrl","emit","onUnmounted","watch","props","newAvatar","newUpload"],"mappings":"4xBA6HMA,EAAUC,EAAA,IACd,IAAA,EAMIC,EAAaD,MAAI,IAA+C,EAChEE,EAAiBF,MAAI,IAAoC,EACzDG,EAAiBH,MAAI,IAAwB,EAE7CI,EAAmBC,GAA0B,CAC7CF,EAAe,OACb,IAAA,gBAAgBA,EAAe,KAAK,EAG1CA,EAAe,MAAQE,CAAA,EAGnBC,EAAmBC,GAA4C,CAC7D,MAAAC,EAAOD,EAAO,MAAM,CAAC,EACtBC,IACLN,EAAe,MAAQM,EAAA,EAGnBC,EAA0BC,GAA6B,OACvD,OAAAA,EAAwB,kBACxBC,EAAAT,EAAe,QAAf,MAAAS,EAAsB,MAAc,gBAEjC,kBAAA,EAGHC,EAAa,IAAA,OAAM,OAAAD,EAAAZ,EAAQ,QAAR,YAAAY,EAAe,OAAO,MACzCE,EAAc,IAAA,OAAM,OAAAF,EAAAZ,EAAQ,QAAR,YAAAY,EAAe,OAAO,KAC1CG,EAAiB,IAAA,OAAM,OAAAH,EAAAZ,EAAQ,QAAR,YAAAY,EAAe,KAAK,EAAG,IAC9CI,EAAe,IAAA,OAAM,OAAAJ,EAAAZ,EAAQ,QAAR,YAAAY,EAAe,KAAK,EAAG,IAE5CK,EAAY,IAAM,OAAA,OAAAL,EAAAV,EAAW,QAAX,YAAAU,EAAkB,iBACpCM,EAAW,IAAM,CACrBf,EAAe,MAAQ,KACvBC,EAAe,MAAQ,IAAA,EAEnBe,EAAS,IAAM,OACb,MAAAC,IAASR,EAAAZ,EAAQ,QAAR,YAAAY,EAAe,YAAY,OAAO,UAAU,aAAc,OAAS,KAClFS,EAAK,OAAQD,CAAM,CAAA,EAGrBE,OAAAA,EAAAA,YAAY,IAAM,CAChBjB,EAAgB,IAAI,CAAA,CACrB,EAEDkB,EAAA,MACE,IAAMC,EAAM,KAAK,OAChBC,GAAc,CACbrB,EAAe,MAAQqB,GAAa,IACtC,EACA,CAAE,UAAW,EAAK,CAAA,EAGpBF,EAAA,MACEpB,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/components/common/loading/Icon.vue.d.ts

@@ -0,0 +1,24 @@
+type Size = 'base' | 'sm' | 'lg';
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<Size>;
+        default: string;
+    };
+    loading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<Size>;
+        default: string;
+    };
+    loading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>>, {
+    size: Size;
+    loading: boolean;
+}, {}>;
+export default _default;

package/dist/components/form/file-upload/Zone.vue.d.ts

@@ -0,0 +1,62 @@
+import { UploadableFileItem } from '../../../composables/form/fileUpload';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+    accept: {
+        type: import("vue").PropType<string>;
+    };
+    multiple: {
+        type: import("vue").PropType<boolean>;
+    };
+    sizeLimit: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    countLimit: {
+        type: import("vue").PropType<number>;
+    };
+}, {
+    triggerPicker: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "files-selected": (v: {
+        files: UploadableFileItem[];
+    }) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+    accept: {
+        type: import("vue").PropType<string>;
+    };
+    multiple: {
+        type: import("vue").PropType<boolean>;
+    };
+    sizeLimit: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    countLimit: {
+        type: import("vue").PropType<number>;
+    };
+}>> & {
+    "onFiles-selected"?: ((v: {
+        files: UploadableFileItem[];
+    }) => any) | undefined;
+}, {
+    sizeLimit: number;
+}, {}>, {
+    default?(_: {
+        isDraggingFiles: boolean;
+        openFilePicker: () => void;
+        activatorOn: {
+            click: () => void;
+        };
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/user/Avatar.vue.d.ts

@@ -0,0 +1,58 @@
+import { AvatarUser, UserAvatarSize } from '../../composables/user/avatar';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<UserAvatarSize>;
+        default: string;
+    };
+    active: {
+        type: import("vue").PropType<boolean>;
+    };
+    user: {
+        type: import("vue").PropType<AvatarUser | null>;
+        default: null;
+    };
+    hoverEffect: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    noBorder: {
+        type: import("vue").PropType<boolean>;
+    };
+    noBg: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<UserAvatarSize>;
+        default: string;
+    };
+    active: {
+        type: import("vue").PropType<boolean>;
+    };
+    user: {
+        type: import("vue").PropType<AvatarUser | null>;
+        default: null;
+    };
+    hoverEffect: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    noBorder: {
+        type: import("vue").PropType<boolean>;
+    };
+    noBg: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {
+    size: UserAvatarSize;
+    user: AvatarUser | null;
+    hoverEffect: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/user/AvatarEditable.vue.d.ts

@@ -0,0 +1,21 @@
+import { Nullable } from '@speckle/shared';
+import { AvatarUser } from '../../composables/user/avatar';
+declare const _default: import("vue").DefineComponent<{
+    user: {
+        type: import("vue").PropType<AvatarUser>;
+        required: true;
+    };
+}, {
+    open: () => boolean;
+    close: () => boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    save: (newUrl: Nullable<string>) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    user: {
+        type: import("vue").PropType<AvatarUser>;
+        required: true;
+    };
+}>> & {
+    onSave?: ((newUrl: Nullable<string>) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/dist/components/user/AvatarEditor.vue.d.ts

@@ -0,0 +1,26 @@
+import { Nullable } from '@speckle/shared';
+import { AvatarUser } from '../../composables/user/avatar';
+declare const _default: import("vue").DefineComponent<{
+    user: {
+        type: import("vue").PropType<AvatarUser>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => void;
+    save: (val: Nullable<string>) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    user: {
+        type: import("vue").PropType<AvatarUser>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+}>> & {
+    onCancel?: (() => any) | undefined;
+    onSave?: ((val: Nullable<string>) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/dist/components/user/AvatarGroup.vue.d.ts

@@ -0,0 +1,44 @@
+import { UserAvatarSize, AvatarUserWithId } from '../../composables/user/avatar';
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<UserAvatarSize>;
+        default: string;
+    };
+    users: {
+        type: import("vue").PropType<AvatarUserWithId[]>;
+        required: true;
+        default: () => never[];
+    };
+    overlap: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxCount: {
+        type: import("vue").PropType<number>;
+        default: undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<UserAvatarSize>;
+        default: string;
+    };
+    users: {
+        type: import("vue").PropType<AvatarUserWithId[]>;
+        required: true;
+        default: () => never[];
+    };
+    overlap: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxCount: {
+        type: import("vue").PropType<number>;
+        default: undefined;
+    };
+}>>, {
+    size: UserAvatarSize;
+    users: AvatarUserWithId[];
+    overlap: boolean;
+    maxCount: number;
+}, {}>;
+export default _default;

package/dist/composables/form/fileUpload.d.ts

@@ -0,0 +1,63 @@
+import { MaybeRef } from '@vueuse/core';
+import { MaybeNullOrUndefined, Nullable, Optional } from '@speckle/shared';
+import { CSSProperties } from 'vue';
+/**
+ * A file, as emitted out from FileUploadZone
+ */
+export interface UploadableFileItem {
+    file: File;
+    error: Nullable<Error>;
+    /**
+     * You can use this ID to check for File equality
+     */
+    id: string;
+}
+export declare enum BlobUploadStatus {
+    Success = 1,
+    Failure = 2
+}
+export type BlobPostResultItem = {
+    blobId?: string;
+    fileName?: string;
+    fileSize?: number;
+    formKey: string;
+    /**
+     * Success = 1, Failure = 2
+     */
+    uploadStatus: number;
+    uploadError: string;
+};
+export interface UploadFileItem extends UploadableFileItem {
+    /**
+     * Progress between 0 and 100
+     */
+    progress: number;
+    /**
+     * When upload has finished this contains a BlobPostResultItem
+     */
+    result: Optional<BlobPostResultItem>;
+    /**
+     * When a blob gets assigned to a resource, it should count as in use, and this will
+     * prevent it from being deleted as junk
+     */
+    inUse?: boolean;
+}
+export declare function usePrepareUploadableFiles(params: {
+    disabled?: MaybeRef<Optional<boolean>>;
+    accept?: MaybeRef<Optional<string>>;
+    multiple?: MaybeRef<Optional<boolean>>;
+    countLimit?: MaybeRef<Optional<number>>;
+    sizeLimit: MaybeRef<number>;
+}): {
+    /**
+     * Validate incoming files and build UploadableFileItem structs out of them
+     */
+    buildUploadableFiles: (files: File[]) => UploadableFileItem[] | undefined;
+};
+export declare function useFileUploadProgressCore(params: {
+    item: MaybeRef<MaybeNullOrUndefined<UploadFileItem>>;
+}): {
+    errorMessage: import("vue").ComputedRef<string | null>;
+    progressBarClasses: import("vue").ComputedRef<string>;
+    progressBarStyle: import("vue").ComputedRef<CSSProperties>;
+};

package/dist/composables/user/avatar.d.ts

@@ -0,0 +1,19 @@
+import { ToRefs } from 'vue';
+export type AvatarUser = {
+    name: string;
+    avatar?: string | null;
+};
+export type AvatarUserWithId = AvatarUser & {
+    id: string;
+};
+export type UserAvatarSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'editable';
+export declare function useAvatarSizeClasses(params: {
+    props: ToRefs<{
+        size?: UserAvatarSize;
+    }>;
+}): {
+    heightClasses: import("vue").ComputedRef<"h-6" | "h-10" | "h-14" | "h-8" | "h-5" | "h-60">;
+    widthClasses: import("vue").ComputedRef<"w-5" | "w-6" | "w-10" | "w-14" | "w-60" | "w-8">;
+    sizeClasses: import("vue").ComputedRef<string>;
+    iconClasses: import("vue").ComputedRef<"w-5 h-5" | "w-3 h-3" | "w-8 h-8" | "w-20 h-20" | "w-4 h-4">;
+};

package/dist/helpers/common/error.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Base ObjectLoader error
+ */
+export declare abstract class BaseError extends Error {
+    /**
+     * Default message if none is passed
+     */
+    static defaultMessage: string;
+    constructor(message?: string, options?: ErrorOptions);
+}
+/**
+ * Throw these in execution branches that should never occur unless if there's a bug
+ */
+export declare class LogicError extends BaseError {
+    static defaultMessage: string;
+}
+export declare class UninitializedResourceAccessError extends BaseError {
+    static defaultMessage: string;
+}
+export declare class ComposableInvokedOutOfScopeError extends BaseError {
+    static defaultMessage: string;
+}
+/**
+ * Throw this when something that's only supported during CSR is invoked during SSR or vice versa
+ */
+export declare class UnsupportedEnvironmentError extends BaseError {
+    static defaultMessage: string;
+}

package/dist/helpers/form/file.d.ts

@@ -0,0 +1,41 @@
+import { Nullable } from '@speckle/shared';
+import { BaseError } from '../../helpers/common/error';
+export type FileTypeSpecifier = UniqueFileTypeSpecifier | `.${string}`;
+export declare enum UniqueFileTypeSpecifier {
+    AnyAudio = "audio/*",
+    AnyVideo = "video/*",
+    AnyImage = "image/*"
+}
+/**
+ * Validate if file has the allowed type. While we could also test for MIME types
+ * not in UniqueFileTypeSpecifier, this function is meant to be equivalent to the
+ * 'accept' attribute, which only allows for extensions or UniqueFileTypeSpecifier
+ * values.
+ * @param file
+ * @param allowedTypes The file must have one of these types
+ * @returns True if valid, Error object if not
+ */
+export declare function validateFileType(file: File, allowedTypes: FileTypeSpecifier[]): true | Error;
+/**
+ * Resolve file extension (with leading dot)
+ */
+export declare function resolveFileExtension(fileName: string): Nullable<FileTypeSpecifier>;
+/**
+ * Check if string is a FileTypeSpecifier
+ */
+export declare function isFileTypeSpecifier(type: string): type is FileTypeSpecifier;
+/**
+ * Create a human readable file size string from the numeric size in bytes
+ */
+export declare function prettyFileSize(sizeInBytes: number): string;
+/**
+ * Generate an ID that uniquely identifies a specific file. The same file
+ * will always have the same ID.
+ */
+export declare function generateFileId(file: File): string;
+export declare class MissingFileExtensionError extends BaseError {
+    static defaultMessage: string;
+}
+export declare class ForbiddenFileTypeError extends BaseError {
+    static defaultMessage: string;
+}