mirror of
https://gitlab.com/bramw/baserow.git
synced 2024-11-22 07:42:36 +00:00
439 lines
13 KiB
Vue
439 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<ThemeConfigBlockSection
|
|
v-if="!onlyCell"
|
|
:title="$t('tableThemeConfigBlock.table')"
|
|
>
|
|
<template #default>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.borderSize')"
|
|
:error-message="getError('table_border_size')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PixelValueSelector v-model="values.table_border_size" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_border_size"
|
|
:default-value="theme?.table_border_size"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
:label="$t('tableThemeConfigBlock.borderColor')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<ColorInput
|
|
v-model="values.table_border_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.table_border_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_border_color"
|
|
:default-value="theme?.table_border_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.borderRadius')"
|
|
:error-message="getError('table_border_radius')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PixelValueSelector v-model="values.table_border_radius" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_border_radius"
|
|
:default-value="theme?.table_border_radius"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
</template>
|
|
<template #preview>
|
|
<ABTable :fields="fields" :rows="rows" />
|
|
</template>
|
|
</ThemeConfigBlockSection>
|
|
|
|
<ThemeConfigBlockSection
|
|
v-if="!onlyCell"
|
|
:title="$t('tableThemeConfigBlock.header')"
|
|
>
|
|
<template #default>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.backgroundColor')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<ColorInput
|
|
v-model="values.table_header_background_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.table_header_background_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_header_background_color"
|
|
:default-value="theme?.table_header_background_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.fontFamily')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<FontFamilySelector v-model="values.table_header_font_family" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_header_font_family"
|
|
:default-value="theme?.table_header_font_family"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.fontSize')"
|
|
:error-message="getError('table_header_font_size')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PixelValueSelector v-model="values.table_header_font_size" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_header_font_size"
|
|
:default-value="theme?.table_header_font_size"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.textColor')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<ColorInput
|
|
v-model="values.table_header_text_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.table_header_text_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_header_text_color"
|
|
:default-value="theme?.table_header_text_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
:label="$t('tableThemeConfigBlock.alignment')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<HorizontalAlignmentsSelector
|
|
v-model="values.table_header_text_alignment"
|
|
/>
|
|
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_header_text_alignment"
|
|
:default-value="theme?.table_header_text_alignment"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
</template>
|
|
<template #preview>
|
|
<ABTable :fields="fields" :rows="rows" />
|
|
</template>
|
|
</ThemeConfigBlockSection>
|
|
|
|
<ThemeConfigBlockSection :title="$t('tableThemeConfigBlock.cells')">
|
|
<template #default>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.backgroundColor')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<ColorInput
|
|
v-model="values.table_cell_background_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.table_cell_background_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_cell_background_color"
|
|
:default-value="theme?.table_cell_background_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.backgroundAlternateColor')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<ColorInput
|
|
v-model="values.table_cell_alternate_background_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.table_cell_alternate_background_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_cell_alternate_background_color"
|
|
:default-value="theme?.table_cell_alternate_background_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
:label="$t('tableThemeConfigBlock.alignment')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<HorizontalAlignmentsSelector v-model="values.table_cell_alignment" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_cell_alignment"
|
|
:default-value="theme?.table_cell_alignment"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.padding')"
|
|
:error-message="getPaddingError()"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PaddingSelector v-model="padding" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="padding"
|
|
:default-value="
|
|
theme
|
|
? {
|
|
vertical: theme['table_cell_vertical_padding'],
|
|
horizontal: theme['table_cell_horizontal_padding'],
|
|
}
|
|
: undefined
|
|
"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
</template>
|
|
<template #preview>
|
|
<ABTable :fields="fields" :rows="rows" />
|
|
</template>
|
|
</ThemeConfigBlockSection>
|
|
<ThemeConfigBlockSection
|
|
v-if="!onlyCell"
|
|
:title="$t('tableThemeConfigBlock.separators')"
|
|
>
|
|
<template #default>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.horizontalSeparatorColor')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<ColorInput
|
|
v-model="values.table_horizontal_separator_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.table_horizontal_separator_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_horizontal_separator_color"
|
|
:default-value="theme?.table_horizontal_separator_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.horizontalSeparatorSize')"
|
|
:error-message="getError('table_horizontal_separator_size')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PixelValueSelector
|
|
v-model="values.table_horizontal_separator_size"
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_horizontal_separator_size"
|
|
:default-value="theme?.table_horizontal_separator_size"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.verticalSeparatorColor')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<ColorInput
|
|
v-model="values.table_vertical_separator_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.table_vertical_separator_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_vertical_separator_color"
|
|
:default-value="theme?.table_vertical_separator_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('tableThemeConfigBlock.verticalSeparatorSize')"
|
|
:error-message="getError('table_vertical_separator_size')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PixelValueSelector v-model="values.table_vertical_separator_size" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.table_vertical_separator_size"
|
|
:default-value="theme?.table_vertical_separator_size"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
</template>
|
|
<template #preview>
|
|
<ABTable :fields="fields" :rows="rows" />
|
|
</template>
|
|
</ThemeConfigBlockSection>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import themeConfigBlock from '@baserow/modules/builder/mixins/themeConfigBlock'
|
|
import ThemeConfigBlockSection from '@baserow/modules/builder/components/theme/ThemeConfigBlockSection'
|
|
import ResetButton from '@baserow/modules/builder/components/theme/ResetButton'
|
|
import HorizontalAlignmentsSelector from '@baserow/modules/builder/components/HorizontalAlignmentsSelector'
|
|
import FontFamilySelector from '@baserow/modules/builder/components/FontFamilySelector'
|
|
import PixelValueSelector from '@baserow/modules/builder/components/PixelValueSelector'
|
|
import PaddingSelector from '@baserow/modules/builder/components/PaddingSelector'
|
|
import { required, integer, minValue, maxValue } from 'vuelidate/lib/validators'
|
|
|
|
const minMax = {
|
|
table_border_size: {
|
|
min: 0,
|
|
max: 30,
|
|
},
|
|
table_border_radius: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
table_header_font_size: {
|
|
min: 1,
|
|
max: 100,
|
|
},
|
|
table_cell_vertical_padding: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
table_cell_horizontal_padding: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
table_horizontal_separator_size: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
table_vertical_separator_size: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
}
|
|
|
|
export default {
|
|
name: 'ButtonThemeConfigBlock',
|
|
components: {
|
|
ThemeConfigBlockSection,
|
|
ResetButton,
|
|
HorizontalAlignmentsSelector,
|
|
FontFamilySelector,
|
|
PixelValueSelector,
|
|
PaddingSelector,
|
|
},
|
|
mixins: [themeConfigBlock],
|
|
data() {
|
|
return {
|
|
values: {},
|
|
fields: [
|
|
{ __id__: 1, id: 1, name: 'Header 1' },
|
|
{ __id__: 2, id: 2, name: 'Header 2' },
|
|
],
|
|
rows: [
|
|
{ 'Header 1': 'Row 1 cell 1', 'Header 2': 'Row 1 cell 2' },
|
|
{ 'Header 1': 'Row 2 cell 1', 'Header 2': 'Row 2 cell 2' },
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
padding: {
|
|
get() {
|
|
return {
|
|
vertical: this.values.table_cell_vertical_padding,
|
|
horizontal: this.values.table_cell_horizontal_padding,
|
|
}
|
|
},
|
|
set(newValue) {
|
|
this.values.table_cell_vertical_padding = newValue.vertical
|
|
this.values.table_cell_horizontal_padding = newValue.horizontal
|
|
},
|
|
},
|
|
onlyCell() {
|
|
return this.extraArgs?.onlyCell
|
|
},
|
|
},
|
|
methods: {
|
|
isAllowedKey(key) {
|
|
return key.startsWith('table_')
|
|
},
|
|
getError(property) {
|
|
if (this.$v.values[property].$invalid) {
|
|
return this.$t('error.minMaxValueField', minMax[property])
|
|
}
|
|
return null
|
|
},
|
|
getPaddingError() {
|
|
return (
|
|
this.getError('table_cell_vertical_padding') ||
|
|
this.getError('table_cell_horizontal_padding')
|
|
)
|
|
},
|
|
},
|
|
validations: {
|
|
values: Object.fromEntries(
|
|
Object.entries(minMax).map(([key, limits]) => [
|
|
key,
|
|
{
|
|
required,
|
|
integer,
|
|
minValue: minValue(limits.min),
|
|
maxValue: maxValue(limits.max),
|
|
},
|
|
])
|
|
),
|
|
},
|
|
}
|
|
</script>
|