diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8ee5b1f --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +.vscode +.DS_Store +node_modules/ +coverage/ +dist/ +.npmrc \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 656b07a..a8bd0fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +[//]: # (Don't use ) + +## v1.1.0 + +> `2023-09-17` + +### 🎉 Feature +- Remote API key validation as primary domain validation method. +- Removed `node-sass` dependency. + ## v1.0.17 > `2023-04-07` @@ -234,19 +244,19 @@ > `2022-07-29` ### 🎉 Feature - - Added config options: `search`, `views`, `devices`, `darkMode`, `toggleLeft`, `toggleRight`, `clear`, `save`, `undo`, `modelPreview`, `leftPanel`, `rightPanel`, `themes`, `formProps`, `themeProps`, `exportProps`, `categories`, `elements` +- Added config options: `search`, `views`, `devices`, `darkMode`, `toggleLeft`, `toggleRight`, `clear`, `save`, `undo`, `modelPreview`, `leftPanel`, `rightPanel`, `themes`, `formProps`, `themeProps`, `exportProps`, `categories`, `elements` ### ⚠️ Breaking changes - - Classes renamed: - - `vfb-elements-search-container` > `vfb-elements-top-container` - - `vfb-elements-search-wrapper` > `vfb-elements-search-container` - - `vfb-elements-wrapper-with-search` > `vfb-elements-wrapper-with-keyword` - - `vfb-elements-wrapper-without-search` > `vfb-elements-wrapper-without-keyword` - - `vfb-form-settings-*` > `vfb-form-panel-*` +- Classes renamed: +- `vfb-elements-search-container` > `vfb-elements-top-container` +- `vfb-elements-search-wrapper` > `vfb-elements-search-container` +- `vfb-elements-wrapper-with-search` > `vfb-elements-wrapper-with-keyword` +- `vfb-elements-wrapper-without-search` > `vfb-elements-wrapper-without-keyword` +- `vfb-form-settings-*` > `vfb-form-panel-*` ## v1.0.1 > `2022-07-25` ### 🎉 Feature - - Class name based styles. \ No newline at end of file +- Class name based styles. \ No newline at end of file diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..63534be --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,2 @@ +License terms can be found at: +https://vueform.com/license-agreement \ No newline at end of file diff --git a/README.md b/README.md index 67a758c..f10ba49 100644 --- a/README.md +++ b/README.md @@ -1,8982 +1,4 @@ -# Vueform Builder Docs +# Welcome to Vueform Builder -Documentation for Vueform Builder. Vueform Builder requires a separate license from Vueform - [learn more](https://vueform.com/builder). - -# Requirements - -- Vue.js 3.0.0+ -- Tailwind CSS 3.0.0+ - -# Manual Installation - -#### 1. Install Vueform in your project - -Head to our [Installation guide](https://vueform.com/docs/1.x/installation#installation) and install Vueform in your project with `tailwind` theme. - -#### 2. Add Vueform Builder - -```bash -npm i git+https://github.com/vueform/vueform-builder-{YOUR_ID}.git -``` - -Vueform Builder will be provided to you via a private GitHub repo. If you're installing trial replace `{YOUR_ID}` with `trial`. If you don't have access, [read this first](https://vueform.com/builder). - -#### 3. Create `builder.config.js` - -Create `builder.config.js` in your project root: - -```js -// builder.config.js - -export default { - // config here -} -``` - -#### 4. Import `@vueform/builder` - -Import `@vueform/builder` and apply it as a Vue plugin after Vueform: - -```js -import Vueform from '@vueform/vueform/plugin' -import vueformConfig from './path/to/vueform.config.js' -// ... -import VueformBuilder from '@vueform/builder' -import builderConfig from './path/to/builder.config.js' -// ... - -app.use(Vueform, vueformConfig) -app.use(VueformBuilder, builderConfig) -``` - -#### 5. Add styles - -Add Vueform Builder styles to your main stylesheet: - -```css -@import "@vueform/builder/index.css"; -/* or */ -/* @import "./path/to/node_modules/@vueform/builder/index.css"; */ -``` - -#### 6. Update `tailwind.config.js` - -Add the builder files to `content` and apply the builder's plugin: - -```js -// tailwind.config.js - -module.exports = { - content: [ - // ... - './node_modules/@vueform/builder/**/*.js', - './node_modules/@vueform/builder/**/*.css', - ], - darkMode: 'class', - // ... - plugins: [ - // ... - require('@vueform/builder/tailwind'), - ] -} -``` - -> Make sure your Tailwind CSS is configured properly, eg. project & Vueform files are added to `content`. Vueform requires Tailwind's `preflight` so that shouldn't be disabled. - -#### 7. Update `vueform.config.js` - -Apply the builder's plugin to Vueform config: - -```js -// vueform.config.js - -// ... -import builder from '@vueform/builder/plugin' - -export default { - // ... - plugins: [ - // ... - builder, - ] -} - -``` - -#### 8. Add `` to your app - -```vue - -``` - -# Saving - -To save the output of the form you can subscribe to `@save` event, which is triggered anytime the form settings are changed: - -```vue - - - -``` - -The `@save` event has two params: -- **builderObject** `{object}`
the object that should be saved to db (and can be loaded) -- **history** `{array}`
he array of previous builderObjects - -The history object only contains the last `n` elements which is possible to store given the local storage limit of 5 MB in most cases (enough for about 100 records for an average form). - -## Manual Saving - -The current state of the form is always available in local storage as `vueform-builder` and `vueform-history`. - -To save the form anytime just reach for these values: - -```js -const builderObject = localStorage.getItem('vueform-builder') -const history = localStorage.getItem('vueform-history') -``` - -# Loading - -Once a form's JSON (& history) are saved into the database they can be loaded back using Vueform Builder's `.load()` method: - -```vue - - - -``` - -# Configuration - -Vueform Builder can be configured via `builder.config.js`: - -```js -// builder.config.js - -export default { - // config options -} -``` - -## Settings - -The following options are for configuring different aspects of the builder's layout. - -```js -// builder.config.js - -export default { - storagePrefix: null, // prefixes localStorage keys - delay: 300, // the ms to wait between last text input and preview rerender, `false` turns it off (not recommended) - autosave: 1000, // the ms to wait between last change and saving data to local storage & triggering `@save` event - history: true, // whether it should store history - maxHistory: -1, // the maximum number of history items to store, `-1` for unlimited - longFieldNames: false, // whether conditional field names should be full path or name only -} -``` - -## Layout - -The following options are for configuring different aspects of the builder's layout. - -```js -// builder.config.js - -export default { - search: true, - views: ['editor', 'preview', 'code'], - devices: ['tablet', 'desktop'], // set to `false` to hide device selector and disable responsive column resizing - breakpoints: { - tablet: { - breakpoint: 'sm', - viewportSize: 640, // used only to inform users about the viewport size related to `tablet` view - }, - desktop: { - breakpoint: 'lg', - viewportSize: 1024, // used only to inform users about the viewport size related to `desktop` view - }, - }, // the breakpoints tied to devices - darkMode: ['light', 'dark'], - toggleLeft: true, - toggleRight: true, - clear: true, - save: true, - undo: true, - modelPreview: true, - leftPanel: ['elements', 'tree'], - rightPanel: ['form', 'theme', 'export', 'settings', 'model'], - defaultWidth: 432, -} -``` - -#### Changing Device Breakpoints - -Vueform is using a mobile-first breakpoint system when it comes to resizing columns on different devices and viewport sizes. The default breakpoints are based on Tailwind CSS: https://tailwindcss.com/docs/responsive-design - -By default the `tablet` breakpoint will use `sm` and `desktop` will use `lg`, which means that column sizing made under `tablet` view will have effect on `sm` breakpoint and up and the same is true for `desktop` with `lg`. If you want to change these to eg. `tablet` -> `md` first you need to update the `breakpoints.tablet.breakpoint` to `md` in the config. Second you need to include the `scss` version of Vueform Builder's styles and set `$vfb-tablet-breakpoint` to `md` as well. Here's an example: - -```css -/* Your original CSS import */ - -@import "@vueform/builder/index.css"; -``` - -Replace it with the following in a file where you can import `scss` and make sure you have an scss loader: - -```scss -/* Using SCSS import instead of CSS with a custom variable */ - -$vfb-tablet-breakpoint: 'md'; - -@import "@vueform/builder/scss/index.scss"; -``` - -If you want to change the breakpoint related to `desktop`, you can use `$vfb-desktop-breakpoint` variable. - -## Elements - -The following options configure the available elements & element categories. - -```js -// builder.config.js - -export default { - // Element categories (set to `false` to hide) - categories: [ - { - label: 'Fields', - key: 'fields', - }, - { - label: 'Static', - key: 'static', - }, - { - label: 'Structure', - key: 'structure', - }, - ], - - // List of element types to include - elements: [ - 'text', - 'number', - 'email', - 'phone', - 'password', - 'url', - 'location', - 'textarea', - 'editor', - 'checkbox', - 'checkboxgroup', - 'checkboxBlocks', - 'checkboxTabs', - 'radio', - 'radiogroup', - 'radioBlocks', - 'radioTabs', - 'toggle', - 'select', - 'multiselect', - 'tags', - 'date', - 'datetime', - 'time', - 'dates', - 'dateRange', - 'slider', - 'rangeSlider', - 'verticalSlider', - 'file', - 'multifile', - 'image', - 'multiImage', - 'gallery', - 'hidden', - 'submit', - 'reset', - 'primaryButton', - 'secondaryButton', - 'dangerButton', - 'h1', - 'h2', - 'h3', - 'h4', - 'p', - 'quote', - 'img', - 'link', - 'divider', - 'html', - 'tabs', - 'steps', - 'container', - 'container2', - 'container3', - 'container4', - 'list', - 'nestedList', - ], - - // List of element types to exclude - excludeElements: [], -} -``` - -## Form settings panel - -The following options can be used to disable form settings config options. - -```js -// builder.config.js - -export default { - form: { - props: { - properties: { - name: true, - width: true, - nesting: true, - }, - submission: { - endpoint: true, - formKey: true, - }, - validation: { - live: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - forceLabels: true, - floatPlaceholders: true, - displayErrors: true, - displayMessages: true, - }, - }, - }, -} -``` - -## Theme settings panel - -The following options can be used to disable theme config options. - -```js -// builder.config.js - -export default { - theme: { - props: { - theme: { - theme: true, - }, - tools: { - tools: true, - }, - colors: { - primary: true, - 'primary-darker': true, - 'color-on-primary': true, - danger: true, - 'danger-lighter': true, - success: true, - 'success-lighter': true, - 'gray-50': true, - 'gray-100': true, - 'gray-200': true, - 'gray-300': true, - 'gray-400': true, - 'gray-500': true, - 'gray-600': true, - 'gray-700': true, - 'gray-800': true, - 'gray-900': true, - }, - fonts: { - 'font-size': true, - 'line-height': true, - 'letter-spacing': true, - 'font-size-small': true, - 'line-height-small': true, - 'letter-spacing-small': true, - }, - spaces: { - gutter: true, - 'color-muted': true, - 'color-passive': true, - 'bg-passive': true, - 'border-color-passive': true, - 'bg-selected': true, - 'radius-small': true, - 'shadow-handles': true, - 'shadow-handles-hover': true, - 'shadow-handles-focus': true, - }, - inputs: { - 'min-height-input': true, - 'ring-width': true, - 'ring-color': true, - 'py-input': true, - 'px-input': true, - 'border-width-input': true, - 'radius-input': true, - 'radius-large': true, - 'border-color-input': true, - 'color-input': true, - 'bg-icon': true, - 'color-floating': true, - 'bg-input': true, - 'shadow-input': true, - hover: true, - 'color-input-hover': true, - 'bg-input-hover': true, - 'border-color-input-hover': true, - 'shadow-input-hover': true, - focus: true, - 'color-input-focus': true, - 'color-floating-focus': true, - 'bg-input-focus': true, - 'border-color-input-focus': true, - 'shadow-input-focus': true, - danger: true, - 'color-input-danger': true, - 'color-floating-danger': true, - 'bg-input-danger': true, - 'border-color-input-danger': true, - success: true, - 'color-input-success': true, - 'color-floating-success': true, - 'bg-input-success': true, - 'border-color-input-success': true, - disabled: true, - 'color-disabled': true, - 'bg-disabled': true, - 'floating-top': true, - 'space-addon': true, - 'bg-addon': true, - 'color-addon': true, - }, - select: { - dropdown: true, - 'border-width-dropdown': true, - 'shadow-dropdown': true, - }, - tags: { - 'py-tag': true, - 'px-tag': true, - 'space-tags': true, - 'border-width-tag': true, - 'radius-tag': true, - 'color-tag': true, - 'bg-tag': true, - 'border-color-tag': true, - }, - datepicker: { - 'color-date-head': true, - 'bg-date-head': true, - }, - checkboxes: { - 'checkbox-size': true, - 'space-checkbox': true, - 'border-color-checked': true, - radio: true, - 'border-width-radio': true, - checkbox: true, - 'border-width-checkbox': true, - 'radius-checkbox': true, - tabs: true, - 'py-group-tabs': true, - 'px-group-tabs': true, - blocks: true, - 'py-group-blocks': true, - 'px-group-blocks': true, - }, - slider: { - 'slider-height': true, - 'slider-height-vertical': true, - 'radius-slider': true, - handle: true, - 'slider-handle-size': true, - 'bg-slider-handle': true, - tooltip: true, - 'py-slider-tooltip': true, - 'px-slider-tooltip': true, - 'slider-tooltip-distance': true, - 'slider-tooltip-arrow-size': true, - 'border-color-slider-tooltip': true, - }, - toggle: { - 'toggle-width': true, - 'toggle-height': true, - 'border-width-toggle': true, - handle: true, - 'bg-toggle-handle': true, - }, - images: { - image: true, - 'radius-image': true, - gallery: true, - 'gallery-size': true, - 'radius-gallery': true, - }, - buttons: { - 'py-btn': true, - 'px-btn': true, - 'small-buttons': true, - 'py-btn-small': true, - 'px-btn-small': true, - 'border-color-btn': true, - 'border-width-btn': true, - 'radius-btn': true, - 'color-btn': true, - 'bg-btn': true, - 'shadow-btn': true, - secondary: true, - 'color-btn-secondary': true, - 'bg-btn-secondary': true, - 'border-color-btn-secondary': true, - danger: true, - 'color-btn-danger': true, - 'bg-btn-danger': true, - 'border-color-btn-danger': true, - }, - }, - }, -} -``` - -## Export settings panel - -The following options can be used to disable export config options. - -```js -// builder.config.js - -export default { - export: { - props: { - export: { - output: true, - api: true, - theme: true, - download: true, - }, - }, - }, -} -``` - -## Element settings panel - -Element settings can be disabled for different elements under `element.props`. This object has an item for each element type and a special one, called `default`. - -```js -// builder.config.js - -export default { - element: { - props: { - // Disables placeholder options for each element - default: { - properties: { - placeholder: false, - }, - decorators: { - addons: false, - before: false, - between: false, - after: false, - tooltip: false, - description: false, - }, - // ... - }, - - // ... - }, - }, -} -``` - -The `default` contains all the options of all the elements and can be used to disable properties globally, without having to go through each element and eg. disabling conditions for each. - -When disabling `default` options you have to explicitly disable options and **you can't disable option groups**: - -```js -// builder.config.js - -export default { - element: { - props: { - - // THIS WILL NOT WORK - default: { - properties: false - }, - - // THIS WILL WORK - default: { - properties: { - inputType: false, - label: false, - tooltip: false, - placeholder: false, - description: false, - meta: false, - } - }, - }, - }, -} -``` - -The named element sections (eg. `text`, `textarea` or `select`, etc.) contain configuration options for only that specific element. These can be used to disable config options for certain elements only and to override `default`. - -```js -// builder.config.js - -export default { - element: { - props: { - // Disables placeholder options for all elements - default: { - properties: { - placeholder: false, - }, - // ... - }, - - // Enables back placeholder options for `select` only - select: { - properties: { - placeholder: true, - }, - // ... - }, - - // ... - }, - }, -} -``` - -The only config you shouldn't disable ever is the `properties.type`. This is a core field that needs to be included in each element config panels. - -We can disable options groups or single options for elements: - -```js -// builder.config.js - -export default { - element: { - props: { - - // THIS WILL WORK - text: { - properties: false - }, - - // THIS WILL ALSO WORK - text: { - properties: { - inputType: false, - label: false, - tooltip: false, - placeholder: false, - description: false, - } - }, - }, - }, -} -``` - -Certain configuration options are broken down further into "sub-options", enabling to turn off features within configuration groups, eg. `validation`: - -```js -// builder.config.js - -export default { - element: { - props: { - default: { - validation: { - // Turn off validation feature - // completely for each element - validation: false, - - // Turn off only "min", "max" and - // "size" validation rules for each - // element that have them - validation: { - min: false, - max: false, - size: false, - // ... - }, - } - }, - // ... - }, - }, -} -``` - -Here's the complete config for element props: - -```js -// builder.config.js - -export default { - element: { - props: { - default: { - properties: { - type: true, - name: true, - inputType: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - meta: true, - }, - data: { - default: true, - submit: true, - items: { - list: true, - json: true, - endpoint: true, - }, - object: true, - nested: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - tooltip: true, - description: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - view: { - tabs: true, - blocks: true, - }, - }, - validation: { - fieldName: true, - validation: { - accepted: true, - active_url: true, - after: true, - after_or_equal: true, - alpha: true, - alpha_dash: true, - alpha_num: true, - array: true, - before: true, - before_or_equal: true, - boolean: true, - date: true, - date_equals: true, - date_format: true, - different: true, - digits: true, - digits_between: true, - dimensions: true, - width: true, - height: true, - minWidth: true, - minHeight: true, - maxWidth: true, - maxHeight: true, - ratio: true, - distinct: true, - email: true, - exists: true, - file: true, - gt: true, - gte: true, - image: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv4: true, - ipv6: true, - json: true, - lt: true, - lte: true, - max: true, - mimetypes: true, - mimes: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - fileRules: { - min: true, - max: true, - mimes: true, - extensions: true, - dimensions: true, - width: true, - height: true, - minWidth: true, - minHeight: true, - maxWidth: true, - maxHeight: true, - ratio: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - autocomplete: true, - attrs: true, - }, - options: { - autogrow: true, - rows: true, - endpoint: { - method: true, - }, - accept: { - mimes: true, - extensions: true, - }, - tools: true, - text: true, - boolValue: true, - radio: true, - labels: true, - native: true, - search: { - strict: true, - trackBy: true, - inputType: true, - autocomplete: true, - }, - create: { - append: true, - addOn: true, - }, - behavior: { - deselect: true, - clear: true, - closeOnSelect: true, - }, - ui: { - caret: true, - truncate: true, - openDirection: true, - limit: true, - }, - noOptions: true, - noResults: true, - max: true, - multipleLabel: true, - format: { - display: true, - value: true, - load: true, - }, - restrictions: { - min: true, - max: true, - disables: true, - }, - hour24: true, - seconds: true, - mode: true, - min: true, - step: true, - orientation: true, - direction: true, - tooltips: { - merge: true, - show: true, - position: true, - }, - tooltipFormat: true, - autoUpload: true, - dragAndDrop: true, - softRemove: true, - clickable: true, - urls: { - click: true, - preview: true, - }, - endpoints: { - uploadTemp: true, - uploadTempMethod: true, - removeTemp: true, - removeTempMethod: true, - remove: true, - removeMethod: true, - }, - params: true, - controls: { - add: true, - remove: true, - sort: true, - }, - store: { - object: true, - file: true, - order: true, - }, - buttonLabel: true, - buttonType: true, - submits: true, - resets: true, - href: true, - target: true, - content: true, - initial: true, - addText: true, - storeOrder: true, - }, - }, - text: { - properties: { - type: true, - name: true, - inputType: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - active_url: true, - after: true, - after_or_equal: true, - alpha: true, - alpha_dash: true, - alpha_num: true, - before: true, - before_or_equal: true, - date: true, - date_equals: true, - date_format: true, - different: true, - digits: true, - digits_between: true, - email: true, - exists: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv4: true, - ipv6: true, - json: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - autocomplete: true, - attrs: true, - }, - }, - number: { - properties: { - type: true, - name: true, - inputType: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - active_url: true, - after: true, - after_or_equal: true, - alpha: true, - alpha_dash: true, - alpha_num: true, - before: true, - before_or_equal: true, - date: true, - date_equals: true, - date_format: true, - different: true, - digits: true, - digits_between: true, - email: true, - exists: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv4: true, - ipv6: true, - json: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - autocomplete: true, - attrs: true, - }, - }, - email: { - properties: { - type: true, - name: true, - inputType: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - active_url: true, - after: true, - after_or_equal: true, - alpha: true, - alpha_dash: true, - alpha_num: true, - before: true, - before_or_equal: true, - date: true, - date_equals: true, - date_format: true, - different: true, - digits: true, - digits_between: true, - email: true, - exists: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv4: true, - ipv6: true, - json: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - autocomplete: true, - attrs: true, - }, - }, - phone: { - properties: { - type: true, - name: true, - inputType: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - active_url: true, - after: true, - after_or_equal: true, - alpha: true, - alpha_dash: true, - alpha_num: true, - before: true, - before_or_equal: true, - date: true, - date_equals: true, - date_format: true, - different: true, - digits: true, - digits_between: true, - email: true, - exists: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv4: true, - ipv6: true, - json: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - autocomplete: true, - attrs: true, - }, - }, - password: { - properties: { - type: true, - name: true, - inputType: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - active_url: true, - after: true, - after_or_equal: true, - alpha: true, - alpha_dash: true, - alpha_num: true, - before: true, - before_or_equal: true, - date: true, - date_equals: true, - date_format: true, - different: true, - digits: true, - digits_between: true, - email: true, - exists: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv4: true, - ipv6: true, - json: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - autocomplete: true, - attrs: true, - }, - }, - url: { - properties: { - type: true, - name: true, - inputType: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - active_url: true, - after: true, - after_or_equal: true, - alpha: true, - alpha_dash: true, - alpha_num: true, - before: true, - before_or_equal: true, - date: true, - date_equals: true, - date_format: true, - different: true, - digits: true, - digits_between: true, - email: true, - exists: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv4: true, - ipv6: true, - json: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - autocomplete: true, - attrs: true, - }, - }, - location: { - properties: { - type: true, - name: true, - inputType: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - required: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - autocomplete: true, - attrs: true, - }, - }, - textarea: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - autogrow: true, - rows: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - alpha: true, - alpha_dash: true, - alpha_num: true, - different: true, - digits: true, - digits_between: true, - email: true, - exists: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv6: true, - json: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - attrs: true, - }, - }, - editor: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - endpoint: { - method: true, - }, - accept: { - mimes: true, - extensions: true, - }, - tools: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - different: true, - gt: true, - gte: true, - lt: true, - lte: true, - max: true, - min: true, - nullable: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - checkbox: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - text: true, - boolValue: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - accepted: true, - different: true, - in: true, - not_in: true, - same: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - checkboxgroup: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - }, - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - tabs: true, - blocks: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - distinct: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - checkboxBlocks: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - }, - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - tabs: true, - blocks: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - distinct: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - checkboxTabs: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - }, - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - tabs: true, - blocks: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - distinct: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - radio: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - text: true, - radio: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - boolean: true, - in: true, - in_array: true, - not_in: true, - required: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - radiogroup: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - }, - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - tabs: true, - blocks: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - different: true, - in: true, - in_array: true, - not_in: true, - nullable: true, - required: true, - same: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - radioBlocks: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - }, - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - tabs: true, - blocks: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - different: true, - in: true, - in_array: true, - not_in: true, - nullable: true, - required: true, - same: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - radioTabs: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - }, - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - tabs: true, - blocks: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - different: true, - in: true, - in_array: true, - not_in: true, - nullable: true, - required: true, - same: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - toggle: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - text: true, - labels: true, - boolValue: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - different: true, - in: true, - not_in: true, - nullable: true, - required: true, - same: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - select: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - native: true, - search: { - strict: true, - trackBy: true, - inputType: true, - autocomplete: true, - }, - create: { - append: true, - addOn: true, - }, - behavior: { - deselect: true, - clear: true, - closeOnSelect: true, - }, - ui: { - caret: true, - truncate: true, - openDirection: true, - limit: true, - }, - noOptions: true, - noResults: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - valueKey: true, - labelKey: true, - dataKey: true, - searchParam: true, - updateOnSearch: true, - delay: true, - minChars: true, - resolveOnLoad: true, - filterResults: true, - clearOnSearch: true, - }, - default: true, - object: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - alpha: true, - alpha_dash: true, - alpha_num: true, - different: true, - digits: true, - digits_between: true, - email: true, - exists: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - ip: true, - ipv4: true, - ipv6: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - regex: true, - required: true, - same: true, - size: true, - string: true, - timezone: true, - unique: true, - url: true, - uuid: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - attrs: true, - }, - }, - multiselect: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - native: true, - search: { - strict: true, - trackBy: true, - inputType: true, - autocomplete: true, - }, - create: { - append: true, - addOn: true, - }, - behavior: { - deselect: true, - clear: true, - closeOnSelect: true, - }, - ui: { - caret: true, - truncate: true, - openDirection: true, - limit: true, - }, - max: true, - multipleLabel: true, - noOptions: true, - noResults: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - valueKey: true, - labelKey: true, - dataKey: true, - searchParam: true, - updateOnSearch: true, - delay: true, - minChars: true, - resolveOnLoad: true, - filterResults: true, - clearOnSearch: true, - }, - default: true, - object: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - distinct: true, - gt: true, - gte: true, - lt: true, - lte: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - attrs: true, - }, - }, - tags: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - search: { - strict: true, - trackBy: true, - inputType: true, - autocomplete: true, - }, - create: { - append: true, - addOn: true, - }, - behavior: { - deselect: true, - clear: true, - closeOnSelect: true, - }, - ui: { - caret: true, - truncate: true, - openDirection: true, - limit: true, - }, - max: true, - noOptions: true, - noResults: true, - }, - data: { - items: { - list: true, - json: true, - endpoint: true, - valueKey: true, - labelKey: true, - dataKey: true, - searchParam: true, - updateOnSearch: true, - delay: true, - minChars: true, - resolveOnLoad: true, - filterResults: true, - clearOnSearch: true, - }, - default: true, - object: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - distinct: true, - gt: true, - gte: true, - lt: true, - lte: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - attrs: true, - }, - }, - date: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - format: { - display: true, - value: true, - load: true, - }, - restrictions: { - min: true, - max: true, - disables: true, - }, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - after: true, - after_or_equal: true, - before: true, - before_or_equal: true, - date: true, - date_format: true, - different: true, - in: true, - in_array: true, - not_in: true, - nullable: true, - required: true, - same: true, - string: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - }, - }, - datetime: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - hour24: true, - seconds: true, - format: { - display: true, - value: true, - load: true, - }, - restrictions: { - min: true, - max: true, - disables: true, - }, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - after: true, - after_or_equal: true, - before: true, - before_or_equal: true, - date: true, - date_format: true, - different: true, - in: true, - in_array: true, - not_in: true, - nullable: true, - required: true, - same: true, - string: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - }, - }, - time: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - hour24: true, - seconds: true, - format: { - display: true, - value: true, - load: true, - }, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - after: true, - after_or_equal: true, - before: true, - before_or_equal: true, - date: true, - date_format: true, - different: true, - in: true, - in_array: true, - not_in: true, - nullable: true, - required: true, - same: true, - string: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - }, - }, - dates: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - mode: true, - format: { - display: true, - value: true, - load: true, - }, - restrictions: { - min: true, - max: true, - disables: true, - }, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - after: true, - after_or_equal: true, - array: true, - before: true, - before_or_equal: true, - date: true, - date_format: true, - distinct: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - }, - }, - dateRange: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - placeholder: { - floating: true, - }, - description: true, - }, - options: { - mode: true, - format: { - display: true, - value: true, - load: true, - }, - restrictions: { - min: true, - max: true, - disables: true, - }, - }, - data: { - default: true, - submit: true, - }, - decorators: { - addons: { - prefix: true, - suffix: true, - }, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - after: true, - after_or_equal: true, - array: true, - before: true, - before_or_equal: true, - date: true, - date_format: true, - distinct: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - readonly: true, - id: true, - }, - }, - slider: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - min: true, - max: true, - step: true, - orientation: true, - direction: true, - tooltips: { - merge: true, - show: true, - position: true, - }, - tooltipFormat: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - different: true, - digits: true, - digits_between: true, - distinct: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - required: true, - same: true, - size: true, - string: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - rangeSlider: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - min: true, - max: true, - step: true, - orientation: true, - direction: true, - tooltips: { - merge: true, - show: true, - position: true, - }, - tooltipFormat: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - different: true, - digits: true, - digits_between: true, - distinct: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - required: true, - same: true, - size: true, - string: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - verticalSlider: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - min: true, - max: true, - step: true, - orientation: true, - direction: true, - tooltips: { - merge: true, - show: true, - position: true, - }, - tooltipFormat: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - different: true, - digits: true, - digits_between: true, - distinct: true, - gt: true, - gte: true, - in: true, - in_array: true, - integer: true, - lt: true, - lte: true, - max: true, - min: true, - not_in: true, - nullable: true, - numeric: true, - required: true, - same: true, - size: true, - string: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - file: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - autoUpload: true, - dragAndDrop: true, - softRemove: true, - clickable: true, - urls: { - click: true, - preview: true, - }, - accept: { - types: true, - mimes: true, - extensions: true, - }, - endpoints: { - uploadTemp: true, - uploadTempMethod: true, - removeTemp: true, - removeTempMethod: true, - remove: true, - removeMethod: true, - }, - params: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - file: true, - image: true, - gallery: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - dimensions: true, - file: true, - gt: true, - gte: true, - image: true, - lt: true, - lte: true, - max: true, - mimetypes: true, - mimes: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - multifile: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - autoUpload: true, - dragAndDrop: true, - softRemove: true, - clickable: true, - urls: { - click: true, - preview: true, - }, - controls: { - add: true, - remove: true, - sort: true, - }, - store: { - object: true, - file: true, - order: true, - }, - accept: { - types: true, - mimes: true, - extensions: true, - }, - endpoints: { - uploadTemp: true, - uploadTempMethod: true, - removeTemp: true, - removeTempMethod: true, - remove: true, - removeMethod: true, - }, - params: true, - }, - data: { - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - file: true, - image: true, - gallery: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - fileRules: { - min: true, - max: true, - mimes: true, - extensions: true, - dimensions: true, - width: true, - height: true, - minWidth: true, - minHeight: true, - maxWidth: true, - maxHeight: true, - ratio: true, - }, - validation: { - array: true, - gt: true, - gte: true, - lt: true, - lte: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - image: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - autoUpload: true, - dragAndDrop: true, - softRemove: true, - clickable: true, - urls: { - click: true, - preview: true, - }, - accept: { - types: true, - mimes: true, - extensions: true, - }, - endpoints: { - uploadTemp: true, - uploadTempMethod: true, - removeTemp: true, - removeTempMethod: true, - remove: true, - removeMethod: true, - }, - params: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - file: true, - image: true, - gallery: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - dimensions: true, - file: true, - gt: true, - gte: true, - image: true, - lt: true, - lte: true, - max: true, - mimetypes: true, - mimes: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - multiImage: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - autoUpload: true, - dragAndDrop: true, - softRemove: true, - clickable: true, - urls: { - click: true, - preview: true, - }, - controls: { - add: true, - remove: true, - sort: true, - }, - store: { - object: true, - file: true, - order: true, - }, - accept: { - types: true, - mimes: true, - extensions: true, - }, - endpoints: { - uploadTemp: true, - uploadTempMethod: true, - removeTemp: true, - removeTempMethod: true, - remove: true, - removeMethod: true, - }, - params: true, - }, - data: { - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - file: true, - image: true, - gallery: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - fileRules: { - min: true, - max: true, - mimes: true, - extensions: true, - dimensions: true, - width: true, - height: true, - minWidth: true, - minHeight: true, - maxWidth: true, - maxHeight: true, - ratio: true, - }, - validation: { - array: true, - gt: true, - gte: true, - lt: true, - lte: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - gallery: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - autoUpload: true, - dragAndDrop: true, - softRemove: true, - clickable: true, - urls: { - click: true, - preview: true, - }, - controls: { - add: true, - remove: true, - sort: true, - }, - store: { - object: true, - file: true, - order: true, - }, - accept: { - types: true, - mimes: true, - extensions: true, - }, - endpoints: { - uploadTemp: true, - uploadTempMethod: true, - removeTemp: true, - removeTempMethod: true, - remove: true, - removeMethod: true, - }, - params: true, - }, - data: { - submit: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - view: { - file: true, - image: true, - gallery: true, - }, - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - fileRules: { - min: true, - max: true, - mimes: true, - extensions: true, - dimensions: true, - width: true, - height: true, - minWidth: true, - minHeight: true, - maxWidth: true, - maxHeight: true, - ratio: true, - }, - validation: { - array: true, - gt: true, - gte: true, - lt: true, - lte: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - hidden: { - properties: { - type: true, - name: true, - meta: true, - }, - data: { - default: true, - submit: true, - }, - conditions: { - conditions: true, - }, - attributes: { - id: true, - attrs: true, - }, - }, - submit: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - buttonLabel: true, - buttonType: true, - submits: true, - resets: true, - href: true, - target: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - reset: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - buttonLabel: true, - buttonType: true, - submits: true, - resets: true, - href: true, - target: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - primaryButton: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - buttonLabel: true, - buttonType: true, - submits: true, - resets: true, - href: true, - target: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - secondaryButton: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - buttonLabel: true, - buttonType: true, - submits: true, - resets: true, - href: true, - target: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - dangerButton: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - buttonLabel: true, - buttonType: true, - submits: true, - resets: true, - href: true, - target: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - attributes: { - disabled: true, - id: true, - }, - }, - h1: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - h2: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - h3: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - h4: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - p: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - quote: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - img: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - link: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - divider: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - html: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - options: { - content: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - container: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - nested: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - container2: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - nested: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - container3: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - nested: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - container4: { - properties: { - type: true, - name: true, - label: true, - tooltip: true, - description: true, - }, - data: { - nested: true, - }, - decorators: { - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - conditions: { - conditions: true, - }, - }, - list: { - properties: { - type: true, - name: true, - label: true, - }, - options: { - initial: true, - min: true, - max: true, - controls: { - add: true, - remove: true, - sort: true, - }, - addText: true, - storeOrder: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - tooltip: true, - description: true, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - distinct: true, - gt: true, - gte: true, - lt: true, - lte: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - }, - nestedList: { - properties: { - type: true, - name: true, - label: true, - }, - options: { - initial: true, - min: true, - max: true, - controls: { - add: true, - remove: true, - sort: true, - }, - addText: true, - storeOrder: true, - }, - data: { - default: true, - submit: true, - }, - decorators: { - tooltip: true, - description: true, - before: true, - between: true, - after: true, - }, - layout: { - size: { - sm: true, - md: true, - lg: true, - }, - columns: { - container: true, - label: true, - wrapper: true, - }, - }, - validation: { - fieldName: true, - validation: { - array: true, - distinct: true, - gt: true, - gte: true, - lt: true, - lte: true, - max: true, - min: true, - nullable: true, - required: true, - size: true, - }, - }, - conditions: { - conditions: true, - }, - }, - }, - }, -} -``` - -## Themes - -Available themes (in Theme panel) can be configured with the following option: - -```js -// builder.config.js - -export default { - themes: [ - { - label: 'Official themes', - themes: [ - { - label: 'Vueform', - default: true, - vars: { - primary: '#07bf9b', - 'primary-darker': '#06ac8b', - 'color-on-primary': '#ffffff', - danger: '#ef4444', - 'danger-lighter': '#fee2e2', - success: '#10b981', - 'success-lighter': '#d1fae5', - 'ring-width': '2px', - 'ring-color': '#07bf9b66', - 'gray-50': '#f9fafb', - 'gray-100': '#f3f4f6', - 'gray-200': '#e5e7eb', - 'gray-300': '#d1d5db', - 'gray-400': '#9ca3af', - 'gray-500': '#6b7280', - 'gray-600': '#4b5563', - 'gray-700': '#374151', - 'gray-800': '#1f2937', - 'gray-900': '#111827', - 'font-size': '1rem', - 'font-size-sm': '0.875rem', - 'font-size-lg': '1rem', - 'font-size-small': '0.875rem', - 'font-size-small-sm': '0.8125rem', - 'font-size-small-lg': '0.875rem', - 'line-height': '1.5rem', - 'line-height-sm': '1.25rem', - 'line-height-lg': '1.5rem', - 'line-height-small': '1.25rem', - 'line-height-small-sm': '1.125rem', - 'line-height-small-lg': '1.25rem', - 'letter-spacing': '0px', - 'letter-spacing-sm': '0px', - 'letter-spacing-lg': '0px', - 'letter-spacing-small': '0px', - 'letter-spacing-small-sm': '0px', - 'letter-spacing-small-lg': '0px', - gutter: '1rem', - 'gutter-sm': '0.5rem', - 'gutter-lg': '1rem', - 'min-height-input': '2.375rem', - 'min-height-input-sm': '2.125rem', - 'min-height-input-lg': '2.875rem', - 'py-input': '0.375rem', - 'py-input-sm': '0.375rem', - 'py-input-lg': '0.625rem', - 'px-input': '0.75rem', - 'px-input-sm': '0.5rem', - 'px-input-lg': '0.875rem', - 'py-btn': '0.375rem', - 'py-btn-sm': '0.375rem', - 'py-btn-lg': '0.625rem', - 'px-btn': '0.875rem', - 'px-btn-sm': '0.75rem', - 'px-btn-lg': '1.25rem', - 'py-btn-small': '0.25rem', - 'py-btn-small-sm': '0.25rem', - 'py-btn-small-lg': '0.375rem', - 'px-btn-small': '0.625rem', - 'px-btn-small-sm': '0.625rem', - 'px-btn-small-lg': '0.75rem', - 'py-group-tabs': '0.375rem', - 'py-group-tabs-sm': '0.375rem', - 'py-group-tabs-lg': '0.625rem', - 'px-group-tabs': '0.75rem', - 'px-group-tabs-sm': '0.5rem', - 'px-group-tabs-lg': '0.875rem', - 'py-group-blocks': '0.75rem', - 'py-group-blocks-sm': '0.625rem', - 'py-group-blocks-lg': '0.875rem', - 'px-group-blocks': '1rem', - 'px-group-blocks-sm': '1rem', - 'px-group-blocks-lg': '1rem', - 'py-tag': '0px', - 'py-tag-sm': '0px', - 'py-tag-lg': '0px', - 'px-tag': '0.4375rem', - 'px-tag-sm': '0.4375rem', - 'px-tag-lg': '0.4375rem', - 'py-slider-tooltip': '0.125rem', - 'py-slider-tooltip-sm': '0.0625rem', - 'py-slider-tooltip-lg': '0.1875rem', - 'px-slider-tooltip': '0.375rem', - 'px-slider-tooltip-sm': '0.3125rem', - 'px-slider-tooltip-lg': '0.5rem', - 'space-addon': '0px', - 'space-addon-sm': '0px', - 'space-addon-lg': '0px', - 'space-checkbox': '0.375rem', - 'space-checkbox-sm': '0.375rem', - 'space-checkbox-lg': '0.375rem', - 'space-tags': '0.1875rem', - 'space-tags-sm': '0.1875rem', - 'space-tags-lg': '0.1875rem', - 'floating-top': '0rem', - 'floating-top-sm': '0rem', - 'floating-top-lg': '0.6875rem', - 'bg-input': '#ffffff', - 'bg-input-hover': '#ffffff', - 'bg-input-focus': '#ffffff', - 'bg-input-danger': '#ffffff', - 'bg-input-success': '#ffffff', - 'bg-disabled': 'var(--vf-gray-200)', - 'bg-selected': '#1118270d', - 'bg-passive': 'var(--vf-gray-300)', - 'bg-icon': 'var(--vf-gray-500)', - 'bg-danger': 'var(--vf-danger-lighter)', - 'bg-success': 'var(--vf-success-lighter)', - 'bg-tag': 'var(--vf-primary)', - 'bg-slider-handle': 'var(--vf-primary)', - 'bg-toggle-handle': '#ffffff', - 'bg-date-head': 'var(--vf-gray-100)', - 'bg-addon': '#ffffff00', - 'bg-btn': 'var(--vf-primary)', - 'bg-btn-danger': 'var(--vf-danger)', - 'bg-btn-secondary': 'var(--vf-gray-200)', - 'color-input': 'var(--vf-gray-800)', - 'color-input-hover': 'var(--vf-gray-800)', - 'color-input-focus': 'var(--vf-gray-800)', - 'color-input-danger': 'var(--vf-gray-800)', - 'color-input-success': 'var(--vf-gray-800)', - 'color-disabled': 'var(--vf-gray-400)', - 'color-placeholder': 'var(--vf-gray-300)', - 'color-passive': 'var(--vf-gray-700)', - 'color-muted': 'var(--vf-gray-500)', - 'color-floating': 'var(--vf-gray-500)', - 'color-floating-focus': 'var(--vf-gray-500)', - 'color-floating-success': 'var(--vf-gray-500)', - 'color-floating-danger': 'var(--vf-gray-500)', - 'color-danger': 'var(--vf-danger)', - 'color-success': 'var(--vf-success)', - 'color-tag': 'var(--vf-color-on-primary)', - 'color-addon': 'var(--vf-gray-800)', - 'color-date-head': 'var(--vf-gray-700)', - 'color-btn': 'var(--vf-color-on-primary)', - 'color-btn-danger': '#ffffff', - 'color-btn-secondary': 'var(--vf-gray-700)', - 'border-color-input': 'var(--vf-gray-300)', - 'border-color-input-hover': 'var(--vf-gray-300)', - 'border-color-input-focus': 'var(--vf-primary)', - 'border-color-input-danger': 'var(--vf-gray-300)', - 'border-color-input-success': 'var(--vf-gray-300)', - 'border-color-checked': 'var(--vf-primary)', - 'border-color-passive': 'var(--vf-gray-300)', - 'border-color-slider-tooltip': 'var(--vf-primary)', - 'border-color-tag': 'var(--vf-primary)', - 'border-color-btn': 'var(--vf-primary)', - 'border-color-btn-danger': 'var(--vf-danger)', - 'border-color-btn-secondary': 'var(--vf-gray-200)', - 'border-width-input-t': '1px', - 'border-width-input-r': '1px', - 'border-width-input-b': '1px', - 'border-width-input-l': '1px', - 'border-width-radio-t': '1px', - 'border-width-radio-r': '1px', - 'border-width-radio-b': '1px', - 'border-width-radio-l': '1px', - 'border-width-checkbox-t': '1px', - 'border-width-checkbox-r': '1px', - 'border-width-checkbox-b': '1px', - 'border-width-checkbox-l': '1px', - 'border-width-dropdown': '1px', - 'border-width-btn': '1px', - 'border-width-toggle': '0.125rem', - 'border-width-tag': '1px', - 'shadow-input': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-input-hover': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-input-focus': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-handles-hover': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-handles-focus': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-btn': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-dropdown': '0px 0px 0px 0px rgba(0,0,0,0)', - 'radius-input': '0.25rem', - 'radius-input-sm': '0.25rem', - 'radius-input-lg': '0.25rem', - 'radius-btn': '0.25rem', - 'radius-btn-sm': '0.25rem', - 'radius-btn-lg': '0.25rem', - 'radius-small': '0.25rem', - 'radius-small-sm': '0.25rem', - 'radius-small-lg': '0.25rem', - 'radius-large': '0.25rem', - 'radius-large-sm': '0.25rem', - 'radius-large-lg': '0.25rem', - 'radius-tag': '0.25rem', - 'radius-tag-sm': '0.25rem', - 'radius-tag-lg': '0.25rem', - 'radius-checkbox': '0.25rem', - 'radius-checkbox-sm': '0.25rem', - 'radius-checkbox-lg': '0.25rem', - 'radius-slider': '0.25rem', - 'radius-slider-sm': '0.25rem', - 'radius-slider-lg': '0.25rem', - 'radius-image': '0.25rem', - 'radius-image-sm': '0.25rem', - 'radius-image-lg': '0.25rem', - 'radius-gallery': '0.25rem', - 'radius-gallery-sm': '0.25rem', - 'radius-gallery-lg': '0.25rem', - 'checkbox-size': '1rem', - 'checkbox-size-sm': '0.875rem', - 'checkbox-size-lg': '1rem', - 'gallery-size': '6rem', - 'gallery-size-sm': '5rem', - 'gallery-size-lg': '7rem', - 'toggle-width': '3rem', - 'toggle-width-sm': '2.75rem', - 'toggle-width-lg': '3rem', - 'toggle-height': '1.25rem', - 'toggle-height-sm': '1rem', - 'toggle-height-lg': '1.25rem', - 'slider-height': '0.375rem', - 'slider-height-sm': '0.3125rem', - 'slider-height-lg': '0.5rem', - 'slider-height-vertical': '20rem', - 'slider-height-vertical-sm': '20rem', - 'slider-height-vertical-lg': '20rem', - 'slider-handle-size': '1rem', - 'slider-handle-size-sm': '0.875rem', - 'slider-handle-size-lg': '1.25rem', - 'slider-tooltip-distance': '0.5rem', - 'slider-tooltip-distance-sm': '0.375rem', - 'slider-tooltip-distance-lg': '0.5rem', - 'slider-tooltip-arrow-size': '0.3125rem', - 'slider-tooltip-arrow-size-sm': '0.3125rem', - 'slider-tooltip-arrow-size-lg': '0.3125rem', - }, - }, - { - label: 'Bootstrap', - vars: { - primary: '#007bff', - 'primary-darker': '#0056b3', - 'color-on-primary': '#ffffff', - danger: '#dc3545', - 'danger-lighter': '#f9dcdf', - success: '#28a745', - 'success-lighter': '#c4f1ce', - 'ring-width': '0.2rem', - 'ring-color': '#007bff66', - 'gray-50': '#f9fafb', - 'gray-100': '#f8f9fa', - 'gray-200': '#e9ecef', - 'gray-300': '#dee2e6', - 'gray-400': '#ced4da', - 'gray-500': '#adb5bd', - 'gray-600': '#6c757d', - 'gray-700': '#495057', - 'gray-800': '#343a40', - 'gray-900': '#212529', - 'font-size': '1rem', - 'font-size-sm': '0.875rem', - 'font-size-lg': '1.25rem', - 'font-size-small': '0.8rem', - 'font-size-small-sm': '0.7rem', - 'font-size-small-lg': '1rem', - 'line-height': '1.5rem', - 'line-height-sm': '1.5rem', - 'line-height-lg': '1.5rem', - 'line-height-small': '1.5rem', - 'line-height-small-sm': '1.5rem', - 'line-height-small-lg': '1.5rem', - 'letter-spacing': '0px', - 'letter-spacing-sm': '0px', - 'letter-spacing-lg': '0px', - 'letter-spacing-small': '0px', - 'letter-spacing-small-sm': '0px', - 'letter-spacing-small-lg': '0px', - gutter: '15px', - 'gutter-sm': '7.5px', - 'gutter-lg': '15px', - 'min-height-input': '2.375rem', - 'min-height-input-sm': '2.125rem', - 'min-height-input-lg': '2.625rem', - 'py-input': '0.375rem', - 'py-input-sm': '0.25rem', - 'py-input-lg': '0.5rem', - 'px-input': '0.75rem', - 'px-input-sm': '0.5rem', - 'px-input-lg': '1rem', - 'py-btn': '0.375rem', - 'py-btn-sm': '0.25rem', - 'py-btn-lg': '0.5rem', - 'px-btn': '0.75rem', - 'px-btn-sm': '0.5rem', - 'px-btn-lg': '1rem', - 'py-btn-small': '0.28125rem', - 'py-btn-small-sm': '0.1875rem', - 'py-btn-small-lg': '0.375rem', - 'px-btn-small': '0.5625rem', - 'px-btn-small-sm': '0.375rem', - 'px-btn-small-lg': '0.75rem', - 'py-group-tabs': '0.375rem', - 'py-group-tabs-sm': '0.25rem', - 'py-group-tabs-lg': '0.5rem', - 'px-group-tabs': '0.75rem', - 'px-group-tabs-sm': '0.5rem', - 'px-group-tabs-lg': '1rem', - 'py-group-blocks': '0.75rem', - 'py-group-blocks-sm': '0.625rem', - 'py-group-blocks-lg': '0.875rem', - 'px-group-blocks': '1rem', - 'px-group-blocks-sm': '1rem', - 'px-group-blocks-lg': '1rem', - 'py-tag': '0px', - 'py-tag-sm': '0px', - 'py-tag-lg': '0px', - 'px-tag': '0.4375rem', - 'px-tag-sm': '0.4375rem', - 'px-tag-lg': '0.4375rem', - 'py-slider-tooltip': '0.125rem', - 'py-slider-tooltip-sm': '0.0625rem', - 'py-slider-tooltip-lg': '0.1875rem', - 'px-slider-tooltip': '0.375rem', - 'px-slider-tooltip-sm': '0.3125rem', - 'px-slider-tooltip-lg': '0.5rem', - 'space-addon': '0.75rem', - 'space-addon-sm': '0.75rem', - 'space-addon-lg': '0.75rem', - 'space-checkbox': '0.25rem', - 'space-checkbox-sm': '0.25rem', - 'space-checkbox-lg': '0.25rem', - 'space-tags': '0.1875rem', - 'space-tags-sm': '0.1875rem', - 'space-tags-lg': '0.1875rem', - 'floating-top': '0rem', - 'floating-top-sm': '0rem', - 'floating-top-lg': '0.6875rem', - 'bg-input': '#ffffff', - 'bg-input-focus': '#ffffff', - 'bg-input-hover': '#ffffff', - 'bg-input-danger': '#ffffff', - 'bg-input-success': '#ffffff', - 'bg-disabled': '#e9ecef', - 'bg-selected': '#1118270d', - 'bg-passive': 'var(--vf-gray-300)', - 'bg-icon': 'var(--vf-gray-500)', - 'bg-danger': 'var(--vf-danger-lighter)', - 'bg-success': 'var(--vf-success-lighter)', - 'bg-tag': 'var(--vf-primary)', - 'bg-slider-handle': 'var(--vf-primary)', - 'bg-toggle-handle': '#ffffff', - 'bg-date-head': 'var(--vf-gray-100)', - 'bg-addon': '#e9ecef', - 'bg-btn': 'var(--vf-primary)', - 'bg-btn-danger': 'var(--vf-danger)', - 'bg-btn-secondary': 'var(--vf-gray-200)', - 'color-input': 'var(--vf-gray-700)', - 'color-input-focus': 'var(--vf-gray-700)', - 'color-input-hover': 'var(--vf-gray-700)', - 'color-input-danger': 'var(--vf-gray-700)', - 'color-input-success': 'var(--vf-gray-700)', - 'color-disabled': 'var(--vf-gray-700)', - 'color-placeholder': 'var(--vf-gray-600)', - 'color-passive': 'var(--vf-gray-700)', - 'color-muted': 'var(--vf-gray-600)', - 'color-floating': 'var(--vf-gray-600)', - 'color-floating-success': 'var(--vf-gray-600)', - 'color-floating-danger': 'var(--vf-gray-600)', - 'color-floating-focus': 'var(--vf-gray-600)', - 'color-danger': 'var(--vf-danger)', - 'color-success': 'var(--vf-success)', - 'color-tag': 'var(--vf-color-on-primary)', - 'color-addon': 'var(--vf-gray-700)', - 'color-date-head': 'var(--vf-gray-700)', - 'color-btn': 'var(--vf-color-on-primary)', - 'color-btn-danger': '#ffffff', - 'color-btn-secondary': 'var(--vf-gray-700)', - 'border-color-input': 'var(--vf-gray-400)', - 'border-color-input-focus': '#80bdff', - 'border-color-input-hover': 'var(--vf-gray-400)', - 'border-color-input-danger': 'var(--vf-gray-400)', - 'border-color-input-success': 'var(--vf-gray-400)', - 'border-color-checked': 'var(--vf-primary)', - 'border-color-passive': 'var(--vf-gray-300)', - 'border-color-slider-tooltip': 'var(--vf-primary)', - 'border-color-tag': 'var(--vf-primary)', - 'border-color-btn': 'var(--vf-primary)', - 'border-color-btn-danger': 'var(--vf-danger)', - 'border-color-btn-secondary': 'var(--vf-gray-200)', - 'border-width-input-t': '1px', - 'border-width-input-r': '1px', - 'border-width-input-b': '1px', - 'border-width-input-l': '1px', - 'border-width-radio-t': '1px', - 'border-width-radio-r': '1px', - 'border-width-radio-b': '1px', - 'border-width-radio-l': '1px', - 'border-width-checkbox-t': '1px', - 'border-width-checkbox-r': '1px', - 'border-width-checkbox-b': '1px', - 'border-width-checkbox-l': '1px', - 'border-width-dropdown': '1px', - 'border-width-btn': '1px', - 'border-width-toggle': '0.125rem', - 'border-width-tag': '1px', - 'shadow-input': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)', - 'shadow-input-hover': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)', - 'shadow-input-focus': '0 0 0 0.2rem rgba(0, 123, 255, 0.25)', - 'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-handles-hover': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)', - 'shadow-handles-focus': '0 0 0 0.2rem rgba(0, 123, 255, 0.25)', - 'shadow-btn': 'inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)', - 'shadow-dropdown': '0px 0px 0px 0px rgba(0,0,0,0)', - 'radius-input': '0.25rem', - 'radius-input-sm': '0.2rem', - 'radius-input-lg': '0.3rem', - 'radius-btn': '0.25rem', - 'radius-btn-sm': '0.2rem', - 'radius-btn-lg': '0.3rem', - 'radius-small': '0.25rem', - 'radius-small-sm': '0.2rem', - 'radius-small-lg': '0.25rem', - 'radius-large': '0.25rem', - 'radius-large-sm': '0.2rem', - 'radius-large-lg': '0.25rem', - 'radius-tag': '0.25rem', - 'radius-tag-sm': '0.2rem', - 'radius-tag-lg': '0.25rem', - 'radius-checkbox': '0.25rem', - 'radius-checkbox-sm': '0.2rem', - 'radius-checkbox-lg': '0.25rem', - 'radius-slider': '0.25rem', - 'radius-slider-sm': '0.2rem', - 'radius-slider-lg': '0.25rem', - 'radius-image': '0.25rem', - 'radius-image-sm': '0.2rem', - 'radius-image-lg': '0.25rem', - 'radius-gallery': '0.25rem', - 'radius-gallery-sm': '0.2rem', - 'radius-gallery-lg': '0.25rem', - 'checkbox-size': '1rem', - 'checkbox-size-sm': '0.875rem', - 'checkbox-size-lg': '1rem', - 'gallery-size': '6rem', - 'gallery-size-sm': '5rem', - 'gallery-size-lg': '7rem', - 'toggle-width': '3rem', - 'toggle-width-sm': '2.75rem', - 'toggle-width-lg': '3rem', - 'toggle-height': '1.25rem', - 'toggle-height-sm': '1.125rem', - 'toggle-height-lg': '1.25rem', - 'slider-height': '0.375rem', - 'slider-height-sm': '0.3125rem', - 'slider-height-lg': '0.5rem', - 'slider-height-vertical': '20rem', - 'slider-height-vertical-sm': '20rem', - 'slider-height-vertical-lg': '20rem', - 'slider-handle-size': '1rem', - 'slider-handle-size-sm': '0.875rem', - 'slider-handle-size-lg': '1.25rem', - 'slider-tooltip-distance': '0.5rem', - 'slider-tooltip-distance-sm': '0.375rem', - 'slider-tooltip-distance-lg': '0.5rem', - 'slider-tooltip-arrow-size': '0.3125rem', - 'slider-tooltip-arrow-size-sm': '0.3125rem', - 'slider-tooltip-arrow-size-lg': '0.3125rem', - }, - }, - { - label: 'Material', - vars: { - primary: '#6200ee', - 'primary-darker': '#5000cc', - 'color-on-primary': '#ffffff', - danger: '#b00020', - 'danger-lighter': '#f9e5e8', - success: '#4caf50', - 'success-lighter': '#e8f5e9', - 'ring-width': '0px', - 'ring-color': '#673ab766', - 'gray-50': '#fafafa', - 'gray-100': '#f5f5f5', - 'gray-200': '#eeeeee', - 'gray-300': '#e0e0e0', - 'gray-400': '#bdbdbd', - 'gray-500': '#9e9e9e', - 'gray-600': '#757575', - 'gray-700': '#616161', - 'gray-800': '#424242', - 'gray-900': '#212121', - 'font-size': '1rem', - 'font-size-sm': '0.875rem', - 'font-size-lg': '1rem', - 'font-size-small': '0.875rem', - 'font-size-small-sm': '0.75rem', - 'font-size-small-lg': '0.875rem', - 'line-height': '1.5rem', - 'line-height-sm': '1.25rem', - 'line-height-lg': '1.5rem', - 'line-height-small': '1.25rem', - 'line-height-small-sm': '1.125rem', - 'line-height-small-lg': '1.25rem', - 'letter-spacing': '0px', - 'letter-spacing-sm': '0px', - 'letter-spacing-lg': '0px', - 'letter-spacing-small': '0px', - 'letter-spacing-small-sm': '0px', - 'letter-spacing-small-lg': '0px', - gutter: '1rem', - 'gutter-sm': '0.5rem', - 'gutter-lg': '1rem', - 'min-height-input': '3rem', - 'min-height-input-sm': '2.125rem', - 'min-height-input-lg': '3.5rem', - 'py-input': '0.75rem', - 'py-input-sm': '0.375rem', - 'py-input-lg': '1rem', - 'px-input': '1rem', - 'px-input-sm': '0.625rem', - 'px-input-lg': '1rem', - 'py-btn': '0.375rem', - 'py-btn-sm': '0.5rem', - 'py-btn-lg': '0.5rem', - 'px-btn': '1rem', - 'px-btn-sm': '1rem', - 'px-btn-lg': '1rem', - 'py-btn-small': '0.28125rem', - 'py-btn-small-sm': '0.375rem', - 'py-btn-small-lg': '0.375rem', - 'px-btn-small': '0.75rem', - 'px-btn-small-sm': '0.75rem', - 'px-btn-small-lg': '0.75rem', - 'py-group-tabs': '0.75rem', - 'py-group-tabs-sm': '0.375rem', - 'py-group-tabs-lg': '1rem', - 'px-group-tabs': '1rem', - 'px-group-tabs-sm': '0.625rem', - 'px-group-tabs-lg': '1rem', - 'py-group-blocks': '1rem', - 'py-group-blocks-sm': '0.75rem', - 'py-group-blocks-lg': '1.25rem', - 'px-group-blocks': '1.25rem', - 'px-group-blocks-sm': '1rem', - 'px-group-blocks-lg': '1.5rem', - 'py-tag': '0.1875rem', - 'py-tag-sm': '0.125rem', - 'py-tag-lg': '0.1875rem', - 'px-tag': '0.675rem', - 'px-tag-sm': '0.5rem', - 'px-tag-lg': '0.75rem', - 'py-slider-tooltip': '0.25rem', - 'py-slider-tooltip-sm': '0.1875rem', - 'py-slider-tooltip-lg': '0.3125rem', - 'px-slider-tooltip': '0.5rem', - 'px-slider-tooltip-sm': '0.375rem', - 'px-slider-tooltip-lg': '0.625rem', - 'space-addon': '0px', - 'space-addon-sm': '0px', - 'space-addon-lg': '0px', - 'space-checkbox': '0.5rem', - 'space-checkbox-sm': '0.5rem', - 'space-checkbox-lg': '0.625rem', - 'space-tags': '0.1875rem', - 'space-tags-sm': '0.1875rem', - 'space-tags-lg': '0.1875rem', - 'floating-top': '0.75rem', - 'floating-top-sm': '0rem', - 'floating-top-lg': '0.875rem', - 'bg-input': 'var(--vf-gray-100)', - 'bg-input-hover': '#ececec', - 'bg-input-focus': '#dcdcdc', - 'bg-input-danger': 'var(--vf-gray-100)', - 'bg-input-success': 'var(--vf-gray-100)', - 'bg-disabled': 'var(--vf-gray-50)', - 'bg-selected': '#1118270d', - 'bg-passive': 'var(--vf-gray-300)', - 'bg-icon': 'var(--vf-gray-700)', - 'bg-danger': 'var(--vf-danger-lighter)', - 'bg-success': 'var(--vf-success-lighter)', - 'bg-tag': 'var(--vf-primary)', - 'bg-slider-handle': 'var(--vf-primary)', - 'bg-toggle-handle': '#ffffff', - 'bg-date-head': 'var(--vf-gray-100)', - 'bg-addon': 'transparent', - 'bg-btn': 'var(--vf-primary)', - 'bg-btn-danger': 'var(--vf-danger)', - 'bg-btn-secondary': 'var(--vf-gray-200)', - 'color-input': 'var(--vf-gray-900)', - 'color-input-focus': 'var(--vf-gray-900)', - 'color-input-hover': 'var(--vf-gray-900)', - 'color-input-danger': 'var(--vf-gray-900)', - 'color-input-success': 'var(--vf-gray-900)', - 'color-disabled': '#afafaf', - 'color-placeholder': '#00000099', - 'color-passive': 'var(--vf-gray-700)', - 'color-muted': '#00000099', - 'color-floating': '#00000099', - 'color-floating-focus': 'var(--vf-primary)', - 'color-floating-success': 'var(--vf-success)', - 'color-floating-danger': 'var(--vf-danger)', - 'color-danger': 'var(--vf-danger)', - 'color-success': 'var(--vf-success)', - 'color-tag': 'var(--vf-color-on-primary)', - 'color-addon': 'inherit', - 'color-date-head': 'var(--vf-gray-700)', - 'color-btn': 'var(--vf-color-on-primary)', - 'color-btn-danger': '#ffffff', - 'color-btn-secondary': 'var(--vf-gray-700)', - 'border-color-input': 'var(--vf-gray-600)', - 'border-color-input-focus': 'var(--vf-primary)', - 'border-color-input-hover': 'var(--vf-gray-600)', - 'border-color-input-danger': 'var(--vf-danger)', - 'border-color-input-success': 'var(--vf-gray-600)', - 'border-color-checked': 'var(--vf-primary)', - 'border-color-passive': 'var(--vf-gray-300)', - 'border-color-slider-tooltip': 'var(--vf-primary)', - 'border-color-tag': 'var(--vf-primary)', - 'border-color-btn': 'var(--vf-primary)', - 'border-color-btn-danger': 'var(--vf-danger)', - 'border-color-btn-secondary': 'var(--vf-gray-200)', - 'border-width-input-t': '0px', - 'border-width-input-r': '0px', - 'border-width-input-b': '1px', - 'border-width-input-l': '0px', - 'border-width-radio-t': '2px', - 'border-width-radio-r': '2px', - 'border-width-radio-b': '2px', - 'border-width-radio-l': '2px', - 'border-width-checkbox-t': '2px', - 'border-width-checkbox-r': '2px', - 'border-width-checkbox-b': '2px', - 'border-width-checkbox-l': '2px', - 'border-width-dropdown': '0px', - 'border-width-toggle': '0.25rem', - 'border-width-btn': '1px', - 'border-width-tag': '1px', - 'shadow-input': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-input-hover': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-input-focus': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)', - 'shadow-handles-hover': '0px 0px 0px 9px rgba(0,0,0,0.15)', - 'shadow-handles-focus': '0px 0px 0px 9px rgba(0,0,0,0.15)', - 'shadow-btn': '0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)', - 'shadow-dropdown': '0 4px 6px 0 rgb(32 33 36 / 28%)', - 'radius-input': '0.25rem 0.25rem 0rem 0rem', - 'radius-input-sm': '0.25rem 0.25rem 0rem 0rem', - 'radius-input-lg': '0.25rem 0.25rem 0rem 0rem', - 'radius-btn': '0.25rem', - 'radius-btn-sm': '0.25rem', - 'radius-btn-lg': '0.25rem', - 'radius-small': '0.125rem', - 'radius-small-sm': '0.125rem', - 'radius-small-lg': '0.125rem', - 'radius-large': '0.5rem 0.5rem 0rem 0rem', - 'radius-large-sm': '0.5rem 0.5rem 0rem 0rem', - 'radius-large-lg': '0.5rem 0.5rem 0rem 0rem', - 'radius-tag': '999px', - 'radius-tag-sm': '999px', - 'radius-tag-lg': '999px', - 'radius-checkbox': '0.25rem', - 'radius-checkbox-sm': '0.25rem', - 'radius-checkbox-lg': '0.25rem', - 'radius-slider': '1rem', - 'radius-slider-sm': '1rem', - 'radius-slider-lg': '1rem', - 'radius-image': '0.25rem 0.25rem 0rem 0rem', - 'radius-image-sm': '0.25rem 0.25rem 0rem 0rem', - 'radius-image-lg': '0.25rem 0.25rem 0rem 0rem', - 'radius-gallery': '0.25rem 0.25rem 0rem 0rem', - 'radius-gallery-sm': '0.25rem 0.25rem 0rem 0rem', - 'radius-gallery-lg': '0.25rem 0.25rem 0rem 0rem', - 'checkbox-size': '1rem', - 'checkbox-size-sm': '0.9375rem', - 'checkbox-size-lg': '1.125rem', - 'gallery-size': '6rem', - 'gallery-size-sm': '5rem', - 'gallery-size-lg': '7rem', - 'toggle-width': '3rem', - 'toggle-width-sm': '2.75rem', - 'toggle-width-lg': '3rem', - 'toggle-height': '1rem', - 'toggle-height-sm': '1.125rem', - 'toggle-height-lg': '1.25rem', - 'slider-height': '0.375rem', - 'slider-height-sm': '0.3125rem', - 'slider-height-lg': '0.4375rem', - 'slider-height-vertical': '20rem', - 'slider-height-vertical-sm': '20rem', - 'slider-height-vertical-lg': '20rem', - 'slider-handle-size': '1.25rem', - 'slider-handle-size-sm': '1.25rem', - 'slider-handle-size-lg': '1.4375rem', - 'slider-tooltip-distance': '0.625rem', - 'slider-tooltip-distance-sm': '0.625rem', - 'slider-tooltip-distance-lg': '0.625rem', - 'slider-tooltip-arrow-size': '0.375rem', - 'slider-tooltip-arrow-size-sm': '0.375rem', - 'slider-tooltip-arrow-size-lg': '0.375rem', - }, - }, - ], - }, - ], -} -``` - -## Locales - -Certain element properties can be provided in multiple locales. We can enable this feature by defining the list of available locales in `builder.config.js`: - -```js -// builder.config.js - -export default { - locales: { // default `{}` - en: 'English', - de: 'German', - // ... - } -} -``` - -When locales are enabled a language selector will appear next to the config panel and the fields which can be localized will have the locale's ISO code on their right: - -![Locales](./assets/screenshot-locales.png) - -The following properties can be localized: - -* **Properties** - * label - * tooltip - * placeholder - * floating - * description -* **Options** - * text (checkbox, radio, toggle) - * on & off label (toggle) - * no options text & no results text (select, multiselect, tags) -* **Data** - * data source / list / option labels (checkbox group, radio group, select, multiselect, tags) - * default (text, textarea, editor, hidden) -* **Decorators** - * prefix - * suffix - * before - * between - * after - -We can set the default and fallback locale in our config (they both default to `en`): - -```js -// builder.config.js - -export default { - locales: { - en: 'English', - de: 'German', - // ... - }, - defaultLocale: 'en', // default 'en' - fallbackLocale: 'en', // default 'en' -} -``` - -The flags are rendered using emojies which are available on most devices without having to add extra resources. This can be disabled: - -```js -// builder.config.js - -export default { - // ... - emojiFlags: false, // default `true` -} -``` - -When emoji flags are disabled ISO codes will appear instead of flags. They can be further customized with CSS with `.vfb-flag-{ISO}` classes. - -> If you've created a form with localized properties and then you disable the localization feature, make sure to convert back localized properties to plain before loading it back to the builder. - -## Custom Config - -Custom configuration can be applied to `` individually which will be used instead of the default `builder.config.js`: - -```vue - - - -``` - -# Adding Elements - -New elements can be registered in `builder.config.js` under `element.types`: - -``` js -// builder.config.js - -export default { - element: { - types: { - logo: { - label: 'Logo', - description: 'Company logo', - icon: 'https://domain.com/logo-element-icon.svg', - category: 'static', - schema: { - type: 'static', - content: '' - }, - sections: 'static', - separators: 'static', - }, - // ... - } - } -} -``` - - - -| Name | Type | Description | -| --- | --- | --- | -| `label*` | `string` | The label of the element in the element list. | -| `description*` | `string` | The description of the element in the element list. | -| `icon` | `string` | The url of the element's icon in the element list (if left empty a default icon will be displayed). It's recommended to use SVG to keep the UI high quality on each display. | -| `category` | `string` | Under which category should the element appear in the element list (if using categories). | -| `schema*` | `object` | The schema of the element that will be added. | -| `sections*` | `string\|object` | This determines what configuration options the element has when selected. It can be a `string` with the name of an other element which's sections should be reused (eg `'text'`) or an `object` containing custom configuration options (more about it later). | -| `separators*` | `string\|object` | Defines the separators between of configuration options (more about it later). | - -> \* - mandatory - -## Reusing Existing Element Types - -We can add elements that are based on existing elements but using a different schema. Eg. we have the `Select` element and we want to make it available with different default configuration. - -```js -// The existing "Select" element's schema (default config) - -schema: { - type: 'select', - label: 'Select', - search: true, - native: false, - inputType: 'search', - autocomplete: 'off', - items: [ - { value: 0, label: 'Label' }, - ], -} -``` -```js -// Our version of "Select" element's schema -// (implementing a "User selector") - -schema: { - type: 'select', - label: 'Users', - native: false, - search: true, - resolveOnLoad: false, - minChars: 2, - delay: 300, - inputType: 'search', - autocomplete: 'off', - items: '/api/users', -} -``` - -We can add this as a new element type the following way: - -``` js -// builder.config.js - -export default { - element: { - types: { - user: { // <- the unique id of the element - label: 'User selector', - description: 'Select a user from the database', - icon: 'https://domain.com/user-element-icon.svg', - category: 'fields', - schema: { // <- default configation options - type: 'select', - label: 'Users', - native: false, - search: true, - resolveOnLoad: false, - minChars: 2, - delay: 300, - inputType: 'search', - autocomplete: 'off', - items: '/api/users', - }, - sections: 'select', // <- using the configuration options of 'select' - separators: 'select', // <- using the configuration options of 'select' - }, - } - } -} -``` - -The new `User selector` element will be added to end of `Fields` element list and will inhert `select` element's config (`sections` & `separators` - more about it later). - -## Display Order - -If we want to change the display order of elements we can use the following unversal list in `builder.config.js`: - -``` js -// builder.config.js - -export default { - element: { - types: { - user: { - // ... - } - } - }, - - elements: [ - 'text', - 'number', - 'email', - 'phone', - 'password', - 'url', - 'user', // <-- "User selector" added here so it will be displayed after "URL" - 'location', - 'textarea', - 'editor', - 'checkbox', - 'checkboxgroup', - 'checkboxBlocks', - 'checkboxTabs', - 'radio', - 'radiogroup', - 'radioBlocks', - 'radioTabs', - 'toggle', - 'select', - 'multiselect', - 'tags', - 'date', - 'datetime', - 'time', - 'dates', - 'dateRange', - 'slider', - 'rangeSlider', - 'verticalSlider', - 'file', - 'multifile', - 'image', - 'multiImage', - 'gallery', - 'hidden', - 'submit', - 'reset', - 'primaryButton', - 'secondaryButton', - 'dangerButton', - 'h1', - 'h2', - 'h3', - 'h4', - 'p', - 'quote', - 'img', - 'link', - 'divider', - 'html', - 'container', - 'container2', - 'container3', - 'container4', - 'list', - 'nestedList', - ] -} -``` - -## Disabling Element Features - -Element features such as editing or removing can be disabled by adding a `builder` object to the element schema: - -``` js -// builder.config.js - -export default { - element: { - types: { - user: { - // ... - schema: { - type: 'select', - label: 'Users', - // ... - builder: { - remove: false, // Disables removing the element - clone: false, // Disables cloning the element - move: false, // Disables moving the element - edit: false, // Disabled editing the element - resize: false, // Disables resizing the element - } - }, - }, - } - } -} -``` - -Containers and lists containing an element with disabled features will also have their features disabled. This is true for each from above except `edit`. - -## Available Element Types - -Here's the list of available element types that can be used: - -| Key | Configuration panel example | -| --- | --- | -| `button` | Submit button | -| `checkbox` | Checkbox | -| `checkboxgroup` | Checkbox group | -| `date` | Date | -| `dates` | Multiple dates | -| `editor` | WYSIWYG editor | -| `file` | File upload | -| `hidden` | Hidden input | -| `location` | Location | -| `multifile` | Multi-file upload | -| `multiselect` | Multiselect | -| `container` | Container | -| `radio` | Radio | -| `radiogroup` | Radio group | -| `select` | Select | -| `slider` | Slider | -| `html` | Static HTML | -| `tags` | Tags | -| `text` | Text input | -| `textarea` | Textarea | -| `toggle` | Toggle | - -They can be used in the `sections` and `separators` property of a new element type, as seen above, eg: - -``` js -// builder.config.js - -export default { - element: { - types: { - user: { - label: 'User selector', - description: 'Select a user from the database', - icon: 'https://domain.com/user-element-icon.svg', - category: 'fields', - schema: { - // ... - }, - sections: 'select', // <- element type - separators: 'select', // <- element type - }, - // ... - } - } -} -``` - -## Creating New Elements with Custom Configuration Panel - -If we want to add a custom element, first we have to register it for Vueform based on the docs in Vueform's [Creating Elements](https://vueform.com/docs/1.x/creating-elements#registering-elements) section. - -Let's say we registered a new element called `LogoElement`. Now, we're able to add it to the builder: - -``` js -// builder.config.js - -export default { - element: { - types: { - logo: { - label: 'Logo', - description: 'Company logo', - icon: 'https://domain.com/logo-element-icon.svg', - category: 'static', - schema: { - type: 'logo', // <- using our new `LogoElement` type - }, - sections: { - // ... - }, - separators: { - // ... - }, - } - } - } -} -``` - -The options are the same as discussed at the [top of this section](#element-type-options). The only difference is that this time we're going to use an `object` as the value for `sections` and `separators`. This is where we'll define what configuration options the element should have on the right panel when selected. - -### Defining Sections - -Each element has the following sections (it's recommended to follow this convention): - -``` js -export default { - element: { - types: { - custom: { - // ... - sections: { - /** - * General properties like name, label, placeholder, description, - */ - properties: { - // ... - }, - - /** - * Element specific properties like search options for select or - * date constraints for date element, etc. Put here everything - * that is unique to the element (other probably don't have). - */ - options: { - // ... - }, - - /** - * Everything that is related to the element's data. Eg. default - * value, available options/items, etc. If the element is static - * eg. a button you can leave out this part. - */ - data: { - // ... - }, - - /** - * Configuration of decorators of the element, eg. prefix/suffix, - * before/between/after contents. - */ - decorators: { - // ... - }, - - /** - * Everything that is related to the look of the element, eg. - * sizing, columns width, view options, etc. - */ - layout: { - // ... - }, - - /** - * Configuration options related to validation rules, eg. field - * name & validation rules. If the element is static - * eg. a button you can leave out this part. - */ - validation: { - // ... - }, - - /** - * It should contain everything related to rendering the element - * conditionally. - */ - conditions: { - // ... - }, - - /** - * If the element has native attributes (like `disbled` or - * `readonly`) for `` they can be put here. - */ - attributes: { - // ... - }, - }, - }, - }, - }, -} -``` - -Sections must define a `name`, `label` and `fields` like: - -```js -properties: { - name: 'properties', - label: 'Properties', - fields: { - // ... - } -} -``` - -The **`fields`** contain configuration fields that are either provided by Vueform Builder or custom created. - -### Using Fields Provided by Vueform - -Our `LogoElement` is static so we don't need `data` and `validation` sections and to keep things simple we'll also exclude `attributes` section. We're left with following sections: -- `properties` -- `options` -- `decorators` -- `layout` -- `conditions` - -Now we need to fill in the sections with actual configuration fields. Existing fields can be imported from `@vueform/builder`: - -``` js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - ConditionsField, -} from '@vueform/builder' - -export default { - element: { - types: { - logo: { - label: 'Logo', - description: 'Company logo', - icon: 'https://domain.com/logo-element-icon.svg', - category: 'static', - schema: { - type: 'logo', - }, - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField, }, - name: { type: NameField, }, - label: { type: LabelField, }, - tooltip: { type: InfoField, }, - description: { type: DescriptionField, }, - }, - }, - options: { - name: 'options', - label: 'Logo options', - fields: { - // ... custom fields will come here - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField, }, - between: { type: BetweenField, }, - after: { type: AfterField, }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField, }, - columns: { type: ColumnsField, }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField, }, - }, - }, - }, - separators: { - // ... - }, - }, - }, - }, -}, -``` - -> Every field must only be used under the section name it's supposed to be at. Eg. `ConditionsField` must be in `conditions` section, `ColumnsField` in `layout`, etc. You can find the full list of fields and their location at the [end of this chapter](#existing-element-configurations). - -Each new element **must** have at least a `TypeField` in `properties` everything else is in fact optional. - -Note: custom element fields can later also be disabled in `builder.config.js` as [seen previously](#element-settings-panel): - -```js -// builder.config.js - -export default { - element: { - props: { - logo: { - properties: { - label: false, - info: false, - description: false, - }, - decorators: false, - } - } - } -} -``` - -We can even disable our custom fields once we add them. - -### Creating Custom Fields - -We can create our own configuration field eg. a color selector for our `LogoElement` that can choose between "Black & white" and "Color" versions. - -To do this let's create a `LogoColorField.js` somewhere in our project: - -``` js -// LogoColorField.js - -import { BaseElementField } from '@vueform/builder' - -export default class LogoColorField extends BaseElementField -{ - get schema() { - return { - color: { - type: 'select', - label: 'Logo color', - columns: { label: 6 }, - items: { - 'bw': 'Black & white', - 'color': 'Color', - }, - } - } - } -} -``` - -This field is **going to set the `color` property of our `LogoElement` component**, so the `LogoElement` component should have a `color` property which defines which logo is rendered. - -> Fields can use Vueform's [schema object](https://vueform.com/docs/1.x/rendering-forms#using-schema-object) to define configuration options. - -> The `default` option behaves differently than in a regular schema. It will not load the default value of the config option when the panel is opened. It will be interpreted as a value which should **remove** the config option from the element's schema. For example if our logo element's color property is `bw` by default it will be `bw` without explicitly defining any color. This means that the `color` option field (the one we define above) should have `default: 'bw'` option which results in the `color` option being removed from the element's schema when `bw` is selected so we don't explicitly define an option unnecessarily. - -Next add our custom field to our element definition: - -``` js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - ConditionsField, -} from '@vueform/builder' - -import LogoColorField from './path/to/LogoColorField.js' - -export default { - element: { - types: { - logo: { - label: 'Logo', - description: 'Company logo', - icon: 'https://domain.com/logo-element-icon.svg', - category: 'static', - schema: { - type: 'logo', - }, - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField, }, - name: { type: NameField, }, - label: { type: LabelField, }, - tooltip: { type: InfoField, }, - description: { type: DescriptionField, }, - }, - }, - options: { - name: 'options', - label: 'Logo options', - fields: { - color: { type: LogoColorField, }, // <- added here - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField, }, - between: { type: BetweenField, }, - after: { type: AfterField, }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField, }, - columns: { type: ColumnsField, }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField, }, - }, - }, - }, - separators: { - // ... - }, - }, - }, - }, -}, -``` - -Now if we drag the "Logo" element to our form and click on it, we'll see our custom config field showing up between other configuration options: - -![Logo Options](./assets/logo-options.png) - -### Adding Separators - -Separators can add dividers between configuration options. Eg. this would add a divider between **Name & Label** and **Info & Descrpition**: - -```js -separators: { - properties: [ - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - ], -}, -``` - -![Properties Separators](./assets/properties-separators.png) - -Fields should be groupped in an array that belong together so that dividers can be rendered between groups. This way of defining separators is required because config options can be turned on and off so it should know how to group certain options. - -Add a separator between `SizeField` and `ColumnsField` and move everything to the element definition. Here's the final result: - -``` js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - ConditionsField, -} from '@vueform/builder' - -import LogoColorField from './path/to/LogoColorField.js' - -export default { - element: { - types: { - logo: { - label: 'Logo', - description: 'Company logo', - icon: 'https://domain.com/logo-element-icon.svg', - category: 'static', - schema: { - type: 'logo', - }, - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField, }, - name: { type: NameField, }, - label: { type: LabelField, }, - tooltip: { type: InfoField, }, - description: { type: DescriptionField, }, - }, - }, - options: { - name: 'options', - label: 'Logo options', - fields: { - color: { type: LogoColorField, }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField, }, - between: { type: BetweenField, }, - after: { type: AfterField, }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField, }, - columns: { type: ColumnsField, }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField, }, - }, - }, - }, - separators: { - properties: [ - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - ], - layout: [ - ['size'], - ['columns'], - ] - }, - }, - }, - }, -}, -``` - -## Existing Element Configurations - -Here's the full list of existing element configurations. - - -### button - -Used by: -- Submit button -- Reset button -- Primary button -- Secondary button -- Danger button - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - ButtonLabelField, - ButtonTypeField, - SubmitsField, - ResetsField, - HrefField, - TargetField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - buttonLabel: { type: ButtonLabelField }, - buttonType: { type: ButtonTypeField }, - submits: { type: SubmitsField }, - resets: { type: ResetsField }, - href: { type: HrefField }, - target: { type: TargetField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - options: { - ['buttonLabel'], - ['buttonType'], - ['submits', 'resets'], - ['!', 'href', 'target'], - }, - layout: { - ['size'], - ['columns'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### checkbox - -Used by: -- Checkbox - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - TextField, - BoolValueField, - DefaultField_checkbox, - SubmitField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - text: { type: TextField }, - boolValue: { type: BoolValueField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_checkbox }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - options: { - ['text'], - ['boolValue'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### checkboxgroup - -Used by: -- Checkbox group -- Checkbox blocks -- Checkbox tabs - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - ItemsField, - DefaultField_checkboxgroup, - SubmitField, - BeforeField, - BetweenField, - AfterField, - ViewField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - items: { type: ItemsField }, - default: { type: DefaultField_checkboxgroup }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - view: { type: ViewField }, - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - data: { - ['items'], - ['default', 'submit'], - }, - layout: { - ['view'], - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### date - -Used by: -- Date - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - DateFormatField, - DateRestrictionsField, - DefaultField_date, - SubmitField, - AddonsField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - ReadonlyField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - format: { type: DateFormatField }, - restrictions: { type: DateRestrictionsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_date }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - addons: { type: AddonsField }, - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - readonly: { type: ReadonlyField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - options: { - ['format'], - ['restrictions'], - }, - data: { - ['default', 'submit'], - }, - decorators: { - ['addons'], - ['before', 'between', 'after'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'readonly', 'id'], - }, - } -} -``` - -### dates - -Used by: -- Multiple dates -- Date range - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - DateModeField, - DateFormatField, - DateRestrictionsField, - DefaultField_dates, - SubmitField, - AddonsField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - ReadonlyField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - mode: { type: DateModeField }, - format: { type: DateFormatField }, - restrictions: { type: DateRestrictionsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_dates }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - addons: { type: AddonsField }, - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - readonly: { type: ReadonlyField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - options: { - ['mode'], - ['format'], - ['restrictions'], - }, - data: { - ['default', 'submit'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'readonly', 'id'], - }, - } -} -``` - -### datetime - -Used by: -- Datetime - -```js -import { - Hour24Field, - SecondsField, - DateFormatField, - DateRestrictionsField, - DefaultField_datetime, - SubmitField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - hour24: { type: Hour24Field }, - seconds: { type: SecondsField }, - format: { type: DateFormatField }, - restrictions: { type: DateRestrictionsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_datetime }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - addons: { type: AddonsField }, - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - readonly: { type: ReadonlyField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - options: { - ['hour24', 'seconds'], - ['format'], - ['restrictions'], - }, - data: { - ['default', 'submit'], - }, - decorators: { - ['addons'], - ['before', 'between', 'after'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'readonly', 'id'], - }, - } -} -``` - -### editor - -Used by: -- WYSIWYG editor - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - EndpointField, - AcceptField, - ToolsField, - DefaultField_editor, - SubmitField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - endpoint: { type: EndpointField }, - accept: { type: AcceptField }, - tools: { type: ToolsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_editor }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - options: { - ['endpoint'], - ['accept'], - ['!', 'tools'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### file - -Used by: -- File upload -- Image upload - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - AutoUploadField, - DragAndDropField, - SoftRemoveField, - ClickableField, - FileUrlsField, - FileAcceptField, - FileEndpointsField, - ParamsField, - DefaultField, - SubmitField, - BeforeField, - BetweenField, - AfterField, - ViewField_file, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - autoUpload: { type: AutoUploadField }, - dragAndDrop: { type: DragAndDropField }, - softRemove: { type: SoftRemoveField }, - clickable: { type: ClickableField }, - urls: { type: FileUrlsField }, - accept: { type: FileAcceptField }, - endpoints: { type: FileEndpointsField }, - params: { type: ParamsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - view: { type: ViewField_file }, - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - options: { - ['autoUpload', 'dragAndDrop', 'softRemove', 'clickable'], - ['!', 'urls'], - ['!', 'accept'], - ['endpoints'], - ['!', 'params'], - }, - data: { - ['default', 'submit'], - }, - layout: { - ['view'], - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### hidden - -Used by: -- Hidden input - -```js -import { - TypeField, - NameField, - MetaField, - DefaultField_multilingual, - SubmitField, - ConditionsField, - IdField, - AttrsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - meta: { type: MetaField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_multilingual }, - submit: { type: SubmitField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - id: { type: IdField }, - attrs: { type: AttrsField }, - }, - }, - }, - separators: { - } -} -``` - -### location - -Used by: -- Location - -```js -import { - TypeField, - NameField, - InputTypeField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - DefaultField_location, - SubmitField, - AddonsField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - ReadonlyField, - IdField, - AutocompleteField, - AttrsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - inputType: { type: InputTypeField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_location }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - addons: { type: AddonsField }, - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - readonly: { type: ReadonlyField }, - id: { type: IdField }, - autocomplete: { type: AutocompleteField }, - attrs: { type: AttrsField }, - }, - }, - }, - separators: { - properties: { - ['name', 'inputType'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - decorators: { - ['addons'], - ['before', 'between', 'after'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'readonly', 'id', 'autocomplete'], - ['attrs'], - }, - } -} -``` - -### multifile - -Used by: -- Multi-file upload -- Multi-image upload -- Gallery - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - AutoUploadField, - DragAndDropField, - SoftRemoveField, - ClickableField, - FileUrlsField, - ControlsField, - StoreField, - FileAcceptField, - FileEndpointsField, - ParamsField, - SubmitField, - BeforeField, - BetweenField, - AfterField, - ViewField_file, - SizeField, - ColumnsField, - FieldNameField, - FileRulesField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - autoUpload: { type: AutoUploadField }, - dragAndDrop: { type: DragAndDropField }, - softRemove: { type: SoftRemoveField }, - clickable: { type: ClickableField }, - urls: { type: FileUrlsField }, - controls: { type: ControlsField }, - store: { type: StoreField }, - accept: { type: FileAcceptField }, - endpoints: { type: FileEndpointsField }, - params: { type: ParamsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - view: { type: ViewField_file }, - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - fileRules: { type: FileRulesField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - options: { - ['autoUpload', 'dragAndDrop', 'softRemove', 'clickable'], - ['!', 'urls'], - ['!', 'controls'], - ['store'], - ['!', 'accept'], - ['endpoints'], - ['!', 'params'], - }, - data: { - ['default', 'submit'], - }, - layout: { - ['view'], - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['fileRules'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### multiselect - -Used by: -- Multiselect - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - NativeField, - SearchField, - CreateField, - SelectBehaviorField, - SelectUiField, - MaxOptionsField, - MultipleLabelField, - NoOptionsField, - NoResultsField, - SelectItemsField, - DefaultField_multiselect, - ObjectField, - SubmitField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, - AttrsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - native: { type: NativeField }, - search: { type: SearchField }, - create: { type: CreateField }, - behavior: { type: SelectBehaviorField }, - ui: { type: SelectUiField }, - max: { type: MaxOptionsField }, - multipleLabel: { type: MultipleLabelField }, - noOptions: { type: NoOptionsField }, - noResults: { type: NoResultsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - items: { type: SelectItemsField }, - default: { type: DefaultField_multiselect }, - object: { type: ObjectField }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - attrs: { type: AttrsField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - options: { - ['native'], - ['!', 'search'], - ['!', 'create'], - ['!', 'behavior'], - ['ui'], - ['max'], - ['multipleLabel', 'noOptions', 'noResults'], - }, - data: { - ['items'], - ['default', 'object', 'submit'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - ['attrs'], - }, - } -} -``` - -### container - -Used by: -- Container -- 2 columns -- 3 columns -- 4 columns - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - NestedField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - ConditionsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - nested: { type: NestedField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - layout: { - ['size'], - ['columns'], - }, - } -} -``` - -### radio - -Used by: -- Radio - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - TextField, - RadioField, - DefaultField_radio, - SubmitField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - text: { type: TextField }, - radio: { type: RadioField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_radio }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - options: { - ['text'], - ['radio'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### radiogroup - -Used by: -- Radio group -- Radio blocks -- Radio tabs - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - ItemsField, - DefaultField_radiogroup, - SubmitField, - BeforeField, - BetweenField, - AfterField, - ViewField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - items: { type: ItemsField }, - default: { type: DefaultField_radiogroup }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - view: { type: ViewField }, - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - data: { - ['items'], - ['default', 'submit'], - }, - layout: { - ['view'], - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### select - -Used by: -- Select - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - NativeField, - SearchField, - CreateField, - SelectBehaviorField, - SelectUiField, - NoOptionsField, - NoResultsField, - SelectItemsField, - DefaultField_select, - ObjectField, - SubmitField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, - AttrsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - native: { type: NativeField }, - search: { type: SearchField }, - create: { type: CreateField }, - behavior: { type: SelectBehaviorField }, - ui: { type: SelectUiField }, - noOptions: { type: NoOptionsField }, - noResults: { type: NoResultsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - items: { type: SelectItemsField }, - default: { type: DefaultField_select }, - object: { type: ObjectField }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - attrs: { type: AttrsField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - options: { - ['native'], - ['!', 'search'], - ['!', 'create'], - ['!', 'behavior'], - ['ui'], - ['noOptions', 'noResults'], - }, - data: { - ['items'], - ['default', 'object', 'submit'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - ['attrs'], - }, - } -} -``` - -### slider - -Used by: -- Slider -- Range slider -- Vertical slider - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - MinField, - MaxField, - StepField, - OrientationField, - DirectionField, - TooltipsField, - TooltipFormatField, - DefaultField_slider, - SubmitField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - min: { type: MinField }, - max: { type: MaxField }, - step: { type: StepField }, - orientation: { type: OrientationField }, - direction: { type: DirectionField }, - tooltips: { type: TooltipsField }, - tooltipFormat: { type: TooltipFormatField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_slider }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - options: { - ['min', 'max', 'step'], - ['orientation', 'direction'], - ['!', 'tooltips'], - ['!', 'tooltipFormat'], - }, - data: { - ['default', 'submit'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - -### static - -Used by: -- Static HTML -- H1 header -- H2 header -- H3 header -- H4 header -- Paragraph -- Quote -- Image -- Link -- Divider - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - ContentField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - ConditionsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - content: { type: ContentField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - layout: { - ['size'], - ['columns'], - }, - } -} -``` - -### tags - -Used by: -- Tags - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - SearchField, - CreateField, - SelectBehaviorField, - SelectUiField, - MaxOptionsField, - NoOptionsField, - NoResultsField, - SelectItemsField, - DefaultField_tags, - ObjectField, - SubmitField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, - AttrsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - search: { type: SearchField }, - create: { type: CreateField }, - behavior: { type: SelectBehaviorField }, - ui: { type: SelectUiField }, - max: { type: MaxOptionsField }, - noOptions: { type: NoOptionsField }, - noResults: { type: NoResultsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - items: { type: SelectItemsField }, - default: { type: DefaultField_tags }, - object: { type: ObjectField }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - attrs: { type: AttrsField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - options: { - ['search'], - ['!', 'create'], - ['!', 'behavior'], - ['ui'], - ['max'], - ['noOptions', 'noResults'], - }, - data: { - ['items'], - ['default', 'object', 'submit'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - ['attrs'], - }, - } -} -``` - -### text - -Used by: -- Text input -- Number input -- Email address -- Phone number -- Password -- URL - -```js -import { - TypeField, - NameField, - InputTypeField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - DefaultField_multilingual, - SubmitField, - AddonsField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - ReadonlyField, - IdField, - AutocompleteField, - AttrsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - inputType: { type: InputTypeField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_multilingual }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - addons: { type: AddonsField }, - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - readonly: { type: ReadonlyField }, - id: { type: IdField }, - autocomplete: { type: AutocompleteField }, - attrs: { type: AttrsField }, - }, - }, - }, - separators: { - properties: { - ['name', 'inputType'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - decorators: { - ['addons'], - ['before', 'between', 'after'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'readonly', 'id', 'autocomplete'], - ['attrs'], - }, - } -} -``` - -### textarea - -Used by: -- Textarea - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - PlaceholderField, - DescriptionField, - AutogrowField, - RowsField, - DefaultField_textarea, - SubmitField, - AddonsField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - ReadonlyField, - IdField, - AttrsField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - autogrow: { type: AutogrowField }, - rows: { type: RowsField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_textarea }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - addons: { type: AddonsField }, - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - readonly: { type: ReadonlyField }, - id: { type: IdField }, - attrs: { type: AttrsField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - decorators: { - ['addons'], - ['before', 'between', 'after'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'readonly', 'id'], - ['attrs'], - }, - } -} -``` - -### time - -Used by: -- Time - -```js -import { - Hour24Field, - SecondsField, - DateFormatField, - DefaultField_time, - SubmitField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - placeholder: { type: PlaceholderField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - hour24: { type: Hour24Field }, - seconds: { type: SecondsField }, - format: { type: DateFormatField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_time }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - addons: { type: AddonsField }, - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - readonly: { type: ReadonlyField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['name'], - ['label', 'tooltip'], - ['placeholder'], - ['description'], - }, - options: { - ['hour24', 'seconds'], - ['format'], - }, - data: { - ['default', 'submit'], - }, - decorators: { - ['addons'], - ['before', 'between', 'after'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'readonly', 'id'], - }, - } -} -``` - -### toggle - -Used by: -- Toggle - -```js -import { - TypeField, - NameField, - LabelField, - InfoField, - DescriptionField, - TextField, - LabelsField, - BoolValueField, - DefaultField_toggle, - SubmitField, - BeforeField, - BetweenField, - AfterField, - SizeField, - ColumnsField, - FieldNameField, - ValidationField, - ConditionsField, - DisabledField, - IdField, -} from '@vueform/builder' - -export default { - sections: { - properties: { - name: 'properties', - label: 'Properties', - fields: { - type: { type: TypeField }, - name: { type: NameField }, - label: { type: LabelField }, - tooltip: { type: InfoField }, - description: { type: DescriptionField }, - }, - }, - options: { - name: 'options', - label: 'Options', - fields: { - text: { type: TextField }, - labels: { type: LabelsField }, - boolValue: { type: BoolValueField }, - }, - }, - data: { - name: 'data', - label: 'Data', - fields: { - default: { type: DefaultField_toggle }, - submit: { type: SubmitField }, - }, - }, - decorators: { - name: 'decorators', - label: 'Decorators', - fields: { - before: { type: BeforeField }, - between: { type: BetweenField }, - after: { type: AfterField }, - }, - }, - layout: { - name: 'layout', - label: 'Layout', - fields: { - size: { type: SizeField }, - columns: { type: ColumnsField }, - }, - }, - validation: { - name: 'validation', - label: 'Validation', - fields: { - fieldName: { type: FieldNameField }, - validation: { type: ValidationField }, - }, - }, - conditions: { - name: 'conditions', - label: 'Conditions', - fields: { - conditions: { type: ConditionsField }, - }, - }, - attributes: { - name: 'attributes', - label: 'Attributes', - fields: { - disabled: { type: DisabledField }, - id: { type: IdField }, - }, - }, - }, - separators: { - properties: { - ['type', 'name'], - ['label', 'tooltip'], - ['description'], - }, - options: { - ['text'], - ['labels'], - ['boolValue'], - }, - layout: { - ['size'], - ['columns'], - }, - validation: { - ['fieldName'], - ['validation'], - }, - attributes: { - ['disabled', 'id'], - }, - } -} -``` - - -## Accessibility - -The Builder was created with accessibility in mind and can be fully navigated with keyboard and has screen-reader support. Keyboard support is only available in browsers which have native support for `inert`: -https://caniuse.com/?search=inert - -For browsers not supporting `inert` a polyfill can be added: -https://github.com/WICG/inert - -Unfortunately the polyfill isn't perfect, so we recommend using Google Chrome, Edge or Safari when complete accessibility is required. - -# Upcoming Features - -- hooks & events -- restrict container children types - -# Support - -Regarding any questions or issues please contact me at adam@vueform.com. \ No newline at end of file +Please visit our website for instruction on getting started: +https://vueform.com/docs \ No newline at end of file diff --git a/assets/logo-options.png b/assets/logo-options.png deleted file mode 100644 index 90b501a..0000000 Binary files a/assets/logo-options.png and /dev/null differ diff --git a/assets/properties-separators.png b/assets/properties-separators.png deleted file mode 100644 index ef1c886..0000000 Binary files a/assets/properties-separators.png and /dev/null differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..b9e0741 --- /dev/null +++ b/index.css @@ -0,0 +1,3555 @@ +@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"); +.vfb-code-toolbar { + @apply relative; +} +.vfb-code-toolbar .vfb-toolbar { + @apply absolute top-4 right-6 opacity-0 transition hover:opacity-100; +} +.vfb-code-toolbar .vfb-toolbar button { + @apply text-white opacity-70 transition hover:opacity-100 font-semibold outline-none; +} +.vfb-code-toolbar pre[data-nocopy] + .toolbar { + @apply hidden; +} +.vfb-code-toolbar pre:hover + .vfb-toolbar { + @apply opacity-100; +} + +.vfb-code { + @apply bg-gray-900 dark:bg-dark-1000; + /* Code blocks */ + /* Inline code */ +} +.vfb-code code, .vfb-code pre { + color: theme("colors.code.base"); + background: none; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + hyphens: none; + font-size: 13px; + line-height: 1.625; + border-radius: 8px; +} +.vfb-code pre { + overflow: auto; + padding: 1.5rem; +} +.vfb-code pre.collapsed { + max-height: 600px; + overflow-y: hidden; + position: relative; + pointer-events: none; +} +.vfb-code pre.collapsed:before { + font-family: "Font Awesome 5 Pro"; + font-weight: 400; + content: "\f078"; + position: absolute; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); + transition: 0.3s background-color; + color: #fff; + text-align: center; + padding: 0.5rem 0; + cursor: pointer; + pointer-events: all; +} +.vfb-code pre.collapsed:before:hover { + background: rgba(0, 0, 0, 0.4); +} +.vfb-code pre.collapsed.collapsed-long { + max-height: 1156px; +} +.vfb-code :not(pre) > code { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; +} +.vfb-code .token.comment, +.vfb-code .token.prolog, +.vfb-code .token.doctype, +.vfb-code .token.cdata { + color: theme("colors.code.comment"); +} +.vfb-code .token.punctuation { + color: theme("colors.code.base"); +} +.vfb-code .token.punctuation + .component-select { + color: theme("colors.code.green"); +} +.vfb-code .namespace { + opacity: 0.7; +} +.vfb-code .token.property, +.vfb-code .token.tag, +.vfb-code .token.constant, +.vfb-code .token.symbol, +.vfb-code .token.deleted { + color: theme("colors.code.blue"); +} +.vfb-code .token.boolean, +.vfb-code .token.number { + color: theme("colors.code.light-purple"); +} +.vfb-code .token.selector, +.vfb-code .token.attr-name, +.vfb-code .token.string, +.vfb-code .token.char, +.vfb-code .token.builtin { + color: theme("colors.code.teal"); +} +.vfb-code .token.operator, +.vfb-code .token.entity, +.vfb-code .token.url, +.vfb-code .language-css .token.string, +.vfb-code .style .token.string, +.vfb-code .token.variable { + color: theme("colors.code.base"); +} +.vfb-code .token.atrule, +.vfb-code .token.attr-value, +.vfb-code .token.function, +.vfb-code .token.class-name { + color: theme("colors.code.yellow"); +} +.vfb-code .keyword-highlight { + padding: 0 2px; + position: relative; +} +.vfb-code .keyword-highlight:after { + content: ""; + background: currentColor; + position: absolute; + opacity: 0.25; + left: 0; + top: 0; + right: 0; + bottom: 0; + pointer-events: none; +} +.vfb-code .token.keyword { + color: theme("colors.code.blue"); +} +.vfb-code .token.regex, +.vfb-code .token.important { + color: theme("colors.code.orange"); +} +.vfb-code .token.important, +.vfb-code .token.bold { + font-weight: bold; +} +.vfb-code .token.italic { + font-style: italic; +} +.vfb-code .token.entity { + cursor: help; +} +.vfb-code .token.inserted { + color: rgba(149, 227, 191, 0.7490196078); + margin-left: -0.2rem; + margin-right: 0.2rem; +} +.vfb-code .token.inserted:not(.prefix) { + background-color: rgba(4, 120, 79, 0.5019607843); + color: inherit; + display: block; + padding-left: 3.8rem; + margin-left: -3.8rem; + padding-right: 1.5rem; + margin-right: -1.5rem; +} +.vfb-code .token.inserted.prefix { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + pointer-events: none; +} +.vfb-code .token.deleted { + color: #af9c9c; + margin-left: -0.2rem; + margin-right: 0.2rem; +} +.vfb-code .token.deleted:not(.prefix) { + background-color: rgba(239, 107, 127, 0.2509803922); + color: inherit; + display: block; + padding-left: 3.8rem; + margin-left: -3.8rem; + padding-right: 1.5rem; + margin-right: -1.5rem; +} +.vfb-code .token.deleted.prefix { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + pointer-events: none; +} +.vfb-code pre.diff-highlight .inserted-sign .inserted-sign { + margin-top: -1.5rem; +} +.vfb-code pre.diff-highlight .deleted-sign .deleted-sign { + margin-top: -1.5rem; +} +.vfb-code mark { + color: inherit; + padding: 2px 4px; + border-radius: 3px; + position: relative; + background: none; +} +.vfb-code mark:after { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: currentColor; + opacity: 0.2; + border-radius: 3px; + pointer-events: none; + cursor: text; +} +.vfb-code pre.line-numbers { + position: relative; + padding-left: 3.8rem; + counter-reset: linenumber; +} +.vfb-code pre.line-numbers > code { + position: relative; + white-space: inherit; +} +.vfb-code .line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: -1rem; + padding-top: 0.75rem; + font-size: 13px; + line-height: 1.625; + left: -3.8rem; + width: 3rem; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.vfb-code .line-numbers-rows > span { + display: block; + counter-increment: linenumber; +} +.vfb-code .line-numbers-rows > span:before { + content: counter(linenumber); + color: #45576f; + display: block; + padding-right: 0.8em; + text-align: right; +} +.vfb-code pre[data-line] { + position: relative; +} +.vfb-code .line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1.5rem; + background: rgba(255, 255, 255, 0.0784313725); + pointer-events: none; + line-height: inherit; + white-space: pre; + @apply border-l-4 border-primary-500; +} +.vfb-code .line-numbers .line-highlight { + margin-top: 0.5rem; +} +.vfb-code pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} +.vfb-code pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; +} +.vfb-code pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, 0.2); +} + +:not(pre) > code.vfb-inline-code { + font-size: 0.8em; + font-weight: normal; + position: relative; + top: -1px; + letter-spacing: -0.2px; + color: theme("colors.code.light-purple"); + white-space: nowrap; +} +:not(pre) > code.vfb-inline-code:not(.no-quote):before, :not(pre) > code.vfb-inline-code:not(.no-quote):after { + content: "`"; + display: inline-block; + width: 0.375em; +} +:not(pre) > code.vfb-inline-code.no-quote { + padding-left: 0.2em; + padding-right: 0.2em; +} + +.vfb-builder { + font-family: "Source Sans Pro", sans-serif; + -webkit-font-smoothing: antialiased; +} +.vfb-builder * { + -webkit-font-smoothing: antialiased; +} + +.vfb-bottom-left-tools-container { + @apply absolute bottom-4 -right-4 transform translate-x-full flex flex-col; +} + +.vfb-bottom-right-tools-container { + @apply absolute bottom-4 -left-4 transform -translate-x-full flex flex-col; +} + +.vfb-top-left-tools-container { + @apply absolute top-4 -right-4 transform translate-x-full flex flex-col; +} + +.vfb-top-right-tools-container { + @apply absolute top-4 -left-4 transform -translate-x-full flex flex-col; +} + +.vfb-tool { + @apply relative flex flex-col bg-white shadow-lg rounded border border-gray-300 dark:bg-dark-700 dark:border-dark-700 dark:text-white; +} + +.vfb-tool-device { + @apply mb-2; +} + +.vfb-tool-save { + @apply mt-2; +} + +.vfb-tool-undos { + @apply mb-2; +} + +.vfb-tool-language-selector .vfb-tool-item { + @apply text-sm; +} + +.vfb-tool-view { + @apply mb-2; +} + +.vfb-tool-clear { + @apply mt-2; +} + +.vfb-tool-item { + @apply w-8 h-8 flex items-center justify-center text-xs relative cursor-pointer transition-colors; +} + +.vfb-tool-item-single { + @apply rounded; +} + +.vfb-tool-item-first { + @apply rounded-t; +} + +.vfb-tool-item-last { + @apply rounded-b; +} + +.vfb-tool-item-active { + @apply bg-gray-150 dark:bg-dark-550; +} + +.vfb-tool-item-active-primary { + @apply bg-primary-500 text-white; +} + +.vfb-tool-item-disabled { + @apply text-gray-300 dark:text-dark-550 cursor-not-allowed; +} + +.vfb-tool-item-passive { + cursor: default !important; +} + +.vfb-tool-item-hoverable { + @apply hover:bg-gray-100 dark:hover:bg-dark-600; +} + +.vfb-tool-dropdown { + animation-duration: 0.3s; + animation-delay: 0; + animation-fill-mode: both; + animation-name: vfb-fade-in-down; + @apply absolute top-8 mt-1 left-0 right-0 flex flex-col bg-white shadow-lg rounded border border-gray-300 dark:bg-dark-700 dark:border-dark-700 dark:text-white; +} + +.vfb-tool-dropdown-item { + @apply relative flex items-center justify-center w-full h-8 cursor-pointer text-sm rounded hover:bg-gray-100 dark:hover:bg-dark-600; +} + +.vfb-tool-dropdown-item-active { + @apply bg-gray-100 dark:bg-dark-600 hover:bg-gray-100 dark:hover:bg-dark-600; +} + +.vfb-tool-tooltip { + @apply absolute top-1/2 transform -translate-y-1/2 bg-black text-white bg-opacity-80 px-1.5 rounded text-sm hidden whitespace-nowrap; +} + +.vfb-tool-item:hover .vfb-tool-tooltip { + @apply inline-block; +} + +.vfb-tool-dropdown-item:hover .vfb-tool-tooltip { + @apply inline-block; +} + +.vfb-tool-tooltip-right { + @apply translate-x-full -right-1.5; +} + +.vfb-tool-tooltip-left { + @apply -translate-x-full -left-1.5; +} + +.vfb-fade-in-enter-active { + transition-property: opacity; + transition-timing-function: ease-in-out; + transition-duration: 500ms; +} + +.vfb-fade-in-enter-from, +.vfb-fade-in-leave-to { + opacity: 0; +} + +.vfb-clr-picker { + display: none; + flex-wrap: wrap; + position: absolute; + width: 200px; + z-index: 999; + border-radius: 10px; + background-color: #fff; + justify-content: space-between; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 5px 20px rgba(0, 0, 0, 0.1); + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +.vfb-clr-picker.vfb-clr-open { + display: flex; +} + +.vfb-clr-gradient { + position: relative; + width: 100%; + height: 100px; + margin-bottom: 15px; + border-radius: 3px 3px 0 0; + background-image: linear-gradient(rgba(0, 0, 0, 0), #000), linear-gradient(90deg, #fff, currentColor); + cursor: pointer; +} + +.vfb-clr-marker { + position: absolute; + width: 12px; + height: 12px; + margin: -6px 0 0 -6px; + border: 1px solid #fff; + border-radius: 50%; + background-color: currentColor; + cursor: pointer; +} + +.vfb-clr-picker input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8px; +} + +.vfb-clr-picker input[type=range]::-webkit-slider-thumb { + width: 8px; + height: 8px; + -webkit-appearance: none; +} + +.vfb-clr-picker input[type=range]::-moz-range-track { + width: 100%; + height: 8px; + border: 0; +} + +.vfb-clr-picker input[type=range]::-moz-range-thumb { + width: 8px; + height: 8px; + border: 0; +} + +.vfb-clr-hue { + background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); +} + +.vfb-clr-hue, +.vfb-clr-alpha { + position: relative; + width: calc(100% - 40px); + height: 8px; + margin: 5px 20px; + border-radius: 4px; +} + +.vfb-clr-alpha span { + display: block; + height: 100%; + width: 100%; + border-radius: inherit; + background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), currentColor); +} + +.vfb-clr-hue input, +.vfb-clr-alpha input { + position: absolute; + width: calc(100% + 16px); + height: 16px; + left: -8px; + top: -4px; + margin: 0; + background-color: transparent; + opacity: 0; + cursor: pointer; + -moz-appearance: none; + appearance: none; + -webkit-appearance: none; +} + +.vfb-clr-hue div, +.vfb-clr-alpha div { + position: absolute; + width: 16px; + height: 16px; + left: 0; + top: 50%; + margin-left: -8px; + transform: translateY(-50%); + border: 2px solid #fff; + border-radius: 50%; + background-color: currentColor; + box-shadow: 0 0 1px #888; + pointer-events: none; +} + +.vfb-clr-alpha div:before { + content: ""; + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + border-radius: 50%; + background-color: currentColor; +} + +.vfb-clr-format { + display: none; + order: 1; + width: calc(100% - 40px); + margin: 0 20px 20px; +} + +.vfb-clr-segmented { + display: flex; + position: relative; + width: 100%; + margin: 0; + padding: 0; + border: 1px solid #ddd; + border-radius: 15px; + box-sizing: border-box; + color: #999; + font-size: 12px; +} + +.vfb-clr-segmented input, +.vfb-clr-segmented legend { + position: absolute; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border: 0; + left: 0; + top: 0; + opacity: 0; + pointer-events: none; +} + +.vfb-clr-segmented label { + flex-grow: 1; + padding: 4px 0; + text-align: center; + cursor: pointer; +} + +.vfb-clr-segmented label:first-of-type { + border-radius: 10px 0 0 10px; +} + +.vfb-clr-segmented label:last-of-type { + border-radius: 0 10px 10px 0; +} + +.vfb-clr-segmented input:checked + label { + color: #fff; + background-color: #666; +} + +.vfb-clr-swatches { + order: 2; + width: calc(100% - 32px); + margin: 0 16px; +} + +.vfb-clr-swatches div { + display: flex; + flex-wrap: wrap; + padding-bottom: 12px; + justify-content: center; +} + +.vfb-clr-swatches button { + position: relative; + width: 20px; + height: 20px; + margin: 0 4px 6px 4px; + border: 0; + border-radius: 50%; + color: inherit; + text-indent: -1000px; + white-space: nowrap; + overflow: hidden; + cursor: pointer; +} + +.vfb-clr-swatches button:after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + border-radius: inherit; + background-color: currentColor; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); +} + +input.vfb-clr-color { + order: 1; + width: calc(100% - 80px); + height: 32px; + margin: 15px 20px 20px 0; + padding: 0 10px; + border: 1px solid #ddd; + border-radius: 16px; + color: #444; + background-color: #fff; + font-family: sans-serif; + font-size: 14px; + text-align: center; + box-shadow: none; +} + +input.vfb-clr-color:focus { + outline: none; + border: 1px solid #1e90ff; +} + +.vfb-clr-clear { + display: none; + order: 2; + height: 24px; + margin: 0 20px 20px auto; + padding: 0 20px; + border: 0; + border-radius: 12px; + color: #fff; + background-color: #666; + font-family: inherit; + font-size: 12px; + font-weight: 400; + cursor: pointer; +} + +.vfb-clr-preview { + position: relative; + width: 32px; + height: 32px; + margin: 15px 0 20px 20px; + border: 0; + border-radius: 50%; + overflow: hidden; + cursor: pointer; +} + +.vfb-clr-preview:before, +.vfb-clr-preview:after { + content: ""; + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + border: 1px solid #fff; + border-radius: 50%; +} + +.vfb-clr-preview:after { + border: 0; + background-color: currentColor; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); +} + +.vfb-clr-marker, +.vfb-clr-hue div, +.vfb-clr-alpha div, +.vfb-clr-color { + box-sizing: border-box; +} + +.vfb-clr-field { + display: inline-block; + position: relative; + color: transparent; +} + +.vfb-clr-field button { + position: absolute; + width: 30px; + height: 100%; + right: 0; + top: 50%; + transform: translateY(-50%); + border: 0; + color: inherit; + text-indent: -1000px; + white-space: nowrap; + overflow: hidden; + pointer-events: none; + display: none; +} + +.vfb-clr-field button:after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + border-radius: inherit; + background-color: currentColor; + box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); +} + +.vfb-clr-alpha, +.vfb-clr-alpha div, +.vfb-clr-swatches button, +.vfb-clr-preview:before, +.vfb-clr-field button { + background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); + background-position: 0 0, 4px 4px; + background-size: 8px 8px; +} + +.vfb-clr-marker:focus { + outline: none; +} + +.vfb-clr-keyboard-nav .vfb-clr-marker:focus, +.vfb-clr-keyboard-nav .vfb-clr-hue input:focus + div, +.vfb-clr-keyboard-nav .vfb-clr-alpha input:focus + div, +.vfb-clr-keyboard-nav .vfb-clr-segmented input:focus + label { + outline: none; + box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff; +} + +.vfb-clr-picker[data-alpha=false] .vfb-clr-alpha { + display: none; +} + +.vfb-clr-picker[data-minimal=true] { + padding-top: 16px; +} + +.vfb-clr-picker[data-minimal=true] .vfb-clr-gradient, +.vfb-clr-picker[data-minimal=true] .vfb-clr-hue, +.vfb-clr-picker[data-minimal=true] .vfb-clr-alpha, +.vfb-clr-picker[data-minimal=true] .vfb-clr-color, +.vfb-clr-picker[data-minimal=true] .vfb-clr-preview { + display: none; +} + +/** Dark theme **/ +.vfb-clr-dark { + background-color: #444; +} + +.vfb-clr-dark .vfb-clr-segmented { + border-color: #777; +} + +.vfb-clr-dark .vfb-clr-swatches button:after { + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); +} + +.vfb-clr-dark input.vfb-clr-color { + color: #fff; + border-color: #777; + background-color: #555; +} + +.vfb-clr-dark input.vfb-clr-color:focus { + border-color: #1e90ff; +} + +.vfb-clr-dark .vfb-clr-preview:after { + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); +} + +.vfb-clr-dark .vfb-clr-alpha, +.vfb-clr-dark .vfb-clr-alpha div, +.vfb-clr-dark .vfb-clr-swatches button, +.vfb-clr-dark .vfb-clr-preview:before { + background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888); +} + +/** Polaroid theme **/ +.vfb-clr-picker.vfb-clr-polaroid { + border-radius: 6px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 5px 30px rgba(0, 0, 0, 0.2); +} + +.vfb-clr-picker.vfb-clr-polaroid:before { + content: ""; + display: block; + position: absolute; + width: 16px; + height: 10px; + left: 20px; + top: -10px; + border: solid transparent; + border-width: 0 8px 10px 8px; + border-bottom-color: currentColor; + box-sizing: border-box; + color: #fff; + filter: drop-shadow(0 -4px 3px rgba(0, 0, 0, 0.1)); + pointer-events: none; +} + +.vfb-clr-picker.vfb-clr-polaroid.vfb-clr-dark:before { + color: #444; +} + +.vfb-clr-picker.vfb-clr-polaroid.vfb-clr-left:before { + left: auto; + right: 20px; +} + +.vfb-clr-picker.vfb-clr-polaroid.vfb-clr-top:before { + top: auto; + bottom: -10px; + transform: rotateZ(180deg); +} + +.vfb-clr-polaroid .vfb-clr-gradient { + width: calc(100% - 20px); + height: 120px; + margin: 10px; + border-radius: 3px; +} + +.vfb-clr-polaroid .vfb-clr-hue, +.vfb-clr-polaroid .vfb-clr-alpha { + width: calc(100% - 30px); + height: 10px; + margin: 6px 15px; + border-radius: 5px; +} + +.vfb-clr-polaroid .vfb-clr-hue div, +.vfb-clr-polaroid .vfb-clr-alpha div { + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); +} + +.vfb-clr-polaroid .vfb-clr-format { + width: calc(100% - 20px); + margin: 0 10px 15px; +} + +.vfb-clr-polaroid .vfb-clr-swatches { + width: calc(100% - 12px); + margin: 0 6px; +} + +.vfb-clr-polaroid .vfb-clr-swatches div { + padding-bottom: 10px; +} + +.vfb-clr-polaroid .vfb-clr-swatches button { + width: 22px; + height: 22px; +} + +.vfb-clr-polaroid input.vfb-clr-color { + width: calc(100% - 60px); + margin: 10px 10px 15px 0; +} + +.vfb-clr-polaroid .vfb-clr-clear { + margin: 0 10px 15px auto; +} + +.vfb-clr-polaroid .vfb-clr-preview { + margin: 10px 0 15px 10px; +} + +/** Large theme **/ +.vfb-clr-picker.vfb-clr-large { + width: 275px; +} + +.vfb-clr-large .vfb-clr-gradient { + height: 150px; +} + +.vfb-clr-large .vfb-clr-swatches button { + width: 22px; + height: 22px; +} + +.vfb-btn-primary, .vfb-btn-primary:before, .vfb-btn-primary:after, .vfb-btn-primary:root { + --vf-bg-btn: theme("colors.primary.500"); + --vf-border-color-btn: theme("colors.primary.500"); +} + +.vfb-relative { + @apply relative; +} + +.vfb-break-words { + word-break: break-word; +} + +.vfb-learn-more { + @apply ml-2 leading-none text-0.5xs text-gray-400 border-b border-dotted border-gray-400 dark:text-dark-400 dark:border-dark-400; +} + +.vfb-field-note { + @apply -mt-1 text-right text-xs text-gray-400 dark:text-dark-400; +} + +.vfb-info-container { + @apply relative; +} +.vfb-info-container:hover .vfb-info-tooltip { + @apply block; +} + +.vfb-info-icon { + @apply text-sm ml-0.5; +} + +.vfb-info-tooltip { + @apply absolute top-6 right-1/2 transform translate-x-1/2 rounded px-2 py-1 bg-black bg-opacity-90 text-xs whitespace-nowrap text-center hidden; +} + +.vfb-icon { + @apply inline-block text-inherit h-1em overflow-visible align-icon; +} + +.vfb-hidden { + @apply hidden; +} + +.vfb-util-grid-cols-12 { + @apply grid-cols-12; +} + +.vfb-util-col-span-12 { + @apply col-span-12; +} + +.vfb-util-col-span-6 { + @apply col-span-6; +} + +.vfb-util-col-span-4 { + @apply col-span-4; +} + +.vfb-util-col-span-3 { + @apply col-span-3; +} + +.vfb-util-col-span-2 { + @apply col-span-2; +} + +.vfb-util-col-span-1 { + @apply col-span-1; +} + +.vfb-util-tabs-tiny { + @apply text-xs leading-tight; +} + +.vfb-util-tabs-small { + @apply text-sm leading-tight; +} + +.vfb-util-tabs-outline-gray-selected { + @apply bg-gray-100 text-black border-gray-300 dark:border-dark-600 dark:bg-dark-600 dark:bg-opacity-100 dark:text-white; +} + +.vfb-util-tabs-outline-gray-unselected { + @apply bg-white text-gray-700 border-gray-300 dark:bg-dark-800 dark:text-white dark:border-dark-600; +} + +.vfb-util-tabs-outline-selected { + @apply bg-primary-500 bg-opacity-20 text-primary-600 border-primary-500 dark:border-dark-600 dark:bg-dark-600 dark:bg-opacity-100 dark:text-white; +} + +.vfb-util-tabs-outline-unselected { + @apply bg-white text-primary-500 border-primary-500 dark:bg-dark-800 dark:text-white dark:border-dark-600; +} + +.vfb-util-number-input { + @apply form-pl-input-sm form-py-input-sm; +} + +.vfb-util-number-addon { + @apply text-gray-500 dark:text-dark-400; +} + +.vfb-util-colorpicker-input { + @apply relative; +} + +.vfb-util-colorpicker-addon { + @apply absolute top-1.5 -right-0.5; +} + +.vfb-util-props-group { + @apply my-4; +} + +.vfb-util-props-list-el-input { + @apply border-b border-gray-200 dark:border-dark-600; +} + +.vfb-util-props-list-el-input-default { + @apply focused:border-primary-500 focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-input-success { + @apply focused:border-primary-500 focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-select { + @apply border-b border-gray-200 dark:border-dark-600 -bottom-px relative; +} + +.vfb-util-props-list-el-select-default { + @apply focused:border-primary-500 dark:bg-dark-800 dark:text-white focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-select-success { + @apply focused:border-primary-500 dark:bg-dark-800 dark:text-white focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-select-container { + @apply border-b border-gray-200 dark:border-dark-600 relative; +} + +.vfb-util-props-list-el-select-container-default { + @apply focused:border-primary-500 focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-select-container-success { + @apply focused:border-primary-500 focused:dark:border-dark-400; +} + +.vfb-util-props-list-label { + @apply mb-4 mt-3.5; +} + +.vfb-util-props-list-add { + @apply absolute top-0 right-0; +} + +.vfb-util-props-list-layout { + @apply relative; +} + +.vfb-util-props-list-subtitle { + @apply uppercase text-gray-500 font-semibold mb-2 ml-2.5 mt-1 dark:text-dark-400; +} + +.vfb-util-props-subtitle-no-m { + @apply uppercase text-gray-500 font-semibold dark:text-dark-400; +} + +.vfb-util-props-subtitle { + @apply uppercase text-gray-500 font-semibold mb-2 dark:text-dark-400; +} + +.vfb-util-props-separator-top { + @apply border-t border-gray-150 px-5 -mx-5 pt-4 mt-2 dark:border-dark-600; +} + +.vfb-util-props-separator { + @apply border-b border-gray-150 px-5 -mx-5 pb-4 mb-2 dark:border-dark-600; +} + +.vfb-util-props-multiline-label { + @apply items-start form-pt-input-border; +} + +.vfb-util-props-toggle-wrapper { + @apply items-center justify-end form-h-input-sm; +} + +.vfb-util-props-horizontal-label { + @apply items-center leading-tighter; +} + +.vfb-util-props-tags { + @apply whitespace-normal break-all; +} + +.vfb-util-props-horizontal-label-sm { + @apply text-type:form-pt-input-border-sm; +} + +.vfb-util-props-horizontal-label-md { + @apply text-type:form-pt-input-border; +} + +.vfb-util-props-horizontal-label-lg { + @apply text-type:form-pt-input-border-lg; +} + +.vfb-util-props-not-horizontal-label-sm { + @apply form-pb-gutter/3-sm; +} + +.vfb-util-props-not-horizontal-label-md { + @apply form-pb-gutter/3; +} + +.vfb-util-props-not-horizontal-label-lg { + @apply form-pb-gutter/3-lg; +} + +.vfb-util-columns-number { + @apply font-normal mb-2; +} + +.vfb-util-columns-total { + @apply text-gray-400 mb-2; +} + +.vfb-util-props-link { + @apply text-primary-500 border-b border-dotted border-primary-500; +} + +.vfb-util-props-description { + @apply text-right text-gray-500 dark:text-dark-400 text-sm italic form-h-input-sm pb-px flex items-center; +} + +.vfb-util-props-accepted-formats-container { + @apply text-sm -mt-3; +} + +.vfb-util-props-accepted-return-formats-container { + @apply text-sm -mt-1; +} + +.vfb-util-props-error { + @apply text-red-500 text-xs; +} + +.vfb-util-color-preview { + @apply w-5 h-5 rounded pointer-events-none; +} + +.vfb-util-prop-label-with-link { + @apply flex items-center; +} + +.vfb-util-prop-element-with-link { + @apply flex items-center justify-between w-full; +} + +.vfb-util-prop-language-container { + @apply bg-gray-100 p-2 rounded-lg; +} + +.vfb-util-prop-language-value { + @apply bg-white; +} + +.vfb-util-assistive-text { + @apply absolute -m-px w-px h-px overflow-hidden; + clip: rect(0 0 0 0); +} + +.vfb-util-element-type + div { + @apply -mt-2; +} + +.vfb-tooltip-group:hover .vfb-tooltip { + @apply inline-block; +} + +.vfb-tooltip { + @apply absolute z-999 transform bg-black text-white bg-opacity-80 px-1.5 py-0.5 rounded text-sm leading-tighter hidden whitespace-nowrap text-center; +} +.vfb-tooltip.vfb-tooltip-smaller { + @apply px-1 text-0.5sm; +} + +.vfb-tooltip-top { + @apply -top-0.5 left-1/2 -translate-y-full -translate-x-1/2; +} +.vfb-tooltip-top.vfb-tooltip-closer { + @apply top-1; +} + +.vfb-tooltip-bottom { + @apply -bottom-0.5 left-1/2 translate-y-full -translate-x-1/2; +} +.vfb-tooltip-bottom.vfb-tooltip-further { + @apply -bottom-1; +} + +.vfb-tooltip-left { + @apply top-1/2 -left-0.5 -translate-y-1/2 -translate-x-full; +} +.vfb-tooltip-left.vfb-tooltip-closer { + @apply left-1; +} +.vfb-tooltip-left.vfb-tooltip-further { + @apply -left-1.5; +} + +.vfb-tooltip-right { + @apply top-1/2 -right-0.5 -translate-y-1/2 translate-x-full; +} +.vfb-tooltip-right.vfb-tooltip-closer { + @apply right-1; +} + +.vfb-tooltip-top-left { + @apply -top-0.5 left-0 -translate-y-full translate-x-0; +} + +.vfb-tooltip-top-right { + @apply -top-0.5 right-0 left-auto -translate-y-full translate-x-0; +} + +.vfb-tooltip-bottom-left { + @apply -bottom-0.5 left-0 translate-y-full translate-x-0; +} +.vfb-tooltip-bottom-left.vfb-tooltip-closer { + @apply bottom-1; +} + +.vfb-tooltip-bottom-right { + @apply -bottom-0.5 right-0 left-auto translate-y-full translate-x-0; +} +.vfb-tooltip-bottom-right.vfb-tooltip-closer { + @apply bottom-1; +} + +.vfb-notification-container { + @apply absolute left-16 right-16 mx-1 bottom-4; +} + +.vfb-notification { + @apply py-3 px-5 bg-white; +} + +.vfb-text-button { + @apply px-0 rounded-none bg-transparent text-black border-transparent hover:scale-100 block; +} + +.vfb-btn-primary, +.vfb-btn-secondary, +.vfb-btn-transparent { + @apply inline-block form-border-width-btn form-shadow-btn form-p-btn form-radius-btn form-text cursor-pointer focus:form-ring; +} + +.vfb-btn-primary { + @apply form-bg-btn form-color-btn form-border-color-btn; +} + +.vfb-btn-secondary { + @apply form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary; +} + +.vfb-btn-transparent { + @apply form-color-btn-secondary border-transparent hover:text-gray-900; +} + +.vfb-btn-sm { + @apply form-p-btn-sm form-text-sm form-radius-btn-sm; +} + +.vfb-btn-xs { + @apply px-2 py-0.5 text-0.5sm rounded inline-block; +} + +.vfb-util-flash { + transition: 0.1s; + animation-duration: 0.5s; + animation-fill-mode: both; + animation-name: flash; +} + +@keyframes flash { + from, 50%, to { + opacity: 1; + } + 25%, 75% { + opacity: 0; + } +} +@keyframes vfb-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes vfb-fade-in-up { + 0% { + opacity: 0; + transform: translate3d(0, 15%, 0); + } + 100% { + opacity: 1; + transform: translateZ(0); + } +} +@keyframes vfb-fade-in-down { + 0% { + opacity: 0; + transform: translate3d(0, -15%, 0); + } + 100% { + opacity: 1; + transform: translateZ(0); + } +} +.vfb-toaster-container { + @apply flex items-center justify-center sticky top-full pb-4 mx-16 transition duration-300 ease-toaster transform translate-y-full z-999; +} +.vfb-toaster-container.vfb-toaster-container-visible { + @apply translate-y-0; +} + +.vfb-toaster { + @apply text-white py-3 px-5 bg-black bg-opacity-80 overflow-hidden flex justify-between items-center rounded whitespace-nowrap opacity-100; +} +.vfb-toaster .vfb-toaster-error { + @apply bg-red-500; + box-shadow: 2px 2px 1px 0px rgba(126, 58, 58, 0.5); +} +.vfb-toaster .vfb-toaster-info { + @apply bg-blue-400; + box-shadow: 2px 2px 1px 0px rgba(96, 165, 250, 0.5); +} +.vfb-toaster .vfb-toaster-success { + @apply bg-primary-500; + box-shadow: 2px 2px 1px 0px rgba(31, 150, 118, 0.5); +} + +.vfb-toaster-wrapper { + @apply flex items-center; +} + +.vfb-toaster-icon { + @apply mr-3; +} + +.vfb-toaster-close-wrapper { + @apply ml-4; +} + +.vfb-toaster-close { + @apply uppercase cursor-pointer text-white opacity-70 font-semibold transition hover:opacity-90; +} + +.vfb-overlay { + animation-duration: 0.15s; + animation-delay: 0; + animation-fill-mode: both; + animation-name: vfb-fade-in; + @apply absolute z-999 bg-gray-900 bg-opacity-90 inset-0 overflow-y-auto py-10 dark:bg-dark-900 dark:bg-opacity-90; +} + +.vfb-modal { + animation-duration: 0.3s; + animation-delay: 0; + animation-fill-mode: both; + animation-name: vfb-fade-in-up; + @apply max-w-modal bg-white mx-auto shadow-box-strong rounded-lg transition-transform transform -translate-y-1/4; +} + +.vfb-modal-header { + @apply px-7 py-5 bg-gray-100 flex items-center justify-between rounded-t-lg; +} + +.vfb-modal-title { + @apply text-xl font-semibold leading-none; +} + +.vfb-modal-subtitle { + @apply text-gray-500 text-0.5md; +} + +.vfb-modal-close { + @apply text-lg text-gray-500 transition-colors hover:text-gray-900; +} + +.vfb-modal-content { + @apply px-8 py-6 mt-4; +} +.vfb-modal-content form { + @apply -mt-4; +} + +.vfb-modal-buttons { + @apply flex items-end justify-between pl-7 pr-3 py-5 border-t border-gray-200; +} + +.vfb-modal-buttons-left > div, .vfb-modal-buttons-left > button { + @apply mr-2; +} + +.vfb-conditions-head-title { + @apply font-semibold uppercase; +} + +.vfb-conditions-head-subtitle { + @apply flex items-center text-sm leading-none; +} + +.vfb-conditions-head-label { + @apply mr-1; +} + +.vfb-conditions-head-secondary { + @apply text-gray-500 italic; +} + +.vfb-conditions-empty-wrapper { + @apply mb-4 text-center; +} + +.vfb-conditions-empty-icon { + @apply mx-auto w-16 h-16 text-3xl bg-primary-500 text-primary-500 bg-opacity-20 rounded-full flex items-center justify-center; +} + +.vfb-conditions-empty-title { + @apply font-semibold text-lg mt-2; +} + +.vfb-conditions-empty-subtitle { + @apply text-gray-500 leading-none mb-4; +} + +.vfb-condition-list { + @apply pl-10 relative; +} +.vfb-condition-list:before { + content: ""; + @apply w-px absolute top-0 bottom-11.5 left-4 ml-0.5 bg-gray-300; +} + +.vfb-condition-list-item-and { + @apply relative; +} +.vfb-condition-list-item-and:before { + content: ""; + @apply absolute top-3 h-4 -left-10 w-10 bg-white; +} +.vfb-condition-list-item-and:after { + content: "and"; + @apply absolute top-3.5 -left-10 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400; +} + +.vfb-condition-list-add { + @apply relative -ml-12; +} + +.vfb-condition-sublist { + @apply relative; +} +.vfb-condition-sublist:before { + content: ""; + @apply w-px absolute top-14 bottom-0 left-4 ml-0.5 bg-gray-300; +} + +.vfb-condition-sublist-item-or { + @apply pl-10 relative; +} +.vfb-condition-sublist-item-or:before { + content: ""; + @apply absolute top-3 h-4 left-0 w-10 bg-white; +} +.vfb-condition-sublist-item-or:after { + content: "or"; + @apply absolute top-3.5 left-0 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400; +} + +.vfb-conditions-render { + @apply text-left bg-gray-50 border border-gray-200 px-3 py-2 rounded-md relative dark:bg-dark-700 dark:border-dark-700; +} + +.vfb-conditions-render-title { + @apply mb-2 flex justify-between items-center; +} + +.vfb-conditions-render-title-text { + @apply text-gray-500 uppercase font-semibold dark:text-dark-500; +} + +.vfb-conditions-render-title-btn { + @apply vfb-btn-primary vfb-btn-xs dark:border-primary-500; +} + +.vfb-conditions-render-or-group { + @apply ml-2; +} +.vfb-conditions-render-or-group:nth-of-type(1) { + @apply ml-0; +} + +.vfb-conditions-render-one { + @apply flex; +} + +.vfb-conditions-render-field { + @apply font-bold; +} +.vfb-conditions-render-field:after { + content: " "; +} + +.vfb-conditions-render-operator:after { + content: " "; +} + +.vfb-conditions-render-expected { + @apply text-primary-600 font-semibold; +} + +.vfb-conditions-render-or { + @apply mt-0.75 ml-2 mr-1 text-xs inline-flex items-start justify-center; +} + +.vfb-conditions-render-and { + @apply mt-0.5 mr-1 text-xs inline-flex items-center justify-center; +} + +.vfb-conditions-render-or, +.vfb-conditions-render-and { + @apply font-bold text-gray-500 uppercase dark:text-dark-500; +} + +.vfb-condition-icon { + @apply relative text-primary-500 vfb-tooltip-group ml-px; + color: var(--vf-gray-500); + background: var(--vf-gray-300); + border-radius: 3px; + font-size: 12px; + width: 18px; + display: inline-flex; + height: 18px; + align-items: center; + justify-content: center; +} + +.vfb-conditions-render-empty-wrapper { + @apply flex justify-between items-center; +} + +.vfb-conditions-render-empty-btn { + @apply vfb-btn-primary vfb-btn-xs dark:border-primary-500; +} + +.vfb-fields-container { + @apply vfb-break-words w-max max-w-[576px] max-h-[400px] min-w-full; +} + +.vfb-field-container-no-nesting { + @apply pl-0.5; +} + +.vfb-field-input { + @apply z-1; +} + +.vfb-field-label { + @apply absolute left-0 top-px bottom-0 right-4 flex items-center form-py-input overflow-hidden; +} + +.vfb-field-wrapper { + @apply flex items-center w-full pl-2.5 leading-none; +} + +.vfb-field-wrapper-root { + @apply pt-1.5 pb-0.5 font-semibold uppercase; +} + +.vfb-field-wrapper-disabled { + @apply opacity-50; +} + +.vfb-field-spacing { + @apply whitespace-nowrap; +} + +.vfb-field-selected.vfb-field-pointed .vfb-field-icon, .vfb-field-selected.vfb-field-pointed .vfb-field-chevron, .vfb-field-selected.vfb-field-pointed .vfb-field-text, .vfb-field-selected.vfb-field-pointed .vfb-field-text-secondary, +.vfb-field-selected .vfb-field-icon, +.vfb-field-selected .vfb-field-chevron, +.vfb-field-selected .vfb-field-text, +.vfb-field-selected .vfb-field-text-secondary { + @apply text-white dark:text-white; +} + +.vfb-field-icon-container { + @apply relative bg-transparent text-gray-500 rounded flex items-center justify-center text-xs w-4.5 h-4.5 flex-shrink-0 flex-grow-0 mr-1.5; +} + +.vfb-field-icon { + @apply max-w-5 max-h-5 text-primary-500; +} + +.vfb-field-chevron-container { + @apply relative bg-transparent text-black rounded flex items-center justify-center text-xs w-4.5 h-4.5 flex-shrink-0 flex-grow-0 mr-px -ml-4.75; +} + +.vfb-field-chevron-container-sub { + @apply relative; +} + +.vfb-field-chevron { + @apply text-xxs; +} + +.vfb-field-text { + @apply text-black justify-center overflow-x-hidden overflow-y-visible; +} + +.vfb-field-text-primary { + @apply text-sm leading-tighter pr-1 h-4 whitespace-nowrap overflow-hidden text-ellipsis; +} + +.vfb-field-text-secondary { + @apply text-gray-500 leading-none pb-px text-xs italic dark:text-dark-500 whitespace-nowrap pr-1 overflow-hidden text-ellipsis; +} + +.vfb-config-panel-container { + @apply overflow-y-auto overflow-x-hidden absolute inset-0 z-1 px-5 pb-6 bg-white transition transform duration-150 dark:bg-dark-800; +} + +.vfb-config-panel-container-hidden { + @apply translate-x-full; +} +.vfb-config-panel-container-hidden.vfb-config-panel-container-left { + @apply -translate-x-full; +} + +.vfb-config-panel-header-container { + @apply flex justify-between items-center px-5 py-4 border-b border-gray-200 bg-gray-100 -mx-5 dark:bg-dark-700; +} + +.vfb-config-panel-header { + @apply flex items-center justify-between w-full; +} + +.vfb-config-panel-header-wrapper-left { + @apply flex items-center; +} + +.vfb-config-panel-header-wrapper-right { + @apply flex items-center; +} + +.vfb-config-panel-header-close { + @apply mt-0.5 mr-2 text-gray-400 transition-colors hover:text-gray-800 cursor-pointer dark:text-dark-400 dark:hover:text-dark-300; +} + +.vfb-config-panel-header-label { + @apply text-xl; +} + +.vfb-config-panel-header-clone, +.vfb-config-panel-header-remove, +.vfb-config-panel-header-collapse { + @apply flex items-center justify-center h-full text-gray-500 transition-colors cursor-pointer hover:text-gray-600 dark:text-dark-400 hover:dark:text-dark-300; +} + +.vfb-config-panel-header-clone, +.vfb-config-panel-header-remove { + @apply mr-3; +} + +.vfb-config-panel-header-clone { + @apply text-0.5md; +} + +.vfb-config-form *, .vfb-config-form :before, .vfb-config-form :after, .vfb-config-form :root { + --vf-gutter-sm: 0.5rem; + --vf-min-height-input-sm: 2.125rem; + --vf-py-input-sm: 0.375rem; + --vf-px-input-sm: 0.675rem; + --vf-radius-input: 6px; + --vf-bg-input: var(--vf-gray-100); + --vf-bg-passive: var(--vf-gray-200); + --vf-border-color-passive: var(--vf-gray-200); + --vf-border-color-input: var(--vf-gray-200); + --vf-color-input: var(--vf-gray-900); + --vf-color-placeholder: var(--vf-gray-400); + --vf-radius-checkbox-sm: 4px; +} + +.dark .vfb-config-form *, .dark .vfb-config-form :before, .dark .vfb-config-form :after, .dark .vfb-config-form :root { + --vf-primary: theme("colors.dark.550"); + --vf-on-primary: #ffffff; + --vf-ring-color: #ffffff66; + --vf-bg-input: theme("colors.dark.700"); + --vf-bg-passive: theme("colors.dark.600"); + --vf-bg-selected: theme("colors.dark.550"); + --vf-border-color-passive: theme("colors.dark.600"); + --vf-border-color-input: theme("colors.dark.700"); + --vf-bg-icon: theme("colors.dark.500"); + --vf-color-muted: theme("colors.dark.400"); + --vf-color-input: #ffffff; + --vf-color-placeholder: theme("colors.dark.400"); +} +.dark .vfb-config-slider *, .dark .vfb-config-slider :before, .dark .vfb-config-slider :after, .dark .vfb-config-slider :root { + --vf-primary: theme("colors.primary.500"); + --vf-bg-passive:theme("colors.dark.900"); + --vf-bg-slider-handle: #ffffff; + --vf-shadow-handles: 0px 0px 0px 0px theme("colors.dark.900"); + --vf-shadow-handles-hover: 0px 0px 0px 2px theme("colors.dark.500"); + --vf-shadow-handles-focus: 0px 0px 0px 2px theme("colors.dark.300"); +} +.dark .vfb-config-toggle *, .dark .vfb-config-toggle :before, .dark .vfb-config-toggle :after, .dark .vfb-config-toggle :root { + --vf-primary: theme("colors.primary.500"); + --vf-bg-toggle-handle: #ffffff; + --vf-shadow-handles: 0px 0px 0px 0px theme("colors.dark.900"); + --vf-shadow-handles-hover: 0px 0px 0px 2px theme("colors.dark.500"); + --vf-shadow-handles-focus: 0px 0px 0px 2px theme("colors.dark.300"); +} +.dark .vfb-config-list-remove *, .dark .vfb-config-list-remove :before, .dark .vfb-config-list-remove :after, .dark .vfb-config-list-remove :root { + --vf-color-passive: #ffffff !important; +} +.dark .vfb-config-datepicker .flatpickr-calendar, .dark .vfb-config-datepicker .flatpickr-calendar *, .dark .vfb-config-datepicker .flatpickr-calendar :before, .dark .vfb-config-datepicker .flatpickr-calendar :after, .dark .vfb-config-datepicker .flatpickr-calendar :root { + --vf-color-input: #000000; +} + +.vfb-config-toggle + .vfb-config-toggle { + @apply -mt-2; +} + +.vfb-config-form-header { + @apply text-black -mx-5 -mt-px text-0.5md font-semibold px-5 py-2 flex items-center justify-between cursor-pointer col-span-12 border-t border-b border-gray-150 bg-gray-50 dark:bg-dark-700 dark:border-dark-600 dark:text-white; +} + +.vfb-config-form-header-first { + @apply border-t-0-imp; +} + +.vfb-config-form-header-non-collapsible { + @apply cursor-auto-imp; +} + +.vfb-config-form-header-collapse-container { + @apply text-xs mr-1 order-2 text-gray-400 dark:text-dark-400; +} + +.vfb-config-form-header-collapse-loading { + @apply animate-spin; +} + +.vfb-config-panel-input-language { + @apply text-gray-400 font-bold text-0.5xs flex items-start pt-2.25 pr-1.5 uppercase order-1 cursor-text select-none dark:text-dark-400; +} +.vfb-config-panel-input-language + input, .vfb-config-panel-input-language + textarea { + @apply pr-1; +} + +.vfb-config-panel-input-language-editor { + @apply text-gray-400 font-bold text-0.5xs uppercase cursor-text select-none bg-gray-100 bg-opacity-50 absolute bottom-1.5 right-2 leading-none p-0.5 dark:bg-dark-700 dark:text-dark-400; +} + +.vfb-elements-container { + @apply absolute inset-0; +} +.vfb-elements-container-no-categories .vfb-elements-wrapper { + @apply top-14.5; +} +.vfb-elements-container-no-categories .vfb-elements-wrapper .vfb-element-container:first-of-type { + @apply mt-0; +} + +.vfb-elements-container-no-search .vfb-elements-category-container { + @apply mt-1; +} +.vfb-elements-container-no-search .vfb-elements-wrapper { + @apply top-16; +} +.vfb-elements-container-no-search .vfb-elements-wrapper .vfb-element-container:first-of-type { + @apply mt-0; +} +.vfb-elements-container-no-search.vfb-elements-container-no-categories .vfb-elements-wrapper { + @apply top-0 pt-1; +} +.vfb-elements-container-no-search.vfb-elements-container-no-categories .vfb-elements-wrapper .vfb-element-container:first-of-type { + @apply mt-2; +} + +.vfb-elements-top { + @apply pt-4 px-5 pb-2; +} + +.vfb-elements-search-container { + @apply relative; +} + +.vfb-elements-search-input { + @apply bg-gray-100 pl-8 pr-3 py-1.25 rounded-lg placeholder-gray-400 placeholder-opacity-100 w-full dark:bg-dark-700 dark:placeholder-dark-500 dark:text-white; +} + +.vfb-elements-search-icon { + @apply absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-dark-400; +} + +.vfb-elements-search-remove-icon-container { + @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer dark:text-dark-400; +} + +.vfb-elements-category-container { + @apply mt-4; +} + +.vfb-elements-wrapper { + @apply absolute top-26.25 bottom-0 left-0 right-0 overflow-y-auto px-5; +} + +.vfb-element-container { + @apply flex items-center -ml-2.5 -mr-2.5 px-2.5 py-2.5 my-2 border border-primary-500 bg-primary-500 bg-opacity-0 border-opacity-0 duration-300 rounded-lg transition-shadow shadow-none duration-300; +} + +.vfb-element-container-enabled { + @apply cursor-pointer hover:shadow-box-strong dark:hover:shadow-box-strong-dark; +} + +.vfb-element-container-disabled { + @apply opacity-50 cursor-not-allowed; +} + +.vfb-element-icon-container { + @apply bg-gray-100 text-gray-500 rounded flex items-center justify-center text-0.5sm w-8 h-8 flex-shrink-0 flex-grow-0 mr-3 dark:bg-dark-600 dark:text-dark-300; +} + +.vfb-element-icon { + @apply dark:text-dark-300 max-w-5 max-h-5; +} + +.vfb-element-text-label { + @apply font-semibold leading-tighter text-gray-800 dark:text-white; +} + +.vfb-element-text-description { + @apply text-gray-500 text-0.5sm leading-snug dark:text-dark-500; +} + +.vfb-panels-container-tabs .vfb-elements-top { + @apply pt-3.5; +} +.vfb-panels-container-tabs .vfb-elements-wrapper { + @apply top-24.75; +} +.vfb-panels-container-tabs .vfb-elements-category-container { + @apply mt-3.25; +} +.vfb-panels-container-tabs .vfb-element-container:first-of-type { + @apply mt-1; +} +.vfb-panels-container-tabs .vfb-elements-container-no-categories .vfb-elements-wrapper { + @apply top-14; +} +.vfb-panels-container-tabs .vfb-elements-container-no-search .vfb-elements-category-container { + @apply mt-0; +} +.vfb-panels-container-tabs .vfb-elements-container-no-search .vfb-elements-wrapper { + @apply top-14; +} +.vfb-panels-container-tabs .vfb-elements-container-no-search.vfb-elements-container-no-categories .vfb-elements-wrapper { + @apply top-10 pt-0; +} +.vfb-panels-container-tabs .vfb-elements-container-no-search.vfb-elements-container-no-categories .vfb-elements-wrapper .vfb-element-container:first-of-type { + @apply mt-2; +} + +.vfb-tree-container { + @apply absolute inset-0; +} + +.vfb-tree-top { + @apply pt-4 px-5 pb-2 w-full flex; +} + +.vfb-panels-container-tabs .vfb-tree-top { + @apply pt-3.5; +} +.vfb-panels-container-tabs .vfb-tree-wrapper { + @apply top-14; +} + +.vfb-tree-search-container { + @apply relative flex-1; +} + +.vfb-tree-search-input { + @apply bg-gray-100 pl-8 pr-3 py-1.25 rounded-lg placeholder-gray-400 placeholder-opacity-100 w-full dark:bg-dark-700 dark:placeholder-dark-500 dark:text-white; +} + +.vfb-tree-search-icon { + @apply absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-dark-400; +} + +.vfb-tree-search-remove-icon-container { + @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer dark:text-dark-400; +} + +.vfb-tree-toggle-all-container { + @apply flex-grow-0 flex-shrink-0 flex items-center justify-center ml-2 transition text-gray-400 hover:text-gray-500 text-0.5md vfb-tooltip-group relative cursor-pointer dark:text-dark-500 hover:dark:text-dark-400; +} + +.vfb-tree-wrapper { + @apply absolute pt-1 top-14 bottom-0 left-0 right-0 overflow-y-auto px-5; +} + +.vfb-tree-item-container { + @apply py-px; +} + +.vfb-tree-item-container-child { + @apply relative; +} +.vfb-tree-item-container-child:before { + content: ""; + @apply h-px bg-gray-300 absolute -left-2 w-2.5 top-3.75 dark:bg-dark-600; +} + +.vfb-tree-item-wrapper { + @apply relative flex items-center text-gray-800 dark:text-white -ml-0.5 -mr-0.5 px-0.5 py-0.5 border border-primary-500 z-1 bg-white bg-opacity-0 border-opacity-0 rounded-lg shadow-none dark:bg-dark-800 dark:bg-opacity-0; +} + +.vfb-tree-item-wrapper-enabled { + @apply cursor-pointer hover:bg-opacity-100 hover:shadow-box-strong-small dark:hover:shadow-box-strong-small-dark; +} + +.vfb-tree-item-wrapper-disabled { + @apply cursor-default; +} + +.vfb-tree-item-wrapper-selected { + @apply text-primary-500 dark:text-primary-500; +} + +.vfb-tree-item-area-top { + @apply absolute top-0 left-0 right-0 h-4 bg-green-500 bg-opacity-0 z-1; +} +.vfb-tree-item-area-top.vfb-tree-item-area-top-first-child { + @apply -top-3.75 h-8; +} +.vfb-tree-item-area-top.vfb-tree-item-area-top-first-child .vfb-tree-item-drag-line-top { + @apply top-3.25; +} +.vfb-tree-item-area-top.vfb-tree-item-area-top-dragging-page { + @apply bottom-1/2 h-auto; +} +.vfb-tree-item-area-top.vfb-tree-item-area-top-adding-page { + @apply top-0 bottom-0 h-auto; +} +.vfb-tree-item-area-top.vfb-tree-item-area-top-adding-page .vfb-tree-item-drag-line-top { + @apply top-8 mt-0.5 left-5 right-5; +} + +.vfb-tree-item-drag-line-top { + @apply bg-primary-500 h-1 rounded-full absolute -top-0.5 left-0 right-0 pointer-events-none hidden; +} + +.vfb-tree-item-area-bottom { + @apply absolute bottom-0 left-0 right-0 h-4 bg-blue-500 bg-opacity-0 z-1; +} +.vfb-tree-item-area-bottom.vfb-tree-item-area-bottom-with-children { + @apply h-2 bg-purple-500 bg-opacity-0 z-1; +} +.vfb-tree-item-area-bottom.vfb-tree-item-area-bottom-dragging-page { + @apply top-1/2 h-auto; +} + +.vfb-tree-item-drag-line-bottom { + @apply bg-primary-500 h-1 rounded-full absolute -bottom-0.5 left-0 right-0 pointer-events-none hidden; +} + +.vfb-tree-item-area-inside { + @apply absolute bottom-1.5 left-4 right-0 h-2.5 bg-red-500 bg-opacity-0 z-1; +} +.vfb-tree-item-area-inside.vfb-tree-item-area-inside-empty { + @apply z-2; +} + +.vfb-tree-item-drag-line-inside { + @apply bg-primary-500 h-1 rounded-full absolute -bottom-2 left-0 right-0 pointer-events-none hidden; +} + +.vfb-tree-item-drag-line-visible { + @apply block; +} + +.vfb-tree-item-icon-container { + @apply relative bg-gray-100 text-gray-500 rounded flex items-center justify-center text-xs w-6 h-6 flex-shrink-0 flex-grow-0 mr-2 dark:bg-dark-600 dark:text-dark-300; +} +.vfb-tree-item-icon-container:before { + content: ""; + @apply bg-white rounded w-6 h-6 absolute -z-1 dark:bg-dark-600; +} + +.vfb-tree-item-icon-container-list, +.vfb-tree-item-icon-container-repeat { + @apply bg-repeater-500 bg-opacity-12 text-repeater-500 dark:bg-repeater-500 dark:text-repeater-500 dark:bg-opacity-30; +} + +.vfb-tree-item-wrapper-selected .vfb-tree-item-icon-container, +.vfb-tree-item-wrapper-selected .vfb-tree-item-icon-container-repeat { + @apply text-primary-500 bg-primary-500 bg-opacity-20; +} +.vfb-tree-item-wrapper-selected .vfb-tree-item-text-secondary { + @apply text-primary-500 text-opacity-70; +} + +.vfb-tree-item-wrapper-being-moved { + @apply opacity-60 border-dashed border-gray-400 border; +} + +.vfb-tree-item-icon { + @apply max-w-5 max-h-5; +} + +.vfb-tree-item-icon-repeat { + @apply absolute -right-0.75 -bottom-0.75 text-0.5sm bg-white shadow-small rounded-full p-0.5 dark:bg-dark-600; +} + +.vfb-tree-item-text { + @apply text-sm leading-3 overflow-hidden whitespace-nowrap text-ellipsis h-6.5 justify-center inline-flex flex-col pointer-events-none; +} + +.vfb-tree-item-text-secondary { + @apply text-gray-500 text-xs italic dark:text-dark-500; +} + +.vfb-tree-item-actions { + @apply text-0.5sm absolute py-1 px-1.5 right-1.5 top-1/2 transform -translate-y-1/2 hidden leading-none rounded-full bg-white bg-opacity-80 dark:bg-dark-800 dark:bg-opacity-80; +} +.vfb-tree-item-actions .vfb-tooltip { + @apply -bottom-1; +} + +.vfb-tree-item-wrapper:hover .vfb-tree-item-actions { + @apply flex; +} + +.vfb-tree-item-action { + @apply transition-colors text-gray-400 hover:text-gray-500 ml-1.5 vfb-tooltip-group dark:text-dark-500 dark:hover:text-dark-400; +} +.vfb-tree-item-action .vfb-tooltip { + @apply -bottom-1; +} +.vfb-tree-item-action:first-of-type { + @apply ml-0; +} + +.vfb-tree-item-children-toggle-wrapper { + @apply absolute -left-4 top-1.5 -ml-px mt-px p-1 cursor-pointer; +} + +.vfb-tree-item-children-toggle { + @apply text-xxs border border-gray-400 w-2.25 h-2.25 flex items-center justify-center bg-white relative rounded-sm dark:bg-dark-500 dark:border-gray-500; +} +.vfb-tree-item-children-toggle:after { + content: ""; + @apply h-px absolute top-0.5 mt-px left-px right-px bg-gray-600 z-1 dark:bg-dark-1000; +} + +.vfb-tree-item-children-toggle-collapsed:before { + content: ""; + @apply w-px absolute left-0.5 ml-px top-px bottom-px bg-gray-600 z-1 dark:bg-dark-1000; +} + +.vfb-tree-item-children { + @apply ml-4 relative; +} +.vfb-tree-item-children:before { + content: ""; + @apply absolute -left-2.25 -top-3 bottom-4.5 w-px bg-gray-300 dark:bg-dark-600; +} + +.vfb-tree-no-results { + @apply text-gray-500 mt-1 ml-2; +} + +.vfb-model-preview-container { + @apply absolute px-0 inset-0 overflow-y-auto overflow-x-hidden transition transform duration-150 bg-gray-900 dark:bg-dark-1000; +} + +.vfb-model-preview-container-hidden { + @apply translate-x-full; +} +.vfb-model-preview-container-hidden.vfb-model-preview-container-left { + @apply -translate-x-full; +} + +.vfb-model-preview-wrapper { + @apply flex flex-col items-start text-0.5md text-white text-0.5md; +} + +.vfb-model-preview-warning { + @apply bg-red-100 text-red-500 mt-6 mx-6 px-4 py-3 rounded leading-tight overflow-x-scroll; + max-width: calc(100% - 44px); +} + +.vfb-model-preview-warning-text { + @apply my-1; +} + +.vfb-model-preview-warning-ul { + @apply list-disc pl-5 leading-tight; +} + +.vfb-model-preview-warning-li { + @apply text-xs font-semibold -ml-1 pr-4 underline cursor-pointer; +} + +.vfb-model-preview-tabs-container { + @apply flex pt-6 px-6 font-semibold; +} + +.vfb-model-preview-tab { + @apply cursor-pointer; +} + +.vfb-model-preview-tab-active { + @apply border-b border-primary-500; +} + +.vfb-model-preview-tab-inactive { + @apply opacity-50; +} + +.vfb-model-preview-tab-data { + @apply mr-4; +} + +.vfb-model-preview-close { + @apply absolute w-10 h-10 top-3.5 right-2 flex items-center justify-center cursor-pointer transition opacity-50 hover:opacity-100; +} + +.vfb-model-preview-code-container { + @apply overflow-x-auto w-full max-w-full; +} + +.vfb-model-preview-code-reset { + @apply bg-white bg-opacity-10 px-4 py-1.5 rounded-lg transition hover:bg-opacity-20 ml-6 cursor-pointer; +} + +.vfb-export-container { + @apply max-w-100vw-194.5 mx-auto my-4; +} + +.vfb-export-code { + @apply rounded-lg shadow-box-circle mx-auto; +} + +.vfb-export-copy-container { + @apply hidden; +} + +.vfb-export-copy-icon { + @apply mr-1; +} + +.vfb-export-copied-container { + @apply hidden; +} + +.vfb-export-copied-icon { + @apply mr-1; +} + +.vfb-panels-container-tabs .vfb-panels-tabs { + @apply flex items-center text-0.5md dark:text-white; +} +.vfb-panels-container-tabs .vfb-panels-tab { + @apply flex-1 text-center py-2.5 cursor-pointer border-b border-r border-r-gray-200 dark:border-r-dark-600; +} +.vfb-panels-container-tabs .vfb-panels-tab.is-active { + @apply bg-white border-b-white dark:bg-dark-700 dark:border-b-dark-700; +} +.vfb-panels-container-tabs .vfb-panels-tab.is-inactive { + @apply bg-gray-100 border-b-gray-200 dark:bg-dark-750 dark:border-b-dark-600; +} +.vfb-panels-container-tabs .vfb-panels-tab.is-last { + @apply border-r-0; +} +.vfb-panels-container-tabs .vfb-panels-wrapper { + @apply absolute top-10.875 left-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden z-0; +} +.vfb-panels-container-tabs .vfb-panel { + @apply px-5 pb-6; +} + +.vfb-panels-container-icons { + @apply flex; +} +.vfb-panels-container-icons .vfb-panels-tabs { + @apply flex items-center flex-col w-12 absolute top-0 bottom-0 left-0 border-r border-gray-100 bg-white dark:bg-dark-750 dark:border-dark-750 z-1; +} +.vfb-panels-container-icons .vfb-panels-tab { + @apply relative vfb-tooltip-group flex h-12 w-12 items-center justify-center transition-colors text-lg border-x-3 border-transparent cursor-pointer; +} +.vfb-panels-container-icons .vfb-panels-tab.is-active { + @apply border-l-primary-500 text-primary-500; +} +.vfb-panels-container-icons .vfb-panels-tab.is-inactive { + @apply text-gray-400 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300; +} +.vfb-panels-container-icons .vfb-panels-wrapper { + @apply flex absolute top-0 left-12 right-0 bottom-0 overflow-y-auto overflow-x-hidden z-0; +} +.vfb-panels-container-icons .vfb-panel { + @apply px-5 pb-6 flex-1; +} + +.vfb-right-container .vfb-panels-container-icons .vfb-panels-tabs { + @apply left-auto right-0 border-r-0 border-l; +} +.vfb-right-container .vfb-panels-container-icons .vfb-panels-tab.is-active { + @apply border-l-transparent border-r-primary-500; +} +.vfb-right-container .vfb-panels-container-icons .vfb-panels-wrapper { + @apply left-auto right-12; +} + +.vfb-panel-form { + @apply mt-px; +} + +.vfb-panel-theme { + @apply mt-px h-full; +} + +.vfb-panel-export { + @apply h-full; +} + +.vfb-panels-forms-theme-size-selector-container { + @apply bg-white sticky -top-0.5 -mx-5 px-5 py-3 z-2 border-t border-b border-gray-200 dark:bg-dark-800 dark:border-dark-600; +} +.vfb-panels-forms-theme-size-selector-container.vfb-panels-forms-theme-size-selector-container-no-themes { + @apply border-t-0 mt-0; +} +.vfb-panels-forms-theme-size-selector-container.vfb-util-props-group { + @apply mt-0; +} + +.vfb-preview-container { + @apply w-full mx-auto flex flex-col items-center transition-all my-8 duration-300; +} +.vfb-preview-container.vfb-hidden { + @apply hidden; +} + +.vfb-preview-wrapper { + @apply bg-white rounded-lg shadow-box-circle mx-auto w-full relative transition-all p-10; +} + +.vfb-preview-drag-wrapper { + @apply bg-primary-500 absolute h-1 rounded-full pointer-events-none -left-2 -right-2 -top-0.5 mt-8; +} + +.vfb-preview-drag-label { + @apply bg-primary-500 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 px-2 pt-0.5 pb-0.75 rounded-full leading-none text-0.5sm text-white; +} + +.vfb-preview-empty-container { + @apply rounded-xl text-center py-8 leading-relaxed transition duration-300 bg-primary-500; +} + +.vfb-preview-empty-container-active { + @apply bg-opacity-10; +} + +.vfb-preview-empty-container-inactive { + @apply bg-opacity-0; +} + +.vfb-preview-empty-icon-container { + color: var(--vf-primary); + @apply mx-auto mb-6 text-6xl; +} + +.vfb-preview-empty-title { + @apply font-semibold text-[18px]; +} + +.vfb-preview-empty-description { + @apply text-gray-500; +} + +.vfb-preview-form-with-tabs { + @apply -mt-2; +} + +.vfb-preview-container-default .col-span-1 { + grid-column: span 1/span 1 !important; +} +.vfb-preview-container-default .col-span-2 { + grid-column: span 2/span 2 !important; +} +.vfb-preview-container-default .col-span-3 { + grid-column: span 3/span 3 !important; +} +.vfb-preview-container-default .col-span-4 { + grid-column: span 4/span 4 !important; +} +.vfb-preview-container-default .col-span-5 { + grid-column: span 5/span 5 !important; +} +.vfb-preview-container-default .col-span-6 { + grid-column: span 6/span 6 !important; +} +.vfb-preview-container-default .col-span-7 { + grid-column: span 7/span 7 !important; +} +.vfb-preview-container-default .col-span-8 { + grid-column: span 8/span 8 !important; +} +.vfb-preview-container-default .col-span-9 { + grid-column: span 9/span 9 !important; +} +.vfb-preview-container-default .col-span-10 { + grid-column: span 10/span 10 !important; +} +.vfb-preview-container-default .col-span-11 { + grid-column: span 11/span 11 !important; +} +.vfb-preview-container-default .col-span-12 { + grid-column: span 12/span 12 !important; +} +.vfb-preview-container-default .form-text-type label.text-type\:form-pt-input-border { + padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-default label.form-pr-gutter { + padding-right: var(--vf-gutter) !important; +} +.vfb-preview-container-default label.pb-0 { + padding-bottom: 0 !important; +} +.vfb-preview-container-default label.form-pb-gutter\/3 { + padding-bottom: calc(var(--vf-gutter) / 3) !important; +} +.vfb-preview-container-default .form-text-type label.form-pt-0, .vfb-preview-container-default :not(.form-text-type) label.form-pt-0 { + padding-top: 0 !important; +} +.vfb-preview-container-default label.form-pr-0 { + padding-right: 0 !important; +} +.vfb-preview-container-default .form-text-type label.text-type\:form-pt-input-border-sm { + padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-default label.form-pr-gutter-sm { + padding-right: var(--vf-gutter-sm) !important; +} +.vfb-preview-container-default label.form-pb-gutter\/3-sm { + padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; +} +.vfb-preview-container-default .form-text-type label.text-type\:form-pt-input-border-lg { + padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-default label.form-pr-gutter-lg { + padding-right: var(--vf-gutter-lg) !important; +} +.vfb-preview-container-default label.form-pb-gutter\/3-lg { + padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; +} + +.vfb-preview-container-tablet .col-span-1 { + grid-column: span 1/span 1 !important; +} +.vfb-preview-container-tablet .col-span-2 { + grid-column: span 2/span 2 !important; +} +.vfb-preview-container-tablet .col-span-3 { + grid-column: span 3/span 3 !important; +} +.vfb-preview-container-tablet .col-span-4 { + grid-column: span 4/span 4 !important; +} +.vfb-preview-container-tablet .col-span-5 { + grid-column: span 5/span 5 !important; +} +.vfb-preview-container-tablet .col-span-6 { + grid-column: span 6/span 6 !important; +} +.vfb-preview-container-tablet .col-span-7 { + grid-column: span 7/span 7 !important; +} +.vfb-preview-container-tablet .col-span-8 { + grid-column: span 8/span 8 !important; +} +.vfb-preview-container-tablet .col-span-9 { + grid-column: span 9/span 9 !important; +} +.vfb-preview-container-tablet .col-span-10 { + grid-column: span 10/span 10 !important; +} +.vfb-preview-container-tablet .col-span-11 { + grid-column: span 11/span 11 !important; +} +.vfb-preview-container-tablet .col-span-12 { + grid-column: span 12/span 12 !important; +} +.vfb-preview-container-tablet .sm\:col-span-1 { + grid-column: span 1/span 1 !important; +} +.vfb-preview-container-tablet .sm\:col-span-2 { + grid-column: span 2/span 2 !important; +} +.vfb-preview-container-tablet .sm\:col-span-3 { + grid-column: span 3/span 3 !important; +} +.vfb-preview-container-tablet .sm\:col-span-4 { + grid-column: span 4/span 4 !important; +} +.vfb-preview-container-tablet .sm\:col-span-5 { + grid-column: span 5/span 5 !important; +} +.vfb-preview-container-tablet .sm\:col-span-6 { + grid-column: span 6/span 6 !important; +} +.vfb-preview-container-tablet .sm\:col-span-7 { + grid-column: span 7/span 7 !important; +} +.vfb-preview-container-tablet .sm\:col-span-8 { + grid-column: span 8/span 8 !important; +} +.vfb-preview-container-tablet .sm\:col-span-9 { + grid-column: span 9/span 9 !important; +} +.vfb-preview-container-tablet .sm\:col-span-10 { + grid-column: span 10/span 10 !important; +} +.vfb-preview-container-tablet .sm\:col-span-11 { + grid-column: span 11/span 11 !important; +} +.vfb-preview-container-tablet .sm\:col-span-12 { + grid-column: span 12/span 12 !important; +} +.vfb-preview-container-tablet .form-text-type label.text-type\:form-pt-input-border { + padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-tablet label.form-pr-gutter { + padding-right: var(--vf-gutter) !important; +} +.vfb-preview-container-tablet label.pb-0 { + padding-bottom: 0 !important; +} +.vfb-preview-container-tablet label.form-pb-gutter\/3 { + padding-bottom: calc(var(--vf-gutter) / 3) !important; +} +.vfb-preview-container-tablet .form-text-type label.form-pt-0, .vfb-preview-container-tablet :not(.form-text-type) label.form-pt-0 { + padding-top: 0 !important; +} +.vfb-preview-container-tablet label.form-pr-0 { + padding-right: 0 !important; +} +.vfb-preview-container-tablet .form-text-type label.text-type\:form-pt-input-border-sm { + padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-tablet label.form-pr-gutter-sm { + padding-right: var(--vf-gutter-sm) !important; +} +.vfb-preview-container-tablet label.form-pb-gutter\/3-sm { + padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; +} +.vfb-preview-container-tablet .form-text-type label.text-type\:form-pt-input-border-lg { + padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-tablet label.form-pr-gutter-lg { + padding-right: var(--vf-gutter-lg) !important; +} +.vfb-preview-container-tablet label.form-pb-gutter\/3-lg { + padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; +} +.vfb-preview-container-tablet .form-text-type label.sm\:text-type\:form-pt-input-border { + padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-tablet label.sm\:form-pr-gutter { + padding-right: var(--vf-gutter) !important; +} +.vfb-preview-container-tablet label.sm\:pb-0 { + padding-bottom: 0 !important; +} +.vfb-preview-container-tablet label.sm\:form-pb-gutter\/3 { + padding-bottom: calc(var(--vf-gutter) / 3) !important; +} +.vfb-preview-container-tablet .form-text-type label.sm\:form-pt-0, .vfb-preview-container-tablet :not(.form-text-type) label.sm\:form-pt-0 { + padding-top: 0 !important; +} +.vfb-preview-container-tablet label.sm\:form-pr-0 { + padding-right: 0 !important; +} +.vfb-preview-container-tablet .form-text-type label.sm\:text-type\:form-pt-input-border-sm { + padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-tablet label.sm\:form-pr-gutter-sm { + padding-right: var(--vf-gutter-sm) !important; +} +.vfb-preview-container-tablet label.sm\:form-pb-gutter\/3-sm { + padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; +} +.vfb-preview-container-tablet .form-text-type label.sm\:text-type\:form-pt-input-border-lg { + padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-tablet label.sm\:form-pr-gutter-lg { + padding-right: var(--vf-gutter-lg) !important; +} +.vfb-preview-container-tablet label.sm\:form-pb-gutter\/3-lg { + padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; +} + +.vfb-preview-container-desktop .sm\:col-span-1 { + grid-column: span 1/span 1 !important; +} +.vfb-preview-container-desktop .sm\:col-span-2 { + grid-column: span 2/span 2 !important; +} +.vfb-preview-container-desktop .sm\:col-span-3 { + grid-column: span 3/span 3 !important; +} +.vfb-preview-container-desktop .sm\:col-span-4 { + grid-column: span 4/span 4 !important; +} +.vfb-preview-container-desktop .sm\:col-span-5 { + grid-column: span 5/span 5 !important; +} +.vfb-preview-container-desktop .sm\:col-span-6 { + grid-column: span 6/span 6 !important; +} +.vfb-preview-container-desktop .sm\:col-span-7 { + grid-column: span 7/span 7 !important; +} +.vfb-preview-container-desktop .sm\:col-span-8 { + grid-column: span 8/span 8 !important; +} +.vfb-preview-container-desktop .sm\:col-span-9 { + grid-column: span 9/span 9 !important; +} +.vfb-preview-container-desktop .sm\:col-span-10 { + grid-column: span 10/span 10 !important; +} +.vfb-preview-container-desktop .sm\:col-span-11 { + grid-column: span 11/span 11 !important; +} +.vfb-preview-container-desktop .sm\:col-span-12 { + grid-column: span 12/span 12 !important; +} +.vfb-preview-container-desktop .lg\:col-span-1 { + grid-column: span 1/span 1 !important; +} +.vfb-preview-container-desktop .lg\:col-span-2 { + grid-column: span 2/span 2 !important; +} +.vfb-preview-container-desktop .lg\:col-span-3 { + grid-column: span 3/span 3 !important; +} +.vfb-preview-container-desktop .lg\:col-span-4 { + grid-column: span 4/span 4 !important; +} +.vfb-preview-container-desktop .lg\:col-span-5 { + grid-column: span 5/span 5 !important; +} +.vfb-preview-container-desktop .lg\:col-span-6 { + grid-column: span 6/span 6 !important; +} +.vfb-preview-container-desktop .lg\:col-span-7 { + grid-column: span 7/span 7 !important; +} +.vfb-preview-container-desktop .lg\:col-span-8 { + grid-column: span 8/span 8 !important; +} +.vfb-preview-container-desktop .lg\:col-span-9 { + grid-column: span 9/span 9 !important; +} +.vfb-preview-container-desktop .lg\:col-span-10 { + grid-column: span 10/span 10 !important; +} +.vfb-preview-container-desktop .lg\:col-span-11 { + grid-column: span 11/span 11 !important; +} +.vfb-preview-container-desktop .lg\:col-span-12 { + grid-column: span 12/span 12 !important; +} +.vfb-preview-container-desktop .form-text-type label.sm\:text-type\:form-pt-input-border { + padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-desktop label.sm\:form-pr-gutter { + padding-right: var(--vf-gutter) !important; +} +.vfb-preview-container-desktop label.sm\:pb-0 { + padding-bottom: 0 !important; +} +.vfb-preview-container-desktop label.sm\:form-pb-gutter\/3 { + padding-bottom: calc(var(--vf-gutter) / 3) !important; +} +.vfb-preview-container-desktop .form-text-type label.sm\:form-pt-0, .vfb-preview-container-desktop :not(.form-text-type) label.sm\:form-pt-0 { + padding-top: 0 !important; +} +.vfb-preview-container-desktop label.sm\:form-pr-0 { + padding-right: 0 !important; +} +.vfb-preview-container-desktop .form-text-type label.sm\:text-type\:form-pt-input-border-sm { + padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-desktop label.sm\:form-pr-gutter-sm { + padding-right: var(--vf-gutter-sm) !important; +} +.vfb-preview-container-desktop label.sm\:form-pb-gutter\/3-sm { + padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; +} +.vfb-preview-container-desktop .form-text-type label.sm\:text-type\:form-pt-input-border-lg { + padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-desktop label.sm\:form-pr-gutter-lg { + padding-right: var(--vf-gutter-lg) !important; +} +.vfb-preview-container-desktop label.sm\:form-pb-gutter\/3-lg { + padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; +} +.vfb-preview-container-desktop .form-text-type label.lg\:text-type\:form-pt-input-border { + padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-desktop label.lg\:form-pr-gutter { + padding-right: var(--vf-gutter) !important; +} +.vfb-preview-container-desktop label.lg\:pb-0 { + padding-bottom: 0 !important; +} +.vfb-preview-container-desktop label.lg\:form-pb-gutter\/3 { + padding-bottom: calc(var(--vf-gutter) / 3) !important; +} +.vfb-preview-container-desktop .form-text-type label.lg\:form-pt-0, .vfb-preview-container-desktop :not(.form-text-type) label.lg\:form-pt-0 { + padding-top: 0 !important; +} +.vfb-preview-container-desktop label.lg\:form-pr-0 { + padding-right: 0 !important; +} +.vfb-preview-container-desktop .form-text-type label.lg\:text-type\:form-pt-input-border-sm { + padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-desktop label.lg\:form-pr-gutter-sm { + padding-right: var(--vf-gutter-sm) !important; +} +.vfb-preview-container-desktop label.lg\:form-pb-gutter\/3-sm { + padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; +} +.vfb-preview-container-desktop .form-text-type label.lg\:text-type\:form-pt-input-border-lg { + padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; +} +.vfb-preview-container-desktop label.lg\:form-pr-gutter-lg { + padding-right: var(--vf-gutter-lg) !important; +} +.vfb-preview-container-desktop label.lg\:form-pb-gutter\/3-lg { + padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; +} + +.vfb-builder { + @apply h-full w-full flex min-h-98 overflow-y-hidden relative; +} + +.vfb-left-container { + @apply w-76 vfb-config-form flex-grow-0 flex-shrink-0 bg-white relative transition-all duration-500 transform z-1 dark:bg-dark-800 dark:text-white; +} +.vfb-left-container.vfb-left-container-before-load, .vfb-left-container.vfb-left-container-hidden { + @apply -ml-76; +} +.vfb-left-container.vfb-left-container-empty { + @apply w-0; +} +.vfb-left-container.vfb-left-container-empty.vfb-left-container-before-load { + @apply ml-0; +} +.vfb-left-container.vfb-left-container-has-icons { + @apply w-88; +} +.vfb-left-container.vfb-left-container-has-icons.vfb-left-container-before-load, .vfb-left-container.vfb-left-container-has-icons.vfb-left-container-hidden { + @apply -ml-88; +} +.vfb-left-container.vfb-left-container-has-form { + @apply w-85; +} +.vfb-left-container.vfb-left-container-has-form.vfb-left-container-before-load, .vfb-left-container.vfb-left-container-has-form.vfb-left-container-hidden { + @apply -ml-85; +} +.vfb-left-container.vfb-left-container-has-form.vfb-left-container-has-icons { + @apply w-97; +} +.vfb-left-container.vfb-left-container-has-form.vfb-left-container-has-icons.vfb-left-container-before-load, .vfb-left-container.vfb-left-container-has-form.vfb-left-container-has-icons.vfb-left-container-hidden { + @apply -ml-97; +} + +.vfb-center-container { + @apply flex-1 bg-gray-100 relative dark:bg-dark-900 min-w-120; +} + +.vfb-center-wrapper { + @apply absolute inset-0 overflow-y-auto px-16; +} + +.vfb-center-loader-container { + @apply w-full flex flex-col items-center justify-center h-full dark:text-white; +} + +.vfb-center-loader { + @apply mb-2; +} + +.vfb-center-loader-text-container { + @apply text-center; +} + +.vfb-right-container { + @apply w-76 vfb-config-form flex-grow-0 flex-shrink-0 bg-white relative transition-all duration-500 transform z-1 dark:bg-dark-800 dark:text-white; +} +.vfb-right-container.vfb-right-container-before-load, .vfb-right-container.vfb-right-container-hidden { + @apply -mr-76; +} +.vfb-right-container.vfb-right-container-empty { + @apply w-0; +} +.vfb-right-container.vfb-right-container-empty.vfb-right-container-before-load { + @apply mr-0; +} +.vfb-right-container.vfb-right-container-has-icons { + @apply w-88; +} +.vfb-right-container.vfb-right-container-has-icons.vfb-right-container-before-load, .vfb-right-container.vfb-right-container-has-icons.vfb-right-container-hidden { + @apply -ml-88; +} +.vfb-right-container.vfb-right-container-has-form { + @apply w-85; +} +.vfb-right-container.vfb-right-container-has-form.vfb-right-container-before-load, .vfb-right-container.vfb-right-container-has-form.vfb-right-container-hidden { + @apply -mr-85; +} +.vfb-right-container.vfb-right-container-has-form.vfb-right-container-has-icons { + @apply w-97; +} +.vfb-right-container.vfb-right-container-has-form.vfb-right-container-has-icons.vfb-right-container-before-load, .vfb-right-container.vfb-right-container-has-form.vfb-right-container-has-icons.vfb-right-container-hidden { + @apply -mr-97; +} + +.vfb-right-wrapper { + @apply absolute inset-0 overflow-x-hidden; +} + +.vfb-tabs-container { + @apply flex items-end relative; +} + +.vfb-tabs-container-sm { + @apply form-mb-gutter form-text-sm; +} + +.vfb-tabs-container-md { + @apply form-mb-gutter-lg form-text; +} + +.vfb-tabs-container-lg { + @apply form-mb-gutter-lg form-text-lg; +} + +.vfb-tabs-wrapper { + @apply flex justify-between flex-row overflow-x-auto pt-12 -mt-12; +} + +.vfb-tabs-remove-wrapper { + @apply flex justify-between absolute -left-4 top-2.5 vfb-tooltip-group; +} + +.vfb-tabs-remove-button { + @apply text-gray-300 cursor-pointer transition hover:text-gray-400; +} + +.vfb-tabs-add-wrapper { + @apply flex justify-between absolute -right-4 top-2.5 vfb-tooltip-group; +} + +.vfb-tabs-add-button { + @apply text-gray-300 text-sm cursor-pointer transition hover:text-gray-400; +} + +.vfb-tab-container { + @apply relative cursor-pointer border border-transparent bg-primary-500 bg-opacity-0 border-primary-500 border-opacity-0; +} +.vfb-tab-container.vfb-tab-container-hover { + @apply border-opacity-100; +} +.vfb-tab-container.vfb-tab-container-hover .vfb-tab-actions-container { + @apply flex opacity-100; +} + +.vfb-tab-container-editor:hover, .vfb-tab-container-editor:focus, .vfb-tab-container-editor.vfb-tab-container-moving { + @apply border-opacity-100 outline-none; +} +.vfb-tab-container-editor:hover .vfb-tab-actions-container, .vfb-tab-container-editor:focus .vfb-tab-actions-container, .vfb-tab-container-editor.vfb-tab-container-moving .vfb-tab-actions-container { + @apply flex opacity-100; +} +.vfb-tab-container-editor.vfb-tab-container-selected { + @apply border-opacity-100 bg-primary-500 bg-opacity-10; +} +.vfb-tab-container-editor.vfb-tab-container-selected .vfb-tab-actions-container { + @apply flex opacity-100; +} +.vfb-tab-container-editor.vfb-tab-container-moving { + @apply border-transparent relative; +} +.vfb-tab-container-editor.vfb-tab-container-moving:before { + content: ""; + @apply absolute inset-0 border border-primary-500 border-dashed; +} + +.vfb-tab-container-drop-left { + @apply relative; +} +.vfb-tab-container-drop-left:after { + content: ""; + @apply absolute left-0 top-0 bottom-0 w-0.5 bg-primary-500 rounded-full; +} + +.vfb-tab-container-drop-right { + @apply relative; +} +.vfb-tab-container-drop-right:after { + content: ""; + @apply absolute right-0 top-0 bottom-0 w-0.5 bg-primary-500 rounded-full; +} + +.vfb-tab-container-drop-middle { + @apply bg-opacity-10 rounded; +} + +.vfb-tab-container-conditional { + @apply text-gray-400; +} + +.vfb-tab-overlay { + @apply absolute inset-0 bg-primary-500 transition rounded; +} + +.vfb-tab-overlay-drag-over { + @apply z-1; +} + +.vfb-tab-overlay-highlighted { + @apply bg-opacity-10; +} + +.vfb-tab-overlay-not-highlighted { + @apply bg-opacity-0; +} + +.vfb-tab-area-left { + @apply absolute left-0 top-0 bottom-0 right-1/2; +} + +.vfb-tab-area-left-drag-over { + @apply z-1; +} + +.vfb-tab-area-left-drag-line { + @apply absolute left-0 top-0 bottom-0 w-0.5 bg-primary-500 -ml-px pointer-events-none rounded-full; +} + +.vfb-tab-area-right { + @apply absolute right-0 top-0 bottom-0 left-1/2; +} + +.vfb-tab-area-right-drag-over { + @apply z-1; +} + +.vfb-tab-area-right-drag-line { + @apply absolute right-0 top-0 bottom-0 w-0.5 bg-primary-500 -mr-px pointer-events-none rounded-full; +} + +.vfb-tab-wrapper { + @apply block border-b-2 relative bg-transparent whitespace-nowrap; +} + +.vfb-tab-wrapper-dragged { + @apply opacity-20; +} + +.vfb-tab-wrapper-active { + @apply form-border-color-primary; +} + +.vfb-tab-wrapper-inactive { + @apply border-transparent; +} + +.vfb-tab-wrapper-invalid { + @apply form-color-danger form-border-color-danger; +} + +.vfb-tab-wrapper-sm { + @apply py-1.5 px-3.5; +} + +.vfb-tab-wrapper-md { + @apply py-2 px-4; +} + +.vfb-tab-wrapper-lg { + @apply py-2 px-4; +} + +.vfb-tab-edit-label-wrapper { + @apply inline-block relative flex-grow flex-shrink h-full; +} + +.vfb-tab-edit-label-input { + @apply absolute inset-0 border-0 appearance-none p-0 box-border w-full whitespace-nowrap; +} + +.vfb-tab-edit-label-sizer { + @apply invisible whitespace-nowrap inline-block h-px relative -top-px; +} + +.vfb-tab-actions-container { + @apply absolute transform text-white flex hidden z-1; +} + +.vfb-tab-actions-container-left { + @apply top-0 -left-px -translate-y-full flex-row; +} + +.vfb-tab-actions-container-right { + @apply top-0 -right-px -translate-y-full flex-row; +} + +.vfb-tab-action { + @apply w-4 h-4 flex items-center justify-center bg-primary-500 text-xs cursor-pointer transition-colors relative hover:bg-primary-600 vfb-tooltip-group; +} + +.vfb-steps-container { + @apply form-steps; +} +.vfb-steps-container:before { + @apply top-1.75 mt-12; +} +.vfb-steps-container.vfb-steps-container-editor:before { + background-color: var(--vf-primary); +} + +.vfb-steps-container-sm { + @apply form-mb-gutter form-text-sm; +} + +.vfb-steps-container-md { + @apply form-mb-gutter-lg form-text; +} + +.vfb-steps-container-lg { + @apply form-mb-gutter-lg form-text-lg; +} + +.vfb-steps-wrapper { + @apply flex justify-between overflow-x-auto pt-12 -mt-12; +} + +.vfb-steps-remove-wrapper { + @apply flex justify-between absolute -left-6 top-11 mt-px vfb-tooltip-group; +} + +.vfb-steps-remove-button { + @apply text-gray-300 cursor-pointer transition hover:text-gray-400; +} + +.vfb-steps-add-wrapper { + @apply flex justify-between absolute -right-6 top-11 mt-px vfb-tooltip-group; +} + +.vfb-steps-add-button { + @apply text-gray-300 text-sm cursor-pointer transition hover:text-gray-400; +} + +.vfb-step-container { + @apply relative border-t border-b cursor-pointer border-transparent bg-primary-500 bg-opacity-0 border-primary-500 border-opacity-0 p-0; +} +.vfb-step-container.vfb-step-container-hover { + @apply border-opacity-100; +} +.vfb-step-container.vfb-step-container-hover .vfb-step-actions-container { + @apply flex opacity-100; +} +.vfb-step-container.vfb-step-container-drop-left { + @apply relative; +} +.vfb-step-container.vfb-step-container-drop-left:after { + content: ""; + @apply absolute left-0 top-0 bottom-0 right-auto w-0.5 bg-primary-500 rounded-full block; +} +.vfb-step-container.vfb-step-container-drop-right { + @apply relative; +} +.vfb-step-container.vfb-step-container-drop-right:after { + content: ""; + @apply absolute right-0 top-0 bottom-0 left-auto w-0.5 bg-primary-500 rounded-full block; +} + +.vfb-step-container-drop-middle { + @apply bg-opacity-10 rounded; +} + +.vfb-step-container-editor { + @apply border; +} +.vfb-step-container-editor:hover, .vfb-step-container-editor:focus, .vfb-step-container-editor.vfb-step-container-moving { + @apply border-primary-500 border-opacity-100 outline-none; +} +.vfb-step-container-editor:hover .vfb-step-actions-container, .vfb-step-container-editor:focus .vfb-step-actions-container, .vfb-step-container-editor.vfb-step-container-moving .vfb-step-actions-container { + @apply flex opacity-100; +} +.vfb-step-container-editor.vfb-step-container-selected { + @apply border-opacity-100 bg-primary-500 bg-opacity-10; +} +.vfb-step-container-editor.vfb-step-container-selected .vfb-step-actions-container { + @apply flex opacity-100; +} +.vfb-step-container-editor.vfb-step-container-moving { + @apply border-transparent relative; +} +.vfb-step-container-editor.vfb-step-container-moving:before { + content: ""; + @apply absolute inset-0 border border-primary-500 border-dashed block; +} + +.vfb-step-container-conditional { + @apply text-gray-400; +} + +.vfb-step-overlay { + @apply absolute inset-0 bg-primary-500 transition rounded; +} + +.vfb-step-overlay-drag-over { + @apply z-1; +} + +.vfb-step-overlay-highlighted { + @apply bg-opacity-10; +} + +.vfb-step-overlay-not-highlighted { + @apply bg-opacity-0; +} + +.vfb-step-area-left { + @apply absolute left-0 top-0 bottom-0 right-1/2; +} + +.vfb-step-area-left-drag-over { + @apply z-1; +} + +.vfb-step-area-left-drag-line { + @apply absolute left-0 -top-3 bottom-3 w-0.5 bg-primary-500 -ml-px pointer-events-none rounded-full; +} + +.vfb-step-area-right { + @apply absolute right-0 top-0 bottom-0 left-1/2; +} + +.vfb-step-area-right-drag-over { + @apply z-1; +} + +.vfb-step-area-right-drag-line { + @apply absolute right-0 -top-3 bottom-3 w-0.5 bg-primary-500 -mr-px pointer-events-none rounded-full; +} + +.vfb-step-wrapper { + @apply min-w-6 block; +} + +.vfb-step-wrapper-dragged { + @apply opacity-20; +} + +.vfb-step-wrapper-active { + @apply form-border-color-primary; +} + +.vfb-step-wrapper-inactive { + @apply border-transparent; +} + +.vfb-step-wrapper-invalid { + @apply form-color-danger form-border-color-danger; +} + +.vfb-step-label { + @apply relative block pt-5 px-2.5; +} + +.vfb-step-label-first { + @apply pl-0; +} + +.vfb-step-label-last { + @apply pr-0; +} + +.vfb-step-edit-label-wrapper { + @apply inline-block relative flex-grow flex-shrink h-full pt-5 mx-2.5; +} + +.vfb-step-edit-label-wrapper-first { + @apply ml-0; +} + +.vfb-step-edit-label-wrapper-last { + @apply mr-0; +} + +.vfb-step-edit-label-input { + @apply absolute bottom-0 left-0 right-0 border-0 appearance-none p-0 box-border w-full whitespace-nowrap; +} + +.vfb-step-edit-label-sizer { + @apply invisible inline-block h-px relative -top-px whitespace-nowrap; +} + +.vfb-step-actions-container { + @apply absolute transform text-white flex hidden z-1; +} + +.vfb-step-actions-container-left { + @apply top-0 -left-px -translate-y-full flex-row; +} + +.vfb-step-actions-container-right { + @apply top-0 -right-px -translate-y-full flex-row; +} + +.vfb-step-action { + @apply w-4 h-4 flex items-center justify-center bg-primary-500 text-xs cursor-pointer transition-colors relative hover:bg-primary-600 vfb-tooltip-group; +} + +.vfb-steps-controls-container-editor { + @apply border border-primary-500 border-opacity-0 hover:border-opacity-100 cursor-pointer; +} + +.vfb-steps-controls-container-select { + @apply border-opacity-100 bg-primary-500 bg-opacity-10; +} + +.vfb-steps-controls-container-sm { + @apply form-mt-gutter form-text-sm; +} + +.vfb-steps-controls-container-md { + @apply form-mt-gutter-lg form-text; +} + +.vfb-steps-controls-container-lg { + @apply form-mt-gutter-lg form-text-lg; +} + +.vfb-steps-controls-wrapper { + @apply flex justify-between; +} + +.vfb-steps-controls-wrapper-editor { + @apply pointer-events-none; +} + +.vfb-steps-control-button { + @apply form-border-width-btn form-shadow-btn disabled:pointer-events-none disabled:opacity-60 disabled:cursor-not-allowed; +} +.vfb-steps-control-button:focus { + @apply form-ring outline-0; +} + +.vfb-steps-control-button-previous-enabled { + @apply form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary transition-transform transform hover:scale-105; +} + +.vfb-steps-control-button-previous-disabled { + @apply form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary opacity-60 pointer-events-none; +} + +.vfb-steps-control-button-next-enabled { + @apply form-bg-primary form-color-on-primary form-border-color-btn transition-transform transform hover:scale-105; +} + +.vfb-steps-control-button-next-disabled { + @apply form-bg-primary form-color-on-primary form-border-color-btn opacity-60 pointer-events-none cursor-not-allowed; +} + +.vfb-steps-control-button-next-loading { + @apply text-transparent form-bg-primary form-border-color-btn form-bg-spinner-on-primary opacity-60 pointer-events-none cursor-not-allowed; +} + +.vfb-steps-control-button-finish-enabled { + @apply form-bg-primary form-color-on-primary form-border-color-btn transition-transform transform hover:scale-105; +} + +.vfb-steps-control-button-finish-disabled { + @apply form-bg-primary form-color-on-primary form-border-color-btn opacity-60 pointer-events-none cursor-not-allowed; +} + +.vfb-steps-control-button-finish-loading { + @apply text-transparent form-bg-primary form-border-color-btn form-bg-spinner-on-primary opacity-60 pointer-events-none cursor-not-allowed; +} + +.vfb-steps-control-button-sm { + @apply form-p-btn-sm form-radius-btn-sm form-text-sm; +} + +.vfb-steps-control-button-md { + @apply form-p-btn form-radius-btn form-text; +} + +.vfb-steps-control-button-lg { + @apply form-p-btn-lg form-radius-btn-lg form-text-lg; +} + +.vfb-hidden-element-preview-text { + @apply w-full italic text-gray-400; +} + +.vfb-preview-element-container { + @apply relative pointer-events-auto focus:outline-none; +} +.vfb-preview-element-container.vfb-preview-element-container-hover > .vfb-preview-element-overlay { + @apply border-primary-500; +} +.vfb-preview-element-container.vfb-preview-element-container-hover > .vfb-preview-element-resizer-icon { + @apply inline-block; +} +.vfb-preview-element-container.vfb-preview-element-container-hover > .vfb-preview-element-name-tag { + @apply inline-block; +} +.vfb-preview-element-container.vfb-preview-element-container-hover > .vfb-preview-element-actions-container-unselected { + @apply flex; +} + +.vfb-preview-element-container-nested, +.vfb-preview-element-container-list { + transition: background 150ms; + padding: 18px 10px; + border-radius: 6px; + cursor: pointer; + background: var(--vf-container-bg); + z-index: 0; + --vf-container-bg-neutral: rgb(86 136 179 / 10%); + --vf-container-bg-dynamic-1: rgb(0 208 255 / 12%); + --vf-container-bg-dynamic-2: rgb(2 45 215 / 12%); + --vf-container-bg-dynamic-3: rgb(255 0 244 / 15%); + --vf-container-bg-dynamic-4: rgb(255 0 0 / 20%); + --vf-container-bg-dynamic-5: rgb(0 0 0 / 12%); +} + +.vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-neutral); +} + +.vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-1); +} + +.vfb-preview-element-container-list .vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-2); +} + +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-3); +} + +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-4); +} + +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-5); +} + +.vfb-preview-element-container-no-visual-nesting { + padding: 18px 1px; + margin: 0 0; +} + +.vfb-preview-element-container-sm { + @apply form-text-sm; +} + +.vfb-preview-element-container-md { + @apply form-text; +} + +.vfb-preview-element-container-lg { + @apply form-text-lg; +} + +.vfb-preview-element-container-error { + @apply has-error; +} + +.vfb-preview-element-container-conditional { + @apply opacity-60; +} +.vfb-preview-element-container-conditional.vfb-preview-element-container-nested-lvl1, .vfb-preview-element-container-conditional.vfb-preview-element-container-nested-lvl2, .vfb-preview-element-container-conditional.vfb-preview-element-container-nested-lvl3 { + @apply opacity-60; +} + +.vfb-preview-element-container-editing { + @apply opacity-80; +} +.vfb-preview-element-container-editing .vfb-preview-element-overlay { + @apply border-dashed border; +} + +.vfb-preview-element-outer-wrapper { + @apply grid grid-cols-12 flex-1; +} + +.vfb-preview-element-inner-container { + @apply flex-1 grid grid-cols-12; +} + +.vfb-preview-element-inner-wrapper-before { + @apply col-span-12; +} + +.vfb-preview-element-inner-wrapper-after { + @apply col-span-12; +} + +.vfb-preview-element-overlay { + @apply absolute inset-0 border cursor-pointer; +} +.vfb-preview-element-overlay.vfb-preview-element-overlay-resizing { + @apply border-primary-500-imp; +} +.vfb-preview-element-overlay.vfb-preview-element-overlay-no-edit { + @apply cursor-default; +} + +.vfb-preview-element-overlay-being-dragged { + @apply border-dashed opacity-90 border; +} + +.vfb-preview-element-overlay-selected { + @apply border-primary-500 bg-primary-500 bg-opacity-10; +} + +.vfb-preview-element-overlay-unselected { + @apply border-transparent; +} + +.vfb-preview-element-resizer { + @apply absolute -right-1 w-2 top-0 bottom-0 cursor-ew-resize z-999; +} +.vfb-preview-element-resizer:active { + @apply opacity-0; +} + +.vfb-preview-element-resizer-icon { + @apply absolute right-0 translate-x-1/2 w-2.25 h-2.25 bg-white border border-gray-500 rounded-sm shadow-mini top-1/2 transform -translate-y-1/2 pointer-events-none transition; +} + +.vfb-preview-element-resizer-icon-unselected { + @apply hidden; +} + +.vfb-preview-element-resizer-icon-resizing { + @apply w-auto h-4 text-sm px-0.5 whitespace-nowrap leading-none; +} + +.vfb-preview-element-name-tag { + @apply absolute left-0 top-0 transform -translate-y-full bg-primary-500 text-white px-2 py-px text-xs; +} + +.vfb-preview-element-name-tag-unselected { + @apply hidden; +} + +.vfb-preview-element-area-top { + @apply absolute left-0 right-0 bottom-1/2; +} + +.vfb-preview-element-area-top-sm { + @apply -top-1; +} + +.vfb-preview-element-area-top-md { + @apply -top-2; +} + +.vfb-preview-element-area-top-lg { + @apply -top-2; +} + +.vfb-preview-element-area-bottom { + @apply absolute left-0 right-0 top-1/2; +} + +.vfb-preview-element-area-bottom-sm { + @apply -bottom-1; +} + +.vfb-preview-element-area-bottom-md { + @apply -bottom-2; +} + +.vfb-preview-element-area-bottom-lg { + @apply -bottom-2; +} + +.vfb-preview-element-area-middle { + @apply col-span-12; +} + +.vfb-preview-element-middle-drag-label-container { + @apply absolute inset-0 z-1; +} + +.vfb-preview-element-drag-label-wrapper { + @apply bg-primary-500 absolute h-1 rounded-full pointer-events-none hidden; +} +.vfb-preview-element-drag-label-wrapper.vfb-preview-element-drag-label-wrapper-visible { + @apply block; +} + +.vfb-preview-element-drag-label-wrapper-top { + @apply -left-2 -right-2 -top-0.5; +} + +.vfb-preview-element-container-drop-top > .vfb-preview-element-area-top, .vfb-preview-element-container-drop-top > div > .vfb-preview-element-drag-label-wrapper-top { + display: block !important; +} + +.vfb-preview-element-drag-label-wrapper-bottom { + @apply -left-2 -right-2 -bottom-0.5; +} + +.vfb-preview-element-container-drop-bottom > .vfb-preview-element-area-bottom, .vfb-preview-element-container-drop-bottom > div > .vfb-preview-element-drag-label-wrapper-bottom { + display: block !important; +} + +.vfb-preview-element-drag-label-wrapper-middle { + @apply top-1/2 left-0 right-0 transform -translate-y-1/2; +} + +.vfb-preview-element-container-drop-middle > div > div > .vfb-preview-element-area-middle, .vfb-preview-element-container-drop-middle > div > div > div > div > .vfb-preview-element-drag-label-wrapper-middle { + display: block !important; +} + +.vfb-preview-element-drag-label { + @apply bg-primary-500 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 px-2 pt-0.5 pb-0.75 rounded-full leading-none text-0.5sm text-white; +} + +.vfb-preview-element-actions-container { + @apply absolute right-0 top-0 transform -translate-y-full text-white; +} + +.vfb-preview-element-actions-container-selected { + @apply flex; +} + +.vfb-preview-element-actions-container-unselected { + @apply hidden; +} + +.vfb-preview-element-clone { + @apply w-4 h-4 flex items-center justify-center bg-primary-500 text-xxs cursor-pointer transition-colors hover:bg-primary-600 vfb-tooltip-group relative; +} + +.vfb-preview-element-clone-disabled { + @apply bg-opacity-60 hover:bg-opacity-60 cursor-not-allowed; +} + +.vfb-preview-element-remove { + @apply w-4 h-4 flex items-center justify-center bg-primary-500 text-xs ml-0.5 cursor-pointer transition-colors hover:bg-primary-600 vfb-tooltip-group relative; +} + +.vfb-preview-element-remove-disabled { + @apply bg-opacity-60 hover:bg-opacity-60 cursor-not-allowed; +} + +.vfb-preview-nested-element-wrapper { + @apply relative z-1 pointer-events-none; +} + +.vfb-preview-nested-list-element-wrapper { + @apply relative z-1 pointer-events-none grid grid-cols-12 col-span-12 w-full; +} + +.vfb-preview-wrapper-preview .vfb-preview-nested-element-wrapper { + @apply z-auto; +} +.vfb-preview-wrapper-preview .vfb-preview-nested-list-element-wrapper { + @apply z-auto; +} \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..7bce5f1 --- /dev/null +++ b/index.js @@ -0,0 +1 @@ +var e=Q;!function(e,t){for(var n=Q,r=nl();;)try{if(132097===parseInt(n(913))/1+parseInt(n(1868))/2*(-parseInt(n(3192))/3)+parseInt(n(1892))/4+parseInt(n(2233))/5*(-parseInt(n(2727))/6)+parseInt(n(268))/7+-parseInt(n(2890))/8*(-parseInt(n(618))/9)+parseInt(n(1745))/10)break;r.push(r.shift())}catch(e){r.push(r.shift())}}();import t from"lodash";import{inject as n,computed as r,toRefs as a,ref as o,watch as i,nextTick as l,h as u,createElementVNode as s,markRaw as c,onMounted as d,onBeforeUnmount as p,getCurrentInstance as v,createTextVNode as f,provide as A,openBlock as m,createElementBlock as h,renderSlot as g,normalizeClass as b,resolveComponent as y,withKeys as D,createVNode as C,withCtx as w,Fragment as E,renderList as k,toDisplayString as x,createBlock as F,createCommentVNode as B,withModifiers as S,withDirectives as L,vShow as T,resolveDynamicComponent as M,mergeProps as O,createSlots as _,vModelText as I,useCssVars as z,Transition as P,normalizeStyle as j,reactive as H}from"vue";import N from"moment";import R from"axios";var V=uu;function q(){var e=Q,t=[e(2207),e(3142),e(1204),"items$",e(449),e(1528),"prop-multiline",e(2528),e(1616),e(3545),e(2090),"Spanish","The name of property that contains the value that should be searched when items are provided as an array of objects.",e(1413),'.vfb-preview-form [data-path="',e(3562),e(2978),"uuid",e(1131),e(3350),e(896),e(2790),"FormFormKeyField",e(2549),e(510),e(3720),e(957),"color-btn","video/mpeg","equal to",e(3767),e(2610),"text/css",e(3627),e(3102),"mb-2",e(2082),e(2470),e(310),"ends with",e(782),e(1318),e(3977),e(683),e(2580),e(2001),e(1449),e(2261),e(1110),e(2533),e(2113),e(3547),"Couldn't fetch options from ","pxBtnLg",e(2950),e(2467),e(3801),e(3995),e(1707),e(575),"vfb-preview-element-drag-label",e(665),e(962),e(966),e(972),e(2018),e(3994),"tools.size",e(1379),"pxInput","vfb-tab-actions-container",e(3459),"column1",e(1926),e(1447),e(1880),"Checkbox tabs",e(2748),"sizeGroup",e(1811),e(3049),e(891),e(3786),e(794),e(1681),"MultipleLabelField",e(816),e(3395),e(3080),"builder-tooltip","history",e(1043),e(692),e(965),"tabindex","vfb-condition-list-indent",e(731),"tasks",e(2513),e(2918),"
",e(3716),e(379),"controls",e(2669),"language-html line-numbers","Add on",e(3589),"bg-slider-handle",e(1130),e(1796),e(1200),e(2051),e(3625),"closeOnSelect",e(3719),e(1779),e(1985),"spaceAddonLg",e(1802),e(314),e(840),e(3596),"autoloader",e(2646),e(3808),e(1467),"childRestrictions","FileRulesField",e(3705),"prop-subtitle-no-m","text-xxs opacity-40 transition-all hover:opacity-100","widths.wrapper.tr.",e(1132),e(993),e(3778),e(3203),e(1697),e(3747),e(2256),e(4053),"right",e(2181),e(1869),e(2592),e(2538),"9999px",e(3472),e(3332),e(1530),e(921),e(3084),e(380),e(3711),e(3502),e(3975),e(3629),e(2186),e(3847),e(1198),e(536),"Display messages",e(530),"bgInputFocus","Secondary",e(1113),e(1025),e(1412),e(3966),e(2005),e(3597),"dragged-schema",e(493),e(2271),"^1.52.0",e(1566),e(1713),e(4021),e(2550),"container_inactive",e(1226),e(553),e(2041),e(1360),"onRename",e(3998),e(1479),"ariaLive","draggingElement","1221978vHkNEo",e(2187),"acceptMimes",e(2214),e(3362),e(3007),e(2203),"vfb-config-form-header-collapse-loading",e(3118),e(3765),e(1930),e(564),e(1560),e(3729),e(1545),e(636),"var(--vf-danger)",e(3044),e(875),"hueSlider",e(1646),e(740),e(2425),e(1788),"prop-toggle","vfb-preview-element-container-drop-top",e(1922),e(328),e(2473),e(3425),"M25,52 L175,52 C188.807119,52 200,63.1928813 200,77 C200,90.8071187 188.807119,102 175,102 L25,102 C11.1928813,102 8.79631174e-15,90.8071187 7.10542736e-15,77 C-1.69088438e-15,63.1928813 11.1928813,52 25,52 Z M99.8714922,64.0813025 L99.8714922,90 L175.128938,90 C182.286188,90 188.088287,84.1979019 188.088287,77.0406512 C188.088287,69.8834005 182.286188,64.0813025 175.128938,64.0813025 L99.8714922,64.0813025 Z",e(1967),e(587),e(1445),"minHeight",e(567),"vfb-conditions-render-expected",e(3286),e(3072),e(2318),e(396),e(2013),e(2474),"Button with primary color",e(2624),"radiusSliderLg","tabs-",e(1525),"resets","defaultWidth",e(3605),e(3208),e(3275),e(774),e(556),e(2675),e(477),e(974),e(1644),"updateBuilder",e(4018),"Form key","pdf",e(1212),e(424)," {\n",e(2027),"wav",e(1398),e(2792),e(592),e(2270),"YYYY-MM-DD","Repeatable single element","CONDITIONS_RESETED",e(3400),e(738),e(2806),e(239),e(3200),e(425),e(2949),e(1911),"whitespace-normal break-all","Desktop (>=","vfb-tab-overlay-drag-over","prefix","Clone","selected-page","props","SEE LICENSE IN LICENSE.txt",e(2147),e(1172),e(2022),"composition",e(3960),e(4028),e(1425),e(3578),"handleFocus",e(1357),e(3930),e(650),e(671),e(3366),e(998),e(1148),e(2692),"dot-circle",e(1405),"vfb-field-spacing",e(2468),"tryEntries",e(3164),e(2737),e(3143),"Ring width",e(231),e(2221),"letter-spacing",e(879),e(2011)," .....\n",e(2682),"limit",e(1448),e(1492),"clike",e(1776),e(1986),"lineHeightSmallSm",e(2111),"-panel",e(437),"openDirection",e(3726),e(3130),"autogrow",e(4025),"vfb-tooltip-bottom-left",e(3917),e(1106),e(2163),e(2560),"File upload","toUpperCase","MaxField",e(916),e(2485),e(2458),e(1561),e(831),"display-name","Local",e(2819),e(507),e(682),e(1557),e(3709),e(1877),"^2.74.1","themeList",e(2104),e(1007),e(3267),e(662),"redo",e(3550),e(1749),e(1631),"vfb-btn-secondary",e(2713),e(1008),e(3927),e(3022),"data.items_wrapper.list-add-button",e(1040),"ReadonlyField",e(941),e(3422),e(3104),e(3157),e(3469),"After or equal (date)",e(3661),e(1094),e(261),"Multiselect options",e(904),"colorInput",e(634),e(2400),"onSelectElement",e(582),e(2938),e(2437),e(3795),"2.125rem",e(3283),e(1080),e(3584),"vfb-panel-theme",e(275),e(2054),e(811),e(2813),e(3612),e(3256),e(872),e(3075),e(2201),e(1189),e(1873),e(807),e(385),e(2600),"CLONED","vfb-steps-controls-container-md",e(1761),e(2327),e(3606),e(2797),e(252),e(2706),e(2721),e(473),e(2904),"M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z",e(3535),e(256),e(1649),e(1666),e(3748),e(1849),e(525),e(814),e(3947),e(1085),"handleTogglePanel",e(1897),e(1643),e(1828),e(2506),e(3155),e(3461),e(1886),"vfb-steps-control-button-finish-enabled",e(1778),e(2192),e(2853),e(450),e(3663),e(1306),"effectAllowed",e(4052),e(3967),e(438),"gray-600",'
',e(520),e(2010),e(1160),e(3060),e(3540),"Placeholder",e(3968),"vfb-modal-header",e(1962),e(2882),e(1705),"decimalInteger",e(1812),e(398),e(3446),e(1690),e(720),"doc",e(3274),e(1315),e(2422),e(3345),"File options",e(1876),"True value",e(401),"Label (eg. English)","src/components/vueform/VueformSettings.vue","handleInputBlur",e(574),e(1532),"assign","normal","Select options","vfb-util-prop-element-with-link","Saved position.","isDigit",e(3969),e(3147),e(2568),e(3239),"dates",e(1239),"pxBtnSm",e(2653),"handleSetDraggedSchema",e(1399),e(1175),"M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v208c0 44.112 35.888 80 80 80h336zm96-80V80c0-26.51-21.49-48-48-48H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48zM256 128c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-96 144l55.515-55.515c4.686-4.686 12.284-4.686 16.971 0L272 256l135.515-135.515c4.686-4.686 12.284-4.686 16.971 0L512 208v112H160v-48z",e(1223)," Resizer ",e(2308),e(1508),e(1139),e(3410),e(1513),e(1353),e(1536),e(3528),e(2796),e(3843),e(3259),"Gray 200",e(3370),"order",e(3184),e(3334),"handleDragEnd",e(2340),"container_moving",e(2379),e(3292),e(1310),e(2546),e(3139),e(3387),e(2280),e(1498),e(3364),e(2708),e(862),e(973),"calc(",e(1154),e(1548),e(743),e(4014),e(1703),e(455),e(2419),e(2925),e(1404),e(3291),e(3477),e(321),e(2194),"View",e(3990),"Derived constructors may only return object or undefined",e(2416),e(3108),"Right",e(603),e(1096),e(2278),"1px",e(1473),e(3774),e(1735),e(1891),e(540),e(844),"locale",e(1950),"Filter internally",e(308),e(354),"vfb-field-icon-container",e(1736),"editLabelWrapper","version",e(1965),"disableConditions",e(3445),"BuilderPanelPageSettings",e(2412),"container_dropTop",e(623),e(1351),e(2641),e(1862),"Allow new option",e(543),e(2162),e(1197),e(1959),"clipboard",e(3901),e(1283),e(2542),"bg-btn-secondary",e(1170),e(3608),"widths.wrapper.br.",e(2295),"xul",e(1097),"borderWidthInputT","options.format",e(3611),"export default {\n",e(1196),e(1637),e(1500),e(2098),"Drag & drop",e(3423),"vfb-tree-container","vfb-panels-tabs",e(655),e(324),e(1939),e(3223),e(3621),e(617),e(3509),e(649),e(1061),e(3659),"uploadTempMethod","radius-small",e(3276),e(3156),e(3255),e(642),e(1458),e(995),e(3401),e(3109),e(1933),e(611),"device",e(4011),"986472raaExH","custom",e(1951),e(3021),e(1924),"addButton",e(4020),e(949),"bg-input-danger",e(3397),"Top",e(1368),"eot",e(2248),e(247),"parse","The minimum number of characters that need to be typed in order to refresh the option list",e(270),e(3985),"hasAttribute",e(874),e(2108),e(2530),e(2407),e(3673),e(3849),e(1104),e(1555),e(2344),"vfb-toaster-info",e(1253),e(2302),e(3383),e(3924),"options.seconds",e(2343),e(2952),e(4038),e(601),e(3984),"onMoveToPage","name",e(3527),e(2226),e(1753),e(1640),"date-range",e(624),e(2339),e(1848),e(2196),"spaces",e(2093),e(3789),"removeWrapper",e(1675),e(558),"bg-toggle-handle",e(1285),e(349),"added-element",e(568),"_copy",e(3687),e(2388),"copy-to-clipboard",e(3456),e(2359),e(1648),e(2768),e(1394),"options.tooltips_wrapper.tooltips","tab",e(1898),e(2613),"isArray",e(1794),e(2579),e(795),e(739),e(2471),e(478),e(3111),e(2503),e(3027),e(2862),e(1807),e(1961),e(485),e(1790),e(2705),"container_enabled","vfb-element-text-description",e(3326),"px-slider-tooltip","fontSizeSm",e(581),e(901),e(1590),e(3252),e(2200),e(2732),e(2937),"bgSelected",e(3150),"Danish","vfb-steps-control-button-next-loading",e(1952),e(3262),"tablet",e(619),e(3236),"RadioField",e(3771),e(1659),"onSelectPage",e(3466),e(501),"clientX",e(2434),e(3835)," Export ",e(2971),e(2955),"store_wrapper","data-copy-state",e(2066),e(3050),"tabs-12",e(585),e(3515),e(704),"button",e(1777),e(2380),e(3398),e(3377),e(1053),e(2025),e(2130),"EditorWrapper",e(4042),e(3802),"highlighted","#10b981",e(725),e(3904),e(676),e(3604),"options.create_wrapper.create",e(3199),e(2906),"toJSON5",e(3360),"This will also remove all elements within the ",e(970),e(3956),e(985),"Move before %element%. Press Space bar to move, Escape key to cancel.",e(1260),e(373),e(2717),e(3820),e(713),e(403),e(1089),"clientY",e(2874),e(1462),e(1521),e(3579),"selfClosing",e(2060),e(3905),e(2394),"actionsContainer_selected",e(1553),"container_hovered",e(2068),e(2259),e(2716),e(519),"slider-handle-size","letterSpacingSmallLg",e(2771),e(1694),e(658),"change-view",e(2228),e(3369),e(1804),e(1575),"InfoField",e(830),e(870),e(420),e(1578),e(3040),e(2896),"layout","time",e(2617),e(2761),e(3296),e(3932),e(1808),"items-start form-pt-input-border",e(2119),e(2640),"resultName",e(3457),'
Add unique identifier learn more
','',e(717),e(3730),e(375),"_ffix_cx",e(1335),e(3442),e(1652),"vfb-tab-container-drop-left",e(1996),e(942),"pageSettings$",e(2097),e(3249),e(2191),e(2303),"constructor",e(3561),"Focus","addNewItem",e(3368),e(3676),e(463),e(1833),e(4040),"_ffix_oy",e(711),e(3166),e(2395),e(996),e(2224),e(2607),"application/vnd.openxmlformats-officedocument.wordprocessingml.document",e(2080),"is not empty","hexadecimal",e(3940),e(3202),e(1158),e(3732),"pptx",e(3518),e(2512),e(278),e(3577),e(806),e(2903),"handleToggleAll",e(486),e(991),e(1407),"index","application/octet-stream","handleError",e(2357),e(2328),e(1205),e(1343),e(1406),e(3641),"WYSIWYG editor",e(1108),e(881),e(3378),"bg-icon",e(3260),e(2188),"vfb-util-prop-language-value","ipv4",e(1829),"PANEL_CLOSED","selectedElement",e(1704),e(1375),e(3698),e(336),e(487),e(2712),e(316),e(3982),"Multi-file upload",e(2626),"vfb-preview-element-overlay-selected",e(3045),e(627),e(3516),e(1772),e(2417),e(2117),"vfb-config-panel-header-wrapper-right",e(1372),e(2639),e(3169),e(2286),e(1893),e(799),e(3452),e(3434),e(541),"fas",e(3523),e(1270),e(2021),e(511),e(1115),"uploadTemp","handleRemoveClick",e(1801),e(1689),e(2469),e(2291),e(2279),"file",e(2342),"prop","walkTree",e(1440),"display","M200.1 99.5l148.4 148c4.7 4.7 4.7 12.3 0 17l-148.4 148c-4.7 4.7-12.3 4.7-17 0l-19.6-19.6c-4.8-4.8-4.7-12.5.2-17.1l97.1-93.7H12c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h248.8l-97.1-93.7c-4.8-4.7-4.9-12.4-.2-17.1l19.6-19.6c4.7-4.9 12.3-4.9 17-.2zM396 76v360c0 6.6 5.4 12 12 12h28c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-28c-6.6 0-12 5.4-12 12z",e(3381),"languageSelectorOpen",e(250),e(4033),e(1577),e(2519),e(3154),e(3148),"Input min height",e(951),e(3439),e(263),e(2411)," return {\n",e(565),e(566),"thousand",e(2939),"vfb-tree-item-area-top-first-child",e(1295),e(892),e(3380),e(3498),e(2345),e(3451),"is today","vfb-field-container-no-nesting",e(3261),e(3269),"export",e(2878),"vfb-code",e(3964),e(2895),e(3167),e(2505),e(2807),e(3794),e(2129),e(2688),"vfb-tab-wrapper-dragged",e(3402),e(3872),"vfb-step-container-editor",e(606),e(249),e(927),e(843),e(3099),"pageSchema",e(3312),e(2750),e(3712),e(2522),e(1269),e(4012),e(2307),e(2227),e(2948),e(616),e(838),"Tooltip format",e(4026),e(852),e(1570),e(1997),e(3772),e(992),e(1719),e(458),"handleClick",e(3909),"handleSelectElement",e(2526),e(3036),e(3478),e(1610),e(451),e(2136),e(1245),e(2586),"Text field that expects a phone number","clock",e(902),"^3.3.4",e(1917),e(2402),"ariaLabel",e(3931),e(1660),e(3694),e(3371),"prop-group",e(579),e(1669),"^4.0.2",e(773),"ratio",e(3603),e(2362),"truncate","structure",e(2976),"lineHeights",e(518),e(690),e(2870),e(3572),e(1313),e(3506),e(3769),e(2920),e(1677),e(3919),e(1918),e(555),e(2049),e(3532),"default_date_time",e(3581),e(2894),e(3185),e(3028),e(3073),"rightHasForm","colorInputDanger",e(3552),e(1872),e(620),e(1845),"_ffix_lx",e(2153),e(258),e(3483),e(2844),e(417),e(3863),e(1029),e(1237),e(2638),e(1278),e(3159),e(295),e(3669),"Button that triggers reset","addInlined",e(3624),e(1692),e(317),e(1453),e(561),e(1059),e(2876),e(1233),e(3799),e(1071),e(3959),e(3138),e(1727),e(3327),e(2484),"ppt",e(526),e(3811),e(1603),e(1054),e(2024),"#07bf9b66",e(2055),e(1598),"Check full list of ","Cannot call a class as a function",e(1166),"schema",e(3495),e(2689),e(3965),e(504),e(3281),e(2240),"container_dropLeft","matchMedia",e(3911),e(439),e(2509),e(3910),e(3819),e(1437),e(413),e(1529),e(3707),"List",e(833),e(1971),"pyBtnSmallLg",e(989),"group","vfb-preview-element-actions-container-unselected",e(287),"centerWrapper",e(1867),e(3576),"Input",e(368),"rename-element","items_wrapper.minChars","M482.696 299.276l-32.61-18.827a195.168 195.168 0 0 0 0-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 0 0-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 0 0-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 0 0 0 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0 0 42.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0 0 42.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 0 1-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0 1 87.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43.929 75.957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z","required_conditions","before-highlight",e(1636),e(3734),e(2553),e(1716),"Top-right","bgDisabled","buttonType","wrapper_active",e(2637),e(2891),"Nested list",e(1123),e(3505),e(503),"setJson",e(388),e(3700),e(2751),e(382),"vfb-tree-item-children-toggle-collapsed",e(1658),e(3756),e(1633),"%element% added.","_parent","disables",e(1243),e(917),"width_wrapper",e(430),e(1317),e(1618),e(1928),e(1015),"If enabled elements will be validated as their value change.",e(454),e(1787),"Danger","border-color-btn-secondary",e(2332),e(2609),e(785),e(2628),e(3119),"removeParentIfEmpty","displayMessages",e(560),e(3046),e(1144),e(3494),e(2808),e(3086),e(248),e(3681),e(1729),e(1292),"defer","M149.333 216v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-80c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zM125.333 32H24C10.745 32 0 42.745 0 56v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zm80 448H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm-24-424v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24zm24 264H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24z",e(609),"Yesterday","showViews",e(3679),e(1033),e(2026),"Used when text is displayed on primary color","radiusLarge",e(2678),e(3631),e(1427),"Theme",e(920),e(1901),e(2836),e(559),e(1387),e(1136),e(2083),e(2088),e(2218),"download",e(1670),e(2092),e(2455),e(3071),e(361),"save",e(280),e(2142),e(3645),"Max date",e(1242),e(1035),e(1321),"BuilderPanelTreeElement",e(2590),e(1224),". Are you sure?",e(2028),e(2298),e(3628),e(2587),e(2520),e(3522),e(3727),e(3713),e(3346),e(3829),e(2632),"vfb-steps-container-editor",e(3776),e(1254),e(915),"parent",e(2591),"ArrowLeft","bg-input-success",e(3408),e(1964),e(376),e(3939),"completion",e(3556),e(1493),e(322),e(1286),e(3009),e(531),e(3247),e(2627),e(1093),"export$",e(2999),e(1682),e(3480),e(3897),e(2993),e(1501),"In None is selected the default theme included in your project will be used and settings here will not be respected. If Local is selected the current theme set will be applied to only this form, while with Global it will be applied to each form in your project. You might move the CSS code to somewhere else in your project eg. main.css when using Global.",e(3804),"vfb-config-panel-header-container",e(2176),e(440),e(2740),e(990),e(2658),e(1042),e(2492),e(905),e(2305),"Delay",e(1531),e(596),e(1037),e(2195),e(3864),e(359),e(3242),e(3376),e(1743),"removeLastItem",e(1588),e(1236),e(3797),e(2923),e(3421),e(2849),"Ratio",e(236),"On primary",e(1441),e(297),e(1147),e(243),e(762),e(2629),e(1262),e(2033),e(2991),e(2720),e(1533),e(277),e(3852),e(3706),e(3206),"None",e(3845),e(2367),"bash",e(1472),e(1856),e(2378),e(1388),"handleCloneClick",e(2593),"isSelected","TooltipsField",e(1250),e(3871),"RowsField",e(895),e(2107),e(3029),e(2735),"ExportThemeField",e(2465),"rgb(","separator-top",e(3047),e(2620),"handleChangeDevice","vfb-tab-action vfb-tab-edit",e(745),"M493.26 56.26l-37.51-37.51C443.25 6.25 426.87 0 410.49 0s-32.76 6.25-45.25 18.74l-74.49 74.49L256 127.98 12.85 371.12.15 485.34C-1.45 499.72 9.88 512 23.95 512c.89 0 1.79-.05 2.69-.15l114.14-12.61L384.02 256l34.74-34.74 74.49-74.49c25-25 25-65.52.01-90.51zM118.75 453.39l-67.58 7.46 7.53-67.69 231.24-231.24 31.02-31.02 60.14 60.14-31.02 31.02-231.33 231.33zm340.56-340.57l-44.28 44.28-60.13-60.14 44.28-44.28c4.08-4.08 8.84-4.69 11.31-4.69s7.24.61 11.31 4.69l37.51 37.51c6.24 6.25 6.24 16.4 0 22.63z",e(2818),e(679),e(1842),e(2670),e(3752),e(2266),"fillStyle",e(1012),e(715),"highlightElement","showSearch",e(1143),e(312),"decimalPointLeading",e(4009),"colors",e(2892),"hasFloating","vfb-step-wrapper-active",e(3430),e(2252),"before_or_equal","valueProp",e(3563),e(3470),e(2885),e(315),e(1290),e(3205),"vsd","application/x-shockwave-flash","selected-element-schema","line-height-small",e(1506),e(2785),e(2099),"blocks",e(1519),"tokenize",e(1720),e(1203),e(689),e(3573),e(2043),"pageY",e(2164),e(402),e(276),e(3874),e(718),"listItem",e(3443),e(780),e(1465),e(353),e(958),e(3936),"DirectionField",e(1215),e(1810),e(1712),e(1145),e(3923),e(3503),e(3214),"valueFormat",e(954),e(2397),e(1679),"previousSibling",e(721),"vfb-tab-container-has-selected",e(319),e(3941),e(1540),e(3310),"otherList",e(3886),e(3298),e(1902),e(2457),e(1082),e(1378),e(886),e(1128),"vfb-btn-primary",e(1562),"some",e(2665),e(2179),"handle","cog","JSON5: invalid character '",e(3717),e(757),"splice",e(2556),e(628)," / required rule",e(3773),e(1837),e(1702),e(2243),e(2753),e(2334),e(3691),"Step 1",e(3384),e(3263),"trim",e(246),e(434),e(3113),"innerContainer",e(2e3),e(1674),e(3468),"direction","Can't remove - contains
non-removable child","change",e(685),"toolbar",".line-numbers-sizer",e(2612),e(3646),e(1248),e(803),e(772),e(1775),e(2324),e(2932),e(677),e(1184),"application",e(3536),e(1838),e(3097),e(2199),e(1966),e(3340),e(3135),e(2744),"removeEventListener",e(2133),e(2997),e(2741),e(2722),e(1687),e(3266),e(1824),e(664),"try statement without catch or finally",e(1478),e(4017),e(1331),e(2479),e(1527),e(3696),e(3361),e(1827),e(1960),e(3833),e(3582),"nested",e(3810),e(2863),e(3986),e(3948),"image/svg+xml","Submit","sign","clearSettings",e(2747),e(1755),e(226),e(2160),e(2069),e(1569),e(459),"handleChangeLocale","attr-value",e(3165),e(1078),e(2373),e(2846),e(3396),e(571),"top-left","M0,181.249568 L0,74.9998212 L174.999583,74.9998212 L174.999583,181.249568 C174.999583,191.601106 166.601165,199.999523 156.249627,199.999523 L18.7499553,199.999523 C8.39841748,199.999523 0,191.601106 0,181.249568 Z M74.9998212,104.68725 L74.9998212,120.312213 C74.9998212,122.890179 77.1093437,124.999702 79.68731,124.999702 L145.312273,124.999702 C147.890239,124.999702 149.999762,122.890179 149.999762,120.312213 L149.999762,104.68725 C149.999762,102.109284 147.890239,99.9997616 145.312273,99.9997616 L79.68731,99.9997616 C77.1093437,99.9997616 74.9998212,102.109284 74.9998212,104.68725 Z M24.9999404,154.687131 L24.9999404,170.312094 C24.9999404,172.89006 27.109463,174.999583 29.6874292,174.999583 L95.312392,174.999583 C97.8903582,174.999583 99.9998808,172.89006 99.9998808,170.312094 L99.9998808,154.687131 C99.9998808,152.109165 97.8903582,149.999642 95.312392,149.999642 L29.6874292,149.999642 C27.109463,149.999642 24.9999404,152.109165 24.9999404,154.687131 Z M156.249627,24.9999404 C166.601165,24.9999404 174.999583,33.3983579 174.999583,43.7498957 L174.999583,62.499851 L0,62.499851 L0,43.7498957 C0,33.3983579 8.39841748,24.9999404 18.7499553,24.9999404 L37.4999106,24.9999404 L37.4999106,6.2499851 C37.4999106,2.81256959 40.3124802,0 43.7498957,0 L56.2498659,0 C59.6872814,0 62.499851,2.81256959 62.499851,6.2499851 L62.499851,24.9999404 L112.499732,24.9999404 L112.499732,6.2499851 C112.499732,2.81256959 115.312301,0 118.749717,0 L131.249687,0 C134.687103,0 137.499672,2.81256959 137.499672,6.2499851 L137.499672,24.9999404 L156.249627,24.9999404 Z","visible",e(1859),e(2908),e(3580),"avi","draggable","Mode",e(3025),e(393),"vfb-tool-item vfb-tool-item","alias",e(2700),e(3999),e(2943),"leftPanel$",e(2229),e(1722),e(1324),e(1157),e(1733),e(2780),e(1291),e(1334),e(323),e(1365),"columns","cast",e(2865),e(1655),e(1613),"lookbehind",e(3721),e(3831),e(1567),e(4004),"Data source","Radio options",e(2355),"onEvent",e(300),"attributes",e(2255),e(3725),e(2023),"quote-left","default_time",e(1265),e(3583),e(1661),e(3684),"vfb-tooltip-top-left",e(2544),e(3153),e(3229),e(2198),e(3404),e(371),e(3322),e(1645),e(2856),e(2842),e(1896),e(2830),e(855),e(2091),e(873),e(2399),"Elements",e(3419),e(441),e(1194),"multiDates","M83.9580895,0.50038743 C89.1357657,0.50038743 93.3330671,4.69768882 93.3330671,9.87536508 L93.3330671,166.125291 C93.3330671,171.302967 89.1357657,175.500268 83.9580895,175.500268 L9.37497765,175.500268 C4.19730139,175.500268 0,171.302967 0,166.125291 L0,9.87536508 C0,4.69768882 4.19730139,0.50038743 9.37497765,0.50038743 L83.9580895,0.50038743 Z M105.833037,9.87536508 C105.833037,4.69768882 110.030339,0.50038743 115.208015,0.50038743 L190.624546,0.50038743 C195.802222,0.50038743 199.999523,4.69768882 199.999523,9.87536508 L199.999523,166.125291 C199.999523,171.302967 195.802222,175.500268 190.624546,175.500268 L115.208015,175.500268 C110.030339,175.500268 105.833037,171.302967 105.833037,166.125291 L105.833037,9.87536508 Z",e(733),e(588),e(3957),e(2899),"BuilderPanelElementsElement",e(2565),"\\u2029","color-floating","Droppable",e(2798),e(2035),e(2132),e(968),e(1120),e(1941),e(632),e(1944),e(1667),e(3290),e(2034),e(1947),e(736),"_ffix_sy",e(3934),"handleToggle",e(2429),e(910),e(1780),"Floating",e(2966),e(2757),"hasRemove",e(1266),e(1296),e(3798),e(907),e(889),e(303),e(1724),e(3359),e(741),e(2614),e(2659),e(3372),e(1946),e(3943),e(1109),e(1386),e(1487),e(3330),e(3680),e(1836),e(2820),e(1586),e(600),e(3879),e(1641),e(3853),e(730),e(3815),"Reset",e(1257),e(1336),"mainSchema","BuilderToolView","emptyDescription",e(856),e(1327),e(1039),e(1975),e(1906),e(3925),e(2701),e(935),e(3193),e(2156),e(3385),e(2477),e(2872),e(3058),"Multi-image upload",e(2684),e(3416),e(1415),e(3907),e(4048),e(2297),e(804),e(2540),e(3134),e(3287),e(2811),e(1543),e(877),e(1782),"themeName",e(416),e(1657),e(1135),e(3449),"M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zm-80 464c0 8.82-7.18 16-16 16H48c-8.82 0-16-7.18-16-16V144c0-8.82 7.18-16 16-16h48v240c0 26.51 21.49 48 48 48h240v48zm96-96c0 8.82-7.18 16-16 16H144c-8.82 0-16-7.18-16-16V48c0-8.82 7.18-16 16-16h320c8.82 0 16 7.18 16 16v320z","forceLabels","node_modules/vue-prev-composition-api",e(3070),"src/components/vueform/HiddenElement.vue",e(2837),"vfb-tab-area-right","COLLAPSED",e(3120),e(885),e(3499)," Elements ",e(285),e(3163),e(343),"Slider options",e(4010),e(4015),e(3367),e(2225),e(3189),"gray600",e(1339),e(2690),e(3175),e(1737),"Dimensions",e(693),e(2347),e(2122),e(4037),"Value format",e(697),e(3144),"#ced4da",e(3066),e(2776),e(4016),"submits","timeout","hover:form-bg-input-hover",e(2476),e(1978),"onOpenModal","true","setPrototypeOf",e(1423),e(1146),e(1486),"fontSizeSmallSm",e(1470),e(1756),e(1730),e(1611),e(801),e(3666),e(3559),"Black","min:",e(591),e(2039),e(395),"page-label",e(2694),"vfb-preview-empty-icon",e(2045),e(3738),e(586),"parentElement","onClick",e(3293),e(2866),e(2975),"quote","#6200ee",e(3813),"Min",e(2652),e(3447),e(854),e(3564),e(710),e(1249),e(2264),"src/components/tools/BuilderConditions.vue",e(1746),e(3683),e(1222),e(1133),e(1981),e(1846),e(2491),e(3467),e(1073),e(2071),e(288),e(241),"✖ Error: File does not exist or is empty",e(1888),e(2825),e(3830),"Seconds","Default","vfb-toaster-container-visible",e(2454),e(2277),e(2335),e(868),e(3953),"bgPassive",e(3294),"aria-labelledby",e(2238),"tag","onKeypress",e(3489),e(2309),e(857),e(1319),e(750),e(3686),"fad","Cloned",e(2472),e(2006),e(2585),e(3952),e(390),e(1522),e(3993),e(1664),e(2873),"prop-subtitle",e(3115),e(4002),e(2300),e(3548),e(2759),e(1251),"regex","Behavior",e(2944),e(3807),e(2250),e(1723),"innerWidth","mpeg","default_time_seconds_hour12","is equal to",e(3920),"script",e(3231),e(242),e(557),e(2581),e(4019),e(3103),"then",e(3657),"1307718cFNFeF","0.125rem",e(2267),e(3352),e(372),e(1874),e(1309),e(724),e(305),"vfb-model-preview-warning-text",e(842),e(821),"Multi-file options",e(513),e(3714),e(3431),e(1271),"lineHeightSmall",e(2541),e(2630),e(3837),"excludeFields",e(515),e(2158),e(3685),e(2843),"currentScript",e(769),e(2634),e(468),e(2269),"M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z",e(3349),e(1193),e(2358),e(2134),"0.1875rem",e(1105),e(1060),e(2353),e(3093),"border-color-input",e(2058),e(1668),e(4027),e(2184),e(3761),e(497),e(4007),e(397),e(1359),"off",e(3462),e(1403),e(3618),"avif",e(2884),e(2236),e(2012),e(1972),"node scripts/toSource.js",e(389),e(563),e(426)," Overlay left (when dragging over tab) ",e(1062),e(1219),e(3321),e(1070),e(2666),e(3933),e(3775),e(3638),e(1991),e(2573),e(3546),e(3295),e(4030),e(1122),e(3838),e(2440),e(3497),"canDeselect",e(1919),e(2182),e(3519),e(3233),e(1639),e(1424),e(2077),'
')},default:a[l(824)][r(945)][n],conditions:[[l(2101)[r(3907)](e,r(3977)),n],[r(3162)[l(1698)](e,l(3408)).concat(n,l(2428)),!1]]},c[r(842)][r(3482)][l(2262)][l(1103)][e][l(1103)][l(1566)][r(3482)][""[l(1698)](n,"_default")]={type:r(333),text:l(2452)[r(3907)](n,l(3529)),conditions:[[l(2101).concat(e,l(4037)),n]]})})),c[i(1883)][i(1103)][i(2262)][i(1103)][e][i(1103)][i(3398)][i(378)]=d,(3===d[o(1546)]||2===d[i(3854)])&&c[i(1883)][i(1103)][o(3065)][o(3482)][e][i(1103)][i(3398)][i(3560)][i(1096)](i(4230)[i(1698)](d[o(1546)]))})),c},kt=function(t,n,r,a){var o=e,i=V,l=this;if(t[i(597)]===n[i(597)]){var u={},s={};Object[i(2507)](t[i(2262)])[i(3126)]((function(e){var n=Q,r=i;!t[r(2262)][e].default&&(s[e]={},l[r(2997)][r(3126)]((function(n){var a=Q,o=r;!t[o(2262)][e][o(1566)][""[a(3907)](n,a(1534))]&&(s[e][n]=t[a(3065)][e][o(1566)][n])})),!Object[r(2507)](s[e])[n(1546)]&&delete s[e])})),Object[i(2507)](s)[i(3854)]?(1===Object[o(3671)](s)[o(1546)]&&s.default&&(s=s[i(4063)]),u[o(945)]=s,this[i(1118)](u)):this[i(1118)](null,[i(1566)])}},xt=function(e){var t=V,n=this,r={default:{default:!0,type:t(642),columns:{container:this[t(824)].columns[t(642)],container_default:!0,label:this[t(824)][t(1566)][t(3063)],label_default:!0,wrapper:this[t(824)][t(1566)][t(3396)],wrapper_default:!0}}};this[t(1255)][t(3126)]((function(e){var a=t;r[n[Q(3249)][a(2004)][e][a(3850)]]={default:!0,type:a(642),columns:{container:n[a(824)][a(1566)][a(642)],container_default:!0,label:n[a(824)][a(1566)][a(3063)],label_default:!0,wrapper:n.config$.columns[a(3396)],wrapper_default:!0}}}));var a={columns_wrapper:{device:this[t(597)][t(1660)],wrappers:r}};if(e[t(1566)]){var o=W({},e[t(1566)]);Object[t(2507)](o).some((function(e){var r=t;return-1!==n[Q(2901)][r(1427)](e)}))&&(o={default:o}),Object[t(2507)](o)[t(3126)]((function(e){var r=Q,i=t,l=o[e];-1!==Object[r(3671)](n[i(982)])[i(1427)](e)&&(a[i(1883)][r(3065)][e][i(4063)]=!1,n[r(2901)][i(3126)]((function(t){var n=i;a[n(1883)][n(2262)][e][n(1566)][""[n(1698)](t,n(2428))]=void 0===l[t],void 0!==l[t]&&(a[n(1883)][n(2262)][e][n(1566)][t]=l[t])})))}))}return a},Ft=function(t){var n=e,r=V;te(o,Xe);var a=ie(o);function o(){var e,t=Q,n=uu;Z(this,o);for(var r=arguments[n(3854)],i=new Array(r),l=0;l":case">=":case"<":case"<=":i.operator=""[t(3907)](a),i[t(2621)]=o;break;case"^":i.operator=n(3023);break;case"$":i[n(2117)]=n(4034);break;case"*":i[n(2117)]=n(3752);break;case n(576):i[n(2117)]="is",i[t(2621)]=n(576);break;case n(3388):i[n(2117)]=t(892);break;case n(1150):i[n(2117)]=n(3373)}return i}))}))})),handleEdit:function(){var e=n;o[e(1660)][e(1587)](e(2833),e(651),!0,{type:o[e(1660)][e(1665)]||e(1916)})}}}},St={class:"vfb-conditions-render"},Lt={class:V(2154)},Tt=s(V(481),{class:V(1957)},e(3637),-1),Mt={class:V(434)},Ot={key:0,class:"vfb-conditions-render-and"},_t={key:1,class:V(3423)},It={class:e(1791)},zt={class:V(1968)},Pt={class:V(3490)},jt={class:V(4220)},Ht={key:1,class:V(4056)},Nt={class:V(3139)};Bt[V(3266)]=function(t,n,r,a,o,i){var l=e,u=V;return m(),h(u(481),St,[a[u(651)].length?(m(),h(E,{key:0},[s(u(481),Lt,[Tt,s(u(481),{class:"vfb-conditions-render-title-btn",onClick:n[0]||(n[0]=S((function(){var e=u;return a[e(2580)]&&a[e(2580)][e(3738)](a,arguments)}),[l(1266)]))},u(4165))]),(m(!0),h(E,null,k(a[u(651)],(function(e,t){var n=l,r=u;return m(),h(r(481),{class:r(2296),key:t},[s(n(3184),Mt,[(m(!0),h(E,null,k(e,(function(e,a){var o=n,i=r;return m(),h(i(481),{key:a,class:o(2385)},[t&&!a?(m(),h(i(2962),Ot,i(3691))):B(i(4285),!0),a?(m(),h(i(481),_t,"or")):B(i(4285),!0),s(o(3184),It,[s(i(2962),zt,x(e[o(2468)]),1),s(i(2962),Pt,x(e.operator),1),s(o(2369),jt,x(e[i(3320)]),1)])])})),128))])])})),128))],64)):(m(),h(u(481),Ht,[s(u(481),Nt,x(a[u(375)]),1),s(u(481),{class:l(2677),onClick:n[1]||(n[1]=S((function(){var e=u;return a[e(2580)]&&a[e(2580)][e(3738)](a,arguments)}),[u(1646)]))},u(4165))]))])},Bt[V(3624)]=V(1798);var Rt={name:V(1742),data:function(){return{merge:!0,defaultClasses:{}}}};Rt[V(3266)]=function(t,n,r,a,o,i){var l=e,u=V,c=y(u(3575)),d=y("ElementText"),p=y(l(3119)),v=y(u(3757)),f=y(u(4133));return L((m(),h(u(481),{class:b(t[u(2382)][u(642)])},[s(l(3184),{class:b(t[u(2382)].outerWrapper)},[C(c,null,{default:w((function(){var e=l;return[g(t[e(623)],e(1507))]})),info:w((function(){var e=u;return[g(t[l(623)],e(3688))]})),_:3}),s(u(481),{class:b(t[u(2382)][l(3812)])},[s(u(481),{class:b(t[u(2382)][u(1884)])},[C(d,{type:u(3388)},{default:w((function(){var e=u;return[g(t[e(543)],e(3388))]})),_:3})],2),s(u(481),{class:b(t[u(2382)][u(2823)])},[g(t[u(543)],l(1668))],2),s(u(481),{class:b(t[u(2382)][u(936)])},[C(d,{type:"between"},{default:w((function(){var e=u;return[g(t[e(543)],e(3016))]})),_:3}),C(p,null,{default:w((function(){var e=u;return[g(t[e(543)],e(1866))]})),_:3}),C(v),C(f),C(d,{type:u(1150)},{default:w((function(){var e=u;return[g(t[e(543)],e(1150))]})),_:3})],2)],2)],2)],2)),[[T,t[u(1541)]]])},Rt[V(3624)]=V(957);var Vt=function(e){var t=V;te(r,Xe);var n=ie(r);function r(){var e,t=Q,a=uu;Z(this,r);for(var o=arguments[a(3854)],i=new Array(o),l=0;l1&&void 0!==arguments[1])||arguments[1];return void 0===t||typeof t!=n(2872)?t:t[n(998)](/^-*\d+$/)?parseInt(t,10):t[n(998)](/^\d+\.\d+$/)?parseFloat(t):typeof t===n(2872)&&r?t[n(513)]():t}var $t=function(e){var t=V;te(r,Xe);var n=ie(r);function r(){var e=uu;return Z(this,r),n[e(3738)](this,arguments)}return X(r,[{key:t(1103),get:function(){var e=Q,n=t;return{default:{type:this[n(3979)]?n(3748):n(2438),placeholder:this[e(370)]&&this[n(528)][n(1660)]!==this[n(1767)]?n(1768)[n(1698)](this[n(3148)]):void 0,floating:!1,label:n(3018),columns:{label:6}}}}}]),r}(),Xt=function(e){var t=V;te(r,rt);var n=ie(r);function r(){var e=uu;return Z(this,r),n[e(3738)](this,arguments)}return X(r,[{key:t(1103),get:function(){var e=Q,n=t;return{default:{type:this[n(3979)]?n(3748):n(2438),placeholder:this[e(370)]&&this[n(528)].value!==this[n(1767)]?n(1768)[n(1698)](this[e(607)]):void 0,floating:!1,label:n(3018),columns:{label:6}}}}}]),r}(),en=function(e){var t=V;te(r,rt);var n=ie(r);function r(){var e=Q;return Z(this,r),n[e(3280)](this,arguments)}return X(r,[{key:t(1103),get:function(){var e=Q,n=t;return{subtitle_default:{type:n(519),content:n(1816),presets:[n(1846)]},default:{type:this[n(3979)]?n(3618):n(2621),placeholder:this[e(370)]&&this[n(528)][n(1660)]!==this[e(1611)]?n(1768)[n(1698)](this[n(3148)]):void 0,floating:!1,onMounted:function(e){setTimeout((function(){e[uu(2737)]()}),0)}}}}}]),r}(),tn=function(e){var t=V;te(r,rt);var n=ie(r);function r(){var e,t=Q,a=uu;Z(this,r);for(var o=arguments[t(1546)],i=new Array(o),l=0;l0||null===[null,void 0][D(1427)](e)&&e.length0},onClick:function(){var t=e;n[t(3075)](t(1942),t(1218))}}}}}]),r}(),kn=function(e){var t=V;te(r,dt);var n=ie(r);function r(){var e,t=Q,a=uu;Z(this,r);for(var o=arguments[a(3854)],i=new Array(o),l=0;l:x: to reference the number of options, eg. :x: options selected',floating:!1,columns:{label:6},placeholder:e(4063)}}}})}}]),r}(),lr=function(e){var t=V;te(r,$e);var n=ie(r);function r(e){var t,a=Q,o=uu;return Z(this,r),ee(oe(t=n[o(2541)](this,e)),o(640),o(3659)),ee(oe(t),a(381),!1),t[a(3743)]=e[o(1103)][t[a(2804)]],t[a(2779)]=e[o(3661)],t}return X(r,[{key:t(1103),get:function(){var e=Q,n=t,r=this;return{name:{type:e(1642),label:n(3502),templates:{ElementLayout:c(Rt)},columns:{label:6},onBlur:function(t){var a=e,o=n;t[o(3054)][o(1426)]();var i=r[a(2779)](t[o(1660)]);if(!0===i);else t[o(3054)][o(885)](i)},onMounted:function(t){var r=e,a=n;t[a(3500)][a(2951)](a(2357))[r(470)](a(1419),(function(e){var t=r,n=a;(e[n(3482)]===n(1802)||e[n(3709)]===t(1133))&&e[n(3786)][n(2942)]()}))}}}}}]),r}(),ur=function(t){var n=e,r=V;te(o,Xe);var a=ie(o);function o(){var e,t=Q,n=uu;Z(this,o);for(var r=arguments[n(3854)],i=new Array(r),l=0;l1}},{key:t(1767),get:function(){return this[Q(3249)].fallbackLocale}},{key:t(3148),get:function(){var e=Q,n=t;return this[e(3249)][e(2795)][this[n(1767)]]}},{key:t(1103),get:function(){var e=Q,n=t;return this[e(2725)]({noOptionsText:{type:this[n(3979)]?e(2461):n(2621),label:n(3315),info:e(1894),placeholder:this[n(3979)]&&this[n(528)][n(1660)]!==this[e(1611)]?n(1768)[n(1698)](this[n(3148)]):n(4063),floating:!1,rows:1,columns:{label:6},onMounted:function(e){setTimeout((function(){e[uu(2737)]()}),0)}}})}}]),r}(),dr=function(t){var n=e,r=V;te(o,vt);var a=ie(o);function o(){var e,t,n,r,i=Q,l=uu;Z(this,o);for(var u=arguments[l(3854)],s=new Array(u),c=0;c1}},{key:n(1611),get:function(){var e=n;return this[r(824)][e(1611)]}},{key:r(3148),get:function(){var e=n,t=r;return this[t(824)][e(2795)][this[t(1767)]]}},{key:r(1103),get:function(){var e=n,t=r;return this[t(3853)]({noResultsText:{type:this[t(3979)]?e(2461):t(2621),label:t(2696),info:t(2672),placeholder:this[t(3979)]&&this[t(528)][t(1660)]!==this[t(1767)]?t(1768)[e(3907)](this[e(607)]):t(4063),floating:!1,rows:1,columns:{label:6},onMounted:function(e){setTimeout((function(){e[uu(2737)]()}),0)}}},[[t(1039),!0]])}}]),o}(),pr=function(e){var t=V;te(r,vt);var n=ie(r);function r(){var e,t,a=Q,o=uu;Z(this,r);for(var i=arguments[o(3854)],l=new Array(i),u=0;ulearn more')}})}}]),r}(),vr=function(e){var t=V;te(r,Xe);var n=ie(r);function r(){var e,t=Q,a=uu;Z(this,r);for(var o=arguments[t(1546)],i=new Array(o),l=0;l0&&void 0!==arguments[0]?arguments[0]:this[e(1059)];return this[e(2321)](t)}},{key:r(2321),value:function(e){var t=n,a=r,o=this,i=arguments[t(1546)]>1&&void 0!==arguments[1]?arguments[1]:1,l=[];return e[a(3126)]((function(e){var n=t,r=a;(i>1||-1===o[r(755)][r(1427)](e[r(402)]))&&(l[r(1096)](e[r(402)]),e[r(1795)]&&e[r(3398)]!==n(2634)&&o[r(2321)](e[r(1795)],i+1)[r(3126)]((function(e){l[n(2024)](e)})))})),l}},{key:"update",value:function(e,t){var a=n,o=r;this[a(1987)]("update-builder",this[o(3398)],{update:e,remove:t},{path:this[o(2130)],delayable:this[o(4204)],queue:this[a(437)]})}}]),o}(),Ar=function(e){var t=V;te(r,fr);var n=ie(r);function r(){var e,t=Q,a=uu;Z(this,r);for(var o=arguments.length,i=new Array(o),l=0;l0?i[a(1427)]=u:l[o(1096)](o(1207))}else l[o(1096)](o(1207));this[o(1118)](i,l)}},{key:t(3572),value:function(e){var n=Q,r=t,a={};if(e.params){var o=[];Object[r(2507)](e[n(1427)])[r(3126)]((function(t){var a=n,i=e[r(1207)][t];o[a(2024)]({key:t,value:i})})),a[r(1207)]=o}return{params_wrapper:a}}}]),r}(),yr=function(e){var t=V;te(r,rt);var n=ie(r);function r(){var e,t=Q,a=uu;Z(this,r);for(var o=arguments[t(1546)],i=new Array(o),l=0;l0?s[i(488)]=parseInt(e[i(488)]):e[l(3955)]!=(null==t?void 0:t[l(3955)])&&c[i(2024)](l(3955))),this[l(2939)][i(3448)]&&(s[l(2552)]=parseInt(e[i(3448)])||0)):(null==t?void 0:t[i(4038)])===i(2490)&&e[l(636)]!==i(2490)&&[l(1436),l(2552),l(4234),"minChars",l(3458)][l(3126)]((function(e){var t=i;u[l(2939)][e]&&c[t(2024)](e)}));e[l(636)]===l(4326)&&(null==t?void 0:t[l(636)])!==l(4326)?this[l(1153)]():e[l(636)]!==l(4326)&&(null==t?void 0:t[i(4038)])===l(4326)&&this[i(2874)](),this.update(s,c)}},{key:r(3572),value:function(e){var t,n,a=Q,o=r,i=this,l={source:this[o(3851)]};if(null!==(t=e[a(3342)])&&void 0!==t&&t[a(2163)]&&this[o(2939)][o(4326)])l[a(4038)]=a(2163),l[a(2163)]=JSON[a(2400)](e[o(378)],null,2);else if(typeof e[o(378)]===a(1980)&&this[a(1624)][o(3549)])l[o(636)]=o(3549),l[a(2490)]=e.items;else if(Array[a(3305)](e[o(378)])&&this[o(2939)].list)l[o(1901)]=e[o(378)],l[o(636)]=o(1901);else if(U(e[o(378)])===o(3703)&&this[o(2939)][o(1901)]){var u=[];Object[o(2507)](e[o(378)])[o(3126)]((function(t){var n=a;u[o(1096)]({value:t,label:e[n(2797)][t]})})),l[o(636)]=o(1901),l[o(1901)]=u}return this[o(3979)]&&l[a(4038)]===o(1901)&&(l[o(1901)]=l[o(1901)].map((function(e){var t=o,n=void 0!==e[t(3063)]&&U(e[t(3063)])!==t(3703)?ee({},i[t(528)][t(1660)],e[t(3063)]):e[t(3063)];return W(W({},e),{},{label:n})}))),(null!==(n=e[a(3342)])&&void 0!==n&&n[a(2163)]||"string"==typeof e[a(2797)])&&[o(1374),o(1484),o(3064),o(3571)][o(3126)]((function(t){e[t]&&(l[t]=e[t])})),void 0!==e[o(2552)]&&(e[o(2552)]>0&&(l[a(3448)]=e[o(2552)]),l[o(1932)]=!0),l[o(4234)]=void 0===e[o(4234)]||e[o(4234)],l[o(3955)]=void 0!==e[o(3955)]?e[o(3955)]:null,l[o(3458)]=void 0!==e[o(3458)]&&e[o(3458)],l[a(1128)]=void 0===e[a(1128)]||e[o(1436)],{items_wrapper:l}}},{key:r(830),value:function(){var e=Q,t=r;document[t(2870)](e(384))[t(4266)]()}},{key:r(1298),value:function(){var e=Q,t=r,n=document[e(2736)](t(3152));n[n[e(1546)]-1][t(4266)]()}},{key:r(3141),value:function(){var e=Q,t=r,n=document[t(2860)](e(3515));n[n[e(1546)]-1][t(1360)]()}},{key:r(766),value:function(){var e=Q,t=r;this[t(3075)](e(815),this[t(3398)],{remove:e(2163)},{path:this[e(2804)],prop:t(3880),delayable:this[t(4204)],queue:this[t(4317)]+t(2768),removeParentIfEmpty:!0})}},{key:n(1272),value:function(){var e=n,t=r;this[t(3075)](t(3911),this[e(2940)],{update:{json:!0}},{path:this[t(882)],prop:t(3880),delayable:this[t(4204)],queue:this[e(437)]+t(2768)})}}]),o}(),Lr=function(e){var t=V;te(r,vt);var n=ie(r);function r(){var e,t,a=Q,o=uu;Z(this,r);for(var i=arguments[o(3854)],l=new Array(i),u=0;u2&&void 0!==arguments[2]?arguments[2]:{};return W({type:n(3703),schema:{sm:this[n(3912)](e,"sm",t),md:this[n(3912)](e,"md",t),lg:this[n(3912)](e,"lg",t)}},r)}},{key:a(889),value:function(e){var t=r,n=a,o=this;return{type:n(3875),text:n(3772),label:t(3433),default:!0,columns:{label:8},conditions:[[n(4062),e]],onChange:function(e,r,a){var i=t,l=n;if(!o[l(3267)]){var u=a[l(3974)][l(2559)](i(1491))[l(1660)],s=a[i(3594)][l(1251)][i(3260)][l(1805)][l(876)];if(e){var c=s[l(3396)][l(876)].tl[l(876)][u][i(1109)];s[l(4120)][i(3260)][u][l(1118)](c)}else{var d=a[l(1251)][l(1251)][l(876)][l(1805)][l(876)][l(4120)][l(876)][u][l(1660)];s[l(3396)][l(876)].tl[l(876)][u][l(1118)](d),s[l(3396)][i(3260)].tr.children$[u][l(1118)](d),s[l(3396)][l(876)].br[l(876)][u][l(1118)](d),s[l(3396)][i(3260)].bl[l(876)][u][l(1118)](d)}}}}}},{key:r(3830),value:function(e){var t=this;return function(n){var r=Q,a=uu,o=n.el$(a(4062))[a(1660)],i=n[r(4047)](""[a(1698)](t[a(1614)],".")[a(1698)](t[a(684)],".same.")[r(3907)](o));return!o||!i||i[a(1660)]==e}}}]),i}(),Wr=function(e){var t=V;te(r,ft);var n=ie(r);function r(){var e,t=uu;Z(this,r);for(var a=arguments[t(3854)],o=new Array(a),i=0;iparseInt(n[a(3786)][a(572)](r(2046)))&&(n[a(3786)][a(1660)]=n[a(3786)][a(572)](r(2046)))}},default:0,columns:{label:8}}),this[t(2939)][t(946)]&&(n[t(2407)][t(1103)][e(3107)]={type:t(2438),label:t(1350),columns:{label:8}}),n}},{key:n(2604),value:function(e){var t=n,a=r,o=this;if(e){var i={};this[a(2997)][a(834)]((function(e){return o.enabledFeatures[e]}))[a(3126)]((function(t){var n=a;null!==e[t]&&""!==e[t]&&(i[t]=t===n(976)?parseInt(e[t]):e[t])})),Object[a(2507)](i).length?this[a(1118)]({format:i}):this[t(413)](null,a(2407))}else this[a(1118)](null,a(2407))}}]),o}(),ea=function(t){var n=e,r=V;te(o,Xe);var a=ie(o);function o(){var e,t,n=Q,r=uu;Z(this,o);for(var i=arguments[n(1546)],l=new Array(i),u=0;u1}]},n[t(4035)][t(1103)][t(1557)]={type:t(2438),inputType:e(1142),label:e(3078),float:!0,attrs:{min:0},columns:{label:8},conditions:[[e(756),!0],[e(2439),!0]]}),this[t(2939)][t(3091)]&&(n[t(4035)][t(1103)][t(2157)]={type:t(1962),presets:[t(523),t(3197)],view:e(1296),items:{always:t(3252),focus:t(829),drag:t(2713)},label:"Show tooltips",columns:{label:6},default:e(1276),conditions:[[t(670),!0]]}),this[t(2939)].position&&(n[e(782)][t(1103)][t(3217)]={type:t(1962),presets:[t(523),t(3197)],view:t(1647),items:{top:e(3906),bottom:t(2859)},label:e(1672),columns:{label:6},default:e(1189),conditions:[[t(670),!0],[t(2319),t(2553)]]},n[t(4035)][t(1103)][t(445)]={type:t(1962),presets:["tabs-tiny",t(3197)],view:t(1647),items:{left:t(1603),right:t(517)},label:e(1672),columns:{label:6},default:"left",conditions:[[t(670),!0],[t(2319),t(2597)]]}),n}},{key:n(2604),value:function(e,t,a,o){var i=n,l=r,u={},s=[];if(e[l(3682)]){if(this.enabledFeatures[l(2888)]){var c=e[l(3217)]||e[l(445)];!c&&(c=void 0!==e[l(3217)]?l(3441):l(368)),-1===[l(368),l(3441)][l(1427)](c)?u[i(2866)]=c:s[l(1096)](l(1785))}this.enabledFeatures[l(3091)]&&(e[i(1587)]!==l(3706)?u[l(2157)]=e[l(2157)]:s[l(1096)](i(1587))),this[l(2939)][l(1557)]&&(e[l(1557)]?u[l(1557)]=parseInt(e[i(1722)]):s[i(2024)](l(1557))),s[l(1096)]("tooltips")}else u[l(3682)]=!1,this[i(1624)][l(2888)]&&s[i(2024)](l(1785)),this[l(2939)][l(3091)]&&s[l(1096)]("showTooltip"),this[i(1624)][l(1557)]&&s[l(1096)](i(1722));this[i(413)](u,s)}},{key:r(3572),value:function(e){var t=n,a=r,o={};return o[t(3210)]=!1!==e[a(3682)],this[a(2939)].merge&&void 0!==e[a(1557)]&&(o[a(2600)]=!0,o[t(1722)]=e[a(1557)]),this[a(2939)][t(578)]&&(o[a(2157)]=e[a(2157)]&&e[a(2157)]!==a(3706)?e[a(2157)]:t(1276)),this[a(2939)][t(2734)]&&!1!==e[a(3682)]&&(e[a(1202)]===a(2597)?o[a(445)]=e[a(1785)]||a(3441):o[t(1490)]=e[a(1785)]||t(1189)),{tooltips_wrapper:o}}}]),o}(),ta=function(e){var t=V;te(r,ft);var n=ie(r);function r(){var e,t=Q,a=uu;Z(this,r);for(var o=arguments[t(1546)],i=new Array(o),l=0;l=1?(m(),h(E,{key:0},[f(l(1885))],64)):B(l(3930),!0)]),r[u(3491)][u(642)]&&r[u(3491)][u(1795)]&&r[u(3491)][l(710)][u(3854)]&&!r[u(3491)][u(397)]?(m(),h(u(481),{key:0,class:b([u(3793),r.option[u(4140)]>0?l(3787):null])},[C(c,{class:u(1061),icon:[l(1328),l(2810)]})],2)):B(l(3930),!0),s(u(481),oa,[typeof r.option[u(644)]===u(2872)?(m(),h(u(2352),{key:0,class:l(2035),src:r[u(3491)][u(644)],title:r[u(3491)][l(4e3)]},null,8,ia)):(m(),F(c,{key:1,class:l(2035),icon:r[u(3491)][u(644)]||[u(910),u(2751)]},null,8,[u(644)]))]),s(u(481),la,[s(l(3184),ua,x(r[u(3491)][l(3106)]),1),r[u(3491)][u(3395)]?(m(),h(u(481),sa,x(r[u(3491)][u(3395)]),1)):B(u(4285),!0)])],2)},ra[V(3624)]=V(2394);var ca={props:{value:{type:Object,required:!0}},setup:function(e,t){var o=V,i=a(e)[o(1660)],l=n(o(824));return{primaryLabel:r((function(){var e=Q,t=o;return l[t(1660)][t(4223)]?i[t(1660)][t(402)]:i[e(1109)][t(2566)]}))}}},da={class:V(2656)},pa={class:V(2102)},va={class:V(533)},fa=[V(3006),V(2720)],Aa={class:V(2908),"aria-hidden":V(1758)},ma={class:e(3982)},ha={key:0,class:V(1486)};ca[V(3266)]=function(t,n,r,a,o,i){var l=e,u=V,c=y(l(2209));return m(),h("div",da,[s(l(3184),pa,[s(u(481),va,[typeof r[l(1109)][u(644)]===u(2872)?(m(),h(u(2352),{key:0,class:u(1624),src:r.value[l(1640)],title:r[l(1109)][u(2880)]},null,8,fa)):(m(),F(c,{key:1,class:u(1624),icon:r[u(1660)][u(644)]||[u(910),u(2751)]},null,8,[u(644)]))]),s(l(3184),Aa,[s(u(481),ma,x(a[u(2566)]),1),r[u(1660)][l(3272)]?(m(),h(u(481),ha,x(r[u(1660)][u(3395)]),1)):B(u(4285),!0)])])])},ca.__file="src/components/vueform/FieldSelectSingleLabel.vue";var ga=function(t){var n=e,r=V;te(o,Xe);var a=ie(o);function o(){var e,t=Q,n=uu;Z(this,o);for(var r=arguments[n(3854)],i=new Array(r),l=0;lA})),h=p[r(1439)]((function(e,t){return t>c&&e[r(1439)]((function(e){return-1!==s.indexOf(e)}))}));m&&(h||f)&&(l[u][r(3560)]=[r(3299)][r(1698)](l[e][r(3560)]||[]))}else v[e]=i[e]})),Object[a(2507)](v)[a(3854)]){var A=Object[a(3481)](v)[a(2204)]();v=A[a(2043)]((function(e,t){var n=a;return e[Object[n(2507)](v)[n(2748)]((function(e){return v[e]===t}))]=t,e}),{});var m=this[a(3713)](),h=this[a(3713)](this[a(1059)],!0);l[n(1854)]={type:a(1901),initial:0,label:a(3887),presets:[a(3015)],object:{presets:[a(3787),a(3833)],label:function(e){var t=n;return parseInt(e[t(1461)])>=1?t(878):""},schema:{rule:{type:n(3045),presets:[a(1799)],placeholder:a(3877),floating:!1,items:v},before_or_after:{type:"select",placeholder:a(2034),floating:!1,items:{today:a(2068),tomorrow:a(3439),yesterday:a(1198),date:a(1490),other:a(3826)},presets:[n(1746)],conditions:[[a(1309),[a(3388),a(1373),a(1150),"after_or_equal"]]]},date:{type:a(2056),placeholder:"Select a date",floating:!1,addClass:"vfb-config-datepicker",presets:[a(1799)],extendOptions:{allowInput:!0},conditions:[function(e,t){var r=n,o=a;return-1!==[o(3082)][o(1427)](t[o(1251)][o(876)][o(1133)][r(1109)])||-1!==[o(2056),"datetime"].indexOf(t[o(1251)][o(876)][o(4276)][o(1660)])}]},other:{type:a(894),inputType:a(1502),canClear:!1,canDeselect:!1,search:!0,autocomplete:a(1924),presets:[a(1799)],placeholder:a(4152),floating:!1,items:m,trackBy:a(1598),noResultsText:a(1903),addClass:{select:{search:a(4176),dropdown:a(3325),option:m[a(1439)]((function(e){var t,r=n;return e[r(2226)]&&(null===(t=e[r(710)])||void 0===t?void 0:t[r(1546)])}))?"":a(956),optionPointed:a(2444),optionSelected:a(3671),optionSelectedPointed:a(2274),groupLabel:a(3553)}},slots:{option:c(ra),"single-label":c(ca)},conditions:[function(e,t){var r=n,o=a;return-1!==[o(4004),o(873),"gt",o(1650),"lt",r(1469)][r(3310)](t[o(1251)][o(876)][o(1133)][o(1660)])||-1!==[o(1104)][o(1427)](t[o(1251)][o(876)][o(4276)][o(1660)])}]},otherList:{type:a(894),inputType:"search",canClear:!1,canDeselect:!1,search:!0,autocomplete:a(1924),presets:[a(1799)],placeholder:n(2186),floating:!1,items:h,trackBy:a(1598),noResultsText:"No elements found",addClass:{select:{search:a(4176),dropdown:a(3325),option:h[a(1439)]((function(e){var t,n=a;return e[n(642)]&&(null===(t=e[n(1795)])||void 0===t?void 0:t[n(3854)])}))?"":a(956),optionPointed:a(2444),optionSelected:a(3671),optionSelectedPointed:a(2274),groupLabel:a(3553)}},slots:{option:c(ra),"single-label":c(ca)},conditions:[[a(1309),[a(2593)]]]},format:{type:n(1642),placeholder:"Format (eg. YYYY-MM-DD HH:mm:ss)",floating:!1,presets:[a(1799)],conditions:[[a(1309),[a(1998)]]]},value:{type:a(2438),placeholder:a(325),presets:[a(1799)],conditions:[[a(1309),[n(3527)]]]},min:{type:a(2438),placeholder:a(1790),columns:6,presets:["prop-list-el"],conditions:[[a(1309),[a(1056)]]]},max:{type:a(2438),placeholder:a(2697),columns:6,presets:[n(1746)],conditions:[["validation.validation_wrapper.rules.*.rule",[a(1056)]]]},in:{type:a(1870),placeholder:n(2655),closeOnSelect:!1,floating:!1,showOptions:!1,presets:[a(1799)],create:!0,object:!0,conditions:[[a(1309),"in"]]},not_in:{type:a(1870),placeholder:a(1791),closeOnSelect:!1,floating:!1,showOptions:!1,presets:[a(1799)],create:!0,object:!0,conditions:[[n(297),n(1595)]]},helper:{type:a(519),slots:{default:{props:[a(2559)],render:function(){var e,t,r=n,o=a;switch(this[o(2559)][o(1251)][r(3260)][r(368)][r(1109)]){case"in_array":t=o(2138);break;case r(3527):t=r(1279);break;case o(3330):t=o(1340);break;case r(3588):t=[o(1100),u("a",{href:o(2806),target:o(2519),class:o(319)},r(1438))];break;case o(3580):case o(2961):(null===(e=this[o(2559)][o(3974)][o(1724)][o(1282)])||void 0===e||null===(e=e[r(3260)])||void 0===e||null===(e=e[o(2224)])||void 0===e?void 0:e[o(1660)])===o(3295)&&(t=o(2781));break;case r(3966):t=[o(2283),u("code",o(2858))," ",u("a",{href:o(2571),target:o(3894),class:o(319)},r(2490)),o(2010)]}return u(o(481),{class:t?r(1095):o(3329)},t)}}}}}}}}return{validation_wrapper:{type:a(3703),schema:l}}}},{key:r(1224),value:function(e,t,n){var a=Q,o=r,i=[];if(e[a(2341)]&&i[o(1096)](o(3977)),e.required&&(e[o(1137)]?i[o(1096)]({required:JSON[o(614)](e[o(1137)])}):i[o(1096)](a(3587))),e[a(267)]&&i.push(o(2969)),e[o(3902)]&&e[o(3902)][o(3902)]){var l=o(3902);e[o(3902)][o(1207)]&&e[o(3902)][o(1207)][o(3854)]&&(l+=":"[o(1698)](e[o(3902)][o(1207)][o(3819)]((function(e){return e[o(1660)]}))[o(2851)](","))),i[o(1096)](l)}if(e.exists&&e[o(3365)][o(3365)]){var u=a(2260);e[o(3365)][o(1207)]&&e[o(3365)][o(1207)][o(3854)]&&(u+=":"[o(1698)](e[a(2260)][o(1207)][o(3819)]((function(e){return e[o(1660)]}))[o(2851)](","))),i[o(1096)](u)}if(e[o(3110)]&&e[o(3110)][o(3854)]&&i[o(1096)](o(3406)[o(1698)](e[o(3110)][a(599)]((function(e){return e[o(1660)]}))[o(2851)](","))),e[o(3190)]&&e[a(3668)][o(3854)]&&i[o(1096)](o(1185)[o(1698)](e.mimes[o(3819)]((function(e){return e[o(1660)]}))[o(2851)](","))),void 0!==e[a(1320)]&&-1===["",null][o(1427)](e[o(2894)])&&i[o(1096)](o(1772)[o(1698)](e[o(2894)])),void 0!==e[o(2229)]&&-1===["",null][o(1427)](e[a(2046)])&&i[o(1096)](o(1281)[o(1698)](e[a(2046)])),void 0!==e[o(655)]&&-1===["",null][o(1427)](e[o(655)])&&i[o(1096)](o(1902)[a(3907)](e[o(655)])),e[o(1853)]&&e[a(3759)][a(3759)]&&e[a(3759)][o(2627)]===o(998)&&i[o(1096)](o(479)[o(1698)](e[a(3759)][o(1853)])),e[o(1853)]&&e[o(1853)][o(1853)]&&e[o(1853)][o(2627)]===a(1518)&&i[o(1096)](o(2618)[a(3907)](e[o(1853)][o(1853)])),e[o(2234)]){var s=[];[o(2989),o(767),o(1013),a(2215),o(4279),o(598),a(2986)][o(3126)]((function(t){var n=a,r=o;e[r(2234)][t]&&s[r(1096)](""[n(3907)](t,"=")[r(1698)](e[r(2234)][t]))})),s[o(3854)]&&i[o(1096)](o(2164)[o(1698)](s[o(2851)](",")))}e[a(1854)]&&e[o(3165)][o(3126)]((function(e){var t=a,n=o;if(e&&e[n(1133)])switch(e[n(1133)]){case n(4004):case n(873):case"gt":case n(1650):case"lt":case n(3301):e[t(3495)]&&i[n(1096)](""[n(1698)](e[n(1133)],":")[n(1698)](e[t(3495)]));break;case n(2593):e[n(1428)]&&i[t(2024)](""[n(1698)](e[n(1133)],":").concat(e[n(1428)]));break;case n(1150):case n(3029):case n(3388):case n(1373):switch(e[n(4276)]){case n(576):case n(1140):case n(3756):i[n(1096)](""[n(1698)](e[t(368)],":")[n(1698)](e[t(1172)]));break;case"date":e.date&&i[n(1096)](""[t(3907)](e[t(368)],":")[n(1698)](e[n(2056)]));break;case n(1104):e.other&&i[t(2024)](""[n(1698)](e[n(1133)],":").concat(e[n(1104)]))}break;case n(3082):e[n(2056)]&&i[t(2024)](""[n(1698)](e[n(1133)],":")[n(1698)](e[n(2056)]));break;case n(1998):e[n(2407)]&&i[t(2024)](""[n(1698)](e[n(1133)],":")[n(1698)](e[t(2531)]));break;case"in":case"not_in":e[e[t(368)]][n(3854)]&&i[n(1096)](""[n(1698)](e[n(1133)],":")[n(1698)](e[e[t(368)]][n(3819)]((function(e){return e[n(1660)]}))[n(2851)](",")));break;case n(641):e[n(1660)]&&i[n(1096)](""[t(3907)](e[n(1133)],":")[n(1698)](e[t(1109)]));break;case n(1056):e[n(2894)]>=0&&e[n(2229)]>=0&&null!==e.min&&null!==e[n(2229)]&&i[t(2024)](""[n(1698)](e[n(1133)],":").concat(e[n(2894)],",")[n(1698)](e[n(2229)]));break;default:i[t(2024)](e.rule)}})),i[o(3854)]?this[o(1118)]({rules:i}):this[o(1118)](null,a(1854))}},{key:r(3572),value:function(e){var t=Q,n=r,a={};return e[n(3165)]&&(a[t(1854)]=[],e[n(3165)][n(3126)]((function(e){var r=t,o=n;if(U(e)===o(3703)&&e[o(2268)])a[o(2268)]=!0,a[r(1568)]=JSON[r(2400)](e[o(2268)]);else if(e===o(2268))a[r(3587)]=!0;else if(e===o(3977))a[r(2341)]=!0;else if(e===o(2969))a[o(2969)]=!0;else if(e[o(998)](/^unique/))a[o(3902)]={unique:!0},e[r(1719)](/^unique:/)&&(a[r(1937)][o(1207)]=e[o(2297)](r(1392),"")[o(1695)](",")[r(599)]((function(e){return{label:e,value:e}})));else if(e[o(998)](/^exists/))a[o(3365)]={exists:!0},e[o(998)](/^exists:/)&&(a[o(3365)][r(1427)]=e[o(2297)](o(2913),"")[o(1695)](",")[o(3819)]((function(e){return{label:e,value:e}})));else if(e.match(/^mimetypes:/))a[o(3110)]=e[o(2297)](o(3406),"")[o(1695)](",")[o(3819)]((function(e){return{label:e,value:e}}));else if(e[o(998)](/^mimes:/))a[o(3190)]=e[o(2297)](o(1185),"")[o(1695)](",")[o(3819)]((function(e){return{label:e,value:e}}));else if(e[o(998)](/^min:/))a[o(2894)]=parseInt(e[o(2297)](o(1772),""));else if(e[o(998)](/^max:/))a.max=parseInt(e[o(2297)](o(1281),""));else if(e[o(998)](/^size:/))a[r(558)]=parseInt(e.replace(o(1902),""));else if(e[o(998)](/^regex:/))a[o(1853)]={regex:e[r(3211)](o(479),""),regex_match:"match"};else if(e[o(998)](/^not_regex:/))a[o(1853)]={regex:e[o(2297)](o(2618),""),regex_match:o(1992)};else if(e[o(998)](/^dimensions:/)){var i=e[o(2297)](o(2164),"").split(",")[o(3819)]((function(e){var t=o;return{key:e.split("=")[0],value:e[t(1695)]("=")[1]}}));a[o(2234)]={},i[r(3692)]((function(e){var t=o;a[t(2234)][e[t(3709)]]=e[t(1660)]}))}else if(e[o(998)](/^(different|same|gt|gte|lt|lte):/)){var l=e[o(998)](/^(different|same|gt|gte|lt|lte):/)[1];a[r(1854)].push({rule:l,other:e.replace(""[r(3907)](l,":"),"")})}else if(e[o(998)](/^(in_array):/)){var u=e[o(998)](/^(in_array):/)[1];a[o(3165)][o(1096)]({rule:u,otherList:e.replace(""[o(1698)](u,":"),"")})}else if(e[o(998)](/^(before|before_or_equal|after|after_or_equal):/)){var s=e[o(998)](/^(before|before_or_equal|after|after_or_equal):(.*)$/),c=s[1],d=s[2],p={rule:c};switch(d){case o(576):case o(1140):case o(3756):p[r(1172)]=d;break;default:d[o(998)](/^\d{4}-\d{2}-\d{2}$/)?(p[o(4276)]=o(2056),p[r(2829)]=d):(p[o(4276)]="other",p[o(1104)]=d)}a[o(3165)][o(1096)](p)}else e[o(998)](/^date_equals:/)?a[o(3165)][o(1096)]({rule:"date_equals",date:e[o(2297)](r(3851),"")}):e[r(1719)](/^date_format:/)?a[o(3165)][o(1096)]({rule:o(1998),format:e[o(2297)](o(2073),"")}):e.match(/^in:/)?a[o(3165)][o(1096)]({rule:"in",in:e[o(2297)](o(3813),"")[o(1695)](",")[o(3819)]((function(e){return{label:e,value:e}}))}):e[o(998)](/^not_in:/)?a[r(1854)][o(1096)]({rule:o(2284),not_in:e[o(2297)](o(3046),"")[o(1695)](",")[o(3819)]((function(e){return{label:e,value:e}}))}):e[o(998)](/^digits:/)?a[o(3165)][r(2024)]({rule:o(641),value:e[o(2297)](o(1843),"")}):e[o(998)](/^digits_between:/)?a[o(3165)][o(1096)]({rule:o(1056),min:e[r(3211)](o(3495),"")[o(1695)](",")[0],max:e[r(3211)](o(3495),"")[o(1695)](",")[1]}):a[o(3165)][o(1096)]({rule:e})}))),{validation_wrapper:a}}},{key:n(1430),value:function(e,t){var a,o=n,i=r,l=null===(a=e[i(3974)][i(1724)][o(990)])||void 0===a||null===(a=a[i(876)])||void 0===a||null===(a=a[i(2224)])||void 0===a?void 0:a[i(1660)];switch(this[o(2806)]){case i(698):case o(3103):case o(1053):case i(457):case"multifile":case i(1901):return""[i(1698)](t,i(3615));case o(3306):return""[i(1698)](t,i(2971));case i(923):return""[i(1698)](t,o(1751));default:return"number"===l?""[i(1698)](t,i(2971)):""[i(1698)](t,i(2275))}}}]),o}(),ba=function(e){var n=V;te(a,Xe);var r=ie(a);function a(){var e,t=Q,n=uu;Z(this,a);for(var o=arguments[n(3854)],i=new Array(o),l=0;llearn more'),items:a,default:r(4063),columns:{label:4}}};return 1===Object[r(2507)](a)[r(3854)]&&(o[e(3772)]={type:r(3329),default:this[r(4224)][r(996)]||r(4063)}),o}}]),a}(),ya=function(e){var n=V;te(a,Xe);var r=ie(a);function a(){var e,t=uu;Z(this,a);for(var n=arguments[t(3854)],o=new Array(n),i=0;i0&&void 0!==arguments[0])||arguments[0],o=null===(e=C[r(1660)][r(1128)])||void 0===e?void 0:e[r(1296)][r(640)],i=null===(t=C[r(1660)][r(3344)])||void 0===t?void 0:t[n(3376)][r(640)];C.value[r(3621)](a),A[r(1660)]===r(3935)&&l((function(){var e=n,t=r;C[t(1660)][t(1229)]&&C.value[t(3344)][e(2479)](),o&&C[e(1109)][t(1128)][e(1253)](o),i&&C[t(1660)][t(3344)][e(1253)](i)}))};return d((function(){var e=Q,t=p;C[t(1660)][t(538)](),C[e(1109)][t(1617)](),z(!1),C[t(1660)][t(1229)]&&C[t(1660)][t(3344)][e(2479)](),D(t(659),Y(G()[t(1005)]((function e(){var n=t;return G()[n(2400)]((function(e){for(var t=Q,r=n;;)switch(e[t(1269)]=e[r(2815)]){case 0:return e[r(2815)]=2,l();case 2:z(A[r(1660)]===r(3108));case 3:case t(1605):return e[r(3891)]()}}),e)})))),D(t(330),(function(){z()}))})),i(A,(function(e){var t,n=Q,r=p;(C[r(1660)][r(2149)]||C[r(1660)][n(1242)])&&(t=C.value.hasSteps?r(2612):r(671)),e===r(3935)?(C[n(1109)][r(1617)](),C[n(1109)][r(538)](),z(!1),C[r(1660)].resetValidators()):e===r(3108)&&(z(),C[n(1109)][n(1100)](),C[r(1660)][r(2470)](),t&&Object[n(859)](C[n(1109)][""[r(1698)](t,"s$")][""[r(1698)](t,"s$")])[r(3126)]((function(e){e[n(2042)]()})),Object[r(2507)](C[r(1660)][r(1724)])[n(3692)]((function(e){var t=n,a=r;C[a(1660)][a(1724)][e][a(2222)](),!C[a(1660)].elements$[e][a(883)]&&C[t(1109)][a(1724)][e].reinitValidation()}))),-1!==[n(1634),r(3108)][r(1427)](e)&&l((function(){var n=r;z("preview"===e),C[n(1660)][n(1229)]&&e===n(3935)&&C[n(1660)][n(3344)][n(1507)](),e===n(3935)&&h.value&&l((function(){var e=Q,r=n;C[r(1660)][""[r(1698)](t,"s$")][e(1253)](h[e(1109)])}))}))}),{immediate:!1}),i(m,(function(e){var t=p;return(s=s||Y(G()[t(1005)]((function e(t){var n=Q;return G()[n(753)]((function(e){for(var a=n,o=uu;;)switch(e[o(984)]=e[o(2815)]){case 0:if(F[o(1660)]&&F[o(1660)](),B[o(1660)]&&B.value(),t){e[o(2815)]=4;break}return e.abrupt(a(3475));case 4:return e[a(1009)]=6,l();case 6:F[a(1109)]=i(r((function(){var e,t=o;return null===(e=M[t(1660)])||void 0===e?void 0:e[t(3165)]})),Y(G()[o(1005)]((function e(){var t,n,r=a;return G()[r(753)]((function(e){for(var a=r,o=uu;;)switch(e[o(984)]=e[a(1009)]){case 0:return e.next=2,l();case 2:A[o(1660)]===a(1165)&&m[a(1109)]&&(null===(t=C[o(1660)][a(4047)](m[o(1660)]))||void 0===t||t[o(2626)](),null===(n=C[o(1660)][o(2559)](m[o(1660)]))||void 0===n||n[o(1312)]());case 3:case o(3517):return e[o(3891)]()}}),e)})))),B[a(1109)]=i(r((function(){var e,t=o;return null===(e=M[t(1660)])||void 0===e?void 0:e[t(4063)]})),Y(G()[o(1005)]((function e(){var t,n=o;return G()[n(2400)]((function(e){for(var r=Q,a=n;;)switch(e[a(984)]=e[r(1009)]){case 0:return e[a(2815)]=2,l();case 2:A[r(1109)]===a(3935)&&m[a(1660)]&&((t=C[a(1660)].el$(m[a(1660)]))&&!t[a(883)]&&"list"!==t[a(3398)]&&t[a(3621)]());case 3:case a(3517):return e[a(3891)]()}}),e)})))),S[o(1660)]=i(r((function(){var e,t=o;return null===(e=M[t(1660)])||void 0===e?void 0:e[t(3398)]})),Y(G()[a(3478)]((function e(){var t,n=o;return G()[n(2400)]((function(e){for(var r=n;;)switch(e[r(984)]=e[r(2815)]){case 0:return e[r(2815)]=2,l();case 2:m[r(1660)]&&((t=C[r(1660)][r(2559)](m[r(1660)]))&&!t[r(883)]&&t[r(3621)]());case 3:case r(3517):return e[r(3891)]()}}),e)}))));case 9:case o(3517):return e[o(3891)]()}}),e)}))))[t(3738)](this,arguments)})),i(b,(function(){l((function(){var e=Q;C[uu(1660)][e(1920)]()}))})),{schema:L,form$:C,wrapper:k,droppingFirst:w,droppingTop:E,draggingPages:_,templates:x,elementTypes:I,vars:T,hasTabs:O,reset:z,handleAddElement:function(e,t,n){var r=p;u[r(3075)](r(3782),e,t,n)},handleMoveElement:function(e,t,n){u.emit("move-element",e,t,n)},handleSelectElement:function(e){var t=p;u[Q(1987)](t(649),e)},handleCloneElement:function(e){var t=p;u[t(3075)](t(487),e)},handleRemoveElement:function(e){var t=p;u[t(3075)](t(1514),e)},handleResizeElement:function(e,t){var n=p;u[n(3075)](n(1727),e,t)},handleSetDraggedSchema:function(e){var t=p;u[t(3075)](t(2408),e)},handleKeydown:function(e){var t=Q,n=p;if(e[t(3534)]===k[n(1660)])if(-1!==[n(1802)," ",n(1064)][n(1427)](e.key)){e[n(3607)]();var r=C[n(1660)][t(999)][t(2736)]('.vfb-preview-form > div > .vfb-preview-element-container:not([style*="none"])')[0];r&&r[n(1360)]()}else if(e[n(3709)]===t(1816)){e[n(3607)]();var a=C[n(1660)][n(3500)][n(2860)](n(3783)),o=a[a[n(3854)]-1];o&&o[t(715)]()}},handleSelectPage:function(e){var t=Q;u.emit(t(2509),e)},handleRenamePage:function(e,t){var n=p;u[n(3075)](n(3522),e,t)},handleRemovePage:function(e){var t=p;u[t(3075)](t(2239),e)},handleAddPage:function(){var e=Q;u[e(1987)](e(3207))},handleRemovePages:function(){var e=p;u[e(3075)](e(1692))},handleMovePage:function(e,t,n){var r=p;u[r(3075)](r(2995),e,t,n)},handleMoveToPage:function(e,t,n){var r=p;u[Q(1987)](r(1239),e,t,n)},handleDragOverPreview:function(e){var t,n=Q,r=p;e[n(3915)](),-1!==[n(1296),r(2608)][r(1427)](null===(t=C[n(1109)])||void 0===t||null===(t=t[n(251)])||void 0===t?void 0:t[r(3398)])&&(E[r(1660)]=!0)},handleDragLeavePreview:function(){E[Q(1109)]=!1},handleDropPreview:function(e){var t=Q,n=p;E[n(1660)]=!1;var r=e[t(2265)][n(2592)](n(1103));r&&(r=JSON[n(614)](r),-1!==["tabs",n(2608)][n(1427)](r[n(3398)])&&u[n(3075)](n(3782),r))},handleAnnounce:function(e,t){var n=Q;u[p(3075)](n(2121),e,t)},handleStartMoving:function(e,t){u[p(3075)]("start-moving",e,t)}}}},gi=function(){z((function(e){var t=Q,n=uu;return{"647e7146-vars.primary":e[t(1359)].primary,"647e7146-vars.primaryDarker":e[t(1359)][n(630)],"647e7146-vars.colorOnPrimary":e[n(1923)][n(3645)],"647e7146-vars.danger":e[n(1923)][n(3804)],"647e7146-vars.dangerLighter":e[n(1923)][t(4035)],"647e7146-vars.success":e[t(1359)][n(3346)],"647e7146-vars.successLighter":e[n(1923)][n(2423)],"647e7146-vars.ringWidth":e[n(1923)][t(3821)],"647e7146-vars.ringColor":e[n(1923)][n(2886)],"647e7146-vars.gray50":e[n(1923)][t(1149)],"647e7146-vars.gray100":e.vars[t(2851)],"647e7146-vars.gray200":e.vars[t(2392)],"647e7146-vars.gray300":e[n(1923)][n(2253)],"647e7146-vars.gray400":e[n(1923)].gray400,"647e7146-vars.gray500":e[t(1359)][t(3337)],"647e7146-vars.gray600":e[n(1923)][n(1735)],"647e7146-vars.gray700":e[t(1359)][n(463)],"647e7146-vars.gray800":e[n(1923)][n(3901)],"647e7146-vars.gray900":e[n(1923)][n(3413)],"647e7146-vars.fontSize":e[n(1923)][t(3016)],"647e7146-vars.fontSizeSm":e[n(1923)][n(694)],"647e7146-vars.fontSizeLg":e[n(1923)][n(3360)],"647e7146-vars.fontSizeSmall":e[n(1923)][t(3859)],"647e7146-vars.fontSizeSmallSm":e[n(1923)][n(1763)],"647e7146-vars.fontSizeSmallLg":e[n(1923)][n(3256)],"647e7146-vars.lineHeight":e[t(1359)][t(674)],"647e7146-vars.lineHeightSm":e[t(1359)][n(4313)],"647e7146-vars.lineHeightLg":e[t(1359)][n(2386)],"647e7146-vars.lineHeightSmall":e[n(1923)][n(1890)],"647e7146-vars.lineHeightSmallSm":e[t(1359)][n(4314)],"647e7146-vars.lineHeightSmallLg":e[t(1359)][t(474)],"647e7146-vars.letterSpacing":e[n(1923)][n(1498)],"647e7146-vars.letterSpacingSm":e[n(1923)][t(2413)],"647e7146-vars.letterSpacingLg":e[n(1923)][t(3755)],"647e7146-vars.letterSpacingSmall":e[n(1923)][n(927)],"647e7146-vars.letterSpacingSmallSm":e[n(1923)][n(425)],"647e7146-vars.letterSpacingSmallLg":e[n(1923)][n(782)],"647e7146-vars.gutter":e[n(1923)][n(1911)],"647e7146-vars.gutterSm":e[n(1923)][n(1570)],"647e7146-vars.gutterLg":e[n(1923)][n(2021)],"647e7146-vars.minHeightInput":e.vars[t(3803)],"647e7146-vars.minHeightInputSm":e[n(1923)][n(1895)],"647e7146-vars.minHeightInputLg":e[n(1923)][n(2838)],"647e7146-vars.pyInput":e[n(1923)][t(812)],"647e7146-vars.pyInputSm":e[t(1359)][n(4097)],"647e7146-vars.pyInputLg":e[n(1923)][t(3375)],"647e7146-vars.pxInput":e[n(1923)][n(4064)],"647e7146-vars.pxInputSm":e[t(1359)][n(4087)],"647e7146-vars.pxInputLg":e[n(1923)][t(1752)],"647e7146-vars.pyBtn":e[n(1923)][t(2102)],"647e7146-vars.pyBtnSm":e[n(1923)][n(3498)],"647e7146-vars.pyBtnLg":e[n(1923)][n(2411)],"647e7146-vars.pxBtn":e.vars[n(2981)],"647e7146-vars.pxBtnSm":e[t(1359)][n(459)],"647e7146-vars.pxBtnLg":e[n(1923)][n(4048)],"647e7146-vars.pyBtnSmall":e[n(1923)][n(3937)],"647e7146-vars.pyBtnSmallSm":e[n(1923)][n(2932)],"647e7146-vars.pyBtnSmallLg":e[n(1923)][n(1124)],"647e7146-vars.pxBtnSmall":e[n(1923)][n(3576)],"647e7146-vars.pxBtnSmallSm":e[n(1923)][n(3371)],"647e7146-vars.pxBtnSmallLg":e[n(1923)][t(3455)],"647e7146-vars.pyGroupTabs":e[n(1923)][n(4150)],"647e7146-vars.pyGroupTabsSm":e.vars[t(2501)],"647e7146-vars.pyGroupTabsLg":e[t(1359)].pyGroupTabsLg,"647e7146-vars.pxGroupTabs":e[n(1923)][n(2482)],"647e7146-vars.pxGroupTabsSm":e[n(1923)][t(2514)],"647e7146-vars.pxGroupTabsLg":e[n(1923)][n(1508)],"647e7146-vars.pyGroupBlocks":e[n(1923)][t(2037)],"647e7146-vars.pyGroupBlocksSm":e.vars[t(1688)],"647e7146-vars.pyGroupBlocksLg":e[n(1923)][n(975)],"647e7146-vars.pxGroupBlocks":e[n(1923)][n(2912)],"647e7146-vars.pxGroupBlocksSm":e[t(1359)][t(2424)],"647e7146-vars.pxGroupBlocksLg":e[n(1923)][t(2364)],"647e7146-vars.pyTag":e[n(1923)][n(1335)],"647e7146-vars.pyTagSm":e[n(1923)][n(3350)],"647e7146-vars.pyTagLg":e[n(1923)][n(2555)],"647e7146-vars.pxTag":e[n(1923)][n(3620)],"647e7146-vars.pxTagSm":e[n(1923)][n(2901)],"647e7146-vars.pxTagLg":e[n(1923)][n(4305)],"647e7146-vars.pySliderTooltip":e[n(1923)][t(489)],"647e7146-vars.pySliderTooltipSm":e[n(1923)][n(316)],"647e7146-vars.pySliderTooltipLg":e[n(1923)][n(3251)],"647e7146-vars.pxSliderTooltip":e[n(1923)][n(578)],"647e7146-vars.pxSliderTooltipSm":e[n(1923)][n(3255)],"647e7146-vars.pxSliderTooltipLg":e[n(1923)][t(2094)],"647e7146-vars.spaceAddon":e[t(1359)][n(3218)],"647e7146-vars.spaceAddonSm":e.vars[t(307)],"647e7146-vars.spaceAddonLg":e[n(1923)][n(4113)],"647e7146-vars.spaceCheckbox":e.vars.spaceCheckbox,"647e7146-vars.spaceCheckboxSm":e[n(1923)].spaceCheckboxSm,"647e7146-vars.spaceCheckboxLg":e[n(1923)][t(2979)],"647e7146-vars.spaceTags":e[t(1359)][n(1045)],"647e7146-vars.spaceTagsSm":e.vars[t(3059)],"647e7146-vars.spaceTagsLg":e[n(1923)][n(1993)],"647e7146-vars.floatingTop":e[t(1359)][n(1071)],"647e7146-vars.floatingTopSm":e[n(1923)][n(3185)],"647e7146-vars.floatingTopLg":e[n(1923)][n(2906)],"647e7146-vars.bgInput":e[n(1923)][n(3327)],"647e7146-vars.bgInputHover":e[n(1923)][n(1741)],"647e7146-vars.bgInputFocus":e[n(1923)][n(4158)],"647e7146-vars.bgInputDanger":e[t(1359)][n(3949)],"647e7146-vars.bgInputSuccess":e[n(1923)][t(1714)],"647e7146-vars.bgDisabled":e[n(1923)][n(1144)],"647e7146-vars.bgSelected":e[n(1923)][n(702)],"647e7146-vars.bgPassive":e[n(1923)][n(1823)],"647e7146-vars.bgIcon":e[n(1923)][n(914)],"647e7146-vars.bgDanger":e[n(1923)][n(388)],"647e7146-vars.bgSuccess":e[n(1923)][t(1411)],"647e7146-vars.bgTag":e[n(1923)][n(2271)],"647e7146-vars.bgSliderHandle":e.vars[n(544)],"647e7146-vars.bgToggleHandle":e[t(1359)][n(804)],"647e7146-vars.bgDateHead":e[n(1923)][n(831)],"647e7146-vars.bgAddon":e[n(1923)][n(2845)],"647e7146-vars.bgBtn":e[n(1923)][n(954)],"647e7146-vars.bgBtnDanger":e[n(1923)][n(1889)],"647e7146-vars.bgBtnSecondary":e[n(1923)][n(2804)],"647e7146-vars.colorInput":e[n(1923)][n(346)],"647e7146-vars.colorInputHover":e[t(1359)][n(3639)],"647e7146-vars.colorInputFocus":e[n(1923)][n(3532)],"647e7146-vars.colorInputDanger":e[n(1923)][n(1055)],"647e7146-vars.colorInputSuccess":e[n(1923)][n(1065)],"647e7146-vars.colorDisabled":e[n(1923)][t(1247)],"647e7146-vars.colorPlaceholder":e[n(1923)][t(1118)],"647e7146-vars.colorPassive":e[n(1923)][n(3815)],"647e7146-vars.colorMuted":e[n(1923)][n(376)],"647e7146-vars.colorFloating":e[t(1359)][t(1355)],"647e7146-vars.colorFloatingFocus":e[t(1359)][n(2416)],"647e7146-vars.colorFloatingSuccess":e[n(1923)].colorFloatingSuccess,"647e7146-vars.colorFloatingDanger":e[t(1359)][t(950)],"647e7146-vars.colorDanger":e[n(1923)].colorDanger,"647e7146-vars.colorSuccess":e[n(1923)][n(3531)],"647e7146-vars.colorTag":e[n(1923)].colorTag,"647e7146-vars.colorAddon":e[n(1923)][n(4094)],"647e7146-vars.colorDateHead":e[n(1923)][n(2248)],"647e7146-vars.colorBtn":e[n(1923)][n(2226)],"647e7146-vars.colorBtnDanger":e[t(1359)][n(2532)],"647e7146-vars.colorBtnSecondary":e[n(1923)][n(2633)],"647e7146-vars.borderColorInput":e[n(1923)][n(1848)],"647e7146-vars.borderColorInputHover":e[t(1359)][n(2607)],"647e7146-vars.borderColorInputFocus":e[n(1923)][t(1526)],"647e7146-vars.borderColorInputDanger":e[n(1923)][n(499)],"647e7146-vars.borderColorInputSuccess":e[n(1923)][t(584)],"647e7146-vars.borderColorChecked":e[t(1359)][n(771)],"647e7146-vars.borderColorPassive":e[n(1923)][n(2377)],"647e7146-vars.borderColorSliderTooltip":e[n(1923)].borderColorSliderTooltip,"647e7146-vars.borderColorTag":e[n(1923)][n(801)],"647e7146-vars.borderColorBtn":e[n(1923)][t(1176)],"647e7146-vars.borderColorBtnDanger":e[n(1923)].borderColorBtnDanger,"647e7146-vars.borderColorBtnSecondary":e[t(1359)][t(3096)],"647e7146-vars.borderWidthInputT":e[n(1923)][n(563)],"647e7146-vars.borderWidthInputR":e[n(1923)].borderWidthInputR,"647e7146-vars.borderWidthInputB":e[n(1923)][t(326)],"647e7146-vars.borderWidthInputL":e[t(1359)][t(2321)],"647e7146-vars.borderWidthRadioT":e[t(1359)][n(369)],"647e7146-vars.borderWidthRadioR":e[n(1923)][t(2703)],"647e7146-vars.borderWidthRadioB":e[n(1923)][n(532)],"647e7146-vars.borderWidthRadioL":e[n(1923)][n(2501)],"647e7146-vars.borderWidthCheckboxT":e[n(1923)][n(813)],"647e7146-vars.borderWidthCheckboxR":e[n(1923)][n(2867)],"647e7146-vars.borderWidthCheckboxB":e[n(1923)][t(3991)],"647e7146-vars.borderWidthCheckboxL":e[n(1923)][n(3103)],"647e7146-vars.borderWidthDropdown":e[t(1359)][n(3962)],"647e7146-vars.borderWidthBtn":e[n(1923)][t(2911)],"647e7146-vars.borderWidthToggle":e[t(1359)][n(2660)],"647e7146-vars.borderWidthTag":e[n(1923)][n(1982)],"647e7146-vars.shadowInput":e[n(1923)][n(2197)],"647e7146-vars.shadowInputHover":e[t(1359)][n(537)],"647e7146-vars.shadowInputFocus":e[n(1923)][t(1091)],"647e7146-vars.shadowHandles":e[n(1923)][n(1226)],"647e7146-vars.shadowHandlesHover":e[t(1359)][t(3081)],"647e7146-vars.shadowHandlesFocus":e[n(1923)][n(1478)],"647e7146-vars.shadowBtn":e[n(1923)][n(1858)],"647e7146-vars.shadowDropdown":e[n(1923)][n(3973)],"647e7146-vars.radiusInput":e[n(1923)].radiusInput,"647e7146-vars.radiusInputSm":e[n(1923)][n(2738)],"647e7146-vars.radiusInputLg":e[n(1923)][n(1940)],"647e7146-vars.radiusBtn":e[n(1923)][n(680)],"647e7146-vars.radiusBtnSm":e[n(1923)][n(324)],"647e7146-vars.radiusBtnLg":e[n(1923)][n(3925)],"647e7146-vars.radiusSmall":e[n(1923)].radiusSmall,"647e7146-vars.radiusSmallSm":e[t(1359)][n(920)],"647e7146-vars.radiusSmallLg":e[n(1923)][n(2288)],"647e7146-vars.radiusLarge":e[n(1923)][n(1204)],"647e7146-vars.radiusLargeSm":e[n(1923)][n(2406)],"647e7146-vars.radiusLargeLg":e[n(1923)][n(3812)],"647e7146-vars.radiusTag":e[n(1923)][n(1596)],"647e7146-vars.radiusTagSm":e[n(1923)][n(3718)],"647e7146-vars.radiusTagLg":e[n(1923)][n(1888)],"647e7146-vars.radiusCheckbox":e[n(1923)][n(1634)],"647e7146-vars.radiusCheckboxSm":e[n(1923)][n(820)],"647e7146-vars.radiusCheckboxLg":e[t(1359)][t(1602)],"647e7146-vars.radiusSlider":e[n(1923)][n(1856)],"647e7146-vars.radiusSliderSm":e[t(1359)][n(2475)],"647e7146-vars.radiusSliderLg":e[n(1923)][n(4229)],"647e7146-vars.radiusImage":e[n(1923)][n(2941)],"647e7146-vars.radiusImageSm":e[n(1923)][t(3213)],"647e7146-vars.radiusImageLg":e[t(1359)][t(836)],"647e7146-vars.radiusGallery":e[n(1923)][n(3094)],"647e7146-vars.radiusGallerySm":e[n(1923)][n(2824)],"647e7146-vars.radiusGalleryLg":e[n(1923)][n(3140)],"647e7146-vars.checkboxSize":e[n(1923)][n(3203)],"647e7146-vars.checkboxSizeSm":e.vars[n(3277)],"647e7146-vars.checkboxSizeLg":e[t(1359)][n(2522)],"647e7146-vars.gallerySize":e[n(1923)].gallerySize,"647e7146-vars.gallerySizeSm":e[t(1359)][n(2152)],"647e7146-vars.gallerySizeLg":e[n(1923)][n(1516)],"647e7146-vars.toggleWidth":e[n(1923)][t(2575)],"647e7146-vars.toggleWidthSm":e[t(1359)][n(3809)],"647e7146-vars.toggleWidthLg":e[t(1359)][n(2821)],"647e7146-vars.toggleHeight":e[n(1923)][n(3447)],"647e7146-vars.toggleHeightSm":e[n(1923)][n(3238)],"647e7146-vars.toggleHeightLg":e[n(1923)][t(1301)],"647e7146-vars.sliderHeight":e[t(1359)][n(1092)],"647e7146-vars.sliderHeightSm":e[n(1923)][n(892)],"647e7146-vars.sliderHeightLg":e[n(1923)][n(848)],"647e7146-vars.sliderHeightVertical":e[n(1923)][n(3683)],"647e7146-vars.sliderHeightVerticalSm":e[n(1923)][n(2498)],"647e7146-vars.sliderHeightVerticalLg":e.vars[n(726)],"647e7146-vars.sliderHandleSize":e[n(1923)][n(2079)],"647e7146-vars.sliderHandleSizeSm":e[n(1923)][n(3611)],"647e7146-vars.sliderHandleSizeLg":e[n(1923)][n(3603)],"647e7146-vars.sliderTooltipDistance":e[n(1923)][n(1563)],"647e7146-vars.sliderTooltipDistanceSm":e[n(1923)][t(2840)],"647e7146-vars.sliderTooltipDistanceLg":e.vars[t(1934)],"647e7146-vars.sliderTooltipArrowSize":e[n(1923)][n(3154)],"647e7146-vars.sliderTooltipArrowSizeSm":e[n(1923)][n(3958)],"647e7146-vars.sliderTooltipArrowSizeLg":e[t(1359)].sliderTooltipArrowSizeLg}}))},bi=hi[e(3674)];hi[V(3521)]=bi?function(e,t){return gi(),bi(e,t)}:gi;var yi=["tabindex",V(2330)],Di=s(V(2962),{id:V(4151),class:V(2985)},V(4040),-1),Ci={key:0,class:V(1113)},wi=[s(V(481),{class:V(1711)},"Drag it here",-1)];(function(t,n){var r=e,a=V;void 0===n&&(n={});var o=n[a(1850)];if(t&&typeof document!==a(593)){var i=document[a(654)]||document[r(1731)](a(654))[0],l=document[a(3250)](r(2198));l[a(3398)]=a(4027),o===a(368)&&i[a(2503)]?i[a(1187)](l,i[a(2503)]):i[a(1290)](l),l[a(2849)]?l[a(2849)][a(4240)]=t:l[r(596)](document[a(2326)](t))}})(V(2628)),hi[V(3266)]=function(t,n,r,a,o,i){var l=e,u=V,c=y(u(3341));return m(),h(u(481),{class:u(1181),onDragover:n[1]||(n[1]=function(){var e=u;return a[e(752)]&&a.handleDragOverPreview[e(3738)](a,arguments)}),onDragleave:n[2]||(n[2]=function(){var e=u;return a[Q(1081)]&&a[e(3848)][e(3738)](a,arguments)}),onDrop:n[3]||(n[3]=function(){var e=u;return a[Q(3885)]&&a[e(2830)][e(3738)](a,arguments)})},[s(u(481),{class:b(["vfb-preview-wrapper",r[u(996)]===l(1634)?u(1246):"vfb-preview-wrapper-preview"]),tabindex:r[u(996)]===l(1634)?0:-1,onKeydown:n[0]||(n[0]=function(){var e=u;return a[e(1925)]&&a[e(1925)][e(3738)](a,arguments)}),"aria-label":l(3508),"aria-describedby":u(4151),inert:a[u(2950)],ref:"wrapper"},[Di,a[u(860)]?(m(),h(u(481),Ci,wi)):B(l(3930),!0),C(c,O({class:[l(2247),[a[u(2149)]?u(408):""]],"selected-element":r.selectedElement,"selected-page":r[u(2130)],"editor-mode":r[l(3772)]===u(3935),builder:!0,locale:r[u(528)],"dragging-element":r[u(4183)],"dragging-page":r[l(580)],"dragged-schema":r[u(3754)],moving:r.moving,pointer:r[u(749)],templates:a[u(1826)],schema:a[u(1103)],presets:[l(1572)],"element-types":a[l(1363)],device:r[u(597)]},r[u(3880)][u(2001)],{onAddElement:a[u(821)],onMoveElement:a[u(424)],onSelectElement:a[u(1002)],onCloneElement:a[u(2589)],onRemoveElement:a[u(1808)],onResizeElement:a[u(1327)],onSetDraggedSchema:a[u(461)],onSelectPage:a[l(3267)],onRenamePage:a[u(4244)],onRemovePage:a[u(4217)],onAddPage:a[u(1455)],onRemovePages:a[u(3649)],onMovePage:a[u(4167)],onMoveToPage:a[u(760)],onAnnounce:a[u(3335)],onStartMoving:a[u(2805)],ref:u(3974)}),null,16,[u(504),u(3268),u(4272),u(1433),u(528),l(3083),u(1364),l(3753),"moving",u(749),u(1826),l(3482),u(2305),u(597),u(3114),l(1028),u(349),u(1765),u(1913),u(474),u(3476),u(714),u(2260),u(3198),"onAddPage",u(2028),u(1237),u(639),u(3169),l(2343)])],42,yi)],32)},hi[e(3132)]=V(2694);var Ei={Space_Separator:/[\u1680\u2000-\u200A\u202F\u205F\u3000]/,ID_Start:/[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312E\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEA\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AE\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF2D-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF19]|\uD806[\uDCA0-\uDCDF\uDCFF\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE83\uDE86-\uDE89\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFEC]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]/,ID_Continue:/[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0300-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u0483-\u0487\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0669\u066E-\u06D3\u06D5-\u06DC\u06DF-\u06E8\u06EA-\u06FC\u06FF\u0710-\u074A\u074D-\u07B1\u07C0-\u07F5\u07FA\u0800-\u082D\u0840-\u085B\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u08D4-\u08E1\u08E3-\u0963\u0966-\u096F\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BC-\u09C4\u09C7\u09C8\u09CB-\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09E6-\u09F1\u09FC\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A59-\u0A5C\u0A5E\u0A66-\u0A75\u0A81-\u0A83\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABC-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AD0\u0AE0-\u0AE3\u0AE6-\u0AEF\u0AF9-\u0AFF\u0B01-\u0B03\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3C-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B5C\u0B5D\u0B5F-\u0B63\u0B66-\u0B6F\u0B71\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD0\u0BD7\u0BE6-\u0BEF\u0C00-\u0C03\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C58-\u0C5A\u0C60-\u0C63\u0C66-\u0C6F\u0C80-\u0C83\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBC-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CDE\u0CE0-\u0CE3\u0CE6-\u0CEF\u0CF1\u0CF2\u0D00-\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D44\u0D46-\u0D48\u0D4A-\u0D4E\u0D54-\u0D57\u0D5F-\u0D63\u0D66-\u0D6F\u0D7A-\u0D7F\u0D82\u0D83\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E01-\u0E3A\u0E40-\u0E4E\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB9\u0EBB-\u0EBD\u0EC0-\u0EC4\u0EC6\u0EC8-\u0ECD\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E-\u0F47\u0F49-\u0F6C\u0F71-\u0F84\u0F86-\u0F97\u0F99-\u0FBC\u0FC6\u1000-\u1049\u1050-\u109D\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u135D-\u135F\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176C\u176E-\u1770\u1772\u1773\u1780-\u17D3\u17D7\u17DC\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u1820-\u1877\u1880-\u18AA\u18B0-\u18F5\u1900-\u191E\u1920-\u192B\u1930-\u193B\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19D9\u1A00-\u1A1B\u1A20-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AA7\u1AB0-\u1ABD\u1B00-\u1B4B\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1BF3\u1C00-\u1C37\u1C40-\u1C49\u1C4D-\u1C7D\u1C80-\u1C88\u1CD0-\u1CD2\u1CD4-\u1CF9\u1D00-\u1DF9\u1DFB-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u203F\u2040\u2054\u2071\u207F\u2090-\u209C\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D7F-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2DE0-\u2DFF\u2E2F\u3005-\u3007\u3021-\u302F\u3031-\u3035\u3038-\u303C\u3041-\u3096\u3099\u309A\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312E\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEA\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AE\uA7B0-\uA7B7\uA7F7-\uA827\uA840-\uA873\uA880-\uA8C5\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA8FD\uA900-\uA92D\uA930-\uA953\uA960-\uA97C\uA980-\uA9C0\uA9CF-\uA9D9\uA9E0-\uA9FE\uAA00-\uAA36\uAA40-\uAA4D\uAA50-\uAA59\uAA60-\uAA76\uAA7A-\uAAC2\uAADB-\uAADD\uAAE0-\uAAEF\uAAF2-\uAAF6\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABEA\uABEC\uABED\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE00-\uFE0F\uFE20-\uFE2F\uFE33\uFE34\uFE4D-\uFE4F\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF3F\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDDFD\uDE80-\uDE9C\uDEA0-\uDED0\uDEE0\uDF00-\uDF1F\uDF2D-\uDF4A\uDF50-\uDF7A\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00-\uDE03\uDE05\uDE06\uDE0C-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE38-\uDE3A\uDE3F\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE6\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC00-\uDC46\uDC66-\uDC6F\uDC7F-\uDCBA\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD00-\uDD34\uDD36-\uDD3F\uDD50-\uDD73\uDD76\uDD80-\uDDC4\uDDCA-\uDDCC\uDDD0-\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE37\uDE3E\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEEA\uDEF0-\uDEF9\uDF00-\uDF03\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3C-\uDF44\uDF47\uDF48\uDF4B-\uDF4D\uDF50\uDF57\uDF5D-\uDF63\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC00-\uDC4A\uDC50-\uDC59\uDC80-\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDB5\uDDB8-\uDDC0\uDDD8-\uDDDD\uDE00-\uDE40\uDE44\uDE50-\uDE59\uDE80-\uDEB7\uDEC0-\uDEC9\uDF00-\uDF19\uDF1D-\uDF2B\uDF30-\uDF39]|\uD806[\uDCA0-\uDCE9\uDCFF\uDE00-\uDE3E\uDE47\uDE50-\uDE83\uDE86-\uDE99\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC36\uDC38-\uDC40\uDC50-\uDC59\uDC72-\uDC8F\uDC92-\uDCA7\uDCA9-\uDCB6\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD36\uDD3A\uDD3C\uDD3D\uDD3F-\uDD47\uDD50-\uDD59]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDED0-\uDEED\uDEF0-\uDEF4\uDF00-\uDF36\uDF40-\uDF43\uDF50-\uDF59\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50-\uDF7E\uDF8F-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFEC]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99\uDC9D\uDC9E]|\uD834[\uDD65-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD\uDE42-\uDE44]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD836[\uDE00-\uDE36\uDE3B-\uDE6C\uDE75\uDE84\uDE9B-\uDE9F\uDEA1-\uDEAF]|\uD838[\uDC00-\uDC06\uDC08-\uDC18\uDC1B-\uDC21\uDC23\uDC24\uDC26-\uDC2A]|\uD83A[\uDC00-\uDCC4\uDCD0-\uDCD6\uDD00-\uDD4A\uDD50-\uDD59]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]|\uDB40[\uDD00-\uDDEF]/},ki={isSpaceSeparator(e){var t=V;return typeof e===t(2872)&&Ei.Space_Separator[t(833)](e)},isIdStartChar(t){var n=e,r=V;return typeof t===r(2872)&&(t>="a"&&t<="z"||t>="A"&&t<="Z"||"$"===t||"_"===t||Ei[r(3009)][n(463)](t))},isIdContinueChar(t){var n=e,r=V;return typeof t===n(1980)&&(t>="a"&&t<="z"||t>="A"&&t<="Z"||t>="0"&&t<="9"||"$"===t||"_"===t||"‌"===t||"‍"===t||Ei[r(3817)][n(463)](t))},isDigit:e=>typeof e===V(2872)&&/[0-9]/.test(e),isHexDigit(e){var t=V;return typeof e===t(2872)&&/[0-9A-Fa-f]/[t(833)](e)}};let xi,Fi,Bi,Si,Li,Ti,Mi,Oi,_i;function Ii(t,n,r){var a=e,o=V;const i=t[n];if(null!=i&&typeof i===a(3251))if(Array[o(674)](i))for(let e=0;e0;){const n=Vi();if(!ki[e(2489)](n))throw Zi(qi());t+=qi()}return String[e(3543)](parseInt(t,16))}const Ui={start(){if("eof"===Mi[e(2940)])throw $i();Ji()},beforePropertyName(){var t=e,n=V;switch(Mi[n(3398)]){case t(2789):case n(2872):return Oi=Mi[n(1660)],void(Fi=n(3637));case n(1648):return void Yi();case t(2723):throw $i()}},afterPropertyName(){var e=V;if(Mi[e(3398)]===e(2170))throw $i();Fi=e(1068)},beforePropertyValue(){var t=e;if(Mi[V(3398)]===t(2723))throw $i();Ji()},beforeArrayValue(){var t=e,n=V;if(Mi[n(3398)]===t(2723))throw $i();Mi[n(3398)]!==n(1648)||"]"!==Mi[n(1660)]?Ji():Yi()},afterPropertyValue(){var t=e,n=V;if(Mi[t(2940)]===t(2723))throw $i();switch(Mi[n(1660)]){case",":return void(Fi="beforePropertyName");case"}":Yi()}},afterArrayValue(){var t=e,n=V;if(Mi[n(3398)]===n(2170))throw $i();switch(Mi[t(1109)]){case",":return void(Fi=n(2841));case"]":Yi()}},end(){}};function Ji(){var t=e,n=V;let r;switch(Mi[n(3398)]){case n(1648):switch(Mi[n(1660)]){case"{":r={};break;case"[":r=[]}break;case n(3124):case t(3557):case n(3580):case t(1980):r=Mi[t(1109)]}if(void 0===_i)_i=r;else{const e=Bi[Bi[n(3854)]-1];Array[n(674)](e)?e[n(1096)](r):Object[n(3712)](e,Oi,{value:r,writable:!0,enumerable:!0,configurable:!0})}if(null!==r&&typeof r===n(3703))Bi[n(1096)](r),Fi=Array[n(674)](r)?n(2841):n(491);else{const e=Bi[Bi.length-1];Fi=null==e?t(1605):Array[n(674)](e)?n(315):n(3215)}}function Yi(){var t=e,n=V;Bi[n(2744)]();const r=Bi[Bi[n(3854)]-1];Fi=null==r?n(3517):Array[n(674)](r)?t(3709):t(2350)}function Zi(t){var n=e,r=V;return tl(void 0===t?r(1435)+Li+":"+Ti:r(1444)+el(t)+n(3303)+Li+":"+Ti)}function $i(){return tl(V(1435)+Li+":"+Ti)}function Xi(){return Ti-=5,tl(e(3703)+Li+":"+Ti)}function el(e){var t=V;const n={"'":"\\'",'"':'\\"',"\\":"\\\\","\b":"\\b","\f":"\\f","\n":"\\n","\r":"\\r","\t":"\\t","\v":"\\v","\0":"\\0","\u2028":t(1730),"\u2029":t(1620)};if(n[e])return n[e];if(e<" "){const n=e[t(2193)](0)[t(3646)](16);return"\\x"+("00"+n)[t(1892)](n[t(3854)])}return e}function tl(e){var t=V;const n=new SyntaxError(e);return n[t(3834)]=Li,n[t(3403)]=Ti,n}function nl(){var e=["selectedSchema","NestedField",".label","ThemeColorSelectorField","ElementMessage",'"][data-path="',"vfb-clr-clear","BuilderToolToggleLeft","vfb-model-preview-tab vfb-model-preview-tab-request-data"," ","dragged-schema","loader-text","letterSpacingLg","audio/opus","container_dropRight","column3","regex","#ef4444","$parent","handleConditionsSave","Step","Default ","label_last","vfb-tool-item-last","vfb-step-label-first","columnNumber","var(--vf-gray-800)","src/components/BuilderPreview.vue","darkModes","view","items_wrapper.dataKey","tabs-tiny","src/components/vueform/FormStepsControl.vue","jpeg","lazy","LabelField","placeholder","currentScript","Search param","addOn",' class="',"toggleWidthLg","category","rollup --config build/base.config.js","vfb-field-chevron-container-sub","options.submits","vfb-tab-area-left","sent","vfb-model-preview-warning"," Click for more info. ","Prefix","pointed","pre[data-src]:not([","bgAddon","handleTabClick","punctuator","color-input-danger","slider-tooltip-distance","deactivate","1.125rem","minHeightInput","vfb-preview-element-overlay-being-dragged","toString","application/rtf","radiusSlider","all","^4.1.1","gallerySizeLg","awrap","innerContainer","dragLabelWrapperBefore","ConditionsField","vfb-tab-edit-label-sizer","areaRight_dragOver","responseText","config","png","vfb-tab-wrapper-valid","ringWidth",":not([","Toggle","options.acceptMimes","cdata","options.boolValue.trueValue","M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z","Field","attrs","isSameInSize","aria-disabled","eg. 2/3 or 0.66","isModelOpen","Toggle options","xml","copy-success","Are you sure you want to remove this theme?","#text","blank","arrow-from-left","After (date)","ppt","reverse"," </template>\n","KeepMarkup","#eeeeee","layerY","If enabled placeholders will automatically be floated over the input when it has a value.","TooltipFormatField","handleUpdate","date_equals:","color-input-success","opacity-60","handleCloneElement","Submission",'',"Min","Phone number","fontSizeSmall"," Tabs ","Button with gray color","Slider height","Static HTML","vfb-config-panel-container-hidden","BuilderPanelExport","dragover","integer","vfb-elements-container-no-categories","options.mode","star","text/calendar","Can't contain dot","<","update-tree-keyword","comment","Image upload","M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z","BuilderToolUndos","walk-tree","MODAL_OPENED","required_conditions_display","vfb-right-container-hidden","M200,82 L-7.67386155e-13,82 L0,36 C-1.69088438e-15,22.1928813 11.1928813,11 25,11 L175,11 C188.807119,11 200,22.1928813 200,36 L200,82 Z M200,94 L200,140 C200,153.807119 188.807119,165 175,165 L25,165 C11.1928813,165 8.79631174e-15,153.807119 7.10542736e-15,140 L3.96264218e-15,94 L200,94 Z","Move inside %element%. Press Space bar to move, Escape key to cancel.","handleDropPreview","valueDateFormat","handleModelClose",".prismjs-copied","azw"," right panel"," Add button ","form$","vfb-tool-dropdown","vfb-tree-item-icon-repeat","options.href",", 100%, 50%)","touchmove","createElement","Less than","remove","exports","clearToaster","Text field that expects an URL","mounted",".vfb-clr-swatches button","Top","concat","rollup --config build/test.config.js","5210xTEQVo","color-btn-secondary","pen","=== Vueform Builder Public Key Missing ===","returnValue","color-btn","preventDefault","bottomLeft","letter-spacing-small","Can't clone - contains
non-clonable child","ElementLabelFloating"," Overlay (when dragging over element) ","dates","M25,11 L175,11 C188.807119,11 200,22.1928813 200,36 L200,140 C200,153.807119 188.807119,165 175,165 L25,165 C11.1928813,165 8.79631174e-15,153.807119 7.10542736e-15,140 L0,36 C-1.69088438e-15,22.1928813 11.1928813,11 25,11 Z M37,23 C23.1928813,23 12,34.1928813 12,48 L12,82 L188,82 L188,48 C188,34.1928813 176.807119,23 163,23 L37,23 Z","csh","Datepicker input","greedy","add-element","moved-element","SelectItemsField","BuilderToaster","v-if","Could not load variable for ","onChangeView","sfc","3rem","cloneDeep","emptyOn","is ",'
',"The amount of milliseconds to wait before refreshing options after last typed character.","M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z","@@asyncIterator","close-modal","deps","Alpha dash [a-zA-Z-]",'Copy your JSON here in the format of list data, eg: ["To-do 1", "To-do 2"] or\n [\n { "to-do": "To-do 1", "ready": true },\n { "to-do": "To-do 2", "ready": false }\n]',"vfb-elements-search-container","punctuation","vfb-steps-controls-container-editor","^4.17.21","vfb-config-form-header-collapse-open","vfb-field-text","M448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zM92.5 220.5l123 123c4.7 4.7 12.3 4.7 17 0l123-123c7.6-7.6 2.2-20.5-8.5-20.5H101c-10.7 0-16.1 12.9-8.5 20.5z"," left panel","vfb-preview-element-container-error","vfb-tree-item-drag-line-top","childrenKeys","Dropdown","expand-all","handleClosePage","max_width","handleFocusKeyword","selected-element","handleModelReset","darkMode",'Formatting tokens',"active_url","Lorem ipsum dolor","<= than","Slovak","colorSuccess","__value__","handleCloseLanguageSelector"," Icon ","pre.","pyGroupTabs","Use left and right arrows to collapse and expand, press Space bar to reorder or Enter to edit.",".type","vfb-clr-color-preview","canRemove","onChangeLocale","isIdContinueChar","vfb-field-text-primary","vfb-tab-wrapper-sm","#495057","before-tokenize","vfb-model-preview-warning-li","removeTempEndpoint","handleMouseEnter","Removed","toLowerCase","borderWidthCheckboxB","layout","digits:","15px","Color swatch","Layout","Email address","default_time_hour12","vfb-preview-element-area-top-sm","typeLabel","StepField","borderColorInput","LabelsField","rem",".columns.","Phone","toaster-","drag","hasModalOpen","\u2028","max_height","collapsed-tree","0 0 ","#4caf50","BuilderPanelElements","vfb-tree-item-text","Small buttons","handleRenamePage","vfb-steps-wrapper","audio/3gpp2","Drag it here","onMoveToPage","0.28125rem","presets","border-color-input-danger"," *:before,\n","Checked border color","</","separator-top","#343a40","onMounted","purifyValue","Will be applied to the input field."," <Vueform/>\n","dangerLighter","vfb-tooltip-smaller","closedSections","source"," is not iterable","onClosedChanged","vfb-tab-actions-container-left","change-dark-mode","AcceptField","select_ui_wrapper"," Overlay ","template#","el$","areaRightDragLine","column2","TypeField","getComputedStyle","Border color","panelClass"," })\n","msg","ring-color","actionsContainerRight","BuilderPanelTree","pyTagSm","Search","HTML

tag","Time options","src/components/vueform/TTextElement.vue","MyForm","vfb-tab-overlay-not-highlighted","vfb-tooltip-bottom-right","dragLabel","secondary","M368 224H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h352c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z","\0","description","list-ul","requestAnimationFrame","onDownload","msMatchesSelector","num","vfb-left-container-hidden","pyGroupBlocksLg","vfb-panels-container-tabs","draggedSchema","down","jar","search-remove-icon","handleOpenAll","beforeSave","heif",'')+e(394)[t(1698)](C[t(1454)][t(2554)],t(1868))+t(1963).concat(C.a11y[e(1592)],t(1868)),n[e(1960)][t(1290)](a),o=z(e(3220)),l=z(t(3385)),c=z(t(2353)),u=z(e(3978)),s=z(t(3189)),d=z(t(3993)),p=z(t(2052)),v=z(e(345)),f=z(t(4291)),E(C.el),k(C.el),P(a,t(3400),(function(n){var r=e,o=t;a[o(2604)][r(3900)](r(1863)),n[o(1403)]()})),P(o,e(987),(function(e){P(n,t(3919),T)})),P(o,e(2092),(function(r){var a=t;n[e(470)](a(1273),T,{passive:!1})})),P(l,t(3400),(function(e){P(n,t(3919),T)})),P(l,t(1220),(function(r){var a=e;n[t(3791)](a(3897),T,{passive:!1})})),P(s,e(598),(function(e){F(s[t(1660)]),B()})),P(c,e(1911),(function(e){B(""),x()})),P(u,e(1911),(function(e){B(),x()})),P(n,t(4266),t(2251),(function(n){var r=e;m=n[t(3786)][r(1109)],O(),B()})),P(a,t(4266),t(772),(function(e){var n=t;F(e[n(3786)][n(2544)]),B(),C[n(2524)]&&x()})),P(n,t(3370),(function(e){var r=t;n[r(1494)](r(3919),T)})),P(n,t(3456),(function(e){var r=t;n[r(1494)](r(1273),T)})),P(n,t(3400),(function(e){var n=t;a[n(2604)].remove(n(3905)),x()})),P(n,"keydown",(function(n){var r=e,o=t;n[o(3709)]===o(725)?x(!0):n[o(3709)]===o(915)&&a[o(2604)][o(2280)](r(1863))})),P(n,t(4266),t(737),(function(e){var n=t;e[n(3786)][n(1693)][n(3387)](new Event(n(4266),{bubbles:!0}))})),P(l,t(988),(function(n){var r=e,a=t,o={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object[r(3671)](o)[a(1427)](n[r(1268)])&&(M[a(3738)](void 0,le(o[n[a(3709)]])),n[r(3915)]())})),P(o,t(4266),T),P(d,t(2357),_),P(v,e(419),I)}))}(window,document,Math),Rs[V(3614)]=!0,Coloris({focusInput:!1});var qs={emits:[V(1224),V(3572),V(1514),V(3102),V(330),V(2764)],props:{config:{type:Object,required:!1}},components:{BuilderTopLeftTools:ce,BuilderBottomLeftTools:pe,BuilderTopRightTools:fe,BuilderBottomRightTools:me,BuilderLoader:Ge,BuilderPreview:hi,BuilderExport:il,BuilderPanels:Mu,BuilderToolClear:be,BuilderToolDarkMode:De,BuilderToolDevice:we,BuilderToolSave:xe,BuilderToolToggleLeft:Se,BuilderToolToggleRight:Me,BuilderToolUndos:Ie,BuilderToolView:He,BuilderToolLanguageSelector:Ve,BuilderToaster:Ue,BuilderConditionsModal:ju},setup:function(e,t){var n={};return[Cs,ns,_s,xs,Es,vs,Wu,us,os,ts,es,Os,ps,rs,hs,Xu,Ps,As,$u,is,js,Is,fs,Yu,ls,as,Ts,Ms,ks,zs,ms][V(3126)]((function(r){n=W(W({},n),r(e,t,n))})),W({},n)}},Ks=[V(2330)],Qs=[V(2330)],Ws={class:"vfb-center-wrapper",ref:V(1129)},Gs={key:1,class:V(3569)},Us={class:e(1515)},Js=[V(2330)],Ys={class:V(583)},Zs={key:1,"aria-live":V(1214),role:e(2859),class:V(2985)};qs[V(3266)]=function(t,n,r,a,o,i){var l=e,u=V,c=y(u(620)),d=y(u(1678)),p=y(u(3060)),v=y(u(1661)),A=y(u(1972)),D=y(l(3750)),E=y(u(2892)),k=y("BuilderBottomLeftTools"),S=y(u(2252)),M=y(u(1053)),_=y(u(2632)),I=y(u(3926)),z=y(u(2810)),H=y("BuilderToolLanguageSelector"),N=y(l(1999)),R=y(u(3053)),q=y(u(1496)),K=y(u(3910)),W=y(u(4014));return m(),h(u(481),{class:u(1413),tabindex:"-1",role:u(1485),ref:u(3629),onClick:n[1]||(n[1]=function(){var e=u;return t[e(2946)]&&t[e(2946)][e(3738)](t,arguments)})},[s(u(481),{class:b([u(4231),[t[u(3739)]?"":l(3496),t[u(2420)][u(3441)]?"":u(1191),t[u(824)][u(780)]&&t[l(3249)][u(780)][u(3854)]?"":u(3311),t[u(1303)]?u(3520):"",t[l(2361)]?u(2103):""]]),inert:t[u(1366)]},[C(c,{side:l(2765),mounted:t[u(745)],builder:t[u(3880)],view:t[u(996)],"dragging-element":t.draggingElement,"dragging-page":t[u(3868)],"dragged-schema":t[u(3754)],tree:t[u(2150)],"paged-tree":t[u(1059)],"flat-tree":t.flatTree,"walk-tree":t[u(926)],"side-tree":t[u(3392)],"tree-keyword":t[u(3636)],"collapsed-tree":t[u(3257)],"selected-element":t[u(882)],"selected-page":t[u(2130)],"is-model-open":t[l(3833)],"all-mounted":t[l(1340)],"has-pages":t[u(2323)],moving:t[u(2724)],pointer:t[u(749)],device:t[u(597)],locale:t[l(335)],preview$:t[u(2723)],onUpdateBuilder:t[l(2266)],onCloseElement:t[u(1125)],onSelectPage:t[u(321)],onClosePage:t[l(3959)],onRemovePage:t[u(4217)],onGoToPage:t[l(3049)],onMoveToPage:t[u(760)],onMoveElement:t[u(424)],onMovePage:t[u(4167)],onAddElement:t[u(821)],onCloneElement:t[u(2589)],onRemoveElement:t[u(1808)],onRenameElement:t[u(3661)],onChangeView:t.handleChangeView,onModelClose:t[u(3775)],onModelReset:t[u(2635)],onSelectElement:t[l(367)],onSetDraggedSchema:t[u(461)],onDownload:t[l(741)],onAnnounce:t[u(3335)],onStartMoving:t[l(550)],onUpdateTreeKeyword:t[l(1978)],onExpandTree:t[l(723)],onCollapseTree:t[u(4099)],onExpandAllTree:t[l(336)],onOpenModal:t[l(1196)],onChangeDevice:t[u(1348)],ref:l(2151)},null,8,[u(745),u(3880),u(996),u(3562),u(1364),u(4166),u(2150),u(2643),u(2679),u(1669),l(1350),l(298),l(4012),u(3268),l(2019),l(1585),u(539),u(381),u(2724),u(749),l(2845),u(528),u(2723),l(726),u(2060),"onSelectPage",l(1038),u(3198),l(3243),u(639),u(2731),l(2298),u(3114),u(1765),u(1913),u(3145),u(803),u(1051),"onModelReset",u(349),u(3476),u(3308),"onAnnounce",u(634),u(3681),u(1606),u(1020),u(1667),u(1757),l(2133)]),C(A,null,{default:w((function(){var e=u;return[t[e(1199)]?(m(),F(d,{key:0,view:t[e(996)],onChangeView:t[e(3605)]},null,8,[e(996),e(803)])):B("v-if",!0),t[e(2710)]?(m(),F(p,{key:1,device:t[e(597)],onChangeDevice:t[e(1348)]},null,8,[e(597),e(1495)])):B(e(4285),!0),t[e(2076)]?(m(),F(v,{key:2})):B(e(4285),!0)]})),_:1}),C(k,null,{default:w((function(){var e=l,n=u;return[t[n(824)][n(1401)]&&t[n(824)][n(780)][n(3854)]?(m(),F(D,{key:0,panels:t.panels,onTogglePanel:t[n(395)]},null,8,[n(2420),n(2547)])):B(n(4285),!0),t[n(824)][n(1426)]?(m(),F(E,{key:1,onReset:t[e(663)]},null,8,[n(3442)])):B(n(4285),!0)]})),_:1})],10,Ks),s(l(3184),{class:u(2645),inert:t[u(1366)],onClick:n[0]||(n[0]=function(){var e=u;return t[l(2856)]&&t[e(1600)][e(3738)](t,arguments)})},[s(u(481),Ws,[C(P,{name:u(990)},{default:w((function(){var e=l,n=u;return[t[n(3739)]?(m(),F(S,{key:0,class:b([t[n(996)]===n(3935)||t[n(996)]===n(3108)?"":n(460),t.device===n(4063)?n(3427):null,t[n(597)]===n(708)?n(1432):null,"desktop"===t[n(597)]?n(1446):null]),style:j({maxWidth:t[n(3072)]}),builder:t[e(3342)],view:t[n(996)],locale:t[n(528)],"dragging-element":t[n(4183)],"dragging-page":t[n(3868)],"dragged-schema":t[n(3754)],"selected-element":t[n(882)],"selected-page":t[e(1374)],moving:t[n(2724)],pointer:t[e(3199)],device:t[e(2845)],inert:t[n(996)]===n(3482),onAddElement:t[n(821)],onMoveElement:t[n(424)],onSelectElement:t[n(1002)],onCloneElement:t[e(3854)],onRemoveElement:t[n(1808)],onResizeElement:t[n(1327)],onSetDraggedSchema:t[n(461)],onSelectPage:t[n(321)],onRenamePage:t[n(4244)],onRemovePage:t[e(1445)],onAddPage:t[n(1455)],onRemovePages:t[n(3649)],onMovePage:t[n(4167)],onMoveToPage:t[n(760)],onAnnounce:t[n(3335)],onStartMoving:t.handleStartMoving,ref:e(3146)},null,8,[e(455),n(1595),n(3880),n(996),n(528),e(3083),n(1364),n(4166),e(3962),n(4272),n(2724),n(749),n(597),n(2330),n(3114),n(2731),"onSelectElement",n(1765),n(1913),n(474),"onSetDraggedSchema",n(714),n(2260),n(3198),n(1412),e(3136),n(1237),n(639),n(3169),e(2343)])):B(n(4285),!0)]})),_:1}),t[u(3739)]?L((m(),F(M,{key:0,view:t[u(996)],builder:t[u(3880)],ref:u(1269)},null,8,[u(996),l(3342)])),[[T,t[u(996)]===u(3482)]]):B(l(3930),!0),t.allMounted?B(u(4285),!0):(m(),h(u(481),Gs,[g(t[u(543)],l(3056),{},(function(){var e=u;return[C(_,{class:e(2755)}),s(e(481),Us,[g(t[e(543)],e(2137),{},(function(){return[f(Q(2633))]}))])]}))]))],512),C(I,{toaster:t.toaster,onReset:t.handleToasterReset},null,8,[u(3306),u(3442)])],8,Qs),s(u(481),{class:b(["vfb-right-container",[t[u(3739)]?"":u(3579),t[u(2420)][u(4136)]?"":l(3882),t[u(824)][u(2392)]&&t[l(3249)].rightPanel[u(3854)]?"":u(3717),t[u(1054)]?l(2803):"",t[u(2291)]?l(1356):""]]),inert:t.hasModalOpen},[C(N,null,{default:w((function(){var e=l,n=u;return[t[n(824)][n(3938)]&&t[e(3249)][n(4085)]?(m(),F(z,{key:0,"can-undo":t[n(2898)],"can-redo":t[n(3989)],reverting:t[n(2490)],saving:t[n(3290)],onUndo:t[n(3186)],onRedo:t[n(2051)]},null,8,["can-undo",e(2232),n(2490),"saving",e(2970),n(3038)])):B("v-if",!0),t[n(3418)]?(m(),F(H,{key:1,locale:t[n(528)],locales:t[e(2795)],open:t[n(931)],onToggle:t[n(1271)],onClose:t[n(2907)],onChangeLocale:t[n(1531)]},null,8,[n(528),n(2474),n(2554),n(1188),n(844),e(3980)])):B(n(4285),!0)]})),_:1}),C(K,null,{default:w((function(){var e=l,n=u;return[t[n(824)][e(2436)]&&t[n(824)][n(2392)][n(3854)]?(m(),F(R,{key:0,panels:t[n(2420)],onTogglePanel:t[n(395)]},null,8,[n(2420),n(2547)])):B(n(4285),!0),t[n(824)].save?(m(),F(q,{key:1,"has-unsaved":t[n(4199)],onSave:t[n(1090)]},null,8,[n(3628),n(2133)])):B(n(4285),!0)]})),_:1}),s(l(3184),Ys,[C(c,{side:u(4136),mounted:t[u(745)],builder:t[u(3880)],view:t[u(996)],"dragging-element":t[u(4183)],"dragging-page":t[u(3868)],"dragged-schema":t[u(3754)],tree:t[l(3055)],"paged-tree":t[u(1059)],"flat-tree":t[u(1719)],"walk-tree":t[l(3187)],"side-tree":t[u(3392)],"tree-keyword":t[u(3636)],"collapsed-tree":t[u(3257)],"selected-element":t[l(2804)],"selected-page":t[u(2130)],"is-model-open":t[u(1513)],"all-mounted":t[u(3739)],"has-pages":t[u(2323)],moving:t[u(2724)],pointer:t.pointer,device:t[u(597)],locale:t[u(528)],preview$:t[u(2723)],onUpdateBuilder:t[u(1357)],onCloseElement:t[u(1125)],onSelectPage:t[u(321)],onClosePage:t.handleClosePage,onRemovePage:t[u(4217)],onGoToPage:t[u(4075)],onMoveToPage:t[u(760)],onMoveElement:t[l(1962)],onMovePage:t[l(493)],onAddElement:t[l(942)],onCloneElement:t[u(2589)],onRemoveElement:t[l(2071)],onRenameElement:t.handleRename,onChangeView:t[u(3605)],onModelClose:t[u(3775)],onModelReset:t[u(2635)],onSelectElement:t[u(1002)],onSetDraggedSchema:t[u(461)],onDownload:t[u(1654)],onAnnounce:t[u(3335)],onStartMoving:t.handleStartMoving,onUpdateTreeKeyword:t[u(1756)],onExpandTree:t[u(3207)],onCollapseTree:t[u(4099)],onExpandAllTree:t[u(886)],onOpenModal:t[u(567)],onChangeDevice:t[u(1348)],ref:u(3519)},null,8,[u(745),u(3880),u(996),u(3562),u(1364),u(4166),u(2150),"paged-tree",u(2679),u(1669),l(1350),u(2302),u(985),u(3268),u(4272),u(3818),u(539),l(2721),u(2724),u(749),l(2845),l(335),l(3146),u(3673),u(2060),u(714),"onClosePage",u(3198),l(3243),u(639),u(2731),l(2298),u(3114),u(1765),u(1913),u(3145),u(803),l(3185),u(3409),u(349),u(3476),"onDownload",u(3169),u(634),u(3681),u(1606),u(1020),u(1667),l(1708),u(1495)])])],10,Js),t[l(302)][u(651)]?(m(),F(W,O({key:0},t[l(302)][u(651)],{schema:t[u(1103)],preview$:t[l(3146)],"paged-tree":t[u(1059)],"selected-element":t[u(882)],"selected-element-schema":t[u(3229)],"selected-page":t[u(2130)],"selected-page-schema":t[l(1888)],onClose:t[u(2980)],onSave:t[u(4124)],onClear:t[u(3960)],onAnnounce:t[u(3335)]}),null,16,[l(3482),u(2723),l(2582),"selected-element",u(1383),u(4272),"selected-page-schema",u(844),u(2133),u(2278),"onAnnounce"])):B(u(4285),!0),t[u(4182)]?(m(),h(u(2962),Zs,x(t[u(4182)]),1)):B(u(4285),!0)],512)},qs[V(3624)]="src/components/VueformBuilder.vue";var $s=[{prefix:V(910),iconName:e(4008),icon:[494,492,V(3419)]},{prefix:V(910),iconName:V(2751),icon:[512,512,"M128,256A128,128,0,1,0,256,384,128,128,0,0,0,128,256Zm379-54.86L400.07,18.29a37.26,37.26,0,0,0-64.14,0L229,201.14C214.76,225.52,232.58,256,261.09,256H474.91C503.42,256,521.24,225.52,507,201.14ZM480,288H320a32,32,0,0,0-32,32V480a32,32,0,0,0,32,32H480a32,32,0,0,0,32-32V320A32,32,0,0,0,480,288Z"]},{prefix:V(910),iconName:V(2155),icon:[200,176,V(2996)]},{prefix:V(910),iconName:V(2460),icon:[200,176,e(3922)]},{prefix:V(910),iconName:V(4139),icon:[200,154,V(4214)]},{prefix:V(910),iconName:V(1770),icon:[200,154,V(506)]},{prefix:V(910),iconName:V(1870),icon:[200,160,V(3678)]},{prefix:V(910),iconName:V(2200),icon:[175,200,V(1389)]},{prefix:V(910),iconName:V(457),icon:[175,200,V(3537)]},{prefix:V(910),iconName:V(645),icon:[175,200,V(1540)]},{prefix:V(910),iconName:V(3792),icon:[200,154,V(1945)]},{prefix:V(910),iconName:V(1217),icon:[200,154,V(3860)]},{prefix:V(910),iconName:V(3416),icon:[154,200,V(1960)]},{prefix:V(910),iconName:V(3703),icon:[200,176,e(850)]},{prefix:V(910),iconName:e(2611),icon:[200,176,V(1613)]},{prefix:V(910),iconName:e(2828),icon:[200,176,V(398)]},{prefix:V(910),iconName:V(3328),icon:[200,176,V(3058)]},{prefix:"fas",iconName:V(1901),icon:[200,176,V(3461)]},{prefix:"fas",iconName:V(3295),icon:[200,154,V(1456)]},{prefix:V(910),iconName:"font-case",icon:[640,512,V(3247)]},{prefix:V(910),iconName:V(1578),icon:[448,512,"M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"]},{prefix:V(910),iconName:V(1670),icon:[320,512,V(1058)]},{prefix:e(1328),iconName:V(2864),icon:[448,512,V(3972)]},{prefix:V(910),iconName:V(4092),icon:[512,512,V(3644)]},{prefix:e(1328),iconName:V(4292),icon:[512,512,V(2214)]},{prefix:V(910),iconName:V(1311),icon:[512,512,V(1904)]},{prefix:V(910),iconName:V(2023),icon:[576,512,V(3047)]},{prefix:V(910),iconName:V(3421),icon:[448,512,V(1840)]},{prefix:V(910),iconName:V(2920),icon:[448,512,e(734)]},{prefix:V(910),iconName:V(1920),icon:[384,512,V(2741)]},{prefix:V(910),iconName:V(744),icon:[512,512,V(3208)]},{prefix:V(910),iconName:e(735),icon:[512,512,V(1294)]},{prefix:V(910),iconName:V(1224),icon:[448,512,e(262)]},{prefix:V(910),iconName:"at",icon:[512,512,"M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"]},{prefix:V(910),iconName:V(509),icon:[512,512,V(1602)]},{prefix:V(910),iconName:V(901),icon:[448,512,V(2391)]},{prefix:V(910),iconName:"link",icon:[512,512,"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"]},{prefix:V(910),iconName:V(2350),icon:[448,512,e(2941)]},{prefix:V(910),iconName:V(1012),icon:[512,512,V(384)]},{prefix:V(910),iconName:V(923),icon:[384,512,V(3032)]},{prefix:V(910),iconName:V(3349),icon:[576,512,V(464)]},{prefix:e(1328),iconName:V(2577),icon:[512,512,V(3824)]},{prefix:V(910),iconName:V(3630),icon:[384,512,V(2940)]},{prefix:V(910),iconName:V(2770),icon:[640,512,V(4072)]},{prefix:V(910),iconName:"h1",icon:[576,512,V(534)]},{prefix:e(1328),iconName:"h2",icon:[576,512,e(3601)]},{prefix:V(910),iconName:"h3",icon:[576,512,e(2598)]},{prefix:V(910),iconName:"h4",icon:[576,512,V(2038)]},{prefix:V(910),iconName:V(1315),icon:[448,512,V(3855)]},{prefix:V(910),iconName:V(1585),icon:[512,512,V(1906)]},{prefix:V(910),iconName:V(3249),icon:[448,512,V(2111)]},{prefix:V(910),iconName:V(3541),icon:[448,512,e(2368)]},{prefix:V(910),iconName:V(3045),icon:[640,512,V(850)]},{prefix:V(910),iconName:"code",icon:[640,512,V(669)]},{prefix:e(1328),iconName:e(3613),icon:[512,512,V(1196)]},{prefix:e(1328),iconName:V(2070),icon:[448,512,V(1773)]},{prefix:V(910),iconName:e(2401),icon:[512,512,V(869)]},{prefix:V(910),iconName:V(4259),icon:[352,512,V(3904)]},{prefix:V(910),iconName:e(3870),icon:[576,512,e(1747)]},{prefix:V(910),iconName:V(3115),icon:[448,512,V(524)]},{prefix:V(910),iconName:"exclamation-triangle",icon:[576,512,V(2362)]},{prefix:V(910),iconName:V(3125),icon:[512,512,e(506)]},{prefix:e(1328),iconName:V(3202),icon:[320,512,V(667)]},{prefix:e(1328),iconName:V(673),icon:[448,512,V(4253)]},{prefix:V(910),iconName:V(981),icon:[448,512,V(847)]},{prefix:V(910),iconName:V(627),icon:[512,512,V(1777)]},{prefix:e(2566),iconName:V(1502),icon:[512,512,V(2598)]},{prefix:V(2520),iconName:V(4259),icon:[320,512,V(503)]},{prefix:V(2520),iconName:V(4175),icon:[512,512,V(2869)]},{prefix:"fal",iconName:V(3709),icon:[512,512,V(2022)]},{prefix:V(2520),iconName:V(2920),icon:[448,512,V(602)]},{prefix:e(2566),iconName:e(2084),icon:[448,512,V(3342)]},{prefix:V(2520),iconName:e(2775),icon:[448,512,V(2875)]},{prefix:V(3811),iconName:V(4259),icon:[320,512,V(4235)]},{prefix:V(3811),iconName:V(4069),icon:[512,512,e(3827)]},{prefix:V(3811),iconName:V(2364),icon:[576,512,V(1935)]},{prefix:V(3811),iconName:e(3149),icon:[576,512,V(3081)]},{prefix:V(3811),iconName:"code",icon:[576,512,V(2069)]},{prefix:V(3811),iconName:e(2968),icon:[384,512,V(4241)]},{prefix:V(3811),iconName:V(2750),icon:[384,512,e(240)]},{prefix:e(1216),iconName:V(4157),icon:[576,512,V(2240)]},{prefix:V(3811),iconName:V(3515),icon:[448,512,V(429)]},{prefix:V(3811),iconName:V(3179),icon:[448,512,V(1995)]},{prefix:e(1216),iconName:V(3001),icon:[448,512,V(929)]},{prefix:"far",iconName:V(2647),icon:[448,512,V(1404)]},{prefix:V(3811),iconName:V(1668),icon:[512,512,V(1941)]},{prefix:e(1216),iconName:e(3523),icon:[512,512,V(531)]},{prefix:V(3811),iconName:V(475),icon:[448,512,V(3946)]},{prefix:V(3811),iconName:V(2992),icon:[512,512,e(1789)]},{prefix:e(1216),iconName:V(3037),icon:[512,512,V(1243)]},{prefix:V(3811),iconName:V(1063),icon:[512,512,V(2171)]},{prefix:V(3811),iconName:V(1467),icon:[384,512,V(1190)]},{prefix:V(3811),iconName:V(3242),icon:[448,512,V(3975)]},{prefix:V(3811),iconName:V(2920),icon:[448,512,"M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"]},{prefix:V(2520),iconName:V(475),icon:[448,512,V(2576)]},{prefix:V(2520),iconName:e(1447),icon:[512,512,V(1714)]},{prefix:V(3811),iconName:e(3911),icon:[512,512,V(1351)]},{prefix:V(910),iconName:V(2494),icon:[512,512,e(2622)]},{prefix:V(910),iconName:V(2909),icon:[576,512,V(3966)]},{prefix:V(2520),iconName:V(1443),icon:[512,512,V(1136)]},{prefix:V(2520),iconName:V(2659),icon:[512,512,V(1166)]},{prefix:V(2520),iconName:e(652),icon:[512,512,V(1908)]},{prefix:V(2520),iconName:V(2751),icon:[512,512,V(4114)]},{prefix:V(2520),iconName:V(2417),icon:[512,512,V(2189)]},{prefix:V(2520),iconName:V(2404),icon:[576,512,V(2135)]},{prefix:V(910),iconName:V(3870),icon:[448,512,V(2855)]},{prefix:"fas",iconName:V(3821),icon:[512,512,V(377)]},{prefix:V(1835),iconName:V(3159),icon:[448,512,[V(937),V(2418)]]},{prefix:"fas",iconName:V(3159),icon:[448,512,V(2096)]},{prefix:V(910),iconName:V(2919),icon:[448,512,V(1543)]}],Xs={props:{icon:{required:!0,type:Array}},setup:function(e,t){var n=V,o=a(e)[n(644)],i=r((function(){var e=n;return $s[e(2748)]((function(t){var n=e;return t[n(4270)]===o[n(1660)][0]&&t[n(2180)]===o.value[1]}))}));return{d:r((function(){var e=Q,t=n;return Array[t(674)](i[e(1109)][t(644)][2])?i[t(1660)][t(644)][2][0]:i[e(1109)][t(644)][2]})),d2:r((function(){var e=n;return Array[e(674)](i[e(1660)][e(644)][2])?i[e(1660)][e(644)][2][1]:null})),viewBox:r((function(){var e=Q,t=n;return t(3836)[t(1698)](i[t(1660)][t(644)][0]," ")[t(1698)](i[t(1660)][e(1640)][1])}))}}},ec=[e(3540)],tc=["d"],nc=["d"];Xs[V(3266)]=function(t,n,r,a,o,i){var l=e,u=V;return m(),h(u(2538),{class:u(1702),"aria-hidden":l(3176),focusable:u(3992),role:u(2352),xmlns:u(3939),viewBox:a[u(420)]},[s(u(402),{class:"",fill:u(3653),d:a.d},null,8,tc),a.d2?(m(),h(u(402),{key:0,class:u(1671),fill:u(3653),d:a.d2},null,8,nc)):B(l(3930),!0)],8,ec)},Xs[V(3624)]=e(1227);var rc={props:{top:{type:Boolean,required:!1,default:!1},bottom:{type:Boolean,required:!1,default:!1},left:{type:Boolean,required:!1,default:!1},right:{type:Boolean,required:!1,default:!1},topLeft:{type:Boolean,required:!1,default:!1},topRight:{type:Boolean,required:!1,default:!1},bottomLeft:{type:Boolean,required:!1,default:!1},bottomRight:{type:Boolean,required:!1,default:!1},content:{type:String,required:!1,default:""},position:{type:String,required:!1},closer:{type:Boolean,required:!1,default:!1},further:{type:Boolean,required:!1,default:!1},smaller:{type:Boolean,required:!1,default:!1}}},ac=[V(2317)],oc={key:1};rc[V(3266)]=function(t,n,r,a,o,i){var l=e,u=V;return m(),h("div",{class:b([l(3089),[r[l(1189)]||r[u(2888)]===u(368)?u(1193):null,r[u(2469)]||r[u(2888)]===u(2469)?u(3788):null,r[u(418)]||r[l(2734)]===u(1539)?u(1591):null,r[u(2681)]||r[u(2888)]===u(371)?"vfb-tooltip-top-right":null,r[l(3916)]||r[u(2888)]===u(861)?u(4323):null,r[u(3769)]||r.position===u(1438)?l(237):null,r[u(3441)]||"left"===r[u(2888)]?u(3407):null,r.right||r[u(2888)]===u(4136)?u(3959):null,r[u(2843)]?"vfb-tooltip-closer":null,r[u(3264)]?u(2042):null,r[u(963)]?u(2077):null]])},[r[u(842)]?(m(),h(u(2962),{key:0,innerHTML:r[u(842)]},null,8,ac)):(m(),h("span",oc,[g(t[l(623)],l(1379),{},(function(){return[f(x(r[u(842)]),1)]}))]))],2)},rc[e(3132)]="src/components/tools/BuilderTooltip.vue";var ic={emits:[e(3372)],props:{title:{type:String,required:!1},subtitle:{type:String,required:!1}},setup:function(e,t){return{handleClose:function(){t[uu(3075)]("close")}}}},lc={class:V(423)},uc={class:V(2732)},sc={key:0,class:V(570)},cc={class:e(645)},dc={class:V(2545)};ic[V(3266)]=function(t,n,r,a,o,i){var l=e,u=V,c=y(u(3258));return m(),h(l(3184),{onClick:n[2]||(n[2]=S((function(){var e=u;return a[e(2336)]&&a[e(2336)][e(3738)](a,arguments)}),[u(3891)])),class:"vfb-overlay"},[s(u(481),{onClick:n[1]||(n[1]=S((function(){}),[u(3891)])),class:u(4116)},[s(u(481),lc,[g(t[l(623)],u(654),{},(function(){var e=l,n=u;return[s(e(3184),null,[g(t[e(623)],n(2720),{},(function(){return[s("div",uc,x(r[e(2478)]),1)]})),g(t[n(543)],n(1359),{},(function(){var t=n;return[r[e(1012)]?(m(),h(t(481),sc,x(r[t(1359)]),1)):B(t(4285),!0)]}))])]})),s(u(731),{onClick:n[0]||(n[0]=S((function(){var e=u;return a[e(2336)]&&a[e(2336)][e(3738)](a,arguments)}),[l(1266)])),"aria-label":u(1631)},[C(c,{class:u(603),icon:[u(3811),u(4259)]})])]),s(u(481),cc,[g(t[u(543)],u(4063))]),s(u(481),dc,[g(t.$slots,u(589))])])])},ic[V(3624)]=V(4195);var pc={publishConfig:{registry:V(2033)},private:!0,name:V(764),version:e(2529),description:V(2718),homepage:V(1999),bugs:{url:V(3514)},license:V(4274),authors:[{name:V(2721),email:"adam@vueform.com"}],main:"src/index.js",_moduleAliases:{"composition-api":V(1716)},scripts:{dev:"","build:readme":V(2708),build:V(4077),"to:web":V(3598),"to:test":V(2313),"to:dev":V(2105),"to:prod":V(909),"to:internal":V(3896),"to:wildcard":V(1067),"to:source":V(1933)},devDependencies:{"@babel/cli":V(3594),"@babel/core":V(1813),"@babel/node":V(3594),"@babel/preset-env":V(1813),"@fullhuman/postcss-purgecss":V(816),"@rollup/plugin-babel":e(2363),"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-json":"^5.0.1","@rollup/plugin-node-resolve":V(930),"@vue/babel-preset-app":e(3032),argv:V(2928),autoprefixer:V(2221),"javascript-obfuscator":e(3270),ncp:V(2879),rollup:V(317),"rollup-plugin-import-css":V(1580),"rollup-plugin-node-builtins":V(1710),"rollup-plugin-obfuscator":V(4211),"rollup-plugin-postcss":V(1025),"rollup-plugin-scss":e(3271),"rollup-plugin-terser":V(3105),"rollup-plugin-vue":V(2136),sass:V(4169),"vue-sfc-rollup":e(3809)},dependencies:{axios:e(633),json5:V(2752),lodash:V(2178),moment:V(3132),prismjs:V(2802),tailwindcss:V(3088),vue:V(1014)}};var vc=new(function(){var e=Q,t=uu;function n(){var e=uu;Z(this,n),this[e(3616)]={config:{},version:pc[e(536)]}}return X(n,[{key:e(3413),value:function(){var t=e,n=uu,r=arguments[n(3854)]>0&&void 0!==arguments[0]?arguments[0]:n(2918),a="";return a+="\n",a+=n(1170),a+=n(2080),a+=n(575),a+=n(4021),a+=n(2448),a+=n(3131),a+=" ......\n",a+=t(3019),a+=n(2290),a+=n(4306),a+=t(899),a+="\n",a+=""[n(1698)](Array(r[n(3854)]+1)[n(2851)]("="),"\n"),a+=""[t(3907)](r,"\n"),a+=""[n(1698)](Array(r[n(3854)]+1)[n(2851)]("="),"\n"),a+="\n",a+=n(406),a+="\n"}},{key:t(1492),value:function(n,r){var a=e,o=t,i=this,l=parseInt(n[o(536)][o(1695)](".")[0]),u=parseInt(n[o(536)][o(1695)](".")[1]);this[o(3616)][o(3401)]=r;var s,c,d,p,v,f=n[o(3401)][o(1477)][o(1026)][o(3401)][o(1038)];if(!f)return console[o(1973)](this[o(2876)](o(2918))),void(window[a(3735)][o(2380)]=o(637)[o(1698)](f,a(3038)));if(s=f[o(4329)](),c=V,d=0,p=s[0],v=0,s[c(1695)]("-")[c(3126)]((function(e){var t=c;if(4!=e[t(3854)])return!1;e[t(1695)]("")[t(3126)]((function(e){e==p&&v++,d+=e[t(3478)](0)}))})),1492!=d||3!=v)return console[o(1973)](this[o(2876)](o(382))),void(window[o(2914)][o(2380)]=o(637)[a(3907)](f,"&c=304"));switch(typeof navigator!==a(3401)&&navigator[o(4260)]&&typeof window!==o(593)&&window[a(3735)]&&-1!==[o(1197),a(521)][o(1427)](window[a(3735)][o(3794)])&&typeof fetch!==o(593)&&fetch(a(2647)[o(1698)](f))[o(1871)]((function(e){return e[o(4326)]()}))[o(1871)]((function(e){var t=a,n=o;if(e&&null!=e&&e[n(3398)]&&null!=e&&e[n(3398)][n(3854)])switch(e[n(3398)]){case t(2481):return void(void 0!==e[n(3292)]&&!1===e[n(3292)]&&(window[n(2914)][t(1305)]=n(637)[n(1698)](f,n(2754)).concat(e[n(3482)])));case t(2859):return void alert(e[n(2246)]);case n(2246):throw new Error(i[t(3413)](e[n(2246)]))}})),n[a(2658)](o(516),qs),n[o(1283)](a(1901),Xs),n[a(2658)](o(2427),rc),n.component(o(3822),ic),l){case 2:throw new Error(o(715));case 3:u<3&&(n[o(3401)].unwrapInjectedRef=!0),n[o(3401)][o(1477)][o(1524)]=this[o(3616)],n[o(2574)](o(1524),this[o(3616)])}}}]),n}());export{nt as AcceptField,ot as AddTextField,at as AddonsField,it as AfterField,lt as AttrsField,ct as AutoUploadField,ut as AutocompleteField,st as AutogrowField,Xe as BaseElementField,dt as BaseExportField,$e as BaseField,pt as BaseFormField,vt as BaseSelectOptionField,ft as BaseThemeField,At as BeforeField,mt as BetweenField,ht as BoolValueField,gt as ButtonLabelField,bt as ButtonTypeField,yt as ClickableField,Ft as ColumnsField,Vt as ConditionsField,qt as ContentField,Kt as ControlsField,Qt as CreateField,Ut as DateFormatField,Jt as DateModeField,Gt as DateRestrictionsField,$t as DefaultField,an as DefaultField_checkbox,hn as DefaultField_checkboxgroup,un as DefaultField_date,dn as DefaultField_dates,cn as DefaultField_datetime,tn as DefaultField_editor,nn as DefaultField_list,pn as DefaultField_location,Xt as DefaultField_multilingual,fn as DefaultField_multiselect,on as DefaultField_radio,mn as DefaultField_radiogroup,vn as DefaultField_select,ln as DefaultField_slider,An as DefaultField_tags,en as DefaultField_textarea,sn as DefaultField_time,rn as DefaultField_toggle,gn as DescriptionField,bn as DirectionField,yn as DisabledField,Dn as DragAndDropField,Cn as EndpointField,wn as ExportApiField,En as ExportDownloadField,kn as ExportOutputField,xn as ExportThemeField,Fn as FieldNameField,Bn as FileAcceptField,Sn as FileEndpointsField,Ln as FileRulesField,Tn as FileUrlsField,Mn as FormColumnsField,On as FormDisplayErrorsField,_n as FormDisplayMessagesField,In as FormEndpointField,zn as FormFloatPlaceholderField,Pn as FormForceLabelsField,jn as FormFormKeyField,Hn as FormI18nField,Nn as FormLocaleField,Rn as FormNameField,Vn as FormNestingField,qn as FormSizeField,Kn as FormValidationField,Qn as FormWidthField,Wn as GroupsField,Gn as Hour24Field,Un as HrefField,Jn as IdField,Yn as InfoField,Zn as InitialField,$n as InputTypeField,Xn as ItemsField,er as LabelField,tr as LabelsField,nr as MaxField,rr as MaxOptionsField,ar as MetaField,or as MinField,ir as MultipleLabelField,lr as NameField,ur as NativeField,sr as NestedField,cr as NoOptionsField,dr as NoResultsField,pr as ObjectField,vr as OrientationField,Ar as PageButtonsField,mr as PageConditionsField,hr as PageLabelField,gr as PageLabelsField,br as ParamsField,yr as PlaceholderField,Dr as RadioField,Cr as ReadonlyField,wr as ResetsField,Er as RowsField,kr as SearchField,xr as SearchField_tags,Fr as SecondsField,Br as SelectBehaviorField,Sr as SelectItemsField,Lr as SelectUiField,Tr as SizeField,Mr as SoftRemoveField,Or as StepField,_r as StoreField,Ir as StoreOrderField,zr as SubmitField,Pr as SubmitsField,jr as SubtitleField,Hr as TargetField,Nr as TextField,Vr as ThemeBorderField,qr as ThemeColorField,Kr as ThemeColorSelectorField,Qr as ThemeRadiusField,Wr as ThemeShadowField,Gr as ThemeSingleSizeField,Ur as ThemeSizeField,Jr as ThemeThemeField,Yr as ThemeToolsField,Zr as ThemeToolsHiddenField,$r as ToolsField,Xr as TooltipFormatField,ea as TooltipsField,ta as TypeField,ga as ValidationField,ba as ViewField,ya as ViewField_file,vc as default,Eo as elementTypes,Co as sections,wo as separators}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..bc01b3c --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "publishConfig": { + "registry": "https://registry.vueform.com" + }, + "private": false, + "name": "@vueform/builder", + "version": "1.1.0", + "description": "Vueform Builder development build.", + "homepage": "https://vueform.com", + "license": "SEE LICENSE IN LICENSE.txt", + "authors": [ + { + "name": "Adam Berecz", + "email": "adam@vueform.com" + } + ], + "main": "index.js", + "dependencies": { + "axios": "^1.5.0", + "json5": "^2.2.3", + "lodash": "^4.17.21", + "moment": "^2.29.4", + "prismjs": "^1.29.0", + "tailwindcss": "^3.3.3", + "vue": "^3.3.4" + } +} \ No newline at end of file diff --git a/plugin.js b/plugin.js new file mode 100644 index 0000000..2e73f08 --- /dev/null +++ b/plugin.js @@ -0,0 +1,2656 @@ +import { onMounted, ref, computed, toRefs, watch, onBeforeUnmount, nextTick, inject, resolveComponent, } from 'vue' +import _ from 'lodash' + +const asyncForEach = async (array, callback) => { + for (let index = 0; index < (_.isPlainObject(array) ? _.values(array) : array).length; index++) { + let key = (_.isPlainObject(array) ? _.keys(array)[index] : index) + + await callback(array[key], key, array) + } +} + +const getElementSchemaByPath = (schema, path) => { + if (!path) { + return + } + + const pathParts = path.split('.') + const pathLength = pathParts.length + + const returnSchema = (schema, level = 1) => { + const currentPath = pathParts[level - 1] + + if (pathLength === level) { + return schema[currentPath] + } else if (pathLength > level) { + let base = schema[pathParts[level - 1]] + let childSchema = base.type === 'list' + ? { 0: base.element } + : base.schema + + return returnSchema(childSchema, level + 1) + } + } + + return returnSchema(schema) +} + +export default function () { + return [ + () => ({ + config(config) { + config.presets = { + ...config.presets, + 'preview-form': {}, + + 'props-form': { + removeClasses: { + FormElements: { + container_sm: ['form-gap-y-gutter-sm'], + }, + }, + replaceClasses: { + ToggleElement: { + wrapper: { + 'items-start': 'vfb-util-props-toggle-wrapper' + } + }, + TagsElement: { + select: { + tag: { + 'whitespace-nowrap': 'vfb-util-props-tags' + } + } + } + }, + addClasses: { + ElementLabel: { + wrapper: 'leading-snug' + }, + SliderElement: { + container: 'vfb-config-slider', + }, + ToggleElement: { + container: 'vfb-config-toggle', + }, + ListElement: { + remove: 'vfb-config-list-remove', + }, + }, + }, + 'separator': { + addClasses: { + ElementLayout: { + container: 'vfb-util-props-separator' + } + } + }, + 'separator-top': { + addClasses: { + ElementLayout: { + container: 'vfb-util-props-separator-top' + } + } + }, + 'prop-toggle': { + addClasses: { + ElementLabel: { + container: 'flex items-center' + }, + }, + }, + 'prop-subtitle': { + addClasses: { + StaticElement: { + container: 'vfb-util-props-subtitle' + } + }, + }, + 'prop-subtitle-no-m': { + addClasses: { + StaticElement: { + container: 'vfb-util-props-subtitle-no-m' + } + }, + }, + 'prop-list-subtitle': { + addClasses: { + ElementLabel: { + container: 'vfb-util-props-list-subtitle' + } + } + }, + 'prop-list': { + addClasses: { + ElementLabel: { + container: 'vfb-util-props-list-label', + }, + ListElement: { + add: 'vfb-util-props-list-add' + }, + ElementLayout: { + container: 'vfb-util-props-list-layout', + } + }, + removeClasses: { + ListElement: { + listItem_sm: ['form-gap-gutter-sm'], + } + }, + }, + 'prop-list-object': { + removeClasses: { + ObjectElement: { + wrapper_sm: ['form-gap-gutter-sm'], + } + }, + }, + 'prop-list-el': { + removeClasses: { + TextElement: { + inputContainer: ['form-border-width-input'], + inputContainer_sm: ['form-radius-input-sm'], + inputContainer_default: ['form-bg-input', 'hover:form-bg-input-hover', 'focused:form-bg-input-focus', 'focused:form-ring'], + inputContainer_success: ['form-bg-input-success', 'focused:form-ring'], + }, + TTextElement: { + inputContainer: ['form-border-width-input'], + inputContainer_sm: ['form-radius-input-sm'], + inputContainer_default: ['form-bg-input', 'hover:form-bg-input-hover', 'focused:form-bg-input-focus', 'focused:form-ring'], + inputContainer_success: ['form-bg-input-success', 'focused:form-ring'], + }, + TextareaElement: { + inputContainer: ['form-border-width-input'], + inputContainer_sm: ['form-radius-large-sm'], + inputContainer_default: ['form-bg-input', 'hover:form-bg-input-hover', 'focused:form-bg-input-focus', 'focused:form-ring'], + inputContainer_success: ['form-bg-input-success', 'focused:form-ring'], + }, + TTextareaElement: { + inputContainer: ['form-border-width-input'], + inputContainer_sm: ['form-radius-large-sm'], + inputContainer_default: ['form-bg-input', 'hover:form-bg-input-hover', 'focused:form-bg-input-focus', 'focused:form-ring'], + inputContainer_success: ['form-bg-input-success', 'focused:form-ring'], + }, + DateElement: { + inputContainer: ['form-border-width-input'], + inputContainer_sm: ['form-radius-input-sm'], + inputContainer_default: ['form-bg-input', 'hover:form-bg-input-hover', 'focused:form-bg-input-focus', 'focused:form-ring'], + inputContainer_success: ['form-bg-input-success', 'focused:form-ring'], + }, + SelectElement: { + input: ['form-border-width-input'], + input_sm: ['form-radius-input-sm'], + input_default: ['form-bg-input', 'hover:form-bg-input-hover', 'focused:form-bg-input-focus', 'focused:form-ring'], + input_success: ['form-bg-input-success', 'focused:form-ring'], + select: { + container: ['form-border-width-input'], + container_sm: ['form-radius-input-sm'], + container_default: ['form-bg-input', 'hover:form-bg-input-hover', 'focused:form-bg-input-focus', 'focused:form-ring'], + container_success: ['form-bg-input-success', 'focused:form-ring'], + } + }, + TagsElement: { + select: { + container: ['form-border-width-input'], + container_sm: ['form-radius-input-sm'], + container_default: ['form-bg-input', 'hover:form-bg-input-hover', 'focused:form-bg-input-focus', 'focused:form-ring'], + container_success: ['form-bg-input-success', 'focused:form-ring'], + } + }, + }, + addClasses: { + TextElement: { + inputContainer: 'vfb-util-props-list-el-input', + inputContainer_default: 'vfb-util-props-list-el-input-default', + inputContainer_success: 'vfb-util-props-list-el-input-success', + }, + TTextElement: { + inputContainer: 'vfb-util-props-list-el-input', + inputContainer_default: 'vfb-util-props-list-el-input-default', + inputContainer_success: 'vfb-util-props-list-el-input-success', + }, + TextareaElement: { + inputContainer: 'vfb-util-props-list-el-input', + inputContainer_default: 'vfb-util-props-list-el-input-default', + inputContainer_success: 'vfb-util-props-list-el-input-success', + }, + TTextareaElement: { + inputContainer: 'vfb-util-props-list-el-input', + inputContainer_default: 'vfb-util-props-list-el-input-default', + inputContainer_success: 'vfb-util-props-list-el-input-success', + }, + DateElement: { + inputContainer: 'vfb-util-props-list-el-input', + inputContainer_default: 'vfb-util-props-list-el-input-default', + inputContainer_success: 'vfb-util-props-list-el-input-success', + }, + SelectElement: { + input: 'vfb-util-props-list-el-select', + input_default: 'vfb-util-props-list-el-select-default', + input_success: 'vfb-util-props-list-el-select-success', + select: { + container: 'vfb-util-props-list-el-select-container', + container_default: 'vfb-util-props-list-el-select-container-default', + container_success: 'vfb-util-props-list-el-select-container-success', + } + }, + TagsElement: { + select: { + container: 'vfb-util-props-list-el-select-container', + container_default: 'vfb-util-props-list-el-select-container-default', + container_success: 'vfb-util-props-list-el-select-container-success', + } + }, + }, + }, + 'prop-group': { + addClasses: { + GroupElement: { + container: 'vfb-util-props-group' + }, + }, + }, + 'colorpicker': { + addClasses: { + TextElement: { + inputContainer: 'vfb-util-colorpicker-input', + }, + ElementAddon: { + container: 'vfb-util-colorpicker-addon', + } + } + }, + 'number': { + replaceClasses: { + TextElement: { + input_sm: { + 'form-p-input-sm': 'vfb-util-number-input' + } + }, + ElementAddon: { + container: { + 'form-color-addon': 'vfb-util-number-addon' + } + } + }, + }, + 'tabs-outline': { + overrideClasses: { + RadiogroupRadio: { + wrapper_selected: 'vfb-util-tabs-outline-selected', + wrapper_unselected: 'vfb-util-tabs-outline-unselected', + }, + }, + }, + 'tabs-outline-gray': { + overrideClasses: { + RadiogroupRadio: { + wrapper_selected: 'vfb-util-tabs-outline-gray-selected', + wrapper_unselected: 'vfb-util-tabs-outline-gray-unselected', + }, + }, + }, + 'tabs-2': { + addClasses: { + RadiogroupElement: { + wrapper: 'vfb-util-grid-cols-12' + }, + RadiogroupRadio: { + container: 'vfb-util-col-span-6' + }, + }, + }, + 'tabs-3': { + addClasses: { + RadiogroupElement: { + wrapper: 'vfb-util-grid-cols-12' + }, + RadiogroupRadio: { + container: 'vfb-util-col-span-4' + }, + }, + }, + 'tabs-4': { + addClasses: { + RadiogroupElement: { + wrapper: 'vfb-util-grid-cols-12' + }, + RadiogroupRadio: { + container: 'vfb-util-col-span-3' + }, + }, + }, + 'tabs-6': { + addClasses: { + RadiogroupElement: { + wrapper: 'vfb-util-grid-cols-12' + }, + RadiogroupRadio: { + container: 'vfb-util-col-span-2' + }, + }, + }, + 'tabs-12': { + addClasses: { + RadiogroupElement: { + wrapper: 'vfb-util-grid-cols-12' + }, + RadiogroupRadio: { + container: 'vfb-util-col-span-1' + }, + }, + }, + 'tabs-tiny': { + replaceClasses: { + RadiogroupRadio: { + wrapper_sm: { + 'form-text-sm': 'vfb-util-tabs-tiny' + } + }, + CheckboxgroupCheckbox: { + wrapper_sm: { + 'form-text-sm': 'vfb-util-tabs-tiny' + } + }, + ElementLabel: { + wrapper: { + 'leading-snug': 'leading-none' + } + } + }, + }, + 'tabs-small': { + replaceClasses: { + RadiogroupRadio: { + wrapper_sm: { + 'form-text-sm': 'vfb-util-tabs-small' + } + }, + }, + }, + } + + return config + } + }), + () => ({ + apply: ['Vueform'], + emits: [ + 'rename-page', 'add-page', 'remove-page', 'move-page', 'move-to-page', + 'move-element', 'add-element', 'remove-pages', 'select-page', 'event', + ], + props: { + selectedElement: { + required: false, + type: String, + }, + selectedPage: { + type: String, + required: false, + }, + draggingElement: { + required: false, + type: [null, String, Boolean], + }, + draggingPage: { + required: false, + type: [null, String, Boolean], + }, + builder: { + required: false, + type: Boolean, + default: false, + }, + nesting: { + required: false, + type: Boolean, + default: false, + }, + draggedSchema: { + required: false, + type: Object, + }, + elementTypes: { + required: false, + type: Object, + default: () => ({}) + }, + builderTree: { + required: false, + type: Array, + default: () => ([]), + }, + builderFlatTree: { + required: false, + type: Array, + default: () => ([]), + }, + builderPagedTree: { + required: false, + type: Array, + default: () => ([]), + }, + device: { + required: false, + type: String, + }, + }, + setup(props, context, component) { + const { builder, schema, draggedSchema, tabs, steps } = toRefs(props) + + if (!builder.value) { + return component + } + + // =============== INJECT =============== + + const subscribeOnce = inject('subscribeOnce') + + // ================ DATA ================ + + const droppingFirst = ref(false) + + // ============== COMPUTED ============== + + const hasTabs = computed(() => { + return tabs.value && Object.keys(tabs.value).length + }) + + const hasSteps = computed(() => { + return steps.value && Object.keys(steps.value).length + }) + + const isEmpty = computed(() => { + if (hasTabs.value) { + return !component.tabs$.value?.current$?.elements?.length + } + + if (hasSteps.value) { + return !component.steps$.value?.current$?.elements?.length + } + + return !Object.keys(schema.value).length + }) + + const currentPage$ = computed(() => { + return hasTabs.value + ? component.tabs$.value.current$ + : (hasSteps.value + ? component.steps$.value.current$ + : undefined + ) + }) + + const hasPages = computed(() => { + return hasTabs.value || hasSteps.value + }) + + const pageType = computed(() => { + return hasTabs.value ? 'tab' : ( + hasSteps.value ? 'step' : undefined + ) + }) + + // ============== METHODS =============== + + const reset = (setDefault = true) => { + _.each(component.elements$.value, (e$) => { + if (e$.isStatic) { + return + } + + e$.reset(setDefault) + }) + + if (component.steps$.value !== null) { + component.steps$.value.reset() + } + + if (component.tabs$.value !== null) { + component.tabs$.value.reset() + } + + component.fire('reset') + } + + const submit = async () => { + if (component.isDisabled.value) { + return + } + + await component.validate() + + if (component.invalid.value) { + return + } + + component.preparing.value = true + + try { + await component.prepareElements() + + if (typeof component.options.value.prepare === 'function') { + await component.options.value.prepare(component.form$.value) + } + } catch (error) { + component.fire('error', error, { type: 'prepare' }, component.form$.value) + console.error(error) + return + } finally { + component.preparing.value = false + } + + component.fire('submit', component.form$.value) + } + + const handleSelectPage = (name) => { + context.emit('select-page', name) + } + + const handleRenamePage = (page, value) => { + context.emit('rename-page', page, value) + } + + const handleRemovePage = (value) => { + context.emit('remove-page', value) + } + + const handleAddPage = () => { + context.emit('add-page') + } + + const handleRemovePages = () => { + context.emit('remove-pages') + } + + const handleMovePage = (page, position, target) => { + context.emit('move-page', page, position, target) + } + + const handleMoveToPage = (page, schema, parentPath) => { + context.emit('move-to-page', page, schema, parentPath) + } + + const handleDragOver = (e) => { + e.preventDefault() + + if (draggedSchema.value && ['tabs', 'steps'].indexOf(draggedSchema.value.type) === -1) { + droppingFirst.value = true + } + } + + const handleDragLeave = () => { + droppingFirst.value = false + } + + const handleDrop = (e) => { + let schema = e.dataTransfer.getData('schema') + let path = e.dataTransfer.getData('path') + + if (path && currentPage$.value) { + let currentPage = currentPage$.value.name + + // If element is in a container / list + if (path && path.match(/\./)) { + // Then move to a different tab + subscribeOnce('moved-element', (newPath) => { + nextTick(() => { + context.emit('move-to-page', currentPage, newPath) + }) + }) + + let to = currentPage$.value.elements?.pop() + + // First move out the element from the container + component.el$(path).$emit('move-element', path, 'after', to) + + // If it's root just move to a tab + } else if (path) { + context.emit('move-to-page', currentPage, path) + } else { + // Then move to a different tab + subscribeOnce('added-element', (schema, path) => { + nextTick(() => { + context.emit('move-to-page', currentPage, path) + }) + }) + + context.emit('add-element', JSON.parse(schema), 'after') + } + } else if (schema) { + context.emit('add-element', JSON.parse(schema), 'after') + } + + droppingFirst.value = false + } + + return { + ...component, + isEmpty, + droppingFirst, + hasPages, + pageType, + reset, + submit, + handleSelectPage, + handleRenamePage, + handleRemovePage, + handleAddPage, + handleRemovePages, + handleMovePage, + handleMoveToPage, + handleDragOver, + handleDragLeave, + handleDrop, + } + } + }), + () => ({ + apply: ['Vueform'], + emits: [ + 'update-builder', 'download', 'closed-changed', 'announce', + ], + props: { + pluginSettings: { + required: false, + type: Boolean, + default: false, + }, + name: { + type: String, + required: false, + }, + sections: { + required: false, + type: Object, + }, + fieldOptions: { + required: false, + type: Object, + default: () => ({}), + }, + closed: { + required: false, + type: Array, + default: () => ([]), + }, + k: { + required: false, + type: String, + default: 'key' + }, + lazy: { + required: false, + type: Boolean, + default: false, + }, + excludeFields: { + required: false, + type: Array, + default: () => ([]), + }, + }, + setup(props, context, component) { + const { pluginSettings, } = toRefs(props) + + if (!pluginSettings.value) { + return component + } + + const form = component + + const { + sections, + fieldOptions, + closed, + name, + lazy, + excludeFields, + } = toRefs(props) + + const icon = resolveComponent('BuilderIcon') + const tooltip = resolveComponent('BuilderTooltip') + + // ============== INJECTS =============== + + const config$ = inject('config$') + + const storage$ = inject('storage$') + + // ================ DATA ================ + + const vueform = ref({ + size: 'sm', + displayErrors: false, + forceLabels: false, + presets: ['props-form'], + }) + + const closedSections = ref([...closed.value]) + + const onceOpened = ref([ + ...Object.keys(sections.value).filter(s => sections.value[s].collapsible === false || closed.value.indexOf(s) === -1) + ]) + + const formLoading = ref(false) + + const watchers = ref([]) + + const watchersLog = ref([]) + + const lastLoad = ref({}) + + const loadingSections = ref([]) + + // ============== COMPUTED ============== + + const resolvedFields = computed(() => { + let fields = [] + + Object.keys(sections.value).forEach((sectionName) => { + const section = sections.value[sectionName] + + Object.keys(section.fields).forEach((fieldName) => { + const field = section.fields[fieldName] + + if (excludeFields.value.indexOf(`${sectionName}.${fieldName}`) === -1) { + fields.push(new field.type({ + ...fieldOptions.value, + loading: formLoading, + emit: context.emit, + icon, + tooltip, + section: section.name, + field, + closedSections, + closeAll, + openAll, + config$: config$.value, + })) + } + }) + }) + + return fields + }) + + const resolvedSections = computed(() => { + let tempSections = {} + + Object.keys(sections.value).forEach((sectionName) => { + const section = sections.value[sectionName] + let s = {} + + Object.keys(section.fields).forEach((fieldName) => { + const field = section.fields[fieldName] + + let f = new field.type({ + ...fieldOptions.value, + loading: formLoading, + emit: context.emit, + icon, + tooltip, + section: sectionName, + field, + closedSections, + closeAll, + openAll, + config$: config$.value, + }) + + if (excludeFields.value.indexOf(`${sectionName}.${fieldName}`) === -1) { + s = { + ...s, + ...f.finalSchema, + } + } + }) + + tempSections[sectionName] = { + ...section, + schema: s, + } + }) + + return tempSections + }) + + // =============== METHODS ============== + + const loadSettings = async (data, section) => { + if (!section) { + lastLoad.value = _.cloneDeep(data) + } + + await nextTick() + + let load = {} + + formLoading.value = true + + let fields = resolvedFields.value + + if (section) { + fields = fields.filter(f => f.section === section) + } + + await asyncForEach(fields, async (field) => { + load = { + ...load, + ...((await field.load(data, form)) || {}) + } + + if (field.watchers) { + Object.keys(field.watchers).forEach((elementPath) => { + field.watchers[elementPath].forEach((watcher) => { + let target = Array.isArray(watcher[0]) ? watcher[0] : [watcher[0]] + target = target.map(t => computed(() => _.get(form.data.value, t))) + + let watcherFunction = (value, old) => { + watcher[1]( + form.el$(elementPath), + Array.isArray(watcher[0]) ? value : value[0], + Array.isArray(watcher[0]) ? old : old[0] + ) + } + + let unwatch = watch(target, watcherFunction) + + watchers.value.push(unwatch) + watchersLog.value.push({ + target, + elementPath, + watcherFunction, + }) + }) + }) + } + }) + + let target = section ? form.el$(section) : form + let elements$ = section ? target.children$ : target.elements$.value + + target.load(load) + + Object.keys(elements$).forEach((elementName) => { + let element$ = elements$[elementName] + + if (!element$.isStatic) { + element$.messageBag.clear() + } + }) + + setTimeout(() => { + formLoading.value = false + }, 0) + } + + const clearSettings = () => { + formLoading.value = true + + clearWatchers() + + form.clear() + + setTimeout(() => { + formLoading.value = false + }, 0) + } + + const clearWatchers = () => { + watchers.value.forEach(unwatch=>unwatch()) + watchers.value = [] + watchersLog.value = [] + } + + const close = (section) => { + closedSections.value.push(section) + + context.emit('announce', 'COLLAPSED') + } + + const open = async (section) => { + if (onceOpened.value.indexOf(section) === -1) { + loadingSections.value.push(section) + + setTimeout(() => { + onceOpened.value = onceOpened.value.concat([section]) + closedSections.value = closedSections.value.filter(s => s !== section) + context.emit('announce', 'EXPANDED') + }, 0) + } else { + closedSections.value = closedSections.value.filter(s => s !== section) + context.emit('announce', 'EXPANDED') + } + + } + + const toggle = (section) => { + if (closedSections.value.indexOf(section) !== -1) { + open(section) + } else { + close(section) + } + } + + const closeAll = () => { + closedSections.value = [ + ...Object.keys(sections.value).filter(s => sections.value[s].collapsible !== false) + ] + } + + const openAll = () => { + closedSections.value = [] + + let neverOpened = Object.keys(sections.value).filter(s => onceOpened.value.indexOf(s) === -1) + + neverOpened.forEach((section) => { + loadingSections.value.push(section) + }) + + setTimeout(() => { + onceOpened.value = [ + ...Object.keys(sections.value).filter(s => sections.value[s].collapsible !== false) + ] + }, 0) + } + + const handleFormSubmit = () => { + if ("activeElement" in document) { + document.activeElement.blur() + } + } + + // ============== WATCHERS ============== + + watch(closedSections, (n) => { + if (!lazy.value) { + storage$.value.set(`${name.value}-closed`, JSON.stringify(n)) + context.emit('closed-changed', n) + } + }, { deep: true }) + + watch(name, (n) => { + if (n && storage$.value.get(`${n}-closed`)) { + closedSections.value = JSON.parse(storage$.value.get(`${n}-closed`)) + } + }, { immediate: false }) + + watch(onceOpened, async (n, o) => { + if (!lazy.value) { + _.difference(n, o).forEach((section) => { + loadingSections.value = loadingSections.value.filter(s => s !== section) + }) + return + } + + await nextTick() + + await asyncForEach(_.difference(n, o), async (section) => { + loadingSections.value.push(section) + await loadSettings(lastLoad.value, section) + loadingSections.value = loadingSections.value.filter(s => s !== section) + }) + }, { immediate: false }) + + // =============== HOOKS ================ + + onMounted(() => { + if (lazy.value) { + return + } + + if (storage$.value.get(`${name.value}-closed`)) { + closedSections.value = JSON.parse(storage$.value.get(`${name.value}-closed`)) + } + }) + + return { + ...form, + vueform, + onceOpened, + closedSections, + resolvedSections, + loadSettings, + clearSettings, + clearWatchers, + toggle, + closeAll, + openAll, + handleFormSubmit, + watchers, + watchersLog, + loadingSections + } + } + }), + () => ({ + apply: ['FormElements'], + props: { + draggingElement: { + required: false, + type: [null, String, Boolean], + }, + draggingPage: { + required: false, + type: [null, String, Boolean], + }, + draggedSchema: { + required: false, + type: Object, + }, + }, + }), + () => ({ + apply: ['FormTabs', 'FormSteps'], + emits: [ + 'rename-page', 'add-page', 'remove-pages', 'remove-page', 'move-page', 'move-to-page', 'add-element', + 'select-page', 'start-moving', + ], + props: { + draggingElement: { + required: false, + type: [null, String, Boolean], + }, + draggingPage: { + required: false, + type: [null, String, Boolean], + }, + draggedSchema: { + required: false, + type: Object, + }, + moving: { + required: false, + type: [Boolean, Object], + default: false, + }, + pointer: { + required: false, + type: Object, + default: () => ({}), + }, + }, + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + const announce = inject('announce') + + // ================ DATA ================ + + const wrapper = ref(null) + + // ============== METHODS =============== + + const handleSelectPage = (name) => { + context.emit('select-page', name) + } + + const handleRenamePage = (page, value) => { + context.emit('rename-page', page, value) + } + + const handleAddClick = () => { + context.emit('add-page') + + nextTick(() => { + component.last$.value.edit() + }) + } + + const handleRemoveClick = () => { + context.emit('remove-pages') + context.emit('select-page', null) + + announce('REMOVED') + } + + const handleRemovePage = (value) => { + context.emit('remove-page', value) + } + + const handleMovePage = (page, position, target) => { + context.emit('move-page', page, position, target) + } + + const handleMoveToPage = (page, schema, parentPath) => { + context.emit('move-to-page', page, schema, parentPath) + } + + const handleAddElement = (schema, position, targetPath) => { + context.emit('add-element', schema, position, targetPath) + } + + const handleStartMoving = (page, source) => { + context.emit('start-moving', page, source) + } + + return { + ...component, + wrapper, + handleRenamePage, + handleAddClick, + handleRemoveClick, + handleRemovePage, + handleMovePage, + handleMoveToPage, + handleAddElement, + handleSelectPage, + handleStartMoving, + } + } + }), + () => ({ + apply: ['FormTab'], + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + // ================ DATA ================ + + const removeConfirm = ref('This will also remove all elements within the tab. Are you sure?') + + // ============== COMPUTED ============== + + const pageLabel = computed(() => { + return component.tabLabel.value + }) + + const pages$ = computed(() => { + return component.tabs$.value?.tabs$ + }) + + // ============== METHODS =============== + + const goTo = (name) => { + component.form$.value.tabs$.goTo(name) + } + + return { + ...component, + removeConfirm, + pageLabel, + pages$, + goTo, + } + } + }), + () => ({ + apply: ['FormStep'], + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + // ================ DATA ================ + + const removeConfirm = ref('This will also remove all elements within the step. Are you sure?') + + // ============== COMPUTED ============== + + const pageLabel = computed(() => { + return component.stepLabel.value + }) + + const pages$ = computed(() => { + return component.steps$.value?.steps$ + }) + + // ============== METHODS =============== + + const goTo = (name) => { + component.form$.value.steps$.goTo(name) + } + + return { + ...component, + removeConfirm, + pageLabel, + pages$, + goTo, + } + } + }), + () => ({ + apply: ['FormTab', 'FormStep'], + props: { + builder: { + type: Object, + required: false, + }, + draggingElement: { + required: false, + type: [null, String, Boolean], + }, + draggingPage: { + required: false, + type: [null, String, Boolean], + }, + draggedSchema: { + required: false, + type: Object, + }, + moving: { + required: false, + type: [Boolean, Object], + default: false, + }, + pointer: { + required: false, + type: Object, + default: () => ({}), + }, + }, + emits: [ + 'rename-page', 'remove-page', 'move-page', 'move-to-page', 'add-element', 'select-page', + 'start-moving', + ], + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + const { name, draggingPage, moving, pointer } = toRefs(props) + + const subscribeOnce = inject('subscribeOnce') + + const announce = inject('announce') + + // ================ DATA ================ + + const editing = ref(false) + + const editLabel = ref(null) + + const input = ref(null) + + const highlighted = ref(null) + + // ============== COMPUTED ============== + + const beingDragged = computed(() => { + return draggingPage.value === name.value + }) + + const selectedPage = computed(() => { + return component.form$.value.selectedPage + }) + + const isSelected = computed(() => { + return name.value === selectedPage.value + }) + + const beingMoved = computed(() => { + if (!moving.value) { + return false + } + + return moving.value.source === 'preview' && moving.value.type === 'page' && moving.value.path === name.value + }) + + const pointed = computed(() => { + return moving.value.source === 'preview' && pointer.value.path === name.value && + (moving.value.type === 'page' || pointer.value.type === 'page') + + }) + + const index = computed(() => { + return parseInt(name.value.replace('page', '')) + }) + + const count = computed(() => { + return Object.keys(component.form$.value[`${pageType.value}s`]).length + }) + + const pageType = computed(() => { + return component.form$.value.pageType + }) + + // ============== METHODS =============== + + const edit = () => { + editing.value = true + editLabel.value = component.pageLabel.value + + nextTick(() => { + input.value.select() + }) + } + + const save = () => { + editing.value = false + context.emit('rename-page', name.value, editLabel.value) + } + + const cancel = () => { + editing.value = false + } + + const focus = (path) => { + component.form$.value.$el.querySelector(`[data-page="${path}"]`).focus() + } + + const handleClick = (e) => { + e.stopPropagation() + + if (component.form$.value.editorMode && !e.ctrlKey && !e.metaKey) { + context.emit('select-page', name.value) + component.form$.value.$emit('select-element', null) + } + + component.select() + } + + const handleKeyDown = (e) => { + if (component.form$.value.editorMode) { + if (['Enter'].indexOf(e.key) !== -1) { + e.preventDefault() + e.stopPropagation() + + context.emit('select-page', name.value) + component.form$.value.$emit('select-element', null) + + setTimeout(() => { + e.target.closest('.vfb-builder').querySelector('.vfb-config-panel-container-page').focus() + }, 1000) + + announce('CONFIG_PANEL_OPENED') + } + + else if ([' '].indexOf(e.key) !== -1) { + e.preventDefault() + e.stopPropagation() + + announce('PAGE_GRABBED', { + page: component.pageLabel.value, + }) + + context.emit('start-moving', { + path: name.value, + source: 'preview', + type: 'page', + }) + } + + else if (['ArrowRight'].indexOf(e.key) !== -1) { + e.preventDefault() + + if (count.value > index.value + 1) { + focus(`page${index.value + 1}`) + } + } + + else if (['ArrowLeft'].indexOf(e.key) !== -1) { + e.preventDefault() + + if (index.value > 0) { + focus(`page${index.value - 1}`) + } + } + + else if (['Delete'].indexOf(e.key) !== -1) { + e.preventDefault() + + handleRemoveClick() + } + } + + if (['Enter', ' '].indexOf(e.key) !== -1) { + component.select() + } + } + + const handleDoubleClick = () => { + if (!component.form$.value.editorMode) { + return + } + + edit() + } + + const handleEditClick = () => { + context.emit('select-page', name.value) + } + + const handleConditionsClick = () => { + + } + + const handleRemoveClick = () => { + if (Object.keys(component.children$.value).length && Object.keys(component.pages$.value).length > 1 && !confirm(component.removeConfirm.value)) { + return + } + + context.emit('remove-page', name.value) + } + + const handleClearClick = () => { + + } + + const handleInputBlur = () => { + if (!editing.value) { + return + } + + save() + } + + const handleInputKeyDown = (e) => { + if (e.key === 'Enter') { + save() + } + + if (e.key === 'Escape') { + e.preventDefault() + cancel() + } + } + + const handleDragStart = (e) => { + e.dataTransfer.setData('page', name.value) + e.dataTransfer.effectAllowed = 'move' + e.dataTransfer.dropEffect = 'move' + } + + const handleDragEnd = () => { + } + + const handleDragOver = (e, position) => { + e.preventDefault() + + highlighted.value = position + + if (position === 'middle') { + component.goTo(name.value) + + if (selectedPage.value !== name.value) { + context.emit('select-page', name.value) + } + } + } + + const handleDragLeave = () => { + highlighted.value = null + } + + const handleDrop = (e, position) => { + highlighted.value = null + + let page = e.dataTransfer.getData('page') || undefined + + if (page) { + context.emit('move-page', page, position, name.value) + return + } + + let path = e.dataTransfer.getData('path') || undefined + + // If element is in a container / list + if (path && path.match(/\./)) { + // Then move to a different tab + subscribeOnce('moved-element', (newPath) => { + nextTick(() => { + context.emit('move-to-page', name.value, newPath) + }) + }) + + let to = component.form$.value.tabs$.current$.elements?.pop() + + // First move out the element from the container + component.form$.value.el$(path).$emit('move-element', path, 'after', to) + + // If it's root just move to a tab + } else if (path) { + context.emit('move-to-page', name.value, path) + } else { + let schema = JSON.parse(e.dataTransfer.getData('schema')) + + // Then move to a different tab + subscribeOnce('added-element', (schema, path) => { + nextTick(() => { + context.emit('move-to-page', name.value, path) + }) + }) + + context.emit('add-element', schema, 'after') + } + } + + return { + ...component, + handleKeyDown, + handleDoubleClick, + handleEditClick, + handleConditionsClick, + handleRemoveClick, + handleClearClick, + handleInputBlur, + handleInputKeyDown, + handleDragStart, + handleDragEnd, + handleDragOver, + handleDragLeave, + handleDrop, + handleClick, + edit, + pointed, + beingMoved, + isSelected, + selectedPage, + beingDragged, + highlighted, + editing, + editLabel, + input, + } + } + }), + () => ({ + apply: ['FormStepsControls'], + emits: [ + 'select-page', + ], + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + // ============== COMPUTED ============== + + const isSelected = computed(() => { + return !!component.form$.value.selectedPage + }) + + // ============== METHODS =============== + + const handleClick = () => { + if (component.form$.value.editorMode) { + nextTick(() => { + context.emit('select-page', component.form$.value.steps$.current$.name) + }) + } + } + + return { + ...component, + isSelected, + handleClick, + } + } + }), + () => ({ + apply: ['HiddenElement'], + props: { + classes: { + required: false, + type: Object, + default: () => ({}) + }, + columnsClasses: { + required: false, + type: Object, + default: () => ({ + container: 'col-span-12', + innerContainer: 'col-span-12', + wrapper: 'col-span-12', + }) + }, + visible: { + required: false, + type: Boolean, + default: true + }, + } + }), + () => ({ + apply: ['StaticElement'], + props: { + sourcePath: { + type: String, + required: false, + }, + emptyText: { + type: String, + required: false, + }, + handleEvent: { + type: Function, + required: false, + }, + conditionType: { + type: String, + required: false, + } + }, + }), + () => ({ + apply: ['FileElement'], + setup(props, context, component) { + if (!component.form$.value.builder) { + return + } + + const axios = { + request: (options) => { + return new Promise((resolve) => { + let { data } = options + + return resolve(options.url == '/vueform/file/remove' ? true : { + data: data.get([...data.keys()][0]).name + }) + }) + }, + CancelToken: { source: () => ({ token: 'token' }) }, + token: null, + isCancel: () => { return false }, + __CUSTOM__: true + } + + watch(component.axios, (n) => { + console.log('changed') + if (!n.__CUSTOM__) { + component.axios.value = axios + } + }) + + return { + ...component, + axios, + } + } + }), + () => ({ + apply: ['ListElement'], + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + const { element, initial } = toRefs(props) + + const hasPrototype = computed(() => { + return (component.isObject.value && component.prototype.value.schema) || + (!component.isObject.value && element && element.value?.type) + }) + + const childName = computed(() => { + if (!element || !element.value?.type || !element.value?.builder?.type) { + return + } + + // let name = element.value?.builder?.type || element.value.type + // return `${component.form$.value.elementTypes[name].label} (repeat)` + + return `(repeat)` + }) + + const reset = (setDefault = true) => { + component.value.value = setDefault + ? _.cloneDeep(component.defaultValue.value) + : _.cloneDeep(component.nullValue.value) + + + component.resetValidators() + + let instances = component.form$.value.editorMode ? 1 : initial.value + + if (!component.value.value.length && instances > 0) { + for (let i = 0; i < instances; i++) { + component.add() + } + + nextTick(() => { + component.children$Array.value.forEach((child$) => { + child$.reset() + }) + }) + } + + nextTick(() => { + component.refreshOrderStore(component.value.value) + }) + } + + return { + ...component, + hasPrototype, + childName, + reset, + } + } + }), + () => ({ + apply: ['ObjectElement', 'GroupElement'], + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + const reset = (setDefault = true) => { + _.each(component.children$.value, (element$) => { + if (element$.isStatic) { + return + } + + element$.reset(setDefault) + }) + } + + return { + ...component, + reset, + } + } + }), + () => ({ + apply: ['ObjectElement', 'GroupElement', 'ListElement'], + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + const nestingLevel = computed(() => { + return component.el$.value.path.split('.').length - 1 + }) + + return { + ...component, + nestingLevel, + } + } + }), + + () => ({ + apply: ['FormElements', 'Vueform', 'GroupElement', 'ObjectElement', 'ListElement'], + emits: [ + 'add-element', 'move-element', 'select-element', 'clone-element', 'remove-element', 'resize-element', 'set-dragged-schema', 'announce', + 'start-moving', + ], + props: { + editorMode: { + required: false, + type: Boolean, + default: false, + }, + moving: { + required: false, + type: [Boolean, Object], + default: false, + }, + pointer: { + required: false, + type: Object, + default: () => ({}), + }, + }, + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + // ============== METHODS =============== + + const handleAddElement = (schema, position, targetPath) => { context.emit('add-element', schema, position, targetPath) } + const handleMoveElement = (from, position, to) => { context.emit('move-element', from, position, to) } + const handleSelectElement = (path) => { context.emit('select-element', path) } + const handleCloneElement = (path) => { context.emit('clone-element', path) } + const handleRemoveElement = (path) => { context.emit('remove-element', path) } + const handleResizeElement = (path, width) => { context.emit('resize-element', path, width) } + const handleSetDraggedSchema = (schema) => { context.emit('set-dragged-schema', schema) } + const handleAnnounce = (msg, params) => { context.emit('announce', msg, params) } + const handleStartMoving = (path, source) => { context.emit('start-moving', path, source) } + + return { + ...component, + handleAddElement, + handleMoveElement, + handleSelectElement, + handleCloneElement, + handleRemoveElement, + handleResizeElement, + handleSetDraggedSchema, + handleAnnounce, + handleStartMoving, + } + } + }), + () => ({ + apply: /^[a-zA-Z]*Element$/, + emits: [ + 'add-element', 'move-element', 'select-element', 'clone-element', 'remove-element', 'resize-element', 'set-dragged-schema', 'announce', + 'start-moving', + ], + props: { + builder: { + required: false, + type: Object, + }, + droppable: { + required: false, + type: Boolean, + default: true, + }, + cloneable: { + required: false, + type: Boolean, + default: true, + }, + displayName: { + required: false, + type: String, + }, + allowSiblings: { + required: false, + type: Boolean, + default: true, + }, + draggingElement: { + required: false, + type: [null, String, Boolean], + }, + draggingPage: { + required: false, + type: [null, String, Boolean], + }, + draggedSchema: { + required: false, + type: Object, + }, + moving: { + required: false, + type: [Boolean, Object], + default: false, + }, + pointer: { + required: false, + type: Object, + default: () => ({}), + }, + }, + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + const { droppable, draggingElement, moving, pointer } = toRefs(props) + + // ================ DATA ================ + + const highlighted = ref(false) + + // ============== COMPUTED ============== + + const beingDragged = computed(() => { + return draggingElement.value === component.path.value + }) + + const Droppable = computed(() => { + return !beingDragged.value && droppable.value + }) + + const pointed = computed(() => { + return moving.value && moving.value.source === 'preview' && pointer.value?.path === component.path.value + }) + + // =============== METHODS ============== + + const announce = (msg, params) => { + context.emit('announce', msg, params) + } + + return { + ...component, + announce, + highlighted, + beingDragged, + Droppable, + pointed, + } + } + }), + () => ({ + apply: 'ElementLayout', + emits: [ + 'add-element', 'select-element', 'clone-element', 'remove-element', 'resize-element', 'announce', + ], + props: { + draggingElement: { + required: false, + type: [null, String, Boolean], + }, + draggingPage: { + required: false, + type: [null, String, Boolean], + }, + draggedSchema: { + required: false, + type: Object, + }, + }, + setup(props, context, component) { + if (!component.form$.value.builder) { + return component + } + + const config$ = inject('config$') + + // ================ DATA ================ + + const hovered = ref(false) + const focused = ref(false) + + const startingWidth = ref(0) + const elementWidth = ref(null) + const lastWidth = ref(0) + + const editing = ref(false) + const resizing = ref(false) + + let deviceSizeMap = ref({ + default: 'default', + tablet: config$.value.breakpoints?.tablet.breakpoint, + desktop: config$.value.breakpoints?.desktop.breakpoint + }) + + // ============== COMPUTED ============== + + const device = computed(() => { + return component.el$.value.form$.device || 'default' + }) + + const size = computed(() => { + return deviceSizeMap.value[device.value] + }) + + const sizes = computed(() => { + return Object.values(deviceSizeMap.value) + }) + + const moving = computed(() => { + if (!component.el$.value.moving) { + return false + } + + let moving = component.el$.value.moving + + return moving.source === 'preview' && moving.type === 'element' && moving.path === path.value + }) + + const path = computed(() => { + return component.el$.value.path + }) + + const flatTree = computed(() => { + return component.el$.value.form$.flatTree || [] + }) + + const selectedElement = computed(() => { + return component.form$.value.selectedElement + }) + + const elementIndex = computed(() => { + return flatTree.value.indexOf(path.value) + }) + + const isSelected = computed(() => { + return selectedElement.value === path.value + }) + + const highlighted = computed({ + get() { + return component.el$.value.highlighted + }, + set(val) { + component.el$.value.highlighted = val + }, + }) + + const childRestrictions = computed(() => { + let childRestrictions = getChildRestrictions(component.el$.value) + + return childRestrictions + }) + + const canRemove = computed(() => { + return !childRestrictions.value.remove && component.el$.value.builder?.remove !== false + }) + + const canClone = computed(() => { + return !childRestrictions.value.clone && component.el$.value.builder?.clone !== false && component.el$.value.cloneable + }) + + const canEdit = computed(() => { + return component.el$.value.builder?.edit !== false + }) + + const canMove = computed(() => { + return !childRestrictions.value.move && component.el$.value.builder?.move !== false + }) + + const canResize = computed(() => { + return !childRestrictions.value.resize && component.el$.value.builder?.resize !== false + }) + + const canDragInside = computed(() => { + if (['object', 'group'].indexOf(component.el$.value.type) !== -1) { + return !Object.keys(component.el$.value.children).length && + (!component.el$.value.draggedSchema || ['tabs', 'steps'].indexOf(component.el$.value.draggedSchema.type) === -1) + } + + else if (['list'].indexOf(component.el$.value.type) !== -1) { + return !component.el$.value.hasPrototype && + (!component.el$.value.draggedSchema || ['list', 'tabs', 'steps'].indexOf(component.el$.value.draggedSchema.type) === -1) + } + + return false + }) + + const canDragSibling = computed(() => { + return (!component.el$.value.draggedSchema || ['tabs', 'steps'].indexOf(component.el$.value.draggedSchema.type) === -1) + }) + + const hideDragLine = computed(() => { + return false + }) + + const ariaLabel = computed(() => { + return path.value.replace(/\./g, ' / ') + }) + + const pageType = computed(() => { + return component.form$.value.pageType + }) + + // =============== METHODS ============== + + + const getChildRestrictions = (schema) => { + let restrictions = { + remove: false, + clone: false, + move: false, + edit: false, + resize: false, + } + + if (!schema || ['object', 'group', 'list'].indexOf(schema.type) === -1) { + return restrictions + } + + let children = ['object', 'group'].indexOf(schema.type) !== -1 + ? (schema.schema || {}) + : (schema.element + ? { [0]: schema.element } + : {} + ) + + Object.values(children).forEach((childSchema) => { + if (Object.values(restrictions).some(r => !r)) { + let childRestrictions = ['object', 'group', 'list'].indexOf(childSchema.type) !== -1 + ? getChildRestrictions(childSchema) + : { + remove: childSchema.builder?.remove === false, + clone: childSchema.builder?.clone === false, + move: childSchema.builder?.move === false, + edit: childSchema.builder?.edit === false, + resize: childSchema.builder?.resize === false, + } + + Object.keys(restrictions).forEach((key) => { + if (childRestrictions[key]) { + restrictions[key] = true + } + }) + } + }) + + return restrictions + } + + const startEditing = () => { + announce('ELEMENT_GRABBED', { + element: ariaLabel.value, + }) + + editing.value = true + } + + const stopEditing = () => { + editing.value = false + } + + const startMoving = () => { + component.el$.value.$emit('start-moving', { + path: path.value, + source: 'preview', + type: 'element', + }) + } + + const stopMoving = () => { + stopEditing() + } + + const startResizing = () => { + let columns = component.el$.value.columnsClassesService.cols + let container + + // If the size already exists + if (columns[size.value]) { + container = columns[size.value].container + + // If it does not exist, get one from the lower screen sizes + } else { + let sizeList = [...sizes.value].reverse() + let index = sizeList.indexOf(size.value) + + sizeList.forEach((s, i) => { + if (i > index && !container) { + if (columns[s]) { + container = columns[s].container + } + } + }) + + if (!container) { + container = columns.default.container + } + } + + lastWidth.value = container + startingWidth.value = lastWidth.value + resizing.value = true + + getElementDOM(path.value).focus() + } + + const stopResizing = (save) => { + stopEditing() + resizing.value = false + + let msg + let params = {} + + if (startingWidth.value !== lastWidth.value && save) { + msg = 'SAVED_WIDTH' + params = { + width: lastWidth.value, + } + saveColums() + } else { + msg = 'CANCEL_WIDTH' + params = { + width: startingWidth.value, + } + + if (!save && lastWidth.value !== startingWidth.value) { + updateWidth(startingWidth.value, false) + } + } + + announce(msg, params) + } + + const saveResizing = () => { + stopResizing(true) + } + + const cancelResizing = () => { + stopResizing(false) + } + + const updateWidth = (width, shouldAnnounce = true) => { + if (width !== lastWidth.value) { + lastWidth.value = width + + let columns = component.el$.value.columns + + if (size.value === 'default') { + if (columns && typeof columns === 'object') { + if (columns.container || columns.label || columns.wrapper) { + columns.container = width + } else { + if (!columns.default) { + columns.default = {} + } + + columns.default.container = width + } + } else { + columns = { container: width } + } + } else { + if (columns && typeof columns === 'object') { + if (!columns[size.value]) { + if (columns.container || columns.label || columns.wrapper) { + columns = { + default: columns, + [size.value]: { + container: width + } + } + } else { + columns[size.value] = { + container: width + } + } + } else { + columns[size.value].container = width + } + } else { + columns = { + [size.value]: { + container: width, + } + } + } + } + + component.el$.value.updateColumns(columns) + + if (shouldAnnounce) { + announce('WIDTH_CHANGED', { width, }) + } + } + } + + const saveColums = () => { + component.el$.value.$emit('resize-element', path.value, lastWidth.value) + } + + const getSiblingPath = (distance) => { + let index = flatTree.value.indexOf(path.value) + let sibling = flatTree.value[index + distance] || (distance > 0 ? flatTree.value[flatTree.value.length - 1] : flatTree.value[0]) + + if (!sibling) { + return + } + + return sibling + } + + const getElementDOM = (path) => { + return component.el$.value.form$.$el.querySelector(`[data-path="${path}"]`) + } + + const focusElement = (path) => { + let dom = getElementDOM(path) + dom?.focus() + + if (isInOtherPage(path)) { + goToPageThatContains(path) + + nextTick(() => { + getElementDOM(path)?.focus() + }) + } + } + + const isInOtherPage = (path) => { + return window.getComputedStyle(getElementDOM(path)).getPropertyValue('display') === 'none' && component.form$.value.hasPages + } + + const goToPageThatContains = (path) => { + let page = Object.keys(component.form$.value[`${pageType.value}s`]).find((name) => { + let page = component.form$.value[`${pageType.value}s`][name] + let rootPath = path.split('.')[0] + + return page.elements.indexOf(rootPath) !== -1 + }) + + component.form$.value[`${pageType.value}s$`].goTo(page) + } + + const announce = (msg, params) => { + component.el$.value.announce(msg, params) + } + + const handleOverlayClick = () => { + if (!canEdit.value) { + return + } + + component.el$.value.$emit('select-element', path.value) + component.form$.value.$emit('select-page', null) + } + + const handleCloneClick = () => { + component.el$.value.$emit('clone-element', path.value) + } + + const handleRemoveClick = () => { + component.el$.value.$emit('remove-element', path.value) + } + + const handleDragStart = function (e) { + e.dataTransfer.effectAllowed = 'move' + + let schema = getElementSchemaByPath(component.form$.value.options.schema, path.value) + + e.dataTransfer.setData('schema', JSON.stringify(schema)) + e.dataTransfer.setData('path', path.value) + + component.el$.value.$emit('set-dragged-schema', schema) + } + + const handleDragEnd = (e) => { + component.el$.value.$emit('set-dragged-schema', null) + } + + const handleDragOver = (e, position) => { + e.preventDefault() + + if (!component.el$.value.Droppable || component.el$.value.beingDragged) { + return + } + + highlighted.value = position + } + + const handleDragLeave = (e) => { + setTimeout(() => { + highlighted.value = null + }, 0) + } + + const handleDrop = (e, position) => { + e.preventDefault() + + if (!component.el$.value.Droppable) { + return + } + + highlighted.value = null + + const originalPath = e.dataTransfer.getData('path') || undefined + + if (originalPath) { + component.el$.value.$emit('move-element', originalPath, position, path.value) + } else { + const schema = JSON.parse(e.dataTransfer.getData('schema')) + + component.el$.value.$emit('add-element', schema, position, path.value) + } + } + + const handleResizeDragStart = (e) => { + e.dataTransfer.effectAllowed = 'move' + + lastWidth.value = 0 + + let path = e.path || e?.composedPath() + + elementWidth.value = { + from: path[1].getBoundingClientRect().x, + to: path[1].getBoundingClientRect().x + path[2].getBoundingClientRect().width + } + + resizing.value = true + } + + const handleResizeDrag = (e) => { + let end = elementWidth.value.to - elementWidth.value.from + let current = e.x - elementWidth.value.from + let width = Math.round(current / end * 12) + + if (width < 1) { + width = 1 + } + + if (width > 12) { + width = 12 + } + + if (!(e.x === 0 && e.y === 0)) { + updateWidth(width, false) + } + } + + const handleResizeDragEnd = (e) => { + resizing.value = false + saveColums() + } + + const handleFocus = () => { + focused.value = true + } + + const handleBlur = () => { + focused.value = false + } + + const decreaseColumns = (shiftKey) => { + let value = lastWidth.value - 1 + + if (shiftKey) { + value = lastWidth.value > 6 ? 6 : 1 + } + + updateWidth(value) + } + + const increaseColumns = (shiftKey) => { + let value = lastWidth.value + 1 + + if (shiftKey) { + value = lastWidth.value < 6 ? 6 : 12 + } + + updateWidth(value) + } + + const handleKeydown = (e) => { + if (!focused.value && !resizing.value) { + return + } + + if (resizing.value) { + if (e.key === 'ArrowLeft' && lastWidth.value > 1) { + e.preventDefault() + e.stopPropagation() + + decreaseColumns(e.shiftKey) + } + + else if (e.key === 'ArrowRight' && lastWidth.value < 12) { + e.preventDefault() + e.stopPropagation() + + increaseColumns(e.shiftKey) + } + + else if ([' ', 'Enter'].indexOf(e.key) !== -1) { + e.preventDefault() + e.stopPropagation() + + saveResizing() + } + + else if (['Escape'].indexOf(e.key) !== -1) { + e.preventDefault() + e.stopPropagation() + + cancelResizing() + } + + else if (['Tab'].indexOf(e.key) !== -1) { + cancelResizing() + } + } + else if (editing.value) { + if (['ArrowLeft', 'ArrowRight'].indexOf(e.key) !== -1) { + e.preventDefault() + e.stopPropagation() + + if (!canResize.value) { + return + } + + startResizing() + + if (e.key === 'ArrowLeft' && lastWidth.value > 1) { + decreaseColumns(e.shiftKey) + } + + else if (e.key === 'ArrowRight' && lastWidth.value < 12) { + increaseColumns(e.shiftKey) + } + } + + else if (['ArrowUp', 'ArrowDown'].indexOf(e.key) !== -1) { + e.preventDefault() + e.stopPropagation() + + if (!canMove.value) { + return + } + + startMoving() + + } else if ([' ', 'Escape'].indexOf(e.key) !== -1) { + e.preventDefault() + e.stopPropagation() + + stopEditing() + + } else if (['Tab'].indexOf(e.key) !== -1) { + stopEditing() + } + } else { + if (e.key === 'Enter') { + e.preventDefault() + e.stopPropagation() + + if (!canEdit.value) { + return + } + + handleOverlayClick() + + announce('CONFIG_PANEL_OPENED') + + setTimeout(() => { + e.target.closest('.vfb-builder').querySelector('.vfb-config-panel-container-element').focus() + }, 1000) + } + + else if (e.key === ' ') { + e.preventDefault() + e.stopPropagation() + + if (!canMove.value && !canResize.value) { + return + } + + startEditing() + } + + else if (e.key === 'Delete') { + e.preventDefault() + e.stopPropagation() + + if (!canRemove.value) { + return + } + + handleRemoveClick() + + if (flatTree.value[elementIndex.value + 1]) { + focusElement(getSiblingPath(1)) + } + else if (flatTree.value[elementIndex.value - 1]) { + focusElement(getSiblingPath(-1)) + } else { + e.target.closest('.vfb-builder').querySelector('.vfb-preview-wrapper').focus() + } + } + + else if (e.key === 'ArrowDown' && e.shiftKey) { + e.preventDefault() + e.stopPropagation() + + let last = component.el$.value.form$.$el.querySelector('.vfb-preview-form > div > .vfb-preview-element-container:last-of-type') + + if (last) { + last.focus() + } + } + + else if (e.key === 'ArrowUp' && e.shiftKey) { + e.preventDefault() + e.stopPropagation() + + let first = component.el$.value.form$.$el.querySelector('.vfb-preview-form > div > .vfb-preview-element-container:first-of-type') + + if (first) { + first.focus() + } + } + + else if (e.key === 'ArrowDown') { + e.preventDefault() + e.stopPropagation() + + focusElement(getSiblingPath(1)) + } + + else if (e.key === 'ArrowUp') { + e.preventDefault() + e.stopPropagation() + + focusElement(getSiblingPath(-1)) + } + } + } + + // ============== WATCHERS ============== + + watch(moving, (n, o) => { + if (!n) { + stopMoving() + } + }) + + return { + ...component, + ariaLabel, + editing, + resizing, + moving, + highlighted, + hovered, + focused, + isSelected, + canRemove, + canClone, + canEdit, + canMove, + canResize, + canDragInside, + canDragSibling, + hideDragLine, + lastWidth, + childRestrictions, + handleOverlayClick, + handleCloneClick, + handleRemoveClick, + handleFocus, + handleBlur, + handleKeydown, + handleDragOver, + handleDragLeave, + handleDrop, + handleDragStart, + handleDragEnd, + handleResizeDragStart, + handleResizeDrag, + handleResizeDragEnd, + } + } + }) + ] +} \ No newline at end of file diff --git a/scss/_animations.scss b/scss/_animations.scss new file mode 100644 index 0000000..6a76029 --- /dev/null +++ b/scss/_animations.scss @@ -0,0 +1,53 @@ +.vfb-util-flash { + transition: 0.1s; + animation-duration: 0.5s; + animation-fill-mode: both; + animation-name: flash; +} + +@keyframes flash { + from, + 50%, + to { + opacity: 1; + } + + 25%, + 75% { + opacity: 0; + } +} + +@keyframes vfb-fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes vfb-fade-in-up { + 0% { + opacity: 0; + transform: translate3d(0,15%,0); + } + + 100% { + opacity: 1; + transform: translateZ(0); + } +} + +@keyframes vfb-fade-in-down { + 0% { + opacity: 0; + transform: translate3d(0,-15%,0); + } + + 100% { + opacity: 1; + transform: translateZ(0); + } +} \ No newline at end of file diff --git a/scss/_builder.scss b/scss/_builder.scss new file mode 100644 index 0000000..c34a89f --- /dev/null +++ b/scss/_builder.scss @@ -0,0 +1,115 @@ +.vfb-builder { + @apply h-full w-full flex min-h-98 overflow-y-hidden relative; +} + +.vfb-left-container { + @apply w-76 vfb-config-form flex-grow-0 flex-shrink-0 bg-white relative transition-all duration-500 transform z-1 dark:bg-dark-800 dark:text-white; + + &.vfb-left-container-before-load, + &.vfb-left-container-hidden { + @apply -ml-76; + } + + &.vfb-left-container-empty { + @apply w-0; + + &.vfb-left-container-before-load { + @apply ml-0; + } + } + + &.vfb-left-container-has-icons { + @apply w-88; + + &.vfb-left-container-before-load, + &.vfb-left-container-hidden { + @apply -ml-88; + } + } + + &.vfb-left-container-has-form { + @apply w-85; + + &.vfb-left-container-before-load, + &.vfb-left-container-hidden { + @apply -ml-85; + } + + &.vfb-left-container-has-icons { + @apply w-97; + + &.vfb-left-container-before-load, + &.vfb-left-container-hidden { + @apply -ml-97; + } + } + } +} + +.vfb-center-container { + @apply flex-1 bg-gray-100 relative dark:bg-dark-900 min-w-120; +} + +.vfb-center-wrapper { + @apply absolute inset-0 overflow-y-auto px-16; +} + +.vfb-center-loader-container { + @apply w-full flex flex-col items-center justify-center h-full dark:text-white; +} + +.vfb-center-loader { + @apply mb-2; +} + +.vfb-center-loader-text-container { + @apply text-center; +} + +.vfb-right-container { + @apply w-76 vfb-config-form flex-grow-0 flex-shrink-0 bg-white relative transition-all duration-500 transform z-1 dark:bg-dark-800 dark:text-white; + + &.vfb-right-container-before-load, + &.vfb-right-container-hidden { + @apply -mr-76; + } + + &.vfb-right-container-empty { + @apply w-0; + + &.vfb-right-container-before-load { + @apply mr-0; + } + } + + &.vfb-right-container-has-icons { + @apply w-88; + + &.vfb-right-container-before-load, + &.vfb-right-container-hidden { + @apply -ml-88; + } + } + + &.vfb-right-container-has-form { + @apply w-85; + + &.vfb-right-container-before-load, + &.vfb-right-container-hidden { + @apply -mr-85; + } + + &.vfb-right-container-has-icons { + @apply w-97; + + &.vfb-right-container-before-load, + &.vfb-right-container-hidden { + @apply -mr-97; + } + } + } +} + +.vfb-right-wrapper { + @apply absolute inset-0 overflow-x-hidden; +} \ No newline at end of file diff --git a/scss/_code.scss b/scss/_code.scss new file mode 100644 index 0000000..fea4b90 --- /dev/null +++ b/scss/_code.scss @@ -0,0 +1,350 @@ +.vfb-code-toolbar { + @apply relative; + + .vfb-toolbar { + @apply absolute top-4 right-6 opacity-0 transition hover:opacity-100; + + button { + @apply text-white opacity-70 transition hover:opacity-100 font-semibold outline-none; + } + } + + pre[data-nocopy] { + & + .toolbar { + @apply hidden; + } + } + + pre:hover { + & + .vfb-toolbar { + @apply opacity-100; + } + } +} + +.vfb-code { + @apply bg-gray-900 dark:bg-dark-1000; + + code, pre { + color: theme('colors.code.base'); + background: none; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + font-size: 13px; + line-height: 1.625; + border-radius: 8px; + } + + /* Code blocks */ + pre { + overflow: auto; + padding: 1.5rem; + + &.collapsed { + max-height: 600px; + overflow-y: hidden; + position: relative; + pointer-events: none; + + &:before { + font-family: "Font Awesome 5 Pro"; + font-weight: 400; + content: "\f078"; + position: absolute; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.3); + transition: .3s background-color; + color: #fff; + text-align: center; + padding: 0.5rem 0; + cursor: pointer; + pointer-events: all; + + &:hover { + background: rgba(0,0,0,0.4); + } + } + + &.collapsed-long { + max-height: 1156px; + } + } + } + + /* Inline code */ + :not(pre) > code { + padding: .1em; + border-radius: .3em; + white-space: normal; + } + + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: theme('colors.code.comment'); + } + + .token.punctuation { + color: theme('colors.code.base'); + + & + .component-select { + // color: #46ffe2; + // color: #0ae6ff; + // color: theme('colors.code.blue'); + // color: #bd93f9; + // color: #00e2ff; + color: theme('colors.code.green'); + } + } + + .namespace { + opacity: .7; + } + + .token.property, + .token.tag, + .token.constant, + .token.symbol, + .token.deleted { + color: theme('colors.code.blue'); + // color: #ed3aa1; + // color: #ff5bb9; + } + + .token.boolean, + .token.number { + color: theme('colors.code.light-purple'); + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin { + color: theme('colors.code.teal'); + } + + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string, + .token.variable { + color: theme('colors.code.base'); + } + + .token.atrule, + .token.attr-value, + .token.function, + .token.class-name { + color: theme('colors.code.yellow'); + } + + .keyword-highlight { + padding: 0 2px; + position: relative; + + &:after { + content: ""; + background: currentColor; + position: absolute; + opacity: 0.25; + left: 0; + top: 0; + right: 0; + bottom: 0; + pointer-events: none; + } + } + + .token.keyword { + color: theme('colors.code.blue'); + } + + .token.regex, + .token.important { + color: theme('colors.code.orange'); + } + + .token.important, + .token.bold { + font-weight: bold; + } + + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } + + // Diff highlight + + .token.inserted { + color: #95e3bfbf; + margin-left: -0.2rem; + margin-right: 0.2rem; + + &:not(.prefix) { + background-color: #04784f80; + color: inherit; + display: block; + padding-left: 3.8rem; + margin-left: -3.8rem; + padding-right: 1.5rem; + margin-right: -1.5rem; + } + + &.prefix { + user-select: none; + pointer-events: none; + } + } + + .token.deleted { + color: #af9c9c; + margin-left: -0.2rem; + margin-right: 0.2rem; + + &:not(.prefix) { + background-color: #ef6b7f40; + color: inherit; + display: block; + padding-left: 3.8rem; + margin-left: -3.8rem; + padding-right: 1.5rem; + margin-right: -1.5rem; + } + + &.prefix { + user-select: none; + pointer-events: none; + } + } + + pre.diff-highlight .inserted-sign .inserted-sign { + margin-top: -1.5rem; + } + + pre.diff-highlight .deleted-sign .deleted-sign { + margin-top: -1.5rem; + } + + // Inline highlight + + mark { + color: inherit; + padding: 2px 4px; + border-radius: 3px; + position: relative; + background: none; + + + &:after { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: currentColor; + opacity: 0.2; + border-radius: 3px; + pointer-events: none; + cursor: text; + } + } + + // Line numbers + + pre.line-numbers { + position: relative; + padding-left: 3.8rem; + counter-reset: linenumber; + } + + pre.line-numbers > code { + position: relative; + white-space: inherit; + } + + .line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: -1rem; + padding-top: 0.75rem; + font-size: 13px; + line-height: 1.625; + left: -3.8rem; + width: 3rem; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + // background: #11171F; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #45576f; + display: block; + padding-right: 0.8em; + text-align: right; + } + + // Line highlight + + pre[data-line] { + position: relative; + } + + .line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1.5rem; + background: #ffffff14; + + pointer-events: none; + + line-height: inherit; + white-space: pre; + @apply border-l-4 border-primary-500; + } + + .line-numbers .line-highlight { + margin-top: 0.5rem; + } + + pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; + } + pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; + } + pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, .2); + } +} \ No newline at end of file diff --git a/scss/_colorpicker.scss b/scss/_colorpicker.scss new file mode 100644 index 0000000..bd1741e --- /dev/null +++ b/scss/_colorpicker.scss @@ -0,0 +1,505 @@ +.vfb-clr-picker { + display: none; + flex-wrap: wrap; + position: absolute; + width: 200px; + z-index: 999; + border-radius: 10px; + background-color: #fff; + justify-content: space-between; + box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1); + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +.vfb-clr-picker.vfb-clr-open { + display: flex; +} + +.vfb-clr-gradient { + position: relative; + width: 100%; + height: 100px; + margin-bottom: 15px; + border-radius: 3px 3px 0 0; + background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor); + cursor: pointer; +} + +.vfb-clr-marker { + position: absolute; + width: 12px; + height: 12px; + margin: -6px 0 0 -6px; + border: 1px solid #fff; + border-radius: 50%; + background-color: currentColor; + cursor: pointer; +} + +.vfb-clr-picker input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 8px; +} + +.vfb-clr-picker input[type="range"]::-webkit-slider-thumb { + width: 8px; + height: 8px; + -webkit-appearance: none; +} + +.vfb-clr-picker input[type="range"]::-moz-range-track { + width: 100%; + height: 8px; + border: 0; +} + +.vfb-clr-picker input[type="range"]::-moz-range-thumb { + width: 8px; + height: 8px; + border: 0; +} + +.vfb-clr-hue { + background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); +} + +.vfb-clr-hue, +.vfb-clr-alpha { + position: relative; + width: calc(100% - 40px); + height: 8px; + margin: 5px 20px; + border-radius: 4px; +} + +.vfb-clr-alpha span { + display: block; + height: 100%; + width: 100%; + border-radius: inherit; + background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor); +} + +.vfb-clr-hue input, +.vfb-clr-alpha input { + position: absolute; + width: calc(100% + 16px); + height: 16px; + left: -8px; + top: -4px; + margin: 0; + background-color: transparent; + opacity: 0; + cursor: pointer; + appearance: none; + -webkit-appearance: none; +} + +.vfb-clr-hue div, +.vfb-clr-alpha div { + position: absolute; + width: 16px; + height: 16px; + left: 0; + top: 50%; + margin-left: -8px; + transform: translateY(-50%); + border: 2px solid #fff; + border-radius: 50%; + background-color: currentColor; + box-shadow: 0 0 1px #888; + pointer-events: none; +} + +.vfb-clr-alpha div:before { + content: ''; + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + border-radius: 50%; + background-color: currentColor; +} + +.vfb-clr-format { + display: none; + order: 1; + width: calc(100% - 40px); + margin: 0 20px 20px; +} + +.vfb-clr-segmented { + display: flex; + position: relative; + width: 100%; + margin: 0; + padding: 0; + border: 1px solid #ddd; + border-radius: 15px; + box-sizing: border-box; + color: #999; + font-size: 12px; +} + +.vfb-clr-segmented input, +.vfb-clr-segmented legend { + position: absolute; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border: 0; + left: 0; + top: 0; + opacity: 0; + pointer-events: none; +} + +.vfb-clr-segmented label { + flex-grow: 1; + padding: 4px 0; + text-align: center; + cursor: pointer; +} + +.vfb-clr-segmented label:first-of-type { + border-radius: 10px 0 0 10px; +} + +.vfb-clr-segmented label:last-of-type { + border-radius: 0 10px 10px 0; +} + +.vfb-clr-segmented input:checked + label { + color: #fff; + background-color: #666; +} + +.vfb-clr-swatches { + order: 2; + width: calc(100% - 32px); + margin: 0 16px; +} + +.vfb-clr-swatches div { + display: flex; + flex-wrap: wrap; + padding-bottom: 12px; + justify-content: center; +} + +.vfb-clr-swatches button { + position: relative; + width: 20px; + height: 20px; + margin: 0 4px 6px 4px; + border: 0; + border-radius: 50%; + color: inherit; + text-indent: -1000px; + white-space: nowrap; + overflow: hidden; + cursor: pointer; +} + +.vfb-clr-swatches button:after { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + border-radius: inherit; + background-color: currentColor; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); +} + +input.vfb-clr-color { + order: 1; + width: calc(100% - 80px); + height: 32px; + margin: 15px 20px 20px 0; + padding: 0 10px; + border: 1px solid #ddd; + border-radius: 16px; + color: #444; + background-color: #fff; + font-family: sans-serif; + font-size: 14px; + text-align: center; + box-shadow: none; +} + +input.vfb-clr-color:focus { + outline: none; + border: 1px solid #1e90ff; +} + +.vfb-clr-clear { + display: none; + order: 2; + height: 24px; + margin: 0 20px 20px auto; + padding: 0 20px; + border: 0; + border-radius: 12px; + color: #fff; + background-color: #666; + font-family: inherit; + font-size: 12px; + font-weight: 400; + cursor: pointer; +} + +.vfb-clr-preview { + position: relative; + width: 32px; + height: 32px; + margin: 15px 0 20px 20px; + border: 0; + border-radius: 50%; + overflow: hidden; + cursor: pointer; +} + +.vfb-clr-preview:before, +.vfb-clr-preview:after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + border: 1px solid #fff; + border-radius: 50%; +} + +.vfb-clr-preview:after { + border: 0; + background-color: currentColor; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); +} + +.vfb-clr-marker, +.vfb-clr-hue div, +.vfb-clr-alpha div, +.vfb-clr-color { + box-sizing: border-box; +} + +.vfb-clr-field { + display: inline-block; + position: relative; + color: transparent; +} + +.vfb-clr-field button { + position: absolute; + width: 30px; + height: 100%; + right: 0; + top: 50%; + transform: translateY(-50%); + border: 0; + color: inherit; + text-indent: -1000px; + white-space: nowrap; + overflow: hidden; + pointer-events: none; + display: none; +} + +.vfb-clr-field button:after { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + border-radius: inherit; + background-color: currentColor; + box-shadow: inset 0 0 1px rgba(0,0,0,.5); +} + +.vfb-clr-alpha, +.vfb-clr-alpha div, +.vfb-clr-swatches button, +.vfb-clr-preview:before, +.vfb-clr-field button { + background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); + background-position: 0 0, 4px 4px; + background-size: 8px 8px; +} + +.vfb-clr-marker:focus { + outline: none; +} + +.vfb-clr-keyboard-nav .vfb-clr-marker:focus, +.vfb-clr-keyboard-nav .vfb-clr-hue input:focus + div, +.vfb-clr-keyboard-nav .vfb-clr-alpha input:focus + div, +.vfb-clr-keyboard-nav .vfb-clr-segmented input:focus + label { + outline: none; + box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff; +} + +.vfb-clr-picker[data-alpha="false"] .vfb-clr-alpha { + display: none; +} + +.vfb-clr-picker[data-minimal="true"] { + padding-top: 16px; +} + +.vfb-clr-picker[data-minimal="true"] .vfb-clr-gradient, +.vfb-clr-picker[data-minimal="true"] .vfb-clr-hue, +.vfb-clr-picker[data-minimal="true"] .vfb-clr-alpha, +.vfb-clr-picker[data-minimal="true"] .vfb-clr-color, +.vfb-clr-picker[data-minimal="true"] .vfb-clr-preview { + display: none; +} + +/** Dark theme **/ + +.vfb-clr-dark { + background-color: #444; +} + +.vfb-clr-dark .vfb-clr-segmented { + border-color: #777; +} + +.vfb-clr-dark .vfb-clr-swatches button:after { + box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); +} + +.vfb-clr-dark input.vfb-clr-color { + color: #fff; + border-color: #777; + background-color: #555; +} + +.vfb-clr-dark input.vfb-clr-color:focus { + border-color: #1e90ff; +} + +.vfb-clr-dark .vfb-clr-preview:after { + box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); +} + +.vfb-clr-dark .vfb-clr-alpha, +.vfb-clr-dark .vfb-clr-alpha div, +.vfb-clr-dark .vfb-clr-swatches button, +.vfb-clr-dark .vfb-clr-preview:before { + background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888); +} + +/** Polaroid theme **/ + +.vfb-clr-picker.vfb-clr-polaroid { + border-radius: 6px; + box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2); +} + +.vfb-clr-picker.vfb-clr-polaroid:before { + content: ''; + display: block; + position: absolute; + width: 16px; + height: 10px; + left: 20px; + top: -10px; + border: solid transparent; + border-width: 0 8px 10px 8px; + border-bottom-color: currentColor; + box-sizing: border-box; + color: #fff; + filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1)); + pointer-events: none; +} + +.vfb-clr-picker.vfb-clr-polaroid.vfb-clr-dark:before { + color: #444; +} + +.vfb-clr-picker.vfb-clr-polaroid.vfb-clr-left:before { + left: auto; + right: 20px; +} + +.vfb-clr-picker.vfb-clr-polaroid.vfb-clr-top:before { + top: auto; + bottom: -10px; + transform: rotateZ(180deg); +} + +.vfb-clr-polaroid .vfb-clr-gradient { + width: calc(100% - 20px); + height: 120px; + margin: 10px; + border-radius: 3px; +} + +.vfb-clr-polaroid .vfb-clr-hue, +.vfb-clr-polaroid .vfb-clr-alpha { + width: calc(100% - 30px); + height: 10px; + margin: 6px 15px; + border-radius: 5px; +} + +.vfb-clr-polaroid .vfb-clr-hue div, +.vfb-clr-polaroid .vfb-clr-alpha div { + box-shadow: 0 0 5px rgba(0,0,0,.2); +} + +.vfb-clr-polaroid .vfb-clr-format { + width: calc(100% - 20px); + margin: 0 10px 15px; +} + +.vfb-clr-polaroid .vfb-clr-swatches { + width: calc(100% - 12px); + margin: 0 6px; +} +.vfb-clr-polaroid .vfb-clr-swatches div { + padding-bottom: 10px; +} + +.vfb-clr-polaroid .vfb-clr-swatches button { + width: 22px; + height: 22px; +} + +.vfb-clr-polaroid input.vfb-clr-color { + width: calc(100% - 60px); + margin: 10px 10px 15px 0; +} + +.vfb-clr-polaroid .vfb-clr-clear { + margin: 0 10px 15px auto; +} + +.vfb-clr-polaroid .vfb-clr-preview { + margin: 10px 0 15px 10px; +} + +/** Large theme **/ + +.vfb-clr-picker.vfb-clr-large { + width: 275px; +} + +.vfb-clr-large .vfb-clr-gradient { + height: 150px; +} + +.vfb-clr-large .vfb-clr-swatches button { + width: 22px; + height: 22px; +} \ No newline at end of file diff --git a/scss/_conditions.scss b/scss/_conditions.scss new file mode 100644 index 0000000..a5415d5 --- /dev/null +++ b/scss/_conditions.scss @@ -0,0 +1,189 @@ +.vfb-conditions { + +} + +.vfb-conditions-head { + +} + +.vfb-conditions-head-title { + @apply font-semibold uppercase; +} + +.vfb-conditions-head-subtitle { + @apply flex items-center text-sm leading-none; +} + + +.vfb-conditions-head-label { + @apply mr-1; +} + +.vfb-conditions-head-secondary { + @apply text-gray-500 italic; +} + +.vfb-conditions-empty-wrapper { + @apply mb-4 text-center; +} + +.vfb-conditions-empty-icon { + @apply mx-auto w-16 h-16 text-3xl bg-primary-500 text-primary-500 bg-opacity-20 rounded-full flex items-center justify-center; +} + +.vfb-conditions-empty-title { + @apply font-semibold text-lg mt-2; +} + +.vfb-conditions-empty-subtitle { + @apply text-gray-500 leading-none mb-4; +} + +.vfb-condition-list { + +} + +.vfb-condition-list { + @apply pl-10 relative; + + &:before { + content: ""; + @apply w-px absolute top-0 bottom-11.5 left-4 ml-0.5 bg-gray-300; + } +} + +.vfb-condition-list-item-and { + @apply relative; + + &:before { + content: ""; + @apply absolute top-3 h-4 -left-10 w-10 bg-white; + } + + &:after { + content: "and"; + @apply absolute top-3.5 -left-10 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400; + } +} + +.vfb-condition-list-add { + @apply relative -ml-12; +} + + +.vfb-condition-sublist { + @apply relative; + + &:before { + content: ""; + @apply w-px absolute top-14 bottom-0 left-4 ml-0.5 bg-gray-300; + } +} + +.vfb-condition-sublist-item-or { + @apply pl-10 relative; + + &:before { + content: ""; + @apply absolute top-3 h-4 left-0 w-10 bg-white; + } + + &:after { + content: "or"; + @apply absolute top-3.5 left-0 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400; + } +} + +.vfb-condition-sublist-add { +} + + +.vfb-conditions-render { + @apply text-left bg-gray-50 border border-gray-200 px-3 py-2 rounded-md relative dark:bg-dark-700 dark:border-dark-700; +} + +.vfb-conditions-render-title { + @apply mb-2 flex justify-between items-center; +} + +.vfb-conditions-render-title-text { + @apply text-gray-500 uppercase font-semibold dark:text-dark-500; +} + +.vfb-conditions-render-title-btn { + @apply vfb-btn-primary vfb-btn-xs dark:border-primary-500; +} + +.vfb-conditions-render-and-group { + +} + +.vfb-conditions-render-or-group { + @apply ml-2; + + &:nth-of-type(1) { + @apply ml-0; + } +} + +.vfb-conditions-render-one-wrapper { +} + +.vfb-conditions-render-one { + @apply flex; +} + +.vfb-conditions-render-field { + @apply font-bold; + + &:after { + content: ' '; + } +} + +.vfb-conditions-render-operator { + &:after { + content: ' '; + } +} + +.vfb-conditions-render-expected { + @apply text-primary-600 font-semibold; +} + +.vfb-conditions-render-or { + @apply mt-0.75 ml-2 mr-1 text-xs inline-flex items-start justify-center; +} + +.vfb-conditions-render-and { + @apply mt-0.5 mr-1 text-xs inline-flex items-center justify-center; +} + +.vfb-conditions-render-or, +.vfb-conditions-render-and { + @apply font-bold text-gray-500 uppercase dark:text-dark-500; +} + +.vfb-condition-icon { + @apply relative text-primary-500 vfb-tooltip-group ml-px; + color: var(--vf-gray-500); + background: var(--vf-gray-300); + border-radius: 3px; + font-size: 12px; + width: 18px; + display: inline-flex; + height: 18px; + align-items: center; + justify-content: center; +} + +.vfb-conditions-render-empty-wrapper { + @apply flex justify-between items-center; +} + +.vfb-conditions-render-empty-text { +} + +.vfb-conditions-render-empty-btn { + @apply vfb-btn-primary vfb-btn-xs dark:border-primary-500; +} \ No newline at end of file diff --git a/scss/_config-panel.scss b/scss/_config-panel.scss new file mode 100644 index 0000000..cfe9acd --- /dev/null +++ b/scss/_config-panel.scss @@ -0,0 +1,185 @@ +.vfb-config-panel-container { + @apply overflow-y-auto overflow-x-hidden absolute inset-0 z-1 px-5 pb-6 bg-white transition transform duration-150 dark:bg-dark-800; +} + +.vfb-config-panel-container-hidden { + @apply translate-x-full; + + &.vfb-config-panel-container-left { + @apply -translate-x-full; + } +} + +.vfb-config-panel-header-container { + @apply flex justify-between items-center px-5 py-4 border-b border-gray-200 bg-gray-100 -mx-5 dark:bg-dark-700; +} + +.vfb-config-panel-header { + @apply flex items-center justify-between w-full; +} + +.vfb-config-panel-header-wrapper-left { + @apply flex items-center; +} + +.vfb-config-panel-header-wrapper-right { + @apply flex items-center; +} + +.vfb-config-panel-header-close { + @apply mt-0.5 mr-2 text-gray-400 transition-colors hover:text-gray-800 cursor-pointer dark:text-dark-400 dark:hover:text-dark-300; +} + +.vfb-config-panel-header-close-icon { + +} + +.vfb-config-panel-header-label { + @apply text-xl; +} + +.vfb-config-panel-header-clone, +.vfb-config-panel-header-remove, +.vfb-config-panel-header-collapse { + @apply flex items-center justify-center h-full text-gray-500 transition-colors cursor-pointer hover:text-gray-600 dark:text-dark-400 hover:dark:text-dark-300; +} + + +.vfb-config-panel-header-clone, +.vfb-config-panel-header-remove { + @apply mr-3; +} + +.vfb-config-panel-header-clone { + @apply text-0.5md; +} + +.vfb-config-panel-header-collapse-icon-open { + +} + +.vfb-config-panel-header-collapse-icon-close { + +} + +.vfb-config-form { + *, :before, :after, :root { + --vf-gutter-sm: 0.5rem; + + --vf-min-height-input-sm: 2.125rem; + + --vf-py-input-sm: 0.375rem; + --vf-px-input-sm: 0.675rem; + + --vf-radius-input: 6px; + + --vf-bg-input: var(--vf-gray-100); + --vf-bg-passive: var(--vf-gray-200); + --vf-border-color-passive: var(--vf-gray-200); + + --vf-border-color-input: var(--vf-gray-200); + + --vf-color-input: var(--vf-gray-900); + --vf-color-placeholder: var(--vf-gray-400); + + --vf-radius-checkbox-sm: 4px; + } +} + +.dark { + .vfb-config-form { + *, :before, :after, :root { + --vf-primary: theme('colors.dark.550'); + --vf-on-primary: #ffffff; + --vf-ring-color: #ffffff66; + --vf-bg-input: theme('colors.dark.700'); + --vf-bg-passive: theme('colors.dark.600'); + --vf-bg-selected: theme('colors.dark.550'); + --vf-border-color-passive: theme('colors.dark.600'); + + --vf-border-color-input: theme('colors.dark.700'); + --vf-bg-icon: theme('colors.dark.500'); + + --vf-color-muted: theme('colors.dark.400'); + --vf-color-input: #ffffff; + --vf-color-placeholder: theme('colors.dark.400'); + } + } + + .vfb-config-slider { + *, :before, :after, :root { + --vf-primary: theme('colors.primary.500'); + --vf-bg-passive:theme('colors.dark.900'); + --vf-bg-slider-handle: #ffffff; + --vf-shadow-handles: 0px 0px 0px 0px theme('colors.dark.900'); + --vf-shadow-handles-hover: 0px 0px 0px 2px theme('colors.dark.500'); + --vf-shadow-handles-focus: 0px 0px 0px 2px theme('colors.dark.300'); + } + } + + .vfb-config-toggle { + *, :before, :after, :root { + --vf-primary: theme('colors.primary.500'); + --vf-bg-toggle-handle: #ffffff; + --vf-shadow-handles: 0px 0px 0px 0px theme('colors.dark.900'); + --vf-shadow-handles-hover: 0px 0px 0px 2px theme('colors.dark.500'); + --vf-shadow-handles-focus: 0px 0px 0px 2px theme('colors.dark.300'); + } + } + + .vfb-config-list-remove { + *, :before, :after, :root { + --vf-color-passive: #ffffff !important; + } + } + + .vfb-config-datepicker { + .flatpickr-calendar { + &, *, :before, :after, :root { + --vf-color-input: #000000; + } + } + } +} + +.vfb-config-toggle + .vfb-config-toggle { + @apply -mt-2; +} + +.vfb-config-form-header { + @apply text-black -mx-5 -mt-px text-0.5md font-semibold px-5 py-2 flex items-center justify-between cursor-pointer col-span-12 border-t border-b border-gray-150 bg-gray-50 dark:bg-dark-700 dark:border-dark-600 dark:text-white; +} + +.vfb-config-form-header-first { + @apply border-t-0-imp; +} + +.vfb-config-form-header-non-collapsible { + @apply cursor-auto-imp; +} + +.vfb-config-form-header-collapse-container { + @apply text-xs mr-1 order-2 text-gray-400 dark:text-dark-400; +} + +.vfb-config-form-header-collapse-open { +} + +.vfb-config-form-header-collapse-close { +} + +.vfb-config-form-header-collapse-loading { + @apply animate-spin; +} + +.vfb-config-panel-input-language { + @apply text-gray-400 font-bold text-0.5xs flex items-start pt-2.25 pr-1.5 uppercase order-1 cursor-text select-none dark:text-dark-400; + + & + input, & + textarea { + @apply pr-1; + } +} + +.vfb-config-panel-input-language-editor { + @apply text-gray-400 font-bold text-0.5xs uppercase cursor-text select-none bg-gray-100 bg-opacity-50 absolute bottom-1.5 right-2 leading-none p-0.5 dark:bg-dark-700 dark:text-dark-400; +} \ No newline at end of file diff --git a/scss/_elements.scss b/scss/_elements.scss new file mode 100644 index 0000000..b6af021 --- /dev/null +++ b/scss/_elements.scss @@ -0,0 +1,157 @@ +.vfb-elements-container { + @apply absolute inset-0; + + &.vfb-elements-container-tabs { + } + + &.vfb-elements-container-icons { + } +} + +.vfb-elements-container-no-categories { + .vfb-elements-wrapper { + @apply top-14.5; + + .vfb-element-container:first-of-type { + @apply mt-0; + } + } +} + +.vfb-elements-container-no-search { + .vfb-elements-category-container { + @apply mt-1; + } + + .vfb-elements-wrapper { + @apply top-16; + + .vfb-element-container:first-of-type { + @apply mt-0; + } + } + + + &.vfb-elements-container-no-categories { + + .vfb-elements-wrapper { + @apply top-0 pt-1; + + .vfb-element-container:first-of-type { + @apply mt-2; + } + } + } +} + +.vfb-elements-top { + @apply pt-4 px-5 pb-2; +} + +.vfb-elements-search-container { + @apply relative; +} + +.vfb-elements-search-input { + @apply bg-gray-100 pl-8 pr-3 py-1.25 rounded-lg placeholder-gray-400 placeholder-opacity-100 w-full dark:bg-dark-700 dark:placeholder-dark-500 dark:text-white; +} + +.vfb-elements-search-icon { + @apply absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-dark-400; +} + +.vfb-elements-search-remove-icon-container { + @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer dark:text-dark-400; +} + +.vfb-elements-search-remove-icon { + +} + +.vfb-elements-category-container { + @apply mt-4; +} + +.vfb-elements-wrapper { + @apply absolute top-26.25 bottom-0 left-0 right-0 overflow-y-auto px-5; +} + +.vfb-element-container { + @apply flex items-center -ml-2.5 -mr-2.5 px-2.5 py-2.5 my-2 border border-primary-500 bg-primary-500 bg-opacity-0 border-opacity-0 duration-300 rounded-lg transition-shadow shadow-none duration-300; +} + +.vfb-element-container-enabled { + @apply cursor-pointer hover:shadow-box-strong dark:hover:shadow-box-strong-dark; +} + +.vfb-element-container-disabled { + @apply opacity-50 cursor-not-allowed; +} + +.vfb-element-icon-container { + @apply bg-gray-100 text-gray-500 rounded flex items-center justify-center text-0.5sm w-8 h-8 flex-shrink-0 flex-grow-0 mr-3 dark:bg-dark-600 dark:text-dark-300; +} + +.vfb-element-icon { + @apply dark:text-dark-300 max-w-5 max-h-5; +} + +.vfb-element-text-container { + +} + +.vfb-element-text-label { + @apply font-semibold leading-tighter text-gray-800 dark:text-white; +} + +.vfb-element-text-description { + @apply text-gray-500 text-0.5sm leading-snug dark:text-dark-500; +} + + + +.vfb-panels-container-tabs { + .vfb-elements-top { + @apply pt-3.5; + } + + .vfb-elements-wrapper { + @apply top-24.75; + } + + .vfb-elements-category-container { + @apply mt-3.25; + } + + .vfb-element-container { + &:first-of-type { + @apply mt-1; + } + } + + .vfb-elements-container-no-categories { + .vfb-elements-wrapper { + @apply top-14; + } + } + + .vfb-elements-container-no-search { + .vfb-elements-category-container { + @apply mt-0; + } + + .vfb-elements-wrapper { + @apply top-14; + } + + &.vfb-elements-container-no-categories { + .vfb-elements-wrapper { + @apply top-10 pt-0; + + .vfb-element-container:first-of-type { + @apply mt-2; + } + } + } + } +} \ No newline at end of file diff --git a/scss/_export.scss b/scss/_export.scss new file mode 100644 index 0000000..0dcca70 --- /dev/null +++ b/scss/_export.scss @@ -0,0 +1,23 @@ +.vfb-export-container { + @apply max-w-100vw-194.5 mx-auto my-4; +} + +.vfb-export-code { + @apply rounded-lg shadow-box-circle mx-auto; +} + +.vfb-export-copy-container { + @apply hidden; +} + +.vfb-export-copy-icon { + @apply mr-1; +} + +.vfb-export-copied-container { + @apply hidden; +} + +.vfb-export-copied-icon { + @apply mr-1; +} \ No newline at end of file diff --git a/scss/_fields.scss b/scss/_fields.scss new file mode 100644 index 0000000..22d56e9 --- /dev/null +++ b/scss/_fields.scss @@ -0,0 +1,79 @@ +.vfb-fields-container { + @apply vfb-break-words w-max max-w-[576px] max-h-[400px] min-w-full; +} + +.vfb-field-container-no-nesting { + @apply pl-0.5; +} + +.vfb-field-input { + @apply z-1; +} + +.vfb-field-label { + @apply absolute left-0 top-px bottom-0 right-4 flex items-center form-py-input overflow-hidden; +} + +.vfb-field-wrapper { + @apply flex items-center w-full pl-2.5 leading-none; +} + +.vfb-field-wrapper-root { + @apply pt-1.5 pb-0.5 font-semibold uppercase; +} + +.vfb-field-wrapper-container { +} + +.vfb-field-wrapper-disabled { + @apply opacity-50; +} + +.vfb-field-spacing { + @apply whitespace-nowrap; +} + +.vfb-field-selected { + &.vfb-field-pointed .vfb-field-icon, + &.vfb-field-pointed .vfb-field-chevron, + &.vfb-field-pointed .vfb-field-text, + &.vfb-field-pointed .vfb-field-text-secondary, + .vfb-field-icon, + .vfb-field-chevron, + .vfb-field-text, + .vfb-field-text-secondary { + @apply text-white dark:text-white; + } +} + +.vfb-field-icon-container { + @apply relative bg-transparent text-gray-500 rounded flex items-center justify-center text-xs w-4.5 h-4.5 flex-shrink-0 flex-grow-0 mr-1.5; +} + +.vfb-field-icon { + @apply max-w-5 max-h-5 text-primary-500; +} + +.vfb-field-chevron-container { + @apply relative bg-transparent text-black rounded flex items-center justify-center text-xs w-4.5 h-4.5 flex-shrink-0 flex-grow-0 mr-px -ml-4.75; +} + +.vfb-field-chevron-container-sub { + @apply relative; +} + +.vfb-field-chevron { + @apply text-xxs; +} + +.vfb-field-text { + @apply text-black justify-center overflow-x-hidden overflow-y-visible; +} + +.vfb-field-text-primary { + @apply text-sm leading-tighter pr-1 h-4 whitespace-nowrap overflow-hidden text-ellipsis; +} + +.vfb-field-text-secondary { + @apply text-gray-500 leading-none pb-px text-xs italic dark:text-dark-500 whitespace-nowrap pr-1 overflow-hidden text-ellipsis; +} \ No newline at end of file diff --git a/scss/_form-steps.scss b/scss/_form-steps.scss new file mode 100644 index 0000000..ab35892 --- /dev/null +++ b/scss/_form-steps.scss @@ -0,0 +1,350 @@ +.vfb-steps-container { + @apply form-steps; + + &:before { + @apply top-1.75 mt-12; + } + + &.vfb-steps-container-editor { + + &:before { + background-color: var(--vf-primary); + } + } +} + +.vfb-steps-container-sm { + @apply form-mb-gutter form-text-sm; +} + +.vfb-steps-container-md { + @apply form-mb-gutter-lg form-text; +} + +.vfb-steps-container-lg { + @apply form-mb-gutter-lg form-text-lg; +} + +.vfb-steps-wrapper { + @apply flex justify-between overflow-x-auto pt-12 -mt-12; +} + +.vfb-steps-remove-wrapper { + @apply flex justify-between absolute -left-6 top-11 mt-px vfb-tooltip-group; +} + +.vfb-steps-remove-button { + @apply text-gray-300 cursor-pointer transition hover:text-gray-400; +} + +.vfb-steps-add-wrapper { + @apply flex justify-between absolute -right-6 top-11 mt-px vfb-tooltip-group; +} + +.vfb-steps-add-button { + @apply text-gray-300 text-sm cursor-pointer transition hover:text-gray-400; +} + +.vfb-step-container { + @apply relative border-t border-b cursor-pointer border-transparent bg-primary-500 bg-opacity-0 border-primary-500 border-opacity-0 p-0; + + &.vfb-step-container-hover { + @apply border-opacity-100; + + .vfb-step-actions-container { + @apply flex opacity-100; + } + } + + // Here to override .form-step + &.vfb-step-container-drop-left { + @apply relative; + + &:after { + content: ""; + @apply absolute left-0 top-0 bottom-0 right-auto w-0.5 bg-primary-500 rounded-full block; + } + } + + // Here to override .form-step + &.vfb-step-container-drop-right { + @apply relative; + + &:after { + content: ""; + @apply absolute right-0 top-0 bottom-0 left-auto w-0.5 bg-primary-500 rounded-full block; + } + } +} + +.vfb-step-container-drop-middle { + @apply bg-opacity-10 rounded; +} + +.vfb-step-container-editor { + @apply border; + + &:hover, + &:focus, + &.vfb-step-container-moving { + @apply border-primary-500 border-opacity-100 outline-none; + + .vfb-step-actions-container { + @apply flex opacity-100; + } + } + + &.vfb-step-container-selected { + @apply border-opacity-100 bg-primary-500 bg-opacity-10; + + .vfb-step-actions-container { + @apply flex opacity-100; + } + } + + &.vfb-step-container-moving { + @apply border-transparent relative; + + &:before { + content: ""; + @apply absolute inset-0 border border-primary-500 border-dashed block; + } + } +} + +.vfb-step-container-conditional { + @apply text-gray-400; +} + +.vfb-step-container-active { +} + +.vfb-step-container-inactive { +} + +.vfb-step-container-invalid { +} + +.vfb-step-container-valid { +} + +.vfb-step-container-disabled { +} + +.vfb-step-container-enabled { +} + +.vfb-step-container-completed { +} + +.vfb-step-container-incompleted { +} + +.vfb-step-container-pending { +} + +.vfb-step-overlay { + @apply absolute inset-0 bg-primary-500 transition rounded; +} + +.vfb-step-overlay-drag-over { + @apply z-1; +} + +.vfb-step-overlay-highlighted { + @apply bg-opacity-10; +} + +.vfb-step-overlay-not-highlighted { + @apply bg-opacity-0; +} + +.vfb-step-area-left { + @apply absolute left-0 top-0 bottom-0 right-1/2; +} + +.vfb-step-area-left-drag-over { + @apply z-1; +} + +.vfb-step-area-left-drag-line { + @apply absolute left-0 -top-3 bottom-3 w-0.5 bg-primary-500 -ml-px pointer-events-none rounded-full; +} + +.vfb-step-area-right { + @apply absolute right-0 top-0 bottom-0 left-1/2; +} + +.vfb-step-area-right-drag-over { + @apply z-1; +} + +.vfb-step-area-right-drag-line { + @apply absolute right-0 -top-3 bottom-3 w-0.5 bg-primary-500 -mr-px pointer-events-none rounded-full; +} + +.vfb-step-wrapper { + @apply min-w-6 block; +} + +.vfb-step-wrapper-dragged { + @apply opacity-20; +} + +.vfb-step-wrapper-active { + @apply form-border-color-primary; +} + +.vfb-step-wrapper-inactive { + @apply border-transparent; +} + +.vfb-step-wrapper-valid { +} + +.vfb-step-wrapper-invalid { + @apply form-color-danger form-border-color-danger; +} + +.vfb-step-label { + @apply relative block pt-5 px-2.5; +} + +.vfb-step-label-first { + @apply pl-0; +} + +.vfb-step-label-last { + @apply pr-0; +} + +.vfb-step-edit-label-wrapper { + @apply inline-block relative flex-grow flex-shrink h-full pt-5 mx-2.5; +} + +.vfb-step-edit-label-wrapper-first { + @apply ml-0; +} + +.vfb-step-edit-label-wrapper-last { + @apply mr-0; +} + +.vfb-step-edit-label-input { + @apply absolute bottom-0 left-0 right-0 border-0 appearance-none p-0 box-border w-full whitespace-nowrap; +} + +.vfb-step-edit-label-sizer { + @apply invisible inline-block h-px relative -top-px whitespace-nowrap; +} + +.vfb-step-actions-container { + @apply absolute transform text-white flex hidden z-1; +} + +.vfb-step-actions-container-left { + @apply top-0 -left-px -translate-y-full flex-row; +} + +.vfb-step-actions-container-right { + @apply top-0 -right-px -translate-y-full flex-row; +} + +.vfb-step-action { + @apply w-4 h-4 flex items-center justify-center bg-primary-500 text-xs cursor-pointer transition-colors relative hover:bg-primary-600 vfb-tooltip-group; +} + +.vfb-step-edit { +} + +.vfb-step-conditions { +} + +.vfb-step-remove { +} + +.vfb-step-clear { +} + +.vfb-steps-controls-container { +} + +.vfb-steps-controls-container-editor { + @apply border border-primary-500 border-opacity-0 hover:border-opacity-100 cursor-pointer; +} + +.vfb-steps-controls-container-select { + @apply border-opacity-100 bg-primary-500 bg-opacity-10; +} + +.vfb-steps-controls-container-sm { + @apply form-mt-gutter form-text-sm; +} + +.vfb-steps-controls-container-md { + @apply form-mt-gutter-lg form-text; +} + +.vfb-steps-controls-container-lg { + @apply form-mt-gutter-lg form-text-lg; +} + +.vfb-steps-controls-wrapper { + @apply flex justify-between; +} + +.vfb-steps-controls-wrapper-editor { + @apply pointer-events-none; +} + +.vfb-steps-control-button { + @apply form-border-width-btn form-shadow-btn disabled:pointer-events-none disabled:opacity-60 disabled:cursor-not-allowed; + + &:focus { + @apply form-ring outline-0; + } +} + +.vfb-steps-control-button-previous-enabled { + @apply form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary transition-transform transform hover:scale-105; +} + +.vfb-steps-control-button-previous-disabled { + @apply form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary opacity-60 pointer-events-none; +} + +.vfb-steps-control-button-next-enabled { + @apply form-bg-primary form-color-on-primary form-border-color-btn transition-transform transform hover:scale-105; +} + +.vfb-steps-control-button-next-disabled { + @apply form-bg-primary form-color-on-primary form-border-color-btn opacity-60 pointer-events-none cursor-not-allowed; +} + +.vfb-steps-control-button-next-loading { + @apply text-transparent form-bg-primary form-border-color-btn form-bg-spinner-on-primary opacity-60 pointer-events-none cursor-not-allowed; +} + +.vfb-steps-control-button-finish-enabled { + @apply form-bg-primary form-color-on-primary form-border-color-btn transition-transform transform hover:scale-105; +} + +.vfb-steps-control-button-finish-disabled { + @apply form-bg-primary form-color-on-primary form-border-color-btn opacity-60 pointer-events-none cursor-not-allowed; +} + +.vfb-steps-control-button-finish-loading { + @apply text-transparent form-bg-primary form-border-color-btn form-bg-spinner-on-primary opacity-60 pointer-events-none cursor-not-allowed; +} + +.vfb-steps-control-button-sm { + @apply form-p-btn-sm form-radius-btn-sm form-text-sm; +} + +.vfb-steps-control-button-md { + @apply form-p-btn form-radius-btn form-text; +} + +.vfb-steps-control-button-lg { + @apply form-p-btn-lg form-radius-btn-lg form-text-lg; +} \ No newline at end of file diff --git a/scss/_form-tabs.scss b/scss/_form-tabs.scss new file mode 100644 index 0000000..dd7f5c7 --- /dev/null +++ b/scss/_form-tabs.scss @@ -0,0 +1,223 @@ +.vfb-tabs-container { + @apply flex items-end relative; +} + +.vfb-tab-container-active { +} + +.vfb-tabs-container-sm { + @apply form-mb-gutter form-text-sm; +} + +.vfb-tabs-container-md { + @apply form-mb-gutter-lg form-text; +} + +.vfb-tabs-container-lg { + @apply form-mb-gutter-lg form-text-lg; +} + +.vfb-tabs-wrapper { + @apply flex justify-between flex-row overflow-x-auto pt-12 -mt-12; +} + +.vfb-tabs-remove-wrapper { + @apply flex justify-between absolute -left-4 top-2.5 vfb-tooltip-group; +} + +.vfb-tabs-remove-button { + @apply text-gray-300 cursor-pointer transition hover:text-gray-400; +} + +.vfb-tabs-add-wrapper { + @apply flex justify-between absolute -right-4 top-2.5 vfb-tooltip-group; +} + +.vfb-tabs-add-button { + @apply text-gray-300 text-sm cursor-pointer transition hover:text-gray-400; +} + +.vfb-tab-container { + @apply relative cursor-pointer border border-transparent bg-primary-500 bg-opacity-0 border-primary-500 border-opacity-0; + + &.vfb-tab-container-hover { + @apply border-opacity-100; + + .vfb-tab-actions-container { + @apply flex opacity-100; + } + } +} + +.vfb-tab-container-editor { + &:hover, + &:focus, + &.vfb-tab-container-moving { + @apply border-opacity-100 outline-none; + + .vfb-tab-actions-container { + @apply flex opacity-100; + } + } + + &.vfb-tab-container-selected { + @apply border-opacity-100 bg-primary-500 bg-opacity-10; + + .vfb-tab-actions-container { + @apply flex opacity-100; + } + } + + &.vfb-tab-container-moving { + @apply border-transparent relative; + + &:before { + content: ""; + @apply absolute inset-0 border border-primary-500 border-dashed; + } + } +} + +.vfb-tab-container-drop-left { + @apply relative; + + &:after { + content: ""; + @apply absolute left-0 top-0 bottom-0 w-0.5 bg-primary-500 rounded-full; + } +} + +.vfb-tab-container-drop-right { + @apply relative; + + &:after { + content: ""; + @apply absolute right-0 top-0 bottom-0 w-0.5 bg-primary-500 rounded-full; + } +} + +.vfb-tab-container-drop-middle { + @apply bg-opacity-10 rounded; +} + +.vfb-tab-container-conditional { + @apply text-gray-400; +} + +.vfb-tab-overlay { + @apply absolute inset-0 bg-primary-500 transition rounded; +} + +.vfb-tab-overlay-drag-over { + @apply z-1; +} + +.vfb-tab-overlay-highlighted { + @apply bg-opacity-10; +} + +.vfb-tab-overlay-not-highlighted { + @apply bg-opacity-0; +} + +.vfb-tab-area-left { + @apply absolute left-0 top-0 bottom-0 right-1/2; +} + +.vfb-tab-area-left-drag-over { + @apply z-1; +} + +.vfb-tab-area-left-drag-line { + @apply absolute left-0 top-0 bottom-0 w-0.5 bg-primary-500 -ml-px pointer-events-none rounded-full; +} + +.vfb-tab-area-right { + @apply absolute right-0 top-0 bottom-0 left-1/2; +} + +.vfb-tab-area-right-drag-over { + @apply z-1; +} + +.vfb-tab-area-right-drag-line { + @apply absolute right-0 top-0 bottom-0 w-0.5 bg-primary-500 -mr-px pointer-events-none rounded-full; +} + +.vfb-tab-wrapper { + @apply block border-b-2 relative bg-transparent whitespace-nowrap; +} + +.vfb-tab-wrapper-dragged { + @apply opacity-20; +} + +.vfb-tab-wrapper-active { + @apply form-border-color-primary; +} + +.vfb-tab-wrapper-inactive { + @apply border-transparent; +} + +.vfb-tab-wrapper-valid { +} + +.vfb-tab-wrapper-invalid { + @apply form-color-danger form-border-color-danger; +} + +.vfb-tab-wrapper-sm { + @apply py-1.5 px-3.5; +} + +.vfb-tab-wrapper-md { + @apply py-2 px-4; +} + +.vfb-tab-wrapper-lg { + @apply py-2 px-4; +} + +.vfb-tab-edit-label { +} + +.vfb-tab-edit-label-wrapper { + @apply inline-block relative flex-grow flex-shrink h-full; +} + +.vfb-tab-edit-label-input { + @apply absolute inset-0 border-0 appearance-none p-0 box-border w-full whitespace-nowrap; +} + +.vfb-tab-edit-label-sizer { + @apply invisible whitespace-nowrap inline-block h-px relative -top-px; +} + +.vfb-tab-actions-container { + @apply absolute transform text-white flex hidden z-1; +} + +.vfb-tab-actions-container-left { + @apply top-0 -left-px -translate-y-full flex-row; +} + +.vfb-tab-actions-container-right { + @apply top-0 -right-px -translate-y-full flex-row; +} + +.vfb-tab-action { + @apply w-4 h-4 flex items-center justify-center bg-primary-500 text-xs cursor-pointer transition-colors relative hover:bg-primary-600 vfb-tooltip-group; +} + +.vfb-tab-edit { +} + +.vfb-tab-conditions { +} + +.vfb-tab-remove { +} + +.vfb-tab-clear { +} \ No newline at end of file diff --git a/scss/_global.scss b/scss/_global.scss new file mode 100644 index 0000000..d80428b --- /dev/null +++ b/scss/_global.scss @@ -0,0 +1,31 @@ +@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'); + +:not(pre) > code.vfb-inline-code { + font-size: 0.8em; + font-weight: normal; + position: relative; + top: -1px; + letter-spacing: -0.2px; + color: theme('colors.code.light-purple'); + white-space: nowrap; + + &:not(.no-quote):before, &:not(.no-quote):after { + content: "`"; + display: inline-block; + width: 0.375em; + } + + &.no-quote { + padding-left: 0.2em; + padding-right: 0.2em; + } +} + +.vfb-builder { + font-family: 'Source Sans Pro', sans-serif; + -webkit-font-smoothing: antialiased; + + * { + -webkit-font-smoothing: antialiased; + } +} \ No newline at end of file diff --git a/scss/_modal.scss b/scss/_modal.scss new file mode 100644 index 0000000..cb6b824 --- /dev/null +++ b/scss/_modal.scss @@ -0,0 +1,53 @@ +.vfb-overlay { + animation-duration: 0.15s; + animation-delay: 0; + animation-fill-mode: both; + animation-name: vfb-fade-in; + @apply absolute z-999 bg-gray-900 bg-opacity-90 inset-0 overflow-y-auto py-10 dark:bg-dark-900 dark:bg-opacity-90; +} + +.vfb-modal { + animation-duration: 0.30s; + animation-delay: 0; + animation-fill-mode: both; + animation-name: vfb-fade-in-up; + @apply max-w-modal bg-white mx-auto shadow-box-strong rounded-lg transition-transform transform -translate-y-1/4; +} + +.vfb-modal-header { + @apply px-7 py-5 bg-gray-100 flex items-center justify-between rounded-t-lg; +} + +.vfb-modal-title { + @apply text-xl font-semibold leading-none; +} + +.vfb-modal-subtitle { + @apply text-gray-500 text-0.5md; +} + +.vfb-modal-close { + @apply text-lg text-gray-500 transition-colors hover:text-gray-900; +} + +.vfb-modal-content { + @apply px-8 py-6 mt-4; + + form { + @apply -mt-4; + } +} + +.vfb-modal-footer { + +} + +.vfb-modal-buttons { + @apply flex items-end justify-between pl-7 pr-3 py-5 border-t border-gray-200; +} + +.vfb-modal-buttons-left { + & > div, & > button { + @apply mr-2; + } +} \ No newline at end of file diff --git a/scss/_model-preview.scss b/scss/_model-preview.scss new file mode 100644 index 0000000..79742f3 --- /dev/null +++ b/scss/_model-preview.scss @@ -0,0 +1,70 @@ +.vfb-model-preview-container { + @apply absolute px-0 inset-0 overflow-y-auto overflow-x-hidden transition transform duration-150 bg-gray-900 dark:bg-dark-1000; +} + +.vfb-model-preview-container-hidden { + @apply translate-x-full; + + &.vfb-model-preview-container-left { + @apply -translate-x-full; + } +} + +.vfb-model-preview-wrapper { + @apply flex flex-col items-start text-0.5md text-white text-0.5md; +} + +.vfb-model-preview-warning { + @apply bg-red-100 text-red-500 mt-6 mx-6 px-4 py-3 rounded leading-tight overflow-x-scroll; + max-width: calc(100% - 44px); +} + +.vfb-model-preview-warning-text { + @apply my-1; +} + +.vfb-model-preview-warning-ul { + @apply list-disc pl-5 leading-tight; +} + +.vfb-model-preview-warning-li { + @apply text-xs font-semibold -ml-1 pr-4 underline cursor-pointer; +} + +.vfb-model-preview-tabs-container { + @apply flex pt-6 px-6 font-semibold; +} + +.vfb-model-preview-tab { + @apply cursor-pointer; +} + +.vfb-model-preview-tab-active { + @apply border-b border-primary-500; +} + +.vfb-model-preview-tab-inactive { + @apply opacity-50; +} + +.vfb-model-preview-tab-data { + @apply mr-4; +} + +.vfb-model-preview-tab-request-data { +} + +.vfb-model-preview-close { + @apply absolute w-10 h-10 top-3.5 right-2 flex items-center justify-center cursor-pointer transition opacity-50 hover:opacity-100; +} + +.vfb-model-preview-close-icon { +} + +.vfb-model-preview-code-container { + @apply overflow-x-auto w-full max-w-full; +} + +.vfb-model-preview-code-reset { + @apply bg-white bg-opacity-10 px-4 py-1.5 rounded-lg transition hover:bg-opacity-20 ml-6 cursor-pointer; +} \ No newline at end of file diff --git a/scss/_panels.scss b/scss/_panels.scss new file mode 100644 index 0000000..d480dcf --- /dev/null +++ b/scss/_panels.scss @@ -0,0 +1,114 @@ +.vfb-panels-container { +} + +.vfb-panels-container-tabs { + .vfb-panels-tabs { + @apply flex items-center text-0.5md dark:text-white; + } + + .vfb-panels-tab { + @apply flex-1 text-center py-2.5 cursor-pointer border-b border-r border-r-gray-200 dark:border-r-dark-600; + + &.is-active { + @apply bg-white border-b-white dark:bg-dark-700 dark:border-b-dark-700; + } + + &.is-inactive { + @apply bg-gray-100 border-b-gray-200 dark:bg-dark-750 dark:border-b-dark-600; + } + + &.is-first { + } + + &.is-last { + @apply border-r-0; + } + } + + .vfb-panels-wrapper { + @apply absolute top-10.875 left-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden z-0; + } + + .vfb-panel { + @apply px-5 pb-6; + } +} + +.vfb-panels-container-icons { + @apply flex; + + .vfb-panels-tabs { + @apply flex items-center flex-col w-12 absolute top-0 bottom-0 left-0 border-r border-gray-100 bg-white dark:bg-dark-750 dark:border-dark-750 z-1; + } + + .vfb-panels-tab { + @apply relative vfb-tooltip-group flex h-12 w-12 items-center justify-center transition-colors text-lg border-x-3 border-transparent cursor-pointer; + + &.is-active { + @apply border-l-primary-500 text-primary-500; + } + + &.is-inactive { + @apply text-gray-400 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300; + } + + &.is-first { + } + + &.is-last { + } + } + + .vfb-panels-wrapper { + @apply flex absolute top-0 left-12 right-0 bottom-0 overflow-y-auto overflow-x-hidden z-0; + } + + .vfb-panel { + @apply px-5 pb-6 flex-1; + } +} + +.vfb-right-container { + .vfb-panels-container-icons { + .vfb-panels-tabs { + @apply left-auto right-0 border-r-0 border-l; + } + + .vfb-panels-tab { + &.is-active { + @apply border-l-transparent border-r-primary-500; + } + } + + .vfb-panels-wrapper { + @apply left-auto right-12; + } + } +} + +.vfb-panel-form { + @apply mt-px; +} + +.vfb-panel-theme { + @apply mt-px h-full; +} + +.vfb-panel-export { + @apply h-full; +} + +.vfb-panels-forms-theme-size-selector-container { + @apply bg-white sticky -top-0.5 -mx-5 px-5 py-3 z-2 border-t border-b border-gray-200 dark:bg-dark-800 dark:border-dark-600; + + &.vfb-panels-forms-theme-size-selector-container-no-themes { + @apply border-t-0 mt-0; + } + + &.vfb-util-props-group { + @apply mt-0; + } +} +.vfb-panels-popovers { + +} diff --git a/scss/_preview-element.scss b/scss/_preview-element.scss new file mode 100644 index 0000000..03ba4d0 --- /dev/null +++ b/scss/_preview-element.scss @@ -0,0 +1,306 @@ +.vfb-hidden-element-preview-text { + @apply w-full italic text-gray-400; +} + +.vfb-preview-element-container { + @apply relative pointer-events-auto focus:outline-none; + + &.vfb-preview-element-container-hover > .vfb-preview-element-overlay { + @apply border-primary-500; + } + + &.vfb-preview-element-container-hover > .vfb-preview-element-resizer-icon { + @apply inline-block; + } + + &.vfb-preview-element-container-hover > .vfb-preview-element-name-tag { + @apply inline-block; + } + + &.vfb-preview-element-container-hover > .vfb-preview-element-actions-container-unselected { + @apply flex; + } +} + +.vfb-preview-element-container-nested, +.vfb-preview-element-container-list { + transition: background 150ms; + padding: 18px 10px; + border-radius: 6px; + cursor: pointer; + background: var(--vf-container-bg); + z-index: 0; // could fix tooltip hover issue + --vf-container-bg-neutral: rgb(86 136 179 / 10%); + --vf-container-bg-dynamic-1: rgb(0 208 255 / 12%); + --vf-container-bg-dynamic-2: rgb(2 45 215 / 12%); + --vf-container-bg-dynamic-3: rgb(255 0 244 / 15%); + --vf-container-bg-dynamic-4: rgb(255 0 0 / 20%); + --vf-container-bg-dynamic-5: rgb(0 0 0 / 12%); +} + +.vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-neutral); +} + +.vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-1); +} + +.vfb-preview-element-container-list .vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-2); +} + +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-3); +} + +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-4); +} + +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list, +.vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested { + --vf-container-bg: var(--vf-container-bg-dynamic-5); +} + +.vfb-preview-element-container-no-visual-nesting { + padding: 18px 1px; + margin: 0 0; +} + +.vfb-preview-element-container-sm { + @apply form-text-sm; +} + +.vfb-preview-element-container-md { + @apply form-text; +} + +.vfb-preview-element-container-lg { + @apply form-text-lg; +} + +.vfb-preview-element-container-error { + @apply has-error; +} + +.vfb-preview-element-container-conditional { + @apply opacity-60; + + &.vfb-preview-element-container-nested-lvl1, + &.vfb-preview-element-container-nested-lvl2, + &.vfb-preview-element-container-nested-lvl3 { + @apply opacity-60; + } +} + +.vfb-preview-element-container-editing { + @apply opacity-80; + + .vfb-preview-element-overlay { + @apply border-dashed border; + } +} + +.vfb-preview-element-outer-wrapper { + @apply grid grid-cols-12 flex-1; +} + +.vfb-preview-element-inner-container { + @apply flex-1 grid grid-cols-12; +} + +.vfb-preview-element-inner-wrapper-before { + @apply col-span-12; +} + +.vfb-preview-element-inner-wrapper { +} + +.vfb-preview-element-inner-wrapper-after { + @apply col-span-12; +} + +.vfb-preview-element-overlay { + @apply absolute inset-0 border cursor-pointer; + + &.vfb-preview-element-overlay-resizing { + @apply border-primary-500-imp; + } + + &.vfb-preview-element-overlay-no-edit { + @apply cursor-default; + } +} + +.vfb-preview-element-overlay-being-dragged { + @apply border-dashed opacity-90 border; +} + +.vfb-preview-element-overlay-selected { + @apply border-primary-500 bg-primary-500 bg-opacity-10; +} + +.vfb-preview-element-overlay-unselected { + @apply border-transparent; +} + +.vfb-preview-element-resizer { + @apply absolute -right-1 w-2 top-0 bottom-0 cursor-ew-resize z-999; + + &:active { + @apply opacity-0; + } +} + +.vfb-preview-element-resizer-icon { + @apply absolute right-0 translate-x-1/2 w-2.25 h-2.25 bg-white border border-gray-500 rounded-sm shadow-mini top-1/2 transform -translate-y-1/2 pointer-events-none transition; +} + +.vfb-preview-element-resizer-icon-unselected { + @apply hidden; +} + +.vfb-preview-element-resizer-icon-resizing { + @apply w-auto h-4 text-sm px-0.5 whitespace-nowrap leading-none; +} + +.vfb-preview-element-name-tag { + @apply absolute left-0 top-0 transform -translate-y-full bg-primary-500 text-white px-2 py-px text-xs; +} + +.vfb-preview-element-name-tag-unselected { + @apply hidden; +} + +.vfb-preview-element-area-top { + @apply absolute left-0 right-0 bottom-1/2; +} + +.vfb-preview-element-area-top-sm { + @apply -top-1; +} + +.vfb-preview-element-area-top-md { + @apply -top-2; +} + +.vfb-preview-element-area-top-lg { + @apply -top-2; +} + +.vfb-preview-element-area-bottom { + @apply absolute left-0 right-0 top-1/2; +} + +.vfb-preview-element-area-bottom-sm { + @apply -bottom-1; +} + +.vfb-preview-element-area-bottom-md { + @apply -bottom-2; +} + +.vfb-preview-element-area-bottom-lg { + @apply -bottom-2; +} + +.vfb-preview-element-area-middle { + @apply col-span-12; +} + +.vfb-preview-element-middle-drag-label-container { + @apply absolute inset-0 z-1; +} + +.vfb-preview-element-drag-label-wrapper { + @apply bg-primary-500 absolute h-1 rounded-full pointer-events-none hidden; + + &.vfb-preview-element-drag-label-wrapper-visible { + @apply block; + } +} + +.vfb-preview-element-drag-label-wrapper-top { + @apply -left-2 -right-2 -top-0.5; +} + +.vfb-preview-element-container-drop-top { + & > .vfb-preview-element-area-top, & > div > .vfb-preview-element-drag-label-wrapper-top { + display: block !important; + } +} + +.vfb-preview-element-drag-label-wrapper-bottom { + @apply -left-2 -right-2 -bottom-0.5; +} + +.vfb-preview-element-container-drop-bottom { + & > .vfb-preview-element-area-bottom, & > div > .vfb-preview-element-drag-label-wrapper-bottom { + display: block !important; + } +} + +.vfb-preview-element-drag-label-wrapper-middle { + @apply top-1/2 left-0 right-0 transform -translate-y-1/2; +} + +.vfb-preview-element-container-drop-middle { + & > div > div > .vfb-preview-element-area-middle, & > div > div > div > div > .vfb-preview-element-drag-label-wrapper-middle { + display: block !important; + } +} + +.vfb-preview-element-drag-label { + @apply bg-primary-500 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 px-2 pt-0.5 pb-0.75 rounded-full leading-none text-0.5sm text-white; +} + +.vfb-preview-element-actions-container { + @apply absolute right-0 top-0 transform -translate-y-full text-white; +} + +.vfb-preview-element-actions-container-selected { + @apply flex; +} + +.vfb-preview-element-actions-container-unselected { + @apply hidden; +} + +.vfb-preview-element-clone { + @apply w-4 h-4 flex items-center justify-center bg-primary-500 text-xxs cursor-pointer transition-colors hover:bg-primary-600 vfb-tooltip-group relative; +} + +.vfb-preview-element-clone-disabled { + @apply bg-opacity-60 hover:bg-opacity-60 cursor-not-allowed; +} + +.vfb-preview-element-remove { + @apply w-4 h-4 flex items-center justify-center bg-primary-500 text-xs ml-0.5 cursor-pointer transition-colors hover:bg-primary-600 vfb-tooltip-group relative; +} + +.vfb-preview-element-remove-disabled { + @apply bg-opacity-60 hover:bg-opacity-60 cursor-not-allowed; +} + +.vfb-preview-nested-element-wrapper { + @apply relative z-1 pointer-events-none; +} + +.vfb-preview-nested-list-element-wrapper { + @apply relative z-1 pointer-events-none grid grid-cols-12 col-span-12 w-full; +} + +.vfb-preview-wrapper-preview { + .vfb-preview-nested-element-wrapper { + @apply z-auto; + } + + .vfb-preview-nested-list-element-wrapper { + @apply z-auto; + } +} \ No newline at end of file diff --git a/scss/_preview.scss b/scss/_preview.scss new file mode 100644 index 0000000..b4bb237 --- /dev/null +++ b/scss/_preview.scss @@ -0,0 +1,226 @@ +.vfb-preview-container { + @apply w-full mx-auto flex flex-col items-center transition-all my-8 duration-300; + + &.vfb-hidden { + @apply hidden; + } +} + +.vfb-preview-wrapper { + @apply bg-white rounded-lg shadow-box-circle mx-auto w-full relative transition-all p-10; +} + +.vfb-preview-drag-wrapper { + @apply bg-primary-500 absolute h-1 rounded-full pointer-events-none -left-2 -right-2 -top-0.5 mt-8; +} + +.vfb-preview-drag-label { + @apply bg-primary-500 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 px-2 pt-0.5 pb-0.75 rounded-full leading-none text-0.5sm text-white; +} + +.vfb-preview-empty-container { + @apply rounded-xl text-center py-8 leading-relaxed transition duration-300 bg-primary-500; +} + +.vfb-preview-empty-container-active { + @apply bg-opacity-10; +} + +.vfb-preview-empty-container-inactive { + @apply bg-opacity-0; +} + +.vfb-preview-empty-icon-container { + color: var(--vf-primary); + @apply mx-auto mb-6 text-6xl; +} + +.vfb-preview-empty-icon { +} + +.vfb-preview-empty-title { + @apply font-semibold text-[18px]; +} + +.vfb-preview-empty-description { + @apply text-gray-500; +} + +.vfb-preview-form-with-tabs { + @apply -mt-2; +} + +.vfb-preview-container-default { + .col-span-1 { grid-column: span 1 / span 1 !important; } + .col-span-2 { grid-column: span 2 / span 2 !important; } + .col-span-3 { grid-column: span 3 / span 3 !important; } + .col-span-4 { grid-column: span 4 / span 4 !important; } + .col-span-5 { grid-column: span 5 / span 5 !important; } + .col-span-6 { grid-column: span 6 / span 6 !important; } + .col-span-7 { grid-column: span 7 / span 7 !important; } + .col-span-8 { grid-column: span 8 / span 8 !important; } + .col-span-9 { grid-column: span 9 / span 9 !important; } + .col-span-10 { grid-column: span 10 / span 10 !important; } + .col-span-11 { grid-column: span 11 / span 11 !important; } + .col-span-12 { grid-column: span 12 / span 12 !important; } + + // Vertical + .form-text-type label.text-type\:form-pt-input-border { padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; } + label.form-pr-gutter { padding-right: var(--vf-gutter) !important; } + label.pb-0 { padding-bottom: 0!important; } + + // Horizontal + label.form-pb-gutter\/3 { padding-bottom: calc(var(--vf-gutter) / 3) !important; } + .form-text-type label.form-pt-0, :not(.form-text-type) label.form-pt-0 { padding-top: 0 !important; } + label.form-pr-0 { padding-right: 0 !important; } + + // SM element size + .form-text-type label.text-type\:form-pt-input-border-sm { padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; } + label.form-pr-gutter-sm { padding-right: var(--vf-gutter-sm) !important; } + label.form-pb-gutter\/3-sm { padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; } + + // LG element size + .form-text-type label.text-type\:form-pt-input-border-lg { padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; } + label.form-pr-gutter-lg { padding-right: var(--vf-gutter-lg) !important; } + label.form-pb-gutter\/3-lg { padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; } +} + +.vfb-preview-container-tablet { + .col-span-1 { grid-column: span 1 / span 1 !important; } + .col-span-2 { grid-column: span 2 / span 2 !important; } + .col-span-3 { grid-column: span 3 / span 3 !important; } + .col-span-4 { grid-column: span 4 / span 4 !important; } + .col-span-5 { grid-column: span 5 / span 5 !important; } + .col-span-6 { grid-column: span 6 / span 6 !important; } + .col-span-7 { grid-column: span 7 / span 7 !important; } + .col-span-8 { grid-column: span 8 / span 8 !important; } + .col-span-9 { grid-column: span 9 / span 9 !important; } + .col-span-10 { grid-column: span 10 / span 10 !important; } + .col-span-11 { grid-column: span 11 / span 11 !important; } + .col-span-12 { grid-column: span 12 / span 12 !important; } + + .#{$vfb-tablet-breakpoint}\:col-span-1 { grid-column: span 1 / span 1 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-2 { grid-column: span 2 / span 2 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-3 { grid-column: span 3 / span 3 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-4 { grid-column: span 4 / span 4 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-5 { grid-column: span 5 / span 5 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-6 { grid-column: span 6 / span 6 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-7 { grid-column: span 7 / span 7 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-8 { grid-column: span 8 / span 8 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-9 { grid-column: span 9 / span 9 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-10 { grid-column: span 10 / span 10 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-11 { grid-column: span 11 / span 11 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-12 { grid-column: span 12 / span 12 !important; } + + // Vertical + .form-text-type label.text-type\:form-pt-input-border { padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; } + label.form-pr-gutter { padding-right: var(--vf-gutter) !important; } + label.pb-0 { padding-bottom: 0!important; } + + // Horizontal + label.form-pb-gutter\/3 { padding-bottom: calc(var(--vf-gutter) / 3) !important; } + .form-text-type label.form-pt-0, :not(.form-text-type) label.form-pt-0 { padding-top: 0 !important; } + label.form-pr-0 { padding-right: 0 !important; } + + // SM element size + .form-text-type label.text-type\:form-pt-input-border-sm { padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; } + label.form-pr-gutter-sm { padding-right: var(--vf-gutter-sm) !important; } + label.form-pb-gutter\/3-sm { padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; } + + // LG element size + .form-text-type label.text-type\:form-pt-input-border-lg { padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; } + label.form-pr-gutter-lg { padding-right: var(--vf-gutter-lg) !important; } + label.form-pb-gutter\/3-lg { padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; } + + + // [SM] Vertical + .form-text-type label.#{$vfb-tablet-breakpoint}\:text-type\:form-pt-input-border { padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pr-gutter { padding-right: var(--vf-gutter) !important; } + label.#{$vfb-tablet-breakpoint}\:pb-0 { padding-bottom: 0!important; } + + // [SM] Horizontal + label.#{$vfb-tablet-breakpoint}\:form-pb-gutter\/3 { padding-bottom: calc(var(--vf-gutter) / 3) !important; } + .form-text-type label.#{$vfb-tablet-breakpoint}\:form-pt-0, :not(.form-text-type) label.#{$vfb-tablet-breakpoint}\:form-pt-0 { padding-top: 0 !important; } + label.#{$vfb-tablet-breakpoint}\:form-pr-0 { padding-right: 0 !important; } + + // [SM] SM element size + .form-text-type label.#{$vfb-tablet-breakpoint}\:text-type\:form-pt-input-border-sm { padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pr-gutter-sm { padding-right: var(--vf-gutter-sm) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pb-gutter\/3-sm { padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; } + + // [SM] LG element size + .form-text-type label.#{$vfb-tablet-breakpoint}\:text-type\:form-pt-input-border-lg { padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pr-gutter-lg { padding-right: var(--vf-gutter-lg) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pb-gutter\/3-lg { padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; } +} + +.vfb-preview-container-desktop { + .#{$vfb-tablet-breakpoint}\:col-span-1 { grid-column: span 1 / span 1 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-2 { grid-column: span 2 / span 2 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-3 { grid-column: span 3 / span 3 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-4 { grid-column: span 4 / span 4 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-5 { grid-column: span 5 / span 5 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-6 { grid-column: span 6 / span 6 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-7 { grid-column: span 7 / span 7 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-8 { grid-column: span 8 / span 8 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-9 { grid-column: span 9 / span 9 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-10 { grid-column: span 10 / span 10 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-11 { grid-column: span 11 / span 11 !important; } + .#{$vfb-tablet-breakpoint}\:col-span-12 { grid-column: span 12 / span 12 !important; } + + .#{$vfb-desktop-breakpoint}\:col-span-1 { grid-column: span 1 / span 1 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-2 { grid-column: span 2 / span 2 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-3 { grid-column: span 3 / span 3 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-4 { grid-column: span 4 / span 4 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-5 { grid-column: span 5 / span 5 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-6 { grid-column: span 6 / span 6 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-7 { grid-column: span 7 / span 7 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-8 { grid-column: span 8 / span 8 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-9 { grid-column: span 9 / span 9 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-10 { grid-column: span 10 / span 10 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-11 { grid-column: span 11 / span 11 !important; } + .#{$vfb-desktop-breakpoint}\:col-span-12 { grid-column: span 12 / span 12 !important; } + + + // [SM] Vertical + .form-text-type label.#{$vfb-tablet-breakpoint}\:text-type\:form-pt-input-border { padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pr-gutter { padding-right: var(--vf-gutter) !important; } + label.#{$vfb-tablet-breakpoint}\:pb-0 { padding-bottom: 0!important; } + + // [SM] Horizontal + label.#{$vfb-tablet-breakpoint}\:form-pb-gutter\/3 { padding-bottom: calc(var(--vf-gutter) / 3) !important; } + .form-text-type label.#{$vfb-tablet-breakpoint}\:form-pt-0, :not(.form-text-type) label.#{$vfb-tablet-breakpoint}\:form-pt-0 { padding-top: 0 !important; } + label.#{$vfb-tablet-breakpoint}\:form-pr-0 { padding-right: 0 !important; } + + // [SM] SM element size + .form-text-type label.#{$vfb-tablet-breakpoint}\:text-type\:form-pt-input-border-sm { padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pr-gutter-sm { padding-right: var(--vf-gutter-sm) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pb-gutter\/3-sm { padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; } + + // [SM] LG element size + .form-text-type label.#{$vfb-tablet-breakpoint}\:text-type\:form-pt-input-border-lg { padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pr-gutter-lg { padding-right: var(--vf-gutter-lg) !important; } + label.#{$vfb-tablet-breakpoint}\:form-pb-gutter\/3-lg { padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; } + + + // [LG] Vertical + .form-text-type label.#{$vfb-desktop-breakpoint}\:text-type\:form-pt-input-border { padding-top: calc(var(--vf-py-input) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-desktop-breakpoint}\:form-pr-gutter { padding-right: var(--vf-gutter) !important; } + label.#{$vfb-desktop-breakpoint}\:pb-0 { padding-bottom: 0!important; } + + // [LG] Horizontal + label.#{$vfb-desktop-breakpoint}\:form-pb-gutter\/3 { padding-bottom: calc(var(--vf-gutter) / 3) !important; } + .form-text-type label.#{$vfb-desktop-breakpoint}\:form-pt-0, :not(.form-text-type) label.#{$vfb-desktop-breakpoint}\:form-pt-0 { padding-top: 0 !important; } + label.#{$vfb-desktop-breakpoint}\:form-pr-0 { padding-right: 0 !important; } + + // [LG] SM element size + .form-text-type label.#{$vfb-desktop-breakpoint}\:text-type\:form-pt-input-border-sm { padding-top: calc(var(--vf-py-input-sm) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-desktop-breakpoint}\:form-pr-gutter-sm { padding-right: var(--vf-gutter-sm) !important; } + label.#{$vfb-desktop-breakpoint}\:form-pb-gutter\/3-sm { padding-bottom: calc(var(--vf-gutter-sm) / 3) !important; } + + // [LG] LG element size + .form-text-type label.#{$vfb-desktop-breakpoint}\:text-type\:form-pt-input-border-lg { padding-top: calc(var(--vf-py-input-lg) + var(--vf-border-width-input-t)) !important; } + label.#{$vfb-desktop-breakpoint}\:form-pr-gutter-lg { padding-right: var(--vf-gutter-lg) !important; } + label.#{$vfb-desktop-breakpoint}\:form-pb-gutter\/3-lg { padding-bottom: calc(var(--vf-gutter-lg) / 3) !important; } + +} \ No newline at end of file diff --git a/scss/_toaster.scss b/scss/_toaster.scss new file mode 100644 index 0000000..e456775 --- /dev/null +++ b/scss/_toaster.scss @@ -0,0 +1,54 @@ +.vfb-toaster-container { + @apply flex items-center justify-center sticky top-full pb-4 mx-16 transition duration-300 ease-toaster transform translate-y-full z-999; + + &.vfb-toaster-container-visible { + @apply translate-y-0; + } +} + +.vfb-toaster { + @apply text-white py-3 px-5 bg-black bg-opacity-80 overflow-hidden flex justify-between items-center rounded whitespace-nowrap opacity-100; + + .vfb-toaster-error { + @apply bg-red-500; + box-shadow: 2px 2px 1px 0px rgba(126, 58, 58, 0.5); + } + + .vfb-toaster-info { + @apply bg-blue-400; + box-shadow: 2px 2px 1px 0px rgba(96, 165, 250, 0.5); + } + + .vfb-toaster-success { + @apply bg-primary-500; + box-shadow: 2px 2px 1px 0px rgba(31, 150, 118, 0.5); + } +} + +.vfb-toaster-wrapper { + @apply flex items-center; +} + +.vfb-toaster-icon { + @apply mr-3; +} + +.vfb-toaster-close-wrapper { + @apply ml-4; +} + +.vfb-toaster-close { + @apply uppercase cursor-pointer text-white opacity-70 font-semibold transition hover:opacity-90; +} + +.vfb-toast-enter-active, +.vfb-toast-leave-active { +} + +.vfb-toast-enter, +.vfb-toast-leave-to { +} + +.vfb-toast-leave, +.vfb-toast-enter-to { +} \ No newline at end of file diff --git a/scss/_tools.scss b/scss/_tools.scss new file mode 100644 index 0000000..28ee629 --- /dev/null +++ b/scss/_tools.scss @@ -0,0 +1,124 @@ +.vfb-bottom-left-tools-container { + @apply absolute bottom-4 -right-4 transform translate-x-full flex flex-col; +} + +.vfb-bottom-right-tools-container { + @apply absolute bottom-4 -left-4 transform -translate-x-full flex flex-col; +} + +.vfb-top-left-tools-container { + @apply absolute top-4 -right-4 transform translate-x-full flex flex-col; +} + +.vfb-top-right-tools-container { + @apply absolute top-4 -left-4 transform -translate-x-full flex flex-col; +} + +.vfb-tool { + @apply relative flex flex-col bg-white shadow-lg rounded border border-gray-300 dark:bg-dark-700 dark:border-dark-700 dark:text-white; +} + +.vfb-tool-device { + @apply mb-2; +} + +.vfb-tool-save { + @apply mt-2; +} + +.vfb-tool-toggle-left { +} + +.vfb-tool-toggle-right { +} + +.vfb-tool-undos { + @apply mb-2; +} + +.vfb-tool-language-selector .vfb-tool-item { + @apply text-sm; +} + +.vfb-tool-view { + @apply mb-2; +} + +.vfb-tool-clear { + @apply mt-2; +} + +.vfb-tool-dark-mode { +} + +.vfb-tool-item { + @apply w-8 h-8 flex items-center justify-center text-xs relative cursor-pointer transition-colors; +} + +.vfb-tool-item-single { + @apply rounded; +} + +.vfb-tool-item-first { + @apply rounded-t; +} + +.vfb-tool-item-last { + @apply rounded-b; +} + +.vfb-tool-item-active { + @apply bg-gray-150 dark:bg-dark-550; +} + +.vfb-tool-item-active-primary { + @apply bg-primary-500 text-white; +} + +.vfb-tool-item-disabled { + @apply text-gray-300 dark:text-dark-550 cursor-not-allowed; +} + +.vfb-tool-item-passive { + cursor: default !important; +} + +.vfb-tool-item-hoverable { + @apply hover:bg-gray-100 dark:hover:bg-dark-600; +} + +.vfb-tool-dropdown { + animation-duration: 0.30s; + animation-delay: 0; + animation-fill-mode: both; + animation-name: vfb-fade-in-down; + @apply absolute top-8 mt-1 left-0 right-0 flex flex-col bg-white shadow-lg rounded border border-gray-300 dark:bg-dark-700 dark:border-dark-700 dark:text-white; +} + +.vfb-tool-dropdown-item { + @apply relative flex items-center justify-center w-full h-8 cursor-pointer text-sm rounded hover:bg-gray-100 dark:hover:bg-dark-600; +} + +.vfb-tool-dropdown-item-active { + @apply bg-gray-100 dark:bg-dark-600 hover:bg-gray-100 dark:hover:bg-dark-600; +} + +.vfb-tool-tooltip { + @apply absolute top-1/2 transform -translate-y-1/2 bg-black text-white bg-opacity-80 px-1.5 rounded text-sm hidden whitespace-nowrap; +} + +.vfb-tool-item:hover .vfb-tool-tooltip { + @apply inline-block; +} + +.vfb-tool-dropdown-item:hover .vfb-tool-tooltip { + @apply inline-block; +} + +.vfb-tool-tooltip-right { + @apply translate-x-full -right-1.5; +} + +.vfb-tool-tooltip-left { + @apply -translate-x-full -left-1.5; +} \ No newline at end of file diff --git a/scss/_transitions.scss b/scss/_transitions.scss new file mode 100644 index 0000000..5dd106f --- /dev/null +++ b/scss/_transitions.scss @@ -0,0 +1,9 @@ +.vfb-fade-in-enter-active { + transition-property: opacity; + transition-timing-function: ease-in-out; + transition-duration: 500ms; +} +.vfb-fade-in-enter-from, +.vfb-fade-in-leave-to { + opacity: 0; +} \ No newline at end of file diff --git a/scss/_tree.scss b/scss/_tree.scss new file mode 100644 index 0000000..351d543 --- /dev/null +++ b/scss/_tree.scss @@ -0,0 +1,238 @@ +.vfb-tree-container { + @apply absolute inset-0; +} + +.vfb-tree-top { + @apply pt-4 px-5 pb-2 w-full flex; +} + +.vfb-panels-container-tabs { + .vfb-tree-top { + @apply pt-3.5; + } + + .vfb-tree-wrapper { + @apply top-14; + } +} + +.vfb-tree-search-container { + @apply relative flex-1; +} + +.vfb-tree-search-input { + @apply bg-gray-100 pl-8 pr-3 py-1.25 rounded-lg placeholder-gray-400 placeholder-opacity-100 w-full dark:bg-dark-700 dark:placeholder-dark-500 dark:text-white; +} + +.vfb-tree-search-icon { + @apply absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-dark-400; +} + +.vfb-tree-search-remove-icon-container { + @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer dark:text-dark-400; +} + +.vfb-tree-search-remove-icon { + +} + +.vfb-tree-toggle-all-container { + @apply flex-grow-0 flex-shrink-0 flex items-center justify-center ml-2 transition text-gray-400 hover:text-gray-500 text-0.5md vfb-tooltip-group relative cursor-pointer dark:text-dark-500 hover:dark:text-dark-400; +} + +.vfb-tree-wrapper { + @apply absolute pt-1 top-14 bottom-0 left-0 right-0 overflow-y-auto px-5; +} + +.vfb-tree-item-container { + @apply py-px; +} + +.vfb-tree-item-container-child { + @apply relative; + + &:before { + content: ""; + @apply h-px bg-gray-300 absolute -left-2 w-2.5 top-3.75 dark:bg-dark-600; + } +} + +.vfb-tree-item-wrapper { + @apply relative flex items-center text-gray-800 dark:text-white -ml-0.5 -mr-0.5 px-0.5 py-0.5 border border-primary-500 z-1 bg-white bg-opacity-0 border-opacity-0 rounded-lg shadow-none dark:bg-dark-800 dark:bg-opacity-0; +} + +.vfb-tree-item-wrapper-enabled { + @apply cursor-pointer hover:bg-opacity-100 hover:shadow-box-strong-small dark:hover:shadow-box-strong-small-dark; +} + +.vfb-tree-item-wrapper-disabled { + @apply cursor-default; +} + +.vfb-tree-item-wrapper-selected { + @apply text-primary-500 dark:text-primary-500; +} + +.vfb-tree-item-area-top { + @apply absolute top-0 left-0 right-0 h-4 bg-green-500 bg-opacity-0 z-1; + + &.vfb-tree-item-area-top-first-child { + @apply -top-3.75 h-8; + + .vfb-tree-item-drag-line-top { + @apply top-3.25 + } + } + + &.vfb-tree-item-area-top-dragging-page { + @apply bottom-1/2 h-auto; + } + + &.vfb-tree-item-area-top-adding-page { + @apply top-0 bottom-0 h-auto; + + .vfb-tree-item-drag-line-top { + @apply top-8 mt-0.5 left-5 right-5; + } + } +} + +.vfb-tree-item-drag-line-top { + @apply bg-primary-500 h-1 rounded-full absolute -top-0.5 left-0 right-0 pointer-events-none hidden; +} + +.vfb-tree-item-area-bottom { + @apply absolute bottom-0 left-0 right-0 h-4 bg-blue-500 bg-opacity-0 z-1; + + &.vfb-tree-item-area-bottom-with-children { + @apply h-2 bg-purple-500 bg-opacity-0 z-1; + } + + &.vfb-tree-item-area-bottom-dragging-page { + @apply top-1/2 h-auto; + } +} + +.vfb-tree-item-drag-line-bottom { + @apply bg-primary-500 h-1 rounded-full absolute -bottom-0.5 left-0 right-0 pointer-events-none hidden; +} + +.vfb-tree-item-area-inside { + @apply absolute bottom-1.5 left-4 right-0 h-2.5 bg-red-500 bg-opacity-0 z-1; + + &.vfb-tree-item-area-inside-empty { + @apply z-2; + } +} + +.vfb-tree-item-drag-line-inside { + @apply bg-primary-500 h-1 rounded-full absolute -bottom-2 left-0 right-0 pointer-events-none hidden; +} + +.vfb-tree-item-drag-line-visible { + @apply block; +} + +.vfb-tree-item-icon-container { + @apply relative bg-gray-100 text-gray-500 rounded flex items-center justify-center text-xs w-6 h-6 flex-shrink-0 flex-grow-0 mr-2 dark:bg-dark-600 dark:text-dark-300; + + &:before { + content: ""; + @apply bg-white rounded w-6 h-6 absolute -z-1 dark:bg-dark-600; + } +} + +.vfb-tree-item-icon-container-list, +.vfb-tree-item-icon-container-repeat { + @apply bg-repeater-500 bg-opacity-12 text-repeater-500 dark:bg-repeater-500 dark:text-repeater-500 dark:bg-opacity-30; +} + +.vfb-tree-item-wrapper-selected { + .vfb-tree-item-icon-container, + .vfb-tree-item-icon-container-repeat { + @apply text-primary-500 bg-primary-500 bg-opacity-20; + } + + .vfb-tree-item-text-secondary { + @apply text-primary-500 text-opacity-70; + } +} + +.vfb-tree-item-wrapper-being-moved { + @apply opacity-60 border-dashed border-gray-400 border; +} + +.vfb-tree-item-icon { + @apply max-w-5 max-h-5; +} + +.vfb-tree-item-icon-repeat { + @apply absolute -right-0.75 -bottom-0.75 text-0.5sm bg-white shadow-small rounded-full p-0.5 dark:bg-dark-600; +} + +.vfb-tree-item-text { + @apply text-sm leading-3 overflow-hidden whitespace-nowrap text-ellipsis h-6.5 justify-center inline-flex flex-col pointer-events-none; +} + +.vfb-tree-item-text-secondary { + @apply text-gray-500 text-xs italic dark:text-dark-500; +} + +.vfb-tree-item-actions { + @apply text-0.5sm absolute py-1 px-1.5 right-1.5 top-1/2 transform -translate-y-1/2 hidden leading-none rounded-full bg-white bg-opacity-80 dark:bg-dark-800 dark:bg-opacity-80; + + .vfb-tooltip { + @apply -bottom-1; + } +} + +.vfb-tree-item-wrapper:hover { + .vfb-tree-item-actions { + @apply flex; + } +} + +.vfb-tree-item-action { + @apply transition-colors text-gray-400 hover:text-gray-500 ml-1.5 vfb-tooltip-group dark:text-dark-500 dark:hover:text-dark-400; + + .vfb-tooltip { + @apply -bottom-1; + } + + &:first-of-type { + @apply ml-0; + } +} + +.vfb-tree-item-children-toggle-wrapper { + @apply absolute -left-4 top-1.5 -ml-px mt-px p-1 cursor-pointer; +} + +.vfb-tree-item-children-toggle { + @apply text-xxs border border-gray-400 w-2.25 h-2.25 flex items-center justify-center bg-white relative rounded-sm dark:bg-dark-500 dark:border-gray-500; + + &:after { + content: ""; + @apply h-px absolute top-0.5 mt-px left-px right-px bg-gray-600 z-1 dark:bg-dark-1000; + } +} + +.vfb-tree-item-children-toggle-collapsed { + &:before { + content: ""; + @apply w-px absolute left-0.5 ml-px top-px bottom-px bg-gray-600 z-1 dark:bg-dark-1000; + } +} + +.vfb-tree-item-children { + @apply ml-4 relative; + + &:before { + content: ""; + @apply absolute -left-2.25 -top-3 bottom-4.5 w-px bg-gray-300 dark:bg-dark-600; + } +} + +.vfb-tree-no-results { + @apply text-gray-500 mt-1 ml-2; +} \ No newline at end of file diff --git a/scss/_utils.scss b/scss/_utils.scss new file mode 100644 index 0000000..738b0f2 --- /dev/null +++ b/scss/_utils.scss @@ -0,0 +1,397 @@ +.vfb-btn-primary { + &, &:before, &:after, &:root { + --vf-bg-btn: theme('colors.primary.500'); + --vf-border-color-btn: theme('colors.primary.500'); + } +} + +.vfb-relative { + @apply relative; +} + +.vfb-break-words { + word-break: break-word; +} + +.vfb-learn-more { + @apply ml-2 leading-none text-0.5xs text-gray-400 border-b border-dotted border-gray-400 dark:text-dark-400 dark:border-dark-400; +} + +.vfb-field-note { + @apply -mt-1 text-right text-xs text-gray-400 dark:text-dark-400; +} + +.vfb-info-container { + @apply relative; + + &:hover .vfb-info-tooltip { + @apply block; + } +} + +.vfb-info-icon { + @apply text-sm ml-0.5; +} + +.vfb-info-tooltip { + @apply absolute top-6 right-1/2 transform translate-x-1/2 rounded px-2 py-1 bg-black bg-opacity-90 text-xs whitespace-nowrap text-center hidden; +} + +.vfb-icon { + @apply inline-block text-inherit h-1em overflow-visible align-icon; +} + +.vfb-hidden { + @apply hidden; +} + +.vfb-util-grid-cols-12 { + @apply grid-cols-12; +} + +.vfb-util-col-span-12 { + @apply col-span-12; +} + +.vfb-util-col-span-6 { + @apply col-span-6; +} + +.vfb-util-col-span-4 { + @apply col-span-4; +} + +.vfb-util-col-span-3 { + @apply col-span-3; +} + +.vfb-util-col-span-2 { + @apply col-span-2; +} + +.vfb-util-col-span-1 { + @apply col-span-1; +} + +.vfb-util-tabs-tiny { + @apply text-xs leading-tight; +} + +.vfb-util-tabs-small { + @apply text-sm leading-tight; +} + +.vfb-util-tabs-outline-gray-selected { + @apply bg-gray-100 text-black border-gray-300 dark:border-dark-600 dark:bg-dark-600 dark:bg-opacity-100 dark:text-white; +} + +.vfb-util-tabs-outline-gray-unselected { + @apply bg-white text-gray-700 border-gray-300 dark:bg-dark-800 dark:text-white dark:border-dark-600; +} + +.vfb-util-tabs-outline-selected { + @apply bg-primary-500 bg-opacity-20 text-primary-600 border-primary-500 dark:border-dark-600 dark:bg-dark-600 dark:bg-opacity-100 dark:text-white; +} + +.vfb-util-tabs-outline-unselected { + @apply bg-white text-primary-500 border-primary-500 dark:bg-dark-800 dark:text-white dark:border-dark-600; +} + +.vfb-util-number-input { + @apply form-pl-input-sm form-py-input-sm; +} + +.vfb-util-number-addon { + @apply text-gray-500 dark:text-dark-400; +} + +.vfb-util-colorpicker-input { + @apply relative; +} + +.vfb-util-colorpicker-addon { + @apply absolute top-1.5 -right-0.5; +} + +.vfb-util-props-group { + @apply my-4; +} + +.vfb-util-props-list-el-input { + @apply border-b border-gray-200 dark:border-dark-600; +} + +.vfb-util-props-list-el-input-default { + @apply focused:border-primary-500 focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-input-success { + @apply focused:border-primary-500 focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-select { + @apply border-b border-gray-200 dark:border-dark-600 -bottom-px relative; +} + +.vfb-util-props-list-el-select-default { + @apply focused:border-primary-500 dark:bg-dark-800 dark:text-white focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-select-success { + @apply focused:border-primary-500 dark:bg-dark-800 dark:text-white focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-select-container { + @apply border-b border-gray-200 dark:border-dark-600 relative; +} + +.vfb-util-props-list-el-select-container-default { + @apply focused:border-primary-500 focused:dark:border-dark-400; +} + +.vfb-util-props-list-el-select-container-success { + @apply focused:border-primary-500 focused:dark:border-dark-400; +} + +.vfb-util-props-list-label { + @apply mb-4 mt-3.5; +} + +.vfb-util-props-list-add { + @apply absolute top-0 right-0; +} + +.vfb-util-props-list-layout { + @apply relative; +} + +.vfb-util-props-list-subtitle { + @apply uppercase text-gray-500 font-semibold mb-2 ml-2.5 mt-1 dark:text-dark-400; +} + +.vfb-util-props-subtitle-no-m { + @apply uppercase text-gray-500 font-semibold dark:text-dark-400; +} + +.vfb-util-props-subtitle { + @apply uppercase text-gray-500 font-semibold mb-2 dark:text-dark-400; +} + +.vfb-util-props-separator-top { + @apply border-t border-gray-150 px-5 -mx-5 pt-4 mt-2 dark:border-dark-600; +} + +.vfb-util-props-separator { + @apply border-b border-gray-150 px-5 -mx-5 pb-4 mb-2 dark:border-dark-600; +} + +.vfb-util-props-multiline-label { + @apply items-start form-pt-input-border; +} + +.vfb-util-props-toggle-wrapper { + @apply items-center justify-end form-h-input-sm; +} + +.vfb-util-props-horizontal-label { + @apply items-center leading-tighter; +} + +.vfb-util-props-tags { + @apply whitespace-normal break-all; +} + +.vfb-util-props-horizontal-label-sm { + @apply text-type:form-pt-input-border-sm; +} + +.vfb-util-props-horizontal-label-md { + @apply text-type:form-pt-input-border; +} + +.vfb-util-props-horizontal-label-lg { + @apply text-type:form-pt-input-border-lg; +} + +.vfb-util-props-not-horizontal-label-sm { + @apply form-pb-gutter/3-sm; +} + +.vfb-util-props-not-horizontal-label-md { + @apply form-pb-gutter/3; +} + +.vfb-util-props-not-horizontal-label-lg { + @apply form-pb-gutter/3-lg; +} + +.vfb-util-columns-number { + @apply font-normal mb-2; +} + +.vfb-util-columns-total { + @apply text-gray-400 mb-2; +} + +.vfb-util-props-link { + @apply text-primary-500 border-b border-dotted border-primary-500; +} + +.vfb-util-props-description { + @apply text-right text-gray-500 dark:text-dark-400 text-sm italic form-h-input-sm pb-px flex items-center; +} + +.vfb-util-props-accepted-formats-container { + @apply text-sm -mt-3; +} + +.vfb-util-props-accepted-return-formats-container { + @apply text-sm -mt-1; +} + +.vfb-util-props-error { + @apply text-red-500 text-xs; +} + +.vfb-util-color-preview { + @apply w-5 h-5 rounded pointer-events-none; +} + +.vfb-util-prop-label-with-link { + @apply flex items-center; +} + +.vfb-util-prop-element-with-link { + @apply flex items-center justify-between w-full; +} + +.vfb-util-prop-language-container { + @apply bg-gray-100 p-2 rounded-lg; +} + +.vfb-util-prop-language-value { + @apply bg-white; +} + +.vfb-util-assistive-text { + @apply absolute -m-px w-px h-px overflow-hidden; + clip: rect(0 0 0 0); +} + +.vfb-util-element-type { + & + div { + @apply -mt-2; + } +} + +.vfb-tooltip-group:hover { + .vfb-tooltip { + @apply inline-block; + } +} + +.vfb-tooltip { + @apply absolute z-999 transform bg-black text-white bg-opacity-80 px-1.5 py-0.5 rounded text-sm leading-tighter hidden whitespace-nowrap text-center; + + &.vfb-tooltip-smaller { + @apply px-1 text-0.5sm; + } +} + +.vfb-tooltip-top { + @apply -top-0.5 left-1/2 -translate-y-full -translate-x-1/2; + + &.vfb-tooltip-closer { + @apply top-1; + } +} + +.vfb-tooltip-bottom { + @apply -bottom-0.5 left-1/2 translate-y-full -translate-x-1/2; + + &.vfb-tooltip-further { + @apply -bottom-1; + } +} + +.vfb-tooltip-left { + @apply top-1/2 -left-0.5 -translate-y-1/2 -translate-x-full; + + &.vfb-tooltip-closer { + @apply left-1; + } + + &.vfb-tooltip-further { + @apply -left-1.5; + } +} + +.vfb-tooltip-right { + @apply top-1/2 -right-0.5 -translate-y-1/2 translate-x-full; + + &.vfb-tooltip-closer { + @apply right-1; + } +} + +.vfb-tooltip-top-left { + @apply -top-0.5 left-0 -translate-y-full translate-x-0; +} + +.vfb-tooltip-top-right { + @apply -top-0.5 right-0 left-auto -translate-y-full translate-x-0; +} + +.vfb-tooltip-bottom-left { + @apply -bottom-0.5 left-0 translate-y-full translate-x-0; + + &.vfb-tooltip-closer { + @apply bottom-1; + } +} + +.vfb-tooltip-bottom-right { + @apply -bottom-0.5 right-0 left-auto translate-y-full translate-x-0; + + &.vfb-tooltip-closer { + @apply bottom-1; + } +} + +.vfb-notification-container { + @apply absolute left-16 right-16 mx-1 bottom-4; +} + +.vfb-notification { + @apply py-3 px-5 bg-white; +} + +.vfb-text-button { + @apply px-0 rounded-none bg-transparent text-black border-transparent hover:scale-100 block; +} + +.vfb-btn-primary, +.vfb-btn-secondary, +.vfb-btn-transparent { + @apply inline-block form-border-width-btn form-shadow-btn form-p-btn form-radius-btn form-text cursor-pointer focus:form-ring; +} + +.vfb-btn-primary { + @apply form-bg-btn form-color-btn form-border-color-btn; +} + +.vfb-btn-secondary { + @apply form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary; +} + +.vfb-btn-transparent { + @apply form-color-btn-secondary border-transparent hover:text-gray-900; +} + +.vfb-btn-sm { + @apply form-p-btn-sm form-text-sm form-radius-btn-sm; +} + +.vfb-btn-xs { + @apply px-2 py-0.5 text-0.5sm rounded inline-block; +} \ No newline at end of file diff --git a/scss/_vars.scss b/scss/_vars.scss new file mode 100644 index 0000000..bfbe94d --- /dev/null +++ b/scss/_vars.scss @@ -0,0 +1,2 @@ +$vfb-tablet-breakpoint: 'sm' !default; +$vfb-desktop-breakpoint: 'lg' !default; \ No newline at end of file diff --git a/scss/index.scss b/scss/index.scss new file mode 100644 index 0000000..68f5171 --- /dev/null +++ b/scss/index.scss @@ -0,0 +1,30 @@ +// Misc +@import 'vars'; +@import 'code'; +@import 'global'; +@import 'tools'; +@import 'transitions'; +@import 'colorpicker'; +@import 'utils'; +@import 'animations'; +@import 'toaster'; +@import 'modal'; +@import 'conditions'; +@import 'fields'; + +// Panels +@import 'config-panel'; +@import 'elements'; +@import 'tree'; +@import 'model-preview'; + +// Main +@import 'export'; +@import 'panels'; +@import 'preview'; +@import 'builder'; + +// Preview +@import 'form-tabs'; +@import 'form-steps'; +@import 'preview-element'; \ No newline at end of file diff --git a/tailwind.js b/tailwind.js new file mode 100644 index 0000000..9721bc8 --- /dev/null +++ b/tailwind.js @@ -0,0 +1,217 @@ +const plugin = require('tailwindcss/plugin') + +const builder = plugin((context) => { + const { theme, addUtilities, addVariant, e } = context + const prefix = context.addUserCss === undefined ? context.prefix : s => s + + addUtilities({ + '.align-icon': { + verticalAlign: '-0.125em' + }, + '.border-t-0-imp': { + borderTop: '0 !important' + }, + '.cursor-auto-imp': { + cursor: 'auto' + }, + '.border-primary-500-imp': { + borderColor: theme('colors.primary.500') + }, + '.has-error': { + }, + }) + + const groups = theme('groups') || [] + + groups.forEach((group) => { + addVariant(`group-${group}-hover`, ({ modifySelectors, separator }) => { + modifySelectors(({ className }) => { + return `${prefix(`.group-${group}`)}:hover .${e(`group-${group}-hover${separator}${className}`)}` + }) + }) + }) +}, { + theme: { + groups: ['container'], + extend: { + transitionTimingFunction: { + 'toaster': 'cubic-bezier(0, 1, 0.5, 1)', + }, + boxShadow: { + 'mini': '1px 1px 0px 0px rgba(0,0,0,0.15)', + 'small': '0px 0px 2px 0px rgba(0,0,0,0.30)', + 'box': '0px 0px 24px 0 rgba(0,0,0,0.04)', + 'box-strong': '0px 0px 10px 0 rgba(0,0,0,0.10)', + 'box-strong-small': '0px 0px 6px 0 rgba(0,0,0,0.10)', + 'box-strong-dark': '0px 0px 10px 0 rgba(0,0,0,0.25)', + 'box-strong-small-dark': '0px 0px 6px 0 rgba(0,0,0,0.25)', + 'box-circle': '0px 0px 20px 0 rgba(0,0,0,0.08)', + 'condition': '1px 1px 2px 1px rgb(0 0 0 / 15%)', + }, + borderWidth: { + 3: '3px', + }, + lineHeight: { + tighter: '1.125', + }, + minHeight: { + 98: '24.5rem', + }, + minWidth: { + 6: '1.5rem', + 120: '30rem', + }, + maxWidth: { + '5': '1.25rem', + '100vw-194.5': 'calc(100vw - 48.625rem)', + 'modal': '51rem', + }, + maxHeight: { + '5': '1.25rem', + }, + width: { + '1.75': '0.4375rem', + '2.25': '0.5625rem', + 76: '19rem', + 84: '21rem', + 85: '21.25rem', + 88: '22rem', + }, + height: { + '1.75': '0.4375rem', + '2.25': '0.5625rem', + '3.75': '0.9375rem', + '6.5': '1.625rem', + '7.5': '1.875rem', + '1em': '1em', + }, + spacing: { + '-85': '-21.25rem', + '-76': '-19rem', + '-1.5': '-0.375rem', + '-0.25': '-0.0625rem', + '-0.75': '-0.1875rem', + '1.25': '0.3125rem', + '1.5': '0.375rem', + '1.75': '0.4375rem', + '2.25': '0.5625rem', + '2.5': '0.625rem', + '3.25': '0.8125rem', + '3.5': '0.875rem', + '3.75': '0.9375rem', + '4.25': '1.0625rem', + '4.5': '1.125rem', + '4.75': '1.1875rem', + '10.5': '2.625rem', + '10.875': '2.71875rem', + '11.5': '2.875rem', + '12.5': '3.125rem', + '13': '3.25rem', + '14': '3.5rem', + '14.5': '3.625rem', + '15': '3.75rem', + '24.75': '6.1875rem', + '26': '6.5rem', + '26.25': '6.5625rem', + '26.375': '6.59375rem', + '28': '7rem', + '88': '22rem', + '90': '22.5rem', + '92': '23rem', + '97': '24.25rem', + '99': '24.75rem', + '100': '25rem', + '1/12': 'calc(1 / 12 * 100%)', + 'some key': { + 1.5: '0.375rem', + }, + }, + fontSize: { + 'xxs': '0.625rem', + '0.5xs': '0.6875rem', + '0.5sm': '0.8125rem', + '0.5md': '0.9375rem', + '2lg': '1.1875rem', + 'inherit': 'inherit', + }, + zIndex: { + 60: '60', + 70: '70', + 80: '80', + 90: '90', + 100: '100', + }, + opacity: { + '12': '.12', + }, + colors: { + primary: { + 100: '#C6FFF6', + 200: '#8CFFED', + 300: '#61DAB9', + 400: '#39CDA4', + 500: '#17c495', + 600: '#13AF7D', + 700: '#0E8877', + 800: '#0C6B5E', + 900: '#063730', + }, + gray: { + 50: '#fafbfc', + 75: '#F5F8FB', + 100: '#f1f5f9', + 150: '#ECF0F4', + 200: '#e2e8f0', + 300: '#cbd5e1', + 400: '#94a3b8', + 500: '#64748b', + 600: '#475569', + 700: '#334155', + 800: '#1e293b', + 850: '#17202B', + 900: '#0f172a', + }, + dark: { + 50: '#EFEFEF', + 100: '#DCDCDC', + 200: '#BDBDBD', + 300: '#A0A0A0', + 400: '#848484', + 500: '#737373', + 550: '#555555', + 600: '#393939', + 700: '#323232', + 750: '#292929', + 800: '#262626', + 900: '#191919', + 1000: '#121212', + }, + repeater: { + 500: '#00D0FF' + }, + code: { + base: '#f8f8f2', + comment: '#6272a4', + purple: '#7c3aed', + 'light-purple': '#bd93f9', + violet: '#2852d4', + 'light-violet': '#99b2ff', + blue: '#21d8ff', + teal: '#46ffe2', + green: '#50fa7b', + yellow: '#f1fa8c', + orange: '#ffb86c', + red: '#BE3030', + } + } + } + }, + variants: { + extend: { + borderColor: ['group-container-hover'], + } + }, +}) + +module.exports = builder + \ No newline at end of file diff --git a/vite.js b/vite.js new file mode 100644 index 0000000..9e94743 --- /dev/null +++ b/vite.js @@ -0,0 +1,13 @@ +module.exports = function vitePluginVueform() { + return { + name: 'vueform-builder', + config: () => ({ + optimizeDeps: { + include: [ + 'json5', + 'prismjs', + ] + } + }) + } +} \ No newline at end of file