btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: lint

Browse Source
This commit is contained in:
liyasthomas
2021-05-18 14:57:29 +05:30
parent 7f248da0b3
commit cc27c552af
84 changed files with 1444 additions and 973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/smart/AccentModePicker.vue
View File

@@ -1,6 +1,9 @@
<template>
<div class="flex flex-col">
<label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
<label
>{{ $t("color") }}:
{{ active.charAt(0).toUpperCase() + active.slice(1) }}</label
>
<div>
<!-- text-blue-400 -->
<!-- text-green-400 -->
@@ -56,16 +59,16 @@ export default {
],
}
},
watch: {
active(color) {
localStorage.setItem("THEME_COLOR", color)
},
},
methods: {
setActiveColor(color) {
document.documentElement.setAttribute("data-accent", color)
this.active = color
},
},
watch: {
active(color) {
localStorage.setItem("THEME_COLOR", color)
},
},
}
</script>

442
components/smart/AceEditor.vue
View File

@@ -1,18 +1,25 @@
<template>
<div class="show-if-initialized" :class="{ initialized }">
<div class="outline" v-if="lang == 'json'">
<div class="block" v-for="(p, index) in currPath" :key="index">
<div v-if="lang == 'json'" class="outline">
<div v-for="(p, index) in currPath" :key="index" class="block">
<div class="label" @click="onBlockClick(index)">
{{ p }}
</div>
<i v-if="index + 1 !== currPath.length" class="material-icons">chevron_right</i>
<div
class="siblings"
v-if="sibDropDownIndex == index"
@mouseleave="clearSibList"
:ref="`sibling-${index}`"
<i v-if="index + 1 !== currPath.length" class="material-icons"
>chevron_right</i
>
<div class="sib" v-for="(sib, i) in currSib" :key="i" @click="goToSib(sib)">
<div
v-if="sibDropDownIndex == index"
:ref="`sibling-${index}`"
class="siblings"
@mouseleave="clearSibList"
>
<div
v-for="(sib, i) in currSib"
:key="i"
class="sib"
@click="goToSib(sib)"
>
{{ sib.key ? sib.key.value : i }}
</div>
</div>
@@ -22,6 +29,220 @@
</div>
</template>
<script>
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import jsonParse from "~/helpers/jsonParse"
import debounce from "~/helpers/utils/debounce"
import outline from "~/helpers/outline"
export default {
props: {
provideJSONOutline: {
type: Boolean,
default: false,
required: false,
},
value: {
type: String,
default: "",
},
theme: {
type: String,
required: false,
default: null,
},
lang: {
type: String,
default: "json",
},
lint: {
type: Boolean,
default: true,
required: false,
},
options: {
type: Object,
default: () => {},
},
styles: {
type: String,
default: "",
},
},
data() {
return {
initialized: false,
editor: null,
cacheValue: "",
outline: outline(),
currPath: [],
currSib: [],
sibDropDownIndex: null,
}
},
watch: {
value(value) {
if (value !== this.cacheValue) {
this.editor.session.setValue(value, 1)
this.cacheValue = value
if (this.lint) this.provideLinting(value)
}
},
theme() {
this.initialized = false
this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
this.$nextTick().then(() => {
this.initialized = true
})
})
},
lang(value) {
this.editor.getSession().setMode(`ace/mode/${value}`)
},
options(value) {
this.editor.setOptions(value)
},
},
mounted() {
const editor = ace.edit(this.$refs.editor, {
mode: `ace/mode/${this.lang}`,
...this.options,
})
// Set the theme and show the editor only after it's been set to prevent FOUC.
editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
this.$nextTick().then(() => {
this.initialized = true
})
})
if (this.value) editor.setValue(this.value, 1)
this.editor = editor
this.cacheValue = this.value
if (this.lang === "json" && this.provideJSONOutline)
this.initOutline(this.value)
editor.on("change", () => {
const content = editor.getValue()
this.$emit("input", content)
this.cacheValue = content
if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
if (this.lint) this.provideLinting(content)
})
if (this.lang === "json" && this.provideJSONOutline) {
editor.session.selection.on("changeCursor", () => {
const index = editor.session.doc.positionToIndex(
editor.selection.getCursor(),
0
)
const path = this.outline.genPath(index)
if (path.success) {
this.currPath = path.res
}
})
document.addEventListener("touchstart", this.onTouchStart)
}
// Disable linting, if lint prop is false
if (this.lint) this.provideLinting(this.value)
},
destroyed() {
this.editor.destroy()
document.removeEventListener("touchstart", this.onTouchStart)
},
methods: {
defineTheme() {
if (this.theme) {
return this.theme
}
const strip = (str) =>
str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--editor-theme")
)
},
provideLinting: debounce(function (code) {
if (this.lang === "json") {
try {
jsonParse(code)
this.editor.session.setAnnotations([])
} catch (e) {
const pos = this.editor.session
.getDocument()
.indexToPosition(e.start, 0)
this.editor.session.setAnnotations([
{
row: pos.row,
column: pos.column,
text: e.message,
type: "error",
},
])
}
}
}, 2000),
onBlockClick(index) {
if (this.sibDropDownIndex === index) {
this.clearSibList()
} else {
this.currSib = this.outline.getSiblings(index)
if (this.currSib.length) this.sibDropDownIndex = index
}
},
clearSibList() {
this.currSib = []
this.sibDropDownIndex = null
},
goToSib(obj) {
this.clearSibList()
if (obj.start) {
const pos = this.editor.session.doc.indexToPosition(obj.start, 0)
if (pos) {
this.editor.session.selection.moveCursorTo(pos.row, pos.column, true)
this.editor.session.selection.clearSelection()
this.editor.scrollToLine(pos.row, false, true, null)
}
}
},
initOutline: debounce(function (content) {
if (this.lang === "json") {
try {
this.outline.init(content)
if (content[0] === "[") this.currPath.push("[]")
else this.currPath.push("{}")
} catch (e) {
console.log("Outline error: ", e)
}
}
}),
onTouchStart(e) {
if (
this.sibDropDownIndex !== null &&
e.target.parentElement !==
this.$refs[`sibling-${this.sibDropDownIndex}`][0]
) {
this.clearSibList()
}
},
},
}
</script>
<style lang="scss">
.show-if-initialized {
@apply opacity-0;
@@ -90,206 +311,3 @@
}
}
</style>
<script>
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import jsonParse from "~/helpers/jsonParse"
import debounce from "~/helpers/utils/debounce"
import outline from "~/helpers/outline"
export default {
props: {
provideJSONOutline: {
type: Boolean,
default: false,
required: false,
},
value: {
type: String,
default: "",
},
theme: {
type: String,
required: false,
default: null,
},
lang: {
type: String,
default: "json",
},
lint: {
type: Boolean,
default: true,
required: false,
},
options: {
type: Object,
default: {},
},
styles: {
type: String,
default: "",
},
},
data() {
return {
initialized: false,
editor: null,
cacheValue: "",
outline: outline(),
currPath: [],
currSib: [],
sibDropDownIndex: null,
}
},
watch: {
value(value) {
if (value !== this.cacheValue) {
this.editor.session.setValue(value, 1)
this.cacheValue = value
if (this.lint) this.provideLinting(value)
}
},
theme() {
this.initialized = false
this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
this.$nextTick().then(() => {
this.initialized = true
})
})
},
lang(value) {
this.editor.getSession().setMode(`ace/mode/${value}`)
},
options(value) {
this.editor.setOptions(value)
},
},
mounted() {
const editor = ace.edit(this.$refs.editor, {
mode: `ace/mode/${this.lang}`,
...this.options,
})
// Set the theme and show the editor only after it's been set to prevent FOUC.
editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
this.$nextTick().then(() => {
this.initialized = true
})
})
if (this.value) editor.setValue(this.value, 1)
this.editor = editor
this.cacheValue = this.value
if (this.lang === "json" && this.provideJSONOutline) this.initOutline(this.value)
editor.on("change", () => {
const content = editor.getValue()
this.$emit("input", content)
this.cacheValue = content
if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
if (this.lint) this.provideLinting(content)
})
if (this.lang === "json" && this.provideJSONOutline) {
editor.session.selection.on("changeCursor", (e) => {
const index = editor.session.doc.positionToIndex(editor.selection.getCursor(), 0)
const path = this.outline.genPath(index)
if (path.success) {
this.currPath = path.res
}
})
document.addEventListener("touchstart", this.onTouchStart)
}
// Disable linting, if lint prop is false
if (this.lint) this.provideLinting(this.value)
},
methods: {
defineTheme() {
if (this.theme) {
return this.theme
}
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
)
},
provideLinting: debounce(function (code) {
if (this.lang === "json") {
try {
jsonParse(code)
this.editor.session.setAnnotations([])
} catch (e) {
const pos = this.editor.session.getDocument().indexToPosition(e.start, 0)
this.editor.session.setAnnotations([
{
row: pos.row,
column: pos.column,
text: e.message,
type: "error",
},
])
}
}
}, 2000),
onBlockClick(index) {
if (this.sibDropDownIndex == index) {
this.clearSibList()
} else {
this.currSib = this.outline.getSiblings(index)
if (this.currSib.length) this.sibDropDownIndex = index
}
},
clearSibList() {
this.currSib = []
this.sibDropDownIndex = null
},
goToSib(obj) {
this.clearSibList()
if (obj.start) {
let pos = this.editor.session.doc.indexToPosition(obj.start, 0)
if (pos) {
this.editor.session.selection.moveCursorTo(pos.row, pos.column, true)
this.editor.session.selection.clearSelection()
this.editor.scrollToLine(pos.row, false, true, null)
}
}
},
initOutline: debounce(function (content) {
if (this.lang == "json") {
try {
this.outline.init(content)
if (content[0] == "[") this.currPath.push("[]")
else this.currPath.push("{}")
} catch (e) {
console.log("Outline error: ", e)
}
}
}),
onTouchStart(e) {
if (this.sibDropDownIndex == null) return
else {
if (e.target.parentElement != this.$refs[`sibling-${this.sibDropDownIndex}`][0]) {
this.clearSibList()
}
}
},
},
destroyed() {
this.editor.destroy()
document.removeEventListener("touchstart", this.onTouchStart)
},
}
</script>

