mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-23 12:50:16 +00:00
1562 lines
61 KiB
Vue
1562 lines
61 KiB
Vue
<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">Group 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">Group 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">Group 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>
|