@everchron/ec-shards 0.5.17 → 0.5.21

package/package.json

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

package/src/components/button/button.vue

@@ -49,7 +49,7 @@
       },
       size: {
         type: String,
-        validator: v => ['sml', 'lg', null].includes(v),
+        validator: v => ['xsml', 'sml', 'lg', null].includes(v),
         default: null
       },
       icon: String,
@@ -80,6 +80,8 @@
         return this.size
       },
       iconSize() {
+        if (this.size == 'xsml')
+          return '20'
         if (this.size == 'sml')
           return '26'
         if (this.size == 'lg')
@@ -138,6 +140,18 @@
     justify-content: center;
   }
 
+  &-xsml{
+    font-size: 12px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 6px;
+
+    &.ecs-button-icon-only{
+      width: 24px;
+      padding: 0;
+    }
+  }
+
   &-sml{
     font-size: 13px;
     height: 30px;

package/src/components/popover-list-item/popover-list-item.vue

@@ -1,7 +1,7 @@
 <template>
   <li>
     <div v-if="type === 'checkbox'" class="ecs-popover-list-item control no-hover">
-      <ecs-checkbox :disabled="disabled">
+      <ecs-checkbox @input="$emit('input', $event)" :disabled="disabled" :value="value" :value-false="valueFalse" :value-true="valueTrue">
         <slot></slot>
       </ecs-checkbox>
     </div>
@@ -13,7 +13,7 @@
     </div>
 
     <div v-else-if="type === 'switch'" class="ecs-popover-list-item control no-hover">
-      <ecs-switch size="sml" :disabled="disabled">
+      <ecs-switch @input="$emit('input', $event)" :value="value" :value-false="valueFalse" :value-true="valueTrue" size="sml" :disabled="disabled">
         <slot></slot>
       </ecs-switch>
     </div>
@@ -139,6 +139,21 @@
       href : {
         type: String,
         default: null
+      },
+      value: {
+        default: null,
+        required: false,
+        type: [Date, Number, String, Boolean]
+      },
+      valueFalse: {
+        default: null,
+        required: false,
+        type: [Date, Number, String, Boolean]
+      },
+      valueTrue: {
+        default: null,
+        required: false,
+        type: [Date, Number, String, Boolean]
       }
     },
 

package/src/components/quicklink/quicklink.vue

@@ -81,7 +81,7 @@
         default: null,
         required: false,
         type: [Date, Number, String, Boolean]
-      },
+      }
     },
 
     computed: {

package/src/components/video/video.vue

@@ -42,7 +42,18 @@
       ogvSource: {
         type: String,
         default: null
-      },
+      }
+    },
+    mounted(){
+      console.log('m:mp4Source', this.mp4Source)
+    },
+    updated(){
+      console.log('u:mp4Source', this.mp4Source)
+    },
+    watch:{
+      mp4Source(){
+        console.log('w:mp4Source', this.mp4Source)
+      }
     }
   }
 </script>

package/src/stories/button/button.stories.js

@@ -22,6 +22,7 @@ export const sizes = () => ({
   components: { EcsButton },
   methods: { action: action('clicked') },
   template: `<main>
+              <ecs-button @click="action" size='xsml' type="primary">Extra Small</ecs-button>
               <ecs-button @click="action" size='sml' type="primary">Small</ecs-button>
               <ecs-button @click="action" type="primary">Default</ecs-button>
               <ecs-button @click="action" size='lg' type="primary">Large</ecs-button>

package/src/stories/button/button.stories.mdx

@@ -34,7 +34,7 @@ By default `<ecs-button>` component will render with `primary` type.
 
 ## Sizing
 
-Fancy larger or smaller buttons? Specify `lg` or `sml` via the `size` prop.
+Fancy larger or smaller buttons? Specify `lg`, `sml`, or `xsml` via the `size` prop.
 <Canvas withSource="none" withToolbar={true}>
   <Story name="Sizes" height="100px">
     {stories.sizes()}