v-eye - npm Package Compare versions

Comparing version 0.2.0-alpha.2 to 0.3.0-alpha.0

dist/v-eye.common.js

@@ -135,6 +135,50 @@ module.exports =
 
+// CONCATENATED MODULE: ./src/components/VPrimitive.js
+/**
+ * Reusable primitive prop. Every component with support for template
+ * slot should include it.
+ */
+var asTemplate = {
+  type: Boolean,
+  default: false
+};
+/**
+ * Conditionally render the appropriate skeleton element or the slot
+ * content in case consumer wants to provide their own implementation
+ * via a truthy asTemplate. No prop merging happens, bindings will be
+ * fully exposed via slot-scope.
+ *
+ * @private - this is for internal lib use only.
+ */
+
+var VPrimitive = {
+  name: "VPrimitive",
+  props: {
+    asTemplate: asTemplate,
+    tagName: {
+      type: String,
+      default: "div"
+    }
+  },
+  render: function render(h) {
+    if (this.asTemplate) {
+      return this.$slots.default;
+    } else {
+      return h(this.tagName, {
+        on: this.$listeners
+      }, this.$slots.default);
+    }
+  }
+};
 // CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEye.vue?vue&type=script&lang=js&
+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; }
+
 /**
- * Opens and closes, revealing its content.
+ * An individual switch that can work within a team when managed.
  */
+
 /* harmony default export */ var VEyevue_type_script_lang_js_ = ({
@@ -152,11 +196,9 @@ name: "VEye",
   props: {
-    as: {
-      type: String,
-      default: "div"
-    },
+    asTemplate: asTemplate,
 
     /**
-     * when used inside a pack, you better use this
-     * to know who is who in the v-model, otherwise
-     * you'll get vue's uid
+     * When used under manager scope, it's highly recommended to provide unique
+     * value to each instance as it will act as v-model's value when active.
+     * Omitting will get random generated value, which is not very useful,
+     * but necessary for internal tracking logic.
      */
@@ -194,2 +236,12 @@ uid: {
       return this.manager.getIsActive(this.$_uid);
+    },
+
+    /**
+     * Provided via slot-scope or injection
+     */
+    api: function api() {
+      return {
+        isActive: this.$_active,
+        toggle: this.toggle
+      };
     }
@@ -233,17 +285,9 @@ },
     };
-
-    if (this.as === "template") {
-      return this.$scopedSlots.default({
-        isActive: this.$_active,
-        toggle: this.toggle,
-        attrs: attrs
-      });
-    } else {
-      return h(this.as, {
-        attrs: attrs
-      }, this.$scopedSlots.default({
-        isActive: this.$_active,
-        toggle: this.toggle
-      }));
-    }
+    return h(VPrimitive, {
+      props: {
+        asTemplate: this.asTemplate
+      }
+    }, this.$scopedSlots.default(_objectSpread(_objectSpread({}, this.api), {}, {
+      attrs: attrs
+    })));
   },
