euclid-components - npm Package Compare versions

Comparing version 0.1.1 to 0.1.3

index.js

@@ -1,10 +0,481 @@
-module.exports = {
-  CheckboxControl: require('./components/CheckboxControl.vue'),
-  ContentCard: require('./components/ContentCard.vue'),
-  DynamicListbox: require('./components/DynamicListbox.vue'),
-  ModalDialog: require('./components/ModalDialog.vue'),
-  TabList: require('./components/TabList.vue'),
-  TabPanel: require('./components/TabPanel.vue'),
-  ToastNotification: require('./components/ToastNotification.vue'),
-  ToggleRegion: require('./components/ToggleRegion.vue')
+'use strict';
+
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=""; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+
+
+
+
+
+var CheckboxControl = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:{checkbox: _vm.alignment === 'block', 'checkbox-inline': _vm.alignment === 'inline'}},[_c('label',[_c('input',{attrs:{"type":"checkbox","disabled":_vm.disabled},domProps:{"checked":_vm.checked},on:{"change":function($event){_vm.$emit('input', $event.target.checked);}}}),_vm._v(" "+_vm._s(_vm.label)+" ")])])},staticRenderFns: [],
+  model: {
+    prop: 'checked'
+  },
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    alignment: {
+      type: String,
+      default: 'block',
+      validator: function(value) {
+        return ['inline', 'block'].indexOf(value) > -1;
+      }
+    }
+  }
 };
