@brilo/base-blocks 0.1.39 → 0.1.40

package/build/blocks/form/form-field/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const FIELD_TYPE_VALUES: readonly ['text', 'textarea', 'select', 'hidden'];
+export declare const FIELD_TYPE_VALUES: readonly ['text', 'textarea', 'select', 'hidden', 'file'];
 export declare const FIELD_TYPES: readonly [{
     readonly value: "text";
     readonly label: import("@wordpress/i18n").TransformedText<"Text">;
@@ -11,6 +11,9 @@ export declare const FIELD_TYPES: readonly [{
 }, {
     readonly value: "hidden";
     readonly label: import("@wordpress/i18n").TransformedText<"Hidden">;
+}, {
+    readonly value: "file";
+    readonly label: import("@wordpress/i18n").TransformedText<"Soubor">;
 }];
 export declare const FIELD_TEXT_TYPE_VALUES: readonly ['text', 'tel', 'email', 'number', 'date', 'time'];
 export declare const FIELD_TEXT_TYPES: ({
@@ -45,4 +48,33 @@ export declare const FIELD_SELECT_MODES: readonly [{
     readonly value: "email";
     readonly label: import("@wordpress/i18n").TransformedText<"Výběr s routováním e-mailu">;
 }];
+export declare const FILE_EXTENSION_PRESETS: readonly [{
+    readonly value: 'jpg,jpeg,png,webp';
+    readonly label: import("@wordpress/i18n").TransformedText<"Obrázky">;
+}, {
+    readonly value: 'pdf';
+    readonly label: import("@wordpress/i18n").TransformedText<"PDF">;
+}, {
+    readonly value: 'doc,docx';
+    readonly label: import("@wordpress/i18n").TransformedText<"Word">;
+}, {
+    readonly value: 'xls,xlsx';
+    readonly label: import("@wordpress/i18n").TransformedText<"Excel">;
+}];
+export declare const FILE_BUTTON_VARIANT_VALUES: readonly ['primary', 'secondary', 'neutral', 'ghost'];
+export declare const FILE_BUTTON_VARIANTS: readonly [{
+    readonly value: "primary";
+    readonly label: import("@wordpress/i18n").TransformedText<"Primary">;
+}, {
+    readonly value: "secondary";
+    readonly label: import("@wordpress/i18n").TransformedText<"Secondary">;
+}, {
+    readonly value: "neutral";
+    readonly label: import("@wordpress/i18n").TransformedText<"Neutral">;
+}, {
+    readonly value: "ghost";
+    readonly label: import("@wordpress/i18n").TransformedText<"Ghost">;
+}];
+export declare const FIELD_FILE_BUTTON_VARIANT_DEFAULT = "secondary";
+export declare const FIELD_FILE_BUTTON_LABEL_DEFAULT: import("@wordpress/i18n").TransformedText<"Nahrát soubor">;
 //# sourceMappingURL=constants.d.ts.map

package/build/blocks/form/form-field/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,YAAI,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAA;AAElF,eAAO,MAAM,WAAW;aACrB,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;EAC3B,CAAA;AAEV,eAAO,MAAM,sBAAsB,YAAI,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAU,CAAA;AACjG,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;IAO5B,CAAA;AAED,eAAO,MAAM,mBAAmB;aAAI,GAAG,EAAE,CAAC;aAAE,GAAG,EAAE,EAAE;CAAU,CAAA;AAE7D,eAAO,MAAM,qBAAqB,IAAI,CAAA;AAEtC,eAAO,MAAM,wBAAwB,YAAI,SAAS,EAAE,OAAO,CAAU,CAAA;AAErE,eAAO,MAAM,kBAAkB;aAC5B,KAAK;aAA+B,KAAK;;aACzC,KAAK;aAA+B,KAAK;EAClC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,YAAI,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAE1F,eAAO,MAAM,WAAW;aACrB,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;EAC3B,CAAA;AAEV,eAAO,MAAM,sBAAsB,YAAI,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAU,CAAA;AACjG,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;IAO5B,CAAA;AAED,eAAO,MAAM,mBAAmB;aAAI,GAAG,EAAE,CAAC;aAAE,GAAG,EAAE,EAAE;CAAU,CAAA;AAE7D,eAAO,MAAM,qBAAqB,IAAI,CAAA;AAEtC,eAAO,MAAM,wBAAwB,YAAI,SAAS,EAAE,OAAO,CAAU,CAAA;AAErE,eAAO,MAAM,kBAAkB;aAC5B,KAAK;aAA+B,KAAK;;aACzC,KAAK;aAA+B,KAAK;EAClC,CAAA;AAEV,eAAO,MAAM,sBAAsB;aAChC,KAAK,EAAE,mBAAmB;aAAE,KAAK;;aACjC,KAAK,EAAE,KAAK;aAAE,KAAK;;aACnB,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,UAAU;aAAE,KAAK;EACjB,CAAA;AAEV,eAAO,MAAM,0BAA0B,YAAI,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,CAAU,CAAA;AAE/F,eAAO,MAAM,oBAAoB;aAC9B,KAAK;aAAiC,KAAK;;aAC3C,KAAK;aAAiC,KAAK;;aAC3C,KAAK;aAAiC,KAAK;;aAC3C,KAAK;aAAiC,KAAK;EACpC,CAAA;AAEV,eAAO,MAAM,iCAAiC,cAAc,CAAA;AAE5D,eAAO,MAAM,+BAA+B,4DAAsC,CAAA"}

package/build/blocks/form/form-field/constants.js

@@ -1,10 +1,11 @@
 import { __ } from '@wordpress/i18n';
-export const FIELD_TYPE_VALUES = ['text', 'textarea', 'select', 'hidden'];
+export const FIELD_TYPE_VALUES = ['text', 'textarea', 'select', 'hidden', 'file'];
 export const FIELD_TYPES = [
     { value: FIELD_TYPE_VALUES[0], label: __('Text', 'brilo-blocks') },
     { value: FIELD_TYPE_VALUES[1], label: __('Textarea', 'brilo-blocks') },
     { value: FIELD_TYPE_VALUES[2], label: __('Select', 'brilo-blocks') },
     { value: FIELD_TYPE_VALUES[3], label: __('Hidden', 'brilo-blocks') },
+    { value: FIELD_TYPE_VALUES[4], label: __('Soubor', 'brilo-blocks') },
 ];
 export const FIELD_TEXT_TYPE_VALUES = ['text', 'tel', 'email', 'number', 'date', 'time'];
 export const FIELD_TEXT_TYPES = [
@@ -22,3 +23,18 @@ export const FIELD_SELECT_MODES = [
     { value: FIELD_SELECT_MODE_VALUES[0], label: __('Klasický', 'brilo-blocks') },
     { value: FIELD_SELECT_MODE_VALUES[1], label: __('Výběr s routováním e-mailu', 'brilo-blocks') },
 ];
+export const FILE_EXTENSION_PRESETS = [
+    { value: 'jpg,jpeg,png,webp', label: __('Obrázky', 'brilo-blocks') },
+    { value: 'pdf', label: __('PDF', 'brilo-blocks') },
+    { value: 'doc,docx', label: __('Word', 'brilo-blocks') },
+    { value: 'xls,xlsx', label: __('Excel', 'brilo-blocks') },
+];
+export const FILE_BUTTON_VARIANT_VALUES = ['primary', 'secondary', 'neutral', 'ghost'];
+export const FILE_BUTTON_VARIANTS = [
+    { value: FILE_BUTTON_VARIANT_VALUES[0], label: __('Primary', 'brilo-blocks') },
+    { value: FILE_BUTTON_VARIANT_VALUES[1], label: __('Secondary', 'brilo-blocks') },
+    { value: FILE_BUTTON_VARIANT_VALUES[2], label: __('Neutral', 'brilo-blocks') },
+    { value: FILE_BUTTON_VARIANT_VALUES[3], label: __('Ghost', 'brilo-blocks') },
+];
+export const FIELD_FILE_BUTTON_VARIANT_DEFAULT = 'secondary';
+export const FIELD_FILE_BUTTON_LABEL_DEFAULT = __('Nahrát soubor', 'brilo-blocks');

package/build/blocks/form/form-field/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/edit.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,mBAAmB,EAAE,gBAAgB,EAAwD,MAAM,SAAS,CAAA;AAepH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,oCAIzD;IACD,UAAU,EAAE,mBAAmB,CAAA;IAC/B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;CACzD,iCAiNF"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/edit.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACL,mBAAmB,EAEnB,gBAAgB,EAIjB,MAAM,SAAS,CAAA;AAehB,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,oCAIzD;IACD,UAAU,EAAE,mBAAmB,CAAA;IAC/B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;CACzD,iCAqQF"}

package/build/blocks/form/form-field/edit.js

@@ -1,10 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { Button, Modal, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl } from '@wordpress/components';
+import { CheckboxControl, Button, Modal, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useState } from 'react';
-import { FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_SELECT_MODES, FIELD_TEXT_TYPES, FIELD_TYPES } from './constants';
+import { FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_SELECT_MODES, FIELD_TEXT_TYPES, FIELD_TYPES, FILE_BUTTON_VARIANTS, FILE_EXTENSION_PRESETS, } from './constants';
 import { normalizeOptions, serializeOptions } from './normalizeOptions';
 import { SelectOptionsRepeater } from './SelectOptionsRepeater';
 const { min: MIN_COLUMNS, max: MAX_COLUMNS } = FIELD_COLUMNS_RANGE;
@@ -20,7 +20,7 @@ function sanitizeHtmlName(raw) {
 }
 export function createFormFieldEdit(_options) {
     return function Edit({ attributes, setAttributes, }) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const currentColumns = Math.max(MIN_COLUMNS, Math.min(MAX_COLUMNS, attributes.columns || MIN_COLUMNS));
         const blockProps = useBlockProps({
             className: clsx('i-form-field', `--type-${attributes.type}`, `--cols-${currentColumns}`, attributes.required && '--required'),
@@ -39,6 +39,12 @@ export function createFormFieldEdit(_options) {
         ];
         return (_jsxs(_Fragment, { children: [_jsx(InspectorControls, { children: _jsxs(PanelBody, { title: __('Pole formuláře', 'brilo-blocks'), children: [_jsx(SelectControl, { label: __('Typ inputu', 'brilo-blocks'), value: attributes.type, options: FIELD_TYPES.map((t) => ({ label: t.label, value: t.value })), onChange: (type) => setAttributes({ type: type }) }), attributes.type === 'text' && (_jsxs(_Fragment, { children: [_jsx(SelectControl, { label: __('Typ textovho inputu', 'brilo-blocks'), value: attributes.textType, options: FIELD_TEXT_TYPES.map((t) => ({ label: t.label, value: t.value })), onChange: (textType) => setAttributes(textType === 'email'
                                             ? { textType: textType }
-                                            : { textType: textType, isReplyTo: false }) }), attributes.textType === 'email' && (_jsx(ToggleControl, { label: __('Použít jako Reply-To pole', 'brilo-blocks'), help: __('Hodnota tohoto pole se použije jako Reply-To adresa notifikačního e-mailu.', 'brilo-blocks'), checked: (_a = attributes.isReplyTo) !== null && _a !== void 0 ? _a : false, onChange: (isReplyTo) => setAttributes({ isReplyTo }) }))] })), attributes.type !== 'hidden' && (_jsxs(_Fragment, { children: [_jsx(TextControl, { label: __('Popisek', 'brilo-blocks'), value: attributes.label, onChange: (label) => setAttributes({ label }) }), _jsx(ToggleControl, { label: __('Povinné', 'brilo-blocks'), checked: attributes.required, onChange: (required) => setAttributes({ required }) }), _jsx(TextControl, { label: __('Název html atributu', 'brilo-blocks'), value: attributes.name, help: __('Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Např. city-born-to. Mezery a diakritika se automaticky odstraní.', 'brilo-blocks'), onChange: (name) => setAttributes({ name: sanitizeHtmlName(name) }) }), _jsx(TextControl, { label: __('Placeholder', 'brilo-blocks'), value: attributes.placeholder, onChange: (placeholder) => setAttributes({ placeholder }) }), _jsx(ToggleControl, { label: __('Odesílat do GTM (dataLayer)', 'brilo-blocks'), help: __('Po úspěšném odeslání formuláře se do dataLayer pushne klíč podle názvu html atributu s vyplněnou/vybranou hodnotou tohoto pole.', 'brilo-blocks'), checked: (_b = attributes.gtmEnabled) !== null && _b !== void 0 ? _b : false, onChange: (gtmEnabled) => setAttributes({ gtmEnabled }) })] })), attributes.type === 'select' && (_jsxs(_Fragment, { children: [_jsx(SelectControl, { label: __('Režim selectu', 'brilo-blocks'), value: (_c = attributes.selectMode) !== null && _c !== void 0 ? _c : 'classic', options: FIELD_SELECT_MODES.map((m) => ({ label: m.label, value: m.value })), onChange: (selectMode) => setAttributes({ selectMode: selectMode }) }), _jsx("div", { className: "i-form-field__options-trigger", children: _jsx(Button, { variant: "secondary", onClick: () => setIsOptionsModalOpen(true), children: sprintf(__('Upravit možnosti (%d)', 'brilo-blocks'), optionRows.length) }) }), isOptionsModalOpen && (_jsx(Modal, { title: __('Možnosti pole', 'brilo-blocks'), onRequestClose: () => setIsOptionsModalOpen(false), size: "large", children: _jsx(SelectOptionsRepeater, { rows: optionRows, onChange: updateOptionRows, showEmail: ((_d = attributes.selectMode) !== null && _d !== void 0 ? _d : 'classic') === 'email', onClose: () => setIsOptionsModalOpen(false) }) })), _jsx(SelectControl, { label: __('Výchozí hodnota', 'brilo-blocks'), value: (_e = attributes.defaultValue) !== null && _e !== void 0 ? _e : '', options: selectOptions, onChange: (defaultValue) => setAttributes({ defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '' }) })] })), attributes.type === 'hidden' && (_jsxs(_Fragment, { children: [_jsx(TextControl, { label: __('Hodnota', 'brilo-blocks'), value: (_f = attributes.value) !== null && _f !== void 0 ? _f : '', onChange: (value) => setAttributes({ value }), help: __('Hodnota, která bude odeslána s formulářem.', 'brilo-blocks') }), _jsx(TextControl, { label: __('Název html atributu', 'brilo-blocks'), value: attributes.name, help: __('Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Mezery a diakritika se automaticky odstraní.', 'brilo-blocks'), onChange: (name) => setAttributes({ name: sanitizeHtmlName(name) }) })] })), attributes.type !== 'hidden' && (_jsx(RangeControl, { label: __('Počet sloupců', 'brilo-blocks'), value: currentColumns, min: MIN_COLUMNS, max: MAX_COLUMNS, onChange: (columns) => setAttributes({ columns: Math.max(MIN_COLUMNS, Math.min(MAX_COLUMNS, columns !== null && columns !== void 0 ? columns : FIELD_COLUMNS_DEFAULT)) }) }))] }) }), _jsx("div", { ...blockProps, children: _jsx("div", { className: "i-form-field__wrapper", children: attributes.type === 'hidden' ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: __('Skryté pole', 'brilo-blocks') }), _jsxs("div", { children: [__('Hodnota', 'brilo-blocks'), ": ", (_g = attributes.value) !== null && _g !== void 0 ? _g : ''] }), _jsxs("div", { children: [__('Název', 'brilo-blocks'), ": ", (_h = attributes.name) !== null && _h !== void 0 ? _h : ''] })] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: attributes.label || __('Pole', 'brilo-blocks') }), _jsx("div", { children: attributes.type }), _jsxs("div", { className: "i-form-field__columns-control", children: [_jsx(Button, { size: "small", variant: "secondary", onClick: () => setAttributes({ columns: Math.max(MIN_COLUMNS, currentColumns - 1) }), disabled: currentColumns <= MIN_COLUMNS, "aria-label": __('Snížit počet sloupců', 'brilo-blocks'), children: "-" }), _jsx("div", { className: "i-form-field__columns-value", children: `${currentColumns}/${MAX_COLUMNS}` }), _jsx(Button, { size: "small", variant: "secondary", onClick: () => setAttributes({ columns: Math.min(MAX_COLUMNS, currentColumns + 1) }), disabled: currentColumns >= MAX_COLUMNS, "aria-label": __('Zvýšit počet sloupců', 'brilo-blocks'), children: "+" })] })] })) }) })] }));
+                                            : { textType: textType, isReplyTo: false }) }), attributes.textType === 'email' && (_jsx(ToggleControl, { label: __('Použít jako Reply-To pole', 'brilo-blocks'), help: __('Hodnota tohoto pole se použije jako Reply-To adresa notifikačního e-mailu.', 'brilo-blocks'), checked: (_a = attributes.isReplyTo) !== null && _a !== void 0 ? _a : false, onChange: (isReplyTo) => setAttributes({ isReplyTo }) }))] })), attributes.type !== 'hidden' && (_jsxs(_Fragment, { children: [_jsx(TextControl, { label: __('Popisek', 'brilo-blocks'), value: attributes.label, onChange: (label) => setAttributes({ label }) }), _jsx(ToggleControl, { label: __('Povinné', 'brilo-blocks'), checked: attributes.required, onChange: (required) => setAttributes({ required }) }), _jsx(TextControl, { label: __('Název html atributu', 'brilo-blocks'), value: attributes.name, help: __('Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Např. city-born-to. Mezery a diakritika se automaticky odstraní.', 'brilo-blocks'), onChange: (name) => setAttributes({ name: sanitizeHtmlName(name) }) }), attributes.type !== 'file' && (_jsx(TextControl, { label: __('Placeholder', 'brilo-blocks'), value: attributes.placeholder, onChange: (placeholder) => setAttributes({ placeholder }) })), attributes.type !== 'file' && (_jsx(ToggleControl, { label: __('Odesílat do GTM (dataLayer)', 'brilo-blocks'), help: __('Po úspěšném odeslání formuláře se do dataLayer pushne klíč podle názvu html atributu s vyplněnou/vybranou hodnotou tohoto pole.', 'brilo-blocks'), checked: (_b = attributes.gtmEnabled) !== null && _b !== void 0 ? _b : false, onChange: (gtmEnabled) => setAttributes({ gtmEnabled }) }))] })), attributes.type === 'file' && (_jsxs(_Fragment, { children: [_jsx(ToggleControl, { label: __('Povolit více souborů', 'brilo-blocks'), checked: (_c = attributes.multiple) !== null && _c !== void 0 ? _c : false, onChange: (multiple) => setAttributes({ multiple }) }), _jsx("p", { className: "i-form-field__file-extensions-label", children: __('Povolené přípony', 'brilo-blocks') }), FILE_EXTENSION_PRESETS.map((preset) => { var _a; return (_jsx(CheckboxControl, { label: preset.label, checked: ((_a = attributes.extensionsPreset) !== null && _a !== void 0 ? _a : []).includes(preset.value), onChange: (checked) => {
+                                            var _a;
+                                            const current = (_a = attributes.extensionsPreset) !== null && _a !== void 0 ? _a : [];
+                                            setAttributes({
+                                                extensionsPreset: checked ? [...current, preset.value] : current.filter((value) => value !== preset.value),
+                                            });
+                                        } }, preset.value)); }), _jsx(TextControl, { label: __('Vlastní přípony', 'brilo-blocks'), help: __('Oddělené čárkou, bez tečky. Např. heic,zip', 'brilo-blocks'), value: (_d = attributes.extensionsCustom) !== null && _d !== void 0 ? _d : '', onChange: (extensionsCustom) => setAttributes({ extensionsCustom }) }), _jsx(SelectControl, { label: __('Vzhled tlačítka', 'brilo-blocks'), value: (_e = attributes.buttonVariant) !== null && _e !== void 0 ? _e : 'secondary', options: FILE_BUTTON_VARIANTS.map((v) => ({ label: v.label, value: v.value })), onChange: (buttonVariant) => setAttributes({ buttonVariant: buttonVariant }) }), _jsx(ToggleControl, { label: __('Outline styl tlačítka', 'brilo-blocks'), checked: (_f = attributes.buttonOutline) !== null && _f !== void 0 ? _f : true, onChange: (buttonOutline) => setAttributes({ buttonOutline }) }), _jsx(TextControl, { label: __('Text tlačítka', 'brilo-blocks'), value: (_g = attributes.buttonLabel) !== null && _g !== void 0 ? _g : '', onChange: (buttonLabel) => setAttributes({ buttonLabel }) })] })), attributes.type === 'select' && (_jsxs(_Fragment, { children: [_jsx(SelectControl, { label: __('Režim selectu', 'brilo-blocks'), value: (_h = attributes.selectMode) !== null && _h !== void 0 ? _h : 'classic', options: FIELD_SELECT_MODES.map((m) => ({ label: m.label, value: m.value })), onChange: (selectMode) => setAttributes({ selectMode: selectMode }) }), _jsx("div", { className: "i-form-field__options-trigger", children: _jsx(Button, { variant: "secondary", onClick: () => setIsOptionsModalOpen(true), children: sprintf(__('Upravit možnosti (%d)', 'brilo-blocks'), optionRows.length) }) }), isOptionsModalOpen && (_jsx(Modal, { title: __('Možnosti pole', 'brilo-blocks'), onRequestClose: () => setIsOptionsModalOpen(false), size: "large", children: _jsx(SelectOptionsRepeater, { rows: optionRows, onChange: updateOptionRows, showEmail: ((_j = attributes.selectMode) !== null && _j !== void 0 ? _j : 'classic') === 'email', onClose: () => setIsOptionsModalOpen(false) }) })), _jsx(SelectControl, { label: __('Výchozí hodnota', 'brilo-blocks'), value: (_k = attributes.defaultValue) !== null && _k !== void 0 ? _k : '', options: selectOptions, onChange: (defaultValue) => setAttributes({ defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '' }) })] })), attributes.type === 'hidden' && (_jsxs(_Fragment, { children: [_jsx(TextControl, { label: __('Hodnota', 'brilo-blocks'), value: (_l = attributes.value) !== null && _l !== void 0 ? _l : '', onChange: (value) => setAttributes({ value }), help: __('Hodnota, která bude odeslána s formulářem.', 'brilo-blocks') }), _jsx(TextControl, { label: __('Název html atributu', 'brilo-blocks'), value: attributes.name, help: __('Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Mezery a diakritika se automaticky odstraní.', 'brilo-blocks'), onChange: (name) => setAttributes({ name: sanitizeHtmlName(name) }) })] })), attributes.type !== 'hidden' && (_jsx(RangeControl, { label: __('Počet sloupců', 'brilo-blocks'), value: currentColumns, min: MIN_COLUMNS, max: MAX_COLUMNS, onChange: (columns) => setAttributes({ columns: Math.max(MIN_COLUMNS, Math.min(MAX_COLUMNS, columns !== null && columns !== void 0 ? columns : FIELD_COLUMNS_DEFAULT)) }) }))] }) }), _jsx("div", { ...blockProps, children: _jsx("div", { className: "i-form-field__wrapper", children: attributes.type === 'hidden' ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: __('Skryté pole', 'brilo-blocks') }), _jsxs("div", { children: [__('Hodnota', 'brilo-blocks'), ": ", (_m = attributes.value) !== null && _m !== void 0 ? _m : ''] }), _jsxs("div", { children: [__('Název', 'brilo-blocks'), ": ", (_o = attributes.name) !== null && _o !== void 0 ? _o : ''] })] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: attributes.label || __('Pole', 'brilo-blocks') }), _jsx("div", { children: attributes.type }), _jsxs("div", { className: "i-form-field__columns-control", children: [_jsx(Button, { size: "small", variant: "secondary", onClick: () => setAttributes({ columns: Math.max(MIN_COLUMNS, currentColumns - 1) }), disabled: currentColumns <= MIN_COLUMNS, "aria-label": __('Snížit počet sloupců', 'brilo-blocks'), children: "-" }), _jsx("div", { className: "i-form-field__columns-value", children: `${currentColumns}/${MAX_COLUMNS}` }), _jsx(Button, { size: "small", variant: "secondary", onClick: () => setAttributes({ columns: Math.min(MAX_COLUMNS, currentColumns + 1) }), disabled: currentColumns >= MAX_COLUMNS, "aria-label": __('Zvýšit počet sloupců', 'brilo-blocks'), children: "+" })] })] })) }) })] }));
     };
 }

