Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 54ccc51

Browse filesBrowse files
lukachilukachi
committed
update common components
1 parent 18c35c2 commit 54ccc51
Copy full SHA for 54ccc51

File tree

Expand file treeCollapse file tree

10 files changed

+252
-40
lines changed
Filter options
Expand file treeCollapse file tree

10 files changed

+252
-40
lines changed

‎src/common/Loader.vue

Copy file name to clipboardExpand all lines: src/common/Loader.vue
+14-23Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,31 @@
11
<template>
22
<div class="loader">
3-
<template v-if="scheme === SCHEMES.spinner">
3+
<template v-if="scheme === 'spinner'">
44
<spinner />
55
</template>
6+
<template v-else-if="scheme === 'skeleton'">
7+
<skeleton v-bind="$attrs" />
8+
</template>
69
</div>
710
</template>
811

9-
<script lang="ts">
12+
<script lang="ts" setup>
1013
/* create skeletons */
11-
import Spinner from '@/common/loader/Spinner.vue'
12-
13-
import { defineComponent } from 'vue'
14+
import { Spinner, Skeleton } from '@/common/loaders'
1415
15-
const SCHEMES = {
16-
spinner: 'spinner',
17-
}
18-
19-
export default defineComponent({
20-
name: 'loader',
21-
components: { Spinner },
22-
props: {
23-
scheme: {
24-
type: String,
25-
default: SCHEMES.spinner,
26-
},
27-
},
28-
setup() {
29-
return {
30-
SCHEMES,
31-
}
16+
withDefaults(
17+
defineProps<{
18+
scheme: 'spinner' | 'skeleton'
19+
}>(),
20+
{
21+
scheme: 'spinner',
3222
},
33-
})
23+
)
3424
</script>
3525

3626
<style lang="scss" scoped>
3727
.loader {
28+
overflow: hidden;
3829
display: grid;
3930
place-items: center;
4031
}

‎src/common/Modal.vue

Copy file name to clipboardExpand all lines: src/common/Modal.vue
+9-4Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<teleport to="#modal">
33
<transition name="modal">
4-
<div v-show="isShown" class="modal">
4+
<div v-show="isShown" class="modal" v-bind="$attrs">
55
<div class="modal__pane" ref="modalPane">
66
<slot :modal="{ close: closeModal }" />
77
</div>
@@ -57,6 +57,8 @@ export default defineComponent({
5757
</script>
5858

5959
<style lang="scss" scoped>
60+
$z-index-local: 1;
61+
6062
.modal {
6163
display: flex;
6264
justify-content: center;
@@ -67,13 +69,16 @@ export default defineComponent({
6769
width: 100vw;
6870
height: vh(100);
6971
background: rgba(var(--black-rgb), 0.5);
72+
z-index: $z-index-local;
7073
}
7174
7275
.modal__pane {
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
7379
position: relative;
74-
background: var(--background-primary-main);
75-
padding: toRem(50) toRem(100);
76-
border-radius: toRem(10);
80+
width: auto;
81+
height: auto;
7782
}
7883
7984
.modal-enter-active,

‎src/common/index.ts

Copy file name to clipboardExpand all lines: src/common/index.ts
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ export { default as AppLogo } from '@/common/AppLogo.vue'
99
export { default as AppNavbar } from '@/common/AppNavbar.vue'
1010
export { default as Notification } from '@/common/Notification.vue'
1111
export { default as Modal } from '@/common/Modal.vue'
12+
13+
export * from './modals'
14+
export * from './loaders'

‎src/common/loaders/Skeleton.vue

Copy file name to clipboard
+61Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div :class="['skeleton', `skeleton--${scheme}`]" v-bind="$attrs" />
3+
</template>
4+
5+
<script lang="ts" setup>
6+
withDefaults(
7+
defineProps<{
8+
scheme?: 'thin' | 'medium' | 'circle'
9+
}>(),
10+
{
11+
scheme: 'medium',
12+
},
13+
)
14+
</script>
15+
16+
<style lang="scss" scoped>
17+
.skeleton {
18+
overflow: hidden;
19+
position: relative;
20+
background: var(--background-secondary-light);
21+
border-radius: toRem(4);
22+
width: 100%;
23+
height: 100%;
24+
25+
&:after {
26+
content: '';
27+
position: absolute;
28+
top: 0;
29+
right: 0;
30+
bottom: 0;
31+
left: 0;
32+
transform: translateX(-100%);
33+
background-image: linear-gradient(
34+
90deg,
35+
rgba(var(--white-rgb), 0) 0,
36+
rgba(var(--white-rgb), 0.2) 20%,
37+
rgba(var(--white-rgb), 0.5) 60%,
38+
rgba(var(--white-rgb), 0)
39+
);
40+
animation: shimmer 2s infinite;
41+
}
42+
43+
@keyframes shimmer {
44+
100% {
45+
transform: translateX(100%);
46+
}
47+
}
48+
49+
&--circle {
50+
border-radius: 50%;
51+
}
52+
53+
&--thin {
54+
height: toRem(20);
55+
}
56+
57+
&--medium {
58+
height: toRem(32);
59+
}
60+
}
61+
</style>

‎src/common/loaders/SkeletonTable.vue

Copy file name to clipboard
+44Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="skeleton-table">
3+
<div
4+
v-for="row in rows"
5+
:key="row"
6+
class="skeleton-table__row"
7+
:style="{
8+
gridTemplateColumns: sizing,
9+
}"
10+
>
11+
<skeleton v-for="scheme in schemes" :key="scheme" :scheme="scheme" />
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script lang="ts" setup>
17+
import { Skeleton } from '@/common'
18+
19+
withDefaults(
20+
defineProps<{
21+
rows: number
22+
schemes?: ('thin' | 'medium' | 'circle')[]
23+
sizing: string
24+
}>(),
25+
{
26+
schemes: () => ['medium', 'medium', 'medium', 'medium', 'medium'],
27+
},
28+
)
29+
</script>
30+
31+
<style lang="scss" scoped>
32+
.skeleton-table {
33+
display: flex;
34+
flex-direction: column;
35+
gap: toRem(24);
36+
width: 100%;
37+
}
38+
39+
.skeleton-table__row {
40+
display: grid;
41+
align-items: center;
42+
grid-gap: toRem(16);
43+
}
44+
</style>

‎src/common/loader/Spinner.vue renamed to ‎src/common/loaders/Spinner.vue

Copy file name to clipboard
File renamed without changes.

‎src/common/loaders/index.ts

Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as Spinner } from './Spinner.vue'
2+
export { default as Skeleton } from './Skeleton.vue'
3+
export { default as SkeletonTable } from './SkeletonTable.vue'

‎src/common/modals/BasicModal.vue

Copy file name to clipboard
+99Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<modal
3+
v-model:is-shown="isModalShown"
4+
:is-close-by-click-outside="isCloseByClickOutside"
5+
>
6+
<template #default="{ modal }">
7+
<div class="basic-modal__pane" v-bind="$attrs">
8+
<div class="basic-modal__header">
9+
<div class="basic-modal__header-titles">
10+
<h5 v-if="title" class="basic-modal__title">
11+
{{ title }}
12+
</h5>
13+
<span v-if="subtitle" class="basic-modal__subtitle">
14+
{{ subtitle }}
15+
</span>
16+
</div>
17+
<app-button
18+
class="basic-modal__close-btn"
19+
scheme="default"
20+
:icon-right="$icons.x"
21+
@click="modal.close"
22+
/>
23+
</div>
24+
<slot />
25+
</div>
26+
</template>
27+
</modal>
28+
</template>
29+
30+
<script lang="ts" setup>
31+
import { AppButton, Modal } from '@/common'
32+
33+
import { ref, watch } from 'vue'
34+
35+
const props = withDefaults(
36+
defineProps<{
37+
isShown: boolean
38+
isCloseByClickOutside?: boolean
39+
title?: string
40+
subtitle?: string
41+
}>(),
42+
{
43+
title: '',
44+
subtitle: '',
45+
isCloseByClickOutside: true,
46+
},
47+
)
48+
49+
const emit = defineEmits<{
50+
(e: 'update:is-shown', v: boolean): void
51+
}>()
52+
53+
const isModalShown = ref(false)
54+
55+
watch(
56+
() => props.isShown,
57+
value => {
58+
isModalShown.value = value
59+
},
60+
)
61+
62+
watch(isModalShown, value => {
63+
emit('update:is-shown', value)
64+
})
65+
</script>
66+
67+
<style lang="scss" scoped>
68+
.basic-modal__pane {
69+
background: var(--background-primary-main);
70+
padding: toRem(24);
71+
border-radius: toRem(8);
72+
max-width: toRem(552);
73+
}
74+
75+
.basic-modal__header {
76+
display: flex;
77+
justify-content: space-between;
78+
align-items: flex-start;
79+
margin-bottom: toRem(32);
80+
}
81+
82+
.basic-modal__header-titles {
83+
display: flex;
84+
flex-direction: column;
85+
gap: toRem(8);
86+
}
87+
88+
.basic-modal__title {
89+
font-size: toRem(28);
90+
line-height: 1.3;
91+
color: var(--text-primary-main);
92+
}
93+
94+
.basic-modal__subtitle {
95+
font-size: toRem(14);
96+
line-height: 1.45;
97+
color: var(--text-secondary-main);
98+
}
99+
</style>

‎src/common/modals/index.ts

Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as BasicModal } from '@/common/modals/BasicModal.vue'

‎src/pages/UiKitPage.vue

Copy file name to clipboardExpand all lines: src/pages/UiKitPage.vue
+18-13Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -513,6 +513,7 @@
513513
<error-message :message="$t('ui-kit-page.loading-error-msg')" />
514514
<no-data-message :message="$t('ui-kit-page.no-data-msg')" />
515515
<loader />
516+
<loader class="ui-kit-page__loader-skeleton" scheme="skeleton" />
516517
<accordion class="ui-kit-page__collapse">
517518
<template #head="{ accordion }">
518519
<app-button
@@ -542,18 +543,16 @@
542543
:text="$t('ui-kit-page.modal-btn')"
543544
@click="isModalShown = true"
544545
/>
545-
<modal v-model:is-shown="isModalShown">
546-
<template #default="{ modal }">
547-
<app-button
548-
@click="modal.close"
549-
:icon-right="$icons.xCircle"
550-
scheme="default"
551-
modification="default"
552-
size="default"
553-
color="default"
554-
/>
555-
</template>
556-
</modal>
546+
<basic-modal
547+
class="ui-kit-page__modal-pane"
548+
v-model:is-shown="isModalShown"
549+
title="Modal Title"
550+
subtitle="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
551+
>
552+
<div class="ui-kit-page__modal-body">
553+
{{ $t('ui-kit-page.collapse-text') }}
554+
</div>
555+
</basic-modal>
557556
<div class="ui-kit-page__icons">
558557
<icon :name="$icons.academicCap" />
559558
<icon :name="$icons.adjustments" />
@@ -793,7 +792,7 @@
793792
<script lang="ts" setup>
794793
import {
795794
AppButton,
796-
Modal,
795+
BasicModal,
797796
ErrorMessage,
798797
NoDataMessage,
799798
Loader,
@@ -906,4 +905,10 @@ const throwBusInfo = () => {
906905
max-width: toRem(24);
907906
max-height: toRem(24);
908907
}
908+
909+
.ui-kit-page__loader-skeleton {
910+
width: toRem(200);
911+
height: toRem(24);
912+
margin-bottom: toRem(16);
913+
}
909914
</style>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.