Pos/ios tabs

src/POSComponents/IosTab/GListCustom.vue

@@ -0,0 +1,98 @@
+<script>
+  import GList from "../../components/GList/GList";
+  import { GListItemAction } from "../../components/GList/GListFunctionalComponent"
+  export default {
+    name: 'GListCustom',
+    components: {GList, GListItemAction},
+    props: {
+      height: String,
+      width: String,
+      disabled: Boolean,
+      rounded: Boolean,
+      shaped: Boolean,
+      elevation: {
+        type: [Number, String],
+        default: 2,
+      },
+      dense: Boolean,
+      nav: Boolean,
+      items: Array,
+      multiSection: Boolean,
+      subheader: String,
+      divider: {
+        type: [Boolean, String],
+        default: false,
+      },
+      prependType: {
+        type: String,
+        default: 'icon',
+      },
+      subtitleWrap: Boolean,
+      value: [String, Object, Number, Array],
+      selectable: Boolean,
+      multiple: Boolean,
+      mandatory: Boolean,
+      allowDuplicates: Boolean,
+      itemValue: String,
+      itemTitle: {
+        type: String,
+        default: 'title'
+      },
+    },
+    setup(props, context) {
+      return () => (
+          <g-list {...{
+            props,
+            scopedSlots: {
+              append: ({item, index}) => (
+                  <g-list-item-action class="g-list-item-action" item={item}>{item.append}</g-list-item-action>
+              )
+            }
+          }
+          }>
+          </g-list>
+      )
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .g-list {
+    padding: 0;
+    border: 1px solid #D1D1D1;
+    border-radius: 4px;
+  }
+
+  ::v-deep .g-list-item-content {
+    margin-left: 0;
+    align-self: flex-start;
+    .g-list-item-text__sub {
+      font-family: "Muli", sans-serif;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 13px;
+    }
+  }
+
+  ::v-deep .g-list-item-action {
+    margin: 0 0 0 16px;
+    align-self: flex-start;
+  }
+
+  ::v-deep .g-list-item {
+    padding: 18px 27px 18px 27px;
+  }
+
+  ::v-deep .g-list-header {
+    padding: 0 0 0 26px;
+    font-family: "Muli" , sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 13px;
+    line-height: 16px;
+    color: #1D1D26;
+    background: #D8D8D8;
+    border-radius: 3px 3px 0 0;
+    align-items: center;
+  }
+</style>

src/POSComponents/IosTab/IosTab.vue

@@ -0,0 +1,106 @@
+<script>
+  import GTabs from "../../components/GTabs/GTabs";
+  import GTabItem from "../../components/GTabs/GTabItem";
+  import GTab from "../../components/GTabs/GTab";
+  import getVModel from "../../mixins/getVModel";
+
+  export default {
+  name: 'IosTab',
+  components: {GTab, GTabItem, GTabs},
+  props: {
+    items: Array,
+    value: null,
+    color: String,
+    textColor: String,
+    grow: Boolean,
+    sliderColor: String,
+    sliderSize: {
+      type: [Number, String],
+      default: 2
+    },
+    vertical: Boolean,
+    right: Boolean,
+    center: Boolean,
+    centerActive: Boolean,
+    icon: Boolean,
+    alignWithTitle: Boolean,
+  },
+  setup(props, context) {
+    const model = getVModel(props, context);
+    const gTabItems = () => props.items.map((item, index) => {
+      return (
+        <g-tab-item key={index} item={item}>
+          {item.title}
+        </g-tab-item>
+      )
+    });
+
+    return () => (
+      <g-tabs {
+        ...{
+          props: {
+            ...props,
+            ripple: false,
+            sliderColor: '#1271FF',
+            slideTransHorLeft: 'left 0.3s, right 0.3s',
+            slideTransHorRight: 'left 0.3s, right 0.3s',
+            sliderBorderColor: '29px',
+            sliderZindex: '-2',
+            sliderTop: '0px',
+            sliderHeight: '32px',
+          },
+          on: {
+            input(e) {
+              model.value = e
+            }
+          },
+          scopedSlots: {
+            tab: ({item, index}) => (
+                  <g-tab item={item} key={index} >{item.title}</g-tab>
+            )
+          }
+        }
+      }
+      >
+        {context.slots.default ? context.slots.default() : gTabItems()}
+      </g-tabs>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "../../style/colors";
+  @import "../../style/variables";
+  .g-tabs-wrapper {
+    align-items: center;
+  }
+  ::v-deep .g-tab-items {
+    margin: 17px 0;
+    width: auto;
+  }
+  ::v-deep .g-tabs-bar {
+    mix-blend-mode: normal;
+    width: 261px;
+    min-height: 32px;
+    border-radius: 29px;
+    font-family: "Muli", sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 13px;
+    line-height: 16px;
+    text-align: center;
+  }
+  ::v-deep .g-tab {
+    flex-basis: 100%;
+    border-radius: 29px;
+    text-transform: none;
+    &:hover:before {
+      opacity: 0;
+    }
+    &:not(.g-tab__active):not(.g-tab__disabled) {
+      color: color("grey", "base");
+      opacity: 1;
+    }
+  }
+</style>