add tabs component

zero.Web/App/Components/Tabs/tab.vue

@@ -0,0 +1,40 @@
+<template>
+  <section v-show="active" class="ui-tab" :aria-hidden="!active" role="tabpanel">
+    <slot />
+  </section>
+</template>
+
+
+<script>
+  export default {
+    name: 'uiTab',
+
+    props: {
+      label: {
+        type: String,
+        required: true
+      },
+      count: {
+        type: Number,
+        default: 0
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data: () => ({
+      active: false
+    }),
+
+    mounted ()
+    {
+      
+    },
+
+    methods: {
+
+    }
+  }
+</script>

zero.Web/App/Components/Tabs/tabs.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="ui-property" :class="{'is-vertical': vertical }">
-    <label v-if="label" class="ui-property-label" for="">
-      <span v-html="label"></span>
-      <strong class="ui-property-required" v-if="required">*</strong>
-      <small v-if="description" v-html="description"></small>
-    </label>
-
-    <div class="ui-property-content">    
-      <slot></slot>
+  <div class="ui-tabs">
+    <div role="tablist" class="ui-tabs-list">
+      <button type="button" v-for="(tab, index) in tabs" class="ui-tabs-list-item" :key="index" :class="{ 'is-active': tab.active }" :disabled="tab.disabled" 
+              :aria-selected="tab.active" role="tab" @click="select(index)">
+        {{ tab.label | localize }}
+      </button>
+    </div>
+    <div class="ui-tabs-items">
+      <slot />
     </div>
   </div>
 </template>
@@ -15,87 +15,129 @@
 
 <script>
   export default {
-    name: 'uiProperty',
+    name: 'uiTabs',
 
     props: {
-      label: String,
-      description: String,
-      required: Boolean,
-      vertical: Boolean
+      
     },
 
-    mounted ()
+    data: () => ({
+      tabs: [],
+      active: 0
+    }),
+
+    computed: {
+      storageKey()
+      {
+        return `vue-tabs-component.cache.${window.location.host}${window.location.pathname}`;
+      }
+    },
+
+    created()
     {
-      
+      this.tabs = this.$children;
+    },
+
+    mounted()
+    {
+      this.select(this.active);
     },
 
     methods: {
 
+      select(index, ev)
+      {
+        if (ev)
+        {
+          ev.preventDefault();
+        }
+
+        const currentTab = this.tabs[index];
+
+        if (currentTab.disabled)
+        {
+          return;
+        }
+
+        this.tabs.forEach((tab, tabIndex) =>
+        {
+          tab.active = index === tabIndex;
+        });
+
+        //this.$emit('changed', { tab: selectedTab });
+        //this.activeTabHash = selectedTab.hash;
+        //this.activeTabIndex = this.getTabIndex(selectedTabHash);
+        //this.lastActiveTabHash = this.activeTabHash = selectedTab.hash;
+        //expiringStorage.set(this.storageKey, selectedTab.hash, this.cacheLifetime);
+      },
     }
   }
 </script>
 
-<style lang="scss" scoped>
-  @import 'Sass/Core/settings';
-
-  .ui-property
+<style lang="scss">
+  .ui-tabs
   {
+    
+  }
+
+  .ui-tabs-list
+  {
+    border-bottom: 1px solid var(--color-line);
+    padding: 0 10px;
+  }
+
+  .ui-tabs-list-item
+  {
+    display: inline-flex;
+    align-items: center;
+    height: 60px;
+    padding: 0 20px;
+    margin: 0;
+    font-size: var(--font-size);
+    color: var(--color-fg-light);
     position: relative;
-    display: flex;
+    overflow: hidden;
+    transition: color 0.2s ease;
 
-    & + .ui-property
+    &:hover
     {
-      padding-top: 25px;
-      margin-top: 25px;
-      border-top: 1px solid var(--color-line);
-    }
-  }
-
-  .ui-property.is-vertical
-  {
-    flex-direction: column;
-
-    .ui-property-label
-    {
-      width: 100%;
+      color: var(--color-fg);
     }
 
-    .ui-property-content
+    &:before
     {
-      margin-top: 5px;
+      display: none;
     }
-  }
 
-  .ui-property-label
-  {
-    display: block;
-    color: var(--color-text);
-    width: 240px;
-    padding-right: 2rem;
-    margin-bottom: 5px;
-    font-size: $font-size;
-    line-height: 1.5;
-    font-weight: 700;
-  }
+    &[disabled]
+    {
+      cursor: default;
+      color: var(--color-fg-light);
+    }
 
-  .ui-property-label small
-  {
-    display: block;
-    padding-top: 5px;
-    font-size: $font-size-s;
-    font-weight: 400;
-    line-height: 1.5;
-    text-decoration: none;
-    color: var(--color-fg-mid);
-  }
+    &:after
+    {
+      content: '';
+      height: 4px;
+      border-radius: 4px 4px 0 0;
+      background: var(--color-line);
+      position: absolute;
+      left: 18px;
+      right: 18px;
+      bottom: 0;
+      transform: translateY(5px) scaleX(0.5);
+      transition: transform 0.2s ease;
+    }
 
-  .ui-property-required
-  {
-    color: var(--color-negative);
-  }
+    &.is-active
+    {
+      font-weight: 700;
+      color: var(--color-fg);
 
-  .ui-property-content
-  {
-    flex: 1;
+      &:after
+      {
+       transform: translateY(0) scaleX(1);
+      }
+    }
   }
 </style>

zero.Web/App/Pages/settings/user.vue

@@ -9,6 +9,14 @@
       </ui-dropdown>
       <ui-button label="Save" />
     </ui-header-bar>
+    <ui-tabs>
+      <ui-tab class="ui-box" label="General">
+        general
+      </ui-tab>
+      <ui-tab class="ui-box" label="Permissions">
+        permissions
+      </ui-tab>
+    </ui-tabs>
   </div>
 </template>
 

zero.Web/Sass/Modules/_all.scss

@@ -1,4 +1,6 @@
 
 @import "Buttons/button";
 
-@import "headlines";
+@import "headlines";
+
+@import "box";

zero.Web/Sass/Modules/_box.scss

@@ -0,0 +1,10 @@
+
+
+
+.ui-box
+{
+  margin: var(--padding);
+  padding: var(--padding);
+  background: var(--color-bg-light);
+  border-radius: var(--radius);
+}