refactor(ui): composable widths; default colors and widths; consistent props;
This commit is contained in:
upsiflu
parent
c65b4bd4f0
commit
4069d2ba71
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { type PastelProps, propsToColor } from '~/composables/colors'
|
||||
import { type PastelProps, color } from '~/composables/colors'
|
||||
|
||||
type Props = PastelProps
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ const props = defineProps<Props>()
|
|||
<template>
|
||||
<div
|
||||
class="funkwhale is-colored solid alert"
|
||||
v-bind="propsToColor(props)"
|
||||
v-bind="color(props)"
|
||||
>
|
||||
<slot />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, useSlots, onMounted } from 'vue'
|
||||
import { type ColorProps, type VariantProps, type DefaultProps, type RaisedProps, propsToColor } from '~/composables/colors';
|
||||
|
||||
import { type ColorProps, type VariantProps, type DefaultProps, type RaisedProps, color } from '~/composables/colors';
|
||||
import { type WidthProps, width } from '~/composables/widths'
|
||||
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
width?: 'standard' | 'auto' | 'full'
|
||||
alignText?: 'left' | 'center' | 'right'
|
||||
alignSelf?: 'start' | 'center' | 'end'
|
||||
alignSelf?: 'start' | 'center' | 'end' | 'baseline'
|
||||
thin?: true
|
||||
|
||||
isActive?: boolean
|
||||
|
|
@ -21,7 +22,14 @@ const props = defineProps<{
|
|||
|
||||
autofocus? : boolean
|
||||
ariaPressed? : true
|
||||
} & (ColorProps | DefaultProps) & VariantProps & RaisedProps>()
|
||||
} & (ColorProps | DefaultProps)
|
||||
& VariantProps
|
||||
& RaisedProps
|
||||
& WidthProps>()
|
||||
|
||||
if ('minContent' in props) {
|
||||
console.log("MIN CONTENT")
|
||||
}
|
||||
|
||||
const slots = useSlots()
|
||||
const isIconOnly = computed(() => !!props.icon && !slots.default)
|
||||
|
|
@ -33,6 +41,11 @@ const fontWeight = props.thin ? 400 : 900
|
|||
|
||||
const button = ref()
|
||||
|
||||
const attributes = computed(() => ({
|
||||
...color(props, ['interactive']),
|
||||
...width(props, [isIconOnly.value ? 'minContent' : 'buttonWidth'])
|
||||
}))
|
||||
|
||||
const click = async (...args: any[]) => {
|
||||
internalLoader.value = true
|
||||
|
||||
|
|
@ -50,10 +63,9 @@ onMounted(() => {
|
|||
<template>
|
||||
<button ref="button"
|
||||
:aria-pressed="props.ariaPressed"
|
||||
v-bind="propsToColor({...props, interactive:true})"
|
||||
v-bind="attributes"
|
||||
class="funkwhale button"
|
||||
:class="[
|
||||
'is-' + width,
|
||||
'is-text-aligned-' + (alignText ?? 'center'),
|
||||
'is-self-aligned-' + (alignSelf ?? 'center'),
|
||||
{
|
||||
|
|
@ -79,6 +91,8 @@ onMounted(() => {
|
|||
<style lang="scss">
|
||||
.funkwhale {
|
||||
&.button {
|
||||
--padding: 10px;
|
||||
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -86,11 +100,11 @@ onMounted(() => {
|
|||
|
||||
font-family: $font-main;
|
||||
font-weight: v-bind(fontWeight);
|
||||
font-size: 0.875em;
|
||||
font-size: 14px;
|
||||
|
||||
line-height: 1em;
|
||||
|
||||
padding: 9px 10px 11px 10px;
|
||||
padding: 9px var(--padding) 11px var(--padding);
|
||||
&.is-icon-only {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -117,10 +131,6 @@ onMounted(() => {
|
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:not(.is-icon-only):not(.is-auto), &.is-standard {
|
||||
min-width: 8.5rem;
|
||||
}
|
||||
|
||||
align-self: start;
|
||||
|
||||
&.is-self-aligned-start {
|
||||
|
|
@ -135,6 +145,10 @@ onMounted(() => {
|
|||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&.is-self-aligned-baseline {
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
&.is-full {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
|
@ -157,16 +171,16 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
i.bi {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.2rem;/* Must not increase the height of the button */
|
||||
margin: -0.1rem;
|
||||
&.large {
|
||||
font-size:2rem;
|
||||
margin: -0.1rem;
|
||||
}
|
||||
/* Must not increase the height of the button */
|
||||
margin: -0.5rem 0;
|
||||
}
|
||||
|
||||
i.bi + span:not(:empty) {
|
||||
margin-left: 1ch;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
import { computed } from 'vue'
|
||||
|
||||
import { type RouterLinkProps, RouterLink } from 'vue-router';
|
||||
import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, propsToColor } from '~/composables/colors'
|
||||
import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, color } from '~/composables/colors'
|
||||
import { type WidthProps, width } from '~/composables/widths'
|
||||
|
||||
import Pill from './Pill.vue'
|
||||
import Alert from './Alert.vue'
|
||||
|
|
@ -16,36 +17,29 @@ const props = defineProps<{
|
|||
tags?: string[]
|
||||
image?: string | { src: string, style?: "withPadding" }
|
||||
icon?: string
|
||||
} & (
|
||||
{ [Width in 'large' | 'medium' | 'small' | 'auto']?: true } | { width?: string }
|
||||
) & Partial<RouterLinkProps> & (PastelProps | ColorProps | DefaultProps) & RaisedProps & VariantProps>()
|
||||
} & Partial<RouterLinkProps>
|
||||
& (PastelProps | ColorProps | DefaultProps)
|
||||
& RaisedProps
|
||||
& VariantProps
|
||||
& WidthProps
|
||||
>()
|
||||
|
||||
const image = typeof props.image === 'string' ? { src: props.image } : props.image
|
||||
|
||||
const width =
|
||||
'width' in props && props.width
|
||||
? props.width
|
||||
: 'auto' in props && props.auto
|
||||
? 'auto'
|
||||
: 'large' in props && props.large ?
|
||||
'304px'
|
||||
: 'medium' in props && props.medium ?
|
||||
'208px'
|
||||
: 'small' in props && props.small ?
|
||||
'min-content'
|
||||
: '304px'
|
||||
|
||||
console.log("WIDTH", width, props)
|
||||
|
||||
const isExternalLink = computed(() => {
|
||||
return typeof props.to === 'string' && props.to.startsWith('http')
|
||||
})
|
||||
|
||||
const attributes = computed(() => ({
|
||||
...color(props, props.to ? ['interactive', 'solid'] : []),
|
||||
...width(props, ['medium'])
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout stack no-gap
|
||||
:class="{ [$style.card]: true, [$style['is-category']]: category }"
|
||||
v-bind="propsToColor({...(props.to? { interactive: true, solid: true, default: true } : {}), ...props})"
|
||||
v-bind="attributes"
|
||||
>
|
||||
|
||||
<!-- Link -->
|
||||
|
|
@ -68,7 +62,11 @@ const isExternalLink = computed(() => {
|
|||
|
||||
<!-- Title -->
|
||||
|
||||
<component :class="$style.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component>
|
||||
<component :is="typeof category === 'string' ? category : 'h6'"
|
||||
:class="$style.title"
|
||||
>
|
||||
{{ title }}
|
||||
</component>
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
|
|
@ -86,9 +84,10 @@ const isExternalLink = computed(() => {
|
|||
<slot />
|
||||
</Layout>
|
||||
|
||||
<Spacer grow :size="0" />
|
||||
<Spacer grow :size=0 />
|
||||
|
||||
<!-- Footer and Action -->
|
||||
|
||||
<div v-if="$slots.footer" :class="$style.footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
|
|
@ -104,7 +103,6 @@ const isExternalLink = computed(() => {
|
|||
|
||||
<style module>
|
||||
.card {
|
||||
--fw-card-width: v-bind(width);
|
||||
--fw-card-padding: v-bind("props.small ? '16px' : '24px'");
|
||||
|
||||
position: relative;
|
||||
|
|
@ -116,8 +114,6 @@ const isExternalLink = computed(() => {
|
|||
border-radius: var(--fw-border-radius);
|
||||
font-size: 1rem;
|
||||
|
||||
width: var(--fw-card-width);
|
||||
|
||||
>.covering {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
|
@ -125,7 +121,6 @@ const isExternalLink = computed(() => {
|
|||
&~:is(.title, .content) {
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
&:hover~:is(.content) {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
|
@ -151,10 +146,12 @@ const isExternalLink = computed(() => {
|
|||
|
||||
>.icon {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 22px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
&:has(>.image)>.icon {
|
||||
top: var(--fw-card-padding);
|
||||
|
|
@ -175,7 +172,7 @@ const isExternalLink = computed(() => {
|
|||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
&:has(>.icon)>.title {
|
||||
&:has(>.icon):not(:has(.image))>.title {
|
||||
padding-right:calc(var(--fw-card-padding) + 22px);
|
||||
}
|
||||
&.is-category>.title {
|
||||
|
|
@ -189,6 +186,7 @@ const isExternalLink = computed(() => {
|
|||
>.alert {
|
||||
padding-left: var(--fw-card-padding);
|
||||
padding-right: var(--fw-card-padding);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
>.tags {
|
||||
|
|
@ -229,12 +227,9 @@ const isExternalLink = computed(() => {
|
|||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border: 8px solid transparent;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ const props = defineProps<{
|
|||
noWrap?:true
|
||||
}
|
||||
& { [P in "stack" | "grid" | "flex" | "columns"]?: true | string }
|
||||
& { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
|
||||
const columnWidth = props.columnWidth ?? 320
|
||||
& { [C in "nav" | "aside" | "header" | "footer" | "main" | "h1" | "h2" | "h3" | "h4" | "h5"]?:true }>()
|
||||
const columnWidth = props.columnWidth ?? 46
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : 'div'"
|
||||
:is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : props.h1? 'h1' : props.h2? 'h2' : props.h3? 'h3' : props.h4? 'h4' : props.h5? 'h5' : 'div'"
|
||||
:class="[
|
||||
$style.layout,
|
||||
noGap || $style.gap,
|
||||
|
|
@ -59,7 +59,7 @@ const columnWidth = props.columnWidth ?? 320
|
|||
&.grid {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
repeat(auto-fit, minmax(min-content, calc(v-bind(columnWidth) * 1px)));
|
||||
repeat(auto-fit, calc(v-bind(columnWidth) * 1px));
|
||||
grid-auto-flow: row dense;
|
||||
place-content: center; /* If the grid has a fixed size smaller than its container, center it */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,42 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { type RouterLinkProps, RouterLink } from 'vue-router'
|
||||
import { type ColorProps, type DefaultProps, type VariantProps, propsToColor } from '~/composables/colors';
|
||||
import { type ColorProps, type DefaultProps, type VariantProps, color, isNoColors } from '~/composables/colors';
|
||||
import { type WidthProps, width } from '~/composables/widths'
|
||||
|
||||
const { to, icon, thickWhenActive, round, ...colorProps } = defineProps<{
|
||||
width?: 'standard' | 'auto' | 'full'
|
||||
alignText?: 'left' | 'center' | 'right' | 'stretch'
|
||||
alignSelf?: 'start' | 'center' | 'end'
|
||||
thickWhenActive?: true
|
||||
const props = defineProps<{
|
||||
alignText?: 'left' | 'center' | 'right' | 'stretch'
|
||||
alignSelf?: 'start' | 'center' | 'end'
|
||||
thickWhenActive?: true
|
||||
|
||||
icon?: string;
|
||||
round?: true;
|
||||
} & RouterLinkProps & (ColorProps | DefaultProps) & VariantProps>()
|
||||
thin?: true
|
||||
|
||||
icon?: string;
|
||||
round?: true;
|
||||
} & RouterLinkProps
|
||||
& (ColorProps | DefaultProps)
|
||||
& VariantProps
|
||||
& WidthProps>()
|
||||
|
||||
const isExternalLink = computed(() => {
|
||||
return typeof to === 'string' && to.startsWith('http')
|
||||
return typeof props.to === 'string' && props.to.startsWith('http')
|
||||
})
|
||||
|
||||
const [fontWeight, activeFontWeight] = thickWhenActive ? [600, 900] : [400, 400]
|
||||
const [fontWeight, activeFontWeight] = props.thickWhenActive ? [600, 900] : [400, 400]
|
||||
|
||||
const isIconOnly = computed(() => !!icon)
|
||||
const isSimple = propsToColor(colorProps).class === ''
|
||||
const isIconOnly = computed(() => !!props.icon)
|
||||
const isSimple = isNoColors(props)
|
||||
|
||||
const attributes = computed(() => ({
|
||||
...color(props, ['interactive']),
|
||||
...width(props, ['auto'])
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a v-if="isExternalLink"
|
||||
v-bind="propsToColor({ ...colorProps, interactive: true })"
|
||||
v-bind="attributes"
|
||||
:class="[
|
||||
$style.link,
|
||||
$style['is-' + width],
|
||||
|
|
@ -46,7 +57,7 @@ const isSimple = propsToColor(colorProps).class === ''
|
|||
</a>
|
||||
<RouterLink v-else
|
||||
:to="to"
|
||||
v-bind="propsToColor({ ...colorProps, interactive: true })"
|
||||
v-bind="color(props, ['interactive'])"
|
||||
:class="[
|
||||
$style.link,
|
||||
$style['is-' + width],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { type ColorProps, type DefaultProps, propsToColor } from '~/composables/colors';
|
||||
import { type ColorProps, type DefaultProps, color } from '~/composables/colors';
|
||||
import { watchEffect } from 'vue';
|
||||
import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
|
|||
<div @click.stop
|
||||
class="funkwhale modal raised"
|
||||
:class="[$slots.alert && 'has-alert', overPopover && 'over-popover']"
|
||||
v-bind="propsToColor(colorProps)"
|
||||
v-bind="color(colorProps)"
|
||||
>
|
||||
<h2>
|
||||
{{ title }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { type ColorProps, type PastelProps, propsToColor } from '~/composables/colors'
|
||||
import { type ColorProps, type PastelProps, color } from '~/composables/colors'
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [event: MouseEvent]
|
||||
|
|
@ -13,7 +13,7 @@ const props = defineProps<PastelProps | ColorProps>()
|
|||
<template>
|
||||
<button
|
||||
class="funkwhale pill outline"
|
||||
v-bind="propsToColor({...props, interactive:true})"
|
||||
v-bind="color(props, ['interactive'])"
|
||||
@click.stop="handleClick"
|
||||
>
|
||||
<div v-if="!!$slots.image" class="pill-image">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { whenever, useElementBounding, onClickOutside } from '@vueuse/core'
|
|||
|
||||
import { isMobileView, useScreenSize } from '~/composables/screen'
|
||||
import { POPOVER_INJECTION_KEY, POPOVER_CONTEXT_INJECTION_KEY } from '~/injection-keys'
|
||||
import { type ColorProps, type DefaultProps, type RaisedProps, propsToColor } from '~/composables/colors';
|
||||
import { type ColorProps, type DefaultProps, type RaisedProps, color } from '~/composables/colors';
|
||||
|
||||
/* TODO: Basic accessibility
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ watch(open, (isOpen) => {
|
|||
:style="position"
|
||||
:class="{ 'is-mobile': isMobile }"
|
||||
class="funkwhale popover"
|
||||
v-bind="propsToColor(colorProps)"
|
||||
v-bind="color(colorProps)"
|
||||
style="display:flex; flex-direction:column;"
|
||||
>
|
||||
<slot name="items" />
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@
|
|||
grid-template-columns: auto 1fr auto;
|
||||
gap: 12px;
|
||||
|
||||
grid-column: span 4;
|
||||
|
||||
> .activity-image {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
|
|
|
|||
|
|
@ -5,55 +5,98 @@ export type DefaultProps =
|
|||
export type Default = KeysOfUnion<DefaultProps>
|
||||
|
||||
export type ColorProps =
|
||||
| { primary?: true}
|
||||
| { primary?: true }
|
||||
| { secondary?: true }
|
||||
| { destructive?: true }
|
||||
export type Color = KeysOfUnion<ColorProps>
|
||||
|
||||
export type PastelProps =
|
||||
| { red?:true }
|
||||
| { blue?:true }
|
||||
| { purple?:true }
|
||||
| { red?: true }
|
||||
| { blue?: true }
|
||||
| { purple?: true }
|
||||
| { green?: true }
|
||||
| { yellow?:true }
|
||||
| { yellow?: true }
|
||||
export type Pastel = KeysOfUnion<PastelProps>
|
||||
|
||||
export type VariantProps =
|
||||
| { solid?:true }
|
||||
| { outline?:true }
|
||||
| { ghost?:true }
|
||||
| { solid?: true }
|
||||
| { outline?: true }
|
||||
| { ghost?: true }
|
||||
export type Variant = KeysOfUnion<VariantProps>
|
||||
|
||||
export type InteractiveProps =
|
||||
| { interactive?: true }
|
||||
| { interactive?: true }
|
||||
export type Interactive = KeysOfUnion<DefaultProps>
|
||||
|
||||
export type RaisedProps =
|
||||
| { raised?: true }
|
||||
| { raised?: true }
|
||||
export type Raised = KeysOfUnion<RaisedProps>
|
||||
|
||||
export type Props =
|
||||
DefaultProps & ColorProps & PastelProps & VariantProps & InteractiveProps & RaisedProps
|
||||
/* Props to Classes */
|
||||
|
||||
export type ColorSelector =
|
||||
`${Color | Pastel | Default}${'' | ` ${Variant}${'' | ' interactive'}${'' | ' raised'}`}`
|
||||
export type Props =
|
||||
(DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps
|
||||
|
||||
export type Key =
|
||||
KeysOfUnion<Props>
|
||||
|
||||
// You can only have one color
|
||||
const conflicts: Set<Key>[] = [
|
||||
new Set(['default', 'primary', 'secondary', 'destructive', 'red', 'blue', 'purple', 'green', 'yellow']),
|
||||
new Set(['solid', 'outline', 'ghost'])
|
||||
]
|
||||
|
||||
const classes = {
|
||||
default: "default",
|
||||
primary: "primary",
|
||||
secondary: "secondary",
|
||||
destructive: "destructive",
|
||||
red: "red",
|
||||
blue: "blue",
|
||||
purple: "purple",
|
||||
green: "green",
|
||||
yellow: "yellow",
|
||||
solid: "solid",
|
||||
outline: "outline",
|
||||
ghost: "ghost",
|
||||
raised: "raised",
|
||||
interactive: "interactive"
|
||||
} satisfies Record<Key, string>
|
||||
|
||||
/**
|
||||
* Apply a color class for setting `color`, `background-color` and `border` styles.
|
||||
* You can override it with `style="..."`.
|
||||
*
|
||||
* @param color Choose a semantic color or the default page background.
|
||||
* This will affect the text color.
|
||||
* To add an outline or filled background, add a `Variant`: `'solid' | 'outline'`.
|
||||
* If the surface should stand out, add `raised`.
|
||||
* If the surface reacts to mouse input, add `interactive`.
|
||||
* @returns the corresponding `class` object
|
||||
*
|
||||
* Note: Make sure to implement the necessary classes in `colors.scss`!
|
||||
* @param props A superset of `{ Key? : true }`
|
||||
* @returns the number of actually applied classes (if there are no defaults)
|
||||
*/
|
||||
export const color = (color: ColorSelector) =>
|
||||
({ class: color })
|
||||
export const isNoColors = (props: Partial<Props>) =>
|
||||
color(props).class===''
|
||||
|
||||
// Color from Props
|
||||
export const propsToColor = (props: Partial<Props>) =>
|
||||
({ class: Object.entries(props).filter(([key, value])=>value && key).map(([key,_])=>key).join(" ") })
|
||||
/**
|
||||
* Add color classes to your component.
|
||||
* Color classes are defined in `colors.scss`. Make sure to implement the correct style there!
|
||||
*
|
||||
* (1) Add a subset of `& (DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps` to your `Props` type
|
||||
* (2) Call `v-bind="propsToColor(props)"` on your component template
|
||||
* (3) Now your component accepts color props such as `secondary outline raised`.
|
||||
*
|
||||
* @param props Your component's props (or ...rest props if you have destructured them already)
|
||||
* @returns the corresponding `class` object
|
||||
*/
|
||||
export const color = (props: Partial<Props>, defaults?: Key[]) => ({
|
||||
class:
|
||||
Object.entries(props).reduce(
|
||||
((acc, [key, value]) =>
|
||||
value && key in classes ?
|
||||
acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key as Key)))
|
||||
.concat([key as Key])
|
||||
: acc
|
||||
),
|
||||
defaults || []
|
||||
).join(' ')
|
||||
})
|
||||
|
||||
type ColorSelector =
|
||||
`${Color | Pastel | Default}${'' | ` ${Variant}${'' | ' interactive'}${'' | ' raised'}`}`
|
||||
|
||||
// Convenience function for applying default colors. Prefer using `color`
|
||||
export const setColors = (color: ColorSelector) =>
|
||||
({ class: color })
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import type { KeysOfUnion } from "type-fest"
|
||||
|
||||
export type WidthProps =
|
||||
| { minContent?: true }
|
||||
| { tiny?: true }
|
||||
| { buttonWidth?: true }
|
||||
| { small?: true }
|
||||
| { medium?: true }
|
||||
| { auto?: true }
|
||||
| { full?: true }
|
||||
export type Key = KeysOfUnion<WidthProps>
|
||||
|
||||
const styles : Record<Key, string> = {
|
||||
minContent: 'width: min-content;',
|
||||
tiny: "width: 124px; grid-column: span 2;",
|
||||
buttonWidth: "width: 136px; grid-column: span 2; flex-grow:0;",
|
||||
small: "width: 202px; grid-column: span 3;",
|
||||
medium: "width: 280px; grid-column: span 4;",
|
||||
auto: "width: auto;",
|
||||
full: "width: auto; grid-column: 1 / -1; align-self: auto;",
|
||||
};
|
||||
|
||||
// All keys are exclusive
|
||||
const conflicts: Set<Key>[] = [
|
||||
new Set(Object.keys(styles) as Key[])
|
||||
]
|
||||
|
||||
/**
|
||||
* Add a width style to your component.
|
||||
* Widths are designed to work both in a page-grid context and in a flex or normal context.
|
||||
*
|
||||
* (1) Add `& WidthProps` to your `Props` type
|
||||
* (2) Call `v-bind="propsToWidth(props)"` on your component template
|
||||
* (3) Now your component accepts width props such as `small`, `medium`, `stretch`.
|
||||
*
|
||||
* @param props Your component's props (or ...rest props if you have destructured them already)
|
||||
* @returns the corresponding `style` object
|
||||
*/
|
||||
export const width = (props: Partial<WidthProps>, defaults: Key[] = []) => ({
|
||||
style:
|
||||
Object.entries(props).reduce(
|
||||
((acc, [key, value]) =>
|
||||
value && key in styles ?
|
||||
acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key as Key)))
|
||||
.concat([key as Key])
|
||||
: acc
|
||||
),
|
||||
defaults
|
||||
).map(key => styles[key])
|
||||
.join(' ')
|
||||
})
|
||||
|
|
@ -17,7 +17,7 @@ onMounted(async () => {
|
|||
<template>
|
||||
<div class="funkwhale grid">
|
||||
<Sidebar/>
|
||||
<RouterView v-bind="color('default solid')" />
|
||||
<RouterView v-bind="color({}, ['default', 'solid'])" />
|
||||
<LanguagesModal />
|
||||
<ShortcutsModal />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const uploads = useUploadsStore()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Layout aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
|
||||
<Layout aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color({}, ['default', 'solid', 'raised'])">
|
||||
<Layout flex no-gap header style="justify-content:space-between; padding-right:8px;">
|
||||
<Link to="/"
|
||||
:class="$style['logo']"
|
||||
|
|
|
|||
|
|
@ -45,13 +45,12 @@ const labels = computed(() => ({
|
|||
<template>
|
||||
<Popover raised v-model:open="isOpen">
|
||||
<Button
|
||||
min-content
|
||||
@click="isOpen = !isOpen"
|
||||
round
|
||||
default
|
||||
raised
|
||||
icon=""
|
||||
ghost
|
||||
class="is-icon-only"
|
||||
:ariaPressed="isOpen ? true : undefined"
|
||||
>
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -29,12 +29,11 @@ const isOpen = computed({
|
|||
:title="t('components.common.UserMenu.label.language')"
|
||||
v-model="isOpen"
|
||||
>
|
||||
<Layout columns :column-width="140">
|
||||
<Button ghost thin
|
||||
<Layout columns :column-width="200">
|
||||
<Button ghost thin small
|
||||
v-for="(language, key) in SUPPORTED_LOCALES"
|
||||
width="full"
|
||||
align-text="left"
|
||||
:aria-pressed="key===locale"
|
||||
:aria-pressed="key===locale || undefined"
|
||||
:key="key"
|
||||
@click="setI18nLanguage(key)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -10,15 +10,28 @@ const click = () => new Promise(resolve => setTimeout(resolve, 1000))
|
|||
|
||||
Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.
|
||||
|
||||
| Prop | Data type | Required? | Default | Description |
|
||||
| -------------- | --------- | --------- | ------- | ---------------------------------------------- |
|
||||
| `shadow` | Boolean | No | `false` | Whether to render the button with a shadow |
|
||||
| `round` | Boolean | No | `false` | Whether to render the button as a round button |
|
||||
| `icon` | String | No | | The icon attached to the button |
|
||||
| `aria-pressed` | Boolean | No | `false` | Whether the button is in an active state |
|
||||
| `is-loading` | Boolean | No | `false` | Whether the button is in a loading state |
|
||||
```ts
|
||||
{
|
||||
alignText?: 'left' | 'center' | 'right'
|
||||
alignSelf?: 'start' | 'center' | 'end'
|
||||
thin?: true
|
||||
|
||||
In addition, use [Colors] and [Variants]
|
||||
isActive?: boolean
|
||||
isLoading?: boolean
|
||||
|
||||
shadow?: boolean
|
||||
round?: boolean
|
||||
icon?: string
|
||||
|
||||
onClick?: (...args: any[]) => void | Promise<void>
|
||||
|
||||
autofocus? : boolean
|
||||
ariaPressed? : true
|
||||
} & (ColorProps | DefaultProps)
|
||||
& VariantProps
|
||||
& RaisedProps
|
||||
& WidthProps
|
||||
```
|
||||
|
||||
## Button colors
|
||||
|
||||
|
|
@ -307,27 +320,31 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
|
|||
```vue-html
|
||||
<Button icon="bi-three-dots-vertical" />
|
||||
<Button round icon="bi-x" />
|
||||
<Button primary icon="bi-save" width="standard" />
|
||||
<Button primary icon="bi-save" buttonWidth/>
|
||||
<Button destructive icon="bi-trash">
|
||||
Delete
|
||||
</Button>
|
||||
```
|
||||
|
||||
<Layout flex>
|
||||
<Button icon="bi-three-dots-vertical" />
|
||||
<Button round icon="bi-x" />
|
||||
<Button primary icon="bi-save" width="standard" />
|
||||
<Button round secondary icon="bi-x large" />
|
||||
<Button primary icon="bi-save" buttonWidth/>
|
||||
<Button destructive icon="bi-trash">
|
||||
Delete
|
||||
</Button>
|
||||
</Layout>
|
||||
|
||||
## Width and alignment
|
||||
|
||||
<Layout flex>
|
||||
|
||||
```vue-html
|
||||
<Button width="auto">·</Button>
|
||||
<Button width="standard">·</Button>
|
||||
<Button width="full">·</Button>
|
||||
<Button min-content>·</Button>
|
||||
<Button small>·</Button>
|
||||
<Button buttonWidth>·</Button>
|
||||
<Button medium>·</Button>
|
||||
<Button auto>·</Button>
|
||||
|
||||
<hr />
|
||||
|
||||
|
|
@ -342,10 +359,12 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
|
|||
<Button alignText="right">·</Button>
|
||||
```
|
||||
|
||||
<Layout class="preview solid secondary" stack no-gap>
|
||||
<Button width="auto">·</Button>
|
||||
<Button width="standard">·</Button>
|
||||
<Button width="full">·</Button>
|
||||
<Layout class="preview solid primary" stack no-gap>
|
||||
<Button min-content>·</Button>
|
||||
<Button tiny>·</Button>
|
||||
<Button buttonWidth>·</Button>
|
||||
<Button small>·</Button>
|
||||
<Button auto>·</Button>
|
||||
<hr />
|
||||
<Button alignSelf="start">·</Button>
|
||||
<Button alignSelf="center">·</Button>
|
||||
|
|
@ -354,6 +373,5 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
|
|||
<Button alignText="left">·</Button>
|
||||
<Button alignText="center">·</Button>
|
||||
<Button alignText="right">·</Button>
|
||||
(Text to stretch the column)
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -14,32 +14,33 @@
|
|||
|
||||
Funkwhale cards are used to contain textual information, links, and interactive buttons. You can use these to create visually pleasing links to content or to present information.
|
||||
|
||||
::: details Parameters
|
||||
|
||||
#### Props
|
||||
::: details Props
|
||||
|
||||
```ts
|
||||
interface Props extends Partial<RouterLinkProps> {
|
||||
title: string;
|
||||
category?: true | "h1" | "h2" | "h3" | "h4" | "h5";
|
||||
color?: Pastel;
|
||||
image?: string | { src: string; style?: "withPadding" };
|
||||
tags?: string[];
|
||||
}
|
||||
{
|
||||
title: string
|
||||
category?: true | "h1" | "h2" | "h3" | "h4" | "h5"
|
||||
|
||||
tags?: string[]
|
||||
image?: string | { src: string, style?: "withPadding" }
|
||||
icon?: string
|
||||
} & Partial<RouterLinkProps>
|
||||
& (PastelProps | ColorProps | DefaultProps)
|
||||
& RaisedProps
|
||||
& VariantProps
|
||||
& WidthProps
|
||||
```
|
||||
|
||||
You have to set a title for the card by passing a `title` prop.
|
||||
|
||||
#### Style
|
||||
|
||||
- Set `--width` on the element to override the default Card width.
|
||||
|
||||
:::
|
||||
|
||||
<Layout grid :column-width=290>
|
||||
<Layout grid class="preview">
|
||||
|
||||
<div style="grid-column: span 5; grid-row: span 2;">
|
||||
|
||||
```vue-html
|
||||
<Card title="For music lovers">
|
||||
<Card large
|
||||
title="For music lovers"
|
||||
>
|
||||
Access your personal music
|
||||
collection from anywhere.
|
||||
Funkwhale gives you access to
|
||||
|
|
@ -49,11 +50,11 @@ You have to set a title for the card by passing a `title` prop.
|
|||
</Card>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<Card title="For music lovers">
|
||||
</div>
|
||||
|
||||
<Card medium title="For music lovers">
|
||||
Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
||||
|
|
@ -61,56 +62,60 @@ You have to set a title for the card by passing a `title` prop.
|
|||
|
||||
Add a `:to` prop, either containing an external link (`"https://..."`) or a Vue Router destination:
|
||||
|
||||
<Layout flex>
|
||||
<Layout flex class="preview">
|
||||
|
||||
```ts
|
||||
<Card small title="Link"
|
||||
<Card min-content title="Link"
|
||||
:to="{name: 'library.albums.detail', params: {id: album.id}}"
|
||||
/>
|
||||
```
|
||||
|
||||
<Layout class="preview">
|
||||
<Card small title="Link"
|
||||
<Card min-content title="Link"
|
||||
:to="{name: 'library.albums.detail', params: {id: 1}}"
|
||||
/>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
## Card as a Category header
|
||||
|
||||
Category cards are basic cards that contain only a title. To create a category card, pass a `category` prop.
|
||||
|
||||
<Layout flex>
|
||||
<Layout flex class="preview">
|
||||
|
||||
```vue-html{1,5}
|
||||
<Card category min-content
|
||||
title="Good Translations"
|
||||
/>
|
||||
|
||||
```vue-html{1}
|
||||
<Card category
|
||||
title="Example Translations"
|
||||
title="Bad Translations"
|
||||
/>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<Card category
|
||||
title="Example Translations"
|
||||
<Layout stack>
|
||||
<Card category min-content
|
||||
title="Good Translations"
|
||||
/>
|
||||
</div>
|
||||
<Card category
|
||||
title="Bad Translations"
|
||||
/>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
## Add an Image
|
||||
|
||||
Pass an image source to the `image` prop or set both `image.src` and `image.style` by passing an object.
|
||||
|
||||
<Layout grid>
|
||||
<Layout grid class="preview">
|
||||
|
||||
<div style="max-width: 320px;">
|
||||
<div style="grid-column: span 5; grid-row: span 2">
|
||||
|
||||
```vue-html{4,11-12}
|
||||
<Card medium
|
||||
```vue-html{3,8-9}
|
||||
<Card
|
||||
title="For music lovers"
|
||||
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb">
|
||||
/>
|
||||
|
||||
|
||||
<Card medium
|
||||
<Card
|
||||
title="For music lovers"
|
||||
:image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
|
||||
style:'withPadding' }"
|
||||
|
|
@ -118,40 +123,57 @@ Pass an image source to the `image` prop or set both `image.src` and `image.styl
|
|||
```
|
||||
|
||||
</div>
|
||||
<Card
|
||||
title="For music lovers"
|
||||
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
|
||||
/>
|
||||
|
||||
<Layout stack class="preview">
|
||||
<Card medium
|
||||
title="For music lovers"
|
||||
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
|
||||
/>
|
||||
|
||||
<Card medium
|
||||
<Card
|
||||
title="For music lovers"
|
||||
:image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
|
||||
style:'withPadding' }"
|
||||
/>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
## Add an Icon
|
||||
|
||||
<Layout columns>
|
||||
<Layout grid class="preview">
|
||||
|
||||
```vue-html{4}
|
||||
<Card
|
||||
<div style="grid-column: span 5; grid-row: span 2;">
|
||||
|
||||
```vue-html{4,10}
|
||||
<Card large
|
||||
title="Uploading..."
|
||||
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
|
||||
icon="bi-cloud-arrow-up-fill"
|
||||
/>
|
||||
|
||||
|
||||
<Card large
|
||||
to="./"
|
||||
title="Find out more"
|
||||
icon="bi-box-arrow-up-right"
|
||||
>
|
||||
Visit the Docs and learn more about developing Funkwhale
|
||||
</Card>
|
||||
```
|
||||
|
||||
<Layout class="preview">
|
||||
<Card
|
||||
</div>
|
||||
|
||||
<Card medium
|
||||
title="Uploading..."
|
||||
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
|
||||
icon="bi-cloud-arrow-up-fill"
|
||||
/>
|
||||
</Layout>
|
||||
|
||||
<Card medium
|
||||
to="./"
|
||||
title="Find out more"
|
||||
icon="bi-box-arrow-up-right">
|
||||
|
||||
Visit the Docs and learn more about developing Funkwhale
|
||||
|
||||
</Card>
|
||||
</Layout>
|
||||
|
||||
You can combine this prop with any other prop configuration. If you combine it with an image, keep an eye on the contrast ratio between the icon color and the image.
|
||||
|
|
@ -177,10 +199,10 @@ You can combine this prop with any other prop configuration. If you combine it w
|
|||
Items in this region are secondary and will be displayed smaller than the main content.
|
||||
|
||||
```vue-html{3-9}
|
||||
<Card title="My items">
|
||||
<Card large title="My items">
|
||||
<template #alert> There are no items in this list </template>
|
||||
<template #footer>
|
||||
<Button variant="outline" icon="bi-upload" @click="alert('Uploaded. Press OK!')">
|
||||
<Button outline icon="bi-upload" @click="alert('Uploaded. Press OK!')">
|
||||
Upload
|
||||
</Button>
|
||||
<Spacer style="flex-grow: 1" />
|
||||
|
|
@ -190,13 +212,13 @@ Items in this region are secondary and will be displayed smaller than the main c
|
|||
```
|
||||
|
||||
<div class="preview">
|
||||
<Card title="My items">
|
||||
<Card medium title="My items">
|
||||
|
||||
<template #alert>There are no items in this list
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<Button variant="outline" icon="bi-upload" @click="alert('Uploaded. Press OK!')">Upload</Button>
|
||||
<Button outline icon="bi-upload" @click="alert('Uploaded. Press OK!')">Upload</Button>
|
||||
<Spacer style="flex-grow: 1" />
|
||||
<OptionsButton />
|
||||
</template>
|
||||
|
|
@ -209,20 +231,24 @@ Items in this region are secondary and will be displayed smaller than the main c
|
|||
Large Buttons or links at the bottom edge of the card serve as Call-to-Actions (CTA).
|
||||
|
||||
```vue-html{3-6}
|
||||
<Card title="Join an existing pod">
|
||||
<Card large
|
||||
title="Join an existing pod"
|
||||
>
|
||||
The easiest way to get started with Funkwhale is to register an account on a public pod.
|
||||
<template #action>
|
||||
<Button secondary @click="alert('Open the pod picker')">Action!
|
||||
<Button secondary full @click="alert('Open the pod picker')">Action!
|
||||
</Button>
|
||||
</template>
|
||||
</Card>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<Card title="Join an existing pod">
|
||||
<Card medium
|
||||
title="Join an existing pod"
|
||||
>
|
||||
The easiest way to get started with Funkwhale is to register an account on a public pod.
|
||||
<template #action>
|
||||
<Button secondary @click="alert('Open the pod picker')">Action!
|
||||
<Button secondary full @click="alert('Open the pod picker')">Action!
|
||||
</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
|
@ -245,14 +271,21 @@ If there are multiple actions, they will be presented in a row:
|
|||
```
|
||||
|
||||
<div class="preview">
|
||||
<Card title="Creating a new playlist...">
|
||||
<Card full title="Creating a new playlist...">
|
||||
All items have been assimilated. Ready to go!
|
||||
<template #action>
|
||||
<Button secondary ghost style="width:50%; justify-content: flex-start;" icon="bi-chevron-left">
|
||||
Back
|
||||
<Button secondary ghost min-content
|
||||
alignText="left"
|
||||
icon="bi-chevron-left"
|
||||
>
|
||||
Items
|
||||
</Button>
|
||||
<Button style="width:50%" primary @click="alert('Yay')">
|
||||
Next: Pick a color
|
||||
<Spacer h />
|
||||
<Button primary @click="alert('Yay')">
|
||||
OK
|
||||
</Button>
|
||||
<Button destructive @click="alert('Yay')">
|
||||
Cancel
|
||||
</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
|
@ -272,8 +305,12 @@ You can include tags on a card by adding a list of `tags`. These are rendered as
|
|||
```
|
||||
|
||||
<div class="preview">
|
||||
<Card
|
||||
<Card medium
|
||||
title="For music lovers"
|
||||
:tags="['rock', 'folk', 'punk']">
|
||||
Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
|
||||
</Card></div>
|
||||
|
||||
### Sizes
|
||||
|
||||
`large` (304px), `medium` (208px), `auto`, `small`
|
||||
|
|
|
|||
|
|
@ -76,10 +76,10 @@ const noGap = ref(true);
|
|||
---
|
||||
|
||||
<Layout flex :no-gap="noGap || undefined">
|
||||
<Card title="A" small />
|
||||
<Card title="B" small />
|
||||
<Card title="C" small />
|
||||
<Card title="D" small />
|
||||
<Card title="A" tiny />
|
||||
<Card title="B" tiny />
|
||||
<Card title="C" tiny />
|
||||
<Card title="D" tiny />
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ Let items flow like words on a printed newspaper, Great for very long lists of b
|
|||
|
||||
Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
|
||||
|
||||
<Card small title="Cards...">...break over columns...</Card>
|
||||
<Card min-content title="Cards...">...break over columns...</Card>
|
||||
|
||||
<Button icon="bi-star"/>
|
||||
<Button icon="bi-star"/>
|
||||
|
|
@ -50,7 +50,7 @@ Normal paragraph. Text flows like in a newspaper. Set the column width in px. Co
|
|||
|
||||
---
|
||||
|
||||
<Card small title="Cards...">...break over columns...</Card>
|
||||
<Card min-content title="Cards...">...break over columns...</Card>
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -30,14 +30,14 @@ You can either specify the column width (default: 320px) or set the desired num
|
|||
:style="`width:${2 * 90 + 32}px`"
|
||||
>
|
||||
<Alert yellow />
|
||||
<Card small title="brown" />
|
||||
<Card min-content title="brown" />
|
||||
<Alert blue />
|
||||
</Layout>
|
||||
```
|
||||
|
||||
<Layout grid :column-width="90" class="preview" :style="`width:${2 * 90 + 32}px`">
|
||||
<Alert yellow />
|
||||
<Card small title="brown" />
|
||||
<Card min-content title="brown" />
|
||||
<Alert blue />
|
||||
</Layout>
|
||||
|
||||
|
|
|
|||
|
|
@ -159,10 +159,10 @@ const size = ref(1);
|
|||
|
||||
<Layout flex style="align-items:flex-start">
|
||||
<Input v-model="size" type="range" />
|
||||
<Card small title="h">
|
||||
<Card min-content title="h">
|
||||
<Spacer h :size="size * 4" style="border:5px dashed;" />
|
||||
</Card>
|
||||
<Card small title="v">
|
||||
<Card min-content title="v">
|
||||
<Spacer v :size="size * 4" style="border:5px dashed;" />
|
||||
</Card>
|
||||
</Layout>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { color } from "~/composables/colors.ts"
|
||||
import { color, setColors } from "~/composables/colors.ts"
|
||||
import { useRoute } from "vue-router"
|
||||
|
||||
import Button from "~/components/ui/Button.vue"
|
||||
|
|
@ -59,16 +59,37 @@ import { color } from "~/composables/colors.ts";
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-bind="color('primary solid interactive raised')" />
|
||||
<div v-bind="setColors('primary solid interactive raised')" />
|
||||
</template>
|
||||
```
|
||||
|
||||
<div class="preview">
|
||||
<div :class="$style.swatch" v-bind="color('primary solid interactive raised')" />
|
||||
<div :class="$style.swatch" v-bind="setColors('primary solid interactive raised')" />
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
||||
## Make your component accept color props
|
||||
|
||||
`color` accepts two parameters. The first is your props object, the second is a list of defaults.
|
||||
|
||||
In this case, if the user of your component doesn't specify any color, it will be 'primary'.
|
||||
Since the user cannot specify the variant, it will always be 'default'.
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { type ColorProps, color } from "~/composables/colors.ts";
|
||||
|
||||
const props = defineProps<{
|
||||
...
|
||||
} & ColorProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-bind="color(props, ['primary', 'solid'])" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Base colors
|
||||
|
||||
Keep most of the screen neutral. Secondary surfaces indicate actionability. Use them sparingly. Primary and destructive surfaces immediately catch the eye. Use them only once or twice per screen.
|
||||
|
|
@ -79,22 +100,22 @@ Use neutral colors for non-interactive surfaces
|
|||
|
||||
<Layout flex>
|
||||
<div class="force-dark-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="$style.swatch" v-bind="color('default solid')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="color('default solid raised')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid raised interactive')" />
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="$style.swatch" v-bind="setColors('default solid')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('default solid interactive')" />
|
||||
</div><div v-bind="setColors('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="setColors('default solid raised')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('default solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="force-light-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="$style.swatch" v-bind="color('default solid')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="color('default solid raised')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid raised interactive')" />
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="$style.swatch" v-bind="setColors('default solid')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('default solid interactive')" />
|
||||
</div><div v-bind="setColors('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="setColors('default solid raised')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('default solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -107,22 +128,22 @@ Only use for at most one call-to-action on a screen
|
|||
|
||||
<Layout flex>
|
||||
<div class="force-dark-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('primary solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('primary solid raised interactive')" />
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('primary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('primary solid interactive')" />
|
||||
</div><div v-bind="setColors('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('primary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('primary solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="force-light-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('primary solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('primary solid raised interactive')" />
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('primary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('primary solid interactive')" />
|
||||
</div><div v-bind="setColors('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('primary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('primary solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -133,22 +154,22 @@ Use for interactive items and non-permanent surfaces such as menus and modals
|
|||
|
||||
<Layout flex>
|
||||
<div class="force-dark-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('secondary solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('secondary solid raised interactive')" />
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="$style.swatch" v-bind="setColors('secondary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('secondary solid interactive')" />
|
||||
</div><div v-bind="setColors('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="setColors('secondary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('secondary solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="force-light-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('secondary solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('secondary solid raised interactive')" />
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="$style.swatch" v-bind="setColors('secondary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('secondary solid interactive')" />
|
||||
</div><div v-bind="setColors('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="setColors('secondary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('secondary solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -159,22 +180,22 @@ Use for dangerous actions
|
|||
|
||||
<Layout flex>
|
||||
<div class="force-dark-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('destructive solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('destructive solid raised interactive')" />
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('destructive solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('destructive solid interactive')" />
|
||||
</div><div v-bind="setColors('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('destructive solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('destructive solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="force-light-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('destructive solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('destructive solid raised interactive')" />
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('destructive solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('destructive solid interactive')" />
|
||||
</div><div v-bind="setColors('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('destructive solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('destructive solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -184,11 +205,11 @@ Use for dangerous actions
|
|||
Use `Blue`, `Red`, `Purple`, `Green`, `Yellow` for user-defined tags and for friendly messages such as
|
||||
Alerts
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('blue solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('red solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('purple solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('green solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('yellow solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="setColors('blue solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="setColors('red solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="setColors('purple solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="setColors('green solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="setColors('yellow solid interactive')" />
|
||||
|
||||
### Variant
|
||||
|
||||
|
|
@ -198,7 +219,7 @@ You can de-emphasize interactive elements by hiding their background and/or outl
|
|||
|
||||
<Button round shadow icon="bi-x" solid />
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('solid raised')">
|
||||
<div :class="$style.swatch" v-bind="setColors('solid raised')">
|
||||
<Button round icon="bi-x" ghost />
|
||||
<Spacer />
|
||||
<Button round icon="bi-x" outline />
|
||||
|
|
@ -208,7 +229,7 @@ You can de-emphasize interactive elements by hiding their background and/or outl
|
|||
|
||||
<Button round shadow icon="bi-x" primary solid />
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('primary solid')">
|
||||
<div :class="$style.swatch" v-bind="setColors('primary solid')">
|
||||
<Button round icon="bi-x" primary ghost />
|
||||
<Spacer />
|
||||
<Button round icon="bi-x" primary outline />
|
||||
|
|
@ -223,91 +244,88 @@ Space out interactive surfaces.
|
|||
<Layout>
|
||||
|
||||
<div class="force-light-theme">
|
||||
|
||||
<Layout flex>
|
||||
<div>
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
|
||||
</div>
|
||||
<div v-bind="color('secondary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('secondary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
|
||||
</div>
|
||||
<div v-bind="color('primary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('primary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
|
||||
</div>
|
||||
</div><div>
|
||||
<div v-bind="color('default raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('default raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
|
||||
</div>
|
||||
<div v-bind="color('secondary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('secondary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
|
||||
</div>
|
||||
<div v-bind="color('primary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('primary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="force-dark-theme">
|
||||
|
||||
<Layout flex>
|
||||
<div>
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('default solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
|
||||
</div>
|
||||
<div v-bind="color('secondary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('secondary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
|
||||
</div>
|
||||
<div v-bind="color('primary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('primary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
|
||||
</div><br/>Normal
|
||||
</div><div>
|
||||
<div v-bind="color('default raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('default raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
|
||||
</div>
|
||||
<div v-bind="color('secondary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('secondary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
|
||||
</div>
|
||||
<div v-bind="color('primary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
<div v-bind="setColors('primary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
|
||||
</div><br/><strong>Raised</strong>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -604,7 +622,7 @@ Here is the meaning the styles should convey:
|
|||
|
||||
<Layout flex>
|
||||
|
||||
<Card small title="Default" solid default>
|
||||
<Card min-content title="Default" solid default>
|
||||
<span>
|
||||
Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
|
||||
</span>
|
||||
|
|
@ -642,11 +660,11 @@ Here is the meaning the styles should convey:
|
|||
<Button raised ghost> Button raised ghost </Button>
|
||||
<Button raised outline> Button raised outline </Button>
|
||||
<Button raised solid> Button raised solid </Button>
|
||||
<Button raised aria-pressed="true"> Button active </Button>
|
||||
<Button raised aria-pressed > Button active </Button>
|
||||
<Button raised disabled> Button disabled </Button>
|
||||
</Card>
|
||||
|
||||
<Card small title="Default raised" solid default raised>
|
||||
<Card min-content title="Default raised" solid default raised>
|
||||
<span>
|
||||
Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
|
||||
</span>
|
||||
|
|
@ -684,11 +702,11 @@ Here is the meaning the styles should convey:
|
|||
<Button raised ghost> Button raised ghost </Button>
|
||||
<Button raised outline> Button raised outline </Button>
|
||||
<Button raised solid> Button raised solid </Button>
|
||||
<Button raised aria-pressed="true"> Button active </Button>
|
||||
<Button raised aria-pressed > Button active </Button>
|
||||
<Button raised disabled> Button disabled </Button>
|
||||
</Card>
|
||||
|
||||
<Card small title="Secondary" solid secondary>
|
||||
<Card min-content title="Secondary" solid secondary>
|
||||
<span>
|
||||
Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
|
||||
</span>
|
||||
|
|
@ -726,11 +744,11 @@ Here is the meaning the styles should convey:
|
|||
<Button raised ghost> Button raised ghost </Button>
|
||||
<Button raised outline> Button raised outline </Button>
|
||||
<Button raised solid> Button raised solid </Button>
|
||||
<Button raised aria-pressed="true"> Button raised active </Button>
|
||||
<Button raised aria-pressed > Button raised active </Button>
|
||||
<Button raised disabled> Button raised disabled </Button>
|
||||
</Card>
|
||||
|
||||
<Card small title="Secondary raised" solid secondary raised>
|
||||
<Card min-content title="Secondary raised" solid secondary raised>
|
||||
<span>
|
||||
Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue