@itools-front/ifrontui/lib/components/WNavigatorBar/WNavigatorBar.js

Vue Material Component Framework

// Styles
import "..\\..\\..\\src\\components\\WNavigatorBar\\WNavigatorBar.sass"; // Extensions

import VAppBar from '../VAppBar/VAppBar'; // Components

import VAvatar from '../VAvatar/VAvatar';
import VChip from '../VChip/VChip';
import VSpacer from '../VGrid/VSpacer';
import VList from '../VList/VList';
import VListItem from '../VList/VListItem';
import VIcon from '../VIcon/VIcon';
import VBtn from '../VBtn/VBtn'; // Utilities

import { getSlot } from '../../util/helpers';
/* @vue/component */

export default VAppBar.extend({
  name: 'w-navigator-bar',
  props: {
    title: {
      type: String
    },
    pageName: {
      type: String
    },
    logo_src: {
      type: String,
      required: true
    }
  },
  data: () => ({
    currentBarWidth: 0,
    widthThreshold: 700,
    listVisible: false,
    list: {},
    colors: {
      primary: '#1976d2 !important',
      error: '#ff5252 !important',
      success: '#4caf50 !important',
      warning: '#fb8c00 !important'
    }
  }),

  mounted() {
    this.currentBarWidth = window.innerWidth;
    window.addEventListener('resize', () => {
      this.currentBarWidth = window.innerWidth;
    });
  },

  methods: {
    genLogo() {
      const imgProp = {
        src: this.logo_src,
        alt: ''
      };
      const image = this.$createElement('img', {
        attrs: imgProp
      });
      const avatar = this.$createElement(VAvatar, {
        style: {
          height: '35px',
          width: '105px',
          marginRight: '16px',
          borderRadius: '0'
        }
      }, [image]);
      return avatar;
    },

    genTitle() {
      if (!this.title) return null;
      const h1 = this.$createElement('h1', {
        staticClass: 'w-navigator-bar__title'
      }, this.title);
      const title = this.$createElement('div', [h1]);
      return title;
    },

    getColor(key) {
      if (key == '') return '';
      return this.colors[key];
    },

    genPageName() {
      let cName = '';

      if (this.$el && this.$el.classList.length) {
        for (let i = 0; i < this.$el.classList.length; i++) {
          if (['error', 'success', 'warning'].indexOf(this.$el.classList[i]) !== -1) {
            cName = this.$el.classList[i];
          }
        }
      }

      if (!this.pageName || this.currentBarWidth < this.widthThreshold) return null;
      const pageName = this.$createElement(VChip, {
        staticClass: 'w-navigator-bar__pageName',
        style: {
          color: this.getColor(cName)
        }
      }, this.pageName);
      return pageName;
    },

    genSpacer() {
      return this.$createElement(VSpacer);
    },

    toggleMenu(x, y) {
      this.listVisible = !this.listVisible;
    },

    genBtns() {
      return getSlot(this, 'actions');
    },

    genList() {
      const slotVm = getSlot(this, 'actions');
      if (!slotVm || !slotVm.length) return null;
      const listItems = [];

      for (let i = 0; i < slotVm.length; i++) {
        const vm = slotVm[i];
        if (!vm.tag) continue;
        listItems.push(this.$createElement(VListItem, {
          style: {
            padding: '0px'
          }
        }, [vm]));
      }

      const icon = this.$createElement(VIcon, 'mdi-dots-vertical');
      const btn = this.$createElement(VBtn, {
        props: {
          icon: true,
          color: "#ffffff"
        },
        on: {
          click: () => {
            this.listVisible = !this.listVisible;
            this.list = this.$createElement(VList, {
              style: {
                marginTop: '120px'
              },
              props: {
                color: '#757575'
              }
            }, listItems);
          }
        }
      }, [icon]);
      return this.list.hasOwnProperty('componentInstance') && this.listVisible ? [btn, this.list] : [btn];
    }

  },

  render(h) {
    const appbarProps = {
      flat: true,
      fixed: true
    };
    const data = {
      staticClass: 'w-navigator-bar',
      ...appbarProps,
      ref: 'navigatorBar'
    };
    const children = [this.genLogo(), this.genTitle(), this.genPageName(), this.genSpacer(), getSlot(this)];

    if (this.currentBarWidth > this.widthThreshold) {
      this.listVisible = false;
      children.push(this.genBtns());
    } else {
      const list = this.genList();

      if (list && Array.isArray(list)) {
        children.push(...list);
      }
    }

    return h(VAppBar, data, children);
  }

});
//# sourceMappingURL=WNavigatorBar.js.map