From cb7d3e50ef94e72c543169d075ffb0a7cddb6819 Mon Sep 17 00:00:00 2001 From: arifulhoque7 Date: Mon, 28 Jul 2025 09:43:41 +0600 Subject: [PATCH 1/8] Fix: Display term names instead of term IDs for product_cat and product_shipping_class on product page --- includes/Traits/FieldableTrait.php | 341 +++++++++++++++++++++-------- 1 file changed, 249 insertions(+), 92 deletions(-) diff --git a/includes/Traits/FieldableTrait.php b/includes/Traits/FieldableTrait.php index 394ac0081..cf4ac11e8 100644 --- a/includes/Traits/FieldableTrait.php +++ b/includes/Traits/FieldableTrait.php @@ -116,7 +116,7 @@ public function get_input_fields( $form_vars ) { foreach ( $form_vars as $key => $value ) { // get column field input fields - if ( $value['input_type'] == 'column_field' ) { + if ( 'column_field' === $value['input_type'] ) { $inner_fields = $value['inner_fields']; foreach ( $inner_fields as $column_key => $column_fields ) { @@ -128,12 +128,12 @@ public function get_input_fields( $form_vars ) { } //separate the post and custom fields - if ( isset( $column_field['is_meta'] ) && $column_field['is_meta'] == 'yes' ) { + if ( isset( $column_field['is_meta'] ) && 'yes' === $column_field['is_meta'] ) { $meta_vars[] = $column_field; continue; } - if ( $column_field['input_type'] == 'taxonomy' ) { + if ( 'taxonomy' === $column_field['input_type'] ) { // don't add "category" // if ( $column_field['name'] == 'category' ) { @@ -156,17 +156,31 @@ public function get_input_fields( $form_vars ) { } //separate the post and custom fields - if ( isset( $value['is_meta'] ) && $value['is_meta'] == 'yes' ) { + if ( isset( $value['is_meta'] ) && 'yes' === $value['is_meta'] ) { $meta_vars[] = $value; continue; } - if ( $value['input_type'] == 'taxonomy' ) { + if ( 'taxonomy' === $value['input_type'] ) { + // Handle product categories and other WooCommerce taxonomies + if ( 'product_cat' === $value['name'] || 'product_category' === $value['name'] ) { + $value['name'] = 'product_cat'; // Normalize to WooCommerce's taxonomy name + $value['is_woocommerce'] = true; + } + + // Handle product tags + if ( 'product_tag' === $value['name'] ) { + $value['is_woocommerce'] = true; + } - // don't add "category" - // if ( $value['name'] == 'category' ) { - // continue; - // } + // Handle shipping class + if ( 'product_shipping_class' === $value['name'] ) { + $value['is_woocommerce'] = true; + $value['hierarchical'] = true; + if ( empty( $value['type'] ) ) { + $value['type'] = 'select'; + } + } $taxonomy_vars[] = $value; } else { @@ -205,10 +219,10 @@ public function on_edit_no_check_recaptcha( $post_vars ) { wpuf()->ajax->send_error( __( 'Empty reCaptcha Field', 'wp-user-frontend' ) ); } - if ( $recaptcha_type == 'enable_no_captcha' ) { + if ( 'enable_no_captcha' === $recaptcha_type ) { $no_captcha = 1; $invisible_captcha = 0; - } elseif ( $recaptcha_type == 'invisible_recaptcha' ) { + } elseif ( 'invisible_recaptcha' === $recaptcha_type ) { $invisible_captcha = 1; $no_captcha = 0; } else { @@ -262,7 +276,7 @@ public function validate_re_captcha( $no_captcha = '', $invisible = '' ) { $remote_addr = isset( $_SERVER['REMOTE_ADDR'] ) ? sanitize_text_field( wp_unslash( $_SERVER['REMOTE_ADDR'] ) ) : ''; $g_recaptcha_response = isset( $_POST['g-recaptcha-response'] ) ? sanitize_text_field( wp_unslash( $_POST['g-recaptcha-response'] ) ) : ''; - if ( $no_captcha == 1 && 0 == $invisible ) { + if ( 1 === $no_captcha && 0 === $invisible ) { if ( ! class_exists( 'WPUF_ReCaptcha' ) ) { require_once WPUF_ROOT . '/Lib/recaptchalib_noCaptcha.php'; } @@ -278,7 +292,7 @@ public function validate_re_captcha( $no_captcha = '', $invisible = '' ) { if ( ! $resp->success ) { $this->send_error( __( 'noCaptcha reCAPTCHA validation failed', 'wp-user-frontend' ) ); } - } elseif ( $no_captcha == 0 && 0 == $invisible ) { + } elseif ( 0 === $no_captcha && 0 === $invisible ) { $recap_challenge = isset( $_POST['recaptcha_challenge_field'] ) ? sanitize_text_field( wp_unslash( $_POST['recaptcha_challenge_field'] ) ) : ''; $recap_response = isset( $_POST['recaptcha_response_field'] ) ? sanitize_text_field( wp_unslash( $_POST['recaptcha_response_field'] ) ) : ''; @@ -287,14 +301,14 @@ public function validate_re_captcha( $no_captcha = '', $invisible = '' ) { if ( ! $resp->is_valid ) { $this->send_error( __( 'reCAPTCHA validation failed', 'wp-user-frontend' ) ); } - } elseif ( $no_captcha == 0 && 1 == $invisible ) { + } elseif ( 0 === $no_captcha && 1 === $invisible ) { $response = null; $recaptcha = isset( $_POST['g-recaptcha-response'] ) ? sanitize_text_field( wp_unslash( $_POST['g-recaptcha-response'] ) ) : ''; $object = new Invisible_Recaptcha( $site_key, $private_key ); $response = $object->verifyResponse( $recaptcha ); - if ( isset( $response['success'] ) and $response['success'] != true ) { + if ( isset( $response['success'] ) && true !== $response['success'] ) { $this->send_error( __( 'Invisible reCAPTCHA validation failed', 'wp-user-frontend' ) ); } } @@ -439,101 +453,207 @@ public function update_post_meta( $meta_vars, $post_id ) { public function set_custom_taxonomy( $post_id, $taxonomy_vars ) { check_ajax_referer( 'wpuf_form_add' ); // save any custom taxonomies - $woo_attr = []; foreach ( $taxonomy_vars as $taxonomy ) { - if ( isset( $_POST[ $taxonomy['name'] ] ) && is_array( $_POST[ $taxonomy['name'] ] ) ) { - $taxonomy_name = array_map( 'sanitize_text_field', wp_unslash( $_POST[ $taxonomy['name'] ] ) ); + $taxonomy_name = $taxonomy['name']; + + // Get posted terms or default terms + $posted_terms = isset( $_POST[$taxonomy_name] ) ? wp_unslash( $_POST[$taxonomy_name] ) : null; + + // Use default terms if no terms posted + if ( empty( $posted_terms ) && isset( $taxonomy['default'] ) && ! empty( $taxonomy['default'] ) ) { + $posted_terms = $taxonomy['default']; } - if ( isset( $_POST[ $taxonomy['name'] ] ) && ! is_array( $_POST[ $taxonomy['name'] ] ) ) { - $taxonomy_name = sanitize_text_field( wp_unslash( $_POST[ $taxonomy['name'] ] ) ); - - if ( 'text' === $taxonomy['type'] ) { - $terms = explode( ',', $taxonomy_name ); - $terms = array_map( - function ( $term_name ) use ( $taxonomy ) { - $term = get_term_by( 'name', $term_name, $taxonomy['name'] ); - - if ( empty( $term_name ) ) { - return null; + // Skip if still no terms available + if ( empty( $posted_terms ) ) { + continue; + } + + // Check if this is a WooCommerce enabled taxonomy + $is_woo_taxonomy = isset( $taxonomy['is_woocommerce'] ) && wpuf_is_checkbox_or_toggle_on( $taxonomy['is_woocommerce'] ); + + // Special handling for product categories if WooCommerce is enabled + if ( $is_woo_taxonomy && 'product_cat' === $taxonomy_name ) { + $term_ids = []; + if ( ! empty( $posted_terms ) ) { + if ( is_array( $posted_terms ) ) { + foreach ( $posted_terms as $term ) { + if ( is_numeric( $term ) ) { + $term_obj = get_term( $term, 'product_cat' ); + if ( $term_obj && ! is_wp_error( $term_obj ) ) { + $term_ids[] = (int) $term; + } + } else { + $existing_term = term_exists( $term, 'product_cat' ); + if ( $existing_term ) { + $term_ids[] = $existing_term['term_id']; + } else { + $new_term = wp_insert_term( $term, 'product_cat' ); + if ( ! is_wp_error( $new_term ) ) { + $term_ids[] = $new_term['term_id']; + } + } } - - if ( $term instanceof \WP_Term ) { - return $term->term_id; + } + } else { + // Handle single term + if ( is_numeric( $posted_terms ) ) { + $term_obj = get_term( $posted_terms, 'product_cat' ); + if ( $term_obj && ! is_wp_error( $term_obj ) ) { + $term_ids[] = (int) $posted_terms; + } + } else { + $existing_term = term_exists( $posted_terms, 'product_cat' ); + if ( $existing_term ) { + $term_ids[] = $existing_term['term_id']; + } else { + $new_term = wp_insert_term( $posted_terms, 'product_cat' ); + if ( !is_wp_error($new_term) ) { + $term_ids[] = $new_term['term_id']; + } } + } + } + } + wp_set_object_terms( $post_id, $term_ids, 'product_cat' ); + continue; + } - $new_term = wp_insert_term( $term_name, $taxonomy['name'] ); + // Handle product tags if WooCommerce is enabled + if ( $is_woo_taxonomy && 'product_tag' === $taxonomy_name ) { + if ( empty( $posted_terms ) ) { + wp_set_object_terms( $post_id, [], 'product_tag' ); + continue; + } - return $new_term['term_id']; - }, $terms - ); + $terms_to_set = []; + $terms_array = is_array( $posted_terms ) ? $posted_terms : [ $posted_terms ]; + + foreach ( $terms_array as $term ) { + if ( is_numeric( $term ) ) { + // If ID is provided, get the term name + $term_obj = get_term( $term, 'product_tag' ); + if ( $term_obj && ! is_wp_error( $term_obj ) ) { + $terms_to_set[] = $term_obj->name; + } + } else { + // If name is provided, use it directly + $terms_to_set[] = $term; + } + } - $taxonomy_name = array_filter( $terms ); + if ( ! empty( $terms_to_set ) ) { + wp_set_post_terms( $post_id, $terms_to_set, 'product_tag', false ); } + continue; } - // At this point $taxonomy_name should be a single id or array of ids - if ( isset( $taxonomy_name ) && $taxonomy_name != 0 && $taxonomy_name != -1 ) { - if ( is_object_in_taxonomy( $this->form_settings['post_type'], $taxonomy['name'] ) ) { - $tax = $taxonomy_name; - // if it's not an array, make it one - if ( ! is_array( $tax ) ) { - $tax = [ $tax ]; + // Handle other WooCommerce taxonomies if WooCommerce is enabled + if ( $is_woo_taxonomy && ( + 'pa_' === substr( $taxonomy_name, 0, 3 ) || + in_array( $taxonomy_name, [ 'product_shipping_class', 'product_type', 'product_visibility' ] ) + ) ) { + // Special handling for shipping class + if ( 'product_shipping_class' === $taxonomy_name ) { + if ( empty( $posted_terms ) || '0' === $posted_terms || '' === $posted_terms ) { + wp_set_object_terms( $post_id, [], 'product_shipping_class' ); + } else { + wp_set_object_terms( $post_id, $posted_terms, 'product_shipping_class' ); } + } else { + wp_set_object_terms( $post_id, $posted_terms, $taxonomy_name ); + } + + // For product attributes, add to WooCommerce attributes + if ( 'pa_' === substr( $taxonomy_name, 0, 3 ) ) { + $woo_attr[$taxonomy_name] = [ + 'name' => $taxonomy_name, + 'value' => '', + 'is_visible' => isset( $taxonomy['woo_attr_vis'] ) && 'yes' === $taxonomy['woo_attr_vis'] ? 1 : 0, + 'is_variation' => 0, + 'is_taxonomy' => 1, + 'position' => 0 + ]; + } + continue; + } - if ( $taxonomy['type'] == 'text' ) { - wp_set_object_terms( $post_id, $taxonomy_name, $taxonomy['name'] ); + $is_hierarchical = is_taxonomy_hierarchical( $taxonomy_name ); + + // Process terms based on taxonomy type and input format + if ( 'text' === $taxonomy['type'] ) { + // Handle free text input + $terms = is_array( $posted_terms ) ? $posted_terms : explode( ',', $posted_terms ); + $terms = array_map( 'trim', $terms ); + $term_ids = []; + + foreach ( $terms as $term ) { + if ( empty( $term ) ) { + continue; + } - // woocommerce check - if ( isset( $taxonomy['woo_attr'] ) && $taxonomy['woo_attr'] == 'yes' && ! empty( $taxonomy_name ) ) { - $woo_attr[ $taxonomy['name'] ] = $this->woo_attribute( $taxonomy ); + $existing = term_exists( $term, $taxonomy_name ); + if ( ! $existing ) { + $new_term = wp_insert_term( $term, $taxonomy_name ); + if ( ! is_wp_error( $new_term ) ) { + $term_ids[] = $new_term['term_id']; } } else { - if ( is_taxonomy_hierarchical( $taxonomy['name'] ) ) { - wp_set_post_terms( $post_id, $taxonomy_name, $taxonomy['name'] ); - - // woocommerce check - if ( isset( $taxonomy['woo_attr'] ) && $taxonomy['woo_attr'] == 'yes' && ! empty( $taxonomy_name ) ) { - $woo_attr[ $taxonomy['name'] ] = $this->woo_attribute( $taxonomy ); - } - } else { - if ( $tax ) { - $non_hierarchical = []; - - foreach ( $tax as $value ) { - $term = get_term_by( 'id', $value, $taxonomy['name'] ); - - if ( $term && ! is_wp_error( $term ) ) { - $non_hierarchical[] = $term->name; - } - } + $term_ids[] = $existing['term_id']; + } + } - wp_set_post_terms( $post_id, $non_hierarchical, $taxonomy['name'] ); + if ( ! empty( $term_ids ) ) { + wp_set_object_terms( $post_id, $term_ids, $taxonomy_name ); + } + } else { + // Handle select/multiselect/checkbox inputs + $terms = is_array( $posted_terms ) ? $posted_terms : [ $posted_terms ]; + $term_ids = array(); + + foreach ( $terms as $term ) { + if ( is_numeric( $term ) ) { + // If term ID is provided + $term_ids[] = intval( $term ); + } else { + // If term name is provided + $existing = term_exists( $term, $taxonomy_name ); + if ( $existing ) { + $term_ids[] = $existing['term_id']; + } + } + } - // woocommerce check - if ( isset( $taxonomy['woo_attr'] ) && $taxonomy['woo_attr'] == 'yes' && ! empty( $_POST[ $taxonomy['name'] ] ) ) { - $woo_attr[ $taxonomy['name'] ] = $this->woo_attribute( $taxonomy ); - } + if ( ! empty( $term_ids ) ) { + if ( $is_hierarchical ) { + wp_set_object_terms( $post_id, $term_ids, $taxonomy_name ); + } else { + // For non-hierarchical taxonomies like tags + $terms = array(); + foreach ( $term_ids as $term_id ) { + $term = get_term( $term_id, $taxonomy_name ); + if ( $term && ! is_wp_error( $term ) ) { + $terms[] = $term->name; } - } // hierarchical - } // is text - } // is object tax - } // isset tax - - else { - if ( isset( $taxonomy_name ) && 0 === absint( $taxonomy_name ) ) { - wp_set_post_terms( $post_id, $taxonomy_name, $taxonomy['name'] ); - } + } + wp_set_post_terms( $post_id, $terms, $taxonomy_name ); + } - if ( ! isset( $taxonomy['woo_attr'] ) ) { - $this->set_default_taxonomy( $post_id ); + // Handle WooCommerce attributes if needed + if ( isset( $taxonomy['woo_attr'] ) && 'yes' === $taxonomy['woo_attr'] ) { + $woo_attr[ $taxonomy_name ] = $this->woo_attribute( [ + 'name' => $taxonomy_name, + 'terms' => $term_ids, + 'woo_attr_vis' => $taxonomy['woo_attr_vis'] ?? 'yes' + ] ); + } } } } - // if a woocommerce attribute - if ( $woo_attr ) { + // Update WooCommerce attributes if any + if ( ! empty( $woo_attr ) ) { update_post_meta( $post_id, '_product_attributes', $woo_attr ); } @@ -598,7 +718,7 @@ public static function prepare_meta_fields( $meta_vars ) { $repeater_value = wp_unslash( $_POST[ $value['name'] ] ); // WPCS: sanitization ok. // if it is a multi column repeat field - if ( isset( $value['multiple'] ) && $value['multiple'] == 'true' ) { + if ( isset( $value['multiple'] ) && 'true' === $value['multiple'] ) { // if there's any items in the array, process it if ( $repeater_value ) { @@ -682,9 +802,9 @@ public static function prepare_meta_fields( $meta_vars ) { if ( ! empty( $value_name ) && is_array( $value_name ) ) { $acf_compatibility = wpuf_get_option( 'wpuf_compatibility_acf', 'wpuf_general', 'no' ); - if ( $value['input_type'] == 'address' ) { + if ( 'address' === $value['input_type'] ) { $meta_key_value[ $value['name'] ] = $value_name; - } elseif ( ! empty( $acf_compatibility ) && $acf_compatibility == 'yes' ) { + } elseif ( ! empty( $acf_compatibility ) && 'yes' === $acf_compatibility ) { $meta_key_value[ $value['name'] ] = $value_name; } else { $meta_key_value[ $value['name'] ] = implode( self::$separator, $value_name ); @@ -739,14 +859,51 @@ public function search( $the_array, $key, $value ) { */ public function woo_attribute( $taxonomy ) { check_ajax_referer( 'wpuf_form_add' ); - $taxonomy_name = isset( $_POST[ $taxonomy['name'] ] ) ? sanitize_text_field( wp_unslash( $_POST[ $taxonomy['name'] ] ) ) : ''; - + + // Special handling for product categories + if ( 'product_cat' === $taxonomy['name'] ) { + return []; + } + + $terms = $taxonomy['terms'] ?? []; + + if ( ! is_array( $terms ) ) { + $terms = [ $terms ]; + } + + // Convert term IDs to term values for WooCommerce + $term_values = []; + foreach ( $terms as $term ) { + if ( empty( $term ) ) { + continue; + } + + if ( is_numeric( $term ) ) { + $term_obj = get_term( $term, $taxonomy['name'] ); + if ( $term_obj && ! is_wp_error( $term_obj ) ) { + $term_values[] = $term_obj->name; + } + } else { + // For text inputs, check if term exists or create it + $existing_term = term_exists( $term, $taxonomy['name'] ); + if ( ! $existing_term ) { + $new_term = wp_insert_term( $term, $taxonomy['name'] ); + if ( ! is_wp_error( $new_term ) ) { + $term_values[] = $term; + } + } else { + $term_values[] = $term; + } + } + } + return [ - 'name' => ! empty( $taxonomy['name'] ) ? $taxonomy['name'] : '', - 'value' => $taxonomy_name, + 'name' => $taxonomy['name'], + 'value' => implode( ' | ', array_filter( $term_values ) ), 'is_visible' => ! empty( $taxonomy['woo_attr_vis'] ) && ( 'yes' === $taxonomy['woo_attr_vis'] ) ? 1 : 0, 'is_variation' => 0, 'is_taxonomy' => 1, + 'position' => 0, ]; } } From fe651d1963be997a565661efc0daaafa8390515e Mon Sep 17 00:00:00 2001 From: arifulhoque7 Date: Wed, 30 Jul 2025 11:14:08 +0600 Subject: [PATCH 2/8] fix: PR review incorporate --- includes/Traits/FieldableTrait.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/Traits/FieldableTrait.php b/includes/Traits/FieldableTrait.php index cf4ac11e8..53223d1ed 100644 --- a/includes/Traits/FieldableTrait.php +++ b/includes/Traits/FieldableTrait.php @@ -471,7 +471,7 @@ public function set_custom_taxonomy( $post_id, $taxonomy_vars ) { } // Check if this is a WooCommerce enabled taxonomy - $is_woo_taxonomy = isset( $taxonomy['is_woocommerce'] ) && wpuf_is_checkbox_or_toggle_on( $taxonomy['is_woocommerce'] ); + $is_woo_taxonomy = isset( $taxonomy['woo_attr'] ) && wpuf_is_checkbox_or_toggle_on( $taxonomy['woo_attr'] ); // Special handling for product categories if WooCommerce is enabled if ( $is_woo_taxonomy && 'product_cat' === $taxonomy_name ) { @@ -566,7 +566,7 @@ public function set_custom_taxonomy( $post_id, $taxonomy_vars ) { } // For product attributes, add to WooCommerce attributes - if ( 'pa_' === substr( $taxonomy_name, 0, 3 ) ) { + if ( $is_woo_taxonomy && 'pa_' === substr( $taxonomy_name, 0, 3 ) ) { $woo_attr[$taxonomy_name] = [ 'name' => $taxonomy_name, 'value' => '', From 165b87b4fd1cb36af1c073bb002fc7dc6b588806 Mon Sep 17 00:00:00 2001 From: arifulhoque7 Date: Wed, 30 Jul 2025 15:00:43 +0600 Subject: [PATCH 3/8] fix: code review issues: --- includes/Traits/FieldableTrait.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/Traits/FieldableTrait.php b/includes/Traits/FieldableTrait.php index 53223d1ed..60052d147 100644 --- a/includes/Traits/FieldableTrait.php +++ b/includes/Traits/FieldableTrait.php @@ -566,7 +566,7 @@ public function set_custom_taxonomy( $post_id, $taxonomy_vars ) { } // For product attributes, add to WooCommerce attributes - if ( $is_woo_taxonomy && 'pa_' === substr( $taxonomy_name, 0, 3 ) ) { + if ( $is_woo_taxonomy ) { $woo_attr[$taxonomy_name] = [ 'name' => $taxonomy_name, 'value' => '', From ef6b970a1529ca2a4706af78fc289b2a1cf46b25 Mon Sep 17 00:00:00 2001 From: arifulhoque7 Date: Fri, 1 Aug 2025 12:39:12 +0600 Subject: [PATCH 4/8] fix: issues for check the product_terms --- includes/Ajax/Frontend_Form_Ajax.php | 6 + includes/Frontend/Frontend_Form.php | 5 + includes/Traits/FieldableTrait.php | 284 ++++++++++++++++++++++++++- 3 files changed, 285 insertions(+), 10 deletions(-) diff --git a/includes/Ajax/Frontend_Form_Ajax.php b/includes/Ajax/Frontend_Form_Ajax.php index f513304e2..e1c46ecc1 100644 --- a/includes/Ajax/Frontend_Form_Ajax.php +++ b/includes/Ajax/Frontend_Form_Ajax.php @@ -35,6 +35,12 @@ class Frontend_Form_Ajax { public function submit_post() { check_ajax_referer( 'wpuf_form_add' ); add_filter( 'wpuf_form_fields', [ $this, 'add_field_settings' ] ); + + // Initialize WooCommerce hooks for proper attribute display + if ( method_exists( $this, 'init_woocommerce_hooks' ) ) { + $this->init_woocommerce_hooks(); + } + @header( 'Content-Type: application/json; charset=' . get_option( 'blog_charset' ) ); $form_id = isset( $_POST['form_id'] ) ? intval( wp_unslash( $_POST['form_id'] ) ) : 0; diff --git a/includes/Frontend/Frontend_Form.php b/includes/Frontend/Frontend_Form.php index 992ad9574..e25b51a4c 100755 --- a/includes/Frontend/Frontend_Form.php +++ b/includes/Frontend/Frontend_Form.php @@ -20,6 +20,11 @@ public function __construct() { add_action( 'wpuf_guest_post_email_verified', [ $this, 'send_mail_to_admin_after_guest_mail_verified' ] ); $this->set_wp_post_types(); + + // Initialize WooCommerce hooks for proper attribute display + if ( method_exists( $this, 'init_woocommerce_hooks' ) ) { + $this->init_woocommerce_hooks(); + } // Enable post edit link for post authors in frontend if ( ! is_admin() ) { diff --git a/includes/Traits/FieldableTrait.php b/includes/Traits/FieldableTrait.php index 60052d147..d9047e655 100644 --- a/includes/Traits/FieldableTrait.php +++ b/includes/Traits/FieldableTrait.php @@ -561,20 +561,66 @@ public function set_custom_taxonomy( $post_id, $taxonomy_vars ) { } else { wp_set_object_terms( $post_id, $posted_terms, 'product_shipping_class' ); } + } elseif ( 'product_visibility' === $taxonomy_name ) { + // For product visibility, always replace existing terms (don't append) + // Clear all existing visibility terms first, then set the new one + wp_set_object_terms( $post_id, [], 'product_visibility' ); + if ( ! empty( $posted_terms ) ) { + wp_set_object_terms( $post_id, $posted_terms, 'product_visibility', false ); + } } else { wp_set_object_terms( $post_id, $posted_terms, $taxonomy_name ); } // For product attributes, add to WooCommerce attributes if ( $is_woo_taxonomy ) { - $woo_attr[$taxonomy_name] = [ - 'name' => $taxonomy_name, - 'value' => '', - 'is_visible' => isset( $taxonomy['woo_attr_vis'] ) && 'yes' === $taxonomy['woo_attr_vis'] ? 1 : 0, - 'is_variation' => 0, - 'is_taxonomy' => 1, - 'position' => 0 - ]; + // Only exclude main categories and tags from additional information display + $excluded_taxonomies = [ 'product_cat', 'product_tag' ]; + $should_exclude = in_array( $taxonomy_name, $excluded_taxonomies ); + + // Special handling for product_brand - exclude if not specifically marked as visible + if ( 'product_brand' === $taxonomy_name && ! isset( $taxonomy['woo_attr_vis'] ) ) { + $should_exclude = true; + } + + if ( ! $should_exclude ) { + // Use form-level label first, then fallback to other methods + $attribute_label = ''; + + // First priority: Use the label from the form field configuration + if ( ! empty( $taxonomy['label'] ) ) { + $attribute_label = $taxonomy['label']; + } else { + // Second priority: Try WooCommerce attribute label + $attribute_label = wc_attribute_label( $taxonomy_name ); + if ( empty( $attribute_label ) ) { + // Final fallback: Create proper labels for core WooCommerce taxonomies + switch ( $taxonomy_name ) { + case 'product_shipping_class': + $attribute_label = 'Product Shipping Class'; + break; + case 'product_visibility': + $attribute_label = 'Product Visibility'; + break; + case 'product_type': + $attribute_label = 'Product Type'; + break; + default: + $attribute_label = ucwords( str_replace( [ '_', 'pa_' ], ' ', $taxonomy_name ) ); + } + } + } + + $woo_attr[$taxonomy_name] = [ + 'name' => $taxonomy_name, + 'value' => '', + 'is_visible' => isset( $taxonomy['woo_attr_vis'] ) && wpuf_is_checkbox_or_toggle_on( $taxonomy['woo_attr_vis'] ) ? 1 : 0, + 'is_variation' => 0, + 'is_taxonomy' => 1, + 'position' => 0, + 'label' => $attribute_label, + ]; + } } continue; } @@ -860,8 +906,14 @@ public function search( $the_array, $key, $value ) { public function woo_attribute( $taxonomy ) { check_ajax_referer( 'wpuf_form_add' ); - // Special handling for product categories - if ( 'product_cat' === $taxonomy['name'] ) { + // Only exclude main categories and tags from additional information display + $excluded_taxonomies = [ 'product_cat', 'product_tag', 'product_brand' ]; + if ( in_array( $taxonomy['name'], $excluded_taxonomies ) ) { + return []; + } + + // Special handling for product_brand - exclude if not specifically marked as visible + if ( 'product_brand' === $taxonomy['name'] && empty( $taxonomy['woo_attr_vis'] ) ) { return []; } @@ -897,6 +949,21 @@ public function woo_attribute( $taxonomy ) { } } + // Get proper attribute label - prioritize form field label + $attribute_label = ''; + + // First priority: Use the label from the form field configuration + if ( ! empty( $taxonomy['label'] ) ) { + $attribute_label = $taxonomy['label']; + } else { + // Second priority: Try WooCommerce attribute label + $attribute_label = wc_attribute_label( $taxonomy['name'] ); + if ( empty( $attribute_label ) ) { + // Final fallback: format the taxonomy name + $attribute_label = ucwords( str_replace( [ '_', 'pa_' ], ' ', $taxonomy['name'] ) ); + } + } + return [ 'name' => $taxonomy['name'], 'value' => implode( ' | ', array_filter( $term_values ) ), @@ -904,6 +971,203 @@ public function woo_attribute( $taxonomy ) { 'is_variation' => 0, 'is_taxonomy' => 1, 'position' => 0, + 'label' => $attribute_label, // Use form-level label ]; } + + /** + * Initialize WooCommerce hooks + * Call this method when using the trait to set up required filters + * + * @since 4.0.6 + */ + public function init_woocommerce_hooks() { + if ( class_exists( 'WooCommerce' ) ) { + add_filter( 'woocommerce_display_product_attributes', [ $this, 'filter_woocommerce_product_attributes' ], 10, 2 ); + } + } + + /** + * Filter WooCommerce product attributes to exclude main taxonomies and show proper labels + * + * @param array $product_attributes + * @param WC_Product $product + * @return array + */ + public function filter_woocommerce_product_attributes( $product_attributes, $product ) { + // Remove product categories, tags, and brands from additional information + $unwanted_keys = [ 'product_cat', 'product_tag', 'product_brand', 'attribute_product_brand' ]; + foreach ( $unwanted_keys as $unwanted ) { + unset( $product_attributes[ $unwanted ] ); + } + + // For WPUF products, do additional processing + $form_id = get_post_meta( $product->get_id(), '_wpuf_form_id', true ); + if ( ! $form_id ) { + return $product_attributes; + } + + // Get form configuration to access field labels + $form_fields = get_post_meta( $form_id, 'wpuf_form', true ); + $field_labels = []; + + // Extract field labels for taxonomy fields + if ( ! empty( $form_fields ) && is_array( $form_fields ) ) { + foreach ( $form_fields as $field ) { + if ( isset( $field['input_type'] ) && $field['input_type'] === 'taxonomy' && ! empty( $field['name'] ) && ! empty( $field['label'] ) ) { + $field_labels[ $field['name'] ] = $field['label']; + } + } + } + + // Process remaining attributes to ensure proper labels and values + foreach ( $product_attributes as $key => &$attribute ) { + // Skip weight and dimensions as they're handled by WooCommerce + if ( in_array( $key, [ 'weight', 'dimensions' ] ) ) { + continue; + } + + // For attributes with 'attribute_' prefix, extract the actual taxonomy name + $taxonomy_name = $key; + if ( strpos( $key, 'attribute_' ) === 0 ) { + $taxonomy_name = substr( $key, 10 ); // Remove 'attribute_' prefix + } + + // Ensure proper labels for taxonomies - prioritize form-level labels + if ( ! empty( $field_labels[ $taxonomy_name ] ) ) { + // Use form-level label first + $attribute['label'] = $field_labels[ $taxonomy_name ]; + } else { + // Fallback to predefined labels for core WooCommerce taxonomies + switch ( $taxonomy_name ) { + case 'product_shipping_class': + $attribute['label'] = 'Product Shipping Class'; + break; + case 'product_visibility': + $attribute['label'] = 'Product Visibility'; + break; + case 'product_type': + $attribute['label'] = 'Product Type'; + break; + default: + // For other taxonomies, ensure proper label is displayed + if ( taxonomy_exists( $taxonomy_name ) ) { + $taxonomy_obj = get_taxonomy( $taxonomy_name ); + if ( $taxonomy_obj && ! empty( $taxonomy_obj->labels->name ) ) { + $attribute['label'] = $taxonomy_obj->labels->name; + } else { + // Fallback to WooCommerce attribute label function + $wc_label = wc_attribute_label( $taxonomy_name ); + if ( $wc_label && $wc_label !== $taxonomy_name ) { + $attribute['label'] = $wc_label; + } else { + // Final fallback: format the taxonomy name + $attribute['label'] = ucwords( str_replace( [ '_', '-', 'pa_' ], ' ', $taxonomy_name ) ); + } + } + } + } + } + + // Strip HTML tags from values first (WooCommerce may wrap values in HTML) + if ( ! empty( $attribute['value'] ) ) { + $attribute['value'] = wp_strip_all_tags( $attribute['value'] ); + } + + // Ensure values are displayed as term names, not IDs + if ( taxonomy_exists( $taxonomy_name ) ) { + + $terms = get_the_terms( $product->get_id(), $taxonomy_name ); + if ( $terms && ! is_wp_error( $terms ) ) { + $term_names = []; + foreach ( $terms as $term ) { + // Special handling for certain taxonomies + if ( 'product_shipping_class' === $taxonomy_name && '-1' === $term->name ) { + $term_names[] = 'No shipping class'; + } elseif ( 'product_shipping_class' === $taxonomy_name && is_numeric( $term->name ) ) { + // If shipping class term name is numeric, it might be referencing another term ID + $real_term = get_term( intval( $term->name ), $taxonomy_name ); + if ( $real_term && ! is_wp_error( $real_term ) ) { + $term_names[] = $real_term->name; + } else { + $term_names[] = $term->name; + } + } elseif ( 'product_visibility' === $taxonomy_name ) { + // Map WooCommerce visibility terms to user-friendly names + switch ( $term->name ) { + case 'exclude-from-catalog': + $term_names[] = 'Exclude from catalog'; + break; + case 'exclude-from-search': + $term_names[] = 'Exclude from search'; + break; + case 'outofstock': + $term_names[] = 'Out of stock'; + break; + case 'featured': + $term_names[] = 'Featured'; + break; + case 'rated-1': + $term_names[] = 'Rated 1'; + break; + case 'rated-2': + $term_names[] = 'Rated 2'; + break; + case 'rated-3': + $term_names[] = 'Rated 3'; + break; + case 'rated-4': + $term_names[] = 'Rated 4'; + break; + case 'rated-5': + $term_names[] = 'Rated 5'; + break; + default: + $term_names[] = ucwords( str_replace( '-', ' ', $term->name ) ); + } + } else { + $term_names[] = $term->name; + } + } + if ( ! empty( $term_names ) ) { + $attribute['value'] = implode( ', ', $term_names ); + } + } else { + // If no terms found via get_the_terms, but attribute has a value, + // try to convert ID values to term names + if ( ! empty( $attribute['value'] ) ) { + $value_parts = explode( ', ', $attribute['value'] ); + $converted_values = []; + + foreach ( $value_parts as $part ) { + $part = trim( $part ); + // Check if it's a numeric ID + if ( is_numeric( $part ) ) { + $term = get_term( $part, $taxonomy_name ); + if ( $term && ! is_wp_error( $term ) ) { + if ( 'product_shipping_class' === $taxonomy_name && '-1' === $term->name ) { + $converted_values[] = 'No shipping class'; + } elseif ( 'product_visibility' === $taxonomy_name ) { + $converted_values[] = ucwords( str_replace( '-', ' ', $term->name ) ); + } else { + $converted_values[] = $term->name; + } + } else { + $converted_values[] = $part; // Keep original if conversion fails + } + } else { + $converted_values[] = $part; // Keep original if not numeric + } + } + + if ( ! empty( $converted_values ) ) { + $attribute['value'] = implode( ', ', $converted_values ); + } + } + } + } + } + + return $product_attributes; + } } From 3898fc8eae32f556369d5ffe70e0a95a3a26179a Mon Sep 17 00:00:00 2001 From: arifulhoque7 Date: Sun, 3 Aug 2025 13:38:08 +0600 Subject: [PATCH 5/8] fix: data not saving --- admin/form-builder/assets/js/form-builder.js | 2 +- assets/css/admin/form-builder.css | 1122 +++++++++++++++++- assets/js-templates/form-components.php | 20 +- assets/js/wpuf-form-builder.js | 2 +- 4 files changed, 1125 insertions(+), 21 deletions(-) diff --git a/admin/form-builder/assets/js/form-builder.js b/admin/form-builder/assets/js/form-builder.js index 283beff05..5368c12f7 100644 --- a/admin/form-builder/assets/js/form-builder.js +++ b/admin/form-builder/assets/js/form-builder.js @@ -136,7 +136,7 @@ }); } - if ( ( payload.field_name === 'name' && payload.value.length - 2 < payload.field_name.length ) || ! state.form_fields[i].hasOwnProperty('is_new') ) { + if ( payload.field_name === 'name' && payload.value.length - 2 < payload.field_name.length ) { continue; } else { state.form_fields[i][payload.field_name] = payload.value; diff --git a/assets/css/admin/form-builder.css b/assets/css/admin/form-builder.css index 3eec38e38..3755aecd8 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; @@ -3066,6 +4103,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, width: 100% !important; } +.wpuf-w-1 { + width: 0.25rem; +} + .wpuf-w-1\/2 { width: 50%; } @@ -3090,6 +4131,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, width: 3rem; } +.wpuf-w-2 { + width: 0.5rem; +} + .wpuf-w-2\/3 { width: 66.666667%; } @@ -3244,6 +4289,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%; } @@ -3252,6 +4301,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, flex-basis: 20%; } +.wpuf-basis-4 { + flex-basis: 1rem; +} + .wpuf-basis-4\/5 { flex-basis: 80%; } @@ -3265,6 +4318,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)); @@ -3420,6 +4478,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; @@ -3706,6 +4769,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; @@ -3819,6 +4887,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); } @@ -3968,6 +5041,10 @@ input.wpuf-tab:checked + .wpuf-tab-content, stroke: #f9fafb; } +.wpuf-stroke-gray-500 { + stroke: #6b7280; +} + .\!wpuf-p-0 { padding: 0px !important; } @@ -4034,6 +5111,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; @@ -4251,6 +5333,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; } @@ -4699,6 +5785,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); @@ -4734,10 +5826,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/js-templates/form-components.php b/assets/js-templates/form-components.php index adadd650a..371fcace6 100644 --- a/assets/js-templates/form-components.php +++ b/assets/js-templates/form-components.php @@ -1436,15 +1436,17 @@ class="!wpuf-text-base" v-html ="get_term_dropdown_options()"> - +
+
+ +
+