311
components/smart/AutoComplete.vue
View File

@@ -1,29 +1,29 @@
<template>
<div class="autocomplete-wrapper">
<input
ref="acInput"
v-model="text"
type="text"
:placeholder="placeholder"
v-model="text"
@input="updateSuggestions"
@keyup="updateSuggestions"
@click="updateSuggestions"
@keydown="handleKeystroke"
ref="acInput"
:spellcheck="spellcheck"
:autocapitalize="autocapitalize"
:autocorrect="spellcheck"
:class="styles"
@input="updateSuggestions"
@keyup="updateSuggestions"
@click="updateSuggestions"
@keydown="handleKeystroke"
/>
<ul
class="suggestions"
v-if="suggestions.length > 0 && suggestionsVisible"
class="suggestions"
:style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
>
<li
v-for="(suggestion, index) in suggestions"
@click.prevent="forceSuggestion(suggestion)"
:class="{ active: currentSuggestionIndex === index }"
:key="index"
:class="{ active: currentSuggestionIndex === index }"
@click.prevent="forceSuggestion(suggestion)"
>
{{ suggestion }}
</li>
@@ -31,6 +31,155 @@
</div>
</template>
<script>
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false,
},
autocapitalize: {
type: String,
default: "off",
required: false,
},
placeholder: {
type: String,
default: "",
required: false,
},
source: {
type: Array,
required: true,
},
value: {
type: String,
default: "",
required: false,
},
styles: {
type: String,
default: "",
},
},
data() {
return {
text: this.value,
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false,
}
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
const input = this.text.substring(0, this.selectionStart)
return (
this.source
.filter(
(entry) =>
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
)
// Cut off the part that's already been typed.
.map((entry) => entry.substring(this.selectionStart))
// We only want the top 6 suggestions.
.slice(0, 6)
)
},
},
watch: {
text() {
this.$emit("input", this.text)
},
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput,
})
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.code && event.code === "Escape") {
event.preventDefault()
this.suggestionsVisible = false
this.currentSuggestionIndex = -1
return
}
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart
this.suggestionsOffsetLeft = 12 * this.selectionStart
this.suggestionsVisible = true
},
forceSuggestion(text) {
const input = this.text.substring(0, this.selectionStart)
this.text = input + text
this.selectionStart = this.text.length
this.suggestionsVisible = true
this.currentSuggestionIndex = -1
},
handleKeystroke(event) {
switch (event.code) {
case "ArrowUp":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0
break
case "ArrowDown":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1
break
case "Tab": {
const activeSuggestion =
this.suggestions[
this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
]
if (!activeSuggestion) {
return
}
event.preventDefault()
const input = this.text.substring(0, this.selectionStart)
this.text = input + activeSuggestion
break
}
}
},
},
}
</script>
<style scoped lang="scss">
.autocomplete-wrapper {
@apply relative;
@@ -78,147 +227,3 @@
}
}
</style>
<script>
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false,
},
autocapitalize: {
type: String,
default: "off",
required: false,
},
placeholder: {
type: String,
default: "",
required: false,
},
source: {
type: Array,
required: true,
},
value: {
type: String,
default: "",
required: false,
},
styles: {
type: String,
default: "",
},
},
watch: {
text() {
this.$emit("input", this.text)
},
},
data() {
return {
text: this.value,
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false,
}
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.code && event.code === "Escape") {
event.preventDefault()
this.suggestionsVisible = false
this.currentSuggestionIndex = -1
return
}
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart
this.suggestionsOffsetLeft = 12 * this.selectionStart
this.suggestionsVisible = true
},
forceSuggestion(text) {
let input = this.text.substring(0, this.selectionStart)
this.text = input + text
this.selectionStart = this.text.length
this.suggestionsVisible = true
this.currentSuggestionIndex = -1
},
handleKeystroke(event) {
switch (event.code) {
case "ArrowUp":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0
break
case "ArrowDown":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1
break
case "Tab":
let activeSuggestion =
this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0]
if (!activeSuggestion) {
return
}
event.preventDefault()
let input = this.text.substring(0, this.selectionStart)
this.text = input + activeSuggestion
break
}
},
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.text.substring(0, this.selectionStart)
return (
this.source
.filter(
(entry) =>
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
)
// Cut off the part that's already been typed.
.map((entry) => entry.substring(this.selectionStart))
// We only want the top 6 suggestions.
.slice(0, 6)
)
},
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput,
})
},
}
</script>

