83 lines
1.4 KiB
Vue
83 lines
1.4 KiB
Vue
<template>
|
|
<div class="text-input">
|
|
<sl-icon-button
|
|
class="edit-button"
|
|
name="pencil"
|
|
@click="editing = true"
|
|
:disabled="editing"
|
|
/>
|
|
|
|
<div v-if="editing" class="edit">
|
|
<sl-input
|
|
type="text"
|
|
size="small"
|
|
v-sl-model:myValue
|
|
@blur="submit"
|
|
ref="input"
|
|
/>
|
|
<!-- <sl-icon-button
|
|
name="box-arrow-in-right"
|
|
@click="$emit('edit', myValue)"
|
|
/> -->
|
|
</div>
|
|
<div v-else class="content">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, nextTick, ref, watchEffect } from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "TextInput",
|
|
emits: ["edit"],
|
|
props: {
|
|
value: {
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const myValue = ref(props.value);
|
|
const editing = ref(false);
|
|
const input = ref<HTMLInputElement | undefined>(undefined);
|
|
|
|
watchEffect(async () => {
|
|
if (editing.value) {
|
|
await nextTick();
|
|
input.value?.focus();
|
|
}
|
|
});
|
|
|
|
return {
|
|
editing,
|
|
myValue,
|
|
input,
|
|
};
|
|
},
|
|
methods: {
|
|
submit() {
|
|
if (this.myValue !== this.value) {
|
|
this.$emit("edit", this.myValue);
|
|
}
|
|
this.editing = false;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.text-input {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.edit {
|
|
display: flex;
|
|
|
|
sl-input {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
</style>
|