Skip to content

Commit

Permalink
Added brand spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
@mosarabi
mosarabi committed Jun 14, 2024
1 parent 7aba51e commit 1aece86
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 105 deletions.
105 changes: 2 additions & 103 deletions packages/alto/src/_dev/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,13 @@
<script setup lang="ts">
import 'uno.css';
import '../assets/main.css';
import { ref } from 'vue';
import { Dropdown, PaginationBar, Tag } from '~/components';
import type { DropdownValue, TagItemValue } from '~/types';
const multiple = ref(null);
const single = ref(null);
const value = ref(null);
const currentPage = ref(1);
const perPage = ref(10);
const preferredLanguages = ref<TagItemValue[]>([]);
const total = 50;
const totalPages = Math.ceil(total / perPage.value);
const perPageOptions = [5, 10, 20, 30, 50, 100];
const items: Array<DropdownValue> = [
{ label: '+1 stars', key: 3, groupName: 'Rating' },
{ label: 'Visible', key: 2, groupName: 'Visibility' },
{ label: 'Hidden', key: 5, groupName: 'Visibility' },
{ label: '+3 stars', key: 4, groupName: 'Rating' },
{ label: '+4 stars', key: 1, groupName: 'Rating' },
];
const singleItems = ref<DropdownValue[]>([
{ label: 'Shoes', key: 1 },
{ label: 'Cosmetics', key: 2 },
{ label: 'Gym', key: 3 },
]);
const languages: Array<DropdownValue> = [
{ label: 'Arabic', key: 1 },
{ label: 'English', key: 2 },
{ label: 'German', key: 3 },
{ label: 'French', key: 4 },
{ label: 'Dutch', key: 5 },
{ label: 'Hindi', key: 6 },
];
function handlePaginationNavigation(pageNumber: number) {
currentPage.value = pageNumber;
}
function search(value: string) {
console.log(value);
}
import { Spinner } from '~/components';
</script>

<template>
<div class="container">
<div class="row">
<div>
<span>Default Dropdown : </span>
<Dropdown v-model="value" searchable :items="languages" placeholder="Select item" />
</div>
<div>
<span>Multiple Dropdown : </span>
<Dropdown v-model="multiple" :limit="4" :items="items" searchable multiple placeholder="Select items" />
</div>
<div>
<span>Single Dropdown :</span>
<Dropdown v-model="single" :items="singleItems" placeholder="Select item" />
</div>
</div>

<div class="row">
<div>
<span>Tags : </span>
<Tag
v-model="preferredLanguages"
placeholder="Select programming languages"
:max="3"
type="dropdown"
:items="languages"
search-input-placeholder="Search..."
:search="search"
/>
</div>
</div>

<div class="row">
<div>
<PaginationBar
v-model:perPage="perPage"
:current="currentPage"
:size="totalPages"
:count="perPage"
:total="total"
:per-page-options="perPageOptions"
@update:current="handlePaginationNavigation"
/>
</div>
<Spinner />
</div>
</div>
</template>
Expand All @@ -106,21 +22,4 @@ function search(value: string) {
height: 100vh;
gap: 40px;
}
.container .row {
display: flex;
flex-direction: column;
gap: 300px;
width: 80%;
}
.container .row > div {
flex: 1;
}
.container .row > div span {
margin: 0;
color: var(--gray-900);
font: var(--text-sm-medium);
}
</style>
7 changes: 5 additions & 2 deletions packages/alto/src/components/Spinner/Spinner.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue';
import YouCanBrand from './internal/YouCanBrand.vue';
import type { SpinnerProps } from '~/types';
const props = withDefaults(
defineProps<SpinnerProps>(),
{
Expand All @@ -16,10 +18,11 @@ const spinnerSize = computed(() => `${props.size}px`);

<template>
<div class="spinner-block">
<div class="spinner" />
<!-- <div class="spinner" />
<p v-if="label" class="label" :class="[labelFontSize]">
{{ label }}
</p>
</p> -->
<YouCanBrand />
</div>
</template>

Expand Down
112 changes: 112 additions & 0 deletions packages/alto/src/components/Spinner/internal/YouCanBrand.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
const size = ref(67);
const percent = 59 / 67;
const height = computed(() => `${size.value * percent}px`);
const width = computed(() => `${size.value}px`);
const type = 'draw-brand';
</script>

<template>
<div class="yc-brand">
<div class="shadow-brand">
<svg :width="width" :height="height" fill="var(--gray-100)" viewBox="0 0 67 59" xmlns="http://www.w3.org/2000/svg">
<path d="M20.4435 0H0L12.7798 29.0835H33.2128L20.4435 0Z" />
<path d="M45.9925 0L33.2128 29.0939L20.433 58.167H40.8765L53.6562 29.0939L66.436 0H45.9925Z" />
</svg>
</div>
<div class="animated-brand" :class="type">
<svg :width="width" :height="height" viewBox="0 0 67 59" fill="var(--brand-500)" stroke="var(--brand-500)" xmlns="http://www.w3.org/2000/svg">
<path class="path1" d="M32.4472 28.5835H13.1062L0.765851 0.5H20.1169L32.4472 28.5835Z" />
<path class="path2" d="M33.6705 29.2951L33.6705 29.295L46.319 0.5H65.6703L53.1985 28.8927L53.1984 28.8928L40.5501 57.667H21.1989L33.6705 29.2951Z" />
</svg>
</div>
</div>
</template>

<style scoped>
.yc-brand {
display: flex;
position: absolute;
justify-content: center;
overflow: hidden;
}
.yc-brand .shadow-brand,
.yc-brand .animated-brand {
width: v-bind(width);
height: v-bind(height);
}
.yc-brand .shadow-brand {
position: relative;
z-index: 1;
bottom: 0;
}
.yc-brand .animated-brand {
position: absolute;
z-index: 2;
bottom: 0;
overflow: hidden;
}
.yc-brand .animated-brand.fill-brand {
animation: fill 600ms ease-in-out backwards alternate infinite;
}
.yc-brand .animated-brand.draw-brand svg .path1,
.yc-brand .animated-brand.draw-brand svg .path2 {
animation: draw1 1500ms linear forwards infinite;
animation-delay: 1000ms;
fill: transparent;
}
.yc-brand .animated-brand.draw-brand svg .path1 {
stroke-dasharray: 100.04;
}
.yc-brand .animated-brand.draw-brand svg .path2 {
stroke-dasharray: 163.58;
}
.yc-brand .animated-brand svg {
position: absolute;
bottom: 0;
}
@keyframes fill {
0% { height: 0; }
100% { height: 100%; }
}
@keyframes draw1 {
0% { stroke-dashoffset: 100.04; }
30% {
stroke-dashoffset: 0;
fill: transparent;
}
100% {
stroke-dashoffset: 0;
fill: var(--brand-500);
}
}
@keyframes draw2 {
0% { stroke-dashoffset: 163.58; }
30% {
stroke-dashoffset: 0;
fill: transparent;
}
100% {
stroke-dashoffset: 0;
fill: var(--brand-500);
}
}
</style>

0 comments on commit 1aece86

Please sign in to comment.