Skip to content

Commit 8ff9775

Browse files
committed
release v0.5.6
1 parent 97122df commit 8ff9775

File tree

6 files changed

+7
-6
lines changed

6 files changed

+7
-6
lines changed

example/nuxt/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
},
99
"devDependencies": {
1010
"nuxt": "3.0.0-rc.1",
11-
"vite-plugin-vue-inspector": "0.5.5"
11+
"vite-plugin-vue-inspector": "0.5.6"
1212
}
1313
}

example/vue2/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"sass": "^1.49.9",
1515
"typescript": "^4.5.2",
1616
"vite": "2.9.1",
17-
"vite-plugin-vue-inspector": "0.5.5",
17+
"vite-plugin-vue-inspector": "0.5.6",
1818
"vite-plugin-vue2": "^1.9.3"
1919
}
2020
}

example/vue3/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
"sass": "^1.49.9",
1616
"typescript": "^4.5.2",
1717
"vite": "2.9.1",
18-
"vite-plugin-vue-inspector": "0.5.5"
18+
"vite-plugin-vue-inspector": "0.5.6"
1919
}
2020
}

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vite-plugin-vue-inspector",
3-
"version": "0.5.5",
3+
"version": "0.5.6",
44
"description": "jump to local IDE source code while click the element of browser automatically.",
55
"keywords": [
66
"vue",

src/overlay/Overlay.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,7 @@ export default {
189189
}
190190
.vue-inspector-control img {
191191
width: 50px;
192+
margin: 0 auto;
192193
}
193194
194195
.vue-inspector-control:hover {

src/overlay/index.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
"v2": {
33
"scripts": "import Vue from \"/node_modules/.vite/deps/vue.js?v=browserHash\"\nvar render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"vue-inspector-control\",class:{disabled: _vm.disabled},style:(_vm.controlStyle),on:{\"click\":function($event){$event.stopPropagation();return _vm.toggleControl.apply(null, arguments)}}},[_c('img',{ref:\"target\",attrs:{\"id\":\"vueInspectorControl\",\"src\":\"https://github.com/webfansplz/vite-plugin-vue-inspector/blob/main/docs/images/logo.png?raw=true\",\"alt\":\"logo\",\"draggable\":\"false\"}})]),_vm._v(\" \"),(_vm.overlayVisible)?_c('ul',{ref:\"overlayTarget\",staticClass:\"vue-inspector-overlay\",style:(_vm.overlayStyle)},[_c('li',[_vm._v(\"\\n file: \"),_c('em',[_vm._v(_vm._s((\"<\" + (_vm.navigationParams.title) + \">\")))])]),_vm._v(\" \"),_c('li',[_vm._v(\"\\n line: \"),_c('em',[_vm._v(_vm._s(_vm.navigationParams.line))])]),_vm._v(\" \"),_c('li',[_vm._v(\"\\n column: \"),_c('em',[_vm._v(_vm._s(_vm.navigationParams.column))])])]):_vm._e()])}\n\n\nconst isClient = typeof window !== \"undefined\"\nconst App = {\n props: {\n enabled: {\n type: Boolean,\n default: true,\n },\n },\n data() {\n return {\n target: null,\n overlayTarget: null,\n disabled: isClient ? !(window.__VUE_INSPECTOR_INITIAL_ENABLED__) : !this.enabled,\n overlayVisible: false,\n\n navigationParams: {\n file: \"\",\n line: 0,\n column: 0,\n },\n position: {\n x: 0,\n y: 0,\n },\n\n // drag control\n controlPosition: {\n x: 0,\n y: 0,\n },\n pressedDelta: undefined,\n }\n },\n computed: {\n controlStyle() {\n if (!isClient) return \"\"\n const left = this.controlPosition.x || window.clientWidth\n const top = this.controlPosition.y || 20\n return `left:${left}px;top:${top}px;`\n },\n overlayStyle() {\n return {\n left: `${\n this.position.x - this.$refs.overlayTarget?.clientWidth / 2 || 0\n }px`,\n top: `${this.position.y + 20}px`,\n }\n },\n },\n mounted() {\n this.$refs.target?.addEventListener(\"pointerdown\", this.dragStart, true)\n window.addEventListener(\"pointermove\", this.dragMove, true)\n window.addEventListener(\"pointerup\", this.dragEnd, true)\n\n window.addEventListener(\"click\", this.onFetch)\n window.addEventListener(\"mousemove\", this.onMouseMove)\n },\n methods: {\n dragStart(e) {\n e.stopPropagation()\n if (e.target !== this.$refs.target) return\n const rect = this.$refs.target?.getBoundingClientRect()\n const pos = {\n x: e.pageX - rect.left,\n y: e.pageY - rect.top,\n }\n this.pressedDelta = pos\n },\n dragMove(e) {\n if (!this.pressedDelta) return\n this.controlPosition = {\n x: e.pageX - this.pressedDelta.x,\n y: e.pageY - this.pressedDelta.y,\n }\n },\n dragEnd() {\n if (!this.pressedDelta) return\n this.pressedDelta = undefined\n },\n\n toggleControl() {\n this.disabled = !this.disabled\n },\n getTargetNode(e) {\n const path = e.path ?? e.composedPath()\n const targetNode = path?.find(node => node?.hasAttribute?.(\"data-v-inspector-file\"))\n if (targetNode?.id === \"vueInspectorControl\") {\n return {\n targetNode: null,\n params: null,\n }\n }\n return {\n targetNode,\n params: targetNode\n ? {\n file: targetNode?.getAttribute?.(\"data-v-inspector-file\"),\n line: targetNode?.getAttribute?.(\"data-v-inspector-line\"),\n column: targetNode?.getAttribute?.(\"data-v-inspector-column\"),\n title: targetNode?.getAttribute?.(\"data-v-inspector-title\"),\n }\n : null,\n }\n },\n onFetch(e) {\n if (this.disabled) return\n e.preventDefault()\n const { targetNode, params } = this.getTargetNode(e)\n if (!targetNode) return\n const { file, line, column } = params\n fetch(\n `/__open-stack-frame-in-editor?file=${file}&line=${line}&column=${column}`,\n )\n this.overlayVisible = false\n },\n onMouseMove(e) {\n if (this.disabled) return\n const { targetNode, params } = this.getTargetNode(e)\n if (targetNode) {\n this.position.x = e.clientX\n this.position.y = e.clientY\n this.overlayVisible = true\n this.navigationParams = params\n }\n else {\n this.overlayVisible = false\n this.navigationParams = {\n file: \"\",\n line: 0,\n column: 0,\n }\n }\n },\n },\n}\nApp.render = render\n new Vue({\n render: h => h(App),\n }).$mount(\"#vite_vue_inspector_overlay_container\")\n ",
44
"overlayContainerScript": "\n const container = document.createElement('div')\n container.style.position = 'fixed'\n container.id = 'vite_vue_inspector_overlay_container'\n document.body.appendChild(container)\n ",
5-
"styles": "\n.vue-inspector-control {\n cursor: pointer;\n position: fixed;\n text-align: center;\n right: 20px;\n top: 20px;\n z-index: 100000;\n width: 60px;\n height: 60px;\n background-color: #fff;\n border: 2px solid #29a8f2;\n border-radius: 50%;\n}\n.vue-inspector-control img {\n width: 50px;\n}\n.vue-inspector-control:hover {\n background-color: #29a8f2;\n}\n.vue-inspector-control.disabled {\n border: 2px dashed #ccc;\n}\n.vue-inspector-control.disabled:hover {\n background-color: #ccc;\n}\n.vue-inspector-control.disabled img {\n opacity: 0.5;\n}\n.vue-inspector-overlay {\n z-index: 100000;\n position: fixed;\n border: 2px dashed #666;\n background-color: rgba(0,0,0,0.8);\n color: #fff;\n padding: 10px;\n border-radius: 5px;\n text-align: left;\n}\n.vue-inspector-overlay li {\n list-style-type: none;\n}\n.vue-inspector-overlay em {\n font-style: normal;\n font-weight: 500;\n}\n"
5+
"styles": "\n.vue-inspector-control {\n cursor: pointer;\n position: fixed;\n text-align: center;\n right: 20px;\n top: 20px;\n z-index: 100000;\n width: 60px;\n height: 60px;\n background-color: #fff;\n border: 2px solid #29a8f2;\n border-radius: 50%;\n}\n.vue-inspector-control img {\n width: 50px;\n margin: 0 auto;\n}\n.vue-inspector-control:hover {\n background-color: #29a8f2;\n}\n.vue-inspector-control.disabled {\n border: 2px dashed #ccc;\n}\n.vue-inspector-control.disabled:hover {\n background-color: #ccc;\n}\n.vue-inspector-control.disabled img {\n opacity: 0.5;\n}\n.vue-inspector-overlay {\n z-index: 100000;\n position: fixed;\n border: 2px dashed #666;\n background-color: rgba(0,0,0,0.8);\n color: #fff;\n padding: 10px;\n border-radius: 5px;\n text-align: left;\n}\n.vue-inspector-overlay li {\n list-style-type: none;\n}\n.vue-inspector-overlay em {\n font-style: normal;\n font-weight: 500;\n}\n"
66
},
77
"v3": {
88
"scripts": "import { createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"/node_modules/.vite/deps/vue.js?v=browserHash\"\n\nconst _hoisted_1 = {\n id: \"vueInspectorControl\",\n ref: \"target\",\n src: \"https://github.com/webfansplz/vite-plugin-vue-inspector/blob/main/docs/images/logo.png?raw=true\",\n alt: \"logo\",\n draggable: \"false\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createTextVNode(\" file: \")\nconst _hoisted_3 = /*#__PURE__*/_createTextVNode(\" line: \")\nconst _hoisted_4 = /*#__PURE__*/_createTextVNode(\" column: \")\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"div\", null, [\n _createCommentVNode(\" switch control \"),\n _createElementVNode(\"div\", {\n class: _normalizeClass([\"vue-inspector-control\", {disabled: _ctx.disabled}]),\n style: _normalizeStyle(_ctx.controlStyle),\n onClick: _cache[0] || (_cache[0] = _withModifiers((...args) => (_ctx.toggleControl && _ctx.toggleControl(...args)), [\"stop\"]))\n }, [\n _createElementVNode(\"img\", _hoisted_1, null, 512 /* NEED_PATCH */)\n ], 6 /* CLASS, STYLE */),\n _createCommentVNode(\" overlay \"),\n (_ctx.overlayVisible)\n ? (_openBlock(), _createElementBlock(\"ul\", {\n key: 0,\n ref: \"overlayTarget\",\n class: \"vue-inspector-overlay\",\n style: _normalizeStyle(_ctx.overlayStyle)\n }, [\n _createElementVNode(\"li\", null, [\n _hoisted_2,\n _createElementVNode(\"em\", null, _toDisplayString(`<${_ctx.navigationParams.title}>`), 1 /* TEXT */)\n ]),\n _createElementVNode(\"li\", null, [\n _hoisted_3,\n _createElementVNode(\"em\", null, _toDisplayString(_ctx.navigationParams.line), 1 /* TEXT */)\n ]),\n _createElementVNode(\"li\", null, [\n _hoisted_4,\n _createElementVNode(\"em\", null, _toDisplayString(_ctx.navigationParams.column), 1 /* TEXT */)\n ])\n ], 4 /* STYLE */))\n : _createCommentVNode(\"v-if\", true)\n ]))\n}\nconst isClient = typeof window !== \"undefined\"\nconst App = {\n props: {\n enabled: {\n type: Boolean,\n default: true,\n },\n },\n data() {\n return {\n target: null,\n overlayTarget: null,\n disabled: isClient ? !(window.__VUE_INSPECTOR_INITIAL_ENABLED__) : !this.enabled,\n overlayVisible: false,\n\n navigationParams: {\n file: \"\",\n line: 0,\n column: 0,\n },\n position: {\n x: 0,\n y: 0,\n },\n\n // drag control\n controlPosition: {\n x: 0,\n y: 0,\n },\n pressedDelta: undefined,\n }\n },\n computed: {\n controlStyle() {\n if (!isClient) return \"\"\n const left = this.controlPosition.x || window.clientWidth\n const top = this.controlPosition.y || 20\n return `left:${left}px;top:${top}px;`\n },\n overlayStyle() {\n return {\n left: `${\n this.position.x - this.$refs.overlayTarget?.clientWidth / 2 || 0\n }px`,\n top: `${this.position.y + 20}px`,\n }\n },\n },\n mounted() {\n this.$refs.target?.addEventListener(\"pointerdown\", this.dragStart, true)\n window.addEventListener(\"pointermove\", this.dragMove, true)\n window.addEventListener(\"pointerup\", this.dragEnd, true)\n\n window.addEventListener(\"click\", this.onFetch)\n window.addEventListener(\"mousemove\", this.onMouseMove)\n },\n methods: {\n dragStart(e) {\n e.stopPropagation()\n if (e.target !== this.$refs.target) return\n const rect = this.$refs.target?.getBoundingClientRect()\n const pos = {\n x: e.pageX - rect.left,\n y: e.pageY - rect.top,\n }\n this.pressedDelta = pos\n },\n dragMove(e) {\n if (!this.pressedDelta) return\n this.controlPosition = {\n x: e.pageX - this.pressedDelta.x,\n y: e.pageY - this.pressedDelta.y,\n }\n },\n dragEnd() {\n if (!this.pressedDelta) return\n this.pressedDelta = undefined\n },\n\n toggleControl() {\n this.disabled = !this.disabled\n },\n getTargetNode(e) {\n const path = e.path ?? e.composedPath()\n const targetNode = path?.find(node => node?.hasAttribute?.(\"data-v-inspector-file\"))\n if (targetNode?.id === \"vueInspectorControl\") {\n return {\n targetNode: null,\n params: null,\n }\n }\n return {\n targetNode,\n params: targetNode\n ? {\n file: targetNode?.getAttribute?.(\"data-v-inspector-file\"),\n line: targetNode?.getAttribute?.(\"data-v-inspector-line\"),\n column: targetNode?.getAttribute?.(\"data-v-inspector-column\"),\n title: targetNode?.getAttribute?.(\"data-v-inspector-title\"),\n }\n : null,\n }\n },\n onFetch(e) {\n if (this.disabled) return\n e.preventDefault()\n const { targetNode, params } = this.getTargetNode(e)\n if (!targetNode) return\n const { file, line, column } = params\n fetch(\n `/__open-stack-frame-in-editor?file=${file}&line=${line}&column=${column}`,\n )\n this.overlayVisible = false\n },\n onMouseMove(e) {\n if (this.disabled) return\n const { targetNode, params } = this.getTargetNode(e)\n if (targetNode) {\n this.position.x = e.clientX\n this.position.y = e.clientY\n this.overlayVisible = true\n this.navigationParams = params\n }\n else {\n this.overlayVisible = false\n this.navigationParams = {\n file: \"\",\n line: 0,\n column: 0,\n }\n }\n },\n },\n}\nApp.render = render\n import { createApp } from \"/node_modules/.vite/deps/vue.js?v=browserHash\"\n createApp(App).mount('#vite_vue_inspector_overlay_container')\n ",
99
"overlayContainerScript": "\n const container = document.createElement('div')\n container.style.position = 'fixed'\n container.id = 'vite_vue_inspector_overlay_container'\n document.body.appendChild(container)\n ",
10-
"styles": "\n.vue-inspector-control {\n cursor: pointer;\n position: fixed;\n text-align: center;\n right: 20px;\n top: 20px;\n z-index: 100000;\n width: 60px;\n height: 60px;\n background-color: #fff;\n border: 2px solid #29a8f2;\n border-radius: 50%;\n}\n.vue-inspector-control img {\n width: 50px;\n}\n.vue-inspector-control:hover {\n background-color: #29a8f2;\n}\n.vue-inspector-control.disabled {\n border: 2px dashed #ccc;\n}\n.vue-inspector-control.disabled:hover {\n background-color: #ccc;\n}\n.vue-inspector-control.disabled img {\n opacity: 0.5;\n}\n.vue-inspector-overlay {\n z-index: 100000;\n position: fixed;\n border: 2px dashed #666;\n background-color: rgba(0,0,0,0.8);\n color: #fff;\n padding: 10px;\n border-radius: 5px;\n text-align: left;\n}\n.vue-inspector-overlay li {\n list-style-type: none;\n}\n.vue-inspector-overlay em {\n font-style: normal;\n font-weight: 500;\n}\n"
10+
"styles": "\n.vue-inspector-control {\n cursor: pointer;\n position: fixed;\n text-align: center;\n right: 20px;\n top: 20px;\n z-index: 100000;\n width: 60px;\n height: 60px;\n background-color: #fff;\n border: 2px solid #29a8f2;\n border-radius: 50%;\n}\n.vue-inspector-control img {\n width: 50px;\n margin: 0 auto;\n}\n.vue-inspector-control:hover {\n background-color: #29a8f2;\n}\n.vue-inspector-control.disabled {\n border: 2px dashed #ccc;\n}\n.vue-inspector-control.disabled:hover {\n background-color: #ccc;\n}\n.vue-inspector-control.disabled img {\n opacity: 0.5;\n}\n.vue-inspector-overlay {\n z-index: 100000;\n position: fixed;\n border: 2px dashed #666;\n background-color: rgba(0,0,0,0.8);\n color: #fff;\n padding: 10px;\n border-radius: 5px;\n text-align: left;\n}\n.vue-inspector-overlay li {\n list-style-type: none;\n}\n.vue-inspector-overlay em {\n font-style: normal;\n font-weight: 500;\n}\n"
1111
}
1212
}

0 commit comments

Comments
 (0)