@beterdichtbij/component-library 0.17.0 → 0.18.1

package/dist/components/atoms/icons/IconDownloadImage.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/components/atoms/icons/IconDownloadImage.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconDownloadImage.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icons/IconDownloadImage.vue"],"names":[],"mappings":";AAqBA,wBAA4E"}

package/dist/components/atoms/icons/IconMenu.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/components/atoms/icons/IconMenu.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconMenu.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icons/IconMenu.vue"],"names":[],"mappings":";AAqBA,wBAA4E"}

package/dist/components/atoms/icons/index.d.ts

@@ -15,4 +15,6 @@ import IconUnderline from "./IconUnderline.vue";
 import IconBulletList from "./IconBulletList.vue";
 import IconOrderedList from "./IconOrderedList.vue";
 import IconHyperlink from "./IconHyperlink.vue";
-export { IconAttachment, IconCheck, IconError, IconInfo, IconRemove, IconFile, IconCaretDown, IconCaretRight, IconCaretLeft, IconClose, IconItalic, IconBold, IconUnderline, IconBulletList, IconOrderedList, IconHyperlink, IconCalendar };
+import IconDownloadImage from "./IconDownloadImage.vue";
+import IconMenu from "./IconMenu.vue";
+export { IconAttachment, IconCheck, IconError, IconInfo, IconRemove, IconFile, IconCaretDown, IconCaretRight, IconCaretLeft, IconClose, IconItalic, IconBold, IconUnderline, IconBulletList, IconOrderedList, IconHyperlink, IconCalendar, IconDownloadImage, IconMenu };

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

@@ -0,0 +1,42 @@
+import type { PropType as __PropType } from 'vue';
+import { BDAttachment } from '../../../interfaces/BDAttachment';
+declare const _sfc_main: import("vue").DefineComponent<{
+    files: {
+        type: __PropType<BDAttachment[] | undefined>;
+        required: false;
+        default: never[];
+    };
+    showDelete: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+    noDownload: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "delete"[], "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    files: {
+        type: __PropType<BDAttachment[] | undefined>;
+        required: false;
+        default: never[];
+    };
+    showDelete: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+    noDownload: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+}>> & {
+    onDelete?: ((...args: any[]) => any) | undefined;
+}, {
+    files: BDAttachment[] | undefined;
+    showDelete: boolean;
+    noDownload: boolean;
+}, {}>;
+export default _sfc_main;

package/dist/components/molecules/BDAttachmentPreviewList/BDAttachmentPreviewList.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BDAttachmentPreviewList.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/BDAttachmentPreviewList/BDAttachmentPreviewList.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,qIAAqI,CAAC;AAC5J,cAAc,qIAAqI,CAAC;AACpJ,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,54 @@
+import type { PropType as __PropType } from 'vue';
+import { BDAttachment } from '../../../interfaces/BDAttachment';
+declare const _sfc_main: import("vue").DefineComponent<{
+    fastDownload: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+    files: {
+        type: __PropType<BDAttachment[] | undefined>;
+        required: false;
+        default: undefined;
+    };
+    showDelete: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+    noDownload: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "delete")[], "show" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    fastDownload: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+    files: {
+        type: __PropType<BDAttachment[] | undefined>;
+        required: false;
+        default: undefined;
+    };
+    showDelete: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+    noDownload: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+}>> & {
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+}, {
+    files: BDAttachment[] | undefined;
+    showDelete: boolean;
+    noDownload: boolean;
+    fastDownload: boolean;
+}, {}>;
+export default _sfc_main;

package/dist/components/molecules/BDImageAttachmentPreviewList/BDImageAttachmentPreviewList.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BDImageAttachmentPreviewList.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/BDImageAttachmentPreviewList/BDImageAttachmentPreviewList.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,+IAA+I,CAAC;AACtK,cAAc,+IAA+I,CAAC;AAC9J,eAAe,SAAS,CAAC"}

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

@@ -20,11 +20,16 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: true;
         default: "basic";
     };
+    files: {
+        type: __PropType<import("../../../types/ApiAttachment").ApiAttachment[] | undefined>;
+        required: false;
+        default: undefined;
+    };
     modelValue: {
         type: __PropType<string>;
         required: true;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "upload")[], "update:modelValue" | "upload", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "upload" | "action")[], "update:modelValue" | "upload" | "action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     placeholder: {
         type: __PropType<string | undefined>;
         required: false;
