@everchron/ec-shards 0.6.93 → 0.6.97

package/package.json

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

package/src/components/checkbox/checkbox.vue

@@ -97,13 +97,13 @@
     watch: {
       valueFalse() {
         if (!this.checked) {
-          this.$emit('input', this.valueWhenFalse, this.id)
+          this.$emit('input', this.valueWhenFalse)
         }
       },
 
       valueTrue() {
         if (this.checked) {
-          this.$emit('input', this.valueWhenTrue, this.id)
+          this.$emit('input', this.valueWhenTrue)
         }
       },
       
@@ -115,7 +115,6 @@
     methods: {
       handleClick() {
         this.checked = !this.checked
-        console.log('handleClick', this.id)
         this.$emit('input', this.checked ? this.valueWhenTrue : this.valueWhenFalse, this.id)
       }
     }

package/src/components/overlay/overlay.vue

@@ -13,7 +13,7 @@
           <slot name="headercontrols"></slot>
         </div>
         <ecs-button-toolbar v-if="$slots.sidebar && width <= 1400" @click="sidebarToggle" :icon="sidebarIcon" :title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle" :active="showSidebar" :badge="sidebarIconBadge" class="sidebar-button" />
-        <ecs-button-toolbar @click="$emit('close')" icon="close">{{ closeText }}</ecs-button-toolbar>
+        <ecs-button-toolbar @click="$emit('close')" :disabled="closeDisabled" icon="close">{{ closeText }}</ecs-button-toolbar>
       </div>
       <div ref="content" class="ecs-overlay-content scrollbar">
         <div v-if="$slots.tabs" class="ecs-overlay-tabs scrollbar scrollbar-sml">
@@ -75,6 +75,10 @@
         type: String,
         default: 'Close'
       },
+      closeDisabled: {
+        type: Boolean,
+        default: false
+      },
       fullWidth: {
         type: Boolean,
         default: false

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

@@ -192,6 +192,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+    cursor: pointer;
 
     &:hover,
     &.active{
@@ -263,7 +264,7 @@
     }
 
     &.control{
-      padding: 9px 12px;
+      padding: 11px 12px;
 
       .ecs-form-check{
         margin-bottom: 0;
@@ -272,6 +273,10 @@
       .ecs-form-check-label{
         display: block;
       }
+
+      .ecs-switch-wrapper{
+        margin: -7px 0;
+      }
     }
 
     &-color{

package/src/components/tab-bar/tab-bar.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="ecs-tab-bar" :class="[
       typeClass,
-      directionClass]"
+      directionClass
+      ]"
     >
     <slot></slot>
   </div>
@@ -45,7 +46,7 @@
   display: flex;
 
   &-standard{
-    &.tab-bar-row{
+    &.ecs-tab-bar-row{
       border-bottom: 1px solid rgba(174, 177, 185, 0.35);
     }
   }

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

@@ -1,9 +1,14 @@
 <template>
   <button class="ecs-tab-button"
-    :class="[subtab ? `ecs-tab-button-child` : '', show ? `show` : '', badge ? `ecs-tab-button-badge` : '']"
-    @click="handleClick"
-  >
+    :class="[
+      subtab ? `ecs-tab-button-child` : '',
+      show ? `show` : '',
+      badge ? `ecs-tab-button-badge` : '']"
+    :disabled="disabled"
+    @click="handleClick">
+
     <ecs-icon v-if="icon" :type="icon" />
+    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" width="16" height="16" />
     <slot></slot>
   </button>
 </template>
@@ -31,6 +36,14 @@
       badge: {
         type: Boolean,
         default: false
+      },
+      sticker: {
+        type: String,
+        validator: v => ['success', 'error', 'warning', 'warning-critical', null].includes(v)
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -53,6 +66,7 @@
 .ecs-tab-button{
   transition: .2s;
   position: relative;
+  cursor: pointer;
 
   &:after{
     content: "";
@@ -76,6 +90,10 @@
     opacity: .5;
     pointer-events: none;
   }
+
+  .sticker{
+    position: absolute;
+  }
 }
 
 .ecs-tab-bar-standard{
@@ -133,9 +151,14 @@
         margin-right: 0;
       }
 
-      .icon{
+      .icon:not(.sticker){
         margin: 0 4px 0 -4px;
       }
+
+      .sticker{
+        left: 15px;
+        top: 13px;
+      }
     }
   }
 
@@ -155,10 +178,15 @@
         top: 0;
       }
 
-      .icon{
+      .icon:not(.sticker){
         margin: -5px 5px -5px -5px;
       }
 
+      .sticker{
+        top: 23px;
+        left: 25px;
+      }
+
       &.ecs-tab-button-child{
         font-size: 13px;
         padding-left: 45px;

package/src/stories/tabs/tabs.stories.js

@@ -28,9 +28,9 @@ export const standardRowIcons = () => ({
   components: { EcsTabs, EcsTab, EcsTabBar, EcsTabButton },
   template: `<div>
               <ecs-tab-bar>
-                <ecs-tab-button show icon="settings">Settings</ecs-tab-button>
-                <ecs-tab-button icon="calendar" badge>Calendar</ecs-tab-button>
-                <ecs-tab-button icon="evidence">Versions</ecs-tab-button>
+                <ecs-tab-button sticker="success" show icon="settings">Settings</ecs-tab-button>
+                <ecs-tab-button sticker="warning" icon="calendar" badge>Calendar</ecs-tab-button>
+                <ecs-tab-button sticker="error" icon="evidence">Versions</ecs-tab-button>
               </ecs-tab-bar>
               <ecs-tabs>
                 <ecs-tab show>First Tab</ecs-tab>

package/src/stories/tabs/tabs.stories.mdx

@@ -155,6 +155,7 @@ Sheet tab bars are used exclusively as a tab bar for controlling table sheets, w
 
 ## Guidelines and Best Practices
 
+- Stickers (small additional icons to indicate a status of a tab) can be added via the `sticker` attribute. The following stickers are available: `success`, `error`, `warning`, and `warning-critical`. **Do not** use a sticker for anything else but a standard tab bar (either horizontal or vertical), also only tabs that have an icon will display a sticker.
 - Icons should be used for any tab bar, but only preferred **not** on the segmented tab bar.
 - Icons are **required** for the sidebar tab bar.
 - Tooltips should be used when a tab has no text content.
@@ -177,4 +178,4 @@ Sheet tab bars are used exclusively as a tab bar for controlling table sheets, w
 
 ### EcsTabButton
 
-<ArgsTable of={EcsTabButton} />
+<ArgsTable of={EcsTabButton} />