@iamproperty/components 7.7.1--beta14 → 7.7.1--beta16

package/assets/ts/components/table-basic/README.md

@@ -1,40 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/table/table.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-table`))
-    window.customElements.define(`iam-table`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-table class="container">
-  <table>
-    <thead>....</thead>
-    <tbody>...</tbody>
-  </table>
-</iam-tabs>
-```
-
-**Properties**
-
-| Option          | Type             | Default Value | Description                                                                                     |
-| --------------- | ---------------- | ------------- | ----------------------------------------------------------------------------------------------- |
-| data-show       | int              | 15            | Update how many rows can be shown per page                                                      |
-| data-filterby   | string (form ID) |               | Give an optional form ID to connect a form to the table and make it act like a filtering system |
-| data-no-scroll  | flag             | -             | Stops the page from scrolling up to the top of the table                                        |
-| data-expandable | flag             | -             | Adds expandable buttons to rows with will allow for larger paragraphs to be shown correctly     |
-
-_Pagination properties can also be added to the table component so that they can be passed down to the child pagination element._
-
-**Class modifiers**
-
-- Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop).
-- Adding a class of **.table--fullwidth** to the table component will prevent it from becoming a stacked view on mobile.
-- Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.

package/assets/ts/components/tabs/README.md

@@ -1,34 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/tabs/tabs.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-tabs`))
-    window.customElements.define(`iam-tabs`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-tabs class="container">
-  <details>
-    <summary>Tab one</summary>
-    <p>Content one... Any element after summary is within content. First tab is active by default.</p>
-  </details>
-  <details>
-    <summary>Tab two</summary>
-    <p>Content two... </p>
-  </details>
-</iam-tabs>
-```
-
-### Tab Properties
-
-| Option   | Type    | Default Value | Description                                                                |
-| -------- | ------- | ------------- | -------------------------------------------------------------------------- |
-| title    | String  | -             | Used for the heading of the component                                      |
-| disabled | Boolean | -             | Used to apply disabled state for a tab (tab content will not be reachable) |

package/src/components/Accordion/README.md

@@ -1,31 +0,0 @@
-```
-<Accordion>
-  <AccordionItem title="Question 1">
-    <p>Accordion item content</p>
-  </AccordionItem>
-  <AccordionItem title="Question 2">
-    <p>Accordion item content</p>
-  </AccordionItem>
-</Accordion>
-```
-
-### Class modifiers
-
-- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
-- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.
-
-### Accordion item Properties
-
-| Option      | Type    | Default Value | Description                                                                                                                 |
-| ----------- | ------- | ------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| title       | String  | -             | A question or statement                                                                                                     |
-| titlecolour | String  | -             | Apply a colour the the accordion item title                                                                                 |
-| badge       | String  | -             | Add a highlighted badge/tag to the accordion item title                                                                     |
-| badgecolour | String  | light         | Apply a colour the badge                                                                                                    |
-| lazy        | Boolean | -             | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the accordion link. |
-
-### Accordion item Slots
-
-| Option  | Default Value | Description                               |
-| ------- | ------------- | ----------------------------------------- |
-| default | -             | This is the content of the accordion item |

package/src/components/Actionbar/README.md

