@beterdichtbij/component-library 0.35.1 → 0.36.0

package/dist/components/organisms/BDImageAttachmentModal/BDImageAttachmentModal.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _sfc_main: import("vue").DefineComponent<Readonly<{
+    loadingText?: any;
+    downloadText?: any;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Readonly<{
+    loadingText?: any;
+    downloadText?: any;
+}>>>, {
+    readonly loadingText?: any;
+    readonly downloadText?: any;
+}, {}>;
+export default _sfc_main;

package/dist/components/organisms/BDImageAttachmentModal/BDImageAttachmentModal.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BDImageAttachmentModal.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/BDImageAttachmentModal/BDImageAttachmentModal.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,mIAAmI,CAAC;AAC1J,cAAc,mIAAmI,CAAC;AAClJ,eAAe,SAAS,CAAC"}

package/dist/composables/useZoom.d.ts

@@ -0,0 +1,15 @@
+export default function useZoom(): {
+    zoom: import("vue").Ref<number>;
+    mouseDown: import("vue").Ref<boolean>;
+    imageHolderRef: import("vue").Ref<HTMLElement | null>;
+    pos: import("vue").Ref<{
+        top: number;
+        left: number;
+        x: number;
+        y: number;
+    }>;
+    SetZoom: import("vue").ComputedRef<string>;
+    OnMouseDown: (e: MouseEvent) => void;
+    OnMouseMove: (e: MouseEvent) => void;
+    OnMouseUp: () => void;
+};

package/dist/index.d.ts

@@ -30,16 +30,18 @@ import BDAttachmentPreviewList from "./components/molecules/BDAttachmentPreviewL
 import BDImageAttachmentPreviewList from "./components/molecules/BDImageAttachmentPreviewList/BDImageAttachmentPreviewList.vue";
 import BDChatCloud from "./components/molecules/BDChatCloud/BDChatCloud.vue";
 import BDTable from "./components/molecules/BDTable/BDTable.vue";
+import BDChangePasswordTemplate from "./components/organisms/BDChangePasswordTemplate/BDChangePasswordTemplate.vue";
 import BDDropdown from "./components/organisms/BDDropdown/BDDropdown.vue";
 import BDHeader from "./components/organisms/BDHeader/BDHeader.vue";
+import BDImageAttachmentModal from "./components/organisms/BDImageAttachmentModal/BDImageAttachmentModal.vue";
 import BDModal from "./components/organisms/BDModal/BDModal.vue";
-import BDChangePasswordTemplate from "./components/organisms/BDChangePasswordTemplate/BDChangePasswordTemplate.vue";
 import { useModal } from "./composables/useModal";
 import { useServerErrors } from "./composables/useServerErrors";
 import { useToaster } from "./composables/useToaster";
 import { useValidation } from "./composables/useValidation";
+import useZoom from "./composables/useZoom";
 import { vBdTooltip } from "./directives/BDTooltip";
 import { type ChangePasswordData } from './types/ChangePasswordData';
 import { type ValidationChangePasswordData } from './types/ValidationChangePasswordData';
 import { getDisplayDate } from "./utils/display-date";
-export { BDChatCloud, BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDChangePasswordTemplate, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, BDImageAttachmentPreviewList, BDHeader, BDMobileMenu, BDTable, BDPill, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconComment, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconService, IconSort, IconSortAsc, IconSortDesc, IconSortNone, IconTriangleExclamation, IconUnderline, IconContactPerson, ChangePasswordData, ValidationChangePasswordData, useModal, useServerErrors, useToaster, useValidation, vBdTooltip, getDisplayDate, };
+export { BDChatCloud, BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDChangePasswordTemplate, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, BDImageAttachmentPreviewList, BDHeader, BDMobileMenu, BDTable, BDPill, BDImageAttachmentModal, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconComment, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconService, IconSort, IconSortAsc, IconSortDesc, IconSortNone, IconTriangleExclamation, IconUnderline, IconContactPerson, ChangePasswordData, ValidationChangePasswordData, useModal, useServerErrors, useToaster, useValidation, useZoom, vBdTooltip, getDisplayDate, };

package/dist/scss/_modal.scss

@@ -30,6 +30,7 @@
           display: inline-block;
           padding: 4px; 
           border-radius: 50%;  
+
           path {
               fill: $color-white; 
           }
@@ -44,7 +45,7 @@
       }
 
       @include media-breakpoint-up(md) {
-        padding: 30px 65px 0px 65px;
+        padding: 30px 65px 15px 65px;
       }
 
       @include media-breakpoint-down(md) {
@@ -73,9 +74,19 @@
 
     .modal-body {
       @include media-breakpoint-up(md) {
-        padding: 30px 65px;
+        padding: 15px 65px 30px 65px;
       }
       border: 0px;
+
+      p:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    &:has(.modal-footer) .modal-body {
+      @include media-breakpoint-up(md) {
+        padding: 15px 65px;
+      }
     }
 
     .modal-footer {
@@ -94,7 +105,7 @@
       }
 
       @include media-breakpoint-up(md) {
-        padding: 30px 65px;
+        padding: 15px 65px 30px 65px;
       }
 
       @include media-breakpoint-down(md) {
@@ -140,4 +151,97 @@
       }
     }
   }
+}
+
+#image-attachment-modal {
+  &.modal-lg {
+    --bs-modal-width: 1200px;
+  }
+
+  .image-preview-image-holder {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    cursor: grab;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-left: auto;
+    margin-right: auto;
+
+    .image-preview-modal {
+      margin: 0px auto;
+      display: block;
+      user-select: none;
+      width: auto;
+      height: auto;
+      max-width: 600px;
+      max-height: 400px;
+      transition: transform .2s;
+      transform-origin: top;
+      z-index: 1;
+
+      @include media-breakpoint-down(sm) {
+        max-width: 300px;
+        max-height: 200px;
+      }
+
+      // Zoom didn't work when the styling was incorporated into the Vue component.
+      &.zoom {
+        &-1 {
+          transform: scale(1.25);
+        }
+
+        &-2 {
+          transform: scale(1.5);
+        }
+
+        &-3 {
+          transform: scale(1.75);
+        }
+
+        &-4 {
+          transform: scale(2);
+        }
+      }
+    }
+  }
+
+  .image-preview-bd-zoom-slider, .download-image {
+    width: 250px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 50px;
+    z-index: 2;
+  }
+
+  .download-image {
+    width: 250px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    z-index: 3;
+  }
+
+  .show-spinner {
+    width: 100px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+  }
+
+  .modal-footer {
+    display: none;
+  }
+
+  a {
+    text-decoration: none;
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.35.1",
+    "version": "0.36.0",
     "type": "module",
     "files": [
         "dist"