@@ -359,3 +403,3 @@ provide: function provide() {
 // CONCATENATED MODULE: ./src/components/VEye.vue
-var render, staticRenderFns
+var VEye_render, staticRenderFns
 
@@ -369,3 +413,3 @@
   components_VEyevue_type_script_lang_js_,
-  render,
+  VEye_render,
   staticRenderFns,
@@ -393,2 +437,4 @@ false,
 
+
+
 var isNil = function isNil(val) {
@@ -410,6 +456,3 @@ return val === undefined || val === null;
   props: {
-    as: {
-      type: String,
-      default: "div"
-    },
+    asTemplate: asTemplate,
 
@@ -501,4 +544,17 @@ /**
     /**
-     * @see emitSideEffect notes
-     * @see syncModelValue [1]
+     * When active is changed from an external source but we still want to perform
+     * side-effects on the consumer
+     * Ex: using vue-router, we can change the route without interacting with any
+     * VTab trigger (clicking). This means regular that @change won't be triggered,
+     * and thus side-effects can't be executed for that scenario when consumers need access
+     * to internal apis: we could use $refs and access all this info directly but feels
+     * even dirtier than this.
+     *
+     * @note HIGH PROBABILITY OF CHANGE
+     *   This was added to perform a specific DOM related side-effect
+     *   "the stalker underline" tab demo. But is it really much better than
+     *   $nextTick(() => this.$el.querySelector('[data-state="selected"])?
+     *
+     * @note [1] do not re-emit if triggered from internal chang
+     *   @see syncModelValue [1]
      */
@@ -516,3 +572,3 @@ active: function active() {
 
-      this.emitSideEffect("change");
+      this.emitModelValueWithDetails(["change"]);
     },
@@ -540,5 +596,4 @@ mandatory: {
     /**
-     * @todo it's a bit confusing but at leas its clear that we have
-     *  access to dom refs for side-effects.
-     *  Also this is related with dom animation which is being discussed
+     * @todo it's a bit confusing but at least its clear that we have
+     *  access event details
      * @example vue
@@ -552,3 +607,3 @@ *   <!-- ❌ works but.. does not have instance context details -->
      */
-    this.emitSideEffect("mounted");
+    this.emitModelValueWithDetails(["mounted"]);
   },
@@ -558,3 +613,3 @@ methods: {
       this.modelValueInternal = newVal;
-      this.emitSideEffect(["change", "update:active"], newVal); // [1]
+      this.emitModelValueWithDetails(["change", "update:active"], newVal); // [1]
 
@@ -588,46 +643,37 @@ this._preventActiveWatcher = true;
     /**
-     * When active is changed from an external source but we still want to perform
-     * side-effects on the consumer
-     * Ex: using vue-router, we can change the route without interacting with any
-     * VTab trigger (clicking). This means regular that @change won't be triggered,
-     * and thus side-effects can't be executed for that scenario when consumers need access
-     * to internal apis: we could use $refs and access all this info directly but feels
-     * even dirtier than this.
+     * Convenience wrapper that emits provided vue event names with most up-to
+     * date modelValue and EventDetails object for consumer side-effects.
      *
-     * @note HIGH PROBABILITY OF CHANGE
-     *   This was added to perform a specific DOM related side-effect
-     *   "the stalker underline" tab demo. But is it really much better than
-     *   $nextTick(() => this.$el.querySelector('[data-state="selected"])
-     * @note If deprecated...
-     *   the code it's still re-used on mounted() hook and that's necessary
-     *   for initial side-effects? Or could we go full $refs?
+     * @param {Array<String>} eventNames - the ones to emit with payload
+     * @param {Array} newModelValue - omitting it means using currently computed
+     *   this.$_modelValueProxy. Currently, raw active cannot be used because
+     *   it's not coerced to internal expected representation (Array)
      */
-    emitSideEffect: function emitSideEffect(eventNames, modelValueOverwrite) {
+    emitModelValueWithDetails: function emitModelValueWithDetails(eventNames, newModelValue) {
       var _this = this;
 
-      var _this$getEventPayload = this.getEventPayload(modelValueOverwrite),
-          emitValue = _this$getEventPayload.emitValue,
-          details = _this$getEventPayload.details;
+      var _this$getEventParams = this.getEventParams(newModelValue !== null && newModelValue !== void 0 ? newModelValue : this.$_modelValueProxy),
+          emitValue = _this$getEventParams.emitValue,
+          details = _this$getEventParams.details;
 
-      if (Array.isArray(eventNames)) {
-        eventNames.forEach(function (event) {
-          return _this.$emit(event, emitValue, details);
-        });
-      } else {
-        this.$emit(eventNames, emitValue, details);
-      }
+      eventNames.forEach(function (event) {
+        return _this.$emit(event, emitValue, details);
+      });
     },
 
     /**
-     * @typedef SideEffectDetails
+     * Additional information for consumers to perform model change
+     * side-effects on their implementations.
+     *
+     * @typedef {Object} EventDetails
      * @property {Array} elements - array of tracked children dom nodes
      *
-     * @returns {SideEffectDetails}
+     * @param {Array} modelValue
+     * @returns {EventDetails}
      */
-    getSideEffectDetails: function getSideEffectDetails(modelValueOverwrite) {
+    getEventDetails: function getEventDetails(modelValue) {
       var _this2 = this;
 
-      var value = modelValueOverwrite !== null && modelValueOverwrite !== void 0 ? modelValueOverwrite : this.$_modelValueProxy;
       return {
-        elements: value.map(function (uid) {
+        elements: modelValue.map(function (uid) {
           return _this2.injectedElMap[uid];
@@ -637,6 +683,16 @@ })
     },
-    getEventPayload: function getEventPayload(modelValueOverwrite) {
+
+    /**
+     * Proxy to get all event emit information in a single call
+     *
+     * @typedef {Object} EventParams
+     * @property {Array|String|Number|null} emitValue
+     * @property {EventDetails} details
+     *
+     * @returns {EventParams}
+     */
+    getEventParams: function getEventParams(modelValue) {
       return {
-        emitValue: this.deserializeModelValue(modelValueOverwrite !== null && modelValueOverwrite !== void 0 ? modelValueOverwrite : this.$_modelValueProxy),
-        details: this.getSideEffectDetails(modelValueOverwrite)
+        emitValue: this.deserializeModelValue(modelValue),
+        details: this.getEventDetails(modelValue)
       };
@@ -743,4 +799,7 @@ },
   render: function render(h) {
-    // mostly because of jest, other wise would be regular slot
-    return this.as === "template" ? this.$scopedSlots.default({}) : h(this.as, this.$slots.default);
+    return h(VPrimitive, {
+      props: {
+        asTemplate: this.asTemplate
+      }
+    }, this.$slots.default);
   },
@@ -775,26 +834,25 @@ provide: function provide() {
 /* harmony default export */ var VEyeManager = (VEyeManager_component.exports);
+// CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75974368-vue-loader-template"}!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEyeContent.vue?vue&type=template&id=2aa7ca4c&
+var VEyeContentvue_type_template_id_2aa7ca4c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.eye.api.isActive)?_c('v-primitive',_vm._b({},'v-primitive',{ asTemplate: _vm.asTemplate },false),[_vm._t("default",null,null,{ toggle: _vm.eye.api.toggle })],2):_vm._e()}
+var VEyeContentvue_type_template_id_2aa7ca4c_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/VEyeContent.vue?vue&type=template&id=2aa7ca4c&
+
 // CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEyeContent.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+
 /* harmony default export */ var VEyeContentvue_type_script_lang_js_ = ({
   name: "VEyeContent",
+  components: {
+    VPrimitive: VPrimitive
+  },
   inject: ["eye"],
   props: {
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  render: function render(h) {
-    if (this.as === "template") {
-      var _this$eye;
-
-      return this.$scopedSlots.default({
-        toggle: (_this$eye = this.eye) === null || _this$eye === void 0 ? void 0 : _this$eye.toggle
-      });
-    } else {
-      var _this$eye2, _this$eye3;
-
-      return ((_this$eye2 = this.eye) === null || _this$eye2 === void 0 ? void 0 : _this$eye2.$_active) ? h(this.as, this.$slots.default || this.$scopedSlots.default({
-        toggle: (_this$eye3 = this.eye) === null || _this$eye3 === void 0 ? void 0 : _this$eye3.toggle
-      })) : null;
-    }
+    asTemplate: asTemplate
   }
@@ -805,3 +863,2 @@ });
 // CONCATENATED MODULE: ./src/components/VEyeContent.vue
-var VEyeContent_render, VEyeContent_staticRenderFns
 
@@ -811,2 +868,3 @@
 
+
 /* normalize component */
@@ -816,4 +874,4 @@
   components_VEyeContentvue_type_script_lang_js_,
-  VEyeContent_render,
-  VEyeContent_staticRenderFns,
+  VEyeContentvue_type_template_id_2aa7ca4c_render,
+  VEyeContentvue_type_template_id_2aa7ca4c_staticRenderFns,
   false,
@@ -827,34 +885,36 @@ null,
 /* harmony default export */ var VEyeContent = (VEyeContent_component.exports);
+// CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75974368-vue-loader-template"}!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEyeSwitch.vue?vue&type=template&id=652df26a&
+var VEyeSwitchvue_type_template_id_652df26a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-primitive',_vm._b({on:{"click":_vm.eye.api.toggle}},'v-primitive',{
+    asTemplate: _vm.asTemplate,
+    tagName: 'button',
+    type: 'button'
+  },false),[_vm._t("default",null,null,_vm.eye.api)],2)}
+var VEyeSwitchvue_type_template_id_652df26a_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/VEyeSwitch.vue?vue&type=template&id=652df26a&
+
 // CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEyeSwitch.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 /* harmony default export */ var VEyeSwitchvue_type_script_lang_js_ = ({
   name: "VEyeSwitch",
+  components: {
+    VPrimitive: VPrimitive
+  },
   inject: ["eye"],
   props: {
-    as: {
-      type: String,
-      default: "button"
-    }
-  },
-  render: function render(h) {
-    if (this.as === "template") {
-      var _this$eye, _this$eye2;
-
-      return this.$scopedSlots.default({
-        toggle: (_this$eye = this.eye) === null || _this$eye === void 0 ? void 0 : _this$eye.toggle,
-        isActive: (_this$eye2 = this.eye) === null || _this$eye2 === void 0 ? void 0 : _this$eye2.$_active
-      });
-    } else {
-      var _this$eye3, _this$eye4;
-
-      return h(this.as, {
-        attrs: {
-          type: "button"
-        },
-        on: {
-          click: (_this$eye3 = this.eye) === null || _this$eye3 === void 0 ? void 0 : _this$eye3.toggle
-        }
-      }, this.$slots.default || this.$scopedSlots.default({
-        isActive: (_this$eye4 = this.eye) === null || _this$eye4 === void 0 ? void 0 : _this$eye4.$_active
-      }));
-    }
+    asTemplate: asTemplate
   }
@@ -865,3 +925,2 @@ });
 // CONCATENATED MODULE: ./src/components/VEyeSwitch.vue
-var VEyeSwitch_render, VEyeSwitch_staticRenderFns
 
@@ -871,2 +930,3 @@
 
+
 /* normalize component */
@@ -876,4 +936,4 @@
   components_VEyeSwitchvue_type_script_lang_js_,
-  VEyeSwitch_render,
-  VEyeSwitch_staticRenderFns,
+  VEyeSwitchvue_type_template_id_652df26a_render,
+  VEyeSwitchvue_type_template_id_652df26a_staticRenderFns,
   false,
@@ -880,0 +940,0 @@ null,

dist/v-eye.umd.js

@@ -144,6 +144,50 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+// CONCATENATED MODULE: ./src/components/VPrimitive.js
+/**
+ * Reusable primitive prop. Every component with support for template
+ * slot should include it.
+ */
+var asTemplate = {
+  type: Boolean,
+  default: false
+};
+/**
+ * Conditionally render the appropriate skeleton element or the slot
+ * content in case consumer wants to provide their own implementation
+ * via a truthy asTemplate. No prop merging happens, bindings will be
+ * fully exposed via slot-scope.
+ *
+ * @private - this is for internal lib use only.
+ */
+
+var VPrimitive = {
+  name: "VPrimitive",
+  props: {
+    asTemplate: asTemplate,
+    tagName: {
+      type: String,
+      default: "div"
+    }
+  },
+  render: function render(h) {
+    if (this.asTemplate) {
+      return this.$slots.default;
+    } else {
+      return h(this.tagName, {
+        on: this.$listeners
+      }, this.$slots.default);
+    }
+  }
+};
 // CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEye.vue?vue&type=script&lang=js&
+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; }
+
 /**
- * Opens and closes, revealing its content.
+ * An individual switch that can work within a team when managed.
  */
+
 /* harmony default export */ var VEyevue_type_script_lang_js_ = ({
@@ -161,11 +205,9 @@ name: "VEye",
   props: {
-    as: {
-      type: String,
-      default: "div"
-    },
+    asTemplate: asTemplate,
 
     /**
-     * when used inside a pack, you better use this
-     * to know who is who in the v-model, otherwise
-     * you'll get vue's uid
+     * When used under manager scope, it's highly recommended to provide unique
+     * value to each instance as it will act as v-model's value when active.
+     * Omitting will get random generated value, which is not very useful,
+     * but necessary for internal tracking logic.
      */
@@ -203,2 +245,12 @@ uid: {
       return this.manager.getIsActive(this.$_uid);
+    },
+
+    /**
+     * Provided via slot-scope or injection
+     */
+    api: function api() {
+      return {
+        isActive: this.$_active,
+        toggle: this.toggle
+      };
     }
@@ -242,17 +294,9 @@ },
     };
-
-    if (this.as === "template") {
-      return this.$scopedSlots.default({
-        isActive: this.$_active,
-        toggle: this.toggle,
-        attrs: attrs
-      });
-    } else {
-      return h(this.as, {
-        attrs: attrs
-      }, this.$scopedSlots.default({
-        isActive: this.$_active,
-        toggle: this.toggle
-      }));
-    }
+    return h(VPrimitive, {
+      props: {
+        asTemplate: this.asTemplate
+      }
+    }, this.$scopedSlots.default(_objectSpread(_objectSpread({}, this.api), {}, {
+      attrs: attrs
+    })));
   },
@@ -368,3 +412,3 @@ provide: function provide() {
 // CONCATENATED MODULE: ./src/components/VEye.vue
-var render, staticRenderFns
+var VEye_render, staticRenderFns
 
@@ -378,3 +422,3 @@
   components_VEyevue_type_script_lang_js_,
-  render,
+  VEye_render,
   staticRenderFns,
@@ -402,2 +446,4 @@ false,
 
+
+
 var isNil = function isNil(val) {
@@ -419,6 +465,3 @@ return val === undefined || val === null;
   props: {
-    as: {
-      type: String,
-      default: "div"
-    },
+    asTemplate: asTemplate,
 
@@ -510,4 +553,17 @@ /**
     /**
-     * @see emitSideEffect notes
-     * @see syncModelValue [1]
+     * When active is changed from an external source but we still want to perform
+     * side-effects on the consumer
+     * Ex: using vue-router, we can change the route without interacting with any
+     * VTab trigger (clicking). This means regular that @change won't be triggered,
+     * and thus side-effects can't be executed for that scenario when consumers need access
+     * to internal apis: we could use $refs and access all this info directly but feels
+     * even dirtier than this.
+     *
+     * @note HIGH PROBABILITY OF CHANGE
+     *   This was added to perform a specific DOM related side-effect
+     *   "the stalker underline" tab demo. But is it really much better than
+     *   $nextTick(() => this.$el.querySelector('[data-state="selected"])?
+     *
+     * @note [1] do not re-emit if triggered from internal chang
+     *   @see syncModelValue [1]
      */
@@ -525,3 +581,3 @@ active: function active() {
 
-      this.emitSideEffect("change");
+      this.emitModelValueWithDetails(["change"]);
     },
@@ -549,5 +605,4 @@ mandatory: {
     /**
-     * @todo it's a bit confusing but at leas its clear that we have
-     *  access to dom refs for side-effects.
-     *  Also this is related with dom animation which is being discussed
+     * @todo it's a bit confusing but at least its clear that we have
+     *  access event details
      * @example vue
@@ -561,3 +616,3 @@ *   <!-- ❌ works but.. does not have instance context details -->
      */
-    this.emitSideEffect("mounted");
+    this.emitModelValueWithDetails(["mounted"]);
   },
@@ -567,3 +622,3 @@ methods: {
       this.modelValueInternal = newVal;
-      this.emitSideEffect(["change", "update:active"], newVal); // [1]
+      this.emitModelValueWithDetails(["change", "update:active"], newVal); // [1]
 
@@ -597,46 +652,37 @@ this._preventActiveWatcher = true;
     /**
-     * When active is changed from an external source but we still want to perform
-     * side-effects on the consumer
-     * Ex: using vue-router, we can change the route without interacting with any
-     * VTab trigger (clicking). This means regular that @change won't be triggered,
-     * and thus side-effects can't be executed for that scenario when consumers need access
-     * to internal apis: we could use $refs and access all this info directly but feels
-     * even dirtier than this.
+     * Convenience wrapper that emits provided vue event names with most up-to
+     * date modelValue and EventDetails object for consumer side-effects.
      *
-     * @note HIGH PROBABILITY OF CHANGE
-     *   This was added to perform a specific DOM related side-effect
-     *   "the stalker underline" tab demo. But is it really much better than
-     *   $nextTick(() => this.$el.querySelector('[data-state="selected"])
-     * @note If deprecated...
-     *   the code it's still re-used on mounted() hook and that's necessary
-     *   for initial side-effects? Or could we go full $refs?
+     * @param {Array<String>} eventNames - the ones to emit with payload
+     * @param {Array} newModelValue - omitting it means using currently computed
+     *   this.$_modelValueProxy. Currently, raw active cannot be used because
+     *   it's not coerced to internal expected representation (Array)
      */
-    emitSideEffect: function emitSideEffect(eventNames, modelValueOverwrite) {
+    emitModelValueWithDetails: function emitModelValueWithDetails(eventNames, newModelValue) {
       var _this = this;
 
-      var _this$getEventPayload = this.getEventPayload(modelValueOverwrite),
-          emitValue = _this$getEventPayload.emitValue,
-          details = _this$getEventPayload.details;
+      var _this$getEventParams = this.getEventParams(newModelValue !== null && newModelValue !== void 0 ? newModelValue : this.$_modelValueProxy),
+          emitValue = _this$getEventParams.emitValue,
+          details = _this$getEventParams.details;
 
-      if (Array.isArray(eventNames)) {
-        eventNames.forEach(function (event) {
-          return _this.$emit(event, emitValue, details);
-        });
-      } else {
-        this.$emit(eventNames, emitValue, details);
-      }
+      eventNames.forEach(function (event) {
+        return _this.$emit(event, emitValue, details);
+      });
     },
 
     /**
-     * @typedef SideEffectDetails
+     * Additional information for consumers to perform model change
+     * side-effects on their implementations.
+     *
+     * @typedef {Object} EventDetails
      * @property {Array} elements - array of tracked children dom nodes
      *
-     * @returns {SideEffectDetails}
+     * @param {Array} modelValue
+     * @returns {EventDetails}
      */
-    getSideEffectDetails: function getSideEffectDetails(modelValueOverwrite) {
+    getEventDetails: function getEventDetails(modelValue) {
       var _this2 = this;
 
-      var value = modelValueOverwrite !== null && modelValueOverwrite !== void 0 ? modelValueOverwrite : this.$_modelValueProxy;
       return {
-        elements: value.map(function (uid) {
+        elements: modelValue.map(function (uid) {
           return _this2.injectedElMap[uid];
@@ -646,6 +692,16 @@ })
     },
-    getEventPayload: function getEventPayload(modelValueOverwrite) {
+
+    /**
+     * Proxy to get all event emit information in a single call
+     *
+     * @typedef {Object} EventParams
+     * @property {Array|String|Number|null} emitValue
+     * @property {EventDetails} details
+     *
+     * @returns {EventParams}
+     */
+    getEventParams: function getEventParams(modelValue) {
       return {
-        emitValue: this.deserializeModelValue(modelValueOverwrite !== null && modelValueOverwrite !== void 0 ? modelValueOverwrite : this.$_modelValueProxy),
-        details: this.getSideEffectDetails(modelValueOverwrite)
+        emitValue: this.deserializeModelValue(modelValue),
+        details: this.getEventDetails(modelValue)
       };
@@ -752,4 +808,7 @@ },
   render: function render(h) {
-    // mostly because of jest, other wise would be regular slot
-    return this.as === "template" ? this.$scopedSlots.default({}) : h(this.as, this.$slots.default);
+    return h(VPrimitive, {
+      props: {
+        asTemplate: this.asTemplate
+      }
+    }, this.$slots.default);
   },
@@ -784,26 +843,25 @@ provide: function provide() {
 /* harmony default export */ var VEyeManager = (VEyeManager_component.exports);
+// CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75974368-vue-loader-template"}!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEyeContent.vue?vue&type=template&id=2aa7ca4c&
+var VEyeContentvue_type_template_id_2aa7ca4c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.eye.api.isActive)?_c('v-primitive',_vm._b({},'v-primitive',{ asTemplate: _vm.asTemplate },false),[_vm._t("default",null,null,{ toggle: _vm.eye.api.toggle })],2):_vm._e()}
+var VEyeContentvue_type_template_id_2aa7ca4c_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/VEyeContent.vue?vue&type=template&id=2aa7ca4c&
+
 // CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEyeContent.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+
 /* harmony default export */ var VEyeContentvue_type_script_lang_js_ = ({
   name: "VEyeContent",
+  components: {
+    VPrimitive: VPrimitive
+  },
   inject: ["eye"],
   props: {
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  render: function render(h) {
-    if (this.as === "template") {
-      var _this$eye;
-
-      return this.$scopedSlots.default({
-        toggle: (_this$eye = this.eye) === null || _this$eye === void 0 ? void 0 : _this$eye.toggle
-      });
-    } else {
-      var _this$eye2, _this$eye3;
-
-      return ((_this$eye2 = this.eye) === null || _this$eye2 === void 0 ? void 0 : _this$eye2.$_active) ? h(this.as, this.$slots.default || this.$scopedSlots.default({
-        toggle: (_this$eye3 = this.eye) === null || _this$eye3 === void 0 ? void 0 : _this$eye3.toggle
-      })) : null;
-    }
+    asTemplate: asTemplate
   }
@@ -814,3 +872,2 @@ });
 // CONCATENATED MODULE: ./src/components/VEyeContent.vue
-var VEyeContent_render, VEyeContent_staticRenderFns
 
@@ -820,2 +877,3 @@
 
+
 /* normalize component */
@@ -825,4 +883,4 @@
   components_VEyeContentvue_type_script_lang_js_,
-  VEyeContent_render,
-  VEyeContent_staticRenderFns,
+  VEyeContentvue_type_template_id_2aa7ca4c_render,
+  VEyeContentvue_type_template_id_2aa7ca4c_staticRenderFns,
   false,
@@ -836,34 +894,36 @@ null,
 /* harmony default export */ var VEyeContent = (VEyeContent_component.exports);
+// CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75974368-vue-loader-template"}!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEyeSwitch.vue?vue&type=template&id=652df26a&
+var VEyeSwitchvue_type_template_id_652df26a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-primitive',_vm._b({on:{"click":_vm.eye.api.toggle}},'v-primitive',{
+    asTemplate: _vm.asTemplate,
+    tagName: 'button',
+    type: 'button'
+  },false),[_vm._t("default",null,null,_vm.eye.api)],2)}
+var VEyeSwitchvue_type_template_id_652df26a_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/VEyeSwitch.vue?vue&type=template&id=652df26a&
+
 // CONCATENATED MODULE: ../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/VEyeSwitch.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 /* harmony default export */ var VEyeSwitchvue_type_script_lang_js_ = ({
   name: "VEyeSwitch",
+  components: {
+    VPrimitive: VPrimitive
+  },
   inject: ["eye"],
   props: {
-    as: {
-      type: String,
-      default: "button"
-    }
-  },
-  render: function render(h) {
-    if (this.as === "template") {
-      var _this$eye, _this$eye2;
-
-      return this.$scopedSlots.default({
-        toggle: (_this$eye = this.eye) === null || _this$eye === void 0 ? void 0 : _this$eye.toggle,
-        isActive: (_this$eye2 = this.eye) === null || _this$eye2 === void 0 ? void 0 : _this$eye2.$_active
-      });
-    } else {
-      var _this$eye3, _this$eye4;
-
-      return h(this.as, {
-        attrs: {
-          type: "button"
-        },
-        on: {
-          click: (_this$eye3 = this.eye) === null || _this$eye3 === void 0 ? void 0 : _this$eye3.toggle
-        }
-      }, this.$slots.default || this.$scopedSlots.default({
-        isActive: (_this$eye4 = this.eye) === null || _this$eye4 === void 0 ? void 0 : _this$eye4.$_active
-      }));
-    }
+    asTemplate: asTemplate
   }
@@ -874,3 +934,2 @@ });
 // CONCATENATED MODULE: ./src/components/VEyeSwitch.vue
-var VEyeSwitch_render, VEyeSwitch_staticRenderFns
 
@@ -880,2 +939,3 @@
 
+
 /* normalize component */
@@ -885,4 +945,4 @@
   components_VEyeSwitchvue_type_script_lang_js_,
-  VEyeSwitch_render,
-  VEyeSwitch_staticRenderFns,
+  VEyeSwitchvue_type_template_id_652df26a_render,
+  VEyeSwitchvue_type_template_id_652df26a_staticRenderFns,
   false,
@@ -889,0 +949,0 @@ null,

dist/v-eye.umd.min.js

@@ -1,2 +0,2 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["v-eye"]=e():t["v-eye"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s="4447")}({4447:function(t,e,i){"use strict";i.r(e),i.d(e,"VEye",(function(){return h})),i.d(e,"VEyeManager",(function(){return M})),i.d(e,"VEyeContent",(function(){return C})),i.d(e,"VEyeSwitch",(function(){return R}));var n={};if(i.r(n),i.d(n,"VEye",(function(){return h})),i.d(n,"VEyeManager",(function(){return M})),i.d(n,"VEyeContent",(function(){return C})),i.d(n,"VEyeSwitch",(function(){return R})),"undefined"!==typeof window){var r=window.document.currentScript,o=i("dc36");r=o(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:o});var a=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);a&&(i.p=a[1])}var l,u,s={name:"VEye",inject:{manager:{default:null}},model:{prop:"active",event:"toggle"},props:{as:{type:String,default:"div"},uid:{type:[String,Number],default:null},active:{type:Boolean,default:!1}},data:function(){return{internalActive:this.active}},computed:{$_uid:function(){return null===this.uid||void 0===this.uid?"v-eye-".concat(this._uid):this.uid},$_independent:function(){return!this.manager},$_active:function(){return this.$_independent?this.internalActive:this.manager.getIsActive(this.$_uid)}},watch:{active:function(t){this.internalActive=t}},mounted:function(){this.$_independent||this.manager.track(this.$_uid,this.$el),this.$_independent||!1===this.active||console.log("\n        This eye can't control himself, it's under manager scope.\n        The prop has no effect\n      ")},beforeDestroy:function(){this.$_independent||this.manager.untrack(this.$_uid)},methods:{toggle:function(){if(this.$_independent)return this.internalActive=!this.internalActive,this.$emit("toggle",this.internalActive),void this.$emit("update:active",this.internalActive);this.manager.toggle(this.$_uid)}},render:function(t){var e={"data-active":this.$_active?"":null,"data-uid":this.$_uid};return"template"===this.as?this.$scopedSlots.default({isActive:this.$_active,toggle:this.toggle,attrs:e}):t(this.as,{attrs:e},this.$scopedSlots.default({isActive:this.$_active,toggle:this.toggle}))},provide:function(){return{eye:this}}},c=s;function d(t,e,i,n,r,o,a,l){var u,s="function"===typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=i,s._compiled=!0),n&&(s.functional=!0),o&&(s._scopeId="data-v-"+o),a?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},s._ssrRegister=u):r&&(u=l?function(){r.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:r),u)if(s.functional){s._injectStyles=u;var c=s.render;s.render=function(t,e){return u.call(e),c(t,e)}}else{var d=s.beforeCreate;s.beforeCreate=d?[].concat(d,u):[u]}return{exports:t,options:s}}var f=d(c,l,u,!1,null,null,null),h=f.exports;function p(t){return g(t)||y(t)||m(t)||v()}function v(){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 m(t,e){if(t){if("string"===typeof t)return $(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?$(t,e):void 0}}function y(t){if("undefined"!==typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}function g(t){if(Array.isArray(t))return $(t)}function $(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}var _,S,V,x,A,E,b=function(t){return void 0===t||null===t},j={name:"VEyeManager",model:{prop:"active",event:"change"},props:{as:{type:String,default:"div"},active:{type:[String,Array,Number]},defaultActive:{type:[String,Array,Number]},mandatory:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},watchPropsWithModelSideEffects:{type:Boolean,default:!1}},data:function(){return{injected:[],injectedElMap:{},modelValueInternal:this.defaultActive,api:{track:this.track,untrack:this.untrack,getIsActive:this.getIsActive,toggle:this.toggle}}},computed:{$_modelValueProxy:{get:function(){return this.active||0===this.active?this.serializeModelValue(this.active):this.serializeModelValue(this.modelValueInternal)},set:function(t){this.syncModelValue(t)}}},watch:{active:function(){this._preventActiveWatcher?this._preventActiveWatcher=!1:this.emitSideEffect("change")},mandatory:{immediate:!0,handler:"execMandatorySideEffects"},multiple:{immediate:!0,handler:"execMultipleSideEffects"}},created:function(){!this.multiple||b(this.active)||Array.isArray(this.active)||b(this.defaultActive)||Array.isArray(this.defaultActive)||console.warn("[v-eye]: when using multiple, active/defaultActive must be an array if provided"),this.mandatory&&b(this.active)&&b(this.defaultActive)&&console.warn("[v-eye]: mandatory mode expects an not nil 'active' or 'defaultActive' value")},mounted:function(){this.emitSideEffect("mounted")},methods:{syncModelValue:function(t){this.modelValueInternal=t,this.emitSideEffect(["change","update:active"],t),this._preventActiveWatcher=!0},serializeModelValue:function(t){return Array.isArray(t)?t:t||0===t?[t]:[]},deserializeModelValue:function(t){return this.multiple?t:t.length?t[t.length-1]:null},emitSideEffect:function(t,e){var i=this,n=this.getEventPayload(e),r=n.emitValue,o=n.details;Array.isArray(t)?t.forEach((function(t){return i.$emit(t,r,o)})):this.$emit(t,r,o)},getSideEffectDetails:function(t){var e=this,i=null!==t&&void 0!==t?t:this.$_modelValueProxy;return{elements:i.map((function(t){return e.injectedElMap[t]}))}},getEventPayload:function(t){return{emitValue:this.deserializeModelValue(null!==t&&void 0!==t?t:this.$_modelValueProxy),details:this.getSideEffectDetails(t)}},execMandatorySideEffects:function(t){this.watchPropsWithModelSideEffects&&t&&!this.$_modelValueProxy.length&&(this.$_modelValueProxy=[this.injected[0]])},execMultipleSideEffects:function(t){this.watchPropsWithModelSideEffects&&(!t&&this.$_modelValueProxy.length>1?this.$_modelValueProxy=this.$_modelValueProxy.slice(-1):this.syncModelValue(this.$_modelValueProxy))},track:function(t,e){this.injected.includes(t)||(this.injected.push(t),this.$set(this.injectedElMap,t,e))},untrack:function(t){this.injected=this.injected.filter((function(e){return t!==e})),this.$delete(this.injectedElMap,t),this.getIsActive(t)&&this.deactivate(t,!0)},getIsActive:function(t){return this.$_modelValueProxy.includes(t)},activate:function(t){this.multiple?this.$_modelValueProxy=[].concat(p(this.$_modelValueProxy),[t]):this.$_modelValueProxy=[t]},deactivate:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];!this.multiple||this.mandatory&&1===this.$_modelValueProxy.length?(e&&this.mandatory&&(this.$_modelValueProxy=this.injected.slice(-1)),this.$_modelValueProxy.length>1?this.$_modelValueProxy=[t]:this.mandatory||(this.$_modelValueProxy=[])):this.$_modelValueProxy=this.$_modelValueProxy.filter((function(e){return e!==t}))},toggle:function(t){var e=this.getIsActive(t);e?this.deactivate(t):this.activate(t)}},render:function(t){return"template"===this.as?this.$scopedSlots.default({}):t(this.as,this.$slots.default)},provide:function(){return{manager:this.api}}},P=j,w=d(P,_,S,!1,null,null,null),M=w.exports,O={name:"VEyeContent",inject:["eye"],props:{as:{type:String,default:"div"}},render:function(t){var e,i,n;return"template"===this.as?this.$scopedSlots.default({toggle:null===(e=this.eye)||void 0===e?void 0:e.toggle}):(null===(i=this.eye)||void 0===i?void 0:i.$_active)?t(this.as,this.$slots.default||this.$scopedSlots.default({toggle:null===(n=this.eye)||void 0===n?void 0:n.toggle})):null}},I=O,T=d(I,V,x,!1,null,null,null),C=T.exports,k={name:"VEyeSwitch",inject:["eye"],props:{as:{type:String,default:"button"}},render:function(t){var e,i,n,r;return"template"===this.as?this.$scopedSlots.default({toggle:null===(e=this.eye)||void 0===e?void 0:e.toggle,isActive:null===(i=this.eye)||void 0===i?void 0:i.$_active}):t(this.as,{attrs:{type:"button"},on:{click:null===(n=this.eye)||void 0===n?void 0:n.toggle}},this.$slots.default||this.$scopedSlots.default({isActive:null===(r=this.eye)||void 0===r?void 0:r.$_active}))}},N=k,D=d(N,A,E,!1,null,null,null),R=D.exports,W={install:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.installed)for(var i in this.installed=!0,n){var r=i.moduleKey,o=i.component;t.component(e.componentName||r,o)}}};"undefined"!==typeof window&&window.Vue&&window.Vue.use(W);var z=W;e["default"]=z},dc36:function(t,e,i){var n,r,o;(function(i,a){r=[],n=a,o="function"===typeof n?n.apply(e,r):n,void 0===o||(t.exports=o)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(h){var i,n,r,o=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,a=/@([^@]*):(\d+):(\d+)\s*$/gi,l=o.exec(h.stack)||a.exec(h.stack),u=l&&l[1]||!1,s=l&&l[2]||!1,c=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");u===c&&(i=document.documentElement.outerHTML,n=new RegExp("(?:[^\\n]+?\\n){0,"+(s-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),r=i.replace(n,"$1").trim());for(var f=0;f<d.length;f++){if("interactive"===d[f].readyState)return d[f];if(d[f].src===u)return d[f];if(u===c&&d[f].innerHTML&&d[f].innerHTML.trim()===r)return d[f]}return null}}return t}))}})}));
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["v-eye"]=t():e["v-eye"]=t()})("undefined"!==typeof self?self:this,(function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="4447")}({4447:function(e,t,n){"use strict";n.r(t),n.d(t,"VEye",(function(){return g})),n.d(t,"VEyeManager",(function(){return O})),n.d(t,"VEyeContent",(function(){return N})),n.d(t,"VEyeSwitch",(function(){return L}));var i={};if(n.r(i),n.d(i,"VEye",(function(){return g})),n.d(i,"VEyeManager",(function(){return O})),n.d(i,"VEyeContent",(function(){return N})),n.d(i,"VEyeSwitch",(function(){return L})),"undefined"!==typeof window){var r=window.document.currentScript,o=n("dc36");r=o(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:o});var a=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);a&&(n.p=a[1])}var l={type:Boolean,default:!1},u={name:"VPrimitive",props:{asTemplate:l,tagName:{type:String,default:"div"}},render:function(e){return this.asTemplate?this.$slots.default:e(this.tagName,{on:this.$listeners},this.$slots.default)}};function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var f,p,h={name:"VEye",inject:{manager:{default:null}},model:{prop:"active",event:"toggle"},props:{asTemplate:l,uid:{type:[String,Number],default:null},active:{type:Boolean,default:!1}},data:function(){return{internalActive:this.active}},computed:{$_uid:function(){return null===this.uid||void 0===this.uid?"v-eye-".concat(this._uid):this.uid},$_independent:function(){return!this.manager},$_active:function(){return this.$_independent?this.internalActive:this.manager.getIsActive(this.$_uid)},api:function(){return{isActive:this.$_active,toggle:this.toggle}}},watch:{active:function(e){this.internalActive=e}},mounted:function(){this.$_independent||this.manager.track(this.$_uid,this.$el),this.$_independent||!1===this.active||console.log("\n        This eye can't control himself, it's under manager scope.\n        The prop has no effect\n      ")},beforeDestroy:function(){this.$_independent||this.manager.untrack(this.$_uid)},methods:{toggle:function(){if(this.$_independent)return this.internalActive=!this.internalActive,this.$emit("toggle",this.internalActive),void this.$emit("update:active",this.internalActive);this.manager.toggle(this.$_uid)}},render:function(e){var t={"data-active":this.$_active?"":null,"data-uid":this.$_uid};return e(u,{props:{asTemplate:this.asTemplate}},this.$scopedSlots.default(s(s({},this.api),{},{attrs:t})))},provide:function(){return{eye:this}}},m=h;function v(e,t,n,i,r,o,a,l){var u,c="function"===typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),o&&(c._scopeId="data-v-"+o),a?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=u):r&&(u=l?function(){r.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:r),u)if(c.functional){c._injectStyles=u;var s=c.render;c.render=function(e,t){return u.call(t),s(e,t)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,u):[u]}return{exports:e,options:c}}var y=v(m,f,p,!1,null,null,null),g=y.exports;function _(e){return j(e)||V(e)||b(e)||$()}function $(){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 b(e,t){if(e){if("string"===typeof e)return x(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?x(e,t):void 0}}function V(e){if("undefined"!==typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}function j(e){if(Array.isArray(e))return x(e)}function x(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var P,S,E=function(e){return void 0===e||null===e},A={name:"VEyeManager",model:{prop:"active",event:"change"},props:{asTemplate:l,active:{type:[String,Array,Number]},defaultActive:{type:[String,Array,Number]},mandatory:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},watchPropsWithModelSideEffects:{type:Boolean,default:!1}},data:function(){return{injected:[],injectedElMap:{},modelValueInternal:this.defaultActive,api:{track:this.track,untrack:this.untrack,getIsActive:this.getIsActive,toggle:this.toggle}}},computed:{$_modelValueProxy:{get:function(){return this.active||0===this.active?this.serializeModelValue(this.active):this.serializeModelValue(this.modelValueInternal)},set:function(e){this.syncModelValue(e)}}},watch:{active:function(){this._preventActiveWatcher?this._preventActiveWatcher=!1:this.emitModelValueWithDetails(["change"])},mandatory:{immediate:!0,handler:"execMandatorySideEffects"},multiple:{immediate:!0,handler:"execMultipleSideEffects"}},created:function(){!this.multiple||E(this.active)||Array.isArray(this.active)||E(this.defaultActive)||Array.isArray(this.defaultActive)||console.warn("[v-eye]: when using multiple, active/defaultActive must be an array if provided"),this.mandatory&&E(this.active)&&E(this.defaultActive)&&console.warn("[v-eye]: mandatory mode expects an not nil 'active' or 'defaultActive' value")},mounted:function(){this.emitModelValueWithDetails(["mounted"])},methods:{syncModelValue:function(e){this.modelValueInternal=e,this.emitModelValueWithDetails(["change","update:active"],e),this._preventActiveWatcher=!0},serializeModelValue:function(e){return Array.isArray(e)?e:e||0===e?[e]:[]},deserializeModelValue:function(e){return this.multiple?e:e.length?e[e.length-1]:null},emitModelValueWithDetails:function(e,t){var n=this,i=this.getEventParams(null!==t&&void 0!==t?t:this.$_modelValueProxy),r=i.emitValue,o=i.details;e.forEach((function(e){return n.$emit(e,r,o)}))},getEventDetails:function(e){var t=this;return{elements:e.map((function(e){return t.injectedElMap[e]}))}},getEventParams:function(e){return{emitValue:this.deserializeModelValue(e),details:this.getEventDetails(e)}},execMandatorySideEffects:function(e){this.watchPropsWithModelSideEffects&&e&&!this.$_modelValueProxy.length&&(this.$_modelValueProxy=[this.injected[0]])},execMultipleSideEffects:function(e){this.watchPropsWithModelSideEffects&&(!e&&this.$_modelValueProxy.length>1?this.$_modelValueProxy=this.$_modelValueProxy.slice(-1):this.syncModelValue(this.$_modelValueProxy))},track:function(e,t){this.injected.includes(e)||(this.injected.push(e),this.$set(this.injectedElMap,e,t))},untrack:function(e){this.injected=this.injected.filter((function(t){return e!==t})),this.$delete(this.injectedElMap,e),this.getIsActive(e)&&this.deactivate(e,!0)},getIsActive:function(e){return this.$_modelValueProxy.includes(e)},activate:function(e){this.multiple?this.$_modelValueProxy=[].concat(_(this.$_modelValueProxy),[e]):this.$_modelValueProxy=[e]},deactivate:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];!this.multiple||this.mandatory&&1===this.$_modelValueProxy.length?(t&&this.mandatory&&(this.$_modelValueProxy=this.injected.slice(-1)),this.$_modelValueProxy.length>1?this.$_modelValueProxy=[e]:this.mandatory||(this.$_modelValueProxy=[])):this.$_modelValueProxy=this.$_modelValueProxy.filter((function(t){return t!==e}))},toggle:function(e){var t=this.getIsActive(e);t?this.deactivate(e):this.activate(e)}},render:function(e){return e(u,{props:{asTemplate:this.asTemplate}},this.$slots.default)},provide:function(){return{manager:this.api}}},w=A,M=v(w,P,S,!1,null,null,null),O=M.exports,T=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.eye.api.isActive?n("v-primitive",e._b({},"v-primitive",{asTemplate:e.asTemplate},!1),[e._t("default",null,null,{toggle:e.eye.api.toggle})],2):e._e()},D=[],I={name:"VEyeContent",components:{VPrimitive:u},inject:["eye"],props:{asTemplate:l}},k=I,C=v(k,T,D,!1,null,null,null),N=C.exports,W=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("v-primitive",e._b({on:{click:e.eye.api.toggle}},"v-primitive",{asTemplate:e.asTemplate,tagName:"button",type:"button"},!1),[e._t("default",null,null,e.eye.api)],2)},B=[],R={name:"VEyeSwitch",components:{VPrimitive:u},inject:["eye"],props:{asTemplate:l}},z=R,H=v(z,W,B,!1,null,null,null),L=H.exports,U={install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.installed)for(var n in this.installed=!0,i){var r=n.moduleKey,o=n.component;e.component(t.componentName||r,o)}}};"undefined"!==typeof window&&window.Vue&&window.Vue.use(U);var X=U;t["default"]=X},dc36:function(e,t,n){var i,r,o;(function(n,a){r=[],i=a,o="function"===typeof i?i.apply(t,r):i,void 0===o||(e.exports=o)})("undefined"!==typeof self&&self,(function(){function e(){var t=Object.getOwnPropertyDescriptor(document,"currentScript");if(!t&&"currentScript"in document&&document.currentScript)return document.currentScript;if(t&&t.get!==e&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var n,i,r,o=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,a=/@([^@]*):(\d+):(\d+)\s*$/gi,l=o.exec(p.stack)||a.exec(p.stack),u=l&&l[1]||!1,c=l&&l[2]||!1,s=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");u===s&&(n=document.documentElement.outerHTML,i=new RegExp("(?:[^\\n]+?\\n){0,"+(c-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),r=n.replace(i,"$1").trim());for(var f=0;f<d.length;f++){if("interactive"===d[f].readyState)return d[f];if(d[f].src===u)return d[f];if(u===s&&d[f].innerHTML&&d[f].innerHTML.trim()===r)return d[f]}return null}}return e}))}})}));
 //# sourceMappingURL=v-eye.umd.min.js.map

package.json

 {
   "name": "v-eye",
-  "version": "0.2.0-alpha.2",
+  "version": "0.3.0-alpha.0",
   "license": "MIT",
@@ -53,3 +53,3 @@ "repository": "https://github.com/renatodeleao/v-eye",
   },
-  "gitHead": "8befe02deeba0b3819cd5d770d452eb046c1fcab"
+  "gitHead": "59ee2b4af936e6f55a350f65009718bcca275d2d"
 }

README.md

 # v-eye
 
-The `v-eye` package provides the a set of compound components to create a group of selectable items out of any component. You can see it as the baseline functionality for components like `tabs`, `button-groups`, `accordions`, `carousels` and possibily others.
+The `v-eye` package provides a set of compound components to create groups of selectable items out of any component. You can see it as the baseline functionality for components like `tabs`, `button-groups`, `accordions`, `carousels` and possibily others.
 
-In one line: it's [`Vuetify's` `v-item-group`](https://vuetifyjs.com/en/components/item-groups/) without all `vuetify` fuss attached. All props to them 🙏
-
+It's heavily inspired in [`Vuetify's` `v-item-group`](https://vuetifyjs.com/en/components/item-groups/) without all the `vuetify` wiring attached. 
 ## Installation
@@ -16,3 +15,3 @@
 ## Usage
-By default, all components render an un-styled root node `div`. If just to bind the logic to your own components, you can make them renderless/headless and use its `slot-scope` using `as="template"` prop, but remember that, due to Vue2 limitation, a single root node must be provided.
+By default, all components render an un-styled root node `div` with all bindings attached. If you want to bind the logic to your own custom components, use `as-template` prop and turn them into `renderless/headless` providers and all bindings are exposed via default `slot-scope`. Remember that, due to Vue2 limitation, a single root node must be provided.
 
@@ -70,3 +69,3 @@ ### Basic: a Disclosure component.
 ```
-#### what if have my on "trigger" component, like a button?
+#### Using a your own custom component
 
@@ -80,3 +79,3 @@ Picking up on the previous example, just use the headless version via `as="template` prop.
     <input :type="inputType">
-    <v-eye v-model="isPasswordVisible" as="template" #default="{ toggle }">
+    <v-eye v-model="isPasswordVisible" as-template #default="{ toggle }">
       <your-app-button
@@ -94,3 +93,3 @@ :icon="isPasswordVisible ? '🙈 ': '🙉' "
 
-The usefulness of this package really pays off when you want for each `v-eye` to be aware of similar siblings state, for example an `accordion` where only one panel can be open at the time — clicking one panel will close the current open sibling. That's when `VEyeManager` comes handy.
+The usefulness of this package really shows off when you want each `v-eye` to be aware its siblings state. For example an `accordion`, where only one panel can be open at the time: clicking one panel should close the current open sibling. That's when `VEyeManager` comes handy.
 
@@ -151,3 +150,2 @@
 | watchPropsWithModelSideEffects | `{Boolean}` / false       | BETA — if v-model data should react immediately to prop some prop changes. Ex, a multiple instance with 2 items selected. If multiple prop changes to false, the model is updated to keep only one value. |
-| static                         | `{Boolean}` / false       | BETA - Do not manage VEyes under its scope. currently required for router-driven state, although we could do it without it.                                                                               |
 
@@ -154,0 +152,0 @@ ### slot-scope

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

236188

increased by6.58%

Number of package files

17

increased by6.25%

Lines of code

1944

increased by7.58%

Worsened metrics

Number of lines in readme file

179

decreased by-1.1%

No dependency changes