@everchron/ec-shards 4.1.2 → 4.3.0

package/src/stories/context-menu/context-menu.stories.js

@@ -0,0 +1,69 @@
+import EcsContextMenu from '@components/context-menu/context-menu';
+import EcsDataGrid from '@components/data-grid/data-grid';
+import EcsDataGridGroup from '@components/data-grid/data-grid-group';
+import EcsDataGridRow from '@components/data-grid/data-grid-row';
+import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
+import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+
+export default {
+  title: 'Data/Context Menu',
+  component: EcsContextMenu
+}
+
+export const contextMenu = () => ({
+  components: { EcsContextMenu, EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%;">
+              <ecs-data-grid :striped="false">
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First" :width="200" />
+                  <ecs-data-grid-head-cell name="Second" :width="200" />
+                  <ecs-data-grid-head-cell name="Third" :width="200" />
+                  <ecs-data-grid-head-cell name="Fourth" :width="200" />
+                </template>
+
+                <ecs-data-grid-row v-for="index in 6" :key="index" mouse-event="contextmenu" @click="(e) => handleClick(e, index)">
+                  <ecs-data-grid-cell column="first" :width="200">Right click me</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :width="200">Right click me</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :width="200">Right click me</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="fourth" :width="200">Right click me</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+
+              <ecs-context-menu
+                element-id="rowMenu"
+                ref="contextMenu"
+                :options="options"
+              ></ecs-context-menu>
+            </div>`,
+  data() {
+    return {
+      options: [
+        {
+          name: 'Duplicate',
+          slug: 'duplicate',
+          icon: 'evidence'
+        },
+        {
+          name: 'Edit',
+          slug: 'edit',
+          icon: 'edit',
+          disabled: true
+        },
+        {
+          type: 'divider',
+        },
+        {
+          name: 'Delete',
+          slug: 'delete',
+          type: 'danger',
+          icon: 'delete'
+        }
+      ],
+    }
+  },
+  methods: {
+    handleClick(event, item) {
+      this.$refs.contextMenu.showMenu(event, item)
+    }
+  },
+})

package/src/stories/data-grid/data-grid.stories.js

@@ -14,15 +14,21 @@ export const grid = () => ({
   template: `<div style="width: 100%; height: 500px">
               <ecs-data-grid :striped="false">
                 <template slot="head">
-                  <ecs-data-grid-head-cell name="First Column" :min-width="200" :width="400" fixed-left fixed-left-last />
-                  <ecs-data-grid-head-cell name="Second Column" :min-width="300" :width="500" />
-                  <ecs-data-grid-head-cell name="Third Column" :min-width="140" :width="200" />
+                  <ecs-data-grid-head-cell name="First-Column" :min-width="140" :width="200" fixed-left resizable/>
+                  <ecs-data-grid-head-cell name="Second-Column" :min-width="140" :width="200" :fixed-left-offset="200" fixed-left/>
+                  <ecs-data-grid-head-cell name="Third-Column" :min-width="140" :width="200" :fixed-left-offset="400" fixed-left resizable/>
+                  <ecs-data-grid-head-cell name="Fourth-Column" :min-width="200" :width="200" :fixed-left-offset="600" fixed-left fixed-left-last />
+                  <ecs-data-grid-head-cell name="Fifth-Column" :min-width="200" :width="300" resizable />
+                  <ecs-data-grid-head-cell name="Sixth-Column" :min-width="140" :width="200" />
                 </template>
 
                 <ecs-data-grid-row v-for="index in 100" :key="index">
-                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
-                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
-                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="first-column" :min-width="140" :width="200" fixed-left>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second-column" :min-width="140" :width="200" :fixed-left-offset="200" fixed-left>Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third-column" :min-width="140" :width="200" :fixed-left-offset="400" fixed-left>Third Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="fourth-column" :min-width="200" :width="200" :fixed-left-offset="600" fixed-left fixed-left-last>Fourth Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="fifth-column" :min-width="200" :width="300">Fifth Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="sixth-column" :min-width="140" :width="200">Sixth Column</ecs-data-grid-cell>
                 </ecs-data-grid-row>
               </ecs-data-grid>
             </div>`,

package/src/stories/fill-icon/fill-icon.stories.js

@@ -0,0 +1,24 @@
+import EcsFillIcon from '@components/fill-icon/fill-icon';
+
+export default {
+  title: 'Icons/Fill Icon',
+  component: EcsFillIcon
+};
+
+export const fillIcon = () => ({
+  components: { EcsFillIcon },
+  template: `<main>
+              <ecs-fill-icon type="login-sso-azure" />
+              <ecs-fill-icon type="login-sso-okta" />
+              <ecs-fill-icon type="login-email" />
+              <ecs-fill-icon type="login-email-mfa" :width="23" />
+            </main>`,
+});
+
+export const fillIconSizes = () => ({
+  components: { EcsFillIcon },
+  template: `<main>
+              <ecs-fill-icon type="login-sso-azure" :width="40" />
+              <ecs-fill-icon type="login-sso-azure" :height="40" :width="40" />
+            </main>`,
+});

package/src/stories/flag/flag.stories.js

@@ -7,5 +7,10 @@ export default {
 
 export const flag = () => ({
   components: { EcsFlag },
-  template: `<ecs-flag code="us" />`,
+  template: `<main>
+              <ecs-flag code="us" />
+              <ecs-flag code="eu" />
+              <ecs-flag code="gb" />
+              <ecs-flag code="au" />
+            </main>`,
 });

package/src/stories/input/input.stories.js

@@ -9,8 +9,8 @@ export const input = () => ({
   components: { EcsInput },
   template: `<div>
               <ecs-input placeholder="Enter your name" class="mb-2" />
-              <ecs-input readonly placeholder="Enter your name" class="mb-2" />
-              <ecs-input disabled placeholder="Enter your name" />
+              <ecs-input readonly value="Readonly" class="mb-2" />
+              <ecs-input disabled value="Disabled" />
             </div>`,
 });
 
@@ -33,8 +33,9 @@ export const inputSizes = () => ({
 export const inputSubtle = () => ({
   components: { EcsInput },
   template: `<div>
-              <ecs-input placeholder="Enter your name" class="mb-2" />
-              <ecs-input subtle placeholder="Enter your name" />
+              <ecs-input subtle placeholder="Enter your name" class="mb-2" />
+              <ecs-input subtle readonly value="Readonly" class="mb-2" />
+              <ecs-input subtle disabled value="Disabled" />
             </div>`,
 });
 

package/src/stories/pagination/pagination.stories.js

@@ -35,18 +35,3 @@ export const tabPagination = () => ({
               </ecs-pagination>
             </div>`,
 });
-
-export const infiniteScroll = () => ({
-  components: { EcsPagination, EcsTabBar, EcsTabButton },
-  template: `<div style="display:flex;flex-direction:column;height: 200px;justify-content: flex-end;">
-              <ecs-pagination type="infinite" :current-page="2" :total-pages="10" loading>
-                <template slot="tabs">
-                  <ecs-tab-bar type="sheet">
-                    <ecs-tab-button show>Settings</ecs-tab-button>
-                    <ecs-tab-button>Calendar</ecs-tab-button>
-                    <ecs-tab-button>Versions</ecs-tab-button>
-                  </ecs-tab-bar>
-                </template>
-              </ecs-pagination>
-            </div>`,
-});

package/src/stories/select/select.stories.js

@@ -89,3 +89,19 @@ export const selectNaked = () => ({
                 </ecs-select>
               </div>`,
 });
+
+export const selectPlaceholders = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select placeholder="Placeholder" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select placeholder="Placeholder" subtle>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});

package/src/stories/separator/separator.stories.js

@@ -0,0 +1,33 @@
+import EcsSeparator from '@components/separator/separator';
+
+export default {
+  title: 'Layout/Separator',
+  component: EcsSeparator
+};
+
+export const separator = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator :margin="20" />
+              <ecs-separator type="vertical" height="24px" />
+            </div>`,
+});
+
+export const separatorStrengths = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator strength="soft" :margin="20" />
+              <ecs-separator strength="medium" :margin="20" />
+              <ecs-separator strength="strong" :margin="20" />
+            </div>`,
+});
+
+export const separatorMargins = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator :margin="20" />
+              <ecs-separator type="vertical" :margin="20" height="24px" />
+              <ecs-separator :margin="[20, 40]" />
+              <ecs-separator type="vertical" :margin="[8, 16, 12, 20]" height="24px" />
+            </div>`,
+});