package/build/blocks/form/form-field/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAIzD,OAAO,KAAK,EAAC,mBAAmB,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAA;AAElE,YAAY,EAAC,mBAAmB,EAAE,gBAAgB,EAAC,CAAA;AAEnD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CA2BvG"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAIzD,OAAO,KAAK,EAAC,mBAAmB,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAA;AAElE,YAAY,EAAC,mBAAmB,EAAE,gBAAgB,EAAC,CAAA;AAEnD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CAiCvG"}

package/build/blocks/form/form-field/factory.js

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { FIELD_COLUMNS_DEFAULT } from './constants';
+import { FIELD_COLUMNS_DEFAULT, FIELD_FILE_BUTTON_LABEL_DEFAULT, FIELD_FILE_BUTTON_VARIANT_DEFAULT } from './constants';
 import { createFormFieldEdit } from './edit';
 export function createFormFieldBlock(options) {
     var _a, _b, _c;
@@ -25,6 +25,12 @@ export function createFormFieldBlock(options) {
             value: { type: 'string', default: '' },
             isReplyTo: { type: 'boolean', default: false },
             gtmEnabled: { type: 'boolean', default: false },
+            multiple: { type: 'boolean', default: false },
+            extensionsPreset: { type: 'array', default: [] },
+            extensionsCustom: { type: 'string', default: '' },
+            buttonVariant: { type: 'string', default: FIELD_FILE_BUTTON_VARIANT_DEFAULT },
+            buttonOutline: { type: 'boolean', default: true },
+            buttonLabel: { type: 'string', default: FIELD_FILE_BUTTON_LABEL_DEFAULT },
         },
         edit: createFormFieldEdit(options),
         save: () => null,

package/build/blocks/form/form-field/types.d.ts

@@ -1,8 +1,9 @@
-import { FIELD_SELECT_MODE_VALUES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES } from './constants';
+import { FIELD_SELECT_MODE_VALUES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES, FILE_BUTTON_VARIANT_VALUES } from './constants';
 import type { BriloBlockType } from '../../../types';
 export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number];
 export type FormFieldTextType = (typeof FIELD_TEXT_TYPE_VALUES)[number];
 export type FormFieldSelectMode = (typeof FIELD_SELECT_MODE_VALUES)[number];