@@ -1,41 +0,0 @@
-```
-<Actionbar data-selectall data-search>
-
-  <div class="dialog__wrapper">
-    <button class="btn btn-action mb-0 me-0">Quick filter</button>
-    <dialog class="dialog--list">
-      <div class="pb-0">
-        <input type="radio" name="sorta" data-sort="" id="follow-up-oldesta" value="follow-up-oldest">
-        <label for="follow-up-oldesta" class="radio--tick">Option 1</label>
-
-        <input type="radio" name="sorta" data-sort="" id="follow-up-newesta" value="follow-up-newest">
-        <label for="follow-up-newesta" class="radio--tick">Option 2</label>
-
-        <input type="radio" name="sorta" data-sort="" id="date-instructed-oldesta" value="date-instructed-oldest" checked="" autofocus="true">
-        <label for="date-instructed-oldesta" class="radio--tick">Option 3</label>
-
-        <input type="radio" name="sorta" data-sort="" id="date-instructed-newesta" value="date-instructed-newest">
-        <label for="date-instructed-newesta" class="radio--tick mb-0">Option 4</label>
-      </div>
-    </dialog>
-  </div>
-
-  <button class="btn btn-primary btn-sm fa-plus" id="uploadBtn">Upload document</button>
-
-  <button class="btn btn-action fa-pen-to-square" data-single slot="selected">Edit</button>
-  <button class="btn btn-action fa-box-archive" slot="selected">Archive</button>
-  <button class="btn btn-action fa-trash-can" slot="selected">Delete</button>
-  <hr slot="selected" />
-  <button class="btn btn-action" slot="selected">Cancel</button>
-
-</Actionbar>
-```
-
-**Properties**
-
-| Option           | Type   | Default Value | Description                                                                               |
-| ---------------- | ------ | ------------- | ----------------------------------------------------------------------------------------- |
-| data-selectall   | -      | -             | Optional flag to include the select all button                                            |
-| data-search      | -      | -             | Optional flag to include the search button and functionality                              |
-| data-switchviews | -      | -             | Optional flag to include the switch views buttons                                         |
-| data-view        | String | square        | Required if you have the above flag set. Can be set to wither 'square','list' or 'small'. |

package/src/components/AppliedFilters/README.md

@@ -1,5 +0,0 @@
-```
-<AppliedFilters></AppliedFilters>
-```
-
-To add an input to the applied filters an attribute of **data-filter-text** needs to be supplied so that the JavaScript knows to listen for the value to change. This attribute can also be used on a wrapper for mulitple input filters also and dynamic values can also be given. **$value** passes the inputs value as the filter text and **$1,$2,$3...** will pass the corresponding child input value to the text.

package/src/components/Banner/README.md

@@ -1,22 +0,0 @@
-### Usage
-
-```
-<Banner title="The benefits of buying through auction" :image="require('../../assets/shutterstock_1229155495.webp')">
-  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
-  <a href="/buyers-guide" class="btn">Download our buyers guide</a>
-</Banner>
-```
-
-### Properties
-
-| Option     | Type   | Default Value | Description                                         |
-| ---------- | ------ | ------------- | --------------------------------------------------- |
-| title      | String | -             | Required                                            |
-| image      | String | -             | Optional image url to display in the background     |
-| background | String | light         | The background colour can be overwritten if need be |
-
-### Slots
-
-| Option  | Default Value | Description                         |
-| ------- | ------------- | ----------------------------------- |
-| default | -             | Will display underneath the heading |

package/src/components/Card/README.md

@@ -1,24 +0,0 @@
-```
-<a href="/link-url">
-  <Card>Link content</Card>
-</a>
-```
-
-**Note**
-
-The card component needs to be wrapped with a link or a button, this is required to give the card any functionality.
-
-**Properties**
-
-| Option     | Type      | Default Value | Description                                                                |
-| ---------- | --------- | ------------- | -------------------------------------------------------------------------- |
-| data-total | Int       | -             | Optional total number , usually use on the filter card type                |
-| data-image | image url | -             | Optional image url to create a card header with an image as its background |
-
-**Class modifiers**
-
-- Adding a class of **.card--filter** will implement the filter card design.
-- Adding a class of **.card--record** will implement the record card design.
-- Adding a class of **.border-o** will remove the box-shadow of the card and make some minor sizing adjustments.
-- Adding a class like **.colour-warning** will update the colour of the left berder for the card. The theme colours will be avialable to use.
-- Adding a class of **.card--flag** will add a card to the top right corner.

package/src/components/Carousel/README.md

@@ -1,20 +0,0 @@
-### Usage
-
-```
-<Carousel :items="items" type="card"></Carousel>
-```
-
-### Properties
-
-**The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
-
-| Option   | Type   | Default Value | Description                                                                                                                     |
-| -------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| type     | String | -             | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'                               |
-| colclass | String | -             | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
-
-### Slots
-
-| Option  | Default Value | Description                      |
-| ------- | ------------- | -------------------------------- |
-| default | -             | Will display before the carousel |

