diff --git a/Gruntfile.js b/Gruntfile.js index 53d332fd2..f747aff9f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -265,7 +265,7 @@ module.exports = function( grunt) { grunt.loadNpmTasks( 'grunt-contrib-clean' ); grunt.loadNpmTasks( 'grunt-contrib-copy' ); grunt.loadNpmTasks( 'grunt-contrib-compress' ); - grunt.loadNpmTasks( 'grunt-notify' ); + // grunt.loadNpmTasks( 'grunt-notify' ); grunt.loadNpmTasks( 'grunt-wp-readme-to-markdown' ); grunt.loadNpmTasks( 'grunt-shell' ); grunt.loadNpmTasks( 'grunt-postcss' ); diff --git a/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js b/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js index e81a9fc38..eda337500 100644 --- a/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js +++ b/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js @@ -175,6 +175,18 @@ Vue.component('builder-stage-v4-1', { get_field_name: function (template) { return this.field_settings[template].title; - } + }, + + openRepeatFieldPicker(fieldId) { + // Find the repeat field component by ref and call openFieldPicker() + const refName = 'repeatFieldComponent_' + fieldId; + const comp = this.$refs[refName]; + // Vue 2: $refs[refName] is an array if used in v-for, so get first + if (Array.isArray(comp) && comp.length > 0) { + comp[0].openFieldPicker(); + } else if (comp && typeof comp.openFieldPicker === 'function') { + comp.openFieldPicker(); + } + }, } }); diff --git a/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php b/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php index 58613e89c..0399eeaff 100644 --- a/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php +++ b/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php @@ -5,7 +5,6 @@
-You cannot add this field as inner column field
', diff --git a/admin/form-builder/assets/js/components/form-fields-v4-1/index.js b/admin/form-builder/assets/js/components/form-fields-v4-1/index.js index 0ff40b19d..87819b68b 100644 --- a/admin/form-builder/assets/js/components/form-fields-v4-1/index.js +++ b/admin/form-builder/assets/js/components/form-fields-v4-1/index.js @@ -41,7 +41,7 @@ Vue.component('form-fields-v4-1', { }); buttons.draggable({ - connectToSortable: '#form-preview-stage, #form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list', + connectToSortable: '#form-preview-stage, #form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list, .wpuf-repeat-fields-sortable-list', helper: 'clone', revert: 'invalid', cancel: '.button-faded', diff --git a/admin/form-builder/assets/js/components/form-fields/index.js b/admin/form-builder/assets/js/components/form-fields/index.js index 8f1c3141c..6893989a6 100644 --- a/admin/form-builder/assets/js/components/form-fields/index.js +++ b/admin/form-builder/assets/js/components/form-fields/index.js @@ -23,7 +23,7 @@ Vue.component('form-fields', { mounted: function () { // bind jquery ui draggable $(this.$el).find('.panel-form-field-buttons .button').draggable({ - connectToSortable: '#form-preview-stage, #form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list', + connectToSortable: '#form-preview-stage, #form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list, .wpuf-repeat-fields-sortable-list', helper: 'clone', revert: 'invalid', cancel: '.button-faded', diff --git a/admin/form-builder/assets/js/form-builder.js b/admin/form-builder/assets/js/form-builder.js index fdd406084..b4b9211a2 100644 --- a/admin/form-builder/assets/js/form-builder.js +++ b/admin/form-builder/assets/js/form-builder.js @@ -131,7 +131,7 @@ } - // check if the editing field belong to a column field + // check if the editing field belongs to a column field if (state.form_fields[i].template === 'column_field') { var innerColumnFields = state.form_fields[i].inner_fields; @@ -140,6 +140,12 @@ var columnFieldIndex = 0; while (columnFieldIndex < innerColumnFields[columnFields].length) { + // don't modify existing meta key + if (payload.field_name === 'name' && ! innerColumnFields[columnFields][columnFieldIndex].hasOwnProperty('is_new') ) { + columnFieldIndex++; + continue; + } + if (innerColumnFields[columnFields][columnFieldIndex].id === parseInt(payload.editing_field_id)) { innerColumnFields[columnFields][columnFieldIndex][payload.field_name] = payload.value; } @@ -148,6 +154,32 @@ } } } + + // check if the editing field belongs to a repeat field + if (state.form_fields[i].template === 'repeat_field') { + var innerRepeatFields = state.form_fields[i].inner_fields; + + if (Array.isArray(innerRepeatFields)) { + for (var repeatFieldIndex = 0; repeatFieldIndex < innerRepeatFields.length; repeatFieldIndex++) { + // don't modify existing meta key + if (payload.field_name === 'name' && !innerRepeatFields[repeatFieldIndex].hasOwnProperty('is_new')) { + continue; + } + + if (innerRepeatFields[repeatFieldIndex].id === parseInt(payload.editing_field_id)) { + if ('read_only' === payload.field_name && payload.value) { + innerRepeatFields[repeatFieldIndex]['required'] = 'no'; + } + + if ('required' === payload.field_name && 'yes' === payload.value) { + innerRepeatFields[repeatFieldIndex]['read_only'] = false; + } + + innerRepeatFields[repeatFieldIndex][payload.field_name] = payload.value; + } + } + } + } } }, @@ -409,6 +441,41 @@ } }, + // add new form field element to repeat field + add_repeat_inner_field_element: function (state, payload) { + var repeatFieldIndex = state.form_fields.findIndex(field => field.id === payload.toWhichRepeatField); + if (repeatFieldIndex === -1) return; + if (!state.form_fields[repeatFieldIndex].inner_fields) { + Vue.set(state.form_fields[repeatFieldIndex], 'inner_fields', []); + } + state.form_fields[repeatFieldIndex].inner_fields.splice(payload.toIndex, 0, payload.field); + }, + + // delete a repeat inner field element + delete_repeat_inner_field_element: function (state, payload) { + var repeatFieldIndex = state.form_fields.findIndex(field => field.id === payload.field_id); + if (repeatFieldIndex === -1) return; + + state.current_panel = 'form-fields-v4-1'; + state.form_fields[repeatFieldIndex].inner_fields.splice(payload.index, 1); + }, + + // clone a repeat inner field element + clone_repeat_inner_field_element: function (state, payload) { + var repeatFieldIndex = state.form_fields.findIndex(field => field.id === payload.field_id); + if (repeatFieldIndex === -1) return; + + var field = state.form_fields[repeatFieldIndex].inner_fields[payload.index]; + var clone = $.extend(true, {}, field); + var newIndex = parseInt(payload.index) + 1; + + clone.id = payload.new_id; + clone.name = clone.name + '_copy'; + clone.is_new = true; + + state.form_fields[repeatFieldIndex].inner_fields.splice(newIndex, 0, clone); + }, + move_column_inner_fields: function(state, payload) { var columnFieldIndex = state.form_fields.findIndex(field => field.id === payload.field_id), innerFields = payload.inner_fields, @@ -486,6 +553,27 @@ } }, + // open repeat field settings panel + open_repeat_field_settings: function (state, payload) { + var field = payload.repeat_field; + + if ('field-options' === state.current_panel && field.id === state.editing_field_id) { + return; + } + + if (field) { + state.editing_field_id = field.id; + state.current_panel = 'field-options'; + state.editing_field_type = 'repeat_field'; + state.editing_repeat_field_id = payload.field_id; + state.editing_inner_field_index = payload.index; + + setTimeout(function () { + state.editing_field_id = field.id; + }, 400); + } + }, + clone_column_field_element: function (state, payload) { var columnFieldIndex = state.form_fields.findIndex(field => field.id === payload.field_id); @@ -895,7 +983,7 @@ this.active_settings_title = this.settings_titles[menu].sub_items[submenu].label; } }, - + switch_form_settings_pic_radio_item: function ( key, value ) { this.form_settings[key] = value; }, diff --git a/admin/form-builder/assets/js/mixins/global.js b/admin/form-builder/assets/js/mixins/global.js index 7914bae34..11d5bd545 100644 --- a/admin/form-builder/assets/js/mixins/global.js +++ b/admin/form-builder/assets/js/mixins/global.js @@ -70,8 +70,8 @@ Vue.mixin({ return true; } - // check if the single instance field exist in column fields - if (self.$store.state.form_fields[i].template === 'column_field') { + // check if the single instance field exist in column fields or repeat field + if (self.$store.state.form_fields[i].template.match(/^(column|repeat)_field$/)) { var innerColumnFields = self.$store.state.form_fields[i].inner_fields; for (const columnFields in innerColumnFields) { diff --git a/assets/css/admin.css b/assets/css/admin.css index b3efb9236..f07af5841 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -640,7 +640,8 @@ ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column . margin: 0; padding: 15px 0; } -#form-preview-stage .field-items .wpuf-field-columns + div.control-buttons { +#form-preview-stage .field-items .wpuf-field-columns + div.control-buttons, +#form-preview-stage .field-items .wpuf-repeat-field + div.control-buttons { top: 10px; z-index: 10; height: auto; diff --git a/assets/css/admin/form-builder.css b/assets/css/admin/form-builder.css index bf94296b5..8b97bceeb 100644 --- a/assets/css/admin/form-builder.css +++ b/assets/css/admin/form-builder.css @@ -843,6 +843,63 @@ html { justify-content: center; } +.wpuf-badge { + display: inline-flex; + align-items: center; + justify-content: center; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 200ms; + height: 1.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + width: -moz-fit-content; + width: fit-content; + padding-left: 0.563rem; + padding-right: 0.563rem; + border-radius: var(--rounded-badge, 1.9rem); + border-width: 1px; + --tw-border-opacity: 1; + border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); +} + +.wpuf-btm-nav { + position: fixed; + bottom: 0px; + left: 0px; + right: 0px; + display: flex; + width: 100%; + flex-direction: row; + align-items: center; + justify-content: space-around; + padding-bottom: env(safe-area-inset-bottom); + height: 4rem; + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); + color: currentColor; +} + +.wpuf-btm-nav > * { + position: relative; + display: flex; + height: 100%; + flex-basis: 100%; + cursor: pointer; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.25rem; + border-color: currentColor; +} + @media (hover:hover) { .wpuf-label a:hover { --tw-text-opacity: 1; @@ -1010,6 +1067,16 @@ html { opacity: 1; } + .wpuf-btm-nav > *.wpuf-disabled:hover, + .wpuf-btm-nav > *[disabled]:hover { + pointer-events: none; + --tw-border-opacity: 0; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-bg-opacity: 0.1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + --tw-text-opacity: 0.2; + } + .wpuf-btn:hover { --tw-border-opacity: 1; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))); @@ -1102,6 +1169,41 @@ html { --glass-border-opacity: 15%; } + .wpuf-btn-ghost:hover { + border-color: transparent; + } + + @supports (color: oklch(0% 0 0)) { + .wpuf-btn-ghost:hover { + background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); + } + } + + .wpuf-btn-ghost:hover { + border-color: transparent; + } + + @supports (color: oklch(0% 0 0)) { + .wpuf-btn-ghost:hover { + background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); + } + } + + .wpuf-btn-link:hover { + border-color: transparent; + background-color: transparent; + text-decoration-line: underline; + } + + .wpuf-btn-outline:hover { + --tw-border-opacity: 1; + border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity))); + } + .wpuf-btn-outline.wpuf-btn-primary:hover { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); @@ -1126,6 +1228,54 @@ html { } } + .wpuf-btn-outline.wpuf-btn-primary:hover { + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-primary:hover { + background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-primary:hover { + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-primary:hover { + background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-secondary:hover { + --tw-text-opacity: 1; + color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-secondary:hover { + background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-secondary:hover { + --tw-text-opacity: 1; + color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-secondary:hover { + background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); + } + } + .wpuf-btn-outline.wpuf-btn-secondary:hover { --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); @@ -1150,6 +1300,246 @@ html { } } + .wpuf-btn-outline.wpuf-btn-accent:hover { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-accent:hover { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-accent:hover { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-accent:hover { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-accent:hover { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-accent:hover { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-accent:hover { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-accent:hover { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-warning:hover { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-warning:hover { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-warning:hover { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-warning:hover { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-warning:hover { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-warning:hover { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-warning:hover { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-warning:hover { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-error:hover { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-error:hover { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-error:hover { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-error:hover { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-error:hover { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-error:hover { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } + } + + .wpuf-btn-outline.wpuf-btn-error:hover { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-outline.wpuf-btn-error:hover { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } + } + .wpuf-btn-disabled:hover, .wpuf-btn[disabled]:hover, .wpuf-btn:disabled:hover { @@ -1246,12 +1636,69 @@ html { padding-bottom: 0.5rem; } +.wpuf-join { + display: inline-flex; + align-items: stretch; + border-radius: var(--rounded-btn, 0.5rem); +} + +.wpuf-join :where(.wpuf-join-item) { + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; + border-start-start-radius: 0; +} + +.wpuf-join .wpuf-join-item:not(:first-child):not(:last-child), + .wpuf-join *:not(:first-child):not(:last-child) .wpuf-join-item { + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; + border-start-start-radius: 0; +} + +.wpuf-join .wpuf-join-item:first-child:not(:last-child), + .wpuf-join *:first-child:not(:last-child) .wpuf-join-item { + border-start-end-radius: 0; + border-end-end-radius: 0; +} + .wpuf-join .wpuf-dropdown .wpuf-join-item:first-child:not(:last-child), .wpuf-join *:first-child:not(:last-child) .wpuf-dropdown .wpuf-join-item { border-start-end-radius: inherit; border-end-end-radius: inherit; } +.wpuf-join :where(.wpuf-join-item:first-child:not(:last-child)), + .wpuf-join :where(*:first-child:not(:last-child) .wpuf-join-item) { + border-end-start-radius: inherit; + border-start-start-radius: inherit; +} + +.wpuf-join .wpuf-join-item:last-child:not(:first-child), + .wpuf-join *:last-child:not(:first-child) .wpuf-join-item { + border-end-start-radius: 0; + border-start-start-radius: 0; +} + +.wpuf-join :where(.wpuf-join-item:last-child:not(:first-child)), + .wpuf-join :where(*:last-child:not(:first-child) .wpuf-join-item) { + border-start-end-radius: inherit; + border-end-end-radius: inherit; +} + +@supports not selector(:has(*)) { + :where(.wpuf-join *) { + border-radius: inherit; + } +} + +@supports selector(:has(*)) { + :where(.wpuf-join *:has(.wpuf-join-item)) { + border-radius: inherit; + } +} + .wpuf-menu { display: flex; flex-direction: column; @@ -1305,6 +1752,60 @@ html { justify-self: end; } +.wpuf-modal { + pointer-events: none; + position: fixed; + inset: 0px; + margin: 0px; + display: grid; + height: 100%; + max-height: none; + width: 100%; + max-width: none; + justify-items: center; + padding: 0px; + opacity: 0; + overscroll-behavior: contain; + z-index: 999; + background-color: transparent; + color: inherit; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-property: transform, opacity, visibility; + overflow-y: hidden; +} + +:where(.wpuf-modal) { + align-items: center; +} + +.wpuf-modal-box { + max-height: calc(100vh - 5em); + grid-column-start: 1; + grid-row-start: 1; + width: 91.666667%; + max-width: 32rem; + --tw-scale-x: .9; + --tw-scale-y: .9; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-bottom-right-radius: var(--rounded-box, 1rem); + border-bottom-left-radius: var(--rounded-box, 1rem); + border-top-left-radius: var(--rounded-box, 1rem); + border-top-right-radius: var(--rounded-box, 1rem); + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); + padding: 1.5rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 200ms; + box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; + overflow-y: auto; + overscroll-behavior: contain; +} + .wpuf-modal-open, .wpuf-modal:target, .wpuf-modal-toggle:checked + .wpuf-modal, @@ -1424,6 +1925,21 @@ html { grid-column-start: span 9999; } +.wpuf-tab-content { + grid-column-start: 1; + grid-column-end: span 9999; + grid-row-start: 2; + margin-top: calc(var(--tab-border) * -1); + display: none; + border-color: transparent; + border-width: var(--tab-border, 0); +} + +:checked + .wpuf-tab-content:nth-child(2), + :is(.wpuf-tab-active, [aria-selected="true"]) + .wpuf-tab-content:nth-child(2) { + border-start-start-radius: 0px; +} + input.wpuf-tab:checked + .wpuf-tab-content, :is(.wpuf-tab-active, [aria-selected="true"]) + .wpuf-tab-content { display: block; @@ -1453,6 +1969,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, var(--togglehandleborder); } +.wpuf-avatar-group { + display: flex; + overflow: hidden; +} + .wpuf-avatar-group :where(.wpuf-avatar) { overflow: hidden; border-radius: 9999px; @@ -1461,6 +1982,26 @@ input.wpuf-tab:checked + .wpuf-tab-content, border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity))); } +.wpuf-btm-nav > *:not(.wpuf-active) { + padding-top: 0.125rem; +} + +.wpuf-btm-nav > *:where(.wpuf-active) { + border-top-width: 2px; + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); +} + +.wpuf-btm-nav > *.wpuf-disabled, + .wpuf-btm-nav > *[disabled] { + pointer-events: none; + --tw-border-opacity: 0; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-bg-opacity: 0.1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + --tw-text-opacity: 0.2; +} + .wpuf-btm-nav > * .wpuf-label { font-size: 1rem; line-height: 1.5rem; @@ -1491,9 +2032,42 @@ input.wpuf-tab:checked + .wpuf-tab-content, .wpuf-btn-secondary { --btn-color: var(--fallback-s); } + + .wpuf-btn-accent { + --btn-color: var(--fallback-a); + } + + .wpuf-btn-info { + --btn-color: var(--fallback-in); + } + + .wpuf-btn-success { + --btn-color: var(--fallback-su); + } + + .wpuf-btn-warning { + --btn-color: var(--fallback-wa); + } + + .wpuf-btn-error { + --btn-color: var(--fallback-er); + } } @supports (color: color-mix(in oklab, black, black)) { + .wpuf-btn-active { + background-color: color-mix( + in oklab, + oklch(var(--btn-color, var(--b3)) / var(--tw-bg-opacity, 1)) 90%, + black + ); + border-color: color-mix( + in oklab, + oklch(var(--btn-color, var(--b3)) / var(--tw-border-opacity, 1)) 90%, + black + ); + } + .wpuf-btn-outline.wpuf-btn-primary.wpuf-btn-active { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); @@ -1503,6 +2077,31 @@ input.wpuf-tab:checked + .wpuf-tab-content, background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); } + + .wpuf-btn-outline.wpuf-btn-accent.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); + } + + .wpuf-btn-outline.wpuf-btn-success.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + + .wpuf-btn-outline.wpuf-btn-info.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + + .wpuf-btn-outline.wpuf-btn-warning.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); + } + + .wpuf-btn-outline.wpuf-btn-error.wpuf-btn-active { + background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); + } } .wpuf-btn:focus-visible { @@ -1525,24 +2124,127 @@ input.wpuf-tab:checked + .wpuf-tab-content, .wpuf-btn-secondary { --btn-color: var(--s); } + + .wpuf-btn-accent { + --btn-color: var(--a); + } + + .wpuf-btn-info { + --btn-color: var(--in); + } + + .wpuf-btn-success { + --btn-color: var(--su); + } + + .wpuf-btn-warning { + --btn-color: var(--wa); + } + + .wpuf-btn-error { + --btn-color: var(--er); + } +} + +.wpuf-btn-secondary { + --tw-text-opacity: 1; + color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); + outline-color: var(--fallback-s,oklch(var(--s)/1)); +} + +.wpuf-btn-accent { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); + outline-color: var(--fallback-a,oklch(var(--a)/1)); +} + +.wpuf-btn-info { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + outline-color: var(--fallback-in,oklch(var(--in)/1)); +} + +.wpuf-btn-success { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + outline-color: var(--fallback-su,oklch(var(--su)/1)); +} + +.wpuf-btn-warning { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); + outline-color: var(--fallback-wa,oklch(var(--wa)/1)); +} + +.wpuf-btn-error { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); + outline-color: var(--fallback-er,oklch(var(--er)/1)); +} + +.wpuf-btn.wpuf-glass { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: currentColor; +} + +.wpuf-btn.wpuf-glass.wpuf-btn-active { + --glass-opacity: 25%; + --glass-border-opacity: 15%; +} + +.wpuf-btn-ghost { + border-width: 1px; + border-color: transparent; + background-color: transparent; + color: currentColor; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: currentColor; +} + +.wpuf-btn-ghost.wpuf-btn-active { + border-color: transparent; + background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); +} + +.wpuf-btn-link { + border-color: transparent; + background-color: transparent; + --tw-text-opacity: 1; + color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); + text-decoration-line: underline; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: currentColor; +} + +.wpuf-btn-link.wpuf-btn-active { + border-color: transparent; + background-color: transparent; + text-decoration-line: underline; } -.wpuf-btn-secondary { +.wpuf-btn-outline { + border-color: currentColor; + background-color: transparent; --tw-text-opacity: 1; - color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); - outline-color: var(--fallback-s,oklch(var(--s)/1)); -} - -.wpuf-btn.wpuf-glass { + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - outline-color: currentColor; } -.wpuf-btn.wpuf-glass.wpuf-btn-active { - --glass-opacity: 25%; - --glass-border-opacity: 15%; +.wpuf-btn-outline.wpuf-btn-active { + --tw-border-opacity: 1; + border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity))); } .wpuf-btn-outline.wpuf-btn-primary { @@ -1565,6 +2267,56 @@ input.wpuf-tab:checked + .wpuf-tab-content, color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); } +.wpuf-btn-outline.wpuf-btn-accent { + --tw-text-opacity: 1; + color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-accent.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-success { + --tw-text-opacity: 1; + color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-success.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-info { + --tw-text-opacity: 1; + color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-info.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-warning { + --tw-text-opacity: 1; + color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-warning.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-error { + --tw-text-opacity: 1; + color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity))); +} + +.wpuf-btn-outline.wpuf-btn-error.wpuf-btn-active { + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); +} + .wpuf-btn.wpuf-btn-disabled, .wpuf-btn[disabled], .wpuf-btn:disabled { @@ -1625,10 +2377,20 @@ input.wpuf-tab:checked + .wpuf-tab-content, transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.wpuf-join > :where(*:not(:first-child)) { + margin-top: 0px; + margin-bottom: 0px; + margin-inline-start: -1px; +} + .wpuf-join > :where(*:not(:first-child)):is(.wpuf-btn) { margin-inline-start: calc(var(--border-btn) * -1); } +.wpuf-join-item:focus { + isolation: isolate; +} + .wpuf-loading { pointer-events: none; display: inline-block; @@ -1729,6 +2491,23 @@ input.wpuf-tab:checked + .wpuf-tab-content, margin-top: 0; } +.wpuf-menu-title { + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 700; + color: var(--fallback-bc,oklch(var(--bc)/0.4)); +} + +.wpuf-modal:not(dialog:not(.wpuf-modal-open)), + .wpuf-modal::backdrop { + background-color: #0006; + animation: modal-pop 0.2s ease-out; +} + .wpuf-modal-open .wpuf-modal-box, .wpuf-modal-toggle:checked + .wpuf-modal .wpuf-modal-box, .wpuf-modal:target .wpuf-modal-box, @@ -1996,6 +2775,20 @@ input.wpuf-tab:checked + .wpuf-tab-content, color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } +.wpuf-table tr.wpuf-active, + .wpuf-table tr.wpuf-active:nth-child(even), + .wpuf-table-zebra tbody tr:nth-child(even) { + --tw-bg-opacity: 1; + background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); +} + +.wpuf-table-zebra tr.wpuf-active, + .wpuf-table-zebra tr.wpuf-active:nth-child(even), + .wpuf-table-zebra-zebra tbody tr:nth-child(even) { + --tw-bg-opacity: 1; + background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); +} + @keyframes toast-pop { 0% { transform: scale(0.9); @@ -2059,6 +2852,117 @@ input.wpuf-tab:checked + .wpuf-tab-content, var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset; } +.wpuf-glass, + .wpuf-glass.wpuf-btn-active { + border: none; + -webkit-backdrop-filter: blur(var(--glass-blur, 40px)); + backdrop-filter: blur(var(--glass-blur, 40px)); + background-color: transparent; + background-image: linear-gradient( + 135deg, + rgb(255 255 255 / var(--glass-opacity, 30%)) 0%, + rgb(0 0 0 / 0%) 100% + ), + linear-gradient( + var(--glass-reflex-degree, 100deg), + rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, + rgb(0 0 0 / 0%) 25% + ); + box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, + 0 0 0 2px rgb(0 0 0 / 5%); + text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)); +} + +@media (hover: hover) { + .wpuf-glass.wpuf-btn-active { + border: none; + -webkit-backdrop-filter: blur(var(--glass-blur, 40px)); + backdrop-filter: blur(var(--glass-blur, 40px)); + background-color: transparent; + background-image: linear-gradient( + 135deg, + rgb(255 255 255 / var(--glass-opacity, 30%)) 0%, + rgb(0 0 0 / 0%) 100% + ), + linear-gradient( + var(--glass-reflex-degree, 100deg), + rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, + rgb(0 0 0 / 0%) 25% + ); + box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, + 0 0 0 2px rgb(0 0 0 / 5%); + text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)); + } +} + +.wpuf-btm-nav-xs > *:where(.wpuf-active) { + border-top-width: 1px; +} + +.wpuf-btm-nav-sm > *:where(.wpuf-active) { + border-top-width: 2px; +} + +.wpuf-btm-nav-md > *:where(.wpuf-active) { + border-top-width: 2px; +} + +.wpuf-btm-nav-lg > *:where(.wpuf-active) { + border-top-width: 4px; +} + +.wpuf-join.wpuf-join-vertical { + flex-direction: column; +} + +.wpuf-join.wpuf-join-vertical .wpuf-join-item:first-child:not(:last-child), + .wpuf-join.wpuf-join-vertical *:first-child:not(:last-child) .wpuf-join-item { + border-end-start-radius: 0; + border-end-end-radius: 0; + border-start-start-radius: inherit; + border-start-end-radius: inherit; +} + +.wpuf-join.wpuf-join-vertical .wpuf-join-item:last-child:not(:first-child), + .wpuf-join.wpuf-join-vertical *:last-child:not(:first-child) .wpuf-join-item { + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-start-radius: inherit; + border-end-end-radius: inherit; +} + +.wpuf-join.wpuf-join-horizontal { + flex-direction: row; +} + +.wpuf-join.wpuf-join-horizontal .wpuf-join-item:first-child:not(:last-child), + .wpuf-join.wpuf-join-horizontal *:first-child:not(:last-child) .wpuf-join-item { + border-end-end-radius: 0; + border-start-end-radius: 0; + border-end-start-radius: inherit; + border-start-start-radius: inherit; +} + +.wpuf-join.wpuf-join-horizontal .wpuf-join-item:last-child:not(:first-child), + .wpuf-join.wpuf-join-horizontal *:last-child:not(:first-child) .wpuf-join-item { + border-end-start-radius: 0; + border-start-start-radius: 0; + border-end-end-radius: inherit; + border-start-end-radius: inherit; +} + +.wpuf-modal-top { + place-items: start; +} + +.wpuf-modal-middle { + place-items: center; +} + +.wpuf-modal-bottom { + place-items: end; +} + .wpuf-tabs-md :where(.wpuf-tab) { height: 2rem; font-size: 0.875rem; @@ -2145,14 +3049,133 @@ input.wpuf-tab:checked + .wpuf-tab-content, right: 7%; } +.wpuf-join.wpuf-join-vertical > :where(*:not(:first-child)) { + margin-left: 0px; + margin-right: 0px; + margin-top: -1px; +} + .wpuf-join.wpuf-join-vertical > :where(*:not(:first-child)):is(.wpuf-btn) { margin-top: calc(var(--border-btn) * -1); } +.wpuf-join.wpuf-join-horizontal > :where(*:not(:first-child)) { + margin-top: 0px; + margin-bottom: 0px; + margin-inline-start: -1px; +} + .wpuf-join.wpuf-join-horizontal > :where(*:not(:first-child)):is(.wpuf-btn) { margin-inline-start: calc(var(--border-btn) * -1); } +.wpuf-menu-xs :where(li:not(.wpuf-menu-title) > *:not(ul, details, .wpuf-menu-title)), .wpuf-menu-xs :where(li:not(.wpuf-menu-title) > details > summary:not(.wpuf-menu-title)) { + border-radius: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 1rem; +} + +.wpuf-menu-xs .wpuf-menu-title { + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.wpuf-menu-sm :where(li:not(.wpuf-menu-title) > *:not(ul, details, .wpuf-menu-title)), .wpuf-menu-sm :where(li:not(.wpuf-menu-title) > details > summary:not(.wpuf-menu-title)) { + border-radius: var(--rounded-btn, 0.5rem); + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.wpuf-menu-sm .wpuf-menu-title { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.wpuf-menu-md :where(li:not(.wpuf-menu-title) > *:not(ul, details, .wpuf-menu-title)), .wpuf-menu-md :where(li:not(.wpuf-menu-title) > details > summary:not(.wpuf-menu-title)) { + border-radius: var(--rounded-btn, 0.5rem); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.wpuf-menu-md .wpuf-menu-title { + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.wpuf-menu-lg :where(li:not(.wpuf-menu-title) > *:not(ul, details, .wpuf-menu-title)), .wpuf-menu-lg :where(li:not(.wpuf-menu-title) > details > summary:not(.wpuf-menu-title)) { + border-radius: var(--rounded-btn, 0.5rem); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 1.125rem; + line-height: 1.75rem; +} + +.wpuf-menu-lg .wpuf-menu-title { + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.wpuf-modal-top :where(.wpuf-modal-box) { + width: 100%; + max-width: none; + --tw-translate-y: -2.5rem; + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-bottom-right-radius: var(--rounded-box, 1rem); + border-bottom-left-radius: var(--rounded-box, 1rem); + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} + +.wpuf-modal-middle :where(.wpuf-modal-box) { + width: 91.666667%; + max-width: 32rem; + --tw-translate-y: 0px; + --tw-scale-x: .9; + --tw-scale-y: .9; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-top-left-radius: var(--rounded-box, 1rem); + border-top-right-radius: var(--rounded-box, 1rem); + border-bottom-right-radius: var(--rounded-box, 1rem); + border-bottom-left-radius: var(--rounded-box, 1rem); +} + +.wpuf-modal-bottom :where(.wpuf-modal-box) { + width: 100%; + max-width: none; + --tw-translate-y: 2.5rem; + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-top-left-radius: var(--rounded-box, 1rem); + border-top-right-radius: var(--rounded-box, 1rem); + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} + .wpuf-tooltip { position: relative; display: inline-block; @@ -2477,6 +3500,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, top: 0px; } +.wpuf-top-1 { + top: 0.25rem; +} + .wpuf-top-1\/2 { top: 50%; } @@ -2573,6 +3600,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, margin: 1rem; } +.wpuf--mx-1 { + margin-left: -0.25rem; + margin-right: -0.25rem; +} + .wpuf--mx-1\.5 { margin-left: -0.375rem; margin-right: -0.375rem; @@ -2588,6 +3620,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, margin-right: -2rem; } +.wpuf--my-1 { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} + .wpuf--my-1\.5 { margin-top: -0.375rem; margin-bottom: -0.375rem; @@ -3070,6 +4107,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, width: 100% !important; } +.wpuf-w-1 { + width: 0.25rem; +} + .wpuf-w-1\/2 { width: 50%; } @@ -3094,6 +4135,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, width: 3rem; } +.wpuf-w-2 { + width: 0.5rem; +} + .wpuf-w-2\/3 { width: 66.666667%; } @@ -3248,6 +4293,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, flex-grow: 1; } +.wpuf-basis-1 { + flex-basis: 0.25rem; +} + .wpuf-basis-1\/2 { flex-basis: 50%; } @@ -3256,6 +4305,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, flex-basis: 20%; } +.wpuf-basis-4 { + flex-basis: 1rem; +} + .wpuf-basis-4\/5 { flex-basis: 80%; } @@ -3269,6 +4322,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.wpuf--translate-y-1 { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .wpuf--translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -3424,6 +4482,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, gap: 1.5rem; } +.wpuf-gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + .wpuf-gap-x-1\.5 { -moz-column-gap: 0.375rem; column-gap: 0.375rem; @@ -3710,6 +4773,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, border-color: rgb(249 250 251 / var(--tw-border-opacity)) !important; } +.\!wpuf-border-green-400 { + --tw-border-opacity: 1 !important; + border-color: rgb(74 222 128 / var(--tw-border-opacity)) !important; +} + .\!wpuf-border-red-500 { --tw-border-opacity: 1 !important; border-color: rgb(239 68 68 / var(--tw-border-opacity)) !important; @@ -3823,6 +4891,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, background-color: rgb(245 158 11 / var(--tw-bg-opacity)); } +.wpuf-bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + .wpuf-bg-black\/25 { background-color: rgb(0 0 0 / 0.25); } @@ -3972,6 +5045,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, stroke: #f9fafb; } +.wpuf-stroke-gray-500 { + stroke: #6b7280; +} + .\!wpuf-p-0 { padding: 0px !important; } @@ -4038,6 +5115,11 @@ input.wpuf-tab:checked + .wpuf-tab-content, padding-right: 14px !important; } +.\!wpuf-py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + .\!wpuf-py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; @@ -4255,6 +5337,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, padding-left: 48px; } +.wpuf-pr-1 { + padding-right: 0.25rem; +} + .wpuf-pr-1\.5 { padding-right: 0.375rem; } @@ -4703,6 +5789,12 @@ input.wpuf-tab:checked + .wpuf-tab-content, outline-color: #d1d5db; } +.wpuf-ring { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + .wpuf-ring-0 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); @@ -4738,10 +5830,20 @@ input.wpuf-tab:checked + .wpuf-tab-content, --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); } +.wpuf-ring-gray-900 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity)); +} + .wpuf-ring-gray-900\/5 { --tw-ring-color: rgb(17 24 39 / 0.05); } +.wpuf-ring-green-600 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity)); +} + .wpuf-ring-green-600\/20 { --tw-ring-color: rgb(22 163 74 / 0.2); } diff --git a/assets/css/frontend-forms.css b/assets/css/frontend-forms.css index 8ef767361..26cef35c4 100644 --- a/assets/css/frontend-forms.css +++ b/assets/css/frontend-forms.css @@ -464,24 +464,29 @@ body ul.wpuf-form li .wpuf-fields .wpuf-fields-list.wpuf-list-inline li { padding-left: 5px; padding-right: 5px; } -body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field { +body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field { border-collapse: collapse; } -body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field * { - box-sizing: border-box; +body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field.wpuf-field-columns { + display: flex; + justify-content: space-between; + align-items: center; } -body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field input { +body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field .wpuf-column-field-inner-columns { width: 100%; } -body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field .wpuf-repeater-buttons { +body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field * { + box-sizing: border-box; +} +body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field .wpuf-repeater-buttons { width: 75px; padding-left: 12px; } -body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field .wpuf-repeater-buttons img { +body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field .wpuf-repeater-buttons img { width: 100%; height: auto; } -body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field .wpuf-repeater-buttons i { +body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field .wpuf-repeater-buttons i { display: inline-block; width: 15px; height: 15px; @@ -1708,7 +1713,6 @@ body ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-col float: none; display: flex; width: 100%; - overflow: hidden; } body ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields { padding: 0 5px 0 0; diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php index 4bb34d9d7..0130dc122 100644 --- a/assets/js-templates/form-components.php +++ b/assets/js-templates/form-components.php @@ -94,7 +94,6 @@ class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2" -You cannot add this field as inner column field
', @@ -1610,7 +1644,7 @@ Vue.component('form-fields', { mounted: function () { // bind jquery ui draggable $(this.$el).find('.panel-form-field-buttons .button').draggable({ - connectToSortable: '#form-preview-stage, #form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list', + connectToSortable: '#form-preview-stage, #form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list, .wpuf-repeat-fields-sortable-list', helper: 'clone', revert: 'invalid', cancel: '.button-faded', @@ -1709,7 +1743,7 @@ Vue.component('form-fields-v4-1', { }); buttons.draggable({ - connectToSortable: '#form-preview-stage, #form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list', + connectToSortable: '#form-preview-stage, #form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list, .wpuf-repeat-fields-sortable-list', helper: 'clone', revert: 'invalid', cancel: '.button-faded', diff --git a/assets/js/wpuf-form-builder-mixins.js b/assets/js/wpuf-form-builder-mixins.js index e96fd461d..367489f49 100644 --- a/assets/js/wpuf-form-builder-mixins.js +++ b/assets/js/wpuf-form-builder-mixins.js @@ -229,8 +229,8 @@ Vue.mixin({ return true; } - // check if the single instance field exist in column fields - if (self.$store.state.form_fields[i].template === 'column_field') { + // check if the single instance field exist in column fields or repeat field + if (self.$store.state.form_fields[i].template.match(/^(column|repeat)_field$/)) { var innerColumnFields = self.$store.state.form_fields[i].inner_fields; for (const columnFields in innerColumnFields) { diff --git a/assets/js/wpuf-form-builder-wpuf-forms.js b/assets/js/wpuf-form-builder-wpuf-forms.js index 9c0367321..0d1d82a45 100644 --- a/assets/js/wpuf-form-builder-wpuf-forms.js +++ b/assets/js/wpuf-form-builder-wpuf-forms.js @@ -22,26 +22,34 @@ var is_valid = false; _.each(this.form_fields, function (form_field) { + // Check if form_field exists and has template property + if (!form_field || !form_field.template) { + return; + } + if (_.indexOf(['post_title', 'post_content', 'post_excerpt'], form_field.template) >= 0) { is_valid = true; return; } // check in column field - if (form_field.template === 'column_field' ) { + if (form_field.template.match(/^(column|repeat)_field$/)) { var innerColumnFields = form_field.inner_fields; - for (const columnFields in innerColumnFields) { - if (innerColumnFields.hasOwnProperty(columnFields)) { - var columnFieldIndex = 0; - - //console.log(innerColumnFields[columnFields].length); - while (columnFieldIndex < innerColumnFields[columnFields].length) { - if (_.indexOf(['post_title', 'post_content', 'post_excerpt'], innerColumnFields[columnFields][columnFieldIndex].template) >= 0) { - is_valid = true; - return; + if (innerColumnFields) { + for (const columnFields in innerColumnFields) { + if (innerColumnFields.hasOwnProperty(columnFields)) { + var columnFieldIndex = 0; + + //console.log(innerColumnFields[columnFields].length); + while (columnFieldIndex < innerColumnFields[columnFields].length) { + var innerField = innerColumnFields[columnFields][columnFieldIndex]; + if (innerField && innerField.template && _.indexOf(['post_title', 'post_content', 'post_excerpt'], innerField.template) >= 0) { + is_valid = true; + return; + } + columnFieldIndex++; } - columnFieldIndex++; } } } diff --git a/assets/js/wpuf-form-builder.js b/assets/js/wpuf-form-builder.js index fdd406084..b4b9211a2 100644 --- a/assets/js/wpuf-form-builder.js +++ b/assets/js/wpuf-form-builder.js @@ -131,7 +131,7 @@ } - // check if the editing field belong to a column field + // check if the editing field belongs to a column field if (state.form_fields[i].template === 'column_field') { var innerColumnFields = state.form_fields[i].inner_fields; @@ -140,6 +140,12 @@ var columnFieldIndex = 0; while (columnFieldIndex < innerColumnFields[columnFields].length) { + // don't modify existing meta key + if (payload.field_name === 'name' && ! innerColumnFields[columnFields][columnFieldIndex].hasOwnProperty('is_new') ) { + columnFieldIndex++; + continue; + } + if (innerColumnFields[columnFields][columnFieldIndex].id === parseInt(payload.editing_field_id)) { innerColumnFields[columnFields][columnFieldIndex][payload.field_name] = payload.value; } @@ -148,6 +154,32 @@ } } } + + // check if the editing field belongs to a repeat field + if (state.form_fields[i].template === 'repeat_field') { + var innerRepeatFields = state.form_fields[i].inner_fields; + + if (Array.isArray(innerRepeatFields)) { + for (var repeatFieldIndex = 0; repeatFieldIndex < innerRepeatFields.length; repeatFieldIndex++) { + // don't modify existing meta key + if (payload.field_name === 'name' && !innerRepeatFields[repeatFieldIndex].hasOwnProperty('is_new')) { + continue; + } + + if (innerRepeatFields[repeatFieldIndex].id === parseInt(payload.editing_field_id)) { + if ('read_only' === payload.field_name && payload.value) { + innerRepeatFields[repeatFieldIndex]['required'] = 'no'; + } + + if ('required' === payload.field_name && 'yes' === payload.value) { + innerRepeatFields[repeatFieldIndex]['read_only'] = false; + } + + innerRepeatFields[repeatFieldIndex][payload.field_name] = payload.value; + } + } + } + } } }, @@ -409,6 +441,41 @@ } }, + // add new form field element to repeat field + add_repeat_inner_field_element: function (state, payload) { + var repeatFieldIndex = state.form_fields.findIndex(field => field.id === payload.toWhichRepeatField); + if (repeatFieldIndex === -1) return; + if (!state.form_fields[repeatFieldIndex].inner_fields) { + Vue.set(state.form_fields[repeatFieldIndex], 'inner_fields', []); + } + state.form_fields[repeatFieldIndex].inner_fields.splice(payload.toIndex, 0, payload.field); + }, + + // delete a repeat inner field element + delete_repeat_inner_field_element: function (state, payload) { + var repeatFieldIndex = state.form_fields.findIndex(field => field.id === payload.field_id); + if (repeatFieldIndex === -1) return; + + state.current_panel = 'form-fields-v4-1'; + state.form_fields[repeatFieldIndex].inner_fields.splice(payload.index, 1); + }, + + // clone a repeat inner field element + clone_repeat_inner_field_element: function (state, payload) { + var repeatFieldIndex = state.form_fields.findIndex(field => field.id === payload.field_id); + if (repeatFieldIndex === -1) return; + + var field = state.form_fields[repeatFieldIndex].inner_fields[payload.index]; + var clone = $.extend(true, {}, field); + var newIndex = parseInt(payload.index) + 1; + + clone.id = payload.new_id; + clone.name = clone.name + '_copy'; + clone.is_new = true; + + state.form_fields[repeatFieldIndex].inner_fields.splice(newIndex, 0, clone); + }, + move_column_inner_fields: function(state, payload) { var columnFieldIndex = state.form_fields.findIndex(field => field.id === payload.field_id), innerFields = payload.inner_fields, @@ -486,6 +553,27 @@ } }, + // open repeat field settings panel + open_repeat_field_settings: function (state, payload) { + var field = payload.repeat_field; + + if ('field-options' === state.current_panel && field.id === state.editing_field_id) { + return; + } + + if (field) { + state.editing_field_id = field.id; + state.current_panel = 'field-options'; + state.editing_field_type = 'repeat_field'; + state.editing_repeat_field_id = payload.field_id; + state.editing_inner_field_index = payload.index; + + setTimeout(function () { + state.editing_field_id = field.id; + }, 400); + } + }, + clone_column_field_element: function (state, payload) { var columnFieldIndex = state.form_fields.findIndex(field => field.id === payload.field_id); @@ -895,7 +983,7 @@ this.active_settings_title = this.settings_titles[menu].sub_items[submenu].label; } }, - + switch_form_settings_pic_radio_item: function ( key, value ) { this.form_settings[key] = value; }, diff --git a/assets/less/admin.less b/assets/less/admin.less index 6200d3f31..06f6a671d 100644 --- a/assets/less/admin.less +++ b/assets/less/admin.less @@ -835,7 +835,8 @@ ul.wpuf-form{ } } -#form-preview-stage .field-items .wpuf-field-columns + div.control-buttons{ +#form-preview-stage .field-items .wpuf-field-columns + div.control-buttons, +#form-preview-stage .field-items .wpuf-repeat-field + div.control-buttons{ top: 10px; z-index: 10; height: auto; diff --git a/assets/less/frontend-forms.less b/assets/less/frontend-forms.less index eb996f42f..b2dd5c4d1 100644 --- a/assets/less/frontend-forms.less +++ b/assets/less/frontend-forms.less @@ -516,17 +516,23 @@ ul.wpuf-form { } } - table.wpuf-repeatable-field { + .wpuf-repeatable-field { border-collapse: collapse; - & * { - box-sizing: border-box; + &.wpuf-field-columns { + display: flex; + justify-content: space-between; + align-items: center; } - input { + .wpuf-column-field-inner-columns { width: 100%; } + & * { + box-sizing: border-box; + } + .wpuf-repeater-buttons { width: 75px; padding-left: 12px; @@ -1979,7 +1985,6 @@ ul.wpuf-form{ float: none; display: flex; width: 100%; - overflow: hidden; .wpuf-column-inner-fields{ padding: 0 5px 0 0; diff --git a/includes/Admin/Posting.php b/includes/Admin/Posting.php index 3d12ab95e..82afb9852 100644 --- a/includes/Admin/Posting.php +++ b/includes/Admin/Posting.php @@ -65,7 +65,7 @@ public function __construct() { add_action( 'add_meta_boxes', [ $this, 'add_meta_boxes'] ); add_action( 'add_meta_boxes', [ $this, 'add_meta_box_form_select'] ); add_action( 'add_meta_boxes', [ $this, 'add_meta_box_post_lock'] ); - // add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_script'] ); + add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_script'] ); add_action( 'wpuf_load_post_forms', [ $this, 'enqueue_script' ] ); // add_action( 'admin_enqueue_scripts', [ $this, 'dequeue_assets' ] ); add_action( 'wpuf_load_registration_forms', [ $this, 'enqueue_script' ] ); @@ -142,6 +142,26 @@ public function enqueue_script() { 'type_error' => __( 'You have uploaded an incorrect file type. Please try again.', 'wp-user-frontend' ), ], ] ); + + // Enqueue field initialization script for admin metabox + + // Enqueue Selectize for country fields + wp_enqueue_style( 'wpuf-selectize' ); + wp_enqueue_script( 'wpuf-selectize' ); + + // Enqueue international telephone input for phone fields + wp_enqueue_style( 'wpuf-intlTelInput' ); + wp_enqueue_script( 'wpuf-intlTelInput' ); + + // Try to load the field initialization script using the registered handle + wp_enqueue_script( 'wpuf-field-initialization' ); + + // Localize script with asset URI + wp_localize_script( 'wpuf-field-initialization', 'wpuf_field_initializer', [ + 'asset_uri' => defined( 'WPUF_PRO_ASSET_URI' ) ? WPUF_PRO_ASSET_URI : '', + ] ); + + } /** @@ -428,26 +448,60 @@ public function render_form( $form_id, $post_id = null ) {