+export type FormFieldFileButtonVariant = (typeof FILE_BUTTON_VARIANT_VALUES)[number];
 export type FormFieldOption = string | {
     label?: string;
     value?: string;
@@ -22,6 +23,12 @@ export interface FormFieldAttributes extends Record<string, unknown> {
     value: string;
     isReplyTo: boolean;
     gtmEnabled: boolean;
+    multiple: boolean;
+    extensionsPreset: string[];
+    extensionsCustom: string;
+    buttonVariant: FormFieldFileButtonVariant;
+    buttonOutline: boolean;
+    buttonLabel: string;
 }
 export interface FormFieldOptions extends BriloBlockType {
 }

package/build/blocks/form/form-field/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAoB,sBAAsB,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAA;AACjH,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AACvE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3E,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAEvF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,UAAU,EAAE,mBAAmB,CAAA;IAC/B,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EAExB,sBAAsB,EACtB,iBAAiB,EACjB,0BAA0B,EAC3B,MAAM,aAAa,CAAA;AACpB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AACvE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC3E,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpF,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAEvF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,UAAU,EAAE,mBAAmB,CAAA;IAC/B,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,EAAE,CAAA;IAC1B,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,0BAA0B,CAAA;IACzC,aAAa,EAAE,OAAO,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",

package/src/blocks/form/form-field/constants.ts

@@ -1,12 +1,13 @@
 import {__} from '@wordpress/i18n'
 
-export const FIELD_TYPE_VALUES = ['text', 'textarea', 'select', 'hidden'] as const
+export const FIELD_TYPE_VALUES = ['text', 'textarea', 'select', 'hidden', 'file'] as const
 
 export const FIELD_TYPES = [
   {value: FIELD_TYPE_VALUES[0], label: __('Text', 'brilo-blocks')},
   {value: FIELD_TYPE_VALUES[1], label: __('Textarea', 'brilo-blocks')},
   {value: FIELD_TYPE_VALUES[2], label: __('Select', 'brilo-blocks')},
   {value: FIELD_TYPE_VALUES[3], label: __('Hidden', 'brilo-blocks')},
+  {value: FIELD_TYPE_VALUES[4], label: __('Soubor', 'brilo-blocks')},
 ] as const
 
 export const FIELD_TEXT_TYPE_VALUES = ['text', 'tel', 'email', 'number', 'date', 'time'] as const
@@ -29,3 +30,23 @@ export const FIELD_SELECT_MODES = [
   {value: FIELD_SELECT_MODE_VALUES[0], label: __('Klasický', 'brilo-blocks')},
   {value: FIELD_SELECT_MODE_VALUES[1], label: __('Výběr s routováním e-mailu', 'brilo-blocks')},
 ] as const
+
+export const FILE_EXTENSION_PRESETS = [
+  {value: 'jpg,jpeg,png,webp', label: __('Obrázky', 'brilo-blocks')},
+  {value: 'pdf', label: __('PDF', 'brilo-blocks')},
+  {value: 'doc,docx', label: __('Word', 'brilo-blocks')},
+  {value: 'xls,xlsx', label: __('Excel', 'brilo-blocks')},
+] as const
+
+export const FILE_BUTTON_VARIANT_VALUES = ['primary', 'secondary', 'neutral', 'ghost'] as const
+
+export const FILE_BUTTON_VARIANTS = [
+  {value: FILE_BUTTON_VARIANT_VALUES[0], label: __('Primary', 'brilo-blocks')},
+  {value: FILE_BUTTON_VARIANT_VALUES[1], label: __('Secondary', 'brilo-blocks')},
+  {value: FILE_BUTTON_VARIANT_VALUES[2], label: __('Neutral', 'brilo-blocks')},
+  {value: FILE_BUTTON_VARIANT_VALUES[3], label: __('Ghost', 'brilo-blocks')},
+] as const
+
+export const FIELD_FILE_BUTTON_VARIANT_DEFAULT = 'secondary'
+
+export const FIELD_FILE_BUTTON_LABEL_DEFAULT = __('Nahrát soubor', 'brilo-blocks')

package/src/blocks/form/form-field/edit.tsx

@@ -1,12 +1,27 @@
 import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
-import {Button, Modal, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
+import {CheckboxControl, Button, Modal, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
 import {__, sprintf} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useState} from 'react'
-import {FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_SELECT_MODES, FIELD_TEXT_TYPES, FIELD_TYPES} from './constants'
+import {
+  FIELD_COLUMNS_DEFAULT,
+  FIELD_COLUMNS_RANGE,
+  FIELD_SELECT_MODES,
+  FIELD_TEXT_TYPES,
+  FIELD_TYPES,
+  FILE_BUTTON_VARIANTS,
+  FILE_EXTENSION_PRESETS,
+} from './constants'
 import {normalizeOptions, serializeOptions, type OptionRow} from './normalizeOptions'
 import {SelectOptionsRepeater} from './SelectOptionsRepeater'
-import {FormFieldAttributes, FormFieldOptions, FormFieldSelectMode, FormFieldTextType, FormFieldType} from './types'
+import {
+  FormFieldAttributes,
+  FormFieldFileButtonVariant,
+  FormFieldOptions,
+  FormFieldSelectMode,
+  FormFieldTextType,
+  FormFieldType,
+} from './types'
 
 const {min: MIN_COLUMNS, max: MAX_COLUMNS} = FIELD_COLUMNS_RANGE
 
@@ -104,20 +119,72 @@ export function createFormFieldEdit(_options: FormFieldOptions) {
                   )}
                   onChange={(name) => setAttributes({name: sanitizeHtmlName(name)})}
                 />
+                {attributes.type !== 'file' && (
+                  <TextControl
+                    label={__('Placeholder', 'brilo-blocks')}
+                    value={attributes.placeholder}
+                    onChange={(placeholder) => setAttributes({placeholder})}
+                  />
+                )}
+
+                {attributes.type !== 'file' && (
+                  <ToggleControl
+                    label={__('Odesílat do GTM (dataLayer)', 'brilo-blocks')}
+                    help={__(
+                      'Po úspěšném odeslání formuláře se do dataLayer pushne klíč podle názvu html atributu s vyplněnou/vybranou hodnotou tohoto pole.',
+                      'brilo-blocks',
+                    )}
+                    checked={attributes.gtmEnabled ?? false}
+                    onChange={(gtmEnabled) => setAttributes({gtmEnabled})}
+                  />
+                )}
+              </>
+            )}
+
+            {attributes.type === 'file' && (
+              <>
+                <ToggleControl
+                  label={__('Povolit více souborů', 'brilo-blocks')}
+                  checked={attributes.multiple ?? false}
+                  onChange={(multiple) => setAttributes({multiple})}
+                />
+
+                <p className="i-form-field__file-extensions-label">{__('Povolené přípony', 'brilo-blocks')}</p>
+                {FILE_EXTENSION_PRESETS.map((preset) => (
+                  <CheckboxControl
+                    key={preset.value}
+                    label={preset.label}
+                    checked={(attributes.extensionsPreset ?? []).includes(preset.value)}
+                    onChange={(checked) => {
+                      const current = attributes.extensionsPreset ?? []
+                      setAttributes({
+                        extensionsPreset: checked ? [...current, preset.value] : current.filter((value) => value !== preset.value),
+                      })
+                    }}
+                  />
+                ))}
                 <TextControl
-                  label={__('Placeholder', 'brilo-blocks')}
-                  value={attributes.placeholder}
-                  onChange={(placeholder) => setAttributes({placeholder})}
+                  label={__('Vlastní přípony', 'brilo-blocks')}
+                  help={__('Oddělené čárkou, bez tečky. Např. heic,zip', 'brilo-blocks')}
+                  value={attributes.extensionsCustom ?? ''}
+                  onChange={(extensionsCustom) => setAttributes({extensionsCustom})}
                 />
 
+                <SelectControl
+                  label={__('Vzhled tlačítka', 'brilo-blocks')}
+                  value={attributes.buttonVariant ?? 'secondary'}
+                  options={FILE_BUTTON_VARIANTS.map((v) => ({label: v.label, value: v.value}))}
+                  onChange={(buttonVariant) => setAttributes({buttonVariant: buttonVariant as FormFieldFileButtonVariant})}
+                />
                 <ToggleControl
-                  label={__('Odesílat do GTM (dataLayer)', 'brilo-blocks')}
-                  help={__(
-                    'Po úspěšném odeslání formuláře se do dataLayer pushne klíč podle názvu html atributu s vyplněnou/vybranou hodnotou tohoto pole.',
-                    'brilo-blocks',
-                  )}
-                  checked={attributes.gtmEnabled ?? false}
-                  onChange={(gtmEnabled) => setAttributes({gtmEnabled})}
+                  label={__('Outline styl tlačítka', 'brilo-blocks')}
+                  checked={attributes.buttonOutline ?? true}
+                  onChange={(buttonOutline) => setAttributes({buttonOutline})}
+                />
+                <TextControl
+                  label={__('Text tlačítka', 'brilo-blocks')}
+                  value={attributes.buttonLabel ?? ''}
+                  onChange={(buttonLabel) => setAttributes({buttonLabel})}
                 />
               </>
             )}

