293 lines
8.9 KiB
Vue
293 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
|
|
import {reactive} from 'vue'
|
|
import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue'
|
|
import MainNavigationBar from '@/components/MainNavigationBar.vue';
|
|
import ItCheckbox from '@/components/ui/ItCheckbox.vue';
|
|
|
|
|
|
const state = reactive({
|
|
checkboxValue: true,
|
|
dropdownValues: [
|
|
{id: 1, name: 'Wade Cooper'},
|
|
{id: 2, name: 'Arlene Mccoy'},
|
|
{id: 3, name: 'Devon Webb'},
|
|
{id: 4, name: 'Tom Cook'},
|
|
{id: 5, name: 'Tanya Fox'},
|
|
{id: 6, name: 'Hellen Schmidt'},
|
|
{id: 7, name: 'Caroline Schultz'},
|
|
{id: 8, name: 'Mason Heaney'},
|
|
{id: 9, name: 'Claudie Smitham'},
|
|
{id: 10, name: 'Emil Schaefer'},
|
|
],
|
|
dropdownSelected: {id: 8},
|
|
})
|
|
|
|
|
|
const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
|
|
const colorValues = [100, 200, 300, 400, 500, 600, 700, 800, 900,];
|
|
|
|
function colorBgClass(color: string, value: number) {
|
|
return `bg-${color}-${value}`;
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<MainNavigationBar/>
|
|
|
|
<main class="px-8 py-4">
|
|
<h1>Style Guide</h1>
|
|
|
|
<div class="border-b text-gray-700 pb-2 mt-12">
|
|
<h2 class="heading-1">Icons</h2>
|
|
</div>
|
|
|
|
<p class="mt-8 text-xl">The icons are defined as Web Components, so they can also be used in the backend. Use them like
|
|
<it-icon-message/> </p>
|
|
|
|
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
|
|
<div class="inline-flex flex-col">
|
|
message
|
|
<it-icon-message class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
arrow-up
|
|
<it-icon-arrow-up class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
arrow-down
|
|
<it-icon-arrow-down class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
arrow-left
|
|
<it-icon-arrow-left class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
arrow-right
|
|
<it-icon-arrow-right class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
close
|
|
<it-icon-close class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
check
|
|
<it-icon-check class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
info
|
|
<it-icon-info class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
list
|
|
<it-icon-list class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
menu
|
|
<it-icon-menu class="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
|
|
<div class="inline-flex flex-col">
|
|
ls-apply
|
|
<it-icon-ls-apply class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-watch
|
|
<it-icon-ls-watch class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-test
|
|
<it-icon-ls-test class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-practice
|
|
<it-icon-ls-practice class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-network
|
|
<it-icon-ls-network class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-start
|
|
<it-icon-ls-start class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-end
|
|
<it-icon-ls-end class="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
|
|
<div class="inline-flex flex-col">
|
|
smiley-happy
|
|
<it-icon-smiley-happy class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
smiley-thinking
|
|
<it-icon-smiley-thinking class="w-8 h-8" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
smiley-neutral
|
|
<it-icon-smiley-neutral class="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
|
|
<div class="inline-flex flex-col text-orange-500">
|
|
message big
|
|
<it-icon-message class="w-16 h-16 text-orange-500"/>
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col text-green-500">
|
|
ls-network big
|
|
<it-icon-ls-network class="w-16 h-16"/>
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col text-red-500">
|
|
close small
|
|
<it-icon-close class="w-6 h-6"/>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="border-b text-gray-700 pb-2 mt-8">
|
|
<h2 class="heading-1">Colors</h2>
|
|
</div>
|
|
<table class="text-gray-700">
|
|
<tr class="h-12 md:h-18 lg:h-24">
|
|
<td></td>
|
|
<td class="text-center" v-for="value in colorValues">{{value}}</td>
|
|
</tr>
|
|
<tr v-for="color in colors" class="h-12 md:h-18 lg:h-24">
|
|
<td>{{color}}</td>
|
|
<td v-for="value in colorValues" class="px-2">
|
|
<div class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16 rounded-full" :class="[colorBgClass(color, value)]"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="border-b text-gray-700 pb-2 mt-12">
|
|
<h2 class="heading-1">Typography</h2>
|
|
</div>
|
|
|
|
<h1 class="mt-8">Heading 1</h1>
|
|
<h2 class="mt-8">Heading 2</h2>
|
|
<h3 class="mt-8">Heading 3</h3>
|
|
|
|
<div class="mt-8 text-xl font-bold">Text Large Bold</div>
|
|
<div class="mt-8 text-xl">Text Large</div>
|
|
<div class="mt-8 link text-xl">Link Large</div>
|
|
<div class="mt-8 font-bold">Text Bold</div>
|
|
<div class="mt-8">Text</div>
|
|
<div class="mt-8 link">Link</div>
|
|
<div class="mt-8 text-sm">Text Small</div>
|
|
<div class="mt-8 link text-sm">Link Small</div>
|
|
|
|
<div class="border-b text-gray-700 pb-2 mt-12">
|
|
<h2 class="heading-1">Components</h2>
|
|
</div>
|
|
|
|
<h2 class="mt-8 mb-8">Buttons</h2>
|
|
|
|
<div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
|
|
<button class="btn-primary">Primary</button>
|
|
<button class="btn-secondary">Secondary</button>
|
|
<button class="btn-blue">Blue</button>
|
|
<a class="btn-primary inline-block" href="/">Primary Link</a>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
|
|
<button disabled class="btn-primary">Primary disabled</button>
|
|
<button disabled class="btn-secondary">Secondary disabled</button>
|
|
<button disabled class="btn-blue">Blue disabled</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4 flex-wrap lg:flex-row lg:w-128 content-center lg:justify-start mb-16">
|
|
|
|
|
|
<button type="button"
|
|
class="btn-primary inline-flex items-center p-3 rounded-full">
|
|
<it-icon-message class="h-5 w-5"></it-icon-message>
|
|
</button>
|
|
|
|
<button type="button"
|
|
class="btn-primary inline-flex items-center px-3 py-2">
|
|
<it-icon-message class="-ml-1 mr-3 h-5 w-5"></it-icon-message>
|
|
Button text
|
|
</button>
|
|
|
|
<button type="button"
|
|
class="btn-primary inline-flex items-center px-3 py-2">
|
|
Button text
|
|
<it-icon-message class="ml-3 -mr-1 h-5 w-5"></it-icon-message>
|
|
</button>
|
|
</div>
|
|
|
|
<h2 class="mt-8 mb-8">Dropdown (Work-in-progress)</h2>
|
|
|
|
<Listbox as="div" v-model="state.dropdownSelected">
|
|
<div class="mt-1 relative w-128">
|
|
<ListboxButton
|
|
class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold">
|
|
<span class="block truncate">{{ state.dropdownSelected.name }}</span>
|
|
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
|
<it-icon-arrow-down class="h-5 w-5" aria-hidden="true"/>
|
|
</span>
|
|
</ListboxButton>
|
|
|
|
<transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0">
|
|
<ListboxOptions
|
|
class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-gray-900 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
|
|
<ListboxOption as="template" v-for="person in state.dropdownValues" :key="person.id" :value="person"
|
|
v-slot="{ active, selected }">
|
|
<li
|
|
:class="[active ? 'text-white bg-blue-900' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
|
|
<span :class="[state.dropdownSelected ? 'font-semibold' : 'font-normal', 'block truncate']">
|
|
{{ person.name }}
|
|
</span>
|
|
|
|
<span v-if="state.dropdownSelected"
|
|
:class="[active ? 'text-white' : 'text-blue-900', 'absolute inset-y-0 right-0 flex items-center pr-4']">
|
|
<it-icon-check class="h-5 w-5" aria-hidden="true"/>
|
|
</span>
|
|
</li>
|
|
</ListboxOption>
|
|
</ListboxOptions>
|
|
</transition>
|
|
</div>
|
|
</Listbox>
|
|
|
|
<h2 class="mt-8 mb-8">Checkbox</h2>
|
|
|
|
<ItCheckbox :disabled="false" class="" v-model="state.checkboxValue">Label</ItCheckbox>
|
|
|
|
<ItCheckbox disabled class="mt-4">Disabled</ItCheckbox>
|
|
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|