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

Vue Material Component Framework

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("..\\..\\..\\src\\components\\WNavigatorBar\\WNavigatorBar.sass");

var _VAppBar = _interopRequireDefault(require("../VAppBar/VAppBar"));

var _VAvatar = _interopRequireDefault(require("../VAvatar/VAvatar"));

var _VChip = _interopRequireDefault(require("../VChip/VChip"));

var _VSpacer = _interopRequireDefault(require("../VGrid/VSpacer"));

var _VList = _interopRequireDefault(require("../VList/VList"));

var _VListItem = _interopRequireDefault(require("../VList/VListItem"));

var _VIcon = _interopRequireDefault(require("../VIcon/VIcon"));

var _VBtn = _interopRequireDefault(require("../VBtn/VBtn"));

var _helpers = require("../../util/helpers");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/* @vue/component */
var _default = _VAppBar.default.extend({
  name: 'w-navigator-bar',
  props: {
    title: {
      type: String
    },
    pageName: {
      type: String
    },
    logo_src: {
      type: String,
      required: true
    }
  },
  data: function data() {
    return {
      currentBarWidth: 0,
      widthThreshold: 700,
      listVisible: false,
      list: {},
      colors: {
        primary: '#1976d2 !important',
        error: '#ff5252 !important',
        success: '#4caf50 !important',
        warning: '#fb8c00 !important'
      }
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.currentBarWidth = window.innerWidth;
    window.addEventListener('resize', function () {
      _this.currentBarWidth = window.innerWidth;
    });
  },
  methods: {
    genLogo: function genLogo() {
      var imgProp = {
        src: this.logo_src,
        alt: ''
      };
      var image = this.$createElement('img', {
        attrs: imgProp
      });
      var avatar = this.$createElement(_VAvatar.default, {
        style: {
          height: '35px',
          width: '105px',
          marginRight: '16px',
          borderRadius: '0'
        }
      }, [image]);
      return avatar;
    },
    genTitle: function genTitle() {
      if (!this.title) return null;
      var h1 = this.$createElement('h1', {
        staticClass: 'w-navigator-bar__title'
      }, this.title);
      var title = this.$createElement('div', [h1]);
      return title;
    },
    getColor: function getColor(key) {
      if (key == '') return '';
      return this.colors[key];
    },
    genPageName: function genPageName() {
      var cName = '';

      if (this.$el && this.$el.classList.length) {
        for (var 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;
      var pageName = this.$createElement(_VChip.default, {
        staticClass: 'w-navigator-bar__pageName',
        style: {
          color: this.getColor(cName)
        }
      }, this.pageName);
      return pageName;
    },
    genSpacer: function genSpacer() {
      return this.$createElement(_VSpacer.default);
    },
    toggleMenu: function toggleMenu(x, y) {
      this.listVisible = !this.listVisible;
    },
    genBtns: function genBtns() {
      return (0, _helpers.getSlot)(this, 'actions');
    },
    genList: function genList() {
      var _this2 = this;

      var slotVm = (0, _helpers.getSlot)(this, 'actions');
      if (!slotVm || !slotVm.length) return null;
      var listItems = [];

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

      var icon = this.$createElement(_VIcon.default, 'mdi-dots-vertical');
      var btn = this.$createElement(_VBtn.default, {
        props: {
          icon: true,
          color: "#ffffff"
        },
        on: {
          click: function click() {
            _this2.listVisible = !_this2.listVisible;
            _this2.list = _this2.$createElement(_VList.default, {
              style: {
                marginTop: '120px'
              },
              props: {
                color: '#757575'
              }
            }, listItems);
          }
        }
      }, [icon]);
      return this.list.hasOwnProperty('componentInstance') && this.listVisible ? [btn, this.list] : [btn];
    }
  },
  render: function render(h) {
    var appbarProps = {
      flat: true,
      fixed: true
    };

    var data = _objectSpread(_objectSpread({
      staticClass: 'w-navigator-bar'
    }, appbarProps), {}, {
      ref: 'navigatorBar'
    });

    var children = [this.genLogo(), this.genTitle(), this.genPageName(), this.genSpacer(), (0, _helpers.getSlot)(this)];

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

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

    return h(_VAppBar.default, data, children);
  }
});

exports.default = _default;
//# sourceMappingURL=WNavigatorBar.js.map