@iamproperty/components 3.4.6 → 3.4.7

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;
-    }
-  }
-}

package/assets/sass/components/tables.scss

@@ -1,291 +0,0 @@
-@use "../_func.scss" as *;
-
-// #region Default table
-table {
-  --border-width: 2px;
-  --inner-border-width: 1px;
-  width: 100%;
-  font-size: rem(16);
-  border: none;
-  margin-bottom: rem(32);
-  overflow: auto;
-}
-
-td,th {
-  padding: rem(16) rem(32) rem(16) 0;
-  font-weight: normal;
-  text-align: left;
-  vertical-align: top;
-  border: none;
-  font-size: rem(16);
-  line-height: rem(24);
-  color: var(--colour-body);
-
-  &:first-child {
-    padding-left: rem(8);
-  }
-}
-
-th {
-  font-weight: bold;
-  @include var(color,--colour-heading);
-}
-
-tr {
-  border-bottom: var(--inner-border-width) solid currentColor;
-  @include var(border-color,--colour-border);
-
-  &:last-child {
-    border-bottom: var(--border-width) solid currentColor;
-    @include var(border-color,--colour-border);
-  }
-}
-
-thead {
-  tr:first-child {
-    border-top: var(--border-width) solid currentColor;
-    @include var(border-color,--colour-border);
-  }
-
-  th {
-    font-size: rem(16);
-    line-height: rem(24);
-    padding-bottom: rem(24);
-
-    @include media-breakpoint-up(sm) {
-  
-      font-size: rem(18);
-      white-space: nowrap;
-    }
-
-    font-weight: bold;
-    vertical-align: bottom;
-  }
-}
-
-tbody:first-child{
-  tr:first-child {
-    border-top: var(--border-width) solid currentColor;
-    @include var(border-color,--colour-border);
-  }
-}
-
-.table__wrapper.border-0 table,
-table.border-0 {
-
-  --border-width: 0px;
-  --inner-border-width: 0px;
-}
-
-// #endregion
-
-// #region Table wrapper - Add via JS if needed, provides a safe space to scroll
-.table__wrapper {
-  display: block;
-  width: calc(100% + 1rem);
-  padding-right: 1rem;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
-  margin-bottom: rem(32);
-
-  table {
-    margin-bottom: 0;
-    display: table;
-    overflow: hidden;
-  }
-}
-// #endregion
-
-// #region Tables are only stacked on mobile
-@media screen and (max-width: 36em) {
-  .table__wrapper:not(.table-fullwidth):not(.client-table) {
-
-    overflow: hidden;
-
-    thead {
-      display: none;
-    }
-
-    tbody {
-      display: block;
-      border-top: 2px solid currentColor;
-      @include var(border-color,--colour-border);
-    }
-
-    tr {
-      display: block;
-      position: relative;
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-    }
-
-    td,
-    th {
-      display: block;
-      padding-right: 0;
-      padding-top: 0;
-      padding-left: rem(8);
-
-      &[data-label]:before {
-        content: attr(data-label);
-        color: var(--colour-heading);
-        padding: 0;
-        margin-bottom: 0;
-        display: block;
-        font-weight: bold;
-        margin: 0;
-      }
-    }
-
-    &.table-minify tr:not(:hover) {
-      td:not(:first-child){
-        display: none;
-      }
-    }
-  }
-}
-// #endregion
-
-
-// #region Table striped
-.table-striped tbody tr:nth-of-type(odd) {
-
-  background-color: rgba(0, 0, 0, 0.1);
-
-  .bg-light & {
-
-    @include var(background-color,--colour-white);
-  }
-}
-// #endregion
-
-// #region Table hover
-.table-hover tbody tr {
-  &:hover,
-  &:focus {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-}
-// #endregion
-
-
-// #region Sortable
-[data-sortable] {
-
-  cursor: pointer;
-  position: relative;
-  user-select: none;
-  padding-right: 3.5rem;
-
-  &:hover {
-    color: var(--colour-hover);
-  }
-}
-[data-sortable]:after {
-
-  content: "";
-  position: absolute;
-  top:0;
-  right: 0;
-  width: 3.5rem;
-  height: 4rem;
-  display: block;
-  mask-image: var(--icon-sort);
-  mask-size: 0.6rem 0.8rem;
-  mask-repeat: no-repeat;
-  mask-position: calc(100% - 1.5rem) calc(50% - 0.25rem);
-
-  -webkit-mask-image: var(--icon-sort);
-  -webkit-mask-size: 0.6rem 0.8rem;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: calc(100% - 1.5rem) calc(50% - 0.25rem);
-  background-color: currentColor;
-}
-
-[data-sortable][aria-sort=ascending]:after {
-  --icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath d='M51 1l25 23 24 22H1l25-22z'/%3E%3Cpath opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
-}
-
-[data-sortable][aria-sort=descending]:after {
-  --icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3E%3Cpath d='M51 101l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
-}
-// #endregion
-
-// #region Pagination
-.table__pagination select {
-  max-width: rem(240);
-}
-.table__pagination .showing-input-field {
-  min-width: 4.5rem;
-}
-.table__pagination .page-number {
-  min-width: 7rem;
-}
-// #endregion
-
-// #region Reorderable
-.table-order-reset {
-
-  cursor: pointer;
-  position: relative;
-  width: 1rem;
-
-  &:hover {
-    color: var(--colour-hover);
-  }
-
-  overflow: hidden;
-  text-indent: -200%;
-
-  &:after {
-    content: "#";
-    position: absolute;
-    left: 0.5rem;
-    top: 1rem;
-    text-indent: 0;
-  }
-}
-
-[data-reorder] tr[draggable] {
-  
-  cursor: move;
-
-  &:hover,
-  &:focus {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-
-  &.tr--dragging {
-    background: var(--colour-muted);
-  }
-
-  &.tr--dropable {
-
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-}
-
-// #endregion
-
-
-.note-feed {
-
-  td:last-child {
-    min-width: 20rem;
-
-    /*
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;  
-    overflow: hidden;
-    padding-bottom: 0;
-    margin-bottom: 1rem;
-
-    &:hover {
-
-    -webkit-line-clamp: inherit;
-    }
-    */
-  }
-}

package/assets/ts/modules/modal.ts

@@ -1,91 +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/src/components/CardDeck/CardDeck.spec.js

@@ -1,99 +0,0 @@
-import { mount } from '@vue/test-utils'
-import CardDeck from './/CardDeck.vue'
-import Card from '../../components/Card/Card.vue'
-
-describe('Card Deck component', () => {
-
-  const test = mount(CardDeck, {
-    propsData: {
-      items: [
-        {
-          link: '/components/card-deck',
-          title: 'Card 1',
-          content: `<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages..</p>`
-        },
-        {
-          link: '/components/card-deck',
-          title: 'Card 2',
-          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p>`
-        },
-        {
-          link: '/components/card-deck',
-          title: 'Card 3',
-          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur.</p>`
-        }
-      ]
-    },
-    slots: {
-      default: '<p>Hello</p>',
-      after: '<p>Hello 2</p>'
-    }
-  })
-
-  it('renders the content before the card deck', () => {
-    expect(test.html()).toContain('<p>Hello</p>')
-  })
-
-  it('renders the content after the card deck', () => {
-    expect(test.html()).toContain('<p>Hello 2</p>')
-  })
-
-  it('renders the card title', () => {
-    expect(test.html()).toContain('<span class="card-title d-block h4">Card 1</span>')
-    expect(test.html()).toContain('<span class="card-title d-block h4">Card 2</span>')
-    expect(test.html()).toContain('<span class="card-title d-block h4">Card 3</span>')
-  })
-
-  it('renders the correct number of cards', () => {
-
-    expect(test.findAll('.card').length).toBe(3)
-  })
-})
-
-
-describe('Property Card component', () => {
-
-  const test = mount(CardDeck, {
-    propsData: {
-      items: [
-        {
-          link: '/components/card-deck',
-          content: `<p>Reservation fee applies</p>`,
-          image: 'house.jpg',
-          title: '4 bed semi-detached',
-          subtitle: 'Burt terrace, Newcastle upon tyne',
-          details: {
-            tags: ['Modern method','Freehold'],
-            guideprice: '£90,000.00',
-            auctiontime: '19 days',
-            status: 'Live now',
-            images: 5,
-            videos: 2,
-            logo: 'logo.jpg'
-          }
-        }
-      ]
-    }
-  })
-
-
-  it('renders the property card title', () => {
-    expect(test.html()).toContain('<span class="card-title d-block h4">4 bed semi-detached <span class="d-block fw-normal font-body text-body small">Burt terrace, Newcastle upon tyne</span></span>')
-
-  })
-
-  it('renders the card image', () => {
-
-    expect(test.html()).toContain('<img src="house.jpg" alt="" loading="lazy" class="card-image">')
-  })
-
-  it('renders the card logo', () => {
-
-    expect(test.html()).toContain('<img src="logo.jpg" alt="" loading="lazy" class="card-logo">')
-  })
-
-  it('renders the card tags', () => {
-
-    expect(test.html()).toContain('<span class="badge rounded-pill py-2 px-3 mb-3 me-2 bg-secondary text-primary">Modern method</span>')
-  })
-})

package/src/components/CardDeck/CardDeck.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="container card-deck prevent-invert" :data-card-type="cardtype">
-      <slot></slot>
-      <div :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-        <div class="col" v-for="(value,index) in items" :key="index">
-          <Card v-bind="value" :class="cardclass" :type="cardtype" :btntype="(value.btntype ? value.btntype : btntype )" :titleclass="(value.titleclass ? value.titleclass : titleclass)" :ctatext="value.ctatext" :hidectatext="hidectatext"></Card>
-        </div>
-      </div>
-      <slot name="after"></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/cardDeck.scss";
-</style>
-
-<script>
-import Card from '../Card/Card.vue'
-
-export default {
-  components: {
-    Card
-  },
-  name: 'CardDeck',
-  props: {
-    items: {
-      type: Array,
-      required: false
-    },
-    cols: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    smcols: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    mdcols: {
-      type: Number,
-      required: false,
-      default: 3
-    },
-    gap: {
-      type: Number,
-      required: false,
-      default: 4
-    },
-    cardtype: {
-      type: String,
-      required: false
-    },
-    cardclass: {
-      type: String,
-      required: false
-    },
-    btntype: {
-      type: String,
-      required: false
-    },
-    titleclass: {
-      type: String,
-      required: false
-    },
-    ctatext: {
-      type: String,
-      required: false
-    },
-    hidectatext: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  }
-}
-</script>

package/src/components/CardDeck/README.md

@@ -1,25 +0,0 @@
-### Usage
-
-```
-<CardDeck :items="items"></CardDeck>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| cols  | Number | 1 | Number of columns on mobile |
-| smcols  | Number | 1 | Number of columns on tablet |
-| mdcols  | Number | 3 | Number of columns on desktop |
-| items  | Array | - | Card data passed (See card component) |
-| cardtype | String | - | Change the type of card (simple,quick) |
-| btntype | String | (See card) | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
-| ctatext | String | (See card) | Update the cta text within the button at the bottom of the card |
-| titleclass | String | (See card) | Update the class of the title from being a h2 |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Will display before the cards |
-| after | - | Will display underneath the cards |