@everchron/ec-shards 0.8.31 → 1.0.2

package/src/stories/formatted/formatted.stories.mdx

@@ -1,88 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsFormatted from '@components/formatted/formatted';
-import * as stories from './formatted.stories.js';
-
-<Meta
-  title="Typography/Formatted Text"
-  component={EcsFormatted} />
-
-# Formatted Text `EcsFormatted`
-
-Block of formatted text with basic html support. Used for markdown supported user inputs, comments and rich text content areas.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Formatted Text" height="300px">
-    {stories.formattedText()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-formatted>
-  <p>Non-euclidean
-  <b>tentacles</b>
-  cat
-  <i>antiquarian</i>.
-  <u>Spectral</u>
-  nameless mortal
-  <a href="https://everchron.com" target="_blank" rel="noopener noreferrer">tenebrous</a>
-  indescribable
-  <a href="https://google.com" target="_blank" rel="noopener noreferrer">unnamable</a>
-  blasphemous. Gibbering gambrel non-euclidean stygian loathsome noisome spectral eldritch. Abnormal antediluvian decadent unutterable.</p>
-  <blockquote>Non-euclidean tentacles cat antiquarian. Spectral nameless mortal tenebrous indescribable unnamable blasphemous. Gibbering gambrel non-euclidean stygian loathsome noisome spectral eldritch. Abnormal antediluvian decadent unutterable.</blockquote>
-  <p>Non-euclidean tentacles cat antiquarian. Spectral nameless mortal tenebrous indescribable unnamable blasphemous. Gibbering gambrel non-euclidean stygian loathsome noisome spectral eldritch. Abnormal antediluvian decadent unutterable.<br></p>
-  <ul>
-  <li>This is an unordered list item<br></li>
-  <li>This is an unordered list items<br></li>
-  <li>This is an unordered list item<br></li>
-  </ul>
-  <p>Non-euclidean tentacles cat antiquarian. Spectral nameless mortal tenebrous indescribable unnamable blasphemous. Gibbering gambrel non-euclidean stygian loathsome noisome spectral eldritch. Abnormal antediluvian decadent unutterable.</p>
-  <ol>
-  <li>This is an ordered list item<br></li>
-  <li>This is an ordered list item<br></li>
-  <li>This is an ordered list item<br></li>
-  </ol>
-</ecs-formatted>
-```
-
-## Smaller
-
-By adding the `small` attribute, the entire text is rendered in a smaller font size.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Formatted Text Small" height="300px">
-    {stories.formattedTextSmall()}
-  </Story>
-</Canvas>
-
-## Loading Formatted Text
-
-Make text appear as a loading skeleton by adding the `loading` attribute. With the `skeleton-count` attribute you can modify the amount of lines.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Formatted Text Loading" height="180px">
-    {stories.formattedTextLoading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-formatted loading :skeleton-count="4">
-  <p>Non-euclidean.</p>
-</ecs-formatted>
-```
-
-## Supported Markup
-
-Currently the following tags can be a part of the formatted component, and should have styling available:
-
-+ `p` Paragraphs
-+ `a` Links
-+ `b` Bold
-+ `i` Italic
-+ `u` Underline
-+ `blockquote` Quote
-+ `ul` Unordered List (style bullet point)
-+ `ol` Ordered List (style decimal)
-
-## Props and Slots
-
-<ArgsTable of={EcsFormatted} />

package/src/stories/icon/icon.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsIcon from '@components/icon/icon';
-import * as stories from './icon.stories.js';
-
-<Meta
-  title="Icons/Icon"
-  component={EcsIcon} />
-
-# Icon `EcsIcon`
-
-Iconography uses symbols to represent an object or an action. They should be used sparingly to provide clarity and reduce cognitive load. To display an icon or glyph use the `<ecs-icon />` tag with the `type` attribute defined. The available list of icons can be found [here](https://github.com/everchron/ec-shards/tree/master/src/assets/icons).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Icon" height="50px">
-    {stories.icon()}
-  </Story>
-</Canvas>
-
-## Colors
-
-The default color for icons is currentColor, which means that an icon will always be rendered in the same color as their nearest parent element with an assigned CSS color property. If you need to overwrite the default inherited color, you can use the `color` attribute with any valid HEX or RGBa color value.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Color" height="50px">
-    {stories.color()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-icon type="edit" color="#2F333C" />
-<ecs-icon type="edit" color="rgba(133,142,158,.9)" />
-<ecs-icon type="edit" color="#157EFB" />
-```
-
-## Sizes
-
-The default size of all icons is 30x30 pixels which should not be changed, unless there is a valid edge case, like extreme limited space situations. The size can be modified by adding the `width` and `height` attributes with an even number as value.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Size" height="50px">
-    {stories.size()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-icon type="edit" width="20" height="20" />
-<ecs-icon type="edit" />
-<ecs-icon type="edit" width="40" height="40" />
-```
-
-## Props
-
-<ArgsTable of={EcsIcon} />

package/src/stories/index-toolbar/index-toolbar.stories.mdx

@@ -1,41 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsIndexToolbar from '@components/index-toolbar/index-toolbar';
-import * as stories from './index-toolbar.stories.js';
-
-<Meta
-  title="Toolbars/Index Toolbar"
-  component={EcsIndexToolbar} />
-
-# Toolbar `EcsIndexToolbar`
-
-The toolbar style used for any primary toolbar on each index view. Each toolbar contains several areas that can be filled up with custom content. The following slots are available for use:
-
-| Slot | Description |
-| ------ | ------ |
-| search-buttons | Search related options, wrapped by a ButtonToolbarGroup (must be ButtonToolbar controls). |
-| search | The search component. |
-| actions-left | Button area for controls on the left side of the action area. |
-| actions-right | Button area for controls on the right side of the action area. |
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Index Toolbar" height="100px">
-    {stories.indexToolbar()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-index-toolbar>
-  <slot name="search-buttons">...</slot>
-  <slot name="search">...</slot>
-  <slot name="actions-left">...</slot>
-  <slot name="actions-right">...</slot>
-</ecs-index-toolbar>
-```
-
-## Search Results
-
-Since EcsIndexToolbar is used to search an manipulate index views of a specific entry type, you can use the `type` prop to describe the entries (eg. "Documents", "Entries", etc.) and the `count` prop for the current results count.
-
-## Props and Slots
-
-<ArgsTable of={EcsIndexToolbar} />

package/src/stories/info-tooltip/info-tooltip.stories.mdx

@@ -1,24 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsInfoTooltip from '@components/info-tooltip/info-tooltip';
-import * as stories from './info-tooltip.stories.js';
-
-<Meta
-  title="Feedback/Info Tooltip"
-  component={EcsInfoTooltip} />
-
-# Info Tooltip `EcsInfoTooltip`
-
-Info tooltips are small icons that provide a helpful hint when hovered. They are mostly used within forms, to explain something when a simple label is not enough, and a help text too much. 
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Info Tooltip" height="200px">
-    {stories.infoTooltip()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-info-tooltip title="Hello, I'm a tooltip." />
-```
-## Props, Slots and Events
-
-<ArgsTable of={EcsInfoTooltip} />

package/src/stories/input/input.stories.mdx

@@ -1,91 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsInput from '@components/input/input';
-import * as stories from './input.stories.js';
-
-<Meta
-  title="Forms/Input"
-  component={EcsInput} />
-
-# Input `EcsInput`
-
-Create various type inputs such as: text, password, number, url, email, search, range, date and more.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input" height="180px">
-    {stories.input()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input placeholder="Enter your name" />
-<ecs-input readonly placeholder="Enter your name" />
-<ecs-input disabled placeholder="Enter your name" />
-```
-
-## Input type
-
-EcsInput defaults to a `text` input, but you can set the type prop to one of the supported native browser HTML5 types: `text` `password` `email` `number` `tel` `url` `search` `range` `color` `date` `time` `datetime` `datetime-local` `month` `week` and `file`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Textarea" height="80px">
-    {stories.inputTextarea()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input type="textarea" placeholder="Enter your name" />
-```
-
-## Sizes
-
-Set heights using the size prop to `xsml` extra small or `sml` for small.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Sizes" height="180px">
-    {stories.inputSizes()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input size="xsml" placeholder="Enter your name" />
-<ecs-input size="sml" placeholder="Enter your name" />
-<ecs-input placeholder="Enter your name" />
-```
-
-## Subtle style
-
-There is an alternative input style available, primarly to be used within EcsDialog, or toolbars. Add the `subtle` prop to turn on the subtle input style.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Subtle" height="140px">
-    {stories.inputSubtle()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input placeholder="Enter your name" />
-<ecs-input subtle placeholder="Enter your name" />
-```
-
-## Formatting
-
-In some cases it might be useful to add some specific formatting to an input. At the moment, only the `id` formatting option is available via the `format` attribute - which should be used for inputs that contain identifiers.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Format" height="140px">
-    {stories.inputFormat()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input placeholder="Enter your name" />
-<ecs-input subtle placeholder="Enter your name" />
-```
-
-## Validation and labels
-
-To extend inputs with validation styles, help and error text, wrap them with the EcsFormGroup component.
-
-## Props and Events
-
-<ArgsTable of={EcsInput} />

package/src/stories/input-float/input-float.stories.mdx

@@ -1,41 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsInputFloat from '@components/input-float/input-float';
-import * as stories from './input-float.stories.js';
-
-<Meta
-  title="Forms/Input Float"
-  component={EcsInputFloat} />
-
-# Input Float `EcsInputFloat`
-
-Floating inputs are a special type of input that has a placeholder, which will transition into a small label on :focus. They are exclusively used on external pages, such as login, register, etc.  Create various type inputs such as: text, password, number, url, email, search, range, date and more.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Float" height="180px">
-    {stories.inputFloat()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input-float label="Email" />
-<ecs-input-float label="Email" disabled placeholder="Enter your name" />
-```
-
-## Sizes
-
-Set height using the size prop to `sml` for small.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Float Sizes" height="180px">
-    {stories.inputFloatsizes()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input-float label="Email" size="sml" class="mb-4" />
-<ecs-input-float label="Email" />
-```
-
-## Props and Events
-
-<ArgsTable of={EcsInputFloat} />

package/src/stories/input-group/input-group.stories.mdx

@@ -1,122 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsInputGroup from '@components/input-group/input-group';
-import EcsInputAddon from '@components/input-addon/input-addon';
-import EcsInputClear from '@components/input-clear/input-clear';
-
-import * as stories from './input-group.stories.js';
-
-<Meta
-  title="Forms/Input Group"
-  component={EcsInputGroup} />
-
-# Input Group `EcsInputGroup`
-
-Input groups are wrappers that allow you to "connect" EcsInput elements with each other, adding a prefix or suffix (EcsInputAddon) to EcsInputs.
-
-## Connector
-
-Use the EcsInputConnector between EcsInput components, to visually connected them. This is useful for range inputs, such as Bates ranges.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Group" height="80px">
-    {stories.inputGroup()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input-group>
-  <ecs-input />
-  <ecs-input-connector />
-  <ecs-input />
-</ecs-input-group>
-```
-
-## Prefixes and Suffixes
-
-Use the EcsInputAddon component to add a prefix to an EcsInput. Prefixes can contain text content, or a specified icon via the `icon` prop.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Addon Text" height="120px">
-    {stories.inputAddonText()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input-group>
-  <ecs-input-addon>Prefix</ecs-input-addon>
-  <ecs-input />
-</ecs-input-group>
-<ecs-input-group>
-  <ecs-input />
-  <ecs-input-addon>Suffix</ecs-input-addon>
-</ecs-input-group>
-```
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Addon Icon" height="120px">
-    {stories.inputAddonIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input-group>
-  <ecs-input-addon icon="link" />
-  <ecs-input />
-</ecs-input-group>
-<ecs-input-group>
-  <ecs-input />
-  <ecs-input-addon icon="link" />
-</ecs-input-group>
-```
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Addon Button" height="120px">
-    {stories.inputAddonButton()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input-group class="mb-4">
-  <ecs-input-addon button>
-    <ecs-button icon-only icon="edit" />
-  </ecs-input-addon>
-  <ecs-input />
-</ecs-input-group>
-<ecs-input-group>
-  <ecs-input />
-  <ecs-input-addon button>
-    <ecs-button icon-only icon="edit" />
-  </ecs-input-addon>
-</ecs-input-group>
-```
-
-## Input Clear Button
-
-Use the EcsInputClear component to add an input clear button.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Input Clear" height="120px">
-    {stories.inputClear()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-input-group single-input>
-  <ecs-input />
-  <ecs-input-clear />
-</ecs-input-group>
-```
-
-## Props and Events
-
-### Input Group 
-
-<ArgsTable of={EcsInputGroup} />
-
-### Input Addon 
-
-<ArgsTable of={EcsInputAddon} />
-
-### Input Clear Button 
-
-<ArgsTable of={EcsInputClear} />

package/src/stories/input-search/input-search.stories.mdx

@@ -1,59 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsInputSearch from '@components/input-search/input-search';
-import * as stories from './input-search.stories.js';
-
-<Meta
-  title="Forms/Search Input"
-  component={EcsInputSearch} />
-
-# Search Input `EcsInputSearch`
-
-The search input is a simple input component that shows a clear button when text has been entered. There are 3 sizes (`size`) available: `sml`, `md`, `lg`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Search Input" height="180px">
-    {stories.searchInput()}
-  </Story>
-</Canvas>
-
-```js
-data() {
-  return {
-    inputValue: '',
-  }
-}
-```
-```js
-computed: {
-  showClear() {
-    return this.inputValue.length > 0;
-  }
-}
-```
-```js
-<ecs-input-search v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." />
-```
-
-## Subtle Variant
-
-A subtle variant of the search input is available by setting the `type` prop to `subtle`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Search Input Subtle" height="180px">
-    {stories.searchInputSubtle()}
-  </Story>
-</Canvas>
-
-## Naked Variant
-
-A naked variant of the search input is available by setting the `type` prop to `naked`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Search Input Naked" height="180px">
-    {stories.searchInputNaked()}
-  </Story>
-</Canvas>
-
-## Props and Events
-
-<ArgsTable of={EcsInputSearch} />

package/src/stories/jumper-document/jumper-document.stories.mdx

@@ -1,41 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsJumperDocument from '@components/jumper-document/jumper-document';
-import * as stories from './jumper-document.stories.js';
-
-<Meta
-  title="Navigation/Jumper Document"
-  component={EcsJumperDocument} />
-
-# Page Jumper `EcsJumperDocument`
-
-The document jumper is a pagination control that is used to navigate through documents or document pages.
-
-## Basic
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Jumper Document" height="80px">
-    {stories.jumperDocument()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-jumper-document :current-entry="1" :total-entries="189" />
-```
-
-## With Inputs Pagination
-
-You can add the current document/page count and the total document/page count to the pagination component by adding the `show-count` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Jumper Document Inputs" height="80px">
-    {stories.jumperDocumentInputs()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-jumper-document :current-entry="2" :total-entries="189" show-count />
-```
-
-## Props and Events
-
-<ArgsTable of={EcsJumperDocument} />

package/src/stories/jumper-index/jumper-index.stories.mdx

@@ -1,55 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsJumperIndex from '@components/jumper-index/jumper-index';
-import * as stories from './jumper-index.stories.js';
-
-<Meta
-  title="Navigation/Jumper Index"
-  component={EcsJumperIndex} />
-
-# Index Jumper `EcsJumperIndex`
-
-The index jumper is a pagination control that is used to navigate through simple lists of data.
-
-## Basic
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Jumper Index" height="80px">
-    {stories.jumperIndex()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-jumper-index :current-count="2" :max-count="12" />
-```
-
-## With Counts
-
-Show the current items count and total item count with the `current-count` and `max-count` props.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Jumper Index Counts" height="80px">
-    {stories.jumperIndexCounts()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-jumper-index show-count :current-count="2" :max-count="12" />
-```
-
-## With Counts Input
-
-Shows a count pagination with editable current page input by adding the `input-pagination` attribute. Requires the `current-count` and `max-count` props to be set as well.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Jumper Index Counts Input" height="80px">
-    {stories.jumperIndexCountsInput()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-jumper-index input-pagination :current-count="1" :max-count="12" />
-```
-
-## Props and Events
-
-<ArgsTable of={EcsJumperIndex} />

package/src/stories/jumper-page/jumper-page.stories.mdx

@@ -1,42 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsJumperPage from '@components/jumper-page/jumper-page';
-import * as stories from './jumper-page.stories.js';
-
-<Meta
-  title="Navigation/Jumper Page"
-  component={EcsJumperPage} />
-
-# Page Jumper `EcsJumperPage`
-
-The page jumper is a pagination control that is used to navigate through pages of a document in the Viewer.
-
-## Basic
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Jumper Page" height="80px">
-    {stories.jumperPage()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-jumper-page :current-page="2" :total-pages="40" />
-```
-
-## Relative Page Count
-
-If the current document is just a part (volume) of a larger document, the page jumper can display the total page count of all volumes.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Jumper Page Relative" height="80px">
-    {stories.jumperPageRelative()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-jumper-page :current-page="2" :total-pages="40" :total-pages-relative="732" />
-```
-
-
-## Props and Events
-
-<ArgsTable of={EcsJumperPage} />