add gov

src/components/ProposalListItem.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import MdEditor from 'md-editor-v3';
+import { useFormatter, useStakingStore } from '@/stores';
+import type { GovProposal, PaginatedProposals } from '@/types';
+import ProposalProcess from './ProposalProcess.vue';
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  proposals: { type: Object as PropType<PaginatedProposals>},
+})
+// const list = computed(()=> proposl)
+const format = useFormatter()
+const staking = useStakingStore()
+</script>
+<template>
+    <VExpansionPanels variant="accordion">
+            <VExpansionPanel v-for="(x, i) in proposals?.proposals">
+              <VExpansionPanelTitle disable-icon-rotate>
+                    <VChip label color="primary" class="mr-2">{{x.proposal_id}}</VChip>
+                    <div class="w-100">{{ x.content?.title }}
+                      <div class="d-flex mt-1">
+                        <small class="text-secondary me-auto"> {{ format.toDay(x.voting_end_time, 'from') }}</small>      
+                        <ProposalProcess style="width:300px;" :pool="staking.pool" :tally="x.final_tally_result"></ProposalProcess> 
+                        <span></span>
+                      </div>              
+                    </div>
+                <template #actions>    
+                  <VIcon
+                    v-if="x.status === 'PROPOSAL_STATUS_PASSED'"
+                    icon="mdi-check"
+                    color="success"
+                    class="ml-2"
+                  />
+                  <VIcon
+                    v-if="x.status === 'PROPOSAL_STATUS_REJECTED'"
+                    icon="mdi-multiply"
+                    color="error"
+                    class="ml-2"
+                  />
+                </template>
+              </VExpansionPanelTitle>
+              <VExpansionPanelText>
+                <VCard class="card-box">         
+                  <VCardText>
+                    {{ x.final_tally_result }}
+                    <MdEditor :model-value="format.multiLine(x.content?.description)" previewOnly></MdEditor> 
+                  </VCardText>
+                  <div class="text-center w-100 my-2">
+                    <VBtn color="primary" variant="flat">Vote</VBtn>
+                  </div>
+                </VCard>
+              </VExpansionPanelText>
+            </VExpansionPanel>
+          </VExpansionPanels>    
+</template>

src/components/ProposalProcess.vue

@@ -24,10 +24,10 @@ const veto = computed(() => (format.calculatePercent(props.tally?.no_with_veto,
 </script>
 <template>
 <div class="progress">
-  <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
-  <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
-  <div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"></div>
-  <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
+  <div class="progress-bar bg-success" :style="`width: ${yes}`"> {{ yes }}</div>
+  <div class="progress-bar bg-error" :style="`width: ${no}`">{{ no }} </div>
+  <div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"> {{ veto }} </div>
+  <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"> </div>
 </div>
 </template>
 <style scoped>

src/components/dynamic/DynamicComponent.vue

@@ -4,8 +4,8 @@ import TextElement from './TextElement.vue'
 import ObjectElement from './ObjectElement.vue'
 import { select } from './index'
 
-const props = defineProps(["value"]);
+const props = defineProps(["value", "direct"]);
 </script>
 <template>
-    <Component :is="select(value)" :value="value"></Component>
+    <Component :is="select(value, direct)" :value="value"></Component>
 </template>