vue-contenteditable-input - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/vue-contenteditable-input.esm.js

@@ -13,3 +13,2 @@ //
 //
-//
 
@@ -294,7 +293,7 @@ function replaceAll(str, search, replacement) {
     if (!inject) { return }
-    inject("data-v-b38fad96_0", { source: "\n.vue-editable-input[data-v-b38fad96] {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n.vue-editable-input[data-v-b38fad96]:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n[placeholder][data-v-b38fad96]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n", map: {"version":3,"sources":["/Users/ranga/demos/vue-contenteditable-input/src/VueContenteditableInput.vue"],"names":[],"mappings":";AAuIA;EACA,gBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;AACA;AAEA;EACA,sCAAA;AACA;AAEA;EACA,0BAAA;EACA,cAAA;AACA","file":"VueContenteditableInput.vue","sourcesContent":[" /* eslint-disable */\n <template>\n  <component\n    :is=\"tag\"\n    class=\"vue-editable-input\"\n    :class=\"{'disabled': !contenteditable}\"\n    :contenteditable=\"contenteditable\"\n    :ref=\"inputRef\"\n    :placeholder=\"placeholder\"\n    v-on=\"listeners\"\n  ></component>\n</template>\n\n<script>\nfunction replaceAll(str, search, replacement) {\n  return str.split(search).join(replacement)\n}\n\nexport default {\n  name: 'VueContenteditableInput',\n  props: {\n    tag: {\n      type: String,\n      default: 'span'\n    },\n    contenteditable: {\n      type: Boolean,\n      default: true\n    },\n    inputRef: {\n      type: String,\n      default: 'editable-input'\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    icon: null,\n    placeholder: {\n      type: String\n    },\n    focus: {\n      type: Boolean\n    },\n    disableNewline: {\n      type: Boolean,\n      default: false\n    },\n    formatText: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      hasContent: false,\n      isFocused: false,\n      focusTimeoutRef: null\n    };\n  },\n  computed: {\n    listeners() {\n      return {\n        ...this.$listeners,\n        input: this.onInput,\n        focus: this.onFocus,\n        blur: this.onBlur,\n        keypress: this.handleEnter,\n        paste: this.onPaste\n      };\n    }\n  },\n  mounted() {\n    const inputRef = this.$refs[this.inputRef]\n    inputRef.innerText = this.value || null\n    this.$nextTick(() => {\n      if (this.focus) {\n        inputRef.focus()\n      }\n    })\n    this.hasContent = this.value ? 'true' : 'false'\n  },\n  methods: {\n    onBlur() {\n      this.isFocused = false\n\n      this.$emit('blur')\n    },\n    onInput(e) {\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('input', value)\n    },\n    onFocus(e) {\n      this.isFocused = true\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('focus')\n    },\n    handleEnter(e) {\n      if (e.key === 'Enter') {\n        if (this.disableNewline) {\n          e.preventDefault()\n          this.$emit('enter', this.value)\n        }\n      }\n\n      this.$emit('keypress')\n    },\n    onPaste(event) {\n      event.preventDefault()\n      let text = this.formatText\n        ? event.clipboardData.getData('text/plain')\n        : event.clipboardData.getData('text/html')\n\n      if (this.disableNewline || this.formatText) {\n        text = replaceAll(text, '\\r\\n', ' ')\n        text = replaceAll(text, '\\n', ' ')\n        text = replaceAll(text, '\\r', ' ')\n      }\n\n      this.formatText\n        ? document.execCommand('inserttext', false, text)\n        : document.execCommand('insertHTML', false, text)\n\n      !this.formatText && this.$emit('input', text)\n      this.$emit('paste')\n    }\n  }\n};\n</script>\n\n<style scoped>\n.vue-editable-input {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n\n.vue-editable-input:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n\n[placeholder]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n</style>\n"]}, media: undefined });
+    inject("data-v-681f7669_0", { source: "\n.vue-editable-input[data-v-681f7669] {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n.vue-editable-input[data-v-681f7669]:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n[placeholder][data-v-681f7669]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n", map: {"version":3,"sources":["/Users/ranga/demos/vue-contenteditable-input/src/VueContenteditableInput.vue"],"names":[],"mappings":";AAsIA;EACA,gBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;AACA;AAEA;EACA,sCAAA;AACA;AAEA;EACA,0BAAA;EACA,cAAA;AACA","file":"VueContenteditableInput.vue","sourcesContent":["<template>\n  <component\n    :is=\"tag\"\n    class=\"vue-editable-input\"\n    :class=\"{'disabled': !contenteditable}\"\n    :contenteditable=\"contenteditable\"\n    :ref=\"inputRef\"\n    :placeholder=\"placeholder\"\n    v-on=\"listeners\"\n  ></component>\n</template>\n\n<script>\nfunction replaceAll(str, search, replacement) {\n  return str.split(search).join(replacement)\n}\n\nexport default {\n  name: 'VueContenteditableInput',\n  props: {\n    tag: {\n      type: String,\n      default: 'span'\n    },\n    contenteditable: {\n      type: Boolean,\n      default: true\n    },\n    inputRef: {\n      type: String,\n      default: 'editable-input'\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    icon: null,\n    placeholder: {\n      type: String\n    },\n    focus: {\n      type: Boolean\n    },\n    disableNewline: {\n      type: Boolean,\n      default: false\n    },\n    formatText: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      hasContent: false,\n      isFocused: false,\n      focusTimeoutRef: null\n    };\n  },\n  computed: {\n    listeners() {\n      return {\n        ...this.$listeners,\n        input: this.onInput,\n        focus: this.onFocus,\n        blur: this.onBlur,\n        keypress: this.handleEnter,\n        paste: this.onPaste\n      };\n    }\n  },\n  mounted() {\n    const inputRef = this.$refs[this.inputRef]\n    inputRef.innerText = this.value || null\n    this.$nextTick(() => {\n      if (this.focus) {\n        inputRef.focus()\n      }\n    })\n    this.hasContent = this.value ? 'true' : 'false'\n  },\n  methods: {\n    onBlur() {\n      this.isFocused = false\n\n      this.$emit('blur')\n    },\n    onInput(e) {\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('input', value)\n    },\n    onFocus(e) {\n      this.isFocused = true\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('focus')\n    },\n    handleEnter(e) {\n      if (e.key === 'Enter') {\n        if (this.disableNewline) {\n          e.preventDefault()\n          this.$emit('enter', this.value)\n        }\n      }\n\n      this.$emit('keypress')\n    },\n    onPaste(event) {\n      event.preventDefault()\n      let text = this.formatText\n        ? event.clipboardData.getData('text/plain')\n        : event.clipboardData.getData('text/html')\n\n      if (this.disableNewline || this.formatText) {\n        text = replaceAll(text, '\\r\\n', ' ')\n        text = replaceAll(text, '\\n', ' ')\n        text = replaceAll(text, '\\r', ' ')\n      }\n\n      this.formatText\n        ? document.execCommand('inserttext', false, text)\n        : document.execCommand('insertHTML', false, text)\n\n      !this.formatText && this.$emit('input', text)\n      this.$emit('paste')\n    }\n  }\n};\n</script>\n\n<style scoped>\n.vue-editable-input {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n\n.vue-editable-input:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n\n[placeholder]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n</style>\n"]}, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-b38fad96";
+  var __vue_scope_id__ = "data-v-681f7669";
   /* module identifier */
@@ -323,20 +322,4 @@ var __vue_module_identifier__ = undefined;
 
-/* eslint-disable */
+// import contenteditable from './VueContenteditableInput.vue'
 
-var VueContenteditableInput = {
-  install: function install(Vue) {
-    Vue.component(__vue_component__.name, __vue_component__);
-  }
-};
-
-var GlobalVue = null;
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(VueContenteditableInput);
-}
-
-export default VueContenteditableInput;
+export default __vue_component__;

dist/vue-contenteditable-input.min.js

@@ -16,3 +16,2 @@ var VueContenteditableInput = (function (exports) {
   //
-  //
 
@@ -297,7 +296,7 @@ function replaceAll(str, search, replacement) {
       if (!inject) { return }
-      inject("data-v-b38fad96_0", { source: "\n.vue-editable-input[data-v-b38fad96] {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n.vue-editable-input[data-v-b38fad96]:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n[placeholder][data-v-b38fad96]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n", map: {"version":3,"sources":["/Users/ranga/demos/vue-contenteditable-input/src/VueContenteditableInput.vue"],"names":[],"mappings":";AAuIA;EACA,gBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;AACA;AAEA;EACA,sCAAA;AACA;AAEA;EACA,0BAAA;EACA,cAAA;AACA","file":"VueContenteditableInput.vue","sourcesContent":[" /* eslint-disable */\n <template>\n  <component\n    :is=\"tag\"\n    class=\"vue-editable-input\"\n    :class=\"{'disabled': !contenteditable}\"\n    :contenteditable=\"contenteditable\"\n    :ref=\"inputRef\"\n    :placeholder=\"placeholder\"\n    v-on=\"listeners\"\n  ></component>\n</template>\n\n<script>\nfunction replaceAll(str, search, replacement) {\n  return str.split(search).join(replacement)\n}\n\nexport default {\n  name: 'VueContenteditableInput',\n  props: {\n    tag: {\n      type: String,\n      default: 'span'\n    },\n    contenteditable: {\n      type: Boolean,\n      default: true\n    },\n    inputRef: {\n      type: String,\n      default: 'editable-input'\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    icon: null,\n    placeholder: {\n      type: String\n    },\n    focus: {\n      type: Boolean\n    },\n    disableNewline: {\n      type: Boolean,\n      default: false\n    },\n    formatText: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      hasContent: false,\n      isFocused: false,\n      focusTimeoutRef: null\n    };\n  },\n  computed: {\n    listeners() {\n      return {\n        ...this.$listeners,\n        input: this.onInput,\n        focus: this.onFocus,\n        blur: this.onBlur,\n        keypress: this.handleEnter,\n        paste: this.onPaste\n      };\n    }\n  },\n  mounted() {\n    const inputRef = this.$refs[this.inputRef]\n    inputRef.innerText = this.value || null\n    this.$nextTick(() => {\n      if (this.focus) {\n        inputRef.focus()\n      }\n    })\n    this.hasContent = this.value ? 'true' : 'false'\n  },\n  methods: {\n    onBlur() {\n      this.isFocused = false\n\n      this.$emit('blur')\n    },\n    onInput(e) {\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('input', value)\n    },\n    onFocus(e) {\n      this.isFocused = true\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('focus')\n    },\n    handleEnter(e) {\n      if (e.key === 'Enter') {\n        if (this.disableNewline) {\n          e.preventDefault()\n          this.$emit('enter', this.value)\n        }\n      }\n\n      this.$emit('keypress')\n    },\n    onPaste(event) {\n      event.preventDefault()\n      let text = this.formatText\n        ? event.clipboardData.getData('text/plain')\n        : event.clipboardData.getData('text/html')\n\n      if (this.disableNewline || this.formatText) {\n        text = replaceAll(text, '\\r\\n', ' ')\n        text = replaceAll(text, '\\n', ' ')\n        text = replaceAll(text, '\\r', ' ')\n      }\n\n      this.formatText\n        ? document.execCommand('inserttext', false, text)\n        : document.execCommand('insertHTML', false, text)\n\n      !this.formatText && this.$emit('input', text)\n      this.$emit('paste')\n    }\n  }\n};\n</script>\n\n<style scoped>\n.vue-editable-input {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n\n.vue-editable-input:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n\n[placeholder]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n</style>\n"]}, media: undefined });
+      inject("data-v-681f7669_0", { source: "\n.vue-editable-input[data-v-681f7669] {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n.vue-editable-input[data-v-681f7669]:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n[placeholder][data-v-681f7669]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n", map: {"version":3,"sources":["/Users/ranga/demos/vue-contenteditable-input/src/VueContenteditableInput.vue"],"names":[],"mappings":";AAsIA;EACA,gBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;AACA;AAEA;EACA,sCAAA;AACA;AAEA;EACA,0BAAA;EACA,cAAA;AACA","file":"VueContenteditableInput.vue","sourcesContent":["<template>\n  <component\n    :is=\"tag\"\n    class=\"vue-editable-input\"\n    :class=\"{'disabled': !contenteditable}\"\n    :contenteditable=\"contenteditable\"\n    :ref=\"inputRef\"\n    :placeholder=\"placeholder\"\n    v-on=\"listeners\"\n  ></component>\n</template>\n\n<script>\nfunction replaceAll(str, search, replacement) {\n  return str.split(search).join(replacement)\n}\n\nexport default {\n  name: 'VueContenteditableInput',\n  props: {\n    tag: {\n      type: String,\n      default: 'span'\n    },\n    contenteditable: {\n      type: Boolean,\n      default: true\n    },\n    inputRef: {\n      type: String,\n      default: 'editable-input'\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    icon: null,\n    placeholder: {\n      type: String\n    },\n    focus: {\n      type: Boolean\n    },\n    disableNewline: {\n      type: Boolean,\n      default: false\n    },\n    formatText: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      hasContent: false,\n      isFocused: false,\n      focusTimeoutRef: null\n    };\n  },\n  computed: {\n    listeners() {\n      return {\n        ...this.$listeners,\n        input: this.onInput,\n        focus: this.onFocus,\n        blur: this.onBlur,\n        keypress: this.handleEnter,\n        paste: this.onPaste\n      };\n    }\n  },\n  mounted() {\n    const inputRef = this.$refs[this.inputRef]\n    inputRef.innerText = this.value || null\n    this.$nextTick(() => {\n      if (this.focus) {\n        inputRef.focus()\n      }\n    })\n    this.hasContent = this.value ? 'true' : 'false'\n  },\n  methods: {\n    onBlur() {\n      this.isFocused = false\n\n      this.$emit('blur')\n    },\n    onInput(e) {\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('input', value)\n    },\n    onFocus(e) {\n      this.isFocused = true\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('focus')\n    },\n    handleEnter(e) {\n      if (e.key === 'Enter') {\n        if (this.disableNewline) {\n          e.preventDefault()\n          this.$emit('enter', this.value)\n        }\n      }\n\n      this.$emit('keypress')\n    },\n    onPaste(event) {\n      event.preventDefault()\n      let text = this.formatText\n        ? event.clipboardData.getData('text/plain')\n        : event.clipboardData.getData('text/html')\n\n      if (this.disableNewline || this.formatText) {\n        text = replaceAll(text, '\\r\\n', ' ')\n        text = replaceAll(text, '\\n', ' ')\n        text = replaceAll(text, '\\r', ' ')\n      }\n\n      this.formatText\n        ? document.execCommand('inserttext', false, text)\n        : document.execCommand('insertHTML', false, text)\n\n      !this.formatText && this.$emit('input', text)\n      this.$emit('paste')\n    }\n  }\n};\n</script>\n\n<style scoped>\n.vue-editable-input {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n\n.vue-editable-input:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n\n[placeholder]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n</style>\n"]}, media: undefined });
 
     };
     /* scoped */
-    var __vue_scope_id__ = "data-v-b38fad96";
+    var __vue_scope_id__ = "data-v-681f7669";
     /* module identifier */
@@ -326,24 +325,8 @@ var __vue_module_identifier__ = undefined;
 
-  /* eslint-disable */
+  // import contenteditable from './VueContenteditableInput.vue'
 
-  var VueContenteditableInput = {
-    install: function install(Vue) {
-      Vue.component(__vue_component__.name, __vue_component__);
-    }
-  };
+  exports.default = __vue_component__;
 
-  var GlobalVue = null;
-  if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== 'undefined') {
-    GlobalVue = global.Vue;
-  }
-  if (GlobalVue) {
-    GlobalVue.use(VueContenteditableInput);
-  }
-
-  exports.default = VueContenteditableInput;
-
   return exports;
 
 }({}));

dist/vue-contenteditable-input.umd.js

@@ -19,3 +19,2 @@ (function (global, factory) {
   //
-  //
 
@@ -300,7 +299,7 @@ function replaceAll(str, search, replacement) {
       if (!inject) { return }
-      inject("data-v-b38fad96_0", { source: "\n.vue-editable-input[data-v-b38fad96] {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n.vue-editable-input[data-v-b38fad96]:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n[placeholder][data-v-b38fad96]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n", map: {"version":3,"sources":["/Users/ranga/demos/vue-contenteditable-input/src/VueContenteditableInput.vue"],"names":[],"mappings":";AAuIA;EACA,gBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;AACA;AAEA;EACA,sCAAA;AACA;AAEA;EACA,0BAAA;EACA,cAAA;AACA","file":"VueContenteditableInput.vue","sourcesContent":[" /* eslint-disable */\n <template>\n  <component\n    :is=\"tag\"\n    class=\"vue-editable-input\"\n    :class=\"{'disabled': !contenteditable}\"\n    :contenteditable=\"contenteditable\"\n    :ref=\"inputRef\"\n    :placeholder=\"placeholder\"\n    v-on=\"listeners\"\n  ></component>\n</template>\n\n<script>\nfunction replaceAll(str, search, replacement) {\n  return str.split(search).join(replacement)\n}\n\nexport default {\n  name: 'VueContenteditableInput',\n  props: {\n    tag: {\n      type: String,\n      default: 'span'\n    },\n    contenteditable: {\n      type: Boolean,\n      default: true\n    },\n    inputRef: {\n      type: String,\n      default: 'editable-input'\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    icon: null,\n    placeholder: {\n      type: String\n    },\n    focus: {\n      type: Boolean\n    },\n    disableNewline: {\n      type: Boolean,\n      default: false\n    },\n    formatText: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      hasContent: false,\n      isFocused: false,\n      focusTimeoutRef: null\n    };\n  },\n  computed: {\n    listeners() {\n      return {\n        ...this.$listeners,\n        input: this.onInput,\n        focus: this.onFocus,\n        blur: this.onBlur,\n        keypress: this.handleEnter,\n        paste: this.onPaste\n      };\n    }\n  },\n  mounted() {\n    const inputRef = this.$refs[this.inputRef]\n    inputRef.innerText = this.value || null\n    this.$nextTick(() => {\n      if (this.focus) {\n        inputRef.focus()\n      }\n    })\n    this.hasContent = this.value ? 'true' : 'false'\n  },\n  methods: {\n    onBlur() {\n      this.isFocused = false\n\n      this.$emit('blur')\n    },\n    onInput(e) {\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('input', value)\n    },\n    onFocus(e) {\n      this.isFocused = true\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('focus')\n    },\n    handleEnter(e) {\n      if (e.key === 'Enter') {\n        if (this.disableNewline) {\n          e.preventDefault()\n          this.$emit('enter', this.value)\n        }\n      }\n\n      this.$emit('keypress')\n    },\n    onPaste(event) {\n      event.preventDefault()\n      let text = this.formatText\n        ? event.clipboardData.getData('text/plain')\n        : event.clipboardData.getData('text/html')\n\n      if (this.disableNewline || this.formatText) {\n        text = replaceAll(text, '\\r\\n', ' ')\n        text = replaceAll(text, '\\n', ' ')\n        text = replaceAll(text, '\\r', ' ')\n      }\n\n      this.formatText\n        ? document.execCommand('inserttext', false, text)\n        : document.execCommand('insertHTML', false, text)\n\n      !this.formatText && this.$emit('input', text)\n      this.$emit('paste')\n    }\n  }\n};\n</script>\n\n<style scoped>\n.vue-editable-input {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n\n.vue-editable-input:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n\n[placeholder]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n</style>\n"]}, media: undefined });
+      inject("data-v-681f7669_0", { source: "\n.vue-editable-input[data-v-681f7669] {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n.vue-editable-input[data-v-681f7669]:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n[placeholder][data-v-681f7669]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n", map: {"version":3,"sources":["/Users/ranga/demos/vue-contenteditable-input/src/VueContenteditableInput.vue"],"names":[],"mappings":";AAsIA;EACA,gBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;AACA;AAEA;EACA,sCAAA;AACA;AAEA;EACA,0BAAA;EACA,cAAA;AACA","file":"VueContenteditableInput.vue","sourcesContent":["<template>\n  <component\n    :is=\"tag\"\n    class=\"vue-editable-input\"\n    :class=\"{'disabled': !contenteditable}\"\n    :contenteditable=\"contenteditable\"\n    :ref=\"inputRef\"\n    :placeholder=\"placeholder\"\n    v-on=\"listeners\"\n  ></component>\n</template>\n\n<script>\nfunction replaceAll(str, search, replacement) {\n  return str.split(search).join(replacement)\n}\n\nexport default {\n  name: 'VueContenteditableInput',\n  props: {\n    tag: {\n      type: String,\n      default: 'span'\n    },\n    contenteditable: {\n      type: Boolean,\n      default: true\n    },\n    inputRef: {\n      type: String,\n      default: 'editable-input'\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    icon: null,\n    placeholder: {\n      type: String\n    },\n    focus: {\n      type: Boolean\n    },\n    disableNewline: {\n      type: Boolean,\n      default: false\n    },\n    formatText: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      hasContent: false,\n      isFocused: false,\n      focusTimeoutRef: null\n    };\n  },\n  computed: {\n    listeners() {\n      return {\n        ...this.$listeners,\n        input: this.onInput,\n        focus: this.onFocus,\n        blur: this.onBlur,\n        keypress: this.handleEnter,\n        paste: this.onPaste\n      };\n    }\n  },\n  mounted() {\n    const inputRef = this.$refs[this.inputRef]\n    inputRef.innerText = this.value || null\n    this.$nextTick(() => {\n      if (this.focus) {\n        inputRef.focus()\n      }\n    })\n    this.hasContent = this.value ? 'true' : 'false'\n  },\n  methods: {\n    onBlur() {\n      this.isFocused = false\n\n      this.$emit('blur')\n    },\n    onInput(e) {\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('input', value)\n    },\n    onFocus(e) {\n      this.isFocused = true\n      const value = e.target.innerText\n      this.hasContent = value ? 'true' : 'false'\n\n      this.$emit('focus')\n    },\n    handleEnter(e) {\n      if (e.key === 'Enter') {\n        if (this.disableNewline) {\n          e.preventDefault()\n          this.$emit('enter', this.value)\n        }\n      }\n\n      this.$emit('keypress')\n    },\n    onPaste(event) {\n      event.preventDefault()\n      let text = this.formatText\n        ? event.clipboardData.getData('text/plain')\n        : event.clipboardData.getData('text/html')\n\n      if (this.disableNewline || this.formatText) {\n        text = replaceAll(text, '\\r\\n', ' ')\n        text = replaceAll(text, '\\n', ' ')\n        text = replaceAll(text, '\\r', ' ')\n      }\n\n      this.formatText\n        ? document.execCommand('inserttext', false, text)\n        : document.execCommand('insertHTML', false, text)\n\n      !this.formatText && this.$emit('input', text)\n      this.$emit('paste')\n    }\n  }\n};\n</script>\n\n<style scoped>\n.vue-editable-input {\n  min-width: 100px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 10px;\n  outline: none;\n}\n\n.vue-editable-input:focus {\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n}\n\n[placeholder]:empty:before {\n  content: attr(placeholder);\n  color: #676A6D;\n}\n</style>\n"]}, media: undefined });
 
     };
     /* scoped */
-    var __vue_scope_id__ = "data-v-b38fad96";
+    var __vue_scope_id__ = "data-v-681f7669";
     /* module identifier */
@@ -329,24 +328,8 @@ var __vue_module_identifier__ = undefined;
 
-  /* eslint-disable */
+  // import contenteditable from './VueContenteditableInput.vue'
 
-  var VueContenteditableInput = {
-    install: function install(Vue) {
-      Vue.component(__vue_component__.name, __vue_component__);
-    }
-  };
+  exports.default = __vue_component__;
 
-  var GlobalVue = null;
-  if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== 'undefined') {
-    GlobalVue = global.Vue;
-  }
-  if (GlobalVue) {
-    GlobalVue.use(VueContenteditableInput);
-  }
-
-  exports.default = VueContenteditableInput;
-
   Object.defineProperty(exports, '__esModule', { value: true });
 
 })));

