@itfin/components 1.0.60 → 1.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.60",
+  "version": "1.0.65",
   "main": "dist/itfin-components.umd.js",
   "unpkg": "dist/itfin-components.common.js",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",

package/src/assets/scss/components/_selected.scss

@@ -1,7 +1,7 @@
 @import '../variables';
 
 /* Selected Tags */
-.vs__selected {
+.vs__selected, .badge.vs__selected {
   display: flex;
   align-items: center;
   background-color: $vs-selected-bg;

package/src/components/app/ToastContainer.vue

@@ -31,7 +31,6 @@
 <style lang="scss">
 .itf-toast-wrapper {
   max-width: 100%;
-  z-index: $zindex-toaster;
 }
 .itf-toast-fade-enter-active {
   animation: itf-toast-fade-in-down 0.3s;

package/src/components/app/message.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import ToastContainer from './ToastContainer.vue';
+
 const MessageConstructor = Vue.extend(ToastContainer);
 
 const instances = [];
@@ -19,8 +20,8 @@ const Message = function (options) {
       'itf-toast-container toast-container',
       'is-' + position,
       hasMask ? 'has-mask' : ''
-    ].filter(function (e) { return !!e; }).join(' ');
-    document.getElementById('itf-app').appendChild(containerEl);
+    ].filter(Boolean).join(' ');
+    document.body.appendChild(containerEl);
   }
 
   if (options.zIndex) {

package/src/components/checkbox/Checkbox.vue

@@ -2,9 +2,11 @@
 
   <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
     <input class="form-check-input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
-    <label :for="id" slot="label" class="form-check-label">
-      {{label}}
-      <slot name="icon"></slot>
+    <label :for="id" class="form-check-label">
+      <slot name="label">
+        {{label}}
+        <slot name="icon"></slot>
+      </slot>
     </label>
   </div>
 

package/src/components/modal/Modal.vue

@@ -121,8 +121,7 @@ class itfModal extends Vue {
     }
     if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
-      const elContext = this.$el.closest('.itf-append-context') || document.body; // @todo getElementById remove when cleanup vuetify
-      elContext.appendChild(this.$el);
+      document.body.appendChild(this.$el); // should append only to body
     }
     const { default: Modal } = await import('bootstrap/js/src/modal.js');
     this.modalEl = new Modal(this.$el);

package/src/components/text-field/TextField.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div class="itf-text-field input-group" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
-    <div class="addon" v-if="prependIcon">
+    <div class="addon" v-if="prependIcon || $slots.addon">
       <slot name="addon">
         <itf-icon :name="prependIcon"/>
       </slot>
@@ -13,12 +13,15 @@
       :placeholder="placeholder"
       :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
       class="itf-text-field__input form-control"
-      type="text"
+      :type="type"
       :value="value"
       :disabled="disabled"
       :readonly="readonly"
       @input="onInput($event.target.value)"
       @keydown="$emit('keydown', $event)"
+      :min="min"
+      :max="max"
+      :step="step"
     />
 
     <div class="addon-end" v-if="clearable && value">
@@ -68,9 +71,13 @@ class itfTextField extends Vue {
   @Model('input') value;
   @Prop(String) prependIcon;
   @Prop(String) placeholder;
+  @Prop() step;
+  @Prop() min;
+  @Prop() max;
   @Prop(Boolean) clearable;
   @Prop(Boolean) disabled;
   @Prop(Boolean) readonly;
+  @Prop({ type: String, default: 'text' }) type;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
 
   onInput = null;

package/src/nuxt-config/componentNormalizer.js

@@ -0,0 +1,113 @@
+// modified copy of https://github.com/vuejs/vue-loader/blob/master/lib/runtime/componentNormalizer.js
+// contains code to inject styles from options.injectStyles
+
+/* eslint-disable */
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+export default function normalizeComponent (
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier, /* server only */
+  shadowMode /* vue-cli only */
+) {
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = 'data-v-' + scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) { // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // modification start
+      if (Array.isArray(options.injectStyles)) {
+        options.injectStyles.forEach((style) => {
+          if (style.__inject__) { // eslint-disable-line no-underscore-dangle
+            style.__inject__(context); // eslint-disable-line no-underscore-dangle
+          }
+        });
+      }
+      // modification end
+
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+        injectStyles.call(
+          this,
+          (options.functional ? this.parent : this).$root.$options.shadowRoot
+        )
+      }
+      : injectStyles
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functional component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection (h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing
+        ? [].concat(existing, hook)
+        : [hook]
+    }
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}

package/src/nuxt-config/config.js

@@ -0,0 +1,9 @@
+import webpack from 'webpack';
+import path from 'path';
+
+export default function extend(config) {
+  config.plugins.push(new webpack.NormalModuleReplacementPlugin(
+    /vue-loader\/lib\/runtime\/componentNormalizer.js/,
+    path.join(__dirname, 'componentNormalizer.js'),
+  ));
+};