+
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .panel { margin-bottom: 0 !important; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+
+
+
+
+
+
+
+var ContentCard = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:`panel panel-${_vm.type}`},[(_vm.header)?_c('div',{staticClass:"panel-heading"},[_c('h4',{staticClass:"panel-title"},[_vm._v(_vm._s(_vm.header))])]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"panel-body",staticStyle:{"display":"flex","flex-direction":"column","height":"100%"}},[_vm._t("default")],2)])},staticRenderFns: [],
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator: function(type) {
+        return ['default', 'primary', 'success', 'danger', 'warning'].indexOf(type) > -1;
+      }
+    },
+    header: {
+      type: String
+    }
+  },
+  computed: {
+    panelClasses: function() {
+      const classes = ['panel'];
+      if (this.type) classes.push('panel-' + this.type);
+      else classes.push('panel-default');
+      return classes.join(' ');
+    }
+  }
+};
+
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .uoe-dynamic-listbox-align[data-v-28fb7536] { position: relative; } .uoe-dynamic-listbox-overlay[data-v-28fb7536] { position: absolute; top: 0; left: 0; background-color: white; width: 100%; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+
+
+
+
+
+
+var DynamicListbox = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"uoe-dynamic-listbox-align",on:{"focusin":_vm.stealListbox,"focusout":_vm.finishListbox}},[_c('div',{class:{'uoe-dynamic-listbox': true, wys_error: !_vm.isValid}},[_c('input',{staticClass:"form-control",attrs:{"type":"text","tabindex":_vm.isListboxShown ? -1 : 0},domProps:{"value":_vm.value}}),_vm._v(" "),_c('span',{staticClass:"bginside"},[_vm._v(_vm._s(_vm.translation))])]),_vm._v(" "),_c('div',{ref:"insertion",staticClass:"uoe-dynamic-listbox-overlay"})])},staticRenderFns: [],_scopeId: 'data-v-28fb7536',
+  props: {
+    source: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+  data: () => ({
+    translation: '',
+    isValid: true,
+    isListboxShown: false,
+    listbox: {
+      container: null,
+      input: null,
+      translation: null,
+      home: null
+    }
+  }),
+  mounted: function() {
+    this.listbox.input = document.querySelector(this.source);
+    this.listbox.container = this.listbox.input.parentElement;
+    this.listbox.home = this.listbox.container.parentElement;
+    this.listbox.translation = this.listbox.container.querySelector('.bginside');
+
+    this.listbox.container.classList.add('uoe-dynamic-listbox');
+    this.listbox.input.classList.add('form-control');
+  },
+  watch: {
+    value: function() {
+      this.fetchTranslation();
+    }
+  },
+  methods: {
+    fetchTranslation: function() {
+      const _this = this;
+      return this.$store.dispatch('lookupDynamicListbox', {
+        id: this.listbox.input.id,
+        value: this.listbox.input.value
+      }).then(function(translation) {
+        _this.translation = translation;
+        _this.isValid = true;
+        return translation;
+      }).catch(function(error) {
+        _this.translation = error.message;
+        _this.isValid = false;
+      });
+    },
+    updateUnderlyingListbox: function() {
+      const _this = this;
+
+      this.fetchTranslation().then(function(translation) {
+        if (_this.value !== _this.listbox.input.value) {
+          _this.$emit('input', _this.listbox.input.value);
+          _this.$emit('inputWithTranslation', {value: _this.listbox.input.value, translation: translation, isValid: _this.isValid});
+        }
+      });
+    },
+    stealListbox: function() {
+      const _this = this;
+
+      this.isListboxShown = true;
+
+      if (!this.$refs.insertion.contains(this.listbox.container)) {
+        this.$refs.insertion.appendChild(this.listbox.container);
+        this.listbox.input.value = this.value;
+        this.listbox.translation.innerHTML = '';
+
+        setTimeout(function() {
+          _this.listbox.input.focus();
+        }, 10);
+
+        // If the function exists try and run the "blur" event, triggering a translation
+        // Note that this is a Tribal-written function so might change or be removed/renamed
+        // Note too that this function takes the DOM element, not a jQuery item
+        if (typeof window.do_blurT === 'function') {
+          window.do_blurT(_this.listbox.input, 'Y');
+        }
+      }
+    },
+    finishListbox: function(event) {
+      if (!this.$refs.container.contains(event.relatedTarget)) {
+        this.isListboxShown = false;
+        this.updateUnderlyingListbox();
+        // Return the listbox
+        this.listbox.home.appendChild(this.listbox.container);
+      }
+    }
+  }
+};
+
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .modal-backdrop { opacity: 0.5; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const vue = require('vue');
+
+var ModalDialog = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('transition',{attrs:{"name":"fade"}},[(_vm.isOpen)?_c('div',{staticClass:"modal-backdrop"}):_vm._e()]),_vm._v(" "),_c('div',{class:{modal: true, fade: true, in: _vm.isOpen, show: _vm.isOpen},attrs:{"role":"dialog"},on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.close($event);}}},[_c('div',{ref:"modal",staticClass:"modal-dialog",attrs:{"aria-modal":"true","aria-labelledby":`vue-${_vm._uid}-title`},on:{"keydown":_vm.keyHandle}},[_c('div',{staticClass:"modal-content"},[_c('div',{staticClass:"modal-header"},[_c('button',{ref:"close-cross",staticClass:"close",attrs:{"type":"button","aria-label":"Close (Press escape to close)"},on:{"click":_vm.close}},[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v("×")])]),_vm._v(" "),_c('h4',{staticClass:"modal-title",attrs:{"id":`vue-${_vm._uid}-title`}},[_vm._t("title")],2)]),_vm._v(" "),_c('div',{ref:"body",staticClass:"modal-body"},[_vm._t("default")],2),_vm._v(" "),_c('div',{staticClass:"modal-footer"},[(_vm.dismissLabel)?_c('button',{staticClass:"btn btn-default",attrs:{"type":"button"},on:{"click":_vm.close}},[_vm._v(_vm._s(_vm.dismissLabel))]):_vm._e(),_vm._v(" "),_vm._t("button")],2)])])])],1)},staticRenderFns: [],
+  props: {
+    dismissLabel: {
+      type: String,
+      default: 'Close'
+    },
+    isOpen: Boolean
+  },
+  model: {
+    prop: 'isOpen'
+  },
+  data: () => ({
+    initialFocus: null
+  }),
+  watch: {
+    isOpen: function(val) {
+      const _this = this;
+      if (val === true) {
+        this.initialFocus = document.activeElement;
+        vue.nextTick(function() {
+          _this.$refs['close-cross'].focus();
+        });
+
+        this.enforceFocus();
+      } else {
+        this.deforceFocus();
+        this.initialFocus.focus();
+      }
+    }
+  },
+  methods: {
+    close: function() {
+      this.$emit('input', false);
+    },
+    save: function() {
+      this.$emit('save', this.$refs.body);
+    },
+    keyHandle: function(event) {
+      if (event.which === 27) {
+        this.close();
+      }
+    },
+    enforceFocus: function() {
+      document.addEventListener('focusin', this.focusLock);
+    },
+    deforceFocus: function() {
+      document.removeEventListener('focusin', this.focusLock);
+    },
+    focusLock: function(event) {
+      if (event.target !== document && !this.$refs.modal.contains(event.target)) {
+        this.$refs['close-cross'].focus();
+      }
+    }
+  }
+};
+
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .nav-tabs { padding-left: .5rem !important; margin-bottom: 1rem !important; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const TabPanel = require('./TabPanel.vue');
+
+var TabList = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('ul',{class:['nav', 'nav-' + this.type],attrs:{"role":"tablist"},on:{"keyup":_vm.navigateList}},_vm._l((_vm.tabs),function(tab){return _c('li',{key:tab.tabId,class:{'active': _vm.value === tab.tabId},attrs:{"role":"tab","aria-controls":tab.tabId,"aria-selected":_vm.value === tab.tabId}},[_c('a',{ref:'tab-' + tab.tabId,refInFor:true,attrs:{"href":'#' + tab.tabId,"id":tab.tabId + '-control'},on:{"click":function($event){$event.preventDefault();_vm.select(tab.tabId);}}},[_vm._v(" "+_vm._s(tab.label)+" ")])])})),_vm._v(" "),_c('div',{staticClass:"tab-content"},[_c('div',{class:{'tab-pane': true, active: _vm.value === null},attrs:{"role":"tabpanel"}},[_vm._t("no-tab")],2),_vm._v(" "),_vm._t("default")],2)])},staticRenderFns: [],
+  props: {
+    value: {},
+    type: {
+      type: String,
+      default: 'tabs',
+      validator: (v) => {
+        return v === 'pills' || v === 'tabs';
+      }
+    }
+  },
+  data: () => ({
+    tabs: []
+  }),
+  methods: {
+    relativeTab: function(offset) {
+      const activeTabId = this.value;
+      const activeTab = this.tabs.find(function(tab) {return tab.tabId === activeTabId;});
+      const activeTabIndex = this.tabs.indexOf(activeTab);
+      if (activeTabIndex + offset === this.tabs.length || activeTabIndex + offset < 0) {
+        return activeTab.tabId;
+      } else {
+        return this.tabs[activeTabIndex + offset].tabId;
+      }
+    },
+    select(activeTabId) {
+      this.tabs.forEach(tab => {
+        tab.isActive = (tab.tabId === activeTabId);
+      });
+
+      this.$emit('input', activeTabId);
+    },
+    focusTab(tabId) {
+      this.$refs['tab-' + tabId][0].focus();
+      this.$refs['tab-' + tabId][0].click();
+    },
+    navigateList(event) {
+      if (event.which === 37) {
+        this.focusTab(this.relativeTab(-1));
+      } else if (event.which === 39) {
+        this.focusTab(this.relativeTab(1));
+      }
+    }
+  },
+  mounted() {
+    this.tabs.forEach(tab => {
+      tab.isActive = (tab.tabId === this.value);
+    });
+  },
+  components: {
+    TabPanel
+  }
+};
+
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=""; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+
+
+var TabPanel$1 = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:{'tab-pane': true, active: _vm.isActive},attrs:{"role":"tabpanel","id":_vm.tabId,"aria-labelledby":_vm.tabId + '-control'}},[_vm._t("default")],2)},staticRenderFns: [],
+  props: ['label', 'id'],
+  data: () => ({isActive: false}),
+  created: function() {
+    this.$parent.tabs.push(this);
+  },
+  computed: {
+    tabId: function() {
+      if (typeof this.id === 'undefined' || this.id === null) {
+        return 't' + (Math.random() * 1000 | 1);
+      } else {
+        return this.id;
+      }
+    }
+  }
+};
+
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=""; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+
+
+/**
+ * The design of this functionality is basically completely taken from the
+ * vue-bulma-notification package, which cleverly handled creating notifications
+ * without a space to mount and automatically generating `.uoe-notification-area`
+ */
+const Vue = require('vue');
+
+var ToastNotification = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"toast",class:{toast: true, 'toast-danger': _vm.danger, 'toast-autohide': _vm.autohide},attrs:{"aria-live":"polite"},on:{"animationend":_vm.removeIfFinished}},[_vm._v(" "+_vm._s(_vm.body)+" ")])},staticRenderFns: [],
+  props: {
+    body: {
+      type: String,
+      required: true
+    },
+    autohide: {
+      type: Boolean,
+      default: true
+    },
+    container: {
+      type: String,
+      default: '.uoe-notification-area'
+    },
+    danger: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created: function() {
+    let $parent = this.$parent;
+    if (!$parent) {
+      let parent = document.querySelector(this.container);
+      if (!parent) {
+        // Lazy create `div.uoe-notification-area` container if it doesn't yet exist
+        const className = this.container.replace('.', '');
+        const Notifications = Vue.extend({
+          name: 'Notifications',
+          render: function(createElement) {
+            return createElement('div', {
+              class: {
+                [`${className}`]: true
+              }
+            });
+          }
+        });
+        $parent = new Notifications().$mount();
+        document.body.appendChild($parent.$el);
+      } else {
+        $parent = parent.__vue__;
+      }
+
+      /* eslint-disable */
+      this.$_parent_ = $parent;
+      /* eslint-enable */
+    }
+  },
+  mounted: function() {
+    if (this.$_parent_) {
+      this.$_parent_.$el.appendChild(this.$el);
+      this.$parent = this.$_parent_;
+      delete this.$_parent_;
+    }
+  },
+  methods: {
+    removeIfFinished: function() {
+      // When the toast finishes an animation which makes it invisible, destroy the DOM element
+      if (parseInt(window.getComputedStyle(this.$refs.toast).opacity, 10) === 0) {
+        this.$destroy();
+      }
+    }
+  }
+};
+
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=""; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+
+
+
+
+
+
+var ToggleRegion = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:{collapse: true, in: _vm.isOpen}},[_vm._t("default")],2)},staticRenderFns: [],
+  props: {
+    defaultOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    isOpen: false
+  }),
+  mounted: function() {
+    this.isOpen = !!this.defaultOpen;
+  }
+};
+
+var index = {
+  CheckboxControl,
+  ContentCard,
+  DynamicListbox,
+  ModalDialog,
+  TabList,
+  TabPanel: TabPanel$1,
+  ToastNotification,
+  ToggleRegion
+};
+
+module.exports = index;

package.json

 {
   "name": "euclid-components",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "grunt": "concurrently --kill-others \"node ./server.js\" \"grunt\"",
+    "build": "grunt",
     "dev": "concurrently --kill-others \"nodemon --watch public -e js,html ./server.js\" \"grunt\""
@@ -13,7 +13,4 @@ },
   "files": [
-    "components/*.vue"
+    "index.js"
   ],
-  "directories": {
-    ".": "./components"
-  },
   "devDependencies": {
@@ -30,3 +27,6 @@ "concurrently": "^3.5.1",
     "grunt-exorcise": "^2.1.1",
+    "grunt-rollup": "^8.2.0",
     "nodemon": "^1.13.2",
+    "rollup-plugin-commonjs": "^8.2.6",
+    "rollup-plugin-vue": "^3.0.0",
     "vue": "^2.5.11",
@@ -33,0 +33,0 @@ "vue-router": "^3.0.1",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17530

increased by22.41%

Lines of code

384

increased by3740%

Worsened metrics

Dev dependency count

17

increased by21.43%

Number of package files

2

decreased by-80%

No dependency changes