Skip to content

Commit 25a160f

Browse files
devartstardevartstar
authored
feat: tabsbar component (CircuitVerse#14)
* feat: created tabsbar component * feat: circuitList in store and updating value in external js * feat: replace tab rendering as string to dom with vue-for * feat: removing item from tabList on closing tab * feat: add sortability of tabs * fix: new circuit was not working after sorting tabs * fix: multiple tabs closing * feat: added message modal * feat: add dialog boxes for messages instead of prompt * feat: persistent dialog box for dependencies * feat: moved circuit deleting cheching to vue component * feat: made message Box reusable * feat: linked dialog box conformation for delete to logic * feat: create circuit prompt to dialog box * feat: completed converting all prompts of tabsbar to dialog box * fix: propper current-tab display on sorting, switching, creating, deleting * fix: lined circuitName in tabsbar and properties panel * fix: lined-updated properties panel with switching tabs * fix: displaying circuit name from scopeList * refactor: circuit-list store only list of ids(more generalized) as name can be changed * revert: on changing tabs only circuitname changes * fix: acessing only states instead of complete pinia store in Tabsbar * fix: initially no circuit name should be visible but default set to untitled-circuit * fix: default values for array and object in props * fix: replaces x with icon cross * fix: all tabs circuits deleting from properties panel
1 parent 8385a76 commit 25a160f

File tree

11 files changed

+453
-40
lines changed

11 files changed

+453
-40
lines changed

‎package-lock.json

Lines changed: 30 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"vue": "^3.2.25",
2525
"vue-i18n": "^9.1.10",
2626
"vue-router": "^4.0.15",
27+
"vuedraggable": "^4.1.0",
2728
"vuetify": "^3.0.0-beta.0",
2829
"webfontloader": "^1.0.0"
2930
},

‎src/components/Extra.vue

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
<template>
22
<!-- --------------------------------------------------------------------------------------------- -->
33
<!-- TabsBar -->
4-
<div id="tabsBar" class="noSelect pointerCursor">
5-
<button id="createNewCircuitScope" class="logixButton" onclick="">
6-
&#43;
7-
</button>
8-
</div>
4+
<TabsBar />
95
<!-- --------------------------------------------------------------------------------------------- -->
106

117
<!-- --------------------------------------------------------------------------------------------- -->
@@ -696,4 +692,5 @@
696692
<script lang="ts" setup>
697693
import ElementsPanel from './Panels/ElementsPanel/ElementsPanel.vue'
698694
import PropertiesPanel from './Panels/PropertiesPanel/PropertiesPanel.vue'
695+
import TabsBar from './TabsBar/TabsBar.vue'
699696
</script>

