539 lines
13 KiB
Vue
539 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import IconLogout from "@/components/icons/IconLogout.vue";
|
|
import IconSettings from "@/components/icons/IconSettings.vue";
|
|
import LearningPathCircle from "@/components/learningPath/page/LearningPathCircle.vue";
|
|
import HorizontalBarChart from "@/components/ui/HorizontalBarChart.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 ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
|
|
import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
|
|
import ItTextarea from "@/components/ui/ItTextarea.vue";
|
|
import ItToggleSwitch from "@/components/ui/ItToggleSwitch.vue";
|
|
import RatingScale from "@/components/ui/RatingScale.vue";
|
|
import VerticalBarChart from "@/components/ui/VerticalBarChart.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",
|
|
},
|
|
];
|
|
|
|
const textValue = ref("abc");
|
|
|
|
const barChartItems = [
|
|
"Internet",
|
|
"Internet",
|
|
"Internet",
|
|
"Internet",
|
|
"Internet",
|
|
"Internet",
|
|
"TV",
|
|
"TV",
|
|
"TV",
|
|
"Anderes",
|
|
];
|
|
|
|
function log(data: any) {
|
|
logger.info(data);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main class="px-8 py-4">
|
|
<h1>Style Guide</h1>
|
|
|
|
<div class="mt-12 border-b pb-2 text-gray-700">
|
|
<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="mb-8 mt-8 flex flex-col flex-wrap gap-4 lg:flex-row">
|
|
<div class="inline-flex flex-col">
|
|
message
|
|
<it-icon-message class="it-icon" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
notification
|
|
<it-icon-notification 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="mb-8 mt-8 flex flex-col flex-wrap gap-4 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="mb-8 mt-8 flex flex-col flex-wrap gap-4 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="mb-8 mt-8 flex flex-col flex-wrap gap-4 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="mb-8 mt-8 flex flex-col flex-wrap gap-4 lg:flex-row">
|
|
<div class="inline-flex flex-col text-orange-500">
|
|
message big
|
|
<it-icon-message class="h-16 w-16 text-orange-500" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col text-blue-400">
|
|
ls-network big
|
|
<it-icon-ls-network class="h-16 w-16" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col text-red-500">
|
|
close small
|
|
<it-icon-close class="h-6 w-6" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col bg-blue-900 text-white">
|
|
vbv
|
|
<it-icon-vbv class="h-24 w-24" />
|
|
</div>
|
|
|
|
<div class="inline-flex flex-col">
|
|
vbv-pos
|
|
<it-icon-vbv-pos class="h-24 w-24" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 border-b pb-2 text-gray-700">
|
|
<h2 class="heading-1">Colors</h2>
|
|
</div>
|
|
<table class="text-gray-700">
|
|
<tr class="md:h-18 h-12 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="md:h-18 h-12 lg:h-24">
|
|
<td>{{ color }}</td>
|
|
<td v-for="value in colorValues" :key="value" class="px-2">
|
|
<div
|
|
class="h-8 w-8 rounded-full md:h-12 md:w-12 lg:h-16 lg:w-16"
|
|
:class="[colorBgClass(color, value)]"
|
|
></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="mt-12 border-b pb-2 text-gray-700">
|
|
<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="link mt-8 text-xl">Link Large</div>
|
|
<div class="mt-8 font-bold">Text Bold</div>
|
|
<div class="mt-8">Text</div>
|
|
<div class="link mt-8">Link</div>
|
|
<div class="mt-8 text-sm">Text Small</div>
|
|
<div class="link mt-8 text-sm">Link Small</div>
|
|
|
|
<div class="mt-12 border-b pb-2 text-gray-700">
|
|
<h2 class="heading-1">Components</h2>
|
|
</div>
|
|
|
|
<h2 class="mb-8 mt-8">Buttons</h2>
|
|
|
|
<div class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
|
|
<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="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
|
|
<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="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row lg:justify-start"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn-primary inline-flex items-center rounded-full p-3"
|
|
>
|
|
<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="-mr-1 ml-3 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="mb-8 mt-8">Dropdown (Work-in-progress)</h2>
|
|
|
|
<ItDropdownSelect
|
|
v-model="state.dropdownSelected"
|
|
class="mt-4 w-full lg:mt-0 lg:w-96"
|
|
:items="state.dropdownValues"
|
|
></ItDropdownSelect>
|
|
{{ state.dropdownSelected }}
|
|
|
|
<h2 class="mb-8 mt-8">Checkbox</h2>
|
|
|
|
<ItCheckbox
|
|
:checkbox_item="{
|
|
subtitle: 'Subtitle',
|
|
label: 'Label',
|
|
value: 'value',
|
|
checked: false,
|
|
}"
|
|
@toggle="state.checkboxValue = !state.checkboxValue"
|
|
>
|
|
Label
|
|
</ItCheckbox>
|
|
|
|
<br />
|
|
|
|
<ItCheckbox
|
|
:disabled="true"
|
|
:checkbox_item="{
|
|
subtitle: 'checked disabled',
|
|
label: 'Label',
|
|
value: 'value',
|
|
checked: true,
|
|
}"
|
|
class="mt-6"
|
|
>
|
|
Disabled
|
|
</ItCheckbox>
|
|
|
|
<h2 class="mb-8 mt-8">Checkbox Group</h2>
|
|
|
|
<ItCheckboxGroup
|
|
label="Label"
|
|
:items="[
|
|
{
|
|
value: 'checkbox1',
|
|
label: 'Label 1',
|
|
subtitle: 'Subtitle 1',
|
|
checked: false,
|
|
},
|
|
{
|
|
value: 'checkbox2',
|
|
label: 'Label 2',
|
|
subtitle: 'Subtitle 2',
|
|
checked: false,
|
|
},
|
|
{
|
|
value: 'checkbox3',
|
|
label: 'Label 3',
|
|
checked: false,
|
|
},
|
|
]"
|
|
/>
|
|
|
|
<h2 class="mb-8 mt-8">Dropdown</h2>
|
|
|
|
<div class="h-60">
|
|
<ItDropdown
|
|
:button-classes="['btn-primary']"
|
|
:list-items="dropdownData"
|
|
:align="'left'"
|
|
@select="log"
|
|
>
|
|
Click Me
|
|
</ItDropdown>
|
|
</div>
|
|
<ItTextarea v-model="textValue" label="Hallo Velo" class="mb-8" />
|
|
|
|
<ItRadioGroup
|
|
v-model="satisfaction"
|
|
:label="satisfactionText"
|
|
:items="satisfactionValues"
|
|
/>
|
|
<div>
|
|
<RatingScale
|
|
:ratings="[3, 4, 3, 4]"
|
|
:answers="19"
|
|
title="Frage 3"
|
|
text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
|
|
/>
|
|
<VerticalBarChart
|
|
title="Frage X"
|
|
text="Fragentext"
|
|
:ratings="[true, true, false, true, true, false, true, false]"
|
|
/>
|
|
<HorizontalBarChart title="Frage X" text="Fragentext" :items="barChartItems" />
|
|
</div>
|
|
|
|
<h2 class="mb-8 mt-8">LearningPathCircle</h2>
|
|
|
|
<LearningPathCircle
|
|
class="h-48 w-48"
|
|
:sectors="[
|
|
{
|
|
progress: 'finished',
|
|
},
|
|
{
|
|
progress: 'finished',
|
|
},
|
|
{
|
|
progress: 'in_progress',
|
|
},
|
|
{
|
|
progress: 'none',
|
|
},
|
|
]"
|
|
></LearningPathCircle>
|
|
|
|
<h2 class="mb-8 mt-8">ItToggleSwitch</h2>
|
|
|
|
<ItToggleSwitch></ItToggleSwitch>
|
|
|
|
<h2 class="mb-8 mt-8">ItNavigationProgress</h2>
|
|
|
|
<ItNavigationProgress
|
|
:steps="4"
|
|
:current-step="1"
|
|
start-badge-text="Einleitung"
|
|
end-badge-text="Abgabe"
|
|
/>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped></style>
|