@beterdichtbij/component-library 0.63.3 → 0.64.1

package/dist/components/atoms/BDCollapsableCard/BDCollapsableCard.vue.d.ts

@@ -12,6 +12,7 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<BDCollapsableCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BDCollapsableCardProps> & Readonly<{}>, {
     title: string;
     disabled: boolean;
+    noHeader: boolean;
     collapseOn: import('../../../types/BootstrapSizes').bootstrapSizes | null;
     showOn: import('../../../types/BootstrapSizes').bootstrapSizes;
     visible: boolean;

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

@@ -0,0 +1,11 @@
+import { AttachedFile } from '../../../interfaces/BDFileUploadProps';
+type __VLS_Props = {
+    file: AttachedFile;
+    isPending: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    remove: (file: AttachedFile) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((file: AttachedFile) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/interfaces/BDCollapsableCardProps.d.ts

@@ -5,4 +5,5 @@ export interface BDCollapsableCardProps {
     collapseOn: bootstrapSizes | null;
     showOn: bootstrapSizes;
     visible: boolean;
+    noHeader: boolean;
 }

package/dist/interfaces/BDFileUploadProps.d.ts

@@ -2,10 +2,10 @@ export interface AttachedFiles {
     files: AttachedFile[];
 }
 export interface AttachedFile {
-    UUID: string;
-    CorrelationId: string;
-    Naam: string;
+    name: string;
     previewUrl?: string;
+    UUID?: string;
+    CorrelationId?: string;
 }
 export interface BDFileUploadProps {
     modelValue: AttachedFiles;

package/dist/scss/_file-upload-preview.scss

@@ -0,0 +1,54 @@
+.bd-file-upload-preview {
+    display: inline-block;
+
+    .preview-details {
+        position: relative;
+
+        .preview-image {
+            min-width: 150px;
+            height: 88px;
+            object-fit: contain;
+        }
+
+        .mark-container {
+            display: block;
+            border-radius: 50%;
+            width: 21px;
+            height: 21px;
+            margin: 0px auto;
+
+            &.success {
+                background-color: $green;
+
+                svg {
+                    transform: translateY(-2px);
+                }
+            }
+
+            &.pending {
+                background-color: $white;
+            }
+        }
+
+        .remove-button {
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            margin: 0;
+            width: 21px;
+            height: 21px;
+            border-radius: 50%;
+            padding: 0px;
+            background-color: $primary;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .icon {
+                margin: revert;
+                transform: revert;
+                transition: revert;
+            }
+        }
+    }
+}

package/dist/scss/_file-upload.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 .bd-file-upload {
   position: relative;
   color: $color-darkblue;
@@ -20,74 +18,10 @@
       color: $color-darkblue;
     }
   }
-  
-  .dz-message {
-    margin-bottom: 1.25rem;
-  }
 
-  .file-upload-preview {
+  .preview-container {
     position: relative;
     display: inline-block;
     text-align: center;
-
-    .file-preview {
-      display: inline-block;
-
-      .preview-details {
-        position: relative;
-
-        .preview-image {
-          min-width: 150px;
-          height: 88px;
-          object-fit: contain;
-        }
-      }
-    }
-
-    &.dz-error {
-      .dz-error-message, .dz-error-mark {
-        display: block;
-      }
-    }
-
-    .success-mark {
-      display: block;
-      background-color: $green;
-      border-radius: 50%;
-      width:21px;
-      height:21px;
-      margin: 0px auto;
-
-      svg{
-        transform: translateY(-2px);
-      }
-    }
-
-    &.dz-complete {
-      .dz-progress {
-        display: none;
-      }
-    }
-
-    .remove-button {
-      position: absolute;
-      top: -10px;
-      right: -10px;
-      margin: 0;
-      width: 21px;
-      height: 21px;
-      border-radius: 50%;
-      padding: 0px;
-      background-color: $primary;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .icon {
-        margin: revert;
-        transform: revert;
-        transition: revert;
-      }
-    }
   }
 }

package/dist/scss/_icons.scss

@@ -14,31 +14,12 @@
   &.icon-remove {
     width: 11px;
     height: 11px;
-
-    .dz-remove &{
-      fill: $color-white;
-    }
   }
 
   &.icon-file{
     fill: $color-darkblue;
-    .dz-details &{
-      height: 88px;
-      min-width: 150px;
-    }
-
-    .dz-error &{
-      fill: $color-red;
-    }
   }
 
-  &.icon-error{
-    .dz-error-mark & , .dz-error-message &, .bd-invalid-feedback &{
-      path {
-        fill: $color-red;
-      }
-    }
-  }
   &.icon-loading{
     width:25px;
     height:25px;

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

@@ -23,6 +23,7 @@
 @import "extern";
 @import "filter-card";
 @import "file-upload";
+@import "file-upload-preview";
 @import "form-field";
 @import "form-multiple-checkbox";
 @import "forms";

package/package.json

@@ -2,7 +2,7 @@
     "name": "@beterdichtbij/component-library",
     "description": "Component library voor BeterDichtbij design system",
     "private": false,
-    "version": "0.63.3",
+    "version": "0.64.1",
     "engines": {
         "node": "24.x",
         "npm": "11.x"