refactor: replace Base components with Readable components across multiple pages
This commit is contained in:
Ari Yeger
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import BaseDiv from "@components/baseComponents/BaseDiv.vue";
|
import ReadableDiv from "@components/readableComponents/ReadableDiv.vue";
|
||||||
|
|
||||||
const emit = defineEmits(["close"])
|
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-fade" tabindex="-1" id="editModal" aria-labelledby="editModalLabel" @click="emit('close')">
|
||||||
<div class="modal" @click.stop>
|
<div class="modal" @click.stop>
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<BaseDiv class="modal-header">
|
<ReadableDiv class="modal-header">
|
||||||
<slot name="modal-header">
|
<slot name="modal-header">
|
||||||
Modal Header
|
Modal Header
|
||||||
</slot>
|
</slot>
|
||||||
<button type="button" class="btn-close" aria-label="Close" @click="emit('close')"/>
|
<button type="button" class="btn-close" aria-label="Close" @click="emit('close')"/>
|
||||||
</BaseDiv>
|
</ReadableDiv>
|
||||||
<BaseDiv v-if="$slots.body" class="modal-body">
|
<ReadableDiv v-if="$slots.body" class="modal-body">
|
||||||
<slot name="body"></slot>
|
<slot name="body"></slot>
|
||||||
</BaseDiv>
|
</ReadableDiv>
|
||||||
<BaseDiv v-if="$slots.footer" class="modal-footer">
|
<ReadableDiv v-if="$slots.footer" class="modal-footer">
|
||||||
<slot name="footer">
|
<slot name="footer">
|
||||||
<button type="button" class="btn btn-secondary" @click="emit('close')">Close</button>
|
<button type="button" class="btn btn-secondary" @click="emit('close')">Close</button>
|
||||||
</slot>
|
</slot>
|
||||||
</BaseDiv>
|
</ReadableDiv>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,7 +11,7 @@ interface Contact {
|
|||||||
}
|
}
|
||||||
|
|
||||||
import {api} from '@models/rest';
|
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) {
|
async function emailAPI(action: string, body?: unknown, method?: string, headers?: HeadersInit) {
|
||||||
return await api(`/email${action}`, body, method, headers);
|
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="spinner-border spinner-border-sm" role="status" aria-hidden="true"/>
|
||||||
<span class="sr-only">Sending...</span>
|
<span class="sr-only">Sending...</span>
|
||||||
</button>
|
</button>
|
||||||
<BaseButton v-else type="submit" class="btn btn-submit">Send</BaseButton>
|
<ReadableButton v-else type="submit" class="btn btn-submit">Send</ReadableButton>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,9 +4,9 @@ import {useLogin} from "@models/session.ts";
|
|||||||
import {isMobile} from "@models/globals.ts";
|
import {isMobile} from "@models/globals.ts";
|
||||||
import eye from '@/assets/svg/eye.svg';
|
import eye from '@/assets/svg/eye.svg';
|
||||||
import eyeSlash from '@/assets/svg/eye-slash.svg';
|
import eyeSlash from '@/assets/svg/eye-slash.svg';
|
||||||
import BaseButton from "@components/baseComponents/BaseButton.vue";
|
import ReadableButton from "@components/readableComponents/ReadableButton.vue";
|
||||||
import BaseSVG from "@components/baseComponents/BaseSVG.vue";
|
import ReadableSvg from "@components/readableComponents/ReadableSVG.vue";
|
||||||
import BaseInput from "@components/baseComponents/BaseInput.vue";
|
import ReadableInput from "@components/readableComponents/ReadableInput.vue";
|
||||||
|
|
||||||
|
|
||||||
const username = ref('');
|
const username = ref('');
|
||||||
@ -29,24 +29,24 @@ const showPassword = ref(false);
|
|||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<label class="form-label" for="password">Password</label>
|
<label class="form-label" for="password">Password</label>
|
||||||
<div class="input-group">
|
<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'"
|
:type="showPassword ? 'text' : 'password'"
|
||||||
autocomplete="current-password" required style="border-right:0;"/>
|
autocomplete="current-password" required style="border-right:0;"/>
|
||||||
<button type="button" class="input-group-text border-start-0"
|
<button type="button" class="input-group-text border-start-0"
|
||||||
style="cursor:pointer;"
|
style="cursor:pointer;"
|
||||||
@click="showPassword = !showPassword">
|
@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"/>
|
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/>
|
view-box="0 0 28 28" v-else/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-grid">
|
<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)">
|
@click.prevent="login(username, password)">
|
||||||
Login
|
Login
|
||||||
</BaseButton>
|
</ReadableButton>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import BaseDiv from "@components/baseComponents/BaseDiv.vue";
|
import ReadableDiv from "@components/readableComponents/ReadableDiv.vue";
|
||||||
import BaseButton from "@components/baseComponents/BaseButton.vue";
|
import ReadableButton from "@components/readableComponents/ReadableButton.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -13,30 +13,30 @@ import BaseButton from "@components/baseComponents/BaseButton.vue";
|
|||||||
<div class="col">Primary:</div>
|
<div class="col">Primary:</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<BaseDiv class="col-md-1 primary">Main</BaseDiv>
|
<ReadableDiv class="col-md-1 primary">Main</ReadableDiv>
|
||||||
<BaseDiv class="col-md-1 primary hover">Hover</BaseDiv>
|
<ReadableDiv class="col-md-1 primary hover">Hover</ReadableDiv>
|
||||||
<BaseDiv class="col-md-1 primary active">Active</BaseDiv>
|
<ReadableDiv class="col-md-1 primary active">Active</ReadableDiv>
|
||||||
<BaseDiv class="col-md-1 primary disabled">Disabled</BaseDiv>
|
<ReadableDiv class="col-md-1 primary disabled">Disabled</ReadableDiv>
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<BaseDiv class="col">Secondary:</BaseDiv>
|
<ReadableDiv class="col">Secondary:</ReadableDiv>
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<BaseDiv class="col-md-1 secondary">Main</BaseDiv>
|
<ReadableDiv class="col-md-1 secondary">Main</ReadableDiv>
|
||||||
<BaseDiv class="col-md-1 secondary hover">Hover</BaseDiv>
|
<ReadableDiv class="col-md-1 secondary hover">Hover</ReadableDiv>
|
||||||
<BaseDiv class="col-md-1 secondary active">Active</BaseDiv>
|
<ReadableDiv class="col-md-1 secondary active">Active</ReadableDiv>
|
||||||
<BaseDiv class="col-md-1 secondary disabled">Disabled</BaseDiv>
|
<ReadableDiv class="col-md-1 secondary disabled">Disabled</ReadableDiv>
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<BaseDiv class="col">Buttons:</BaseDiv>
|
<ReadableDiv class="col">Buttons:</ReadableDiv>
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<BaseButton class="btn btn-primary">Primary Button</BaseButton>
|
<ReadableButton class="btn btn-primary">Primary Button</ReadableButton>
|
||||||
<BaseButton class="btn btn-secondary">Secondary Button</BaseButton>
|
<ReadableButton class="btn btn-secondary">Secondary Button</ReadableButton>
|
||||||
<BaseButton class="btn btn-submit">Submit Button</BaseButton>
|
<ReadableButton class="btn btn-submit">Submit Button</ReadableButton>
|
||||||
<BaseButton class="btn btn-danger">Danger Button</BaseButton>
|
<ReadableButton class="btn btn-danger">Danger Button</ReadableButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user