package/src/components/Chart/README.md

@@ -1,17 +0,0 @@
-### Usage
-
-```
-<Chart :max="100" :min="0" :fields="fields" :items="items" :yaxis="yaxis"></Chart>
-```
-
-### Properties
-
-**The charts props inherit the table props** - As charts are an extension of the tables.
-
-| Option  | Type   | Default Value | Description                                                                                                     |
-| ------- | ------ | ------------- | --------------------------------------------------------------------------------------------------------------- |
-| type    | String | bar           | Changes the type of chart shown (bar, line or pie) or by passing none a table is shown.                         |
-| caption | String | -             | Optional but recommended for accessibility concerns. Describes and summarizes the chart and the data inside it. |
-| max     | Number | -             | Required numeric value to be used to work out the size/position of the chart elements.                          |
-| min     | Number | 0             | Optional (deaults to 0) numeric value to be used to work out the size/position of the chart elements.           |
-| yaxis   | Array  | -             | Array of labels to be shown along the y-axis                                                                    |

package/src/components/CollapsibleSideMenu/README.md

@@ -1,23 +0,0 @@
-```
-<CollapsibleSideMenu data-title="Configuration">
-
-  <div slot="menu">
-    <label for="test1">Active branch</label>
-    <select class="form-select" name="test1" id="test1">
-      <option value="1" selected>Newcastle</option>
-      <option value="2">Two</option>
-      <option value="2">Three</option>
-      <option value="2">Four</option>
-    </select>
-  </div>
-
-  <hr slot="menu"/>
-  <a href="/" slot="menu">Agency settings</a>
-  <a href="/" slot="menu">Control panel</a>
-  <a href="/" slot="menu" class="selected">Contact us</a>
-
-  <h1>Inspections</h1>
-  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 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, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
-
-</CollapsibleSideMenu>
-```

package/src/components/FileUpload/README.md

@@ -1,13 +0,0 @@
-```
-<FileUpload data-maxsize="500"><input type="file" name="files[]" multiple="multiple" accept=".pdf, .csv, .jpg, .png" /></FileUpload>
-```
-
-**Properties**
-
-| Option       | Type | Default Value | Description                                                                  |
-| ------------ | ---- | ------------- | ---------------------------------------------------------------------------- |
-| data-maxsize | Int  | -             | Blocks files from being added that is larger than the max size given in kb's |
-
-**Class modifiers**
-
-- Adding a class of **.fileupload--drag-drop** will add a droppable area for the user to drag files into and drop.

package/src/components/Filterlist/README.md

@@ -1,17 +0,0 @@
-```
-<Filterlist>
-<ul>
-  <li>Olivia Anderson</li>
-  <li>Ethan Ramirez</li>
-  <li>Sophia Patel</li>
-  <li>Noah Jenkins</li>
-  <li>Ava Thompson</li>
-</ul>
-</Filterlist>
-```
-
-**Properties**
-
-| Option          | Type   | Default Value | Description                                                                                                 |
-| --------------- | ------ | ------------- | ----------------------------------------------------------------------------------------------------------- |
-| data-max-height | string | ''            | Optional choice from small, medium or large control of the height of the list. Giving it a scrollable area. |

package/src/components/Header/README.md

@@ -1,27 +0,0 @@
-### Usage
-
-```
-<Header title="Page title" :image="require('../../assets/code.jpeg')">
-  <template v-slot:breadcrumb>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a></li>
-      <li><a href="/top">Top level</a></li>
-    </ul>
-  </template>
-  <p>Page description</p>
-</Header>
-```
-
-### Properties
-
-| Option | Type   | Default Value | Description                                     |
-| ------ | ------ | ------------- | ----------------------------------------------- |
-| title  | String | -             | Required                                        |
-| image  | String | -             | Optional image url to display in the background |
-
-### Slots
-
-| Option     | Default Value | Description                                                 |
-| ---------- | ------------- | ----------------------------------------------------------- |
-| default    | -             | Will display underneath the heading inside of the white box |
-| breadcrumb | -             | An optional space to add a breadcrumb trail list.           |

