mirror of https://github.com/directus/directus.git synced 2026-01-31 04:27:58 -05:00

Files

Rijk van Zanten feaafe6440 109 tiny tweaks (#574 )

* no cursor when disabled

* consistent disabled styling

* divider icon alignment

* don’t show last item’s border

* notifications spacing

* status placeholder

* default status icon placeholder

* fix textarea focus style

* tags styling

* proper tags padding when empty

* proper input number step hovers

* show background color

* Fix data-model collections overview name class

* Don't use display template for batch mode

* Fix headline being hidden

* Use formatted name fo bookmarks breadcrumb

* Move drawer open to app store

* Fix tests

* slider value style

* Add comments to users/files

* Make comments selectable

* Move window width drawer state to app parent

* Fix private user condition

* Allow relationships to system collections

* Refresh revisions drawer detail on save and stay

* Add disabled support to m2o / user

* Center v-infos

* Hide default drag image

* Ellipsis all the things

* Use icon interface for fallback icon

* Render icons grid based on available space

* Fix ellipsis on cardsl

* fix batch edit checkbox styling

* Let render template ellipsis its raw values

* Fix render template

* Default cropping to current aspect ratio

* missing translation

* secondary button style

so sorry, rijk… it’s the only one (promise)

* Add image dimensions, add drag mode

* track the apology

* no elipses on titles

* Add cancel crop button

* Only show new dimensions on crop

* Inform file preview if it's in modal

* preview styling

* Install pretty-bytes

* Show file info in drawer sidebar

* Use outline icons in drawer sidebar

* don’t confuse null with subdued text value

* edge-case justification

* Show character count remaining

* Fix storybook + typing error

* Add length constraints to color

* Watch value prop

* Fix tags

* Open icon on icon click

* Fix overflow of title

* Show batch editing x items

* Fix edits emptying input on cancel

* Don't count locked filters in no results message

* simple batch edit title

* Fix headline being invisible

* Add no-options notice to interfaces/displays

* Use existing collection preset in browse modal

* Don't emit null on invalid hex

* Use correct titles in modal-detail

* style char remaining

* file info sidebar styling

* Another attempt at trying to make render template behave in any contetx

* Show remaining char count on focus only

* Remove fade, prevent jumping

* Render skeleton loader in correct height

* Fix o2m not fetching items

* Pass collection/field to render display in o2m

* Add no-items message in table

* Add default state to v-table

* Allow ISO8601 in datetime interface

* Title format selected icon name

* avoid blinking bg on load

* align characters remaining

* Default to tabular in browse modal

* Add disabled string

* Add center + make gray default notice

* Add disabled-no-value state

* Export getItems

* Expose refresh method on layouts

* Fix (batch) deletion from browse)

* Fix interface disabled on batch

* Add interface not found notice

* Add default label (active) for toggle interface

* Use options / prop default for toggle

* Support ISO 8601 in datetime display

* Render edit form in form width

* Fix deselecting newly selected item

* Undo all selection when closing browse modal

* Fix deselecting newly selected item

* wider divider

* update webhooks table

* Fix checkbox label disappearing

* Fix tests.. by removing them

Co-authored-by: Ben Haynes <ben@rngr.org>

2020-05-15 18:44:21 -04:00

index.ts

Migrate existing (finished) base components

2020-02-05 15:11:40 -05:00

readme.md

Interface image (#510 )

2020-04-30 17:01:14 -04:00

v-button.story.ts

Rework save options to be re-usable across modules (#346 )

2020-04-07 11:33:55 -04:00

v-button.test.ts

Use items (#354 )

2020-04-07 15:40:49 -04:00

v-button.vue

109 tiny tweaks (#574 )

2020-05-15 18:44:21 -04:00

readme.md

Button

<v-button>Click me!</v-button>

Sizes

The button component supports the following sizes through the use of props:

x-small
small
(default)
large
x-large

Colors

You can set the color, background color, hover color, and background hover color with the --v-button-color, --v-button-background-color, --v-button-color-hover, and --v-button-background-color-hover css variables respectively:

<v-button>Click me</v-button>

<style>
.v-button {
	--v-button-color: var(--red);
	--v-button-background-color: var(--red-50);
	--v-button-color-hover: var(--white);
	--v-button-background-color-hover: var(--red);
}
</style>

Loading

The button has a loading state that can be enabled with the loading prop. By default, the button will render a v-spinner. You can override what's being shown during the loading state by using the #loading slot:

<v-button>
	<template #loading>
		... Almost done ...
	</template>
</v-button>

The loading slot is rendered on top of the content that was there before. Make sure that your loading content doesn't exceed the size of the default state content. This restriction is put in place to prevent jumps when going from and to the loading state.

Props

Prop	Description	Default
`block`	Enable full width (display block)	`false`
`icon`	Remove padding / min-width. Meant to be used with just an icon as content	`false`
`outlined`	No background	`false`
`rounded`	Enable rounded corners	`false`
`type`	HTML `type` attribute	`'button'`
`disabled`	Disabled state	`false`
`loading`	Loading state	`false`
`x-small`	Render extra small	`false`
`small`	Render small	`false`
`large`	Render large	`false`
`x-large`	Render extra large	`false`
`to`	Render as vue router-link	`null`
`href`	Render as anchor	`null`
`align`	Align content in button. One of `left	center
`dashed`	Render the border dashed. Meant to be used with `outlined`.	`false`
`tile`	Render without border radius	`false`
`download`	Add the `download` attribute (used in combo with `href`)	`null`

Slots

Slot	Description
default	Button content
`loading`	Content that's rendered during loading state
`prepend-outer`	Content that's rendered before the button
`append-outer`	Content that's rendered after the button

Events

Event	Description	Value
`click`	User clicks on button	`MouseEvent`

CSS Variables

Variable	Default
`--v-button-width`	`auto`
`--v-button-height`	`44px`
`--v-button-color`	`var(--foreground-inverted)`
`--v-button-color-hover`	`var(--foreground-inverted)`
`--v-button-color-activated`	`var(--foreground-inverted)`
`--v-button-color-disabled`	`var(--primary)`
`--v-button-background-color`	`var(--primary)`
`--v-button-background-color-hover`	`var(--primary)`
`--v-button-background-color-activated`	`var(--primary)`
`--v-button-background-color-disabled`	`var(--primary-alt)`
`--v-button-font-size`	`16px`