@iamproperty/components 3.4.5 → 3.4.7

package/src/components/Tabs/Tabs.vue

@@ -1,17 +1,7 @@
 <template>
-  <div class="container tabs__container" ref="wrapper">
-
-    <input type="radio" class="tab__input" v-for="(value,index) in tabLinks()" :key="index" :data-key="index" :name="value.name" :id="value.id" :checked="(index == 0 ? true:false)" />
-
-    <div class="tabs__links">
-      <label v-for="(value,index) in tabLinks()" :key="index" :for="value.id" class="link" v-on:click="openTab(index)">
-        {{value.tabTitle}}
-      </label>
-    </div>
-    <div class="tabs">
-      <slot></slot>
-    </div>
-  </div>
+  <iam-tabs ref="wrapper">
+    <slot></slot>
+  </iam-tabs>
 </template>
 
 <style lang="scss">
@@ -19,59 +9,13 @@
 </style>
 
 <script>
-export default {
-  name: 'Tabs',
-  data () {
-    return {
-      tabsID: 'tabs_'+Math.random().toString(36).substr(2, 9)
-    }
-  },
-  computed: {
-    tabLinks (){
-      return () => {
-
-        const tabLinks = [];
-        let i = 1;
-
-        for (const [key, value] of Object.entries(this.$slots.default())) {
-
-          // Check if the value in the object is actually a tab and has the correct data
-          if(value.props && value.props.title){
-
-            let tabTitle = value.props.title;
+import iamTabs from '../../../assets/ts/components/tabs/tabs.component'
 
-            let tab = {
-              name: this.tabsID,
-              id: this.tabsID+"_tab"+i++,
-              tabTitle: tabTitle
-            }
+if (!window.customElements.get('iam-tabs'))
+  window.customElements.define('iam-tabs', iamTabs);
 
-            tabLinks.push(tab);
-          }
-        }
 
-        return tabLinks;
-      }
-    }
-  },
-  methods: {
-    openTab: function (index) {
-
-      let i = 0;
-      for (const [key, value] of Object.entries(this.$slots.default())) {
-
-        if(value.props && value.props.title){
-
-          if(i == index){
-
-            console.log(value)
-            value.type.data().show = true;
-          }
-
-          i++;
-        }
-      }
-    }
-  }
+export default {
+  name: 'Tabs'
 }
 </script>

package/src/foundations/YoutubeVideo/YoutubeVideo.vue

@@ -10,7 +10,7 @@
 import youtubeVideo from '../../../assets/ts/modules/youtubevideo'
 
 export default {
-  name: 'YoutuveVideo',
+  name: 'YoutubeVideo',
   props: {
     video: {
       type: String,

package/src/index.js

@@ -10,13 +10,11 @@ export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as AccordionItem } from './components/Accordion/AccordionItem.vue'
 export { default as Banner } from './components/Banner/Banner.vue'
 export { default as Card } from './components/Card/Card.vue'
-export { default as CardDeck } from './components/CardDeck/CardDeck.vue'
 export { default as Carousel } from './components/Carousel/Carousel.vue'
 export { default as Header } from './components/Header/Header.vue'
 export { default as Testimonial } from './components/Testimonial/Testimonial.vue'
 export { default as PropertySearchbar } from './components/PropertySearchbar/PropertySearchbar.vue'
 export { default as Nav } from './components/Nav/Nav.vue'
-export { default as Modal } from './components/Modal/Modal.vue'
 
 export { default as Stepper } from './components/Stepper/Stepper.vue'
 export { default as Step } from './components/Stepper/Step.vue'
@@ -24,3 +22,6 @@ export { default as Tabs } from './components/Tabs/Tabs.vue'
 export { default as Tab } from './components/Tabs/Tab.vue'
 export { default as Alert } from './components/Alert/Alert.vue'
 export { default as NoteFeed } from './components/NoteFeed/NoteFeed.vue'
+
+export { default as AppliedFilters } from './components/AppliedFilters/AppliedFilters.vue'
+export { default as Filterlist } from './components/Filterlist/Filterlist.vue'

package/assets/js/main.js

@@ -1,57 +0,0 @@
-// @ts-nocheck
-// Modules
-import * as helpers from './modules/helpers.js';
-import nav from './modules/nav.js';
-import table from './modules/table.js';
-import accordion from './modules/accordion.js';
-import testimonial from './modules/testimonial.js';
-import carousel from './modules/carousel.js';
-import form from './modules/form.js';
-import youtubeVideo from './modules/youtubevideo.js';
-import modal from './modules/modal.js';
-// Attach classes to dom elements
-document.addEventListener("DOMContentLoaded", function () {
-    helpers.addBodyClasses(document.body);
-    helpers.addGlobalEvents(document.body);
-    helpers.checkElements(document.body);
-    console.log('test.js');
-    // ANav
-    Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
-        nav(arrayElement);
-    });
-    // Advanced tables
-    Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement) => {
-        table(arrayElement);
-    });
-    // Accordions
-    Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement) => {
-        accordion(arrayElement);
-    });
-    // Testimonial
-    Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
-        testimonial(arrayElement);
-    });
-    // Carousel
-    Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement) => {
-        carousel(arrayElement);
-    });
-    // Form
-    Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
-        form(arrayElement);
-    });
-    // Modal
-    Array.from(document.querySelectorAll('.modal')).forEach((arrayElement) => {
-        modal(arrayElement);
-    });
-    // YouTube videos
-    Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
-        new youtubeVideo(arrayElement);
-    });
-    window.addEventListener('hashchange', function () {
-        const hash = location.hash.replace('#', '');
-        const label = document.querySelector(`label[for="${hash}"]`);
-        if (label instanceof HTMLElement) {
-            label.click();
-        }
-    }, false);
-});

