@speckle/ui-components 2.16.1-alpha6 → 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/Tags.vue.d.ts

@@ -2,7 +2,6 @@ import { InputColor } from '../../composables/form/textInput';
 import { MaybeAsync } from '@speckle/shared';
 type InputSize = 'sm' | 'base' | 'lg' | 'xl';
 declare const _default: import("vue").DefineComponent<{
-    modelValue: import("vue").PropType<string[]>;
     size: {
         type: import("vue").PropType<InputSize>;
         default: string;
@@ -24,6 +23,9 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         required: true;
     };
+    modelValue: {
+        type: import("vue").PropType<string[]>;
+    };
     rules: {
         type: import("vue").PropType<string | Record<string, unknown> | import("vee-validate").GenericValidateFunction<string[]> | import("vee-validate").GenericValidateFunction<string[]>[] | {
             validate(value: string[], options: Record<string, any>): Promise<string[]>;
@@ -63,13 +65,13 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     resolveAutocompleteItems: () => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string[]) => void;
     change: (val: {
         event?: Event | undefined;
         value: string[];
     }) => void;
     clear: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: import("vue").PropType<string[]>;
     size: {
         type: import("vue").PropType<InputSize>;
         default: string;
@@ -91,6 +93,9 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         required: true;
     };
+    modelValue: {
+        type: import("vue").PropType<string[]>;
+    };
     rules: {
         type: import("vue").PropType<string | Record<string, unknown> | import("vee-validate").GenericValidateFunction<string[]> | import("vee-validate").GenericValidateFunction<string[]>[] | {
             validate(value: string[], options: Record<string, any>): Promise<string[]>;
@@ -132,6 +137,7 @@ declare const _default: import("vue").DefineComponent<{
         event?: Event | undefined;
         value: string[];
     }) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: string[]) => any) | undefined;
     onClear?: (() => any) | undefined;
 }, {
     size: InputSize;

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/form/textInput.d.ts

@@ -29,6 +29,9 @@ export declare function useTextInputCore<V extends string | string[] = string>(p
         (e: 'clear'): void;
     };
     inputEl: Ref<Nullable<HTMLInputElement | HTMLTextAreaElement>>;
+    options?: Partial<{
+        customClear: () => void;
+    }>;
 }): {
     coreInputClasses: import("vue").ComputedRef<string>;
     coreClasses: import("vue").ComputedRef<string>;

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;
+}