@speckle/ui-components 2.25.9 → 2.26.1

package/.cursor/rules/component-library.mdc

@@ -0,0 +1,147 @@
+---
+description: Component library patterns and Storybook conventions for ui-components
+globs: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.stories.*', '**/lib.ts']
+alwaysApply: false
+---
+
+# Component Library Patterns
+
+## File Structure
+
+```
+packages/ui-components/
+├── src/
+│   ├── components/   # Reusable UI components
+│   ├── helpers/      # Component utilities
+│   └── lib.ts       # Main export file
+```
+
+## Component Development
+
+### Reusable Components
+
+- **Focus on reusability** - components should work in multiple contexts
+- **Minimal external dependencies** - keep the library lightweight
+- **Props-driven** - all variations should be controllable via props
+- **No business logic** - components should be presentational
+
+### Component Composition
+
+- **Compound components** for complex UI patterns
+- **Render props** or slots for customizable content
+- **Headless patterns** where appropriate for maximum flexibility
+
+```vue
+<!-- Good: Flexible and reusable -->
+<template>
+  <button :class="buttonClasses" :disabled="disabled" @click="$emit('click', $event)">
+    <Icon v-if="icon" :name="icon" />
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  variant?: 'primary' | 'secondary' | 'danger'
+  size?: 'sm' | 'md' | 'lg'
+  icon?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+```
+
+## Storybook Development
+
+### Story Organization
+
+- **One story file per component**
+- **Multiple variants** to showcase all component states
+- **Interactive controls** for all props
+- **Documentation** with usage examples
+
+```typescript
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from './Button.vue'
+
+const meta: Meta<typeof Button> = {
+  title: 'Form/Button',
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Primary button component with multiple variants'
+      }
+    }
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'danger']
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="space-x-4">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="danger">Danger</Button>
+      </div>
+    `
+  })
+}
+```
+
+### Story Best Practices
+
+- **Show all states** (default, hover, disabled, loading, etc.)
+- **Responsive examples** for components that adapt to screen size
+- **Accessibility testing** with a11y addon
+- **Performance testing** for complex components
+
+## Library Exports
+
+### Main Export File
+
+```typescript
+// src/lib.ts
+export { default as Button } from './components/Button.vue'
+export { default as Input } from './components/Input.vue'
+export { default as Modal } from './components/Modal.vue'
+
+// Export types
+export type { ButtonProps } from './components/Button.vue'
+export type { InputProps } from './components/Input.vue'
+
+// Export utilities
+export * from './helpers/validation'
+export * from './helpers/formatting'
+```
+
+### Tree-Shakeable Exports
+
+- **Named exports only** - no default exports for the library
+- **Separate type exports** - allow importing types without importing components
+- **Utility separation** - helpers should be importable independently

package/dist/AvatarEditor-00037f6e.cjs

@@ -0,0 +1,2 @@
+"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("@heroicons/vue/20/solid");require("@speckle/shared");require("vee-validate");require("nanoid");require("lucide-vue-next");require("@vueuse/core");require("@headlessui/vue");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)])]),_:1}),e.createVNode(o.FormButton,{disabled:t.disabled,onClick:y},{default:e.withCtx(()=>[...r[2]||(r[2]=[e.createTextVNode("Save",-1)])]),_:1},8,["disabled"])])]))}});exports.default=D;
+//# sourceMappingURL=AvatarEditor-00037f6e.cjs.map

package/dist/{AvatarEditor-504f96fb.cjs.map → AvatarEditor-00037f6e.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"AvatarEditor-504f96fb.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":"itBA2GA,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"}
+{"version":3,"file":"AvatarEditor-00037f6e.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","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeClass","_createVNode","FormButton","_unref","ArrowUturnLeftIcon","ArrowUturnRightIcon","ArrowUpOnSquareIcon","ArrowLeftOnRectangleIcon","_createBlock","Cropper","FormFileUploadZone","activatorOn","_mergeProps","_toHandlers","PhotoIcon","XMarkIcon","_hoisted_3","$emit","_cache","disabled"],"mappings":"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"}

package/dist/{AvatarEditor-edb34575.js → AvatarEditor-fc5c4df2.js}

@@ -8,11 +8,12 @@ import "@heroicons/vue/20/solid";
 import "@speckle/shared";
 import "vee-validate";
 import "nanoid";
+import "lucide-vue-next";
 import "@vueuse/core";
 import "@headlessui/vue";
 import "@heroicons/vue/24/solid";
 import "v3-infinite-loading";
-const W = { class: "flex flex-col space-y-2" }, Y = { class: "flex" }, ee = { class: "flex mx-14 space-x-2" }, ve = /* @__PURE__ */ j({
+const W = { class: "flex flex-col space-y-2" }, Y = { class: "flex" }, ee = { class: "flex mx-14 space-x-2" }, he = /* @__PURE__ */ j({
   __name: "AvatarEditor",
   props: {
     user: {},
@@ -174,18 +175,18 @@ const W = { class: "flex flex-col space-y-2" }, Y = { class: "flex" }, ee = { cl
           color: "outline",
           onClick: t[0] || (t[0] = (x) => e.$emit("cancel"))
         }, {
-          default: m(() => t[1] || (t[1] = [
-            C("Close")
-          ])),
+          default: m(() => [...t[1] || (t[1] = [
+            C("Close", -1)
+          ])]),
           _: 1
         }),
         r(i, {
           disabled: e.disabled,
           onClick: S
         }, {
-          default: m(() => t[2] || (t[2] = [
-            C("Save")
-          ])),
+          default: m(() => [...t[2] || (t[2] = [
+            C("Save", -1)
+          ])]),
           _: 1
         }, 8, ["disabled"])
       ])
@@ -193,6 +194,6 @@ const W = { class: "flex flex-col space-y-2" }, Y = { class: "flex" }, ee = { cl
   }
 });
 export {
-  ve as default
+  he as default
 };
-//# sourceMappingURL=AvatarEditor-edb34575.js.map
+//# sourceMappingURL=AvatarEditor-fc5c4df2.js.map

package/dist/{AvatarEditor-edb34575.js.map → AvatarEditor-fc5c4df2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AvatarEditor-edb34575.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AvatarEditor-fc5c4df2.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","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeClass","_createVNode","FormButton","_unref","ArrowUturnLeftIcon","ArrowUturnRightIcon","ArrowUpOnSquareIcon","ArrowLeftOnRectangleIcon","_createBlock","Cropper","FormFileUploadZone","activatorOn","_mergeProps","_toHandlers","PhotoIcon","XMarkIcon","_hoisted_3","$emit","_cache","disabled"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    title?: string;
+    text?: string;
+    button?: {
+        to?: string;
+        title: string;
+    };
+    showCloser?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
+    close: (e: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((e: MouseEvent) => any) | undefined;
+    onClose?: ((e: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/form/Checkbox.vue.d.ts

@@ -105,6 +105,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<LabelPosition>;
         default: string;
     };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (val: ValueType) => any;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -201,6 +205,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<LabelPosition>;
         default: string;
     };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((val: ValueType) => any) | undefined;
 }>, {
@@ -217,5 +225,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     id: Optional<string>;
     hideLabel: boolean;
     labelPosition: LabelPosition;
+    indeterminate: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/form/CodeInput.vue.d.ts

@@ -25,6 +25,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             disabled: boolean;
             loading: boolean;
             type: string;
+            iconClasses: string;
+            placeholder: import('../../../../shared/dist/esm/index').Optional<string>;
             label: import('../../../../shared/dist/esm/index').Optional<string>;
             modelValue: string;
             rules: import('vee-validate').RuleExpression<string>;
@@ -40,7 +42,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             customErrorMessage: string;
             hideErrorMessage: boolean;
             customHelpClass: string;
-            placeholder: import('../../../../shared/dist/esm/index').Optional<string>;
             showOptional: boolean;
             wrapperClasses: string;
             readOnly: boolean;
@@ -56,6 +57,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             readonly disabled: boolean;
             readonly loading: boolean;
             readonly type: string;
+            readonly iconClasses: string;
             readonly name: string;
             readonly modelValue: string;
             readonly validateOnMount: boolean;
@@ -72,11 +74,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             readonly wrapperClasses: string;
             readonly readOnly: boolean;
             readonly inputClasses: string;
+            readonly placeholder?: import('../../../../shared/dist/esm/index').Optional<string>;
             readonly label?: import('../../../../shared/dist/esm/index').Optional<string>;
             readonly rules?: import('vee-validate').RuleExpression<string>;
             readonly help?: import('../../../../shared/dist/esm/index').Optional<string>;
             readonly customHelpClass?: string | undefined;
-            readonly placeholder?: import('../../../../shared/dist/esm/index').Optional<string>;
             readonly customIcon?: import('../../../../shared/dist/esm/index').Optional<import('../../lib').PropAnyComponent>;
             readonly rightIcon?: import('../../../../shared/dist/esm/index').Optional<import('../../lib').PropAnyComponent>;
             readonly rightIconTitle?: string | undefined;
@@ -94,7 +96,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             readonly onFocus?: (() => any) | undefined;
             readonly onBlur?: (() => any) | undefined;
             readonly onRightIconClick?: (() => any) | undefined;
-        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "size" | "fullWidth" | "color" | "disabled" | "loading" | "type" | "label" | "modelValue" | "rules" | "validateOnMount" | "showRequired" | "labelPosition" | "validateOnValueUpdate" | "help" | "showLabel" | "autoFocus" | "showClear" | "useLabelInErrors" | "customErrorMessage" | "hideErrorMessage" | "customHelpClass" | "placeholder" | "showOptional" | "wrapperClasses" | "readOnly" | "customIcon" | "inputClasses" | "rightIcon" | "rightIconTitle" | "tooltipText">;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "size" | "fullWidth" | "color" | "disabled" | "loading" | "type" | "iconClasses" | "placeholder" | "label" | "modelValue" | "rules" | "validateOnMount" | "showRequired" | "labelPosition" | "validateOnValueUpdate" | "help" | "showLabel" | "autoFocus" | "showClear" | "useLabelInErrors" | "customErrorMessage" | "hideErrorMessage" | "customHelpClass" | "showOptional" | "wrapperClasses" | "readOnly" | "customIcon" | "inputClasses" | "rightIcon" | "rightIconTitle" | "tooltipText">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -178,6 +180,10 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
                 type: import('vue').PropType<import('../../../../shared/dist/esm/index').Optional<import('../../lib').PropAnyComponent>>;
                 default: undefined;
             };
+            iconClasses: {
+                type: StringConstructor;
+                default: null;
+            };
             autoFocus: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -279,6 +285,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             disabled: boolean;
             loading: boolean;
             type: string;
+            iconClasses: string;
+            placeholder: import('../../../../shared/dist/esm/index').Optional<string>;
             label: import('../../../../shared/dist/esm/index').Optional<string>;
             modelValue: string;
             rules: import('vee-validate').RuleExpression<string>;
@@ -294,7 +302,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             customErrorMessage: string;
             hideErrorMessage: boolean;
             customHelpClass: string;
-            placeholder: import('../../../../shared/dist/esm/index').Optional<string>;
             showOptional: boolean;
             wrapperClasses: string;
             readOnly: boolean;
@@ -330,6 +337,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         disabled: boolean;
         loading: boolean;
         type: string;
+        iconClasses: string;
+        placeholder: import('../../../../shared/dist/esm/index').Optional<string>;
         label: import('../../../../shared/dist/esm/index').Optional<string>;
         modelValue: string;
         rules: import('vee-validate').RuleExpression<string>;
@@ -345,7 +354,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         customErrorMessage: string;
         hideErrorMessage: boolean;
         customHelpClass: string;
-        placeholder: import('../../../../shared/dist/esm/index').Optional<string>;
         showOptional: boolean;
         wrapperClasses: string;
         readOnly: boolean;
@@ -415,6 +423,10 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             type: import('vue').PropType<import('../../../../shared/dist/esm/index').Optional<import('../../lib').PropAnyComponent>>;
             default: undefined;
         };
+        iconClasses: {
+            type: StringConstructor;
+            default: null;
+        };
         autoFocus: {
             type: BooleanConstructor;
             default: boolean;
@@ -493,7 +505,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         onFocus?: (() => any) | undefined;
         onBlur?: (() => any) | undefined;
         onRightIconClick?: (() => any) | undefined;
-    }>, "focus" | ("size" | "fullWidth" | "color" | "disabled" | "loading" | "type" | "label" | "modelValue" | "rules" | "validateOnMount" | "showRequired" | "labelPosition" | "validateOnValueUpdate" | "help" | "showLabel" | "autoFocus" | "showClear" | "useLabelInErrors" | "customErrorMessage" | "hideErrorMessage" | "customHelpClass" | "placeholder" | "showOptional" | "wrapperClasses" | "readOnly" | "customIcon" | "inputClasses" | "rightIcon" | "rightIconTitle" | "tooltipText")> & import('vue').ShallowUnwrapRef<{
+    }>, "focus" | ("size" | "fullWidth" | "color" | "disabled" | "loading" | "type" | "iconClasses" | "placeholder" | "label" | "modelValue" | "rules" | "validateOnMount" | "showRequired" | "labelPosition" | "validateOnValueUpdate" | "help" | "showLabel" | "autoFocus" | "showClear" | "useLabelInErrors" | "customErrorMessage" | "hideErrorMessage" | "customHelpClass" | "showOptional" | "wrapperClasses" | "readOnly" | "customIcon" | "inputClasses" | "rightIcon" | "rightIconTitle" | "tooltipText")> & import('vue').ShallowUnwrapRef<{
         focus: () => void;
     }> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {

package/dist/components/form/DualRange.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    min: number;
+    max: number;
+    step: number;
+    name: string;
+    disabled?: boolean;
+    showFields?: boolean;
+    style?: Record<string, string | number>;
+};
+type __VLS_PublicProps = {
+    modelValue?: {
+        min: number;
+        max: number;
+    };
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        min: number;
+        max: number;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        min: number;
+        max: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/form/Range.vue.d.ts

@@ -6,6 +6,8 @@ type __VLS_Props = {
     label: string;
     disabled?: boolean;
     hideHeader?: boolean;
+    inputBelowSlider?: boolean;
+    style?: Record<string, string | number>;
 };
 declare const currentValue: import('vue').ModelRef<number, string, number, number>;
 type __VLS_PublicProps = {

package/dist/components/form/TextInput.vue.d.ts

@@ -123,6 +123,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: PropType<Optional<PropAnyComponent>>;
         default: undefined;
     };
+    iconClasses: {
+        type: StringConstructor;
+        default: null;
+    };
     /**
      * Whether to focus on the input when component is mounted
      */
@@ -312,6 +316,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: PropType<Optional<PropAnyComponent>>;
         default: undefined;
     };
+    iconClasses: {
+        type: StringConstructor;
+        default: null;
+    };
     /**
      * Whether to focus on the input when component is mounted
      */
@@ -400,6 +408,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     disabled: boolean;
     loading: boolean;
     type: string;
+    iconClasses: string;
+    placeholder: Optional<string>;
     label: Optional<string>;
     modelValue: string;
     rules: RuleExpression<string>;
@@ -415,7 +425,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     customErrorMessage: string;
     hideErrorMessage: boolean;
     customHelpClass: string;
-    placeholder: Optional<string>;
     showOptional: boolean;
     wrapperClasses: string;
     readOnly: boolean;

package/dist/components/form/select/Base.vue.d.ts

@@ -43,7 +43,7 @@ declare const _default: <SingleItem extends Record<string, unknown> | string | n
         menuOpenDirection: "left" | "right";
         menuMaxHeightClasses: string;
     }> & Omit<{
-        readonly disabled: Optional<boolean>;
+        readonly disabled: boolean;
         readonly label: string;
         readonly name: string;
         readonly search: boolean;
@@ -57,15 +57,16 @@ declare const _default: <SingleItem extends Record<string, unknown> | string | n
         readonly multiple: boolean;
         readonly items: SingleItem[];
         readonly searchPlaceholder: string;
-        readonly buttonStyle: Optional<"base" | "simple" | "tinted">;
-        readonly hideCheckmarks: Optional<boolean>;
-        readonly allowUnset: Optional<boolean>;
+        readonly buttonStyle: "base" | "simple" | "tinted";
+        readonly hideCheckmarks: boolean;
+        readonly allowUnset: boolean;
         readonly clearable: boolean;
         readonly fixedHeight: boolean;
         readonly fullyControlValue: boolean;
         readonly mountMenuOnBody: boolean;
         readonly menuOpenDirection: "left" | "right";
         readonly size?: Optional<"sm" | "base" | "lg" | "xl">;
+        readonly placeholder?: string | undefined;
         readonly modelValue?: ([{
             type: PropType<SingleItem | SingleItem[] | undefined>;
             default: undefined;
@@ -74,20 +75,19 @@ declare const _default: <SingleItem extends Record<string, unknown> | string | n
             default: undefined;
         }) | undefined;
         readonly rules?: RuleExpression<SingleItem | SingleItem[] | undefined>;
+        readonly by?: string | undefined;
         readonly help?: Optional<string>;
-        readonly placeholder?: string | undefined;
         readonly tooltipText?: string | undefined;
         readonly filterPredicate?: Optional<(item: SingleItem, searchString: string) => boolean>;
         readonly disabledItemPredicate?: Optional<(item: SingleItem) => boolean>;
         readonly getSearchResults?: Optional<(searchString: string) => MaybeAsync<SingleItem[]>>;
-        readonly by?: string | undefined;
         readonly labelId?: string | undefined;
         readonly buttonId?: string | undefined;
         readonly disabledItemTooltip?: string | undefined;
         readonly menuMaxWidth?: number | undefined;
         readonly menuMaxHeightClasses?: string | undefined;
         readonly "onUpdate:modelValue"?: ((v: SingleItem | SingleItem[] | undefined) => any) | undefined;
-    } & 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;
+    } & 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">, "placeholder" | "label" | "name" | "onUpdate:modelValue" | "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;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         triggerSearch: () => Promise<void>;
     }>): void;