@@ -45,6 +50,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: true;
         default: "basic";
     };
+    files: {
+        type: __PropType<import("../../../types/ApiAttachment").ApiAttachment[] | undefined>;
+        required: false;
+        default: undefined;
+    };
     modelValue: {
         type: __PropType<string>;
         required: true;
@@ -52,10 +62,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onUpload?: ((...args: any[]) => any) | undefined;
+    onAction?: ((...args: any[]) => any) | undefined;
 }, {
     variant: import('../../../types/tiptapVariants').TiptapVariants;
     placeholder: string | undefined;
     state: boolean | undefined;
     errorText: string | undefined;
+    files: import("../../../types/ApiAttachment").ApiAttachment[] | undefined;
 }, {}>;
 export default _sfc_main;

package/dist/composables/useToaster.d.ts

@@ -1,4 +1,4 @@
-import { Toast } from "bootstrap";
+import Toast from "bootstrap/js/dist/toast";
 export declare function useToaster(options?: Toast.Options | undefined): {
     showSuccessToast: (message: string) => void;
     showInformationToast: (message: string) => void;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import BDCol from "./layout/BDCol.vue";
 import BDContainer from "./layout/BDContainer.vue";
 import BDRow from "./layout/BDRow.vue";
-import { IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar } from "./components/atoms/icons/index";
+import { IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, IconDownloadImage, IconMenu } from "./components/atoms/icons/index";
 import BDButton from "./components/atoms/BDButton/BDButton.vue";
 import BDLogo from "./components/atoms/BDLogo/BDLogo.vue";
 import BDLink from "./components/atoms/BDLink/BDLink.vue";
@@ -24,7 +24,9 @@ import BDDropdownItem from "./components/molecules/BDDropdownItem/BDDropdownItem
 import BDDropzone from "./components/molecules/BDDropzone/BDDropzone.vue";
 import BDMarkdownEditor from "./components/molecules/BDMarkdownEditor/BDMarkdownEditor.vue";
 import BDUser from "./components/molecules/BDUser/BDUser.vue";
+import BDAttachmentPreviewList from "./components/molecules/BDAttachmentPreviewList/BDAttachmentPreviewList.vue";
+import BDImageAttachmentPreviewList from "./components/molecules/BDImageAttachmentPreviewList/BDImageAttachmentPreviewList.vue";
 import BDDropdown from "./components/organisms/BDDropdown/BDDropdown.vue";
 import BDModal from "./components/organisms/BDModal/BDModal.vue";
 import { useToaster } from "./composables/useToaster";
-export { BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, BDArticle, BDUser, BDToast, useToaster };
+export { BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, useToaster, IconDownloadImage, BDImageAttachmentPreviewList, IconMenu, };

package/dist/interfaces/BDAttachment.d.ts

@@ -0,0 +1,7 @@
+export interface BDAttachment {
+    CorrelationId: string;
+    downloadUrl?: string;
+    previewUrl?: string;
+    altName?: string;
+    Naam: string;
+}

package/dist/interfaces/BDAttachmentPreviewListProps.d.ts

@@ -0,0 +1,6 @@
+import { BDAttachment } from "./BDAttachment";
+export interface BDAttachmentPreviewListProps {
+    files?: BDAttachment[];
+    showDelete: boolean;
+    noDownload: boolean;
+}

package/dist/interfaces/BDImageAttachmentPreviewListProps.d.ts

@@ -0,0 +1,4 @@
+import { BDAttachmentPreviewListProps } from "./BDAttachmentPreviewListProps";
+export interface BDImageAttachmentPreviewListProps extends BDAttachmentPreviewListProps {
+    fastDownload: boolean;
+}

package/dist/interfaces/BDMarkdownEditorProps.d.ts

@@ -1,8 +1,10 @@
 import { ModelValueString } from "../types/ModelValue";
 import { TiptapVariants } from '../types/tiptapVariants';
+import { ApiAttachment } from '../types/ApiAttachment';
 export interface BDMarkdownEditorProps extends ModelValueString {
     placeholder?: string;
     errorText?: string;
     state?: boolean;
     variant: TiptapVariants;
+    files?: ApiAttachment[];
 }

package/dist/scss/_attachments.scss

@@ -0,0 +1,107 @@
+
+.attachment-list {
+  display: flex;
+  justify-content: flex-start;
+  flex-flow: wrap;
+  margin-top: 20px;
+  list-style: none;
+  padding: 0px;
+
+  &__item {
+    margin-bottom: 10px;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 25px;
+    }
+
+    &:not(:last-child) {
+      margin-right: 10px;
+
+      @include media-breakpoint-up(md) {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .attachment {
+    .img-preview {
+      cursor: zoom-in;
+      border-radius: 8px;
+      border: 1px solid #abb0be;
+    }
+
+    .download-button-image {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      padding: 5px;
+      width: 30px;
+      height: 34px;
+      text-align: center;
+      display: none;
+      cursor: pointer;
+      background-color: white;
+      border-radius: 8px;
+      
+      &.btn{
+      border:1px solid #abb0be;
+      }
+
+      svg {
+        margin-right: 0px;
+        stroke: $color-stroke-gray;
+      }
+
+      &:hover {
+        svg {
+          stroke: $color-darkblue;
+        }
+      }
+    }
+
+    &:hover {
+      .download-button-image {
+        display: block;
+      }
+    }
+  }
+}
+
+
+
+.attachment-link {
+  color: $primary;
+  text-decoration: none;
+  font-weight: $font-normal;
+  position: relative;
+  fill: $primary;
+  .icon-attachment {
+    margin-right: 5px;
+  }
+  
+  .icon-external {
+    fill: $color-border;
+    margin-left: 10px;
+  }
+
+  .icon-file-added {
+    fill: $color-blue;
+    margin-right: 10px;
+  }
+  &:hover{
+    fill:#2a76a6;
+  }
+}
+
+.attachment {
+  position: relative;
+  width: fit-content;
+
+  img {
+    object-fit: contain;
+    min-height: 40px;
+    max-height: 120px;
+    width: auto;
+  }
+}
+

package/dist/scss/_button.scss

@@ -4,7 +4,7 @@
     border-radius: $border-radius-default;
     text-align: center;
     margin: 0;
-    transition: all .5s cubic-bezier(.36,.03,.28,.99);
+    transition: all 0.5s cubic-bezier(0.36, 0.03, 0.28, 0.99);
 }
 
 // $variant, $color, $bg-color, $hover-color, $hover-bg-color, $border $solid $border-color
@@ -21,12 +21,12 @@ $btn-variants:
 
 @each $variant, $color, $bg-color, $hover-color, $hover-bg-color, $border, $solid, $border-color in $btn-variants {
     .btn-#{$variant} {
-     @include button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $border, $solid, $border-color)
+        @include button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $border, $solid, $border-color);
     }
 }
 
 .btn-link {
-    text-decoration: none;   
+    text-decoration: none;
 
     &:hover {
         text-decoration: underline;
@@ -34,29 +34,45 @@ $btn-variants:
 }
 
 .btn-outline-tertiary {
-    &.disabled{
-    opacity: 1;
-    color: #afb8cc;
-    background-color: #f2f3f5;
+    &.disabled {
+        opacity: 1;
+        color: #afb8cc;
+        background-color: #f2f3f5;
     }
 }
 
-.btn.btn-primary{
-    &:disabled{
+.btn.btn-primary {
+    &:disabled {
         opacity: 1;
         color: $white;
         background-color: #bdc2cc;
     }
 }
 
-.btn-close{
+.btn-close {
     .modal & {
         background-image: initial;
     }
 }
 
-
-
-
-
-
+button {
+    &.btn-remove {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        margin-top: 0px !important;
+        background-color: $primary;
+        color: #fff;
+        fill: #fff;
+        width: 21px;
+        height: 21px;
+        border-radius: 50%;
+        line-height: normal;
+        padding: 0;
+        text-align: center;
+        &:hover {
+            fill: $primary;
+            background-color: #ebf3f8;
+        }
+    }
+}

package/dist/scss/_icons.scss

@@ -50,4 +50,9 @@
     height: 24px;
     fill: white;
   }
+
+  &.icon-menu {
+    width: 14px;
+    font-weight: 900;
+  }
 }

package/dist/scss/base/variables.scss

@@ -166,3 +166,17 @@ $pagination-color: $gray-600;
 $pagination-border-color:$gray-500;
 $pagination-border-radius: 4px;
 $pagination-border-width: 1px;
+
+
+//newly found variables
+$color-stroke-gray: #6B758A;
+$color-border:hsl(224, 13%, 71%);
+
+//zoom slider
+$form-range-track-cursor: pointer;
+$form-range-track-width:  100%;
+$form-range-track-border-radius:  1rem;
+$form-range-thumb-border-radius:  1rem;
+$form-range-track-height: .5rem;
+$form-range-thumb-width: 1rem;
+$form-range-thumb-height: $form-range-thumb-width;

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

@@ -17,4 +17,5 @@
 @import "dropzone";
 @import "user";
 @import "markdown-editor";
-@import "modal";
+@import "modal";
+@import "attachments"

package/dist/types/ApiAttachment.d.ts

@@ -0,0 +1,15 @@
+export interface ApiAttachment {
+    Id?: number;
+    BerichtId?: number;
+    Naam: string;
+    MimeType: string | null;
+    DownloadUrl?: string;
+    identifier?: string;
+    conversationId?: string | number;
+    url?: string;
+    FileId?: string;
+    StandardAttachmentId?: string | number;
+    CorrelationId?: string | number;
+    ThumbnailUrl?: string;
+    standardAttachmentId?: string;
+}

package/dist/types/ButtonColorVariants.d.ts

@@ -10,5 +10,6 @@ export declare const BTN_COLOR_VARIANTS: {
     readonly OUT_LINK: "link";
     readonly LIGHT: "light";
     readonly DARK: "dark";
+    readonly REMOVE: "remove";
 };
 export type btnColorVariants = GenericEnum<typeof BTN_COLOR_VARIANTS>;

package/dist/utils/attachment.d.ts

@@ -0,0 +1,25 @@
+import { BDAttachment } from '../interfaces/BDAttachment';
+import { ApiAttachment } from '../types/ApiAttachment';
+export declare const IsSvg: (filename: string) => boolean | "";
+export declare const MapAttachmentsForApi: (files: BDAttachment[]) => string[];
+export declare const CreateThumbnailUri: (attachment: ApiAttachment) => string;
+export declare const CreateFullImageUri: (attachment: ApiAttachment) => string | null;
+export declare const MapToAttachmentObjects: (attachments: ApiAttachment[], isImage: boolean) => {
+    Id?: number | undefined;
+    BerichtId?: number | undefined;
+    Naam: string;
+    MimeType: string | null;
+    DownloadUrl?: string | undefined;
+    identifier?: string | undefined;
+    conversationId?: string | number | undefined;
+    url?: string | undefined;
+    FileId?: string | undefined;
+    StandardAttachmentId?: string | number | undefined;
+    CorrelationId?: string | number | undefined;
+    ThumbnailUrl?: string | undefined;
+    standardAttachmentId?: string | undefined;
+    downloadUrl: string;
+    previewUrl: string;
+    fullImageUrl: string | null;
+    altName: string;
+}[];

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.17.0",
+    "version": "0.18.1",
     "author": "Ralph van der Neut <rvanderneut@beterdichtbij.nl>",
     "type": "module",
     "files": [
@@ -89,7 +89,7 @@
         "@typescript-eslint/eslint-plugin": "6.8.0",
         "@typescript-eslint/parser": "6.8.0",
         "@vitejs/plugin-vue": "^4.1.0",
-        "@vitest/coverage-v8": "0.32.0",
+        "@vitest/coverage-v8": "1.5.3",
         "@vue/eslint-config-typescript": "12.0.0",
         "@vue/test-utils": "^2.3.2",
         "bootstrap": "5.3.0",
@@ -109,7 +109,7 @@
         "typescript": "^5.0.2",
         "vite": "^4.3.2",
         "vite-plugin-dts": "^2.3.0",
-        "vitest": "0.32.0"
+        "vitest": "1.5.3"
     },
     "description": "Component library voor BeterDichtbij design system",
     "repository": {