<template>
<div>
<Notifications></Notifications>
<div class="style-guide__wrapper">
<div class="style-guide">
<div class="margin-bottom-3">
<h1><h1>Heading 1</h1></h1>
<h2><h2>Heading 2</h2></h2>
<h3><h3>Heading 3</h3></h3>
</div>
<div class="margin-bottom-3">
<p>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Pellentesque eget ipsum eu risus congue posuere vel at erat.
Phasellus mattis est sit amet dui sodales, a interdum turpis
interdum. Sed eu lobortis libero. Phasellus
<strong>vestibulum</strong>, nunc sed elementum scelerisque, tellus
felis pretium lectus, eget laoreet quam est in massa. Maecenas non
dapibus dolor. Mauris <em>condimentum</em> iaculis dui vel finibus.
Nullam consequat non arcu at vehicula. Maecenas ac consequat ipsum,
sed viverra dui. Donec dignissim suscipit ultrices. Nullam quis
mattis nulla, et venenatis justo. Curabitur scelerisque dictum
<a href="#">velit</a>, eget vestibulum lacus gravida in. Praesent id
lorem volutpat, venenatis quam vel, ultricies leo.
</p>
</div>
<div class="margin-bottom-3">
<div class="control">
<label class="control__label">Small text field</label>
<div class="control__elements">
<input type="text" class="input" />
</div>
</div>
<div class="control">
<label class="control__label">Small with error</label>
<div class="control__elements">
<input type="text" class="input input--error" />
<div class="error">Please do something different</div>
</div>
</div>
<div class="control">
<label class="control__label">Small text field</label>
<div class="control__elements">
<input
type="text"
class="input"
placeholder="Enter something here"
/>
</div>
</div>
<div class="control">
<label class="control__label">Icon text field</label>
<div class="control__elements">
<div class="input__with-icon">
<input
type="text"
class="input"
placeholder="Enter something here"
/>
<i class="fas fa-clock"></i>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Icon text field left</label>
<div class="control__elements">
<div class="input__with-icon input__with-icon--left">
<input
type="text"
class="input"
placeholder="Enter something here"
/>
<i class="fas fa-search"></i>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Large text field</label>
<div class="control__elements">
<input
type="text"
class="input input--large"
placeholder="Enter something here"
/>
</div>
</div>
<div class="control">
<label class="control__label">Large password field</label>
<div class="control__elements">
<input
type="password"
class="input input--large"
placeholder="Please enter your password"
/>
</div>
</div>
<div class="control">
<label class="control__label">Large icon field</label>
<div class="control__elements">
<div class="input__with-icon">
<input
type="password"
class="input input--large"
placeholder="Please enter your password"
/>
<i class="fas fa-calculator"></i>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Large icon field</label>
<div class="control__elements">
<div class="input__with-icon input__with-icon--left">
<input
type="text"
class="input input--large"
placeholder="Enter something here"
/>
<i class="fas fa-search"></i>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Checkbox field</label>
<div class="control__elements">
value: {{ checkbox }}
<br />
<br />
<Checkbox v-model="checkbox"></Checkbox>
<Checkbox v-model="checkbox">With text</Checkbox>
</div>
</div>
<div class="control">
<label class="control__label">Radio field</label>
<div class="control__elements">
value: {{ radio }}
<br />
<br />
<Radio v-model="radio" value=""></Radio>
<Radio v-model="radio" value="a">Option A</Radio>
<Radio v-model="radio" value="b">Option B</Radio>
<Radio v-model="radio" value="c">Option C</Radio>
<Radio v-model="radio" value="d" :disabled="true">Option D</Radio>
<Radio v-model="radio" value="e" :loading="true">Option E</Radio>
</div>
</div>
<div class="control">
<label class="control__label">Switch field</label>
<div class="control__elements">
value: {{ switchValue }}
<br />
<br />
<SwitchInput v-model="switchValue"></SwitchInput>
<SwitchInput v-model="switchValue">With text</SwitchInput>
<SwitchInput v-model="switchUnknown">With text</SwitchInput>
<SwitchInput v-model="switchValue" :large="true"></SwitchInput>
<SwitchInput v-model="switchValue" :large="true">
With text
</SwitchInput>
<SwitchInput v-model="switchUnknown" :large="true">
With text
</SwitchInput>
</div>
</div>
<div class="control">
<label class="control__label">Dropdown</label>
<div class="control__elements">
value: {{ dropdown }}
<br />
<br />
<div style="width: 200px">
<Dropdown v-model="dropdown">
<DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
<DropdownItem
name="Choice 2"
value="choice-2"
icon="edit"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
<DropdownItem
name="Choice 3"
value="choice-3"
icon="database"
></DropdownItem>
<DropdownItem
name="Choice 4"
value="choice-4"
icon="times"
:disabled="true"
></DropdownItem>
<DropdownItem
name="Choice 5"
value="choice-5"
icon="edit"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
<DropdownItem
name="Choice 6"
value="choice-6"
icon="edit"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
</Dropdown>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Dropdown</label>
<div class="control__elements">
value: {{ dropdown }}
<br />
<br />
<div style="width: 200px">
<Dropdown v-model="dropdown" :show-search="false">
<DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
<DropdownItem
name="Choice 2"
value="choice-2"
icon="edit"
></DropdownItem>
<DropdownItem
name="Choice 3"
value="choice-3"
icon="database"
></DropdownItem>
<DropdownItem
name="Choice 4"
value="choice-4"
icon="times"
:disabled="true"
></DropdownItem>
</Dropdown>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Very long dropdown</label>
<div class="control__elements">
<div style="width: 200px">
<Dropdown v-model="longDropdown">
<DropdownItem
:key="'some-2'"
:name="'Something'"
:value="'some-2'"
></DropdownItem>
<DropdownItem
:key="'test-3'"
:name="'Test 3'"
:value="'test3'"
></DropdownItem>
<DropdownItem
v-for="i in [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
]"
:key="i"
:name="'Choice ' + i"
:value="i"
:disabled="i === 7"
></DropdownItem>
<DropdownItem
:key="'test-1'"
:name="'Test 1'"
:value="'test1'"
></DropdownItem>
<DropdownItem
:key="'test-2'"
:name="'Test 2'"
:value="'test2'"
></DropdownItem>
</Dropdown>
</div>
</div>
</div>
<div class="control">
<label class="control__label">
Dropdown by link {{ dropdown }}
</label>
<div class="control__elements">
<div style="width: 200px">
<a
ref="dropdownLink"
@click="$refs.dropdown1.toggle($refs.dropdownLink)"
>Open dropdown</a
>
<Dropdown
ref="dropdown1"
v-model="dropdown"
:show-input="false"
>
<DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
<DropdownItem
name="Choice 2"
value="choice-2"
icon="pencil"
></DropdownItem>
<DropdownItem
name="Choice 3"
value="choice-3"
icon="database"
></DropdownItem>
<DropdownItem
name="Choice 4"
value="choice-4"
icon="times"
:disabled="true"
></DropdownItem>
</Dropdown>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Datepicker field</label>
<div class="control__elements">
value: {{ date }}
<br />
<br />
<client-only>
<date-picker
v-model="date"
:inline="true"
:monday-first="true"
class="datepicker"
></date-picker>
</client-only>
</div>
</div>
</div>
<div class="margin-bottom-3">
<Alert title="Notification message" icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt
vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc,
non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia,
sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc
laoreet ligula a nunc eleifend, nec accumsan felis euismod.
</Alert>
<Alert title="Notification message" type="success" icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message" type="warning" icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message" type="error" icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message" simple icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message" simple>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert
title="Notification message"
type="success"
simple
icon="exclamation"
>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert
title="Notification message"
type="warning"
simple
shadow
icon="exclamation"
>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert
title="Notification message"
type="error"
simple
shadow
icon="exclamation"
>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
</div>
<div class="margin-bottom-3 style-guide__buttons">
<a class="button">a.button</a>
<a class="button disabled">a.button[disabled]</a>
<a class="button button--success">a.button.button-success</a>
<a class="button button--warning">a.button.button-warning</a>
<a class="button button--error">a.button.button-error</a>
<a class="button">
a.button
<i class="button__icon fas fa-lock-open"></i>
</a>
<a class="button">
<i class="button__icon fas fa-arrow-left"></i>
a.button
</a>
<a class="button button--ghost">a.button.button-ghosts</a>
<a class="button">
<i class="fas fa-user-check"></i>
</a>
<a class="button button--ghost">
<i class="fas fa-user-check"></i>
</a>
</div>
<div class="margin-bottom-3 style-guide__buttons">
<button class="button">button.button</button>
<button class="button" disabled>button.button[disabled]</button>
<button class="button button--success">
button.button.button-success
</button>
<button class="button button--warning">
button.button.button-warning
</button>
<button class="button button--error">
button.button.button-error
</button>
<button class="button">
button.button
<i class="button__icon fas fa-lock-open"></i>
</button>
<button class="button">
<i class="button__icon fas fa-arrow-left"></i>
button.button
</button>
<button class="button button--ghost">
button.button.ghost-button
</button>
<button class="button">
<i class="fas fa-user-check"></i>
</button>
<button class="button button--ghost">
<i class="fas fa-user-check"></i>
</button>
</div>
<div class="margin-bottom-3 style-guide__buttons">
<a class="button button--large">a.button.button-large</a>
<a class="button button--large disabled"
>a.button.disabled.button-large</a
>
<a class="button button--large button--success"
>a.button.button-large.button-success</a
>
<a class="button button--large button--warning"
>a.button.button-large.button-warning</a
>
<a class="button button--large button--error"
>a.button.button-large.button-error</a
>
<a class="button button--large">
a.button.button-large
<i class="button__icon fas fa-lock-open"></i>
</a>
<a class="button button--large">
<i class="button__icon fas fa-arrow-left"></i>
a.button.button-large
</a>
<a class="button button--large button--ghost"
>a.button.button-ghosts</a
>
<a class="button button--large">
<i class="fas fa-user-check"></i>
</a>
<a class="button button--large button--ghost">
<i class="fas fa-user-check"></i>
</a>
</div>
<div class="margin-bottom-3">
<a class="button button--large button--loading">Loading</a>
<a class="button button--loading">Loading</a>
<a class="button button--ghost button--loading">Loading</a>
</div>
<div
class="margin-bottom-3"
style="background-color: #ffffff; padding: 20px"
>
<Tabs>
<Tab :selected="true" :title="'Tab 1'">
<p>
Tab 1 content Lorem ipsum dolor sit amet,
<a href="#">consectetur</a> adipiscing elit. Sed quis gravida
ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque
feugiat erat vel porttitor euismod. Duis nec viverra urna.
Praesent.
</p>
</Tab>
<Tab :title="'Tab 2'">
<p>
Tab 2 content Lorem ipsum dolor sit amet,
<a href="#">consectetur</a> adipiscing elit. Sed quis gravida
ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque
feugiat erat vel porttitor euismod. Duis nec viverra urna.
Praesent.
</p>
</Tab>
<Tab :title="'Tab 3'">
<p>
Tab 3 content Lorem ipsum dolor sit amet,
<a href="#">consectetur</a> adipiscing elit. Sed quis gravida
ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque
feugiat erat vel porttitor euismod. Duis nec viverra urna.
Praesent.
</p>
</Tab>
</Tabs>
</div>
<div class="margin-bottom-3">
<div class="tooltip margin-bottom-2">
<div class="tooltip__content">Example tooltip</div>
</div>
<div class="tooltip tooltip--top">
<div class="tooltip__content">Tooltip top</div>
</div>
</div>
<div class="margin-bottom-3 style-guide__contexts">
<div class="context">
<div class="context__menu-title">Vehicles</div>
<ul class="context__menu">
<li>
<a href="#">
<i class="context__menu-icon fas fa-fw fa-pen"></i>
Rename database
</a>
</li>
<li>
<a href="#">
<i class="context__menu-icon fas fa-fw fa-trash"></i>
Delete table
</a>
</li>
<li>
<a href="#" class="context__menu-item--loading">
<i class="context__menu-icon fas fa-fw fa-trash"></i>
Loading
</a>
</li>
</ul>
</div>
<div class="context" style="max-width: 264px">
<div class="context__menu-title">Workspace permissions</div>
<ul class="context__menu context__menu--can-be-active">
<li>
<a href="#" class="active">
Admin
<div class="context__menu-item-description">
Description of what an admin can or can’t do on the
workspace.
</div>
</a>
</li>
<li>
<a href="#" class="context__menu-item--loading">
Builder
<div class="context__menu-item-description">
Description of what a builder can or can’t do on the
workspace.
</div>
</a>
</li>
<li>
<a class="color-error" href="#"> Remove from workspace </a>
</li>
</ul>
</div>
<div class="select">
<div class="select__search">
<i class="select__search-icon fas fa-search"></i>
<input
type="text"
class="select__search-input"
placeholder="Search views"
/>
</div>
<ul v-auto-overflow-scroll class="select__items">
<li class="select__item active">
<a href="#" class="select__item-link">
<div class="select__item-name">Workspace name 1</div>
</a>
<a href="#" class="select__item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select__item">
<a href="#" class="select__item-link">
<div class="select__item-name">Workspace name 2</div>
</a>
<a href="#" class="select__item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select__item select__item--loading">
<a href="#" class="select__item-link">
<div class="select__item-name">Workspace name 3</div>
</a>
<a href="#" class="select__item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select__item">
<a href="#" class="select__item-link">
<div class="select__item-name">roup name 4</div>
</a>
<a href="#" class="select__item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
</ul>
<div class="select__footer">
<a href="#" class="select__footer-button">
<i class="fas fa-plus"></i>
Do something
</a>
</div>
</div>
</div>
<div class="margin-bottom-3 style-guide__contexts">
<div class="select">
<div class="select__search">
<i class="select__search-icon fas fa-search"></i>
<input
type="text"
class="select__search-input"
placeholder="Search views"
/>
</div>
<ul v-auto-overflow-scroll class="select__items">
<li class="select__item">
<a href="#" class="select__item-link">
<div class="select__item-name">
<i
class="select__item-icon fas fa-th fa-fw color-primary"
></i>
Grid view name
</div>
</a>
<a
href="#"
class="select__item-options"
data-context=".context"
>
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select__item">
<a href="#" class="select__item-link">
<div class="select__item-name">
<i
class="select__item-icon fas fa-th fa-fw color-primary"
></i>
Grid view option 2.
</div>
</a>
<a href="#" class="select__item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select__item">
<a href="#" class="select__item-link">
<div class="select__item-name">
<i
class="select__item-icon fas fa-th fa-fw color-primary"
></i>
Grid view 2
</div>
</a>
<a href="#" class="select__item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select__item">
<a href="#" class="select__item-link">
<div class="select__item-name">
<i
class="select__item-icon fas fa-th fa-fw color-primary"
></i>
Grid view 3
</div>
</a>
<a href="#" class="select__item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
</ul>
<div class="select__footer">
<div class="select__footer-create">
<a class="select__footer-create-link"
><i class="select__footer-create-icon fas fa-bars"></i>
Grid </a
><a class="select__footer-create-link"
><i class="select__footer-create-icon fas fa-th-large"></i>
Gallery </a
><a class="select__footer-create-link"
><i class="select__footer-create-icon fas fa-edit"></i>
Form </a
><a class="select__footer-create-link"
><i class="select__footer-create-icon fas fa-trello fab"></i>
Kanban
</a>
</div>
</div>
</div>
<div class="context datepicker-context">
<client-only>
<date-picker
v-model="date"
:inline="true"
:monday-first="true"
class="datepicker"
></date-picker>
</client-only>
</div>
<div class="time-select">
<ul>
<li>
<a href="#">00:00</a>
</li>
<li>
<a href="#">00:30</a>
</li>
<li>
<a href="#" class="active">01:00</a>
</li>
<li>
<a href="#">01:30</a>
</li>
<li>
<a href="#">02:00</a>
</li>
<li>
<a href="#">02:30</a>
</li>
<li>
<a href="#">03:00</a>
</li>
<li>
<a href="#">03:30</a>
</li>
</ul>
</div>
</div>
<div class="formula-field margin-bottom-3">
<div class="formula-field__input">
<AutoExpandableTextarea
v-model="formula"
class="formula-field__input-formula"
></AutoExpandableTextarea>
</div>
<div class="formula-field__body">
<div class="formula-field__items">
<ul class="formula-field__item-group">
<li class="formula-field__item-group-title">Fields</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-font formula-field__item-icon" />
Text
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
Number
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-check-square formula-field__item-icon" />
Checkbox
</a>
</li>
</ul>
<ul class="formula-field__item-group">
<li class="formula-field__item-group-title">Constants</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
e
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
pi
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-check-square formula-field__item-icon" />
true
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-check-square formula-field__item-icon" />
false
</a>
</li>
</ul>
<ul class="formula-field__item-group">
<li class="formula-field__item-group-title">Operators</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-font formula-field__item-icon" />
If
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
add
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
subtract
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
multiply
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
divide
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
pow
</a>
</li>
</ul>
<ul class="formula-field__item-group">
<li class="formula-field__item-group-title">Functions</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-font formula-field__item-icon" />
concat
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-font formula-field__item-icon" />
join
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-font formula-field__item-icon" />
slice
</a>
</li>
<li class="formula-field__item">
<a href="#" class="formula-field__item-link">
<i class="fas fa-hashtag formula-field__item-icon" />
length
</a>
</li>
</ul>
</div>
<div class="formula-field__description">
<div class="formula-field__description-heading-1">concat</div>
<div class="formula-field__description-text">
Concatenates its arguments and returns the result.
</div>
<div class="formula-field__description-heading-2">Syntax</div>
<pre
class="formula-field__description-example"
><code>concat(text...)</code></pre>
<div class="formula-field__description-heading-2">Examples</div>
<pre
class="formula-field__description-example"
><code>concat(“Hello”, “World”) == “HelloWorld”
“Hello” + “World” == “HelloWorld”</code></pre>
</div>
</div>
</div>
<div class="margin-bottom-3">
<a class="button" @click="$refs.context1.toggle($event.target)">
toggle context
<i class="fas fa-pencil"></i>
</a>
<Context ref="context1">
<div class="context__menu-title">Vehicles</div>
<ul class="context__menu">
<li>
<a href="#">
<i class="context__menu-icon fas fa-fw fa-pen"></i>
This does nothing
</a>
</li>
<li>
<a @click="$refs.context2.toggle($event.target)">
Open another context
</a>
<Context ref="context2">
<div class="context__menu-title">Open modal</div>
<ul class="context__menu">
<li>
<a @click="$refs.modal1.show()">
<i class="context__menu-icon fas fa-fw fa-pen"></i>
Click to open modal
</a>
</li>
<Modal ref="modal1">
<h2 class="box__title">Modal inside a context</h2>
<a
class="button"
@click="$refs.context3.toggle($event.target)"
>
toggle context
<i class="fas fa-pencil"></i>
</a>
<Context ref="context3">
<div class="context__menu-title">Vehicles</div>
<ul class="context__menu">
<li>
<a href="#">
<i
class="context__menu-icon fas fa-fw fa-pen"
></i>
This does nothing
</a>
</li>
<li>
<a @click="$refs.context4.toggle($event.target)">
Open another context
</a>
<Context ref="context4">
<div class="context__menu-title">End!</div>
</Context>
</li>
<li>
<a href="#">
<i
class="context__menu-icon fas fa-fw fa-trash"
></i>
This does nothing
</a>
</li>
</ul>
</Context>
</Modal>
</ul>
</Context>
</li>
<li>
<a href="#">
<i class="context__menu-icon fas fa-fw fa-trash"></i>
This does nothing
</a>
</li>
</ul>
</Context>
<a class="button" @click="$refs.modal2.show()">show modal</a>
<Modal ref="modal2">
<h2 class="box__title">An example modal</h2>
<p>
Mauris dignissim massa ac justo consequat porttitor. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Mauris vel tellus
suscipit, gravida libero a, egestas urna. Quisque tellus nisi,
consequat et interdum non, posuere sed lacus. Morbi fermentum
lorem sed vestibulum tristique. Vivamus scelerisque molestie
ligula vel elementum. Etiam metus lacus, commodo sit amet
tristique luctus, pulvinar eget justo. Fusce sed vehicula dolor.
Aliquam sollicitudin fringilla augue, posuere maximus orci
sollicitudin a. Vestibulum egestas tristique nunc, tristique
dignissim mauris dictum imperdiet. Mauris ultrices ac eros at
fringilla. Praesent ut tincidunt dui.
</p>
</Modal>
<a
class="button button--success"
@click="
$store.dispatch('notification/success', {
title: 'Custom success notification',
message: 'Mauris dignissim massa ac justo consequat porttitor.',
})
"
>toggle success notification</a
>
<a
class="button button--error"
@click="
$store.dispatch('notification/error', {
title: 'Custom error notification',
message: 'Mauris dignissim massa ac justo consequat porttitor.',
})
"
>toggle error notification</a
>
<a
class="button button--warning"
@click="
$store.dispatch('notification/warning', {
title: 'Custom warning notification',
message: 'Mauris dignissim massa ac justo consequat porttitor.',
})
"
>toggle warning notification</a
>
<a
class="button"
@click="
$store.dispatch('notification/info', {
title: 'Custom info notification',
message: 'Mauris dignissim massa ac justo consequat porttitor.',
})
"
>toggle info notification</a
>
</div>
<div class="margin-bottom-3">
<div class="modal__box">
<a class="modal__close">
<i class="fas fa-times"></i>
</a>
<h2 class="box__title">An example modal</h2>
<p>
Mauris dignissim massa ac justo consequat porttitor. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Mauris vel tellus
suscipit, gravida libero a, egestas urna. Quisque tellus nisi,
consequat et interdum non, posuere sed lacus. Morbi fermentum
lorem sed vestibulum tristique. Vivamus scelerisque molestie
ligula vel elementum. Etiam metus lacus, commodo sit amet
tristique luctus, pulvinar eget justo. Fusce sed vehicula dolor.
Aliquam sollicitudin fringilla augue, posuere maximus orci
sollicitudin a. Vestibulum egestas tristique nunc, tristique
dignissim mauris dictum imperdiet. Mauris ultrices ac eros at
fringilla. Praesent ut tincidunt dui.
</p>
<div class="delete-section">
<div class="delete-section__label">
<div class="delete-section__label-icon">
<i class="fas fa-exclamation"></i>
</div>
Will also be permanently deleted
</div>
<p class="delete-section__description">
Mauris dignissim massa ac justo consequat porttitor. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Mauris vel tellus
suscipit, gravida libero a, egestas urna. Quisque tellus nisi,
consequat et interdum non, posuere sed lacus.
</p>
<ul class="delete-section__list">
<li>
<i class="delete-section__list-icon fas fa-database"></i>
Vehicles
<small>including 12 tables</small>
</li>
<li>
<i class="delete-section__list-icon fas fa-database"></i>
Webshop
<small>including 12 tables</small>
</li>
</ul>
</div>
<div class="actions actions--right">
<button class="button button--large button--overflow">
Validate
</button>
</div>
</div>
<div class="modal__box modal__box--with-sidebar">
<a class="modal__close">
<i class="fas fa-times"></i>
</a>
<div
class="modal__box-sidebar modal__box-sidebar--left modal__box-sidebar--scrollable"
>
<div class="modal-sidebar__head">
<div class="modal-sidebar__head-initials-icon">B</div>
<div class="modal-sidebar__head-name">Settings</div>
</div>
<ul class="modal-sidebar__nav">
<li>
<a class="modal-sidebar__nav-link active"
><i class="fas modal-sidebar__nav-icon fa-user"></i>
Account
</a>
</li>
<li>
<a class="modal-sidebar__nav-link"
><i class="fas modal-sidebar__nav-icon fa-lock"></i>
Password
</a>
</li>
<li>
<a class="modal-sidebar__nav-link"
><i class="fas modal-sidebar__nav-icon fa-key"></i>
API Tokens
</a>
</li>
<li>
<a class="modal-sidebar__nav-link"
><i class="fas modal-sidebar__nav-icon fa-user-slash"></i>
Delete account
</a>
</li>
</ul>
</div>
<div class="modal__box-content">
<h2 class="box__title">An example modal</h2>
<p>
Mauris dignissim massa ac justo consequat porttitor. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Mauris vel tellus
suscipit, gravida libero a, egestas urna. Quisque tellus nisi,
consequat et interdum non, posuere sed lacus. Morbi fermentum
lorem sed vestibulum tristique. Vivamus scelerisque molestie
ligula vel elementum. Etiam metus lacus, commodo sit amet
tristique luctus, pulvinar eget justo. Fusce sed vehicula dolor.
Aliquam sollicitudin fringilla augue, posuere maximus orci
sollicitudin a. Vestibulum egestas tristique nunc, tristique
dignissim mauris dictum imperdiet. Mauris ultrices ac eros at
fringilla. Praesent ut tincidunt dui.
</p>
</div>
</div>
</div>
<div class="margin-bottom-3">
<div class="card" style="width: 320px">
<div class="card__cover">
<div
v-if="false"
class="card__cover-image"
:style="{
'background-image':
'url(https://www.w3schools.com/cssref/mountain.jpg)',
}"
></div>
</div>
<div class="card__fields">
<div class="card__field">
<div class="card__field-name">Text</div>
<div class="card__field-value">
<div class="card-text">This is a single line text field</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Long text</div>
<div class="card__field-value">
<div class="card-text">
This is a long text field with a very long content that
doesn't fit.
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Link row</div>
<div class="card__field-value">
<div class="card-many-to-many__list-wrapper">
<div class="card-many-to-many__list">
<div class="card-many-to-many__item card-link-row">
<span class="card-many-to-many__name">
Value 1 with a very long name that doesn't
</span>
</div>
<div
class="card-many-to-many__item card-link-row card-link-row--unnamed"
>
<span class="card-many-to-many__name">
unnamed row 1
</span>
</div>
<div class="card-many-to-many__item card-link-row">
<span class="card-many-to-many__name">
Another value
</span>
</div>
</div>
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Number</div>
<div class="card__field-value">
<div class="card-text">205</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Decimal</div>
<div class="card__field-value">
<div class="card-text">205.55</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Boolean</div>
<div class="card__field-value">
<div class="card-boolean">
<i class="fas fa-check"></i>
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Date</div>
<div class="card__field-value">
<div class="card-text">2021-01-01</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Datetime</div>
<div class="card__field-value">
<div class="card-text">2021-01-01</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">URL</div>
<div class="card__field-value">
<div class="card-text">
<a href="#">http://baserow.io</a>
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Email</div>
<div class="card__field-value">
<div class="card-text">
<a href="#">bram@baserow.io</a>
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">File</div>
<div class="card__field-value">
<div class="card-file__list-wrapper">
<ul class="card-file__list">
<li class="card-file__item">
<img
src="http://localhost:4000/media/thumbnails/tiny/NcTfu10MwH9xtUkzL5jcmqIDXE0vkHin_1e01581444c66c952aa585f6fc79a671885b75053d275329f20e7b5faa73d7ec.png"
class="card-file__image"
/>
</li>
<li class="card-file__item">
<img
src="http://localhost:4000/media/thumbnails/tiny/E413HC1eHsw9gakeRrpUOodHprEBT1pv_01bb5d9bbbd9addb39d1352877ca061573f2ca8ba64631ae5d4b7f8e16f6b18b.png"
class="card-file__image"
/>
</li>
<li class="card-file__item">
<i class="fas card-file__icon fa-file"></i>
</li>
</ul>
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Single select</div>
<div class="card__field-value">
<div
class="card-single-select-option background-color--orange"
>
Option 1 with a very long name that doesn't fit
unfortunately.
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Single select</div>
<div class="card__field-value">
<div class="card-single-select-option background-color--gray">
Option 2
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Multiple select</div>
<div class="card__field-value">
<div class="card-many-to-many__list-wrapper">
<div class="card-many-to-many__list">
<div
class="card-many-to-many__item card-multiple-select-option background-color--green"
>
<span class="card-many-to-many__name">
Option value 1
</span>
</div>
<div
class="card-many-to-many__item card-multiple-select-option background-color--blue"
>
<span class="card-many-to-many__name">
Option 2 with a very long name that doesn't fit
</span>
</div>
<div
class="card-many-to-many__item card-multiple-select-option background-color--blue"
>
<span class="card-many-to-many__name"> Option 3 </span>
</div>
</div>
</div>
</div>
</div>
<div class="card__field">
<div class="card__field-name">Phone</div>
<div class="card__field-value">
<div class="card-text">
<a href="#">+316 12345678</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="margin-bottom-3"
style="background-color: #ffffff; position: relative; height: 1000px"
>
<div class="data-table">
<div class="data-table__header">
<h1 class="data-table__title">12 Members in ACME Corp</h1>
<div class="data-table__actions">
<div class="input__with-icon input__with-icon--left">
<input
type="text"
placeholder="Find member..."
class="input input--large"
/>
<i class="fas fa-search"></i>
</div>
<a href="#" class="button button--large margin-left-2"
>Invite member</a
>
</div>
</div>
<div class="data-table__body">
<table class="data-table__table">
<thead>
<tr class="data-table__table-row">
<th
class="data-table__table-cell data-table__table-cell--sticky-left data-table__table-cell--header"
>
<div class="data-table__table-cell-head">
<Checkbox
v-model="checkbox"
class="checkbox--small"
></Checkbox>
</div>
</th>
<th
class="data-table__table-cell data-table__table-cell--header"
>
<div class="data-table__table-cell-head">
<a href="#" class="data-table__table-cell-head-link"
>Name</a
>
<div>
<i class="fas fa-sort-down"></i>
0
</div>
</div>
</th>
<th
class="data-table__table-cell data-table__table-cell--header"
>
<div class="data-table__table-cell-head">Email</div>
</th>
<th
class="data-table__table-cell data-table__table-cell--header"
>
<div class="data-table__table-cell-head">
Workspace permissions
<div>
<i class="fas fa-sort-up"></i>
1
</div>
</div>
</th>
<th
class="data-table__table-cell data-table__table-cell--header"
>
<div class="data-table__table-cell-head">Team</div>
</th>
<th
class="data-table__table-cell data-table__table-cell--header data-table__table-cell--sticky-right"
>
<div class="data-table__table-cell-head"></div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(i, i2) in new Array(10)"
:key="i2"
class="data-table__table-row"
:class="{
'data-table__table-row--selected': i2 === 2,
'data-table__table-row--hover': i2 === 4,
}"
>
<td
class="data-table__table-cell data-table__table-cell--sticky-left"
>
<div class="data-table__table-cell-content">
<Checkbox
v-model="checkbox"
class="checkbox--small"
></Checkbox>
</div>
</td>
<td class="data-table__table-cell">
<div class="data-table__table-cell-content">
This is a very long name that doesn't completely fit.
</div>
</td>
<td class="data-table__table-cell">
<div class="data-table__table-cell-content">
This is a very long name that doesn't completely fit.
</div>
</td>
<td class="data-table__table-cell">
<div class="data-table__table-cell-content">
This is a very long name that doesn't completely fit.
</div>
</td>
<td class="data-table__table-cell">
<div class="data-table__table-cell-content">
This is a very long name that doesn't completely fit.
</div>
</td>
<td
class="data-table__table-cell data-table__table-cell--sticky-right"
>
<div class="data-table__table-cell-content">
<div class="data-table__more-wrapper">
<a href="#" class="data-table__more">
<i class="fas fa-ellipsis-h"></i>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="data-table__footer">
<div class="paginator">
<div class="paginator__name">page</div>
<div class="paginator__group">
<a class="paginator__button paginator__button--disabled"
><i class="fas fa-caret-left"></i
></a>
<input
type="number"
class="input paginator__page-input"
value="1"
/>
<div class="paginator__count">of 233</div>
<a class="paginator__button"
><i class="fas fa-caret-right"></i
></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Notifications from '@baserow/modules/core/components/notifications/Notifications'
import AutoExpandableTextarea from '@baserow/modules/core/components/helpers/AutoExpandableTextarea'
export default {
components: {
Notifications,
AutoExpandableTextarea,
},
data() {
return {
checkbox: false,
radio: 'a',
switchValue: false,
switchUnknown: 2,
dropdown: '',
longDropdown: '0',
date: '',
formula: 'concat(field("Text"), field("Text"))',
}
},
head() {
return {
title: 'Style guide',
}
},
}
</script>