‎src/components/MessageBox/messageBox.vue

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<v-dialog :persistent="isPersistent">
3+
<v-card class="messageBoxContent">
4+
<v-card-text>
5+
{{ messageText }}
6+
<div
7+
v-for="inputItem in inputList"
8+
:key="inputItem"
9+
class="inputContent"
10+
>
11+
<p>{{ inputItem }}</p>
12+
<input v-model="inputVal" class="inputField" type="text" />
13+
</div>
14+
</v-card-text>
15+
<v-card-actions>
16+
<v-btn
17+
v-for="buttonItem in buttonList"
18+
:key="buttonItem.text"
19+
class="messageBtn"
20+
block
21+
@click="
22+
$emit(
23+
'buttonClick',
24+
buttonItem.emitOption,
25+
circuitItem,
26+
inputVal == '' ? 'Untitled-Circuit' : inputVal
27+
)
28+
"
29+
>
30+
{{ buttonItem.text }}
31+
</v-btn>
32+
</v-card-actions>
33+
</v-card>
34+
</v-dialog>
35+
</template>
36+
37+
<script lang="ts" setup>
38+
import { ref } from '@vue/reactivity'
39+
import { onUpdated } from '@vue/runtime-core'
40+
const inputVal = ref('')
41+
42+
onUpdated(() => {
43+
inputVal.value = ''
44+
})
45+
46+
const props = defineProps({
47+
messageText: { type: String, default: '' },
48+
isPersistent: { type: Boolean, default: false },
49+
buttonList: { type: Array, default: () => [] },
50+
inputList: { type: Array, default: () => [] },
51+
circuitItem: { type: Object, default: () => {} },
52+
})
53+
const emit = defineEmits(['buttonClick'])
54+
</script>
55+
56+
<style scoped>
57+
.messageBoxContent {
58+
height: auto;
59+
min-width: 500px;
60+
justify-content: center;
61+
margin: auto;
62+
backdrop-filter: blur(5px);
63+
border-radius: 5px;
64+
border: 0.5px solid var(--br-primary) !important;
65+
background: var(--bg-primary-moz) !important;
66+
background-color: var(--bg-primary-chr) !important;
67+
color: white;
68+
}
69+
70+
.inputContent {
71+
align-items: center;
72+
}
73+
74+
.inputField {
75+
width: 100%;
76+
padding: 10px 10px;
77+
margin: 8px 0;
78+
box-sizing: border-box;
79+
border-radius: 5px;
80+
border: 1px solid #c5c5c5;
81+
color: white;
82+
outline: none;
83+
}
84+
.inputField:focus {
85+
border: 2px solid #c5c5c5;
86+
}
87+
88+
.messageBtn {
89+
width: fit-content;
90+
border: 1px solid #c5c5c5;
91+
padding: 5px 5px;
92+
}
93+
.messageBtn:hover {
94+
background: #c5c5c5;
95+
color: black;
96+
}
97+
98+
.v-card-actions {
99+
width: fit-content;
100+
display: flex;
101+
flex-direction: row;
102+
justify-content: center;
103+
margin: auto;
104+
}
105+
</style>

‎src/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ import HelpButton from '#/components/Panels/Shared/HelpButton.vue'
3030
import ElementProperty from '#/components/Panels/PropertiesPanel/ModuleProperty/ElementProperty/ElementProperty.vue'
3131
import ProjectProperty from '#/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue'
3232
import SubcircuitPropert from '#/components/Panels/PropertiesPanel/ModuleProperty/SubcircuitProperty/SubcircuitProperty.vue'
33-
import { toRefs } from '@vue/reactivity'
33+
import { ref, toRefs } from '@vue/reactivity'
34+
import { onMounted } from '@vue/runtime-core'
3435
3536
const props = defineProps({
3637
panleBodyData: { type: Object, default: undefined },

‎src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@
1515
<span>Circuit:</span>
1616
<input
1717
id="circname"
18+
:key="circuitId"
1819
class="objectPropertyAttribute"
1920
type="text"
2021
autocomplete="off"
2122
name="changeCircuitName"
22-
:value="'Untitled' || globalScope.name"
23+
:value="circuitName"
2324
/>
2425
</p>
2526

@@ -80,6 +81,22 @@ import { getProjectName } from '#/simulator/src/data/save'
8081
import { toggleLayoutMode } from '#/simulator/src/layoutMode'
8182
import simulationArea from '#/simulator/src/simulationArea'
8283
import InputGroups from '#/components/Panels/Shared/InputGroups.vue'
84+
import { ref } from '@vue/reactivity'
85+
import { onMounted } from '@vue/runtime-core'
86+
const circuitId = ref(0)
87+
const circuitName = ref('Untitled-Cirucit')
88+
89+
90+
91+
onMounted(() => {
92+
// checking if circuit or tab is switched
93+
setInterval(() => {
94+
if (circuitId.value != globalScope.id) {
95+
circuitName.value = globalScope.name
96+
circuitId.value = globalScope.id
97+
}
98+
}, 100)
99+
})
83100
</script>
84101

85102
<style scoped>

0 commit comments

Comments
 (0)