@everchron/ec-shards 0.5.26 → 0.5.30

package/package.json

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

package/src/components/action-toolbar/action-toolbar.vue

@@ -1,21 +1,6 @@
 <template>
   <div class="ecs-action-toolbar" :class="[show ? `show` : '']">
-    <div class="ecs-action-toolbar-selection" v-if="hasSelection">
-      <ecs-checkbox :class="{loading}">
-        <span class="number">{{selected}}</span>
-        <span class="type">Selected {{selectedType}}</span>
-      </ecs-checkbox>
-    </div>
-
-    <span class="divider" v-if="hasSelection"></span>
-
-    <div class="ecs-action-toolbar-actions" v-if="$slots.default">
-      <slot></slot>
-    </div>
-
-    <div class="ecs-action-toolbar-custom" v-if="$slots.custom">
-      <slot name="custom"></slot>
-    </div>
+    <slot></slot>
   </div>
 </template>
 
@@ -62,14 +47,11 @@
   margin-top: -$toolbar_sub_height;
   background: #FFF;
   box-shadow: 0 1px 0 rgba($gray-10, .2);
-  transition: .3s;
-  opacity: 0;
-
-  &.show{
-    margin-top: 0;
-    opacity: 1;
-  }
+}
+</style>
 
+<style lang="scss">
+.ecs-action-toolbar{
   .divider{
     height: 26px;
     width: 1px;
@@ -78,28 +60,6 @@
     background: #E2E3E4;
   }
 
-  &-selection{
-    min-width: 165px;
-    padding-right: 10px;
-
-    .ecs-form-check{
-      margin-bottom: 0;
-    }
-
-    .ecs-form-check-label{
-      font-size: 12px;
-      line-height: 21px;
-    }
-
-    .number{
-      font-weight: 500;
-    }
-
-    .type{
-      color: $gray-10;
-    }
-  }
-
   &-actions{
     display: flex;
     align-items: center;
@@ -108,11 +68,5 @@
       margin: 0 5px;
     }
   }
-
-  &-custom{
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
 }
-</style>
+</style>

package/src/components/button/button.vue

@@ -9,7 +9,8 @@
       fullWidth ? `ecs-button-full-width` : '',
       loading ? `loading` : '',
       iconOnly ? `ecs-button-icon-only` : '']"
-      @click="$emit('click', $event)">
+      @click="$emit('click', $event)"
+      @hover="$emit('hover', $event)">
 
     <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
     <slot></slot>
@@ -25,7 +26,8 @@
       fullWidth ? `ecs-button-full-width` : '',
       loading ? `loading` : '',
       iconOnly ? `ecs-button-icon-only` : '']"
-      @click="$emit('click', $event)">
+      @click="$emit('click', $event)"
+      @hover="$emit('hover', $event)">
 
     <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
     <slot></slot>

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

@@ -1,7 +1,7 @@
 <template>
   <button
     class="ecs-button-table"
-    :class="[ active ? `active` : '', hasLabel ]"
+    :class="[ active ? 'active' : '', hasLabel, subtle ? 'subtle' : '' ]"
     @click="$emit('click', $event)">
 
     <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
@@ -19,6 +19,10 @@
 
     props: {
       active: Boolean,
+      subtle: {
+        type: Boolean,
+        default: false
+      },
       icon: {
         type: String
       },
@@ -65,6 +69,14 @@
     padding: 4px;
   }
 
+  &.subtle{
+    background: transparent;
+
+    &:hover{
+      background: rgba($gray-8, .1);
+    }
+  }
+
   &:hover{
     background: rgba($gray-8, .2);
 

package/src/components/checkbox/checkbox.vue

@@ -1,7 +1,8 @@
 <template>
   <ecs-form-check :class="[
     inline ? `ecs-form-check-inline` : '',
-    disabled ? `disabled` : '']">
+    disabled ? `disabled` : '',
+    $slots.default ? '' : 'stand-alone']">
 
     <input
       class="ecs-form-check-input"
@@ -131,7 +132,7 @@
     width: 18px;
     height: 18px;
     left: 0;
-    top: 2px;
+    top: 0;
     background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><polyline fill="none" stroke="#{$blue-10}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" points="6 9.259 8.347 11.998 12 6"/></svg>');
   }
 

package/src/components/form-check/form-check.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="ecs-form-check"
     :class="[
-      inline ? `ecs-form-check-inline` : '',
-      disabled ? `disabled` : '']">
+      inline ? 'ecs-form-check-inline' : '',
+      disabled ? 'disabled' : '']">
 
     <slot></slot>
   </div>
