tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-31 01:24:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

clean up path before emitting

Browse Source
This commit is contained in:
joshuaboud 2022-05-17 12:56:46 -03:00
parent 11182d0cf2
commit d1846ffe0b
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
navigator-vue/src/components/PathBreadCrumbs.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="flex items-center cursor-text h-10" @click="typing = true"> <div class="flex items-center cursor-text h-10" @click="typing = true">
<input v-if="typing" v-model="pathInput" type="text" class="block w-full input-textlike" @change="$emit('cd', canonicalPath(pathInput))" ref="inputRef" @focusout="typing = false" /> <input v-if="typing" v-model="pathInput" type="text" class="block w-full input-textlike" @change="changeCallback" ref="inputRef" @focusout="typing = false" />
<div v-else class="inline-flex items-center gap-1"> <div v-else class="inline-flex items-center gap-1">
<template v-for="segment, index in pathArr" :key="index"> <template v-for="segment, index in pathArr" :key="index">
<ChevronRightIcon v-if="index > 0" class="size-icon icon-default" /> <ChevronRightIcon v-if="index > 0" class="size-icon icon-default" />
@ -22,12 +22,19 @@ export default {
props: { props: {
path: String, path: String,
}, },
setup(props) { setup(props, { emit }) {
const pathArr = ref([]); const pathArr = ref([]);
const typing = ref(false); const typing = ref(false);
const pathInput = ref(""); const pathInput = ref("");
const inputRef = ref(); const inputRef = ref();
const changeCallback = () => {
if (/^(?!\/)/.test(pathInput.value))
pathInput.value = `${props.path}/${pathInput.value}`;
pathInput.value = canonicalPath(pathInput.value);
emit('cd', pathInput.value);
}
watch(() => props.path, () => { watch(() => props.path, () => {
pathArr.value = ['/', ...canonicalPath(props.path).replace(/^\//, '').split('/')].filter(segment => segment); pathArr.value = ['/', ...canonicalPath(props.path).replace(/^\//, '').split('/')].filter(segment => segment);
pathInput.value = props.path; pathInput.value = props.path;
@ -44,6 +51,7 @@ export default {
typing, typing,
pathInput, pathInput,
inputRef, inputRef,
changeCallback,
canonicalPath, canonicalPath,
} }
}, },