@beterdichtbij/component-library 0.21.0 → 0.22.0

package/dist/components/atoms/icons/IconAcademy.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/IconAcademy.vue.d.ts.map

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

package/dist/components/atoms/icons/IconArrowDown.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/IconArrowDown.vue.d.ts.map

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

package/dist/components/atoms/icons/IconArrowUp.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/IconArrowUp.vue.d.ts.map

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

package/dist/components/atoms/icons/IconCardView.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/IconCardView.vue.d.ts.map

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

package/dist/components/atoms/icons/IconEdit.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/IconEdit.vue.d.ts.map

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

package/dist/components/atoms/icons/IconListView.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/IconListView.vue.d.ts.map

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

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

@@ -1,22 +1,28 @@
-import IconCheck from "./IconCheck.vue";
-import IconError from "./IconError.vue";
+import IconAcademy from "./IconAcademy.vue";
+import IconArrowDown from "./IconArrowDown.vue";
+import IconArrowUp from "./IconArrowUp.vue";
 import IconAttachment from "./IconAttachment.vue";
+import IconBold from "./IconBold.vue";
+import IconBulletList from "./IconBulletList.vue";
 import IconCalendar from "./IconCalendar.vue";
-import IconInfo from "./IconInfo.vue";
-import IconRemove from "./IconRemove.vue";
-import IconFile from "./IconFile.vue";
+import IconCardView from "./IconCardView.vue";
 import IconCaretDown from "./IconCaretDown.vue";
-import IconCaretRight from "./IconCaretRight.vue";
 import IconCaretLeft from "./IconCaretLeft.vue";
+import IconCaretRight from "./IconCaretRight.vue";
+import IconCheck from "./IconCheck.vue";
 import IconClose from "./IconClose.vue";
-import IconItalic from "./IconItalic.vue";
-import IconBold from "./IconBold.vue";
-import IconUnderline from "./IconUnderline.vue";
-import IconBulletList from "./IconBulletList.vue";
-import IconOrderedList from "./IconOrderedList.vue";
-import IconHyperlink from "./IconHyperlink.vue";
 import IconDownloadImage from "./IconDownloadImage.vue";
-import IconMenu from "./IconMenu.vue";
+import IconEdit from "./IconEdit.vue";
+import IconError from "./IconError.vue";
 import IconEyeShow from "./IconEyeShow.vue";
 import IconEyeSlash from "./IconEyeSlash.vue";
-export { IconAttachment, IconCheck, IconError, IconInfo, IconRemove, IconFile, IconCaretDown, IconCaretRight, IconCaretLeft, IconClose, IconItalic, IconBold, IconUnderline, IconBulletList, IconOrderedList, IconHyperlink, IconCalendar, IconDownloadImage, IconMenu, IconEyeShow, IconEyeSlash };
+import IconFile from "./IconFile.vue";
+import IconHyperlink from "./IconHyperlink.vue";
+import IconInfo from "./IconInfo.vue";
+import IconItalic from "./IconItalic.vue";
+import IconListView from "./IconListView.vue";
+import IconMenu from "./IconMenu.vue";
+import IconOrderedList from "./IconOrderedList.vue";
+import IconRemove from "./IconRemove.vue";
+import IconUnderline from "./IconUnderline.vue";
+export { IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconUnderline, };

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

