CrystalMath/ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

rich editing works

Browse Source
This commit is contained in:
Thomas
2022-04-09 17:31:01 -05:00
parent c94defb193
commit ad750a8959
3 changed files with 72 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/TextBox.vue
View File

@@ -1,38 +1,27 @@
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
const $q = useQuasar();
const editor = ref("");
const editMode = ref(false);
function edit() {
editMode.value = !editMode.value;
}
const props = defineProps({
statement: { type: String, required: true },
})
</script>
<template>
<q-dialog v-if="editMode" >
<q-editor v-model="editor" min-height="5rem" />
</q-dialog>
<Draggable :grid="[25, 25]">
<div style="display: flex">
<q-card flat bordered>
<q-card-section>
<div class="row items-center no-wrap">
<q-card-section v-html="editor" />
<q-card-section v-html="props.statement" />
<div class="col-auto">
<q-btn color="grey-7" round flat icon="more_vert">
<q-menu cover auto-close>
<q-list>
<q-item clickable>
<q-item-section @click="edit">Edit</q-item-section>
<q-item-section @click="() => $emit('edit')">Edit</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>Remove</q-item-section>
<q-item-section @click="() => $emit('remove')">Remove</q-item-section>
</q-item>
</q-list>
</q-menu>