427 lines
11 KiB
Vue
427 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import IconLogout from "@/components/icons/IconLogout.vue";
|
|
import IconSettings from "@/components/icons/IconSettings.vue";
|
|
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
|
|
import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
|
|
import ItDropdown from "@/components/ui/ItDropdown.vue";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
|
|
import logger from "loglevel";
|
|
import { reactive, ref } from "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: -1,
|
|
name: "Select a name",
|
|
},
|
|
});
|
|
|
|
const dropdownData = [
|
|
{
|
|
title: "Option 1",
|
|
icon: IconLogout,
|
|
data: {},
|
|
},
|
|
{
|
|
title: "Option 2",
|
|
icon: IconLogout,
|
|
data: {
|
|
test: 12,
|
|
},
|
|
},
|
|
{
|
|
title: "Option 3",
|
|
icon: IconSettings,
|
|
data: {
|
|
amount: 34,
|
|
},
|
|
},
|
|
];
|
|
|
|
// TODO: die CSS-Klasse für die Farben wird hier in der StyleGuideView.vue generiert.
|
|
// deshalb muss man diese CSS-Klassen in tailwind.config.js "safelist"en, wenn diese sonst
|
|
// noch nirgendwo verwendet werden.
|
|
const colors = [
|
|
"blue",
|
|
"sky",
|
|
"green",
|
|
"red",
|
|
"orange",
|
|
"yellow",
|
|
"stone",
|
|
"gray",
|
|
"slate",
|
|
];
|
|
const colorValues = [200, 300, 400, 500, 600, 700, 800, 900];
|
|
|
|
function colorBgClass(color: string, value: number) {
|
|
return `bg-${color}-${value}`;
|
|
}
|
|
|
|
const satisfactionValues = [
|
|
{ name: "Sehr unzufrieden", active: false, value: 1 },
|
|
{ name: "unzufrieden", active: true, value: 2 },
|
|
{ name: "zufrieden", active: false, value: 3 },
|
|
{ name: "Sehr zufrieden", active: false, value: 4 },
|
|
];
|
|
const satisfaction = ref(satisfactionValues[1].value);
|
|
const satisfactionText =
|
|
'Wie zufrieden bist du mit dem Kurs "Überbetriebliche Kurse" allgemein?';
|
|
|
|
const sourceLabel = "Wie bist du auf das Kursangebot aufmerksam geworden?";
|
|
const sourceValues = ref([]);
|
|
const sourceItems = [
|
|
{
|
|
name: "Internet",
|
|
value: "I",
|
|
},
|
|
{
|
|
name: "TV",
|
|
value: "T",
|
|
},
|
|
];
|
|
|
|
function log(data: any) {
|
|
logger.info(data);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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="it-icon" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
arrow-up
|
|
<it-icon-arrow-up />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
arrow-down
|
|
<it-icon-arrow-down />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
arrow-left
|
|
<it-icon-arrow-left />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
arrow-right
|
|
<it-icon-arrow-right />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
close
|
|
<it-icon-close />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
check
|
|
<it-icon-check />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
info
|
|
<it-icon-info />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
list
|
|
<it-icon-list />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
menu
|
|
<it-icon-menu />
|
|
</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 />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-watch
|
|
<it-icon-ls-watch />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-test
|
|
<it-icon-ls-test />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-practice
|
|
<it-icon-ls-practice />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-network
|
|
<it-icon-ls-network />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-start
|
|
<it-icon-ls-start />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
ls-end
|
|
<it-icon-ls-end />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
|
|
<div class="inline-flex flex-col">
|
|
lc-assignment
|
|
<it-icon-lc-assignment />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
lc-book
|
|
<it-icon-lc-book />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
lc-document
|
|
<it-icon-lc-document />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
lc-exercise
|
|
<it-icon-lc-exercise />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
lc-media-library
|
|
<it-icon-lc-media-library />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
lc-online-training
|
|
<it-icon-lc-online-training />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
lc-resource
|
|
<it-icon-lc-resource />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
lc-test
|
|
<it-icon-lc-test />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
lc-video
|
|
<it-icon-lc-video />
|
|
</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 />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
smiley-thinking
|
|
<it-icon-smiley-thinking />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
smiley-neutral
|
|
<it-icon-smiley-neutral />
|
|
</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-blue-400">
|
|
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 class="inline-flex flex-col text-white bg-blue-900">
|
|
vbv
|
|
<it-icon-vbv class="w-24 h-24" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
vbv-pos
|
|
<it-icon-vbv-pos class="w-24 h-24" />
|
|
</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 v-for="value in colorValues" :key="value" class="text-center">
|
|
{{ value }}
|
|
</td>
|
|
</tr>
|
|
<tr v-for="color in colors" :key="color" class="h-12 md:h-18 lg:h-24">
|
|
<td>{{ color }}</td>
|
|
<td v-for="value in colorValues" :key="value" 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>
|
|
<button class="btn-text">Text</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 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>
|
|
|
|
<button type="button" class="btn-text 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>
|
|
</div>
|
|
|
|
<h2 class="mt-8 mb-8">Dropdown (Work-in-progress)</h2>
|
|
|
|
<ItDropdownSelect
|
|
v-model="state.dropdownSelected"
|
|
class="w-full lg:w-96 mt-4 lg:mt-0"
|
|
:items="state.dropdownValues"
|
|
></ItDropdownSelect>
|
|
{{ state.dropdownSelected }}
|
|
|
|
<h2 class="mt-8 mb-8">Checkbox</h2>
|
|
|
|
<ItCheckbox
|
|
:checked="state.checkboxValue"
|
|
:disabled="false"
|
|
@toggle="state.checkboxValue = !state.checkboxValue"
|
|
>
|
|
Label
|
|
</ItCheckbox>
|
|
|
|
<ItCheckbox disabled class="mt-4">Disabled</ItCheckbox>
|
|
|
|
<h2 class="mt-8 mb-8">Dropdown</h2>
|
|
|
|
<div class="h-60">
|
|
<ItDropdown
|
|
:button-classes="['btn-primary']"
|
|
:list-items="dropdownData"
|
|
:align="'left'"
|
|
@select="log"
|
|
>
|
|
Click Me
|
|
</ItDropdown>
|
|
</div>
|
|
<ItCheckboxGroup
|
|
v-model="sourceValues"
|
|
:label="sourceLabel"
|
|
:items="sourceItems"
|
|
class="mb-8"
|
|
/>
|
|
<ItRadioGroup
|
|
v-model="satisfaction"
|
|
:label="satisfactionText"
|
|
:items="satisfactionValues"
|
|
/>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped></style>
|