@@ -0,0 +1,29 @@
+import type { PropType as __PropType } from 'vue';
+import type { BDLinkProps } from '../../../interfaces/BDLinkProps';
+declare const _sfc_main: import("vue").DefineComponent<{
+    active: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        default: undefined;
+    };
+    options: {
+        type: __PropType<BDLinkProps[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("signout" | "hide")[], "signout" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        default: undefined;
+    };
+    options: {
+        type: __PropType<BDLinkProps[]>;
+        required: true;
+    };
+}>> & {
+    onSignout?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
+}, {
+    active: boolean | undefined;
+}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1 @@
+{"version":3,"file":"BDMobileMenu.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/BDMobileMenu/BDMobileMenu.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,+GAA+G,CAAC;AACtI,cAAc,+GAA+G,CAAC;AAC9H,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,58 @@
+import type { PropType as __PropType } from 'vue';
+import type { BDLinkProps } from '../../../interfaces/BDLinkProps';
+import type { bootstrapSizes } from '../../../types/BootstrapSizes';
+declare const _sfc_main: import("vue").DefineComponent<{
+    dropdownMenuTitle: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    dropdownOptions: {
+        type: __PropType<BDLinkProps[] | undefined>;
+        required: false;
+    };
+    headerOptions: {
+        type: __PropType<BDLinkProps[] | undefined>;
+        required: false;
+    };
+    src: {
+        type: __PropType<string | null | undefined>;
+        required: false;
+    };
+    profileImageAlt: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    profileImageSize: {
+        type: __PropType<bootstrapSizes | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "signout")[], "click" | "signout", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dropdownMenuTitle: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    dropdownOptions: {
+        type: __PropType<BDLinkProps[] | undefined>;
+        required: false;
+    };
+    headerOptions: {
+        type: __PropType<BDLinkProps[] | undefined>;
+        required: false;
+    };
+    src: {
+        type: __PropType<string | null | undefined>;
+        required: false;
+    };
+    profileImageAlt: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    profileImageSize: {
+        type: __PropType<bootstrapSizes | undefined>;
+        required: false;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onSignout?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _sfc_main;

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

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

package/dist/directives/BDTooltip.d.ts

@@ -0,0 +1,3 @@
+export declare const vBdTooltip: {
+    mounted: (element: Element) => 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, IconDownloadImage, IconMenu, IconEyeShow, IconEyeSlash } from "./components/atoms/icons/index";
+import { IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, IconDownloadImage, IconMenu, IconEdit, IconCardView, IconListView, IconEyeShow, IconEyeSlash } 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";
@@ -23,12 +23,15 @@ import BDToast from "./components/atoms/BDToast/BDToast.vue";
 import BDDropdownItem from "./components/molecules/BDDropdownItem/BDDropdownItem.vue";
 import BDDropzone from "./components/molecules/BDDropzone/BDDropzone.vue";
 import BDMarkdownEditor from "./components/molecules/BDMarkdownEditor/BDMarkdownEditor.vue";
+import BDMobileMenu from "./components/molecules/BDMobileMenu/BDMobileMenu.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 BDChatCloud from "./components/molecules/BDChatCloud/BDChatCloud.vue";
 import BDDropdown from "./components/organisms/BDDropdown/BDDropdown.vue";
+import BDHeader from "./components/organisms/BDHeader/BDHeader.vue";
 import BDModal from "./components/organisms/BDModal/BDModal.vue";
 import { useModal } from "./composables/useModal";
 import { useToaster } from "./composables/useToaster";
-export { BDChatCloud, 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, IconEyeShow, IconEyeSlash, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, IconDownloadImage, BDImageAttachmentPreviewList, IconMenu, useModal, useToaster, };
+import { vBdTooltip } from "./directives/BDTooltip";
+export { BDChatCloud, BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, BDImageAttachmentPreviewList, BDHeader, BDMobileMenu, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconUnderline, useModal, useToaster, vBdTooltip, };

package/dist/scss/_header.scss

@@ -0,0 +1,106 @@
+.header-navbar {
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 15px;
+    background-color: white;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000; 
+
+    .bd-hamburger {
+        display: none;
+        font-size: 	.9375rem;
+        font-family: $font-secondary;
+        align-items: center;
+        width: 58px;
+        justify-content: space-between;
+        font-weight: $font-bold;
+        cursor: pointer;
+        user-select: none;
+
+        .icon-menu {
+            width: 14px;
+            font-weight: 900;
+        }
+    }
+      
+    .bd-logo {
+        cursor: pointer;
+        width: 169px;
+    }
+
+    // css verwijderen als variant button is opgenomen BDButton
+    .btn-header {
+        color: #394156;
+        background-color: transparent;
+        font-weight: 400;
+        border-radius: 24px;
+        padding-left: 16px;
+        padding-right: 16px;
+        text-decoration: none;
+        margin: 0px 4px;
+
+        &.router-link-active {
+            background-color: #f1f2f4;
+        }
+    }
+
+    .bd-btn-settings {
+        height: 56px;
+        user-select: none;
+
+        .bd-profile-picture {
+            width: 40px;
+            height: 40px;
+        }
+
+        .bd-dropdown.dropdown {
+            height: 100%;
+
+            .dropdown-toggle {
+                height: 100%;
+                margin-right: 0px;
+                text-decoration: none;
+                font-weight: $font-medium;
+                font-family: $headings-font-family;
+
+                span {
+                    white-space: nowrap;
+                    overflow-x: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 250px;
+                    letter-spacing: 0;
+                }
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .dropdown-menu {
+                margin-top: 0px;
+
+                .dropdown-item:active {
+                    color: var(--bs-dropdown-link-color);
+                }
+            }
+        }
+    }
+
+    @media (max-width: map-get($grid-breakpoints, md)) {
+        .bd-hamburger {
+            display: flex;
+        }
+
+        .bd-logo {
+            width: 134px;
+        }
+
+        .bd-btn-settings, .btn-header {
+            display: none !important;
+        }
+    }
+}

package/dist/scss/_mobile-menu.scss

@@ -0,0 +1,83 @@
+.bd-mobile-menu {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0px;
+    right: -100%;
+    background: #fff;
+    z-index: 1000;
+    animation-duration: .5s;
+    padding: 0px 30px;
+    user-select: none;
+    display: none;
+
+    &.inactive {
+        animation-name: slideout;
+    }
+
+    &.active {
+        animation-name: slidein;
+        right: 0px;
+    }
+
+    .header {
+        height: 66px;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid $color-lightblue;
+        color: $color-blue;
+        font-family: $font-secondary;
+        font-weight: $font-bold;
+        font-size: 1rem;
+
+        .icon-close-wrapper {
+            width: 44px;
+            height: 66px;
+            cursor: pointer;
+            display: flex;
+            justify-content: right;
+            align-items: center;
+
+            .icon-close {
+                fill: $color-blue;
+            }
+        }
+    }
+
+    .navbar {
+        padding: 0px;
+
+        .nav-item {
+            border-bottom: 1px solid $color-lightblue;
+            font-size: 1rem;
+        }
+    }
+}
+
+@keyframes slidein {
+    from {
+        right: -100%;
+    }
+
+    to {
+        right: 0px;
+    }
+}
+
+@keyframes slideout {
+    from {
+        right: 0px;
+    }
+
+    to {
+        right: -100%;
+    }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)) {
+    .bd-mobile-menu {
+        display: block;
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.21.0",
+    "version": "0.22.0",
     "author": "Ralph van der Neut <rvanderneut@beterdichtbij.nl>",
     "type": "module",
     "files": [