@everchron/ec-shards 0.7.76 → 0.8.1

package/package.json

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

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

@@ -1,5 +1,5 @@
 <template>
-  <button class="ecs-dialog-footer-button" :id="id" :class="[typeClass, loading ? `loading` : '']" @click="$emit('click', $event)">
+  <button class="ecs-dialog-footer-button" :class="[typeClass, loading ? `loading` : '']" @click="$emit('click', $event)">
     <ecs-icon v-if="icon || loading" :type="iconType" />
     <slot></slot>
   </button>
@@ -14,7 +14,6 @@
     },
 
     props: {
-      id: String,
       icon: {
         type: String,
         default: null

package/src/components/collapse/collapse.vue

@@ -16,7 +16,7 @@
     </div>
     
     <div :class="isVisible ? 'collapse-show' : 'collapse-hide'" :id="`collapse-${ this.id }`" class="collapse">
-      <div class="ecs-collapsable-content" :class="[condensed ? 'condensed' : '']">
+      <div class="ecs-collapsable-content" :class="contentPaddingClass">
         <slot></slot>
       </div>
     </div>
@@ -70,9 +70,10 @@ export default {
       type: Boolean,
       default: true
     },
-    condensed: {
-      type: Boolean,
-      default: false
+    contentPadding: {
+      type: String,
+      validator: v => ['none', 'sml', 'md'].includes(v),
+      default: 'md'
     }
   },
 
@@ -101,6 +102,10 @@ export default {
       else if (this.indent && this.indent !== '')
         return `remove-button-indent-${this.indent}`
       return this.headlineIndent
+    },
+
+    contentPaddingClass() {
+      return `ecs-collapsable-content-padding-${this.contentPadding}`
     }
   },
 
@@ -214,16 +219,6 @@ export default {
     }
   }
 
-  &-content{
-    padding-top: 15px;
-    padding-bottom: 25px;
-
-    &.condensed{
-      padding-top: 5px;
-      padding-bottom: 15px;
-    }
-  }
-
   &-indent-md,
   &-headline-indent-md{
     > .wrap .ecs-collapsable-headline{
@@ -267,13 +262,23 @@ export default {
     > .collapse > .ecs-collapsable-content{
       padding-left: 15px;
       padding-right: 15px;
+    }
+  }
+
+  &-content-padding{
+    &-none{
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &-sml{
+      padding-top: 5px;
+      padding-bottom: 15px;
+    }
+
+    &-md{
       padding-top: 10px;
       padding-bottom: 20px;
-
-      &.condensed{
-        padding-top: 5px;
-        padding-bottom: 15px;
-      }
     }
   }
 }

package/src/components/section/section.vue

@@ -15,7 +15,7 @@
     <div class="ecs-section-content"
       :class="[
         title ? '' : 'equal',
-        condensed ? 'condensed' : '',
+        contentPaddingClass
       ]">
       <slot></slot>
     </div>
@@ -47,9 +47,10 @@
       headlineBold: {
         type: Boolean
       },
-      condensed: {
-        type: Boolean,
-        default: false
+      contentPadding: {
+        type: String,
+        validator: v => ['none', 'sml', 'md'].includes(v),
+        default: 'md'
       }
     },
 
@@ -64,6 +65,10 @@
         if (this.headlineIndent && this.headlineIndent !== '')
           return `ecs-section-headline-indent-${this.headlineIndent}`
         return this.headlineIndent
+      },
+
+      contentPaddingClass() {
+        return `ecs-section-content-padding-${this.contentPadding}`
       }
     }
   }
@@ -116,24 +121,6 @@
     align-items: center;
   }
 
-  &-content{
-    padding-top: 15px;
-    padding-bottom: 25px;
-
-    &.equal{
-      padding-top: 25px;
-    }
-
-    &.condensed{
-      padding-top: 5px;
-      padding-bottom: 15px;
-
-      &.equal{
-        padding-top: 15px;
-      }
-    }
-  }
-
   &-indent-md,
   &-headline-indent-md{
     .ecs-section-headline{
@@ -173,20 +160,30 @@
     .ecs-section-content{
       padding-left: 15px;
       padding-right: 15px;
-      padding-top: 10px;
-      padding-bottom: 20px;
+    }
+  }
+
+  &-content-padding{
+    &-none{
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &-sml{
+      padding-top: 5px;
+      padding-bottom: 15px;
 
       &.equal{
-        padding-top: 20px;
+        padding-top: 15px;
       }
+    }
 
-      &.condensed{
-        padding-top: 0;
-        padding-bottom: 10px;
+    &-md{
+      padding-top: 15px;
+      padding-bottom: 25px;
 
-        &.equal{
-          padding-top: 10px;
-        }
+      &.equal{
+        padding-top: 25px;
       }
     }
   }