package/assets/js/modules/modal.js

@@ -1,69 +0,0 @@
-// @ts-nocheck
-const modal = (element) => {
-    const links = element.querySelectorAll('.modal__outer a, .modal__outer button');
-    const firstLink = links[0];
-    const lastLink = links[links.length - 1];
-    const modalID = element.getAttribute('id');
-    const closeModal = function () {
-        const button = document.querySelector('[href="' + window.location.hash + '"]');
-        button.focus();
-        window.location.hash = "close";
-        history.replaceState("", document.title, window.location.pathname + window.location.search);
-        // If there is more than one video lets make sure there is only one playing at a time.
-        if (typeof window.player != "undefined" && typeof window.player.pauseVideo == "function")
-            window.player.pauseVideo();
-    };
-    // Trap the tab focus inside
-    element.addEventListener('keydown', function (e) {
-        if (e.key === "Tab" && e.shiftKey && document.activeElement == firstLink) {
-            e.preventDefault();
-            lastLink.focus();
-        }
-        else if (e.key === "Tab" && !e.shiftKey && document.activeElement == lastLink) {
-            e.preventDefault();
-            firstLink.focus();
-        }
-    });
-    // ESC will close the open modal
-    document.addEventListener("keydown", function (e) {
-        if (e.key === "Escape" && document.querySelector('.modal:target'))
-            closeModal();
-    });
-    element.addEventListener('click', function (e) {
-        for (var target = e.target; target && target != this; target = target.parentNode) {
-            // Close links will close the model by default but we want to remove the hash link also
-            if (target.matches('[href="#close"]')) {
-                e.preventDefault();
-                closeModal();
-                break;
-            }
-            // Dock the modal to the right or left to make the content behind readable
-            else if (target.matches('.modal__dock--right')) {
-                e.preventDefault();
-                if (!element.classList.contains('modal--left'))
-                    element.classList.add('modal--right');
-                element.classList.remove('modal--left');
-                break;
-            }
-            else if (target.matches('.modal__dock--left')) {
-                e.preventDefault();
-                if (!element.classList.contains('modal--right'))
-                    element.classList.add('modal--left');
-                element.classList.remove('modal--right');
-                break;
-            }
-        }
-    });
-    function locationHashChanged() {
-        if (location.hash === '#' + modalID) {
-            console.log("Modal is now open");
-            const videoButton = document.querySelector('.modal:target .modal__inner > .youtube-embed:first-child:last-child a');
-            console.log(videoButton);
-            if (videoButton) {
-                videoButton.click();
-            }
-        }
-    }
-    window.onhashchange = locationHashChanged;
-};
-export default modal;

package/assets/sass/components/cardDeck.scss

