Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(client): move to Vite by @phillipthelen

Browse Source
This commit is contained in:
Kalista Payne
2025-06-11 19:20:11 -05:00
parent 20d31ed8c8
commit ccc6c9867f
311 changed files with 5321 additions and 10626 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/ui/closeX.vue
+2 -2
View File
@@ -12,7 +12,7 @@
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.modal-close {
position: absolute;
@@ -34,7 +34,7 @@
</style>
<script>
import close from '@/assets/svg/close.svg';
import close from '@/assets/svg/close.svg?raw';
export default {
data () {
website/client/src/components/ui/countBadge.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template>
<style lang="scss">
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.badge-count {
right: -9px;
website/client/src/components/ui/customMenuDropdown.vue
+2 -2
View File
@@ -25,7 +25,7 @@ A simplified dropdown component that doesn't rely on buttons as toggles like bo
</template>
<style lang="scss">
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.habitica-menu-dropdown {
&:hover,
&:focus { // NB focus styles match the hover styles for .svg-icon
@@ -40,7 +40,7 @@ A simplified dropdown component that doesn't rely on buttons as toggles like bo
}
</style>
<style lang='scss' scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.dropdown {
&:hover {
website/client/src/components/ui/datepicker.vue
+3 -3
View File
@@ -44,8 +44,8 @@
<script>
import moment from 'moment';
import datepicker from 'vuejs-datepicker';
import calendarIcon from '@/assets/svg/calendar.svg';
import closeIcon from '@/assets/svg/close.svg';
import calendarIcon from '@/assets/svg/calendar.svg?raw';
import closeIcon from '@/assets/svg/close.svg?raw';
export default {
components: {
@@ -82,7 +82,7 @@ export default {
</script>
<style lang="scss">
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.vdp-datepicker__calendar {
bottom: 2.125rem; // 2rem input control height + 0.125rem margin above
website/client/src/components/ui/drawer.vue
+3 -3
View File
@@ -43,7 +43,7 @@
</template>
<style lang="scss">
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.drawer-container {
z-index: 19;
@@ -210,8 +210,8 @@
</style>
<script>
import expandIcon from '@/assets/svg/expand.svg';
import minimizeIcon from '@/assets/svg/minimize.svg';
import expandIcon from '@/assets/svg/expand.svg?raw';
import minimizeIcon from '@/assets/svg/minimize.svg?raw';
export default {
props: {
website/client/src/components/ui/drawerSlider.vue
+3 -3
View File
@@ -46,7 +46,7 @@
<style lang="scss">
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
$buttonAreaWidth: 60;
@@ -113,8 +113,8 @@
</style>
<script>
import previous from '@/assets/svg/previous.svg';
import next from '@/assets/svg/next.svg';
import previous from '@/assets/svg/previous.svg?raw';
import next from '@/assets/svg/next.svg?raw';
import ResizeDirective from '@/directives/resize.directive';
export default {
website/client/src/components/ui/equipBadge.vue
+3 -3
View File
@@ -21,7 +21,7 @@
</template>
<style lang="scss">
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.badge-equip {
cursor: pointer;
@@ -70,8 +70,8 @@
</style>
<script>
import svgEquip from '@/assets/svg/equip.svg';
import svgUnEquip from '@/assets/svg/unequip.svg';
import svgEquip from '@/assets/svg/equip.svg?raw';
import svgUnEquip from '@/assets/svg/unequip.svg?raw';
export default {
props: {
website/client/src/components/ui/filterGroup.vue
+1 -1
View File
@@ -17,7 +17,7 @@ export default {
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
h4 {
min-height: 1.5rem;
website/client/src/components/ui/filterSidebar.vue
+1 -1
View File
@@ -21,7 +21,7 @@ export default {
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.filter-label {
min-height: 1.5rem;
website/client/src/components/ui/informationIcon.vue
+1 -1
View File
@@ -21,7 +21,7 @@
</style>
<script>
import informationIcon from '@/assets/svg/information.svg';
import informationIcon from '@/assets/svg/information.svg?raw';
export default {
name: 'InformationIcon',
website/client/src/components/ui/itemRows.vue
+1 -1
View File
@@ -36,7 +36,7 @@
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.btn-show-more {
max-width: 920px;
website/client/src/components/ui/loadingGryphon.vue
+1 -1
View File
@@ -30,7 +30,7 @@
</style>
<script>
import gryphon from '@/assets/svg/gryphon.svg';
import gryphon from '@/assets/svg/gryphon.svg?raw';
export default {
props: {
website/client/src/components/ui/loadingSpinner.vue
+1 -1
View File
@@ -13,7 +13,7 @@
</template>
<style lang='scss' scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
// NOTE: the loader is currently set to work inside standard buttons
// To properly work outside of them some abstraction will be needed
website/client/src/components/ui/pinBadge.vue
+2 -2
View File
@@ -12,7 +12,7 @@
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.badge-pin {
background-color: $white;
@@ -40,7 +40,7 @@
</style>
<script>
import svgPin from '@/assets/svg/pin.svg';
import svgPin from '@/assets/svg/pin.svg?raw';
export default {
props: {
website/client/src/components/ui/purchaseHistoryTable.vue
+5 -5
View File
@@ -226,7 +226,7 @@
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.page-header.btn-flat {
background: transparent;
@@ -349,10 +349,10 @@
<script>
import moment from 'moment';
import svgGem from '@/assets/svg/gem.svg';
import svgGemRed from '@/assets/svg/gem-red.svg';
import svgHourglass from '@/assets/svg/hourglass.svg';
import svgHourglassRed from '@/assets/svg/hourglass-red.svg';
import svgGem from '@/assets/svg/gem.svg?raw';
import svgGemRed from '@/assets/svg/gem-red.svg?raw';
import svgHourglass from '@/assets/svg/hourglass.svg?raw';
import svgHourglassRed from '@/assets/svg/hourglass-red.svg?raw';
import markdownDirective from '@/directives/markdown';
export default {
website/client/src/components/ui/selectList.vue
+2 -2
View File
@@ -51,7 +51,7 @@
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.select-list ::v-deep {
.dropdown-toggle {
@@ -87,7 +87,7 @@
</style>
<script>
import svgCheck from '@/assets/svg/check.svg';
import svgCheck from '@/assets/svg/check.svg?raw';
export default {
props: {
website/client/src/components/ui/showMoreButton.vue
+1 -1
View File
@@ -16,7 +16,7 @@ export default {
</script>
<style scoped lang="scss">
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.btn-show-more {
height: 2rem;
website/client/src/components/ui/sprite.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<img
class="pixel-art"
v-if="imageName && imageName !== ''"
class="pixel-art"
:src="imageUrl()"
>
</template>
website/client/src/components/ui/starBadge.vue
+2 -2
View File
@@ -14,7 +14,7 @@
</template>
<style lang="scss">
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.badge-star {
cursor: pointer;
@@ -46,7 +46,7 @@
</style>
<script>
import svgStar from '@/assets/svg/star-badge.svg';
import svgStar from '@/assets/svg/star-badge.svg?raw';
export default {
props: {
website/client/src/components/ui/statsbar.vue
+1 -1
View File
@@ -35,7 +35,7 @@
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.progress-container {
margin-left: 4px;
website/client/src/components/ui/toggleCheckbox.vue
+1 -1
View File
@@ -34,7 +34,7 @@ export default {
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.toggle-checkbox {
display: flex;
website/client/src/components/ui/toggleSwitch.vue
+2 -2
View File
@@ -56,7 +56,7 @@
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
@import '@/assets/scss/colors.scss';
.toggle-switch-outer {
display: flex;
@@ -156,7 +156,7 @@
</style>
<script>
import svgInformation from '@/assets/svg/information.svg';
import svgInformation from '@/assets/svg/information.svg?raw';
export default {
model: {