|
|
|
@ -1,3 +1,34 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
import WrapperBox from "../components/WrapperBox.vue";
|
|
|
|
|
import TextBox from "../components/TextBox.vue";
|
|
|
|
|
|
|
|
|
|
const leftDrawerOpen = ref(false);
|
|
|
|
|
|
|
|
|
|
function toggleLeftDrawer() {
|
|
|
|
|
leftDrawerOpen.value = !leftDrawerOpen.value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
Rich Text Stuff
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
const richTextStatments = ref([
|
|
|
|
|
{ text: "test" },
|
|
|
|
|
{ text: "test2" },
|
|
|
|
|
{ text: "test3" },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const richEditModal = ref(false);
|
|
|
|
|
const richEditExpression = ref("");
|
|
|
|
|
const richEditStatement = (stmt: String) => {
|
|
|
|
|
console.log('editing statement', stmt, editModal)
|
|
|
|
|
activeStatement = stmt
|
|
|
|
|
richEditModal.value = true
|
|
|
|
|
richEditExpression.value = stmt.raw
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<q-layout view="hHh Lpr fff">
|
|
|
|
|
<q-header reveal bordered class="bg-primary text-white" height-hint="98">
|
|
|
|
@ -19,9 +50,7 @@
|
|
|
|
|
|
|
|
|
|
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
|
|
|
|
|
<div class="column" style="height: 100%">
|
|
|
|
|
<div class="col">
|
|
|
|
|
variables
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col">variables</div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<q-separator />
|
|
|
|
|
function
|
|
|
|
@ -31,10 +60,22 @@
|
|
|
|
|
<!-- drawer content -->
|
|
|
|
|
</q-drawer>
|
|
|
|
|
|
|
|
|
|
<q-page-container style="display: flex">
|
|
|
|
|
|
|
|
|
|
<TextBox/>
|
|
|
|
|
<q-page-container id="editor" style="display: flex">
|
|
|
|
|
<q-dialog ref="edit-modal" v-model="richEditModal">
|
|
|
|
|
<q-card>
|
|
|
|
|
<q-card-actions align="right" class="text-primary">
|
|
|
|
|
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
|
|
|
|
<q-btn flat label="Save" v-close-popup></q-btn>
|
|
|
|
|
</q-card-actions>
|
|
|
|
|
</q-card>
|
|
|
|
|
</q-dialog>
|
|
|
|
|
|
|
|
|
|
<span v-for="(item, index) in richTextStatments">
|
|
|
|
|
<TextBox
|
|
|
|
|
:statement="item.text"
|
|
|
|
|
v-on:edit="() => (stmt ? richEditStatement(stmt) : {})"
|
|
|
|
|
></TextBox>
|
|
|
|
|
</span>
|
|
|
|
|
</q-page-container>
|
|
|
|
|
|
|
|
|
|
<q-footer reveal elevated class="bg-grey-8 text-white">
|
|
|
|
@ -47,14 +88,10 @@
|
|
|
|
|
</q-layout>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
import WrapperBox from "../components/WrapperBox.vue";
|
|
|
|
|
import TextBox from "../components/TextBox.vue";
|
|
|
|
|
|
|
|
|
|
const leftDrawerOpen = ref(false);
|
|
|
|
|
|
|
|
|
|
function toggleLeftDrawer() {
|
|
|
|
|
leftDrawerOpen.value = !leftDrawerOpen.value;
|
|
|
|
|
<style>
|
|
|
|
|
#editor {
|
|
|
|
|
background-image: url(../assets/grid.svg);
|
|
|
|
|
background-repeat: repeat;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</style>
|
|
|
|
|