@speckle/ui-components 2.25.7 → 2.25.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AvatarEditor-0f54d404.cjs +2 -0
- package/dist/{AvatarEditor-2d926b04.cjs.map → AvatarEditor-0f54d404.cjs.map} +1 -1
- package/dist/{AvatarEditor-844e9444.js → AvatarEditor-9f1741f8.js} +4 -3
- package/dist/{AvatarEditor-844e9444.js.map → AvatarEditor-9f1741f8.js.map} +1 -1
- package/dist/components/InfiniteLoading.vue.d.ts +4 -0
- package/dist/components/form/Radio.vue.d.ts +15 -0
- package/dist/components/form/Tags.vue.d.ts +1 -1
- package/dist/components/form/select/Base.vue.d.ts +7 -1
- package/dist/components/layout/Menu.vue.d.ts +11 -8
- package/dist/components/layout/Table.vue.d.ts +1 -0
- package/dist/components/layout/sidebar/menu/group/Group.vue.d.ts +1 -0
- package/dist/components/user/AvatarEditor.vue.d.ts +2 -2
- package/dist/composables/form/fileUpload.d.ts +6 -5
- package/dist/composables/layout/menu.d.ts +25 -0
- package/dist/helpers/layout/components.d.ts +5 -0
- package/dist/lib.cjs +1 -1
- package/dist/lib.cjs.map +1 -1
- package/dist/lib.d.ts +5 -5
- package/dist/lib.js +2683 -2600
- package/dist/lib.js.map +1 -1
- package/package.json +4 -4
- package/tailwind.config.cjs +1 -0
- package/dist/AvatarEditor-2d926b04.cjs +0 -2
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=require("@heroicons/vue/24/outline"),R=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/20/solid");require("@speckle/shared");require("vee-validate");require("nanoid");require("@vueuse/core");require("@headlessui/vue");require("lodash-es");require("@heroicons/vue/24/solid");require("v3-infinite-loading");const B={class:"flex flex-col space-y-2"},F={class:"flex"},z={class:"flex mx-14 space-x-2"},D=e.defineComponent({__name:"AvatarEditor",props:{user:{},disabled:{type:Boolean},size:{}},emits:["cancel","save"],setup(v,{emit:p}){const m=p,u=v,i=e.ref(null),d=e.ref(null),a=e.ref(null),l=e.ref(null),s=e.computed(()=>{switch(u.size){case"xs":case"sm":case"lg":case"xl":return{width:64,height:64};case"xxl":case"3xl":return{width:140,height:140};case"editable":return{width:240,height:240};case"base":default:return{width:32,height:32}}}),h=t=>{l.value&&URL.revokeObjectURL(l.value),l.value=t},x=t=>{const r=t.files[0];r&&(a.value=r)},g=t=>{var r;return t?"border-primary":(r=a.value)!=null&&r.error?"border-danger":"border-outline-2"},C=()=>{var t;return(t=i.value)==null?void 0:t.rotate(-90)},w=()=>{var t;return(t=i.value)==null?void 0:t.rotate(90)},k=()=>{var t;return(t=i.value)==null?void 0:t.flip(1,0)},N=()=>{var t;return(t=i.value)==null?void 0:t.flip(0,1)},V=()=>{var t;return(t=d.value)==null?void 0:t.triggerPicker()},b=()=>{a.value=null,l.value=null},y=()=>{var r;const t=((r=i.value)==null?void 0:r.getResult().canvas.toDataURL("image/jpeg",.85))||null;m("save",t)};return e.onUnmounted(()=>{h(null)}),e.watch(()=>u.user.avatar,t=>{l.value=t||null},{immediate:!0}),e.watch(a,t=>{l.value=t!=null&&t.file&&!t.error?URL.createObjectURL(t.file):null},{deep:!0}),(t,r)=>(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("div",F,[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col px-2 space-y-1",{invisible:!l.value}])},[e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.ArrowUturnLeftIcon),"hide-text":"",color:"outline",onClick:C},null,8,["icon-left"]),[[e.unref(c.directive),"Rotate left"]]),e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.ArrowUturnRightIcon),"hide-text":"",color:"outline",onClick:w},null,8,["icon-left"]),[[e.unref(c.directive),"Rotate right"]]),e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.ArrowUpOnSquareIcon),"hide-text":"",color:"outline",onClick:N},null,8,["icon-left"]),[[e.unref(c.directive),"Flip vertically"]]),e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.ArrowLeftOnRectangleIcon),"hide-text":"",color:"outline",onClick:k},null,8,["icon-left"]),[[e.unref(c.directive),"Flip horizontally"]])],2),l.value?(e.openBlock(),e.createBlock(e.unref(R.Cropper),{key:0,ref_key:"cropper",ref:i,class:"cropper",src:l.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(o.FormFileUploadZone,{ref_key:"uploadZone",ref:d,class:e.normalizeClass(["cropper flex items-center justify-center",{hidden:l.value}]),accept:"image/*","size-limit":5*1024*1024,onFilesSelected:x},{default:e.withCtx(({isDraggingFiles:f,activatorOn:q})=>[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(f)]]},e.toHandlers(q,!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:!l.value}])},[e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.PhotoIcon),"hide-text":"",onClick:V},null,8,["icon-left"]),[[e.unref(c.directive),"Replace image"]]),e.withDirectives(e.createVNode(o.FormButton,{"icon-left":e.unref(n.XMarkIcon),"hide-text":"",color:"danger",onClick:b},null,8,["icon-left"]),[[e.unref(c.directive),"Remove"]])],2)]),e.createElementVNode("div",z,[r[3]||(r[3]=e.createElementVNode("div",{class:"grow"},null,-1)),e.createVNode(o.FormButton,{color:"outline",onClick:r[0]||(r[0]=f=>t.$emit("cancel"))},{default:e.withCtx(()=>r[1]||(r[1]=[e.createTextVNode("Close")])),_:1}),e.createVNode(o.FormButton,{disabled:t.disabled,onClick:y},{default:e.withCtx(()=>r[2]||(r[2]=[e.createTextVNode("Save")])),_:1},8,["disabled"])])]))}});exports.default=D;
|
|
2
|
+
//# sourceMappingURL=AvatarEditor-0f54d404.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarEditor-
|
|
1
|
+
{"version":3,"file":"AvatarEditor-0f54d404.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 color=\"outline\"\n @click=\"rotateLeft\"\n />\n <FormButton\n v-tippy=\"'Rotate right'\"\n :icon-left=\"ArrowUturnRightIcon\"\n hide-text\n color=\"outline\"\n @click=\"rotateRight\"\n />\n <FormButton\n v-tippy=\"'Flip vertically'\"\n :icon-left=\"ArrowUpOnSquareIcon\"\n hide-text\n color=\"outline\"\n @click=\"flipVertical\"\n />\n <FormButton\n v-tippy=\"'Flip horizontally'\"\n :icon-left=\"ArrowLeftOnRectangleIcon\"\n hide-text\n color=\"outline\"\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 @click=\"onReplace\"\n />\n <FormButton\n v-tippy=\"'Remove'\"\n :icon-left=\"XMarkIcon\"\n hide-text\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=\"outline\" @click=\"$emit('cancel')\">Close</FormButton>\n <FormButton :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<{\n (e: 'cancel'): void\n (e: 'save', val: Nullable<string>): void\n}>()\n\nconst props = defineProps<{\n user: AvatarUser\n disabled?: boolean\n size?: UserAvatarSize\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':\n case 'sm':\n case 'lg':\n case 'xl':\n return { width: 64, height: 64 }\n case 'xxl':\n case '3xl':\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":"wvBA2GA,MAAMA,EAAOC,EAKPC,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,KACL,IAAK,KACL,IAAK,KACL,IAAK,KACH,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAG,EACjC,IAAK,MACL,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"}
|
|
@@ -11,9 +11,10 @@ import "vee-validate";
|
|
|
11
11
|
import "nanoid";
|
|
12
12
|
import "@vueuse/core";
|
|
13
13
|
import "@headlessui/vue";
|
|
14
|
+
import "lodash-es";
|
|
14
15
|
import "@heroicons/vue/24/solid";
|
|
15
16
|
import "v3-infinite-loading";
|
|
16
|
-
const W = { class: "flex flex-col space-y-2" }, Y = { class: "flex" }, ee = { class: "flex mx-14 space-x-2" },
|
|
17
|
+
const W = { class: "flex flex-col space-y-2" }, Y = { class: "flex" }, ee = { class: "flex mx-14 space-x-2" }, xe = /* @__PURE__ */ j({
|
|
17
18
|
__name: "AvatarEditor",
|
|
18
19
|
props: {
|
|
19
20
|
user: {},
|
|
@@ -194,6 +195,6 @@ const W = { class: "flex flex-col space-y-2" }, Y = { class: "flex" }, ee = { cl
|
|
|
194
195
|
}
|
|
195
196
|
});
|
|
196
197
|
export {
|
|
197
|
-
|
|
198
|
+
xe as default
|
|
198
199
|
};
|
|
199
|
-
//# sourceMappingURL=AvatarEditor-
|
|
200
|
+
//# sourceMappingURL=AvatarEditor-9f1741f8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarEditor-
|
|
1
|
+
{"version":3,"file":"AvatarEditor-9f1741f8.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 color=\"outline\"\n @click=\"rotateLeft\"\n />\n <FormButton\n v-tippy=\"'Rotate right'\"\n :icon-left=\"ArrowUturnRightIcon\"\n hide-text\n color=\"outline\"\n @click=\"rotateRight\"\n />\n <FormButton\n v-tippy=\"'Flip vertically'\"\n :icon-left=\"ArrowUpOnSquareIcon\"\n hide-text\n color=\"outline\"\n @click=\"flipVertical\"\n />\n <FormButton\n v-tippy=\"'Flip horizontally'\"\n :icon-left=\"ArrowLeftOnRectangleIcon\"\n hide-text\n color=\"outline\"\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 @click=\"onReplace\"\n />\n <FormButton\n v-tippy=\"'Remove'\"\n :icon-left=\"XMarkIcon\"\n hide-text\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=\"outline\" @click=\"$emit('cancel')\">Close</FormButton>\n <FormButton :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<{\n (e: 'cancel'): void\n (e: 'save', val: Nullable<string>): void\n}>()\n\nconst props = defineProps<{\n user: AvatarUser\n disabled?: boolean\n size?: UserAvatarSize\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':\n case 'sm':\n case 'lg':\n case 'xl':\n return { width: 64, height: 64 }\n case 'xxl':\n case '3xl':\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":";;;;;;;;;;;;;;;;;;;;;;;;;AA2GA,UAAMA,IAAOC,GAKPC,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;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AACH,iBAAO,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,QACjC,KAAK;AAAA,QACL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -14,6 +14,10 @@ type __VLS_Props = {
|
|
|
14
14
|
* Whether to allow retry and show a retry button when loading fails
|
|
15
15
|
*/
|
|
16
16
|
allowRetry?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Hide completely and prevent taking any space when not loading
|
|
19
|
+
*/
|
|
20
|
+
hideWhenComplete?: boolean;
|
|
17
21
|
};
|
|
18
22
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
19
23
|
infinite: ($state: InfiniteLoaderState) => any;
|
|
@@ -33,6 +33,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
33
33
|
type: PropType<Optional<string>>;
|
|
34
34
|
default: undefined;
|
|
35
35
|
};
|
|
36
|
+
/**
|
|
37
|
+
* Set label text classes
|
|
38
|
+
*/
|
|
39
|
+
labelClasses: {
|
|
40
|
+
type: PropType<Optional<string>>;
|
|
41
|
+
default: undefined;
|
|
42
|
+
};
|
|
36
43
|
/**
|
|
37
44
|
* Help text
|
|
38
45
|
*/
|
|
@@ -129,6 +136,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
129
136
|
type: PropType<Optional<string>>;
|
|
130
137
|
default: undefined;
|
|
131
138
|
};
|
|
139
|
+
/**
|
|
140
|
+
* Set label text classes
|
|
141
|
+
*/
|
|
142
|
+
labelClasses: {
|
|
143
|
+
type: PropType<Optional<string>>;
|
|
144
|
+
default: undefined;
|
|
145
|
+
};
|
|
132
146
|
/**
|
|
133
147
|
* Help text
|
|
134
148
|
*/
|
|
@@ -210,6 +224,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
210
224
|
label: Optional<string>;
|
|
211
225
|
modelValue: false | ValueType;
|
|
212
226
|
value: Optional<string | true>;
|
|
227
|
+
labelClasses: Optional<string>;
|
|
213
228
|
icon: ConcreteComponent;
|
|
214
229
|
inlineDescription: boolean;
|
|
215
230
|
rules: RuleExpression<ValueType>;
|
|
@@ -90,7 +90,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
|
|
|
90
90
|
$forceUpdate: () => void;
|
|
91
91
|
$nextTick: typeof import('vue').nextTick;
|
|
92
92
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
|
|
93
|
-
} & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "
|
|
93
|
+
} & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "close" | "isOpen" | "open" | "goUp" | "goDown" | "selectActive"> & import('vue').ShallowUnwrapRef<{
|
|
94
94
|
goUp: () => void;
|
|
95
95
|
goDown: () => void;
|
|
96
96
|
open: () => void;
|
|
@@ -39,6 +39,9 @@ declare const _default: <SingleItem extends Record<string, unknown> | string | n
|
|
|
39
39
|
mountMenuOnBody: boolean;
|
|
40
40
|
labelId: string;
|
|
41
41
|
buttonId: string;
|
|
42
|
+
menuMaxWidth: number;
|
|
43
|
+
menuOpenDirection: "left" | "right";
|
|
44
|
+
menuMaxHeightClasses: string;
|
|
42
45
|
}> & Omit<{
|
|
43
46
|
readonly disabled: Optional<boolean>;
|
|
44
47
|
readonly label: string;
|
|
@@ -61,6 +64,7 @@ declare const _default: <SingleItem extends Record<string, unknown> | string | n
|
|
|
61
64
|
readonly fixedHeight: boolean;
|
|
62
65
|
readonly fullyControlValue: boolean;
|
|
63
66
|
readonly mountMenuOnBody: boolean;
|
|
67
|
+
readonly menuOpenDirection: "left" | "right";
|
|
64
68
|
readonly size?: Optional<"sm" | "base" | "lg" | "xl">;
|
|
65
69
|
readonly modelValue?: ([{
|
|
66
70
|
type: PropType<SingleItem | SingleItem[] | undefined>;
|
|
@@ -80,8 +84,10 @@ declare const _default: <SingleItem extends Record<string, unknown> | string | n
|
|
|
80
84
|
readonly labelId?: string | undefined;
|
|
81
85
|
readonly buttonId?: string | undefined;
|
|
82
86
|
readonly disabledItemTooltip?: string | undefined;
|
|
87
|
+
readonly menuMaxWidth?: number | undefined;
|
|
88
|
+
readonly menuMaxHeightClasses?: string | undefined;
|
|
83
89
|
readonly "onUpdate:modelValue"?: ((v: SingleItem | SingleItem[] | undefined) => any) | undefined;
|
|
84
|
-
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "size" | "disabled" | "search" | "modelValue" | "rules" | "validateOnMount" | "showRequired" | "labelPosition" | "validateOnValueUpdate" | "help" | "showLabel" | "useLabelInErrors" | "showOptional" | "tooltipText" | "multiple" | "items" | "filterPredicate" | "disabledItemPredicate" | "getSearchResults" | "searchPlaceholder" | "buttonStyle" | "hideCheckmarks" | "allowUnset" | "clearable" | "fixedHeight" | "fullyControlValue" | "mountMenuOnBody" | "labelId" | "buttonId">, "label" | "name" | "onUpdate:modelValue" | "placeholder" | "by" | "disabledItemTooltip" | ("size" | "disabled" | "search" | "modelValue" | "rules" | "validateOnMount" | "showRequired" | "labelPosition" | "validateOnValueUpdate" | "help" | "showLabel" | "useLabelInErrors" | "showOptional" | "tooltipText" | "multiple" | "items" | "filterPredicate" | "disabledItemPredicate" | "getSearchResults" | "searchPlaceholder" | "buttonStyle" | "hideCheckmarks" | "allowUnset" | "clearable" | "fixedHeight" | "fullyControlValue" | "mountMenuOnBody" | "labelId" | "buttonId")> & {} & Partial<{}>> & import('vue').PublicProps;
|
|
90
|
+
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "size" | "disabled" | "search" | "modelValue" | "rules" | "validateOnMount" | "showRequired" | "labelPosition" | "validateOnValueUpdate" | "help" | "showLabel" | "useLabelInErrors" | "showOptional" | "tooltipText" | "multiple" | "items" | "filterPredicate" | "disabledItemPredicate" | "getSearchResults" | "searchPlaceholder" | "buttonStyle" | "hideCheckmarks" | "allowUnset" | "clearable" | "fixedHeight" | "fullyControlValue" | "mountMenuOnBody" | "labelId" | "buttonId" | "menuMaxWidth" | "menuOpenDirection" | "menuMaxHeightClasses">, "label" | "name" | "onUpdate:modelValue" | "placeholder" | "by" | "disabledItemTooltip" | ("size" | "disabled" | "search" | "modelValue" | "rules" | "validateOnMount" | "showRequired" | "labelPosition" | "validateOnValueUpdate" | "help" | "showLabel" | "useLabelInErrors" | "showOptional" | "tooltipText" | "multiple" | "items" | "filterPredicate" | "disabledItemPredicate" | "getSearchResults" | "searchPlaceholder" | "buttonStyle" | "hideCheckmarks" | "allowUnset" | "clearable" | "fixedHeight" | "fullyControlValue" | "mountMenuOnBody" | "labelId" | "buttonId" | "menuMaxWidth" | "menuOpenDirection" | "menuMaxHeightClasses")> & {} & Partial<{}>> & import('vue').PublicProps;
|
|
85
91
|
expose(exposed: import('vue').ShallowUnwrapRef<{
|
|
86
92
|
triggerSearch: () => Promise<void>;
|
|
87
93
|
}>): void;
|
|
@@ -8,6 +8,9 @@ type __VLS_Props = {
|
|
|
8
8
|
items: LayoutMenuItem[][];
|
|
9
9
|
size?: 'base' | 'lg';
|
|
10
10
|
menuId?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Preferable menu position/directed. This can change depending on available space.
|
|
13
|
+
*/
|
|
11
14
|
menuPosition?: HorizontalDirection;
|
|
12
15
|
mountMenuOnBody?: boolean;
|
|
13
16
|
};
|
|
@@ -34,7 +37,7 @@ declare function __VLS_template(): {
|
|
|
34
37
|
};
|
|
35
38
|
id: {
|
|
36
39
|
type: StringConstructor;
|
|
37
|
-
default:
|
|
40
|
+
default: () => string;
|
|
38
41
|
};
|
|
39
42
|
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
40
43
|
[key: string]: any;
|
|
@@ -62,7 +65,7 @@ declare function __VLS_template(): {
|
|
|
62
65
|
};
|
|
63
66
|
id: {
|
|
64
67
|
type: StringConstructor;
|
|
65
|
-
default:
|
|
68
|
+
default: () => string;
|
|
66
69
|
};
|
|
67
70
|
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
68
71
|
[key: string]: any;
|
|
@@ -89,7 +92,7 @@ declare function __VLS_template(): {
|
|
|
89
92
|
};
|
|
90
93
|
id: {
|
|
91
94
|
type: StringConstructor;
|
|
92
|
-
default:
|
|
95
|
+
default: () => string;
|
|
93
96
|
};
|
|
94
97
|
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
95
98
|
[key: string]: any;
|
|
@@ -122,7 +125,7 @@ declare function __VLS_template(): {
|
|
|
122
125
|
};
|
|
123
126
|
id: {
|
|
124
127
|
type: StringConstructor;
|
|
125
|
-
default:
|
|
128
|
+
default: () => string;
|
|
126
129
|
};
|
|
127
130
|
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
128
131
|
[key: string]: any;
|
|
@@ -162,7 +165,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
162
165
|
};
|
|
163
166
|
id: {
|
|
164
167
|
type: StringConstructor;
|
|
165
|
-
default:
|
|
168
|
+
default: () => string;
|
|
166
169
|
};
|
|
167
170
|
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
168
171
|
[key: string]: any;
|
|
@@ -190,7 +193,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
190
193
|
};
|
|
191
194
|
id: {
|
|
192
195
|
type: StringConstructor;
|
|
193
|
-
default:
|
|
196
|
+
default: () => string;
|
|
194
197
|
};
|
|
195
198
|
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
196
199
|
[key: string]: any;
|
|
@@ -217,7 +220,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
217
220
|
};
|
|
218
221
|
id: {
|
|
219
222
|
type: StringConstructor;
|
|
220
|
-
default:
|
|
223
|
+
default: () => string;
|
|
221
224
|
};
|
|
222
225
|
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
223
226
|
[key: string]: any;
|
|
@@ -250,7 +253,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
250
253
|
};
|
|
251
254
|
id: {
|
|
252
255
|
type: StringConstructor;
|
|
253
|
-
default:
|
|
256
|
+
default: () => string;
|
|
254
257
|
};
|
|
255
258
|
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
256
259
|
[key: string]: any;
|
|
@@ -66,7 +66,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
|
|
|
66
66
|
$forceUpdate: () => void;
|
|
67
67
|
$nextTick: typeof import('vue').nextTick;
|
|
68
68
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
|
|
69
|
-
} & Readonly<{}> & Omit<Readonly<any>, "reset" | "
|
|
69
|
+
} & Readonly<{}> & Omit<Readonly<any>, "reset" | "move" | "flip" | "zoom" | "rotate" | "getResult" | "setCoordinates" | "refresh"> & import('vue').ShallowUnwrapRef<{
|
|
70
70
|
getResult: () => import('vue-advanced-cropper').CropperResult;
|
|
71
71
|
setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
|
|
72
72
|
refresh: () => void;
|
|
@@ -132,7 +132,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
|
|
|
132
132
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
|
|
133
133
|
} & Readonly<{
|
|
134
134
|
[x: string]: any;
|
|
135
|
-
}> & Omit<Readonly<any>, "reset" | "
|
|
135
|
+
}> & Omit<Readonly<any>, "reset" | "move" | "flip" | "zoom" | "rotate" | "getResult" | "setCoordinates" | "refresh"> & import('vue').ShallowUnwrapRef<{
|
|
136
136
|
getResult: () => import('vue-advanced-cropper').CropperResult;
|
|
137
137
|
setCoordinates: (transform: import('vue-advanced-cropper').Transform | import('vue-advanced-cropper').Transform[]) => void;
|
|
138
138
|
refresh: () => void;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { MaybeRef } from '@vueuse/core';
|
|
2
2
|
import { MaybeNullOrUndefined, Nullable, Optional } from '../../../../shared/dist/esm/index';
|
|
3
3
|
import { CSSProperties } from 'vue';
|
|
4
|
+
import { BaseError } from '../../lib';
|
|
5
|
+
import { BlobUploadStatus } from '@speckle/shared/blobs';
|
|
4
6
|
/**
|
|
5
7
|
* A file, as emitted out from FileUploadZone
|
|
6
8
|
*/
|
|
@@ -12,10 +14,6 @@ export interface UploadableFileItem {
|
|
|
12
14
|
*/
|
|
13
15
|
id: string;
|
|
14
16
|
}
|
|
15
|
-
export declare enum BlobUploadStatus {
|
|
16
|
-
Success = 1,
|
|
17
|
-
Failure = 2
|
|
18
|
-
}
|
|
19
17
|
export type BlobPostResultItem = {
|
|
20
18
|
blobId?: string;
|
|
21
19
|
fileName?: string;
|
|
@@ -24,7 +22,7 @@ export type BlobPostResultItem = {
|
|
|
24
22
|
/**
|
|
25
23
|
* Success = 1, Failure = 2
|
|
26
24
|
*/
|
|
27
|
-
uploadStatus:
|
|
25
|
+
uploadStatus: BlobUploadStatus;
|
|
28
26
|
uploadError: string;
|
|
29
27
|
};
|
|
30
28
|
export interface UploadFileItem extends UploadableFileItem {
|
|
@@ -54,6 +52,9 @@ export declare function usePrepareUploadableFiles(params: {
|
|
|
54
52
|
*/
|
|
55
53
|
buildUploadableFiles: (files: File[]) => UploadableFileItem[] | undefined;
|
|
56
54
|
};
|
|
55
|
+
export declare class FileTooLargeError extends BaseError {
|
|
56
|
+
static defaultMessage: string;
|
|
57
|
+
}
|
|
57
58
|
export declare function useFileUploadProgressCore(params: {
|
|
58
59
|
item: MaybeRef<MaybeNullOrUndefined<UploadFileItem>>;
|
|
59
60
|
}): {
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { UseElementBoundingReturn } from '@vueuse/core';
|
|
2
|
+
import { ComputedRef, CSSProperties } from 'vue';
|
|
3
|
+
import { HorizontalDirection } from '../common/window';
|
|
4
|
+
/**
|
|
5
|
+
* Simplifies correctly and responsively positioning (dropdown/right-click/etc) menus so that they open
|
|
6
|
+
* to the correct direction, can change directions if there's not enough space or even go full screen
|
|
7
|
+
* if there's no space in either direction.
|
|
8
|
+
*/
|
|
9
|
+
export declare const useBodyMountedMenuPositioning: (params: {
|
|
10
|
+
/**
|
|
11
|
+
* The direction the open should preferably open in, assuming it has the space to do so
|
|
12
|
+
*/
|
|
13
|
+
menuOpenDirection?: ComputedRef<HorizontalDirection>;
|
|
14
|
+
/**
|
|
15
|
+
* useElementBounding() of the button that opens the menu
|
|
16
|
+
*/
|
|
17
|
+
buttonBoundingBox: UseElementBoundingReturn;
|
|
18
|
+
/**
|
|
19
|
+
* Set the target menu width. If not available, will try a very basic positioning method
|
|
20
|
+
* that just uses the button width.
|
|
21
|
+
*/
|
|
22
|
+
menuWidth: ComputedRef<number | undefined>;
|
|
23
|
+
}) => {
|
|
24
|
+
menuStyle: ComputedRef<CSSProperties>;
|
|
25
|
+
};
|
|
@@ -41,5 +41,10 @@ export type LayoutDialogButton = {
|
|
|
41
41
|
*/
|
|
42
42
|
id?: string;
|
|
43
43
|
};
|
|
44
|
+
export type LayoutHeaderButton = {
|
|
45
|
+
label: string;
|
|
46
|
+
props: Record<string, unknown> & FormButtonProps;
|
|
47
|
+
onClick?: (e: MouseEvent) => void;
|
|
48
|
+
};
|
|
44
49
|
export type LayoutTableColours = 'primary' | 'outline' | 'subtle' | 'danger';
|
|
45
50
|
export {};
|