package/src/blocks/form/form-field/factory.tsx

@@ -1,6 +1,6 @@
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
-import {FIELD_COLUMNS_DEFAULT} from './constants'
+import {FIELD_COLUMNS_DEFAULT, FIELD_FILE_BUTTON_LABEL_DEFAULT, FIELD_FILE_BUTTON_VARIANT_DEFAULT} from './constants'
 import {createFormFieldEdit} from './edit'
 import type {FormFieldAttributes, FormFieldOptions} from './types'
 
@@ -29,6 +29,12 @@ export function createFormFieldBlock(options: FormFieldOptions): BlockConfigurat
       value: {type: 'string', default: ''},
       isReplyTo: {type: 'boolean', default: false},
       gtmEnabled: {type: 'boolean', default: false},
+      multiple: {type: 'boolean', default: false},
+      extensionsPreset: {type: 'array', default: []},
+      extensionsCustom: {type: 'string', default: ''},
+      buttonVariant: {type: 'string', default: FIELD_FILE_BUTTON_VARIANT_DEFAULT},
+      buttonOutline: {type: 'boolean', default: true},
+      buttonLabel: {type: 'string', default: FIELD_FILE_BUTTON_LABEL_DEFAULT},
     },
     edit: createFormFieldEdit(options),
     save: () => null,