5
components/smart/ColorModePicker.vue
View File

@@ -3,7 +3,10 @@
<label>
<ColorScheme placeholder="..." tag="span">
{{ $t("background") }}:
{{ $colorMode.preference.charAt(0).toUpperCase() + $colorMode.preference.slice(1) }}
{{
$colorMode.preference.charAt(0).toUpperCase() +
$colorMode.preference.slice(1)
}}
<span v-if="$colorMode.preference === 'system'">
({{ $colorMode.value }} mode detected)
</span>

14
components/smart/ConfirmModal.vue
View File

@@ -33,21 +33,21 @@
export default {
props: {
show: Boolean,
title: "",
title: { type: String, default: "" },
yes: {
type: String,
default: function () {
default() {
return this.$t("yes")
},
},
no: {
type: String,
default: function () {
default() {
return this.$t("no")
},
},
},
async mounted() {
mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
@@ -56,6 +56,9 @@ export default {
}
document.addEventListener("keydown", this._keyListener.bind(this))
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
hideModal() {
this.$emit("hide-modal")
@@ -64,8 +67,5 @@ export default {
this.$emit("resolve")
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>

2
components/smart/Intersection.vue
View File

@@ -1,6 +1,6 @@
<template>
<div ref="container">
<slot />
<slot></slot>
</div>
</template>
<script lang="ts">

72
components/smart/JsEditor.vue
View File

@@ -4,25 +4,12 @@
</div>
</template>
<style lang="scss">
.show-if-initialized {
@apply opacity-0;
&.initialized {
@apply opacity-100;
}
& > * {
@apply transition-none;
}
}
</style>
<script>
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import "ace-builds/src-noconflict/ext-language_tools"
import "ace-builds/src-noconflict/mode-graphqlschema"
import * as esprima from "esprima"
import debounce from "~/helpers/utils/debounce"
import {
getPreRequestScriptCompletions,
@@ -30,8 +17,6 @@ import {
performPreRequestLinting,
} from "~/helpers/tern"
import * as esprima from "esprima"
export default {
props: {
value: {
@@ -45,7 +30,7 @@ export default {
},
options: {
type: Object,
default: {},
default: () => {},
},
styles: {
type: String,
@@ -115,7 +100,13 @@ export default {
})
const completer = {
getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
getCompletions: (
editor,
_session,
{ row, column },
_prefix,
callback
) => {
if (this.completeMode === "pre") {
getPreRequestScriptCompletions(editor.getValue(), row, column)
.then((res) => {
@@ -165,14 +156,21 @@ export default {
this.provideLinting(this.value)
},
destroyed() {
this.editor.destroy()
},
methods: {
defineTheme() {
if (this.theme) {
return this.theme
}
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
const strip = (str) =>
str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--editor-theme")
)
},
@@ -195,7 +193,9 @@ export default {
if (res.errors && res.errors.length > 0) {
results = results.concat(
res.errors.map((err) => {
const pos = this.editor.session.getDocument().indexToPosition(err.index, 0)
const pos = this.editor.session
.getDocument()
.indexToPosition(err.index, 0)
return {
row: pos.row,
@@ -207,7 +207,9 @@ export default {
)
}
} catch (e) {
const pos = this.editor.session.getDocument().indexToPosition(e.index, 0)
const pos = this.editor.session
.getDocument()
.indexToPosition(e.index, 0)
results = results.concat([
{
row: pos.row,
@@ -226,7 +228,9 @@ export default {
if (res.errors && res.errors.length > 0) {
results = results.concat(
res.errors.map((err) => {
const pos = this.editor.session.getDocument().indexToPosition(err.index, 0)
const pos = this.editor.session
.getDocument()
.indexToPosition(err.index, 0)
return {
row: pos.row,
@@ -238,7 +242,9 @@ export default {
)
}
} catch (e) {
const pos = this.editor.session.getDocument().indexToPosition(e.index, 0)
const pos = this.editor.session
.getDocument()
.indexToPosition(e.index, 0)
results = results.concat([
{
row: pos.row,
@@ -253,9 +259,19 @@ export default {
})
}, 2000),
},
destroyed() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
.show-if-initialized {
@apply opacity-0;
&.initialized {
@apply opacity-100;
}
& > * {
@apply transition-none;
}
}
</style>

20
components/smart/Modal.vue
View File

@@ -20,6 +20,16 @@
</transition>
</template>
<script>
export default {
computed: {
hasFooterSlot() {
return !!this.$slots.footer
},
},
}
</script>
<style scoped lang="scss">
.modal-backdrop {
@apply fixed;
@@ -118,13 +128,3 @@
}
}
</style>
<script>
export default {
computed: {
hasFooterSlot() {
return !!this.$slots.footer
},
},
}
</script>

2
components/smart/Tab.vue
View File

@@ -9,7 +9,7 @@ export default {
props: {
label: { type: String, default: "" },
icon: { type: String, default: "" },
id: { required: true },
id: { type: String, default: "", required: true },
selected: {
type: Boolean,
default: false,

64
components/smart/Tabs.vue
View File

@@ -4,8 +4,8 @@
<ul>
<li
v-for="(tab, index) in tabs"
:class="{ 'is-active': tab.isActive }"
:key="index"
:class="{ 'is-active': tab.isActive }"
:tabindex="0"
@keyup.enter="selectTab(tab)"
>
@@ -24,6 +24,36 @@
</section>
</template>
<script>
export default {
props: {
styles: {
type: String,
default: "",
},
},
data() {
return {
tabs: [],
}
},
created() {
this.tabs = this.$children
},
methods: {
selectTab({ id }) {
this.tabs.forEach((tab) => {
tab.isActive = tab.id === id
})
this.$emit("tab-changed", id)
},
},
}
</script>
<style scoped lang="scss">
.tabs-wrapper {
@apply flex;
@@ -90,35 +120,3 @@
}
}
</style>
<script>
import Section from "../app/Section.vue"
export default {
components: { Section },
props: {
styles: {
type: String,
default: "",
},
},
data() {
return {
tabs: [],
}
},
created() {
this.tabs = this.$children
},
methods: {
selectTab({ id }) {
this.tabs.forEach((tab) => {
tab.isActive = tab.id == id
})
this.$emit("tab-changed", id)
},
},
}
</script>

42
components/smart/Toggle.vue
View File

@@ -1,14 +1,32 @@
<template>
<div @click="toggle()" class="inline-block cursor-pointer">
<label class="toggle" :class="{ on: on }" ref="toggle">
<div class="inline-block cursor-pointer" @click="toggle()">
<label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span>
</label>
<label class="pl-0 align-middle cursor-pointer">
<slot />
<slot></slot>
</label>
</div>
</template>
<script>
export default {
props: {
on: {
type: Boolean,
default: false,
},
},
methods: {
toggle() {
const containsOnClass = this.$refs.toggle.classList.toggle("on")
this.$emit("change", containsOnClass)
},
},
}
</script>
<style scoped lang="scss">
$useBorder: false;
$borderColor: var(--fg-light-color);
@@ -63,21 +81,3 @@ $transition: all 0.2s ease-in-out;
}
}
</style>
<script>
export default {
props: {
on: {
type: Boolean,
default: false,
},
},
methods: {
toggle() {
const containsOnClass = this.$refs.toggle.classList.toggle("on")
this.$emit("change", containsOnClass)
},
},
}
</script>

72
components/smart/UrlField.vue
View File

@@ -1,31 +1,7 @@
<template>
<div contenteditable class="url-field" ref="editor" spellcheck="false"></div>
<div ref="editor" contenteditable class="url-field" spellcheck="false"></div>
</template>
<style lang="scss">
.url-field {
@apply border-dashed;
@apply md:border-l;
@apply border-brdColor;
}
.highlight-VAR {
@apply font-bold;
@apply text-acColor;
}
.highlight-TEXT {
@apply overflow-auto;
@apply break-all;
height: 22px;
}
.highlight-TEXT::-webkit-scrollbar {
@apply hidden;
}
</style>
<script>
export default {
props: {
@@ -80,7 +56,11 @@ export default {
let index = 0
while ((match = text.substring(index).match(regex))) {
map.push([index, index + (match.index - 1), "TEXT"])
map.push([index + match.index, index + match.index + match[0].length - 1, "VAR"])
map.push([
index + match.index,
index + match.index + match[0].length - 1,
"VAR",
])
index += match.index + match[0].length
if (index >= text.length - 1) break
@@ -101,7 +81,11 @@ export default {
break
case Node.ELEMENT_NODE:
textSegments.splice(textSegments.length, 0, ...this.getTextSegments(node))
textSegments.splice(
textSegments.length,
0,
...this.getTextSegments(node)
)
break
}
})
@@ -118,11 +102,17 @@ export default {
textSegments.forEach(({ text, node }) => {
const startIndexOfNode = currentIndex
const endIndexOfNode = startIndexOfNode + text.length
if (startIndexOfNode <= absoluteAnchorIndex && absoluteAnchorIndex <= endIndexOfNode) {
if (
startIndexOfNode <= absoluteAnchorIndex &&
absoluteAnchorIndex <= endIndexOfNode
) {
anchorNode = node
anchorIndex = absoluteAnchorIndex - startIndexOfNode
}
if (startIndexOfNode <= absoluteFocusIndex && absoluteFocusIndex <= endIndexOfNode) {
if (
startIndexOfNode <= absoluteFocusIndex &&
absoluteFocusIndex <= endIndexOfNode
) {
focusNode = node
focusIndex = absoluteFocusIndex - startIndexOfNode
}
@@ -161,3 +151,27 @@ export default {
},
}
</script>
<style lang="scss">
.url-field {
@apply border-dashed;
@apply md:border-l;
@apply border-brdColor;
}
.highlight-VAR {
@apply font-bold;
@apply text-acColor;
}
.highlight-TEXT {
@apply overflow-auto;
@apply break-all;
height: 22px;
}
.highlight-TEXT::-webkit-scrollbar {
@apply hidden;
}
</style>

38
components/smart/__tests__/AutoComplete.spec.js
View File

@@ -1,5 +1,5 @@
import autocomplete from "../AutoComplete"
import { mount } from "@vue/test-utils"
import autocomplete from "../AutoComplete"
const props = {
placeholder: "",
@@ -9,7 +9,9 @@ const props = {
}
// ["pp", "pple", "ppliance", "lice"]
const suggestionStr = props.source.filter((str) => str.startsWith("a")).map((str) => str.slice(1))
const suggestionStr = props.source
.filter((str) => str.startsWith("a"))
.map((str) => str.slice(1))
const factory = (props) =>
mount(autocomplete, {
@@ -118,7 +120,9 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
})
test("pressing down arrow when nothing is selected selects the first in the list", async () => {
@@ -134,7 +138,9 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
})
test("pressing down arrow moves down the selection list", async () => {
@@ -154,7 +160,9 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(1).element.classList.contains("active")
).toEqual(true)
})
test("pressing up arrow moves up the selection list", async () => {
@@ -179,7 +187,9 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
})
test("pressing down arrow at the end of the list doesn't update the selection", async () => {
@@ -199,14 +209,18 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(1).element.classList.contains("active")
).toEqual(true)
await input.trigger("keydown", {
code: "ArrowDown",
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(1).element.classList.contains("active")
).toEqual(true)
})
test("pressing up arrow at the top of the list doesn't update the selection", async () => {
@@ -226,14 +240,18 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
await input.trigger("keydown", {
code: "ArrowUp",
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
})
test("pressing tab performs the current completion", async () => {

2
components/smart/__tests__/Tab.spec.js
View File

@@ -1,5 +1,5 @@
import tab from "../Tab"
import { mount } from "@vue/test-utils"
import tab from "../Tab"
const factory = (props, data) => {
if (data) {

5
components/smart/__tests__/Tabs.spec.js
View File

@@ -1,8 +1,7 @@
import { mount } from "@vue/test-utils"
import tabs from "../Tabs"
import tab from "../Tab"
import { mount } from "@vue/test-utils"
const factory = () =>
mount(tabs, {
slots: {
@@ -13,7 +12,7 @@ const factory = () =>
],
},
stubs: {
"Tab": tab,
Tab: tab,
},
})

2
components/smart/__tests__/Toggle.spec.js
View File

@@ -1,5 +1,5 @@
import pwToggle from "../Toggle"
import { mount } from "@vue/test-utils"
import pwToggle from "../Toggle"
const factory = (props, slot) =>
mount(pwToggle, {

2
components/smart/__tests__/UrlField.spec.js
View File

@@ -1,5 +1,5 @@
import urlField from "../UrlField"
import { mount } from "@vue/test-utils"
import urlField from "../UrlField"
const factory = (props) =>
mount(urlField, {