@beterdichtbij/component-library 0.60.0 → 0.61.0

package/dist/components/modals/BDAttachmentUploadModal/BDAttachmentUploadModal.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
-    dropzoneUrl?: string;
-    token?: string;
+    url: string;
+    token: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/components/molecules/BDFileUpload/BDFileUpload.vue.d.ts

@@ -0,0 +1,23 @@
+import { BDFileUploadProps } from '../../../interfaces/BDFileUploadProps';
+import { FileUploadUploaderEvent } from 'primevue/fileupload';
+declare const _default: import('vue').DefineComponent<BDFileUploadProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<BDFileUploadProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    url: string;
+    buttonText: string;
+    multiple: boolean;
+    errorMessage: string;
+    fileSizeExceededMessage: string;
+    acceptedFiles: string;
+    tag: "form" | "div";
+    token: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    fileUploadRef: ({
+        $props: import('primevue/fileupload').FileUploadProps & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $slots: import('primevue/fileupload').FileUploadSlots;
+        $emit: ((e: "progress", event: import('primevue/fileupload').FileUploadProgressEvent) => void) & ((e: "select", event: import('primevue/fileupload').FileUploadSelectEvent) => void) & ((e: "remove", event: import('primevue/fileupload').FileUploadRemoveEvent) => void) & ((e: "error", event: import('primevue/fileupload').FileUploadErrorEvent) => void) & ((e: "before-upload", event: import('primevue/fileupload').FileUploadBeforeUploadEvent) => void) & ((e: "upload", event: import('primevue/fileupload').FileUploadUploadEvent) => void) & ((e: "uploader", event: FileUploadUploaderEvent) => void) & ((e: "before-send", event: import('primevue/fileupload').FileUploadBeforeSendEvent) => void) & ((e: "clear") => void) & ((e: "removeUploadedFile", event: import('primevue/fileupload').FileUploadRemoveUploadedFile) => void);
+    } & import('primevue/fileupload').FileUploadMethods) | null;
+}, HTMLDivElement>;
+export default _default;

package/dist/index.d.ts

@@ -25,7 +25,7 @@ import { default as BDPill } from './components/atoms/BDPill/BDPill.vue';
 import { default as BDUserInformation } from './components/atoms/BDUserInformation/BDUserInformation.vue';
 import { default as BDDate } from './components/atoms/BDDate/BDDate.vue';
 import { default as BDDropdownItem } from './components/molecules/BDDropdownItem/BDDropdownItem.vue';
-import { default as BDDropzone } from './components/molecules/BDDropzone/BDDropzone.vue';
+import { default as BDFileUpload } from './components/molecules/BDFileUpload/BDFileUpload.vue';
 import { default as BDMarkdownEditor } from './components/molecules/BDMarkdownEditor/BDMarkdownEditor.vue';
 import { default as BDMobileMenu } from './components/molecules/BDMobileMenu/BDMobileMenu.vue';
 import { default as BDUser } from './components/molecules/BDUser/BDUser.vue';