package/src/components/InlineEdit/README.md

@@ -1,7 +0,0 @@
-```
-<InlineEdit id="inlineEdit" data-autosave>
-  <label >Optional label
-    <input type="text" name="text" value="Placeholder text" />
-  </label>
-</InlineEdit>
-```

package/src/components/Input/README.md

@@ -1,17 +0,0 @@
-```
-<Input id="fieldid" label="Label"></Input>
-```
-
-**Properties**
-
-| Option     | Type   | Default Value | Description                                                                                                                                                       |
-| ---------- | ------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| id         | String | -             | Required                                                                                                                                                          |
-| label      | String | -             | Not required but recommended                                                                                                                                      |
-| labelclass | String | -             | Optional way of adding classes to the label, useful for assigning column class to label when usiong inline input fields.                                          |
-| inputclass | String | -             | Optional way of adding classes to the input field, useful for assigning column class to label when usiong inline input fields.                                    |
-| type       | String | text          | Assign different types to the input fields like number, email and date.                                                                                           |
-| size       | String | -             | Choose from either 'sm' and 'lg'                                                                                                                                  |
-| errormsg   | String | -             | Error message thats shown when the field fails form validation.                                                                                                   |
-| options    | Array  | -             | Used for the select type input field to populate the dropdown. Can also be used to create a datalist when used in conjuction of any other input type than select. |
-| prefix     | String | -             | Display a character or two in front of the input field                                                                                                            |

package/src/components/Marketing/README.md

@@ -1,20 +0,0 @@
-### Usage
-
-```
-<Carousel :items="items" type="card"></Carousel>
-```
-
-### Properties
-
-**The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
-
-| Option   | Type   | Default Value | Description                                                                                                                     |
-| -------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| type     | String | -             | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'                               |
-| colclass | String | -             | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
-
-### Slots
-
-| Option  | Default Value | Description                      |
-| ------- | ------------- | -------------------------------- |
-| default | -             | Will display before the carousel |

package/src/components/Multiselect/README.md

@@ -1,12 +0,0 @@
-```
-<Multiselect>
-  <span class="label" slot="label">Users</span>
-  <label class="tag"><input type="checkbox" name="tags" value="IT James Lambert" />James Lambert</label>
-  <label class="tag"><input type="checkbox" name="tags" value="IT Amanda Knight"/>Amanda Knight</label>
-  <label class="tag"><input type="checkbox" name="tags" value="IT Brian Lord"/>Brian Lord</label>
-  <label class="tag"><input type="checkbox" name="tags" value="Claire Lane"/>Claire Lane</label>
-  <label class="tag"><input type="checkbox" name="tags" value="John Smith"/>John Smith</label>
-  <label class="tag"><input type="checkbox" name="tags" value="James Brown"/>James Brown</label>
-  <label class="tag"><input type="checkbox" name="tags" value="Sarah Brown"/>Sarah Brown</label>
-</Multiselect>
-```

package/src/components/Nav/README.md

@@ -1,42 +0,0 @@
-```
-<nav>
-<Nav>
-  <a href="/" class="brand brand--property" slot="logo">
-    <svg>
-      <title>iamproperty</title>
-      <use xlink:href="/svg/logo.svg#logo-property"></use>
-    </svg>
-  </a>
-
-  <a href="/" class="selected">Lorem ipsum</a>
-  <a href="/">Lorem ipsum</a>
-  <a href="/">Lorem ipsum</a>
-  <a href="/">Lorem ipsum</a>
-
-  <button class="btn btn-primary">Lorem ipsum</button>
-</Nav>
-</nav>
-```
-
-**Properties**
-
-| Option           | Type   | Default Value | Description                                             |
-| ---------------- | ------ | ------------- | ------------------------------------------------------- |
-| data-searcd-open | String | -             | Flag that opens the search bar on desktop on page load. |
-
-**Slots**
-
-| Option    | Default Value | Description                                                                           |
-| --------- | ------------- | ------------------------------------------------------------------------------------- |
-| default   | -             | Populates the main nav area                                                           |
-| logo      | -             | A place to add the logo to the site                                                   |
-| secondary | -             | Moves the link upto the top of the navbar on desktop                                  |
-| actions   | -             | A place to add buttons                                                                |
-| dual      | -             | Plave the link or list to the right of the nav, forcing the default slot to the left. |
-| search    | -             | A place to include a form with search functionality                                   |
-
-**Class modifiers**
-
-- Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background.
-- Adding a class of **.nav--sticky** will add etxra styling to make the navbar stick to the top of the page
-- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.

