Kristaps Fabians Geikins
437 lines
19 KiB
Vue
437 lines
19 KiB
Vue
<template>
|
|
<div class="">
|
|
<header class="my-6">
|
|
<div class="text-foreground">
|
|
<h1 class="h3 mb-2 px-2">Design System Demo</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="space-y-4">
|
|
<LayoutPanel class="background text-foreground">
|
|
<template #header>
|
|
<span class="h3">Typograhpy</span>
|
|
</template>
|
|
<template #default>
|
|
<div class="my-10"></div>
|
|
<p>Classic headings:</p>
|
|
<div class="mt-4 flex flex-col gap-y-4">
|
|
<div class="h1">Heading 1</div>
|
|
<div class="h2">Heading 2</div>
|
|
<div class="h3">Heading 3</div>
|
|
<div class="h4">Heading 4</div>
|
|
<div class="h5">Heading 5</div>
|
|
<div class="normal">Normal text</div>
|
|
<div class="label">Label text</div>
|
|
<div class="label label--light">Label text (light)</div>
|
|
<div class="caption">Caption text</div>
|
|
</div>
|
|
<div class="bg-foundation-focus mt-4 rounded-lg px-4 py-12 shadow-inner">
|
|
<b>Font faces?</b>
|
|
system ui only - using github's stack. Lighter, better performance, no more
|
|
google fonts trakcing and a more native look.
|
|
</div>
|
|
<div class="mt-4">
|
|
<div class="font-sans">Font weights:</div>
|
|
<ul>
|
|
<li class="font-thin">Thin</li>
|
|
<li class="font-extralight">Exta light</li>
|
|
<li class="font-light">Light</li>
|
|
<li class="font-normal">Normal</li>
|
|
<li class="font-medium">Medium</li>
|
|
<li class="font-semibold">SemiBold</li>
|
|
<li class="font-bold">Bold</li>
|
|
<li class="font-extrabold">ExtraBold</li>
|
|
<li class="font-black">Black</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</LayoutPanel>
|
|
<LayoutPanel class="background text-foreground">
|
|
<template #header>
|
|
<span class="h3">Colors</span>
|
|
</template>
|
|
<template #default>
|
|
<div>Here are the available foreground colors:</div>
|
|
<div class="mt-4">
|
|
<div class="bg-foundation-focus mt-4 rounded-lg px-4 py-12 shadow-inner">
|
|
<b class="text-primary">Text colors? </b>
|
|
<span class="text-foreground">
|
|
<b>foreground</b>
|
|
for text you want to stand out.
|
|
</span>
|
|
<span class="text-foreground-2">
|
|
<b>foreground-2</b>
|
|
for text you don't want to stand out.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<ul class="font-bold">
|
|
<li class="text-foreground">text-foreground</li>
|
|
<li class="text-foreground-2">text-foreground-2</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</LayoutPanel>
|
|
<LayoutPanel class="background text-foreground">
|
|
<template #header>
|
|
<span class="h3">Buttons</span>
|
|
</template>
|
|
<template #default>
|
|
<div class="my-8 flex flex-col gap-y-4 overflow-x-scroll">
|
|
<div v-for="size in sizes" :key="size" class="grid grid-cols-6">
|
|
<span class="caption col-span-4 text-center md:col-span-1">
|
|
{{ size }}
|
|
</span>
|
|
<div><FormButton :size="size">Button</FormButton></div>
|
|
<div><FormButton :size="size" disabled>Button</FormButton></div>
|
|
<!-- <div><FormButton :size="size" rounded>Button</FormButton></div>
|
|
<div><FormButton :size="size" rounded disabled>Button</FormButton></div> -->
|
|
<div><FormButton :size="size" outlined>Button</FormButton></div>
|
|
<div><FormButton :size="size" outlined disabled>Button</FormButton></div>
|
|
<!-- <div><FormButton :size="size" rounded outlined>Button</FormButton></div> -->
|
|
<div>
|
|
<!-- <FormButton :size="size" rounded outlined disabled>Button</FormButton> -->
|
|
</div>
|
|
</div>
|
|
<div v-for="size in sizes" :key="size" class="grid grid-cols-6">
|
|
<span class="caption col-span-4 text-center md:col-span-1">
|
|
{{ size }}
|
|
</span>
|
|
<div><FormButton :size="size" rounded>Button</FormButton></div>
|
|
<div><FormButton :size="size" rounded disabled>Button</FormButton></div>
|
|
<!-- <div><FormButton :size="size" rounded>Button</FormButton></div>
|
|
<div><FormButton :size="size" rounded disabled>Button</FormButton></div> -->
|
|
<div><FormButton :size="size" rounded outlined>Button</FormButton></div>
|
|
<div>
|
|
<FormButton :size="size" rounded outlined disabled>Button</FormButton>
|
|
</div>
|
|
<!-- <div><FormButton :size="size" rounded outlined>Button</FormButton></div> -->
|
|
<div>
|
|
<!-- <FormButton :size="size" rounded outlined disabled>Button</FormButton> -->
|
|
</div>
|
|
</div>
|
|
<div v-for="size in sizes" :key="size" class="grid grid-cols-6">
|
|
<span class="caption col-span-4 text-center md:col-span-1">
|
|
{{ size }}
|
|
</span>
|
|
<div>
|
|
<FormButton :size="size" :icon-left="XMarkIcon">Button</FormButton>
|
|
</div>
|
|
<div>
|
|
<FormButton :size="size" disabled :icon-right="ArrowRightCircleIcon">
|
|
Button
|
|
</FormButton>
|
|
</div>
|
|
<div>
|
|
<FormButton :size="size" outlined :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
</div>
|
|
<div>
|
|
<FormButton :size="size" outlined disabled :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
</div>
|
|
<!-- <div>
|
|
<FormButton :size="size" rounded outlined :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
</div>
|
|
<div>
|
|
<FormButton :size="size" rounded outlined disabled :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div
|
|
v-for="type in types"
|
|
:key="type"
|
|
class="flex flex-wrap space-x-4 py-6"
|
|
>
|
|
<span class="caption col-span-4 text-center md:col-span-1">
|
|
{{ type }}
|
|
</span>
|
|
<div><FormButton :color="type">Delete</FormButton></div>
|
|
<div><FormButton :color="type" disabled>Delete</FormButton></div>
|
|
<div><FormButton :color="type" rounded>Delete</FormButton></div>
|
|
<div><FormButton :color="type" rounded disabled>Delete</FormButton></div>
|
|
<div><FormButton :color="type" outlined>Delete</FormButton></div>
|
|
<div><FormButton :color="type" outlined disabled>Delete</FormButton></div>
|
|
<div><FormButton :color="type" rounded outlined>Delete</FormButton></div>
|
|
<div>
|
|
<FormButton :color="type" rounded outlined disabled>Delete</FormButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center justify-around rounded-md py-6">
|
|
<FormButton text size="xs">Text</FormButton>
|
|
<FormButton text size="sm">Text</FormButton>
|
|
<FormButton text size="base">Text</FormButton>
|
|
<FormButton text size="lg">Text</FormButton>
|
|
<FormButton text size="xl">Text</FormButton>
|
|
<FormButton text disabled>Text</FormButton>
|
|
<FormButton text disabled>Text</FormButton>
|
|
<FormButton text disabled>Text</FormButton>
|
|
</div>
|
|
<div class="bg-primary rounded-md">
|
|
<div class="flex flex-wrap items-center justify-around py-6">
|
|
<FormButton color="invert" text size="xs">Text</FormButton>
|
|
<FormButton color="invert" text size="sm">Text</FormButton>
|
|
<FormButton color="invert" text size="base">Text</FormButton>
|
|
<FormButton color="invert" text size="lg">Text</FormButton>
|
|
<FormButton color="invert" text size="xl">Text</FormButton>
|
|
<FormButton color="invert" text disabled>Text</FormButton>
|
|
<FormButton color="invert" text disabled>Text</FormButton>
|
|
<FormButton color="invert" text disabled>Text</FormButton>
|
|
</div>
|
|
<div class="flex flex-wrap items-center justify-around py-6">
|
|
<FormButton color="invert" invert size="xs" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" invert size="sm" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" invert size="base" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" invert size="lg" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" invert size="xl" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" invert rounded :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" invert outlined rounded>Button</FormButton>
|
|
<FormButton color="invert" invert outlined :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
</div>
|
|
<div class="flex flex-wrap items-center justify-around py-6">
|
|
<FormButton color="invert" disabled size="xs" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" disabled size="sm" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" disabled size="base" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" disabled size="lg" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" disabled size="xl" :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" disabled rounded :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
<FormButton color="invert" disabled outlined rounded>Button</FormButton>
|
|
<FormButton color="invert" disabled outlined :icon-right="XMarkIcon">
|
|
Button
|
|
</FormButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</LayoutPanel>
|
|
<LayoutPanel class="background text-foreground">
|
|
<template #header>
|
|
<span class="h3">Avatars</span>
|
|
</template>
|
|
<template #default>
|
|
<div class="flex justify-around">
|
|
<div class="flex items-center space-x-2">
|
|
<UserAvatar hover-effect size="xl" />
|
|
<UserAvatar hover-effect size="lg" />
|
|
<UserAvatar hover-effect />
|
|
<UserAvatar hover-effect size="sm" />
|
|
<UserAvatar hover-effect size="xs" />
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<UserAvatar
|
|
:user="{ name: 'Dimitrie Stefanescu', id: 'ds' }"
|
|
hover-effect
|
|
size="xl"
|
|
/>
|
|
<UserAvatar
|
|
:user="{ name: 'Andrei Stefanescu', id: 'ds' }"
|
|
hover-effect
|
|
size="lg"
|
|
/>
|
|
<UserAvatar
|
|
:user="{ name: 'Dimitrie Berbinski', id: 'ds' }"
|
|
hover-effect
|
|
/>
|
|
<UserAvatar
|
|
:user="{ name: 'Zorkan Stefanescu', id: 'ds' }"
|
|
hover-effect
|
|
size="sm"
|
|
/>
|
|
<UserAvatar
|
|
:user="{ name: 'Gergo Cant Type Your Last Name', id: 'ds' }"
|
|
hover-effect
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<UserAvatar
|
|
:user="{ name: 'Dimitrie Stefanescu', id: 'ds', avatar: img }"
|
|
hover-effect
|
|
size="xl"
|
|
/>
|
|
<UserAvatar
|
|
:user="{ name: 'Andrei Stefanescu', id: 'ds', avatar: img }"
|
|
hover-effect
|
|
size="lg"
|
|
/>
|
|
<UserAvatar
|
|
:user="{ name: 'Dimitrie Berbinski', id: 'ds', avatar: img }"
|
|
hover-effect
|
|
/>
|
|
<UserAvatar
|
|
:user="{ name: 'Zorkan Stefanescu', id: 'ds', avatar: img }"
|
|
hover-effect
|
|
size="sm"
|
|
/>
|
|
<UserAvatar
|
|
:user="{
|
|
name: 'Gergo Cant Type Your Last Name',
|
|
id: 'ds',
|
|
avatar: img
|
|
}"
|
|
hover-effect
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</LayoutPanel>
|
|
<LayoutPanel class="background text-foreground">
|
|
<template #header>
|
|
<span class="h3">Links & form elements</span>
|
|
</template>
|
|
<template #default>
|
|
<div class="my-8">
|
|
<div>Link:</div>
|
|
<div>
|
|
<CommonTextLink>Basic Link</CommonTextLink>
|
|
|
|
|
<CommonTextLink disabled>Disabled Link</CommonTextLink>
|
|
</div>
|
|
</div>
|
|
<div class="my-8">
|
|
<Form class="flex flex-col space-y-4" @submit="onSubmit">
|
|
<div>Example form with various elements (we use vee-validate v4):</div>
|
|
<div>
|
|
<FormTextInput name="Basic" placeholder="Basic text input w/ label" />
|
|
</div>
|
|
<div>
|
|
<FormTextInput
|
|
name="Error"
|
|
placeholder="Error input"
|
|
:rules="
|
|
(val) =>
|
|
val === 'valid' ? true : 'Type in `valid` to make this valid!'
|
|
"
|
|
validate-on-mount
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FormTextInput
|
|
name="input1"
|
|
label="Custom label"
|
|
placeholder="Input w/ help text and a custom label"
|
|
help="Here's a tip for ya!"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FormTextInput
|
|
name="Required"
|
|
placeholder="This field is required"
|
|
:rules="(val) => (val ? true : 'Required')"
|
|
show-required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FormTextInput
|
|
name="Disabled"
|
|
placeholder="This field is disabled"
|
|
disabled
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FormTextInput name="Email" placeholder="test@text.com" type="email" />
|
|
</div>
|
|
<div>
|
|
<FormTextInput
|
|
name="Password"
|
|
placeholder="Enter PW here"
|
|
type="password"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FormCheckbox name="Checkbox1" />
|
|
</div>
|
|
<div>
|
|
<FormCheckbox
|
|
name="Checkboxreq"
|
|
label="Required checkbox"
|
|
show-required
|
|
:rules="(val) => (val ? true : 'Required!')"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FormCheckbox
|
|
name="Checkbox2"
|
|
label="Custom label"
|
|
description="Here's a description!"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FormCheckbox
|
|
name="Checkbox3"
|
|
description="Here's an inline description!"
|
|
inline-description
|
|
/>
|
|
</div>
|
|
<div>
|
|
<FormCheckbox
|
|
name="errorcheckbox1"
|
|
label="Checkbox with error"
|
|
description="Hello world!"
|
|
:rules="
|
|
(val) => (val ? true : 'Check this in to get rid of the error!')
|
|
"
|
|
validate-on-mount
|
|
/>
|
|
</div>
|
|
<div><FormButton submit full-width>Submit</FormButton></div>
|
|
</Form>
|
|
</div>
|
|
</template>
|
|
</LayoutPanel>
|
|
<LayoutPanel class="background text-foreground">
|
|
<template #header>
|
|
<span class="h3">Components</span>
|
|
</template>
|
|
<template #default>TODO</template>
|
|
</LayoutPanel>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Form } from 'vee-validate'
|
|
import { XMarkIcon, ArrowRightCircleIcon } from '@heroicons/vue/24/solid'
|
|
const onSubmit = (values: unknown) => console.log(values)
|
|
type FormButtonSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl'
|
|
type FormButtonColor = 'default' | 'invert' | 'danger' | 'warning'
|
|
const sizes: FormButtonSize[] = ['xs', 'sm', 'base', 'lg', 'xl']
|
|
const types: FormButtonColor[] = ['danger', 'warning']
|
|
const img =
|
|
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAuRXhpZgAATU0AKgAAAAgAAkAAAAMAAAABAD4AAEABAAEAAAABAAAAAAAAAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAA+AGQDASIAAhEBAxEB/8QAGwABAAIDAQEAAAAAAAAAAAAABQQGAAIDBwH/xAAjEAACAQUAAgIDAQAAAAAAAAAAAQQCAxEhMUFRBRITFGGh/8QAGgEAAwADAQAAAAAAAAAAAAAAAwQFAQIGB//EAB4RAAIDAQEBAAMAAAAAAAAAAAADAQIRBBITFCEx/9oADAMBAAIRAxEAPwBqmw2zqo2fBPtR98JtqLlcN6sOl6o/QDXEfo4VwqmWtQsrhrVB/gzRpzXVJT6oTzw0cN+mW2qB/DjXCx4/wPVhzvVaYKrVFa8HC5HaLPeiY8EG/HxnQettIrG5JW7thkK9ZLDfsh0i0M1k1o2dAL9rTQfft9HZFHQ2TQMV/g8q4Q7ezCU6dmG436Peo9lOrgrHjrHCFFa+w5ESwjirbB6N020+URVjhs4a9CVmhYO341gzS8wQOiugNcNeiHfiJZ0WW5aXogyLS3oZowg9KtKtJj48BMqzjJaJdtbA5lHR9VtITkTpXZNGM6CpNO2OS6eg8pFCgGqp0HkLoVJ4xaVrIPJfRqsDyqTBDfWYc3VtmBMGsPdYchfbo/DkLWygRJmKujkSfjGzlbJ09LeuS9R5Cwtkum8n5KjHn82I2ZyaWwMpmCU1Q9VWmQpDTyRlLTXTS5IT8mK1mCa7n0jS/IFNXRaTdTT2DzK1scVJJbyAsxdBJmhmZWtgcytbKipFPxsCJj6CS6haZX0CmV7Y7SQlU4RXVtmEZ1rLMC6E+Z6DYltPolHnYxsqtq48ku3dq9kbxB6s5Bco/wAjjyI2PkubKNav1eydZkVryYlUSSXJL1Z+Qz5O/wC9ldKbYk1+ydbkVtdF7KwnsUPXZSa6GS5HdkWu9VjpAlXqsMxSuSINTBrMvrewOZf7s6Tb1WwOZdq2PrErpiDnMvrewSZd6dpV17CJVb2NVkF8z47u2YQ8ttmBPRnwf//Z'
|
|
</script>
|