package.json

 {
   "name": "vue-contenteditable-input",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Contenteditable directive with v-model, auto focus, preventing new line on enter, formatting html text to plain text etc.,",
@@ -5,0 +5,0 @@ "keywords": [

src/VueContenteditableInput.js

@@ -1,20 +0,22 @@
-import contenteditable from './VueContenteditableInput.vue'
+// import contenteditable from './VueContenteditableInput.vue'
 
-const VueContenteditableInput = {
-  install(Vue) {
-    Vue.component(contenteditable.name, contenteditable)
-  }
-}
+// const VueContenteditableInput = {
+//   install(Vue) {
+//     Vue.component(contenteditable.name, contenteditable)
+//   }
+// }
 
-let GlobalVue = null;
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(VueContenteditableInput);
-}
+// let GlobalVue = null;
+// if (typeof window !== 'undefined') {
+//   GlobalVue = window.Vue;
+// } else if (typeof global !== 'undefined') {
+//   GlobalVue = global.Vue;
+// }
+// if (GlobalVue) {
+//   GlobalVue.use(VueContenteditableInput);
+// }
 
+// export default VueContenteditableInput
+
+import VueContenteditableInput from './VueContenteditableInput.vue'
 export default VueContenteditableInput
-

New alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Fixed 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

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

47644

decreased by-7.16%

Number of package files

7

decreased by-12.5%

Lines of code

965

decreased by-4.27%

Number of medium quality alerts

2

increased by100%

Number of lines in readme file

0

decreased by-100%

No dependency changes