package/src/components/Nav-old/README.md

@@ -1,22 +0,0 @@
-### Usage
-
-```
-<Nav></Nav>
-```
-
-### Properties
-
-| Option   | Type   | Default Value | Description                                                                    |
-| -------- | ------ | ------------- | ------------------------------------------------------------------------------ |
-| logo     | String | property      | Update which logo is shown                                                     |
-| logotext | String | -             | Optional logo text                                                             |
-| btnlink  | String | -             | Optional button can be added, used mainly for links relating to user accounts. |
-| btntext  | String | -             | Text used within the above button                                              |
-
-### Slots
-
-| Option    | Default Value | Description                                                                                |
-| --------- | ------------- | ------------------------------------------------------------------------------------------ |
-| default   | -             | Populates the main nav area, use a ul.list-unstyled element                                |
-| secondary | -             | Populates the secondary nav area (top bar when on desktop), use a ul.list-unstyled element |
-| search    | -             | Populates the search featured area area                                                    |

package/src/components/NoteFeed/README.md

@@ -1,16 +0,0 @@
-### Usage
-
-```
-<NoteFeed user="User name" :fields="fields" :items="items" :show="3" @formSubmitted="submitForm(...arguments)"></NoteFeed>
-```
-
-### Properties
-
-<p class="note"><strong>Note:</strong> See the tables documentation for the table props which are inherited here</p>
-
-| Option | Type   | Default Value | Description                                                         |
-| ------ | ------ | ------------- | ------------------------------------------------------------------- |
-| user   | String | -             | Required                                                            |
-| title  | String | -             | Optional as we may want to add the title outside of the note feed.  |
-| method | String | post          | Form method of posting the data, post or get                        |
-| action | String |               | Optional URL to submit the form too, not really usefull for Vue JS. |

package/src/components/Notification/README.md

@@ -1,32 +0,0 @@
-```
-<!-- Inline -->
-<Notification data-status="danger" data-dismiss="">
-<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
-</Notification>
-
-<!-- Alert -->
-<Notification data-type="alert" data-status="danger" data-dismiss="">
-<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
-</Notification>
-
-<!-- Toast -->
-<Notification data-type="toast" data-status="danger" data-dismiss="">
-<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
-</Notification>
-
-```
-
-**Properties**
-
-| Option       | Type    | Default Value | Description                                                                                                         |
-| ------------ | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------- |
-| data-status  | String  | info          | Choose from danger,succes and warning. This will change the colour of the notification box and which icon is shown. |
-| data-type    | String  | inline        | Choose from alert and toast. This will change the behavour of the component.                                        |
-| data-dismiss | Boolean | -             | Adds a close button which will remove the alert box after clicking it.                                              |
-| data-timeout | Boolean | -             | Adds a timer for how long the notification will appear.                                                             |
-
-**Slots**
-
-| Option  | Default Value | Description                                 |
-| ------- | ------------- | ------------------------------------------- |
-| default | -             | This is the content of the notification box |

package/src/components/Pagination/README.md