package/src/blocks/form/form-field/types.ts

@@ -1,9 +1,16 @@
-import {FIELD_SELECT_MODE_VALUES, FIELD_TEXT_TYPES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES} from './constants'
+import {
+  FIELD_SELECT_MODE_VALUES,
+  FIELD_TEXT_TYPES,
+  FIELD_TEXT_TYPE_VALUES,
+  FIELD_TYPE_VALUES,
+  FILE_BUTTON_VARIANT_VALUES,
+} from './constants'
 import type {BriloBlockType} from '~/types'
 
 export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number]
 export type FormFieldTextType = (typeof FIELD_TEXT_TYPE_VALUES)[number]
 export type FormFieldSelectMode = (typeof FIELD_SELECT_MODE_VALUES)[number]
+export type FormFieldFileButtonVariant = (typeof FILE_BUTTON_VARIANT_VALUES)[number]
 
 export type FormFieldOption = string | {label?: string; value?: string; email?: string}
 
@@ -21,6 +28,12 @@ export interface FormFieldAttributes extends Record<string, unknown> {
   value: string
   isReplyTo: boolean
   gtmEnabled: boolean
+  multiple: boolean
+  extensionsPreset: string[]
+  extensionsCustom: string
+  buttonVariant: FormFieldFileButtonVariant
+  buttonOutline: boolean
+  buttonLabel: string
 }
 
 export interface FormFieldOptions extends BriloBlockType {}