@everchron/ec-shards 0.7.48 → 0.7.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.7.48",
+  "version": "0.7.51",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/assets/icons/clipboard.svg

@@ -0,0 +1,8 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M10.6667 6.33335L12.075 4.57294C12.2808 4.31619 12.5917 4.16669 12.9211 4.16669H17.08C17.4093 4.16669 17.7202 4.31619 17.9261 4.57294L19.3333 6.33335V7.41669C19.3333 8.01469 18.848 8.50002 18.25 8.50002H11.75C11.152 8.50002 10.6667 8.01469 10.6667 7.41669V6.33335Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M23.6667 14V8.49998C23.6667 7.3029 22.6971 6.33331 21.5 6.33331H19.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M10.6667 6.33331H8.50001C7.30293 6.33331 6.33334 7.3029 6.33334 8.49998V22.5833C6.33334 23.7804 7.30293 24.75 8.50001 24.75H11.75H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M10.6667 12.9167H19.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M10.6667 17.3333H12.8333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<rect vector-effect="non-scaling-stroke" x="17" y="17" width="8" height="9" rx="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/button-more/button-more.vue

@@ -5,7 +5,7 @@
             ]"
     @click="$emit('click', $event)">
 
-    <ecs-icon v-if="type == 'ellipsis'" type="more" width="20" height="20" />
+    <ecs-icon v-if="type == 'ellipsis'" type="more" width="20" height="20" color="#FFF" />
     <slot></slot>
   </button>
 </template>

package/src/components/index.js

@@ -55,6 +55,7 @@ import EcsJumperIndex from "./jumper-index/jumper-index.vue"
 import EcsJumperPage from "./jumper-page/jumper-page.vue"
 import EcsLayoutIndex from "./layout-index/layout-index.vue"
 import EcsLayoutDirectory from "./layout-directory/layout-directory.vue"
+import EcsLayoutDataTable from "./layout-data-table/layout-data-table.vue"
 import EcsMap from "./map/map.vue"
 import EcsModal from "./modal/modal.vue"
 import EcsModalHeader from "./modal-header/modal-header.vue"
@@ -160,6 +161,7 @@ const Components = {
   EcsJumperPage,
   EcsLayoutIndex,
   EcsLayoutDirectory,
+  EcsLayoutDataTable,
   EcsMap,
   EcsModal,
   EcsModalHeader,

package/src/components/input/input.vue

@@ -19,7 +19,7 @@
       error ? 'ecs-form-control-error' : null
     ]"
     v-bind="$attrs"
-    :min="min"
+    :min="min" :max="max" :step="step" 
     :ref="refr"
     :id="refr"
   />
@@ -36,7 +36,6 @@
     :class="[
       sizeClass,
       formatClass,
-      cssClass,
       subtle ? 'ecs-form-control-subtle' : null,
       error ? 'ecs-form-control-error' : null
     ]"
@@ -97,9 +96,10 @@
         type: Boolean,
         default: false
       },
-      cssClass: String,
       refr: String,
