changed all files to composition API
This commit is contained in:
@ -3,38 +3,50 @@
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
|
||||
<table class="data-table" id="issue-variants-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">Properties</th>
|
||||
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
|
||||
<th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
|
||||
<th
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
<th
|
||||
:class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
|
||||
Properties</th>
|
||||
<th
|
||||
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||
State</th>
|
||||
<th
|
||||
:class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
|
||||
Amount</th>
|
||||
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">...</td>
|
||||
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
|
||||
<td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">...</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
...</td>
|
||||
<td
|
||||
:class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
|
||||
...</td>
|
||||
<td
|
||||
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||
...</td>
|
||||
<td
|
||||
:class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "IssueVariants",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -170,14 +182,14 @@ th {
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 6.0625em;
|
||||
height: 1.875em;
|
||||
font-family: 'Overpass';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
line-height: 1.875em;
|
||||
letter-spacing: 0.05em;
|
||||
width: 6.0625em;
|
||||
height: 1.875em;
|
||||
font-family: 'Overpass';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
line-height: 1.875em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
@ -186,5 +198,4 @@ th {
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
Reference in New Issue
Block a user