@@ -1,22 +0,0 @@
-```
-<Pagination data-total="12"></Pagination>
-```
-
-**Properties**
-
-| Option            | Type | Default Value | Description                                                                                                  |
-| ----------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------ |
-| data-total        | int  | 0             | The total amount is needed to work out how many pagination buttons are needed                                |
-| data-page         | int  | 1             | Override the current page value                                                                              |
-| data-show         | int  | 15            | Update how many items can be shown per page                                                                  |
-| data-page-minimal | flag | -             | Will display the minimal variant even on mobile                                                              |
-| data-page-jump    | flag | -             | Adds the page jump dropdown on all viewports                                                                 |
-| data-per-page     | flag | -             | Adds the per page dropdown on tablet and desktop viewports (is hidden on tablet if not enough room availble) |
-| data-item-count   | flag | -             | Will add the total count on tablet and desktop viewports                                                     |
-
-**Dispatched events**
-
-| Event       | Dispatched when                                                                     | Details passed        |
-| ----------- | ----------------------------------------------------------------------------------- | --------------------- |
-| update-show | When a user clicks mobile 'Load more' button                                        | { show: $showAmont }  |
-| update-page | When a user changes the page jump select or clicks on the 'Prev' and 'Next' buttons | { page: $pageNumber } |

package/src/components/PropertySearchbar/README.md

@@ -1,25 +0,0 @@
-### Usage
-
-```
-<PropertySearchbar></PropertySearchbar>
-```
-
-### Properties
-
-| Option        | Type   | Default Value             | Description                                      |
-| ------------- | ------ | ------------------------- | ------------------------------------------------ |
-| formAction    | String | -                         | Set where the property search submit the form to |
-| formAction    | String | -                         | Sets how the form is submitted, i.e. post or get |
-| distances     | Array  | See documentation example | Override the default (Not recommened)            |
-| priceMin      | Array  | See documentation example | Override the default (Not recommened)            |
-| priceMax      | Array  | See documentation example | Override the default (Not recommened)            |
-| bedsMin       | Array  | See documentation example | Override the default (Not recommened)            |
-| bedsMax       | Array  | See documentation example | Override the default (Not recommened)            |
-| propertyTypes | Array  | See documentation example | Override the default (Not recommened)            |
-
-### Slots
-
-| Option  | Default Value | Description                                |
-| ------- | ------------- | ------------------------------------------ |
-| default | -             | Will display before the property searchbar |
-| after   | -             | Will display after the property searchbar  |

package/src/components/Search/README.md

@@ -1,11 +0,0 @@
-```
-<Search>
-<label>Search existing transactions
-  <span>
-    <input type="text" name="client" autocomplete="off" aria-autocomplete="none" required />
-    <span class="suffix fa-regular fa-search"></span>
-  </span>
-</label>
-<datalist id="properties"></datalist>
-</Search>
-```

package/src/components/Slider/README.md

@@ -1,11 +0,0 @@
-```
-<label>Input field label <Slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></Slider></label>
-```
-
-**Note**
-
-The slider component is best put inside of a label and wrapped around an input field. The component is there to enhance the input field.
-
-**Properties**
-
-The properties of the slider are reflected by the attributes of the input field. So the min and max used to create the range are taken from the first input inside of the component.

package/src/components/Snapshot/README.md

@@ -1,20 +0,0 @@
-### Usage
-
-```
-<Snapshot :items="items"></Snapshot>
-```
-
-### Properties
-
-| Option        | Type   | Default Value | Description                                                                                     |
-| ------------- | ------ | ------------- | ----------------------------------------------------------------------------------------------- |
-| items         | Array  | -             | Table row data passed                                                                           |
-| - item.title  | String | -             | Title of the snapshot figure                                                                    |
-| - item.bg     | String | -             | Theme colour to highlight the importance of the figure i.e. danger to indicate a high priority. |
-| - item.number | String | -             | The actual figure, recommended to be a single number but could be more i.e. 10 days.            |
-
-### Slots
-
-| Option  | Default Value | Description                            |
-| ------- | ------------- | -------------------------------------- |
-| default | -             | Will display before the snapshot items |

package/src/components/SplitButton/README.md

@@ -1,19 +0,0 @@
-### Usage
-
-```
-
-```
-
-### Properties
-
-| Option | Type   | Default Value | Description |
-| ------ | ------ | ------------- | ----------- |
-|        | String | -             |             |
-|        | String | -             |             |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-|        | -             |             |
-|        | -             |             |