@@ -68,4 +68,5 @@ import { CopyChatMessagesToClipboard, CopyChatMessageToClipboard, CopyHl7Message
 import { getDisplayDateNumeric, getDisplayDateTimeNumeric, getDisplayDateTimeTextual, getDisplayDateTextual } from './utils/display-date';
 import { TransformHyperlinks, CreateHyperlinkParagraph, ValidateUrl } from './utils/hyperlink';
 import { CreateThumbnailUri, MapAttachmentsForApi, MapToAttachmentObjects } from './utils/attachment';
-export { BDAlert, BDArticle, BDAttachmentPreviewList, BDAttachmentUploadModal, BDBadge, BDAssignConversationModal, BDButton, BDCard, BDChangePasswordTemplate, BDChatCloud, BDCol, BDCollapsableCard, BDConfirmationModal, BDContentLibraryModal, BDConversationToTextModal, BDContentLibrarySplitButton, BDContentLibraryTemplate, BDContainer, BDDropdown, BDDropdownItem, BDDropzone, BDForm, BDFormCheckbox, BDFormInput, BDFormInvalidFeedback, BDFormSelect, BDHeader, BDImageAttachmentModal, BDImageAttachmentPreviewList, BDInputGroup, BDLink, BDLogo, BDMarkdownEditor, BDMessageTemplateFormModal, BDMobileMenu, BDModal, BDNotFoundTemplate, BDPagination, BDPhoneNumberEditModal, BDPill, BDPractitionerHeader, BDProfileImage, BDRow, BDSessionTimeOutModal, BDTable, BDToast, BDUser, BDUserInformation, BDVideoCallConfirmationModal, BDVideoCallToast, BDZoomslider, BDDate, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCall, IconCallReject, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClipboard, IconClose, IconComment, IconCommentActive, IconCommentStatic, IconCommonFileEmpty, IconCommonFileWarning, IconContactPerson, IconCopy, IconDelete, IconDoubleCheck, IconDownloadImage, IconEdit, IconEndCall, IconError, IconExternal, IconEyeShow, IconEyeSlash, IconFile, IconFileAdded, IconForward, IconHix, IconHyperlink, IconImageFileLandscape, IconImageFileWarning, IconInbox, IconInfo, IconInformationCircle, IconItalic, IconListView, IconLock, IconLusciiEscalated, IconLusciiLogo, IconLusciiOpen, IconLusciiPriorityHigh, IconLusciiPriorityLow, IconLusciiPriorityMedium, IconMenu, IconMessage, IconMessageForward, IconMicrophoneSlash, IconMicrosoftTeams, IconMin, IconOrderedList, IconPlus, IconRefresh, IconRemove, IconSananetLogo, IconService, IconShareScreen, IconSingleNeutral, IconSort, IconSortAsc, IconSortDesc, IconSortNone, IconTriangleDown, IconTriangleExclamation, IconUnderline, IconVideocall, IconVideoDisabled, IconWarning, IconZorgkaart, ChangePasswordData, ConfirmPhoneNumberUpdateData, StartPhoneNumberUpdateData, ValidationChangePasswordData, useModal, usePopover, useServerErrors, useSessionTimeOut, useToaster, useValidation, useWindow, useZoom, vBdTooltip, CopyChatMessagesToClipboard, CopyChatMessageToClipboard, CopyHl7MessagesToClipboard, getDisplayDateNumeric, getDisplayDateTimeNumeric, getDisplayDateTimeTextual, getDisplayDateTextual, TransformHyperlinks, CreateHyperlinkParagraph, ValidateUrl, CreateThumbnailUri, MapAttachmentsForApi, MapToAttachmentObjects, };
+import { AttachedFiles, AttachedFile } from './interfaces/BDFileUploadProps';
+export { BDAlert, BDArticle, BDAttachmentPreviewList, BDAttachmentUploadModal, BDBadge, BDAssignConversationModal, BDButton, BDCard, BDChangePasswordTemplate, BDChatCloud, BDCol, BDCollapsableCard, BDConfirmationModal, BDContentLibraryModal, BDConversationToTextModal, BDContentLibrarySplitButton, BDContentLibraryTemplate, BDContainer, BDDropdown, BDDropdownItem, BDFileUpload, BDForm, BDFormCheckbox, BDFormInput, BDFormInvalidFeedback, BDFormSelect, BDHeader, BDImageAttachmentModal, BDImageAttachmentPreviewList, BDInputGroup, BDLink, BDLogo, BDMarkdownEditor, BDMessageTemplateFormModal, BDMobileMenu, BDModal, BDNotFoundTemplate, BDPagination, BDPhoneNumberEditModal, BDPill, BDPractitionerHeader, BDProfileImage, BDRow, BDSessionTimeOutModal, BDTable, BDToast, BDUser, BDUserInformation, BDVideoCallConfirmationModal, BDVideoCallToast, BDZoomslider, BDDate, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCall, IconCallReject, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClipboard, IconClose, IconComment, IconCommentActive, IconCommentStatic, IconCommonFileEmpty, IconCommonFileWarning, IconContactPerson, IconCopy, IconDelete, IconDoubleCheck, IconDownloadImage, IconEdit, IconEndCall, IconError, IconExternal, IconEyeShow, IconEyeSlash, IconFile, IconFileAdded, IconForward, IconHix, IconHyperlink, IconImageFileLandscape, IconImageFileWarning, IconInbox, IconInfo, IconInformationCircle, IconItalic, IconListView, IconLock, IconLusciiEscalated, IconLusciiLogo, IconLusciiOpen, IconLusciiPriorityHigh, IconLusciiPriorityLow, IconLusciiPriorityMedium, IconMenu, IconMessage, IconMessageForward, IconMicrophoneSlash, IconMicrosoftTeams, IconMin, IconOrderedList, IconPlus, IconRefresh, IconRemove, IconSananetLogo, IconService, IconShareScreen, IconSingleNeutral, IconSort, IconSortAsc, IconSortDesc, IconSortNone, IconTriangleDown, IconTriangleExclamation, IconUnderline, IconVideocall, IconVideoDisabled, IconWarning, IconZorgkaart, ChangePasswordData, ConfirmPhoneNumberUpdateData, StartPhoneNumberUpdateData, ValidationChangePasswordData, useModal, usePopover, useServerErrors, useSessionTimeOut, useToaster, useValidation, useWindow, useZoom, vBdTooltip, CopyChatMessagesToClipboard, CopyChatMessageToClipboard, CopyHl7MessagesToClipboard, getDisplayDateNumeric, getDisplayDateTimeNumeric, getDisplayDateTimeTextual, getDisplayDateTextual, TransformHyperlinks, CreateHyperlinkParagraph, ValidateUrl, CreateThumbnailUri, MapAttachmentsForApi, MapToAttachmentObjects, type AttachedFiles, type AttachedFile, };

package/dist/interfaces/{BDDropzoneProps.d.ts → BDFileUploadProps.d.ts}

@@ -1,10 +1,14 @@
-export interface attachedFile {
+export interface AttachedFiles {
+    files: AttachedFile[];
+}
+export interface AttachedFile {
     UUID: string;
     CorrelationId: string;
     Naam: string;
+    previewUrl?: string;
 }
-export interface BDDropzoneProps {
-    modelValue: attachedFile[];
+export interface BDFileUploadProps {
+    modelValue: AttachedFiles;
     buttonText?: string;
     multiple: boolean;
     errorMessage?: string;

package/dist/locales/nl.json

@@ -59,6 +59,19 @@
         "download": "Download afbeelding",
         "loading": "Afbeelding aan het laden"
     },
+    "messageTemplateFormModal": {
+        "createTitle": "Standaardbericht toevoegen",
+        "editTitle": "Standaardbericht wijzigen",
+        "titleLabel": "Titel",
+        "titlePlaceHolder": "Zwelling na botbreuk",
+        "replyTemplateLabel": "Standaardbericht",
+        "replyTemplatePlaceHolder": "Schrijf hier jouw bericht naar de patiënt",
+        "sharedWithLabel": "Delen met",
+        "owner": "Eigenaar",
+        "tooltipOwner": "Als het bericht met meerdere instanties (teams) gedeeld wordt, kunje alleen zelf eigenaar worden",
+        "categoryLabel": "Categorie",
+        "validation": "Dit veld is verplicht."
+    },
     "notFoundTemplate": {
         "title": "Pagina niet gevonden",
         "description": "De pagina die je zoekt kon niet gevonden worden. Controleer de URL of ga terug naar de hoofdpagina.",

package/dist/scss/_content-library-card-message-template.scss

@@ -25,6 +25,10 @@
         }
     }
 
+    .btn-insert {
+        width: auto;
+    }
+
     .content-library-card-message-template__body {
         display: block !important;
 

package/dist/scss/_content-library-modal.scss

@@ -9,7 +9,6 @@
 
   .collapse-button {
     padding: 0 12px;
-    margin-bottom: 8px;
 
     &-last {
       margin-bottom: 0;

package/dist/scss/{_dropzone.scss → _file-upload.scss}

@@ -1,32 +1,47 @@
 @use "sass:math";
 
-.dropzone.bd-dropzone, .dropzone.bd-dropzone * {
-  box-sizing: border-box;
-}
-.dropzone.bd-dropzone {
+.bd-file-upload {
   position: relative;
   color: $color-darkblue;
   font-family: $font-family-base;
   width:fit-content;
+
+  .p-fileupload {
+    border: 0;
+    border-radius: 0;
+    background: none;
+
+    .p-fileupload-header {
+      border: none;
+      margin-bottom: 20px;
+    }
+
+    .filename {
+      color: $color-darkblue;
+    }
+  }
   
   .dz-message {
     margin-bottom: 1.25rem;
   }
 
-  .dz-preview {
+  .file-upload-preview {
     position: relative;
     display: inline-block;
-   
     text-align: center;
-    
-    .dz-image{
-      min-width: 150px;
-      height: 88px;
-      object-fit: contain;
-    }
 
-    .dz-error-message,.dz-success-mark {
-      display: none;
+    .file-preview {
+      display: inline-block;
+
+      .preview-details {
+        position: relative;
+
+        .preview-image {
+          min-width: 150px;
+          height: 88px;
+          object-fit: contain;
+        }
+      }
     }
 
     &.dz-error {
@@ -34,17 +49,17 @@
         display: block;
       }
     }
-    &.dz-success { 
-      .dz-success-mark {
-        display: block;
-        background-color: $green;
-        border-radius: 50%;
-        width:21px;
-        height:21px;
-        margin: 0px auto;
-        svg{
-          transform: translateY(-2px);
-        }
+
+    .success-mark {
+      display: block;
+      background-color: $green;
+      border-radius: 50%;
+      width:21px;
+      height:21px;
+      margin: 0px auto;
+
+      svg{
+        transform: translateY(-2px);
       }
     }
 
@@ -54,7 +69,7 @@
       }
     }
 
-    .dz-remove {
+    .remove-button {
       position: absolute;
       top: -10px;
       right: -10px;

package/dist/scss/_icons.scss

@@ -5,7 +5,7 @@
   position: relative;
 
   &.icon-check{
-    .bd-dropzone &{
+    .bd-file-upload &{
       height: 16px;
       width: 11px;
       fill: $color-white;

package/dist/scss/_message-template-form-modal.scss

@@ -18,9 +18,12 @@
         margin-bottom: 1rem;
     }
 
-    .bd-input-group > div {
-        margin-bottom: 1rem;
-        width: 100%;
+    .bd-input-group {
+        margin-bottom: 16px;
+
+        &:last-of-type {
+            margin-bottom: 0;
+        }
     }
 
     .bd-markdown-editor {

package/dist/scss/component-library-styling.scss

@@ -19,8 +19,8 @@
 @import "content-library-split-button";
 @import "conversation-to-text-modal";
 @import "dropdown";
-@import "dropzone";
 @import "extern";
+@import "file-upload";
 @import "form-field";
 @import "form-multiple-checkbox";
 @import "forms";

package/dist/scss/extern/_bootstrap.scss

@@ -1,10 +1,5 @@
 .bs-popover-bottom,
 .bs-popover-auto[data-popper-placement^=bottom] {
-    .popover-header {
-        font-weight: bold;
-        background: $color-chatcloud;
-    }
-
     .popover-body {
         font-size: 15px;
 

package/dist/scss/extern/_prime-vue.scss

@@ -1,4 +1,5 @@
 :root {
+    --p-fileupload-color: #394156;
     --p-border-radius-none: 0;
     --p-border-radius-xs: 2px;
     --p-border-radius-sm: 4px;

package/package.json

@@ -2,7 +2,7 @@
     "name": "@beterdichtbij/component-library",
     "description": "Component library voor BeterDichtbij design system",
     "private": false,
-    "version": "0.60.0",
+    "version": "0.61.0",
     "engines": {
         "node": "24.x",
         "npm": "11.x"
@@ -76,7 +76,6 @@
         "@tiptap/vue-3": "3.21.0",
         "@vueuse/core": "14.2.1",
         "dayjs": "^1.11.20",
-        "dropzone": "5.9.3",
         "maska": "3.2.0",
         "pinia": "3.0.4",
         "primevue": "^4.5.4",
@@ -92,7 +91,6 @@
         "@storybook/vue3": "^10.3.3",
         "@storybook/vue3-vite": "^10.3.3",
         "@types/bootstrap": "5.2.10",
-        "@types/dropzone": "5.7.9",
         "@typescript-eslint/eslint-plugin": "^8.57.2",
         "@typescript-eslint/parser": "^8.57.2",
         "@vitejs/plugin-vue": "^6.0.5",

package/dist/components/molecules/BDDropzone/BDDropzone.vue.d.ts

@@ -1,17 +0,0 @@
-import { BDDropzoneProps, attachedFile } from '../../../interfaces/BDDropzoneProps';
-declare const _default: import('vue').DefineComponent<BDDropzoneProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<BDDropzoneProps> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: attachedFile[];
-    url: string;
-    buttonText: string;
-    multiple: boolean;
-    errorMessage: string;
-    fileSizeExceededMessage: string;
-    acceptedFiles: string;
-    tag: "form" | "div";
-    token: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;