li0nhunter/Website-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: replace Base components with Readable components across multiple pages

Browse Source
This commit is contained in:
Ari Yeger
2025-07-23 16:44:04 -04:00
parent 9add60735e
commit bb0a3a411b
8 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/Modal.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import BaseDiv from "@components/baseComponents/BaseDiv.vue";
import ReadableDiv from "@components/readableComponents/ReadableDiv.vue";
const emit = defineEmits(["close"])
@ -9,20 +9,20 @@ const emit = defineEmits(["close"])
<div class="modal-fade" tabindex="-1" id="editModal" aria-labelledby="editModalLabel" @click="emit('close')">
<div class="modal" @click.stop>
<div class="modal-content">
<BaseDiv class="modal-header">
<ReadableDiv class="modal-header">
<slot name="modal-header">
Modal Header
</slot>
<button type="button" class="btn-close" aria-label="Close" @click="emit('close')"/>
</BaseDiv>
<BaseDiv v-if="$slots.body" class="modal-body">
</ReadableDiv>
<ReadableDiv v-if="$slots.body" class="modal-body">
<slot name="body"></slot>
</BaseDiv>
<BaseDiv v-if="$slots.footer" class="modal-footer">
</ReadableDiv>
<ReadableDiv v-if="$slots.footer" class="modal-footer">
<slot name="footer">
<button type="button" class="btn btn-secondary" @click="emit('close')">Close</button>
</slot>
</BaseDiv>
</ReadableDiv>
</div>
</div>
</div>

0
client/src/components/baseComponents/BaseButton.vue → client/src/components/readableComponents/ReadableButton.vue
View File

0
client/src/components/baseComponents/BaseDiv.vue → client/src/components/readableComponents/ReadableDiv.vue
View File

0
client/src/components/baseComponents/BaseInput.vue → client/src/components/readableComponents/ReadableInput.vue
View File

0
client/src/components/baseComponents/BaseSVG.vue → client/src/components/readableComponents/ReadableSVG.vue
View File

4
client/src/views/ContactPage.vue
View File

@ -11,7 +11,7 @@ interface Contact {
}
import {api} from '@models/rest';
import BaseButton from "@components/baseComponents/BaseButton.vue";
import ReadableButton from "@components/readableComponents/ReadableButton.vue";
async function emailAPI(action: string, body?: unknown, method?: string, headers?: HeadersInit) {
return await api(`/email${action}`, body, method, headers);
@ -85,7 +85,7 @@ async function submitForm() {
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"/>
<span class="sr-only">Sending...</span>
</button>
<BaseButton v-else type="submit" class="btn btn-submit">Send</BaseButton>
<ReadableButton v-else type="submit" class="btn btn-submit">Send</ReadableButton>
</div>
</form>
</div>

16
client/src/views/LoginPage.vue
View File

@ -4,9 +4,9 @@ import {useLogin} from "@models/session.ts";
import {isMobile} from "@models/globals.ts";
import eye from '@/assets/svg/eye.svg';
import eyeSlash from '@/assets/svg/eye-slash.svg';
import BaseButton from "@components/baseComponents/BaseButton.vue";
import BaseSVG from "@components/baseComponents/BaseSVG.vue";
import BaseInput from "@components/baseComponents/BaseInput.vue";
import ReadableButton from "@components/readableComponents/ReadableButton.vue";
import ReadableSvg from "@components/readableComponents/ReadableSVG.vue";
import ReadableInput from "@components/readableComponents/ReadableInput.vue";
const username = ref('');
@ -29,24 +29,24 @@ const showPassword = ref(false);
<div class="mb-2">
<label class="form-label" for="password">Password</label>
<div class="input-group">
<BaseInput class="form-control" id="password" v-model="password"
<ReadableInput class="form-control" id="password" v-model="password"
:type="showPassword ? 'text' : 'password'"
autocomplete="current-password" required style="border-right:0;"/>
<button type="button" class="input-group-text border-start-0"
style="cursor:pointer;"
@click="showPassword = !showPassword">
<BaseSVG :svg="eye" :width="20" :height="20"
<ReadableSvg :svg="eye" :width="20" :height="20"
view-box="0 0 28 28" v-if="!showPassword"/>
<BaseSVG :svg="eyeSlash" :width="20" :height="20"
<ReadableSvg :svg="eyeSlash" :width="20" :height="20"
view-box="0 0 28 28" v-else/>
</button>
</div>
</div>
<div class="d-grid">
<BaseButton class="btn btn-submit mt-4" type="submit"
<ReadableButton class="btn btn-submit mt-4" type="submit"
@click.prevent="login(username, password)">
Login
</BaseButton>
</ReadableButton>
</div>
</form>
</div>

32
client/src/views/MainPage.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import BaseDiv from "@components/baseComponents/BaseDiv.vue";
import BaseButton from "@components/baseComponents/BaseButton.vue";
import ReadableDiv from "@components/readableComponents/ReadableDiv.vue";
import ReadableButton from "@components/readableComponents/ReadableButton.vue";
</script>
<template>
@ -13,30 +13,30 @@ import BaseButton from "@components/baseComponents/BaseButton.vue";
<div class="col">Primary:</div>
</div>
<div class="row justify-content-center">
<BaseDiv class="col-md-1 primary">Main</BaseDiv>
<BaseDiv class="col-md-1 primary hover">Hover</BaseDiv>
<BaseDiv class="col-md-1 primary active">Active</BaseDiv>
<BaseDiv class="col-md-1 primary disabled">Disabled</BaseDiv>
<ReadableDiv class="col-md-1 primary">Main</ReadableDiv>
<ReadableDiv class="col-md-1 primary hover">Hover</ReadableDiv>
<ReadableDiv class="col-md-1 primary active">Active</ReadableDiv>
<ReadableDiv class="col-md-1 primary disabled">Disabled</ReadableDiv>
</div>
<div class="row justify-content-center">
<BaseDiv class="col">Secondary:</BaseDiv>
<ReadableDiv class="col">Secondary:</ReadableDiv>
</div>
<div class="row justify-content-center">
<BaseDiv class="col-md-1 secondary">Main</BaseDiv>
<BaseDiv class="col-md-1 secondary hover">Hover</BaseDiv>
<BaseDiv class="col-md-1 secondary active">Active</BaseDiv>
<BaseDiv class="col-md-1 secondary disabled">Disabled</BaseDiv>
<ReadableDiv class="col-md-1 secondary">Main</ReadableDiv>
<ReadableDiv class="col-md-1 secondary hover">Hover</ReadableDiv>
<ReadableDiv class="col-md-1 secondary active">Active</ReadableDiv>
<ReadableDiv class="col-md-1 secondary disabled">Disabled</ReadableDiv>
</div>
<div class="row justify-content-center">
<BaseDiv class="col">Buttons:</BaseDiv>
<ReadableDiv class="col">Buttons:</ReadableDiv>
</div>
<div class="row justify-content-center">
<div class="col">
<div class="btn-group">
<BaseButton class="btn btn-primary">Primary Button</BaseButton>
<BaseButton class="btn btn-secondary">Secondary Button</BaseButton>
<BaseButton class="btn btn-submit">Submit Button</BaseButton>
<BaseButton class="btn btn-danger">Danger Button</BaseButton>
<ReadableButton class="btn btn-primary">Primary Button</ReadableButton>
<ReadableButton class="btn btn-secondary">Secondary Button</ReadableButton>
<ReadableButton class="btn btn-submit">Submit Button</ReadableButton>
<ReadableButton class="btn btn-danger">Danger Button</ReadableButton>
</div>
</div>
</div>