package/src/components/tiptap/tiptap.vue

@@ -1,246 +0,0 @@
-<template>
-  <div class="ecs-tiptap">
-    <bubble-menu
-      class="ecs-bubble-menu"
-      :tippy-options="{ duration: 100 }"
-      :editor="editor"
-      v-if="editor"
-    >
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" title="Bold">
-        <ecs-icon type="format-bold" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" title="Italic">
-        <ecs-icon type="format-italic" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleUnderline().run()" :class="{ 'is-active': editor.isActive('underline') }" title="Underline">
-        <ecs-icon type="format-underline" width="26px" height="26px" />
-      </button>
-      <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" title="Link">
-        <ecs-icon type="link" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')" title="Remove Link">
-        <ecs-icon type="link-remove" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }" title="Quote">
-        <ecs-icon type="format-blockquote" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }" title="Ordered List">
-        <ecs-icon type="format-ol" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" title="Bullet List">
-        <ecs-icon type="format-ul" width="26px" height="26px" />
-      </button>
-    </bubble-menu>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import EcsIcon from '../icon/icon'
-
-import {
-  Editor,
-  EditorContent,
-  BubbleMenu,
-  FloatingMenu,
-} from '@tiptap/vue-2'
-
-import Underline from '@tiptap/extension-underline'
-import Placeholder from '@tiptap/extension-placeholder'
-import Link from '@tiptap/extension-link'
-import Blockquote from '@tiptap/extension-blockquote'
-import OrderedList from '@tiptap/extension-ordered-list'
-import BulletList from '@tiptap/extension-bullet-list'
-import ListItem from '@tiptap/extension-list-item'
-
-import { defaultExtensions } from '@tiptap/starter-kit'
-
-export default {
-  components: {
-    EcsIcon,
-    EditorContent,
-    BubbleMenu,
-    FloatingMenu
-  },
-
-  props: {
-    placeholder: {
-      type: String,
-      default: 'Write something…'
-    }
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      extensions: [
-        ...defaultExtensions(),
-        Underline,
-        Placeholder.configure({
-          placeholder: this.placeholder,
-        }),
-        Link,
-        Blockquote,
-        OrderedList,
-        BulletList,
-        ListItem,
-      ],
-      content: ``
-    })
-  },
-
-  methods: {
-    setLink() {
-      const url = window.prompt('Enter URL')
-      this.editor.chain().focus().setLink({ href: url }).run()
-    },
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-
-<style lang="scss">
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ProseMirror{
-  font-size: $type-scale-3-font-size;
-  line-height: 1.4em;
-  padding: 10px;
-
-  > *:first-child{
-    margin-top: 0;
-  }
-
-  > *:last-child{
-    margin-bottom: 0;
-  }
-
-  p{
-    margin: 1em 0;
-  }
-
-  i{
-    font-style: italic;
-  }
-
-  u{
-    text-decoration: underline;
-  }
-
-  b, strong{
-    font-weight: 600;
-  }
-
-  ul{
-    list-style-type: disc;
-    padding-left: 16px;
-    margin: 1em 0;
-  }
-
-  ol{
-    padding-left: 16px;
-    margin: 1em 0;
-  }
-
-  ul li, ol li{
-    > *:first-child{
-      margin-top: 0;
-    }
-
-    > *:last-child{
-      margin-bottom: 0;
-    }
-  }
-
-  blockquote{
-    border-left: 3px solid rgba($color-gray-6, .4);
-    color: $color-gray-10;
-    margin: 1em 0;
-    padding-left: 16px;
-  }
-
-  a{
-    color: $color-blue-10;
-    text-decoration: none;
-    transition: .2s;
-
-    &:after{
-      opacity: .7;
-      transition: .2s;
-    }
-
-    &:hover{
-      color: darken($color-blue-10, 5%);
-
-      &:after{
-        opacity: 1;
-      }
-    }
-
-    &[href*="//"]:not([href*="everchron.com"]):after,
-    &[href*="//"]:not([href*="everchron.me"]):after,
-    &[href*="//"]:not([href*="everchron.co.uk"]):after,
-    &[href*="//"]:not([href*="everchron.com.au"]):after,
-    &[href*="//"]:not([href*="everchron.wtf"]):after{
-      content: "";
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="#858E9E" d="M7.625,3.5 C7.524,3.5 7.434,3.459 7.366,3.395 C7.364,3.393 7.361,3.393 7.359,3.391 L6.427,2.458 L4.067,4.818 C3.823,5.061 3.427,5.061 3.183,4.818 C2.939,4.574 2.939,4.178 3.183,3.934 L5.542,1.575 L4.609,0.641 C4.607,0.639 4.607,0.636 4.605,0.634 C4.541,0.566 4.5,0.476 4.5,0.375 C4.5,0.168 4.668,0 4.875,0 L7.5,0 C7.776,0 8,0.224 8,0.5 L8,3.125 C8,3.332 7.832,3.5 7.625,3.5 Z M1,2.25 L1,6.75 C1,6.888 1.112,7 1.25,7 L5.75,7 C5.888,7 6,6.888 6,6.75 L6,4 L7,5 L7,7 C7,7.553 6.553,8 6,8 L1,8 C0.448,8 0,7.553 0,7 L0,2 C0,1.448 0.448,1 1,1 L3,1 L4,2 L1.25,2 C1.112,2 1,2.112 1,2.25 Z"/></svg>');
-      width: 8px;
-      display: inline-block;
-      height: 8px;
-      margin-left: 4px;
-    }
-  }
-}
-
-.ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: $color-gray-6;
-  pointer-events: none;
-  height: 0;
-}
-
-.ecs-bubble-menu {
-  display: flex;
-  align-items: center;
-  background-color: rgba($color-gray-13, .97);
-  padding: 4px;
-  border-radius: $border-radius-medium;
-
-  button {
-    border: none;
-    background: none;
-    color: #FFF;
-    opacity: 0.6;
-    transition: .2s;
-    padding: 0;
-    display: flex;
-    border-radius: $border-radius-small;
-    margin-right: 4px;
-
-    &:last-child{
-      margin-right: 0;
-    }
-
-    &:hover{
-      opacity: .8;
-      background: rgba(#000, .5);
-    }
-
-    &.is-active{
-      opacity: 1;
-      background: rgba(#000, .5);
-    }
-  }
-}
-</style>