@@ -30,38 +30,54 @@
 .ecs-form-check {
   position: relative;
   display: block;
+  height: 18px;
   margin-bottom: $form-check-margin-bottom;
+
+  &.stand-alone{
+    margin-bottom: 0;
+    width: 18px;
+  }
+
   &-inline{
     display: inline-block;
     margin-right: 30px;
   }
+
   &.disabled {
     .ecs-form-check-label {
       color: $gray-8;
     }
   }
+
   &.loading{
     .form-check-label{
       opacity: .6;
       cursor: wait;
     }
   }
-  .tooltip-info {
+
+  .ecs-tooltip-info {
     left: 3px;
     top: 3px;
   }
 }
+
 .ecs-form-check-label {
-  padding-left: $form-check-input-gutter;
+  min-width: 18px;
+  height: 18px;
   margin-bottom: 0;
+  padding-left: 30px;
 }
+
 .ecs-form-check-input {
   position: absolute;
   opacity: 0;
+
   & + label {
     position: relative;
     cursor: pointer;
   }
+
   // Box
   & + label:before {
     content: '';
@@ -69,24 +85,27 @@
     vertical-align: text-top;
     position: absolute;
     left: 0;
-    top: 2px;
+    top: 0;
     width: 18px;
     height: 18px;
     background: white;
     border: 1px solid rgba($gray-8, .4);
     border-radius: 2px;
   }
+
   // Box focus
   &:focus + label:before {
     outline: none;
     border-color: rgba($blue-10, .3);
     box-shadow: 0 0 0 2px rgba($blue-10, .2);
   }
+
   // Box checked
   &:checked + label:before {
     background: rgba($blue-10, .07);
     border-color: rgba($blue-10, .3);
   }
+
   // Disabled state label
   &:disabled + label {
     cursor: auto;
@@ -97,7 +116,7 @@
 label{
   display: inline-block;
   font-size: 14px;
-  line-height: 1.6em;
+  line-height: 18px;
   margin-bottom: $form-text-margin-bottom;
   -webkit-user-select: none;
   -moz-user-select: none;

package/src/components/layout-index/layout-index.vue

@@ -86,10 +86,6 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-
-    .ecs-index-layout-table{
-      padding: 5px;
-    }
   }
   
   &-table{

package/src/components/radiobutton/radiobutton.vue

@@ -1,7 +1,8 @@
 <template>
   <ecs-form-check :class="[
     inline ? `ecs-form-check-inline` : '',
-    disabled ? `disabled` : '']">
+    disabled ? `disabled` : '',
+    $slots.default ? '' : 'stand-alone']">
 
     <input
       class="ecs-form-check-input"
@@ -115,16 +116,18 @@
   &[type="radio"] + label:before{
     border-radius: 100%;
   }
+
   &:checked + label:after {
     content: '';
     position: absolute;
   }
+
   &[type="radio"]:checked + label:after{
     border-radius: 100%;
     background: $blue-10;
     width: 6px;
     height: 6px;
-    top: 8px;
+    top: 6px;
     left: 6px;
   }
 }

package/src/components/video/video.vue

@@ -5,10 +5,13 @@
     :loop="loop"
     :controls="controls"
     class="ecs-video"
+    :src="mp4Source"
     >
+    <!--
     <source v-if="webmSource" :src="webmSource" type='video/webm; codecs="vp8, vorbis"' />
     <source v-if="mp4Source" :src="mp4Source" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
     <source v-if="ogvSource" :src="ogvSource" type='video/ogg; codecs="theora, vorbis"' />
+    -->
   </video>
 </template>
 
@@ -31,11 +34,12 @@
         type: Boolean,
         default: true
       },
-      webmSource: {
+      mp4Source: {
         type: String,
         default: null
       },
-      mp4Source: {
+      /*
+      webmSource: {
         type: String,
         default: null
       },
@@ -43,6 +47,7 @@
         type: String,
         default: null
       }
+      */
     }
   }
 </script>

package/src/stories/button-table/button-table.stories.js

@@ -14,3 +14,8 @@ export const iconOnly = () => ({
   components: { EcsButtonTable },
   template: `<ecs-button-table icon="expand" active />`,
 });
+
+export const subtle = () => ({
+  components: { EcsButtonTable },
+  template: `<ecs-button-table icon="person" subtle label="5" />`,
+});

package/src/stories/button-table/button-table.stories.mdx

@@ -33,7 +33,19 @@ Add text (usually a count) by using the `label` attribute. An icon should always
 </Canvas>
 
 ```js
-<ecs-button-table icon="parties"></ecs-button-table>
+<ecs-button-table icon="expand" active />
+```
+
+## Subtle Variant
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="subtle" height="60px">
+    {stories.subtle()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-button-table icon="person" subtle label="5" />
 ```
 
 ## Props and Events

package/src/stories/checkbox/checkbox.stories.js

@@ -15,6 +15,8 @@ export const checkbox = () => ({
     }
   },
   template: `<div>
+              <ecs-checkbox />
+              <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
               <ecs-checkbox v-model="first" name="name">Label</ecs-checkbox>
               <ecs-checkbox v-model="second" name="name">Checked</ecs-checkbox>
               <ecs-checkbox v-model="third" name="name" disabled>Disabled</ecs-checkbox>

package/src/stories/radiobutton/radiobutton.stories.js

@@ -13,6 +13,8 @@ export const radiobutton = () => ({
     }
   },
   template: `<div>
+              <ecs-radiobutton />
+              <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
               <ecs-radiobutton name="fruits" v-model="selected" value="orange">Label</ecs-radiobutton>
               <ecs-radiobutton name="fruits" v-model="selected" value="apple" checked>Checked</ecs-radiobutton>
               <ecs-radiobutton name="fruits" v-model="selected" value="grape" disabled>Disabled</ecs-radiobutton>