@@ -1,108 +0,0 @@
-@use "../_func" as *;
-
-// #region Card Deck
-.card-deck.container:not([data-card-type="simple"]) {
-
-  padding-bottom: 3rem;
-
-  > .row:first-child {
-    padding-top: 0.5rem;
-  }
-
-  &[class*="bg-"] {
-    padding-bottom: 5rem;
-  }
-}
-// #endregion
-
-// #region Fake container query that transforms the card into a vertical card
-@mixin vertical-card(){
-  .card-header__wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 45.8%;
-    height: 100%;
-    padding: 0;
-  }
-  .card-header__wrapper ~ .card-body,
-  .card-header__wrapper ~ .card-footer {
-    padding-left: calc(45.8% + #{$card-spacer-x + $card-spacer-x});
-  }
-}
-
-@media screen and (min-width: 36em) and (max-width: 61.99em) {
-
-  .card-deck .row-cols-sm-1 {
-    @include vertical-card();
-  }
-}
-
-@include media-breakpoint-up(md) {
-
-  .card-deck:not(.card-deck--featured) .row-cols-md-1 {
-    
-    @include vertical-card();
-  }
-}
-// #endregion
-
-// #region Featured Card deck
-.card-deck--featured {
-
-  > .row > .col:nth-child(4) ~ .col {
-    display: none;
-  }
-
-  > .row > .col:not(:first-child) .card-header__wrapper {
-    display: none;
-  }
-
-  .row-cols-sm-1 > .col:not(:first-child) .card-header__wrapper ~ .card-body {
-    padding-left: 1.5rem;
-  }
-
-  .card-footer {
-    display: none;
-  }
-
-  @include media-breakpoint-up(md) {
-
-    > .row {
-      display: grid;
-      grid-template-columns: 1fr 1fr 41.66666667%; 
-      grid-template-rows: auto auto auto; 
-      gap: var(--gutter-y) var(--gutter-x); 
-      grid-template-areas: 
-        "featured featured card2"
-        "featured featured card3"
-        "featured featured card4";
-      margin-top:0;
-    }
-    > .row > .col:first-child {
-      grid-area: featured;
-    }
-    > .row > .col:not(:first-child) {
-      min-height: 0;
-    }
-
-    > .row > .col:nth-child(2) {
-      grid-area: card2;
-    }
-
-    > .row > .col:nth-child(3) {
-      grid-area: card3;
-    }
-
-    > .row > .col:nth-child(4) {
-      grid-area: card4;
-    }
-
-    > .row > .col {
-      width: 100%;
-      margin-top:0;
-    }
-
-  }
-}
-// #endregion

package/assets/sass/components/modal.scss

@@ -1,136 +0,0 @@
-@use "sass:math";
-@use "../_func" as *;
-
-.modal {
-  display: none;
-}
-
-.modal:target {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,0.25);
-  z-index: var(--index-overlay);
-  border: none;
-  overscroll-behavior: contain;
-
-  > a:first-child {
-      
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width='480' height='80' rx='14'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 8 8, pointer;
-  }
-
-  > button {
-    display: none;
-
-    @include media-breakpoint-up(md) {
-      display: block;
-      position: absolute;
-      z-index: var(--index-focus);
-      top: 50%;
-      transform: translate(0,-50%);
-      overflow: hidden;
-      text-indent: 300%;
-      width: 2rem;
-      height: 2rem;
-
-      &.btn:not(:hover):not(:focus) {
-        background-color: white;
-      }
-
-      &.modal__dock--left {
-        right: calc(50% + #{rem(math.div(820,2))} + 1rem);
-        
-        &:after {
-          transform: rotate(-180deg);
-        }
-      }
-      &.modal__dock--right {
-        left: calc(50% + #{rem(math.div(820,2))} + 1rem);
-      }
-    }
-  }
-
-
-  &.modal--left button.modal__dock--left {
-    display: none;
-  }
-
-  &.modal--left button.modal__dock--right {
-    left: calc(#{rem(640)} + 2rem);
-  }
-
-  &.modal--right button.modal__dock--right {
-    display: none;
-  }
-
-  &.modal--right button.modal__dock--left {
-    right: calc(#{rem(640)} + 2rem);
-  }
-}
-
-
-.modal__outer {
-
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 90%;
-  max-width: rem(820);
-  height: fit-content;
-  max-height: 90%;
-  overflow: visible;
-  transform: translate(-50%,-50%);
-
-  > .btn:first-child {
-    position: absolute;
-    top: 0;
-    right: 0;    
-    margin-top: -0.75rem;
-    margin-right: -0.75rem;
-    z-index: var(--index-focus);
-
-    &:not(:hover):not(:focus):not(:active){
-      background: white;
-    }
-  }
-  @include media-breakpoint-up(md) {
-    .modal--left & {
-      left: 1rem;
-      transform: translate(0,-50%);
-      max-width: 40rem;
-    }
-
-    .modal--right & {
-      left: auto;
-      right: 1rem;
-      transform: translate(0,-50%);
-      max-width: 40rem;
-    }
-  }
-}
-
-.modal__inner {
-  background: white;
-  overscroll-behavior: contain;
-  height: fit-content;
-  max-height: 90vh;
-  overflow: auto;
-
-  & > *:first-child {
-
-    padding: 1rem;
-    @include media-breakpoint-up(sm) {
-
-      padding: 2rem;
-    }
-  }
-}