-      min: Number
+      min: Number,
+      max: Number,
+      step: Number
     },
 
     computed: {
@@ -122,7 +122,7 @@
 @import "../tokens/tokens";
 @import "../mixins/svg-uri";
 
-.ecs-form-control {
+.ecs-form-control{
   display: block;
   width: 100%;
   padding: $input-padding-y $input-padding-x;
@@ -197,4 +197,8 @@
     font-family: $sf;
   }
 }
+
+textarea.ecs-form-control{
+  resize: vertical;
+}
 </style>

package/src/components/layout-data-table/layout-data-table.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="ecs-data-layout">
+    <div class="ecs-data-layout-content">
+      <div v-if="$slots.toolbar" class="ecs-data-layout-toolbar">
+        <slot name="toolbar"></slot>
+      </div>
+
+      <ecs-action-toolbar v-if="$slots.actionbar" v-show="showActionbar">
+        <slot name="actionbar"></slot>
+      </ecs-action-toolbar>
+
+      <div class="ecs-data-layout-data">
+        <slot></slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.sidebarcontent || $slots.sidebarheader" class="ecs-data-layout-sidebar" :class="sidebarExpanded ? 'expanded' : ''">
+      <div class="ecs-data-layout-sidebar-inner">
+        <div v-if="$slots.sidebarheader" class="ecs-data-layout-sidebar-header">
+          <slot name="sidebarheader"></slot>
+        </div>
+
+        <div class="ecs-data-layout-sidebar-content scrollbar scrollbar-sml">
+          <slot name="sidebarcontent"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsActionToolbar from '../action-toolbar/action-toolbar'
+
+  export default {
+    components: { EcsActionToolbar },
+
+    props: {
+      sidebarExpanded: {
+        type: Boolean,
+        default: false
+      },
+      showActionbar: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+$bar-height: 41px;
+
+.ecs-data-layout{
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background: #FFF;
+  overflow: hidden;
+
+  &-toolbar{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 12px;
+    background: #FFF;
+    height: $bar-height;
+    border-bottom: 1px solid $gray-3;
+    position: relative;
+    z-index: 3;
+  }
+
+  &-content{
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    transition: .4s;
+  }
+
+  &-data{
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &-sidebar{
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
+    height: 100%;
+    background: #FFF;
+    border-left: 1px solid #FFF;
+    transition: .4s;
+
+    &.expanded{
+      min-width: 320px;
+      width: 25%;
+      max-width: 500px;
+      border-left-color: $gray-3;
+
+      .ecs-data-layout-sidebar-inner{
+        opacity: 1;
+      }
+    }
+
+    &-inner{
+      width: 100%;
+      min-width: 320px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      transition: .5s;
+      opacity: 0;
+    }
+
+    &-header{
+      height: $bar-height;
+      flex-shrink: 0;
+      border-bottom: 1px solid $gray-3;
+      display: flex;
+      align-items: center;
+      padding: 0 16px 0 20px;
+    }
+
+    &-content{
+      flex: 1;
+      padding: 20px;
+      overflow: auto;
+    }
+  }
+}
+</style>

package/src/components/modal-header/modal-header.vue

@@ -72,6 +72,7 @@
   }
 
   &-close{
+    cursor: pointer;
     width: 40px;
     height: 40px;
     border-radius: 3px;

package/src/components/segment/segment.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-segments" :class="[inline ? 'ecs-segments-inline' : '']">
     <label v-for="option in options" :key="option.id" :for="option.id">
-      <input type="radio" :name="name" :value="option.id" :id="option.id" :checked="value==option.id" @click="$emit('click', option.id)"><!-- v-model="selectedSegmentId" -->
+      <input type="radio" :name="name" :value="option.id" :id="option.id" :checked="value==option.id" :disabled="option.disabled" @click="$emit('click', option.id)">
       <span class="ecs-segment" :title="option.title">
         <ecs-icon v-if="option.icon" :class="[option.icon && option.label ? 'icon-spacing' : '']" :type="option.icon" width="20" height="20" color="#2F333C" />
         {{ option.label }}

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

@@ -47,8 +47,8 @@ Use the EcsInputAddon component to add a prefix to an EcsInput. Prefixes can con
   <ecs-input />
 </ecs-input-group>
 <ecs-input-group>
-  <ecs-input-addon icon="link" />
   <ecs-input />
+  <ecs-input-addon>Suffix</ecs-input-addon>
 </ecs-input-group>
 ```
 
@@ -119,4 +119,4 @@ Use the EcsInputClear component to add an input clear button.
 
 ### Input Clear Button 
 
-<ArgsTable of={EcsInputClear} />
+<ArgsTable of={EcsInputClear} />

package/src/stories/layout-data-table/layout-data-table.stories.js

@@ -0,0 +1,19 @@
+import EcsLayoutDataTable from '@components/layout-data-table/layout-data-table';
+
+export default {
+  title: 'Layouts/Data Table',
+  component: EcsLayoutDataTable
+};
+
+export const dataTable = () => ({
+  components: { EcsLayoutDataTable },
+  template: `<ecs-layout-data-table sidebar-expanded>
+              <template slot="toolbar">toolbar</template>
+              <template slot="actionbar">actionbar</template>
+
+              table
+
+              <template slot="sidebarheader">sidebarheader</template>
+              <template slot="sidebarcontent">sidebar</template>
+            </ecs-layout-data-table>`,
+});

package/src/stories/layout-data-table/layout-data-table.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsLayoutDataTable from '@components/layout-data-table/layout-data-table';
+import * as stories from './layout-data-table.stories.js';
+
+<Meta
+  title="Layouts/Data Table"
+  component={EcsLayoutDataTable} />
+
+# Data Table `EcsLayoutDataTable`
+
+The data table layout is commonly used in App Settings pages. It always features a larger content area (which is most of the time filled by a full width data table component) and an optional sidebar that can expand or collapse.
+
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Data Table" height="900px">
+    {stories.dataTable()}
+  </Story>
+</Canvas>
+
+
+```js
+<ecs-layout-data-table sidebar-expanded>
+  <template slot="toolbar">toolbar</template>
+  <template slot="actionbar">actionbar</template>
+
+  table
+
+  <template slot="sidebarheader">sidebarheader</template>
+  <template slot="sidebarcontent">sidebar</template>
+</ecs-layout-data-table>
+```
+
+
+## Props and Slots
+
+<ArgsTable of={EcsLayoutDataTable} />

package/src/stories/segment/segment.stories.js

@@ -12,7 +12,7 @@ export const segment = () => ({
       options: [
         { label: 'Orange', id: 'orange' },
         { label: 'Apple', id: 'apple' },
-        { label: 'Grapefruit', id: 'grapefruit' }
+        { label: 'Grapefruit', id: 'grapefruit', disabled: true }
       ],
       value: "orange",
     }

package/src/stories/segment/segment.stories.mdx

@@ -20,7 +20,7 @@ The segment control is a visual alternative to radiobutton group.
 options: [
   { label: 'Orange', id: 'orange' },
   { label: 'Apple', id: 'apple' },
-  { label: 'Grapefruit', id: 'grapefruit' }
+  { label: 'Grapefruit', id: 'grapefruit', disabled: true }
 ]
 
 <ecs-segment :options="options" :value="value" name="fruits"></ecs-segment>