Rendering
Rendering forms exported by Vueform Builder.
Builder Object
The Builder exports the following object:
js
let builderObject = {
form: {
// form options (including steps, if any)
},
schema: {
// elements
},
theme: {
// theme variables
},
export: {
// builder export settings
},
builder: {
// builder settings
}
}This object can be stored in a database to render later.
form
The form contains options for the <Vueform> component, such as steps, tabs, or endpoint. These options can all be passed to the <Vueform> component using v-bind:
vue
<template>
<Vueform v-bind="builderObject.form" />
</template>schema
The schema contains the form elements, which can be passed directly to the <Vueform> component to render the form using the schema object method:
vue
<template>
<Vueform ... :schema="builderObject.schema" />
</template>theme
The theme contains values for CSS variables in Vueform's theming system and can be applied to the rendered form:
vue
<template>
<Vueform ... class="themed-form" />
</template>
<script setup>
import { computed } from 'vue'
import { camelCase } from 'lodash'
const cssVars = computed(() => {
const theme = builderObject.theme
const cssVars = {}
Object.keys(theme).forEach((key) => {
let value = theme[key]
if (typeof value === 'string' && value.match(/^var\(/)) {
value = theme[value.match(/^var\(--vf-([^\)]*)\)$/)[1]]
}
cssVars[camelCase(key)] = value
})
return cssVars
})
</script>
<style>
.themed-form, .themed-form *, .themed-form :before, .themed-form :after {
--vf-primary: v-bind('cssVars.primary');
--vf-primary-darker: v-bind('cssVars.primaryDarker');
--vf-color-on-primary: v-bind('cssVars.colorOnPrimary');
--vf-danger: v-bind('cssVars.danger');
--vf-danger-lighter: v-bind('cssVars.dangerLighter');
--vf-success: v-bind('cssVars.success');
--vf-success-lighter: v-bind('cssVars.successLighter');
--vf-gray-50: v-bind('cssVars.gray50');
--vf-gray-100: v-bind('cssVars.gray100');
--vf-gray-200: v-bind('cssVars.gray200');
--vf-gray-300: v-bind('cssVars.gray300');
--vf-gray-400: v-bind('cssVars.gray400');
--vf-gray-500: v-bind('cssVars.gray500');
--vf-gray-600: v-bind('cssVars.gray600');
--vf-gray-700: v-bind('cssVars.gray700');
--vf-gray-800: v-bind('cssVars.gray800');
--vf-gray-900: v-bind('cssVars.gray900');
--vf-dark-50: v-bind('cssVars.dark50');
--vf-dark-100: v-bind('cssVars.dark100');
--vf-dark-200: v-bind('cssVars.dark200');
--vf-dark-300: v-bind('cssVars.dark300');
--vf-dark-400: v-bind('cssVars.dark400');
--vf-dark-500: v-bind('cssVars.dark500');
--vf-dark-600: v-bind('cssVars.dark600');
--vf-dark-700: v-bind('cssVars.dark700');
--vf-dark-800: v-bind('cssVars.dark800');
--vf-dark-900: v-bind('cssVars.dark900');
--vf-ring-width: v-bind('cssVars.ringWidth');
--vf-ring-color: v-bind('cssVars.ringColor');
--vf-link-color: v-bind('cssVars.linkColor');
--vf-link-decoration: v-bind('cssVars.linkDecoration');
--vf-font-size: v-bind('cssVars.fontSize');
--vf-font-size-sm: v-bind('cssVars.fontSizeSm');
--vf-font-size-lg: v-bind('cssVars.fontSizeLg');
--vf-font-size-small: v-bind('cssVars.fontSizeSmall');
--vf-font-size-small-sm: v-bind('cssVars.fontSizeSmallSm');
--vf-font-size-small-lg: v-bind('cssVars.fontSizeSmallLg');
--vf-font-size-h1: v-bind('cssVars.fontSizeH1');
--vf-font-size-h1-sm: v-bind('cssVars.fontSizeH1Sm');
--vf-font-size-h1-lg: v-bind('cssVars.fontSizeH1Lg');
--vf-font-size-h2: v-bind('cssVars.fontSizeH2');
--vf-font-size-h2-sm: v-bind('cssVars.fontSizeH2Sm');
--vf-font-size-h2-lg: v-bind('cssVars.fontSizeH2Lg');
--vf-font-size-h3: v-bind('cssVars.fontSizeH3');
--vf-font-size-h3-sm: v-bind('cssVars.fontSizeH3Sm');
--vf-font-size-h3-lg: v-bind('cssVars.fontSizeH3Lg');
--vf-font-size-h4: v-bind('cssVars.fontSizeH4');
--vf-font-size-h4-sm: v-bind('cssVars.fontSizeH4Sm');
--vf-font-size-h4-lg: v-bind('cssVars.fontSizeH4Lg');
--vf-font-size-h1-mobile: v-bind('cssVars.fontSizeH1Mobile');
--vf-font-size-h1-mobile-sm: v-bind('cssVars.fontSizeH1MobileSm');
--vf-font-size-h1-mobile-lg: v-bind('cssVars.fontSizeH1MobileLg');
--vf-font-size-h2-mobile: v-bind('cssVars.fontSizeH2Mobile');
--vf-font-size-h2-mobile-sm: v-bind('cssVars.fontSizeH2MobileSm');
--vf-font-size-h2-mobile-lg: v-bind('cssVars.fontSizeH2MobileLg');
--vf-font-size-h3-mobile: v-bind('cssVars.fontSizeH3Mobile');
--vf-font-size-h3-mobile-sm: v-bind('cssVars.fontSizeH3MobileSm');
--vf-font-size-h3-mobile-lg: v-bind('cssVars.fontSizeH3MobileLg');
--vf-font-size-h4-mobile: v-bind('cssVars.fontSizeH4Mobile');
--vf-font-size-h4-mobile-sm: v-bind('cssVars.fontSizeH4MobileSm');
--vf-font-size-h4-mobile-lg: v-bind('cssVars.fontSizeH4MobileLg');
--vf-font-size-blockquote: v-bind('cssVars.fontSizeBlockquote');
--vf-font-size-blockquote-sm: v-bind('cssVars.fontSizeBlockquoteSm');
--vf-font-size-blockquote-lg: v-bind('cssVars.fontSizeBlockquoteLg');
--vf-line-height: v-bind('cssVars.lineHeight');
--vf-line-height-sm: v-bind('cssVars.lineHeightSm');
--vf-line-height-lg: v-bind('cssVars.lineHeightLg');
--vf-line-height-small: v-bind('cssVars.lineHeightSmall');
--vf-line-height-small-sm: v-bind('cssVars.lineHeightSmallSm');
--vf-line-height-small-lg: v-bind('cssVars.lineHeightSmallLg');
--vf-line-height-headings: v-bind('cssVars.lineHeightHeadings');
--vf-line-height-headings-sm: v-bind('cssVars.lineHeightHeadingsSm');
--vf-line-height-headings-lg: v-bind('cssVars.lineHeightHeadingsLg');
--vf-line-height-blockquote: v-bind('cssVars.lineHeightBlockquote');
--vf-line-height-blockquote-sm: v-bind('cssVars.lineHeightBlockquoteSm');
--vf-line-height-blockquote-lg: v-bind('cssVars.lineHeightBlockquoteLg');
--vf-letter-spacing: v-bind('cssVars.letterSpacing');
--vf-letter-spacing-sm: v-bind('cssVars.letterSpacingSm');
--vf-letter-spacing-lg: v-bind('cssVars.letterSpacingLg');
--vf-letter-spacing-small: v-bind('cssVars.letterSpacingSmall');
--vf-letter-spacing-small-sm: v-bind('cssVars.letterSpacingSmallSm');
--vf-letter-spacing-small-lg: v-bind('cssVars.letterSpacingSmallLg');
--vf-letter-spacing-headings: v-bind('cssVars.letterSpacingHeadings');
--vf-letter-spacing-headings-sm: v-bind('cssVars.letterSpacingHeadingsSm');
--vf-letter-spacing-headings-lg: v-bind('cssVars.letterSpacingHeadingsLg');
--vf-letter-spacing-blockquote: v-bind('cssVars.letterSpacingBlockquote');
--vf-letter-spacing-blockquote-sm: v-bind('cssVars.letterSpacingBlockquoteSm');
--vf-letter-spacing-blockquote-lg: v-bind('cssVars.letterSpacingBlockquoteLg');
--vf-gutter: v-bind('cssVars.gutter');
--vf-gutter-sm: v-bind('cssVars.gutterSm');
--vf-gutter-lg: v-bind('cssVars.gutterLg');
--vf-min-height-input: v-bind('cssVars.minHeightInput');
--vf-min-height-input-sm: v-bind('cssVars.minHeightInputSm');
--vf-min-height-input-lg: v-bind('cssVars.minHeightInputLg');
--vf-py-input: v-bind('cssVars.pyInput');
--vf-py-input-sm: v-bind('cssVars.pyInputSm');
--vf-py-input-lg: v-bind('cssVars.pyInputLg');
--vf-px-input: v-bind('cssVars.pxInput');
--vf-px-input-sm: v-bind('cssVars.pxInputSm');
--vf-px-input-lg: v-bind('cssVars.pxInputLg');
--vf-py-btn: v-bind('cssVars.pyBtn');
--vf-py-btn-sm: v-bind('cssVars.pyBtnSm');
--vf-py-btn-lg: v-bind('cssVars.pyBtnLg');
--vf-px-btn: v-bind('cssVars.pxBtn');
--vf-px-btn-sm: v-bind('cssVars.pxBtnSm');
--vf-px-btn-lg: v-bind('cssVars.pxBtnLg');
--vf-py-btn-small: v-bind('cssVars.pyBtnSmall');
--vf-py-btn-small-sm: v-bind('cssVars.pyBtnSmallSm');
--vf-py-btn-small-lg: v-bind('cssVars.pyBtnSmallLg');
--vf-px-btn-small: v-bind('cssVars.pxBtnSmall');
--vf-px-btn-small-sm: v-bind('cssVars.pxBtnSmallSm');
--vf-px-btn-small-lg: v-bind('cssVars.pxBtnSmallLg');
--vf-py-group-tabs: v-bind('cssVars.pyGroupTabs');
--vf-py-group-tabs-sm: v-bind('cssVars.pyGroupTabsSm');
--vf-py-group-tabs-lg: v-bind('cssVars.pyGroupTabsLg');
--vf-px-group-tabs: v-bind('cssVars.pxGroupTabs');
--vf-px-group-tabs-sm: v-bind('cssVars.pxGroupTabsSm');
--vf-px-group-tabs-lg: v-bind('cssVars.pxGroupTabsLg');
--vf-py-group-blocks: v-bind('cssVars.pyGroupBlocks');
--vf-py-group-blocks-sm: v-bind('cssVars.pyGroupBlocksSm');
--vf-py-group-blocks-lg: v-bind('cssVars.pyGroupBlocksLg');
--vf-px-group-blocks: v-bind('cssVars.pxGroupBlocks');
--vf-px-group-blocks-sm: v-bind('cssVars.pxGroupBlocksSm');
--vf-px-group-blocks-lg: v-bind('cssVars.pxGroupBlocksLg');
--vf-py-tag: v-bind('cssVars.pyTag');
--vf-py-tag-sm: v-bind('cssVars.pyTagSm');
--vf-py-tag-lg: v-bind('cssVars.pyTagLg');
--vf-px-tag: v-bind('cssVars.pxTag');
--vf-px-tag-sm: v-bind('cssVars.pxTagSm');
--vf-px-tag-lg: v-bind('cssVars.pxTagLg');
--vf-py-slider-tooltip: v-bind('cssVars.pySliderTooltip');
--vf-py-slider-tooltip-sm: v-bind('cssVars.pySliderTooltipSm');
--vf-py-slider-tooltip-lg: v-bind('cssVars.pySliderTooltipLg');
--vf-px-slider-tooltip: v-bind('cssVars.pxSliderTooltip');
--vf-px-slider-tooltip-sm: v-bind('cssVars.pxSliderTooltipSm');
--vf-px-slider-tooltip-lg: v-bind('cssVars.pxSliderTooltipLg');
--vf-py-blockquote: v-bind('cssVars.pyBlockquote');
--vf-py-blockquote-sm: v-bind('cssVars.pyBlockquoteSm');
--vf-py-blockquote-lg: v-bind('cssVars.pyBlockquoteLg');
--vf-px-blockquote: v-bind('cssVars.pxBlockquote');
--vf-px-blockquote-sm: v-bind('cssVars.pxBlockquoteSm');
--vf-px-blockquote-lg: v-bind('cssVars.pxBlockquoteLg');
--vf-py-hr: v-bind('cssVars.pyHr');
--vf-space-addon: v-bind('cssVars.spaceAddon');
--vf-space-addon-sm: v-bind('cssVars.spaceAddonSm');
--vf-space-addon-lg: v-bind('cssVars.spaceAddonLg');
--vf-space-checkbox: v-bind('cssVars.spaceCheckbox');
--vf-space-checkbox-sm: v-bind('cssVars.spaceCheckboxSm');
--vf-space-checkbox-lg: v-bind('cssVars.spaceCheckboxLg');
--vf-space-tags: v-bind('cssVars.spaceTags');
--vf-space-tags-sm: v-bind('cssVars.spaceTagsSm');
--vf-space-tags-lg: v-bind('cssVars.spaceTagsLg');
--vf-space-static-tag-1: v-bind('cssVars.spaceStaticTag1');
--vf-space-static-tag-2: v-bind('cssVars.spaceStaticTag2');
--vf-space-static-tag-3: v-bind('cssVars.spaceStaticTag3');
--vf-floating-top: v-bind('cssVars.floatingTop');
--vf-floating-top-sm: v-bind('cssVars.floatingTopSm');
--vf-floating-top-lg: v-bind('cssVars.floatingTopLg');
--vf-bg-input: v-bind('cssVars.bgInput');
--vf-bg-input-hover: v-bind('cssVars.bgInputHover');
--vf-bg-input-focus: v-bind('cssVars.bgInputFocus');
--vf-bg-input-danger: v-bind('cssVars.bgInputDanger');
--vf-bg-input-success: v-bind('cssVars.bgInputSuccess');
--vf-bg-checkbox: v-bind('cssVars.bgCheckbox');
--vf-bg-checkbox-hover: v-bind('cssVars.bgCheckboxHover');
--vf-bg-checkbox-focus: v-bind('cssVars.bgCheckboxFocus');
--vf-bg-checkbox-danger: v-bind('cssVars.bgCheckboxDanger');
--vf-bg-checkbox-success: v-bind('cssVars.bgCheckboxSuccess');
--vf-bg-disabled: v-bind('cssVars.bgDisabled');
--vf-bg-selected: v-bind('cssVars.bgSelected');
--vf-bg-passive: v-bind('cssVars.bgPassive');
--vf-bg-icon: v-bind('cssVars.bgIcon');
--vf-bg-danger: v-bind('cssVars.bgDanger');
--vf-bg-success: v-bind('cssVars.bgSuccess');
--vf-bg-tag: v-bind('cssVars.bgTag');
--vf-bg-slider-handle: v-bind('cssVars.bgSliderHandle');
--vf-bg-toggle-handle: v-bind('cssVars.bgToggleHandle');
--vf-bg-date-head: v-bind('cssVars.bgDateHead');
--vf-bg-addon: v-bind('cssVars.bgAddon');
--vf-bg-btn: v-bind('cssVars.bgBtn');
--vf-bg-btn-danger: v-bind('cssVars.bgBtnDanger');
--vf-bg-btn-secondary: v-bind('cssVars.bgBtnSecondary');
--vf-bg-table-header: v-bind('cssVars.bgTableHeader');
--vf-color-input: v-bind('cssVars.colorInput');
--vf-color-input-hover: v-bind('cssVars.colorInputHover');
--vf-color-input-focus: v-bind('cssVars.colorInputFocus');
--vf-color-input-danger: v-bind('cssVars.colorInputDanger');
--vf-color-input-success: v-bind('cssVars.colorInputSuccess');
--vf-color-disabled: v-bind('cssVars.colorDisabled');
--vf-color-placeholder: v-bind('cssVars.colorPlaceholder');
--vf-color-passive: v-bind('cssVars.colorPassive');
--vf-color-muted: v-bind('cssVars.colorMuted');
--vf-color-floating: v-bind('cssVars.colorFloating');
--vf-color-floating-focus: v-bind('cssVars.colorFloatingFocus');
--vf-color-floating-success: v-bind('cssVars.colorFloatingSuccess');
--vf-color-floating-danger: v-bind('cssVars.colorFloatingDanger');
--vf-color-danger: v-bind('cssVars.colorDanger');
--vf-color-success: v-bind('cssVars.colorSuccess');
--vf-color-tag: v-bind('cssVars.colorTag');
--vf-color-addon: v-bind('cssVars.colorAddon');
--vf-color-date-head: v-bind('cssVars.colorDateHead');
--vf-color-btn: v-bind('cssVars.colorBtn');
--vf-color-btn-danger: v-bind('cssVars.colorBtnDanger');
--vf-color-btn-secondary: v-bind('cssVars.colorBtnSecondary');
--vf-color-table-header: v-bind('cssVars.colorTableHeader');
--vf-border-color-input: v-bind('cssVars.borderColorInput');
--vf-border-color-input-hover: v-bind('cssVars.borderColorInputHover');
--vf-border-color-input-focus: v-bind('cssVars.borderColorInputFocus');
--vf-border-color-input-danger: v-bind('cssVars.borderColorInputDanger');
--vf-border-color-input-success: v-bind('cssVars.borderColorInputSuccess');
--vf-border-color-checkbox: v-bind('cssVars.borderColorCheckbox');
--vf-border-color-checkbox-focus: v-bind('cssVars.borderColorCheckboxFocus');
--vf-border-color-checkbox-hover: v-bind('cssVars.borderColorCheckboxHover');
--vf-border-color-checkbox-danger: v-bind('cssVars.borderColorCheckboxDanger');
--vf-border-color-checkbox-success: v-bind('cssVars.borderColorCheckboxSuccess');
--vf-border-color-checked: v-bind('cssVars.borderColorChecked');
--vf-border-color-passive: v-bind('cssVars.borderColorPassive');
--vf-border-color-slider-tooltip: v-bind('cssVars.borderColorSliderTooltip');
--vf-border-color-tag: v-bind('cssVars.borderColorTag');
--vf-border-color-btn: v-bind('cssVars.borderColorBtn');
--vf-border-color-btn-danger: v-bind('cssVars.borderColorBtnDanger');
--vf-border-color-btn-secondary: v-bind('cssVars.borderColorBtnSecondary');
--vf-border-color-blockquote: v-bind('cssVars.borderColorBlockquote');
--vf-border-color-hr: v-bind('cssVars.borderColorHr');
--vf-border-color-signature-hr: v-bind('cssVars.borderColorSignatureHr');
--vf-border-color-table: v-bind('cssVars.borderColorTable');
--vf-border-width-input-t: v-bind('cssVars.borderWidthInputT');
--vf-border-width-input-r: v-bind('cssVars.borderWidthInputR');
--vf-border-width-input-b: v-bind('cssVars.borderWidthInputB');
--vf-border-width-input-l: v-bind('cssVars.borderWidthInputL');
--vf-border-width-radio-t: v-bind('cssVars.borderWidthRadioT');
--vf-border-width-radio-r: v-bind('cssVars.borderWidthRadioR');
--vf-border-width-radio-b: v-bind('cssVars.borderWidthRadioB');
--vf-border-width-radio-l: v-bind('cssVars.borderWidthRadioL');
--vf-border-width-checkbox-t: v-bind('cssVars.borderWidthCheckboxT');
--vf-border-width-checkbox-r: v-bind('cssVars.borderWidthCheckboxR');
--vf-border-width-checkbox-b: v-bind('cssVars.borderWidthCheckboxB');
--vf-border-width-checkbox-l: v-bind('cssVars.borderWidthCheckboxL');
--vf-border-width-dropdown: v-bind('cssVars.borderWidthDropdown');
--vf-border-width-btn: v-bind('cssVars.borderWidthBtn');
--vf-border-width-toggle: v-bind('cssVars.borderWidthToggle');
--vf-border-width-tag: v-bind('cssVars.borderWidthTag');
--vf-border-width-blockquote: v-bind('cssVars.borderWidthBlockquote');
--vf-border-width-table: v-bind('cssVars.borderWidthTable');
--vf-shadow-input: v-bind('cssVars.shadowInput');
--vf-shadow-input-hover: v-bind('cssVars.shadowInputHover');
--vf-shadow-input-focus: v-bind('cssVars.shadowInputFocus');
--vf-shadow-handles: v-bind('cssVars.shadowHandles');
--vf-shadow-handles-hover: v-bind('cssVars.shadowHandlesHover');
--vf-shadow-handles-focus: v-bind('cssVars.shadowHandlesFocus');
--vf-shadow-btn: v-bind('cssVars.shadowBtn');
--vf-shadow-dropdown: v-bind('cssVars.shadowDropdown');
--vf-radius-input: v-bind('cssVars.radiusInput');
--vf-radius-input-sm: v-bind('cssVars.radiusInputSm');
--vf-radius-input-lg: v-bind('cssVars.radiusInputLg');
--vf-radius-btn: v-bind('cssVars.radiusBtn');
--vf-radius-btn-sm: v-bind('cssVars.radiusBtnSm');
--vf-radius-btn-lg: v-bind('cssVars.radiusBtnLg');
--vf-radius-small: v-bind('cssVars.radiusSmall');
--vf-radius-small-sm: v-bind('cssVars.radiusSmallSm');
--vf-radius-small-lg: v-bind('cssVars.radiusSmallLg');
--vf-radius-large: v-bind('cssVars.radiusLarge');
--vf-radius-large-sm: v-bind('cssVars.radiusLargeSm');
--vf-radius-large-lg: v-bind('cssVars.radiusLargeLg');
--vf-radius-tag: v-bind('cssVars.radiusTag');
--vf-radius-tag-sm: v-bind('cssVars.radiusTagSm');
--vf-radius-tag-lg: v-bind('cssVars.radiusTagLg');
--vf-radius-checkbox: v-bind('cssVars.radiusCheckbox');
--vf-radius-checkbox-sm: v-bind('cssVars.radiusCheckboxSm');
--vf-radius-checkbox-lg: v-bind('cssVars.radiusCheckboxLg');
--vf-radius-slider: v-bind('cssVars.radiusSlider');
--vf-radius-slider-sm: v-bind('cssVars.radiusSliderSm');
--vf-radius-slider-lg: v-bind('cssVars.radiusSliderLg');
--vf-radius-image: v-bind('cssVars.radiusImage');
--vf-radius-image-sm: v-bind('cssVars.radiusImageSm');
--vf-radius-image-lg: v-bind('cssVars.radiusImageLg');
--vf-radius-gallery: v-bind('cssVars.radiusGallery');
--vf-radius-gallery-sm: v-bind('cssVars.radiusGallerySm');
--vf-radius-gallery-lg: v-bind('cssVars.radiusGalleryLg');
--vf-checkbox-size: v-bind('cssVars.checkboxSize');
--vf-checkbox-size-sm: v-bind('cssVars.checkboxSizeSm');
--vf-checkbox-size-lg: v-bind('cssVars.checkboxSizeLg');
--vf-gallery-size: v-bind('cssVars.gallerySize');
--vf-gallery-size-sm: v-bind('cssVars.gallerySizeSm');
--vf-gallery-size-lg: v-bind('cssVars.gallerySizeLg');
--vf-toggle-width: v-bind('cssVars.toggleWidth');
--vf-toggle-width-sm: v-bind('cssVars.toggleWidthSm');
--vf-toggle-width-lg: v-bind('cssVars.toggleWidthLg');
--vf-toggle-height: v-bind('cssVars.toggleHeight');
--vf-toggle-height-sm: v-bind('cssVars.toggleHeightSm');
--vf-toggle-height-lg: v-bind('cssVars.toggleHeightLg');
--vf-slider-height: v-bind('cssVars.sliderHeight');
--vf-slider-height-sm: v-bind('cssVars.sliderHeightSm');
--vf-slider-height-lg: v-bind('cssVars.sliderHeightLg');
--vf-slider-height-vertical: v-bind('cssVars.sliderHeightVertical');
--vf-slider-height-vertical-sm: v-bind('cssVars.sliderHeightVerticalSm');
--vf-slider-height-vertical-lg: v-bind('cssVars.sliderHeightVerticalLg');
--vf-slider-handle-size: v-bind('cssVars.sliderHandleSize');
--vf-slider-handle-size-sm: v-bind('cssVars.sliderHandleSizeSm');
--vf-slider-handle-size-lg: v-bind('cssVars.sliderHandleSizeLg');
--vf-slider-tooltip-distance: v-bind('cssVars.sliderTooltipDistance');
--vf-slider-tooltip-distance-sm: v-bind('cssVars.sliderTooltipDistanceSm');
--vf-slider-tooltip-distance-lg: v-bind('cssVars.sliderTooltipDistanceLg');
--vf-slider-tooltip-arrow-size: v-bind('cssVars.sliderTooltipArrowSize');
--vf-slider-tooltip-arrow-size-sm: v-bind('cssVars.sliderTooltipArrowSizeSm');
--vf-slider-tooltip-arrow-size-lg: v-bind('cssVars.sliderTooltipArrowSizeLg');
}
</style>If theme is not used, the project's default theme will be applied to the form.
export
The export contains options related to Builder export settings, which are not relevant for rendering.
builder
The builder contains options for the Builder, such as form name and preview width, which are not relevant for rendering.
