glib-web 4.44.4 → 5.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9e67baf48a78976b4b693d5c87c96ef05320e8758575816e88b2c342954eceb5
-  data.tar.gz: b450d88751a87221bbeb4499000c85d21f358a171fa4506ea33af7dabfbfb02f
+  metadata.gz: 7f82cbe6244860401184fb219b90a22f66839abbb8c0348fe324d5662491ff53
+  data.tar.gz: 94f1678aaf84f214ab0fa9d4f913a3e2df19a6b0eacb54c8967201a26abe2569
 SHA512:
-  metadata.gz: 4a02652c1ff1ecc421faf705052ca63efbe5c317113127c0031b66306e3b4919fb68ebd83ea059c294635e7d17e5c0584a9c4f7840f5535bc1d7c18d16394c26
-  data.tar.gz: d7354cb5e26276e41ed369ca681a8dfa75625477922646998a87046b74b012bfa8830e299b18951eedcb1b9938f4b92384fe21d4edf1b7d81ba7db2615c12d3f
+  metadata.gz: 5c097c0f55e226e9960f13da37912392729a8f7acbfc2b314b18b146e340be7747aa61d7a58fdc13b1dcd77e00e1f157e0fee8f6dea6f1265d8bfe4389939b27
+  data.tar.gz: 3442a41bf7b197ce9c6a0bebd2cbe95bff08d0e97f3db65e70e5e0264bcdf6056b6942bbbdc531e4c028a6a93cdce724cfc69d1590fcb54e5ae9e973bad3f2ba

data/app/helpers/glib/json_ui/abstract_builder.rb

@@ -65,7 +65,7 @@ module Glib
 
           required_properties = @@_required_properties[self.class.component_name] || []
           required_properties.each do |prop|
-            raise "Property required: #{prop}. Properties provided: #{args}. Component: #{self.class.component_name}" unless args[prop].present?
+            raise "Property required: #{prop}. Properties provided: #{args}. Component: #{self.class.component_name}" if args[prop].nil?
           end
         else
           raise "Invalid properties: #{args}"

data/app/helpers/glib/json_ui/action_builder/browsers.rb

@@ -14,9 +14,7 @@ class Glib::JsonUi::ActionBuilder
       action :onSet
       bool :replace, cache: true
 
-      def created
-        replace(true) unless instance_variable_defined?(:@replace)
-      end
+      required :replace
     end
   end
 end

data/app/helpers/glib/json_ui/view_builder/fields.rb

@@ -751,59 +751,6 @@ class Glib::JsonUi::ViewBuilder
       end
     end
 
-    # deprecated
-    class MultiUpload < AbstractField
-      include Glib::JsonUi::Default
-      include Glib::JsonUi::Upload
-      include Glib::JsonUi::FileUploadErrorHandler
-
-      array :files
-      string :uploadTitle
-      action :onFinishUpload
-      string :url # http post end point if you don't want to use onFinishUpload
-
-      def files(values)
-        @files = values
-      end
-
-      def responseMessages(values)
-        @responseMessages = values
-      end
-
-      def created
-        super
-        file_upload_error_handler_on_create
-
-        @placeholder ||= I18n.t('glib.multi_upload.placeholder', default: nil)
-        @hint ||= I18n.t('glib.multi_upload.hint', default: nil)
-
-        ['200', '403', '401', 'else'].each do |status|
-          key = "glib.multi_upload.responseMessages.#{status}"
-          @responseMessages[status] = I18n.t(key) if I18n.exists?(key)
-        end
-        json.responseMessages(
-          (@responseMessages || {}).reverse_merge(
-            '200' => 'Completed',
-            '403' => 'Forbidden',
-            '401' => 'Session expired',
-            'else' => 'Failed'
-          )
-        )
-
-        json.placeholder @placeholder if @placeholder
-        json.hint @hint if @hint
-
-        if @prop && context
-          # association = form.nested_associations.last
-          # context = association || form
-
-          @files ||= context.field_value(@prop, collect_ids: false).to_a.map { |file| { name: file.blob&.filename, signed_id: file.signed_id, url: url_for(file) } }
-        end
-
-        json.files @files if @files.present?
-      end
-    end
-
     class Upload < AbstractField
       include Glib::JsonUi::Upload
       include Glib::JsonUi::FileUploadErrorHandler

data/app/views/json_ui/garage/forms/file_upload.json.jbuilder

@@ -39,71 +39,6 @@ page.form options.merge(childViews: ->(form) do
   # form.fields_multiImage name: 'user[photos][]', width: 'matchParent', label: 'Avatar', accepts: rules, directUploadUrl: glib_direct_uploads_url,
   #   placeholderView: { type: 'avatar', width: 100, height: 100, url: 'data:image/jpeg;base64,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' }
 
-  form.spacer height: 16
-  form.label text: 'Simple file upload'
-  form.spacer height: 8
-  form.fields_multiUpload \
-    name: 'user[multi][]',
-    id: 'upload_1',
-    width: 360,
-    accepts: {
-      fileType: 'image',
-      maxFileSize: 100,
-      maxFileLength: 2,
-      maxFileLengthErrorText: {
-        body: 'try with a smaller number of files',
-        button: 'OK'
-      }
-     },
-    directUploadUrl: glib_direct_uploads_url,
-    uploadTitle: 'Files uploaded:',
-    storagePrefix: 'glib',
-    metadata: {
-      foo: 'bar',
-      zoo: 'baz'
-    },
-    # tagging: 'key=value&key1=value1',
-    tags: { key: 'value', key1: 'value1' },
-    files: [
-      { name: 'File (Example)', signed_id: ActiveStorage::Attachment.first&.signed_id }
-    ]
-  form.button text: 'Clear files', onClick: ->(action) do
-    action.components_set targetId: 'upload_1', data: { files: [], value: nil }
-  end
-
-  form.spacer height: 16
-  form.label text: 'File upload with onFinishUpload'
-  form.spacer height: 8
-  form.fields_multiUpload \
-    name: 'user[multi2][]',
-    id: 'upload_2',
-    width: 360,
-    accepts: {
-      fileType: 'image',
-      maxFileSize: 5000
-    },
-    directUploadUrl: glib_direct_uploads_url,
-    uploadTitle: 'Files uploaded:',
-    onFinishUpload: ->(action) { action.forms_submit }
-  form.button text: 'Populate files', onClick: ->(action) do
-    action.components_set targetId: 'upload_2', data: {
-      files: [
-        { name: 'File (Example)', signed_id: ActiveStorage::Attachment.last&.signed_id }
-      ],
-      value: [1]
-    }
-  end
-
-  form.spacer height: 16
-  form.label text: 'File upload without directUploadUrl'
-  form.spacer height: 8
-  form.fields_multiUpload \
-    name: 'user[multi3][]',
-    width: 360,
-    accepts: { fileType: 'image', maxFileSize: 100, maxFileLength: 2 },
-    uploadTitle: 'Files uploaded:',
-    onFinishUpload: ->(action) { action.forms_submit }
-
   form.spacer height: 16
   form.label text: 'Sign'
   form.spacer height: 8

data/app/views/json_ui/garage/test_page/_header.json.jbuilder

@@ -18,7 +18,6 @@ nav_groups = {
     'snackbars',
     'storage_items',
     'timeouts',
-    'window',
     'windows'
   ],
   'Forms' => [
@@ -26,14 +25,22 @@ nav_groups = {
     'dirty_state',
     'fields_select',
     'fields_dynamicSelect',
+    'fields_date_time',
+    'fields_location',
+    'fields_phone',
+    'fields_otp',
+    'fields_rating',
+    'fields_richText',
     'fields_sign',
+    'fields_stripeToken',
+    'fields_stripeExternalAccount',
+    'fields_creditCard',
     'fields_timer',
     'fields_upload',
     'fields_url_fragment',
     'fields_captcha',
     'form',
     'form_dynamic',
-    'multiupload',
     'selectable'
   ],
   'Lists' => [

data/app/views/json_ui/garage/test_page/auth.json.jbuilder

@@ -107,6 +107,43 @@ page.body(
             )
           end
         )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'auth/restart'
+        res.spacer height: 8
+        res.button(
+          text: 'auth/restart',
+          onClick: ->(action) do
+            action.auth_restart
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'auth/creditCard'
+        res.label text: 'Requires a Stripe public key and a client secret from your server.'
+        res.spacer height: 8
+        res.button(
+          text: 'auth/creditCard (setup only)',
+          onClick: ->(action) do
+            action.auth_creditCard(
+              publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
+              clientSecret: 'set_your_client_secret',
+              setupOnly: true,
+              onSuccess: ->(subaction) do
+                subaction.snackbars_alert message: 'Card setup succeeded', styleClass: 'success'
+              end,
+              onFailure: ->(subaction) do
+                subaction.snackbars_alert message: 'Card setup failed', styleClass: 'danger'
+              end
+            )
+          end
+        )
       end
     )
   end

data/app/views/json_ui/garage/test_page/browsers.json.jbuilder

@@ -92,6 +92,7 @@ page.body(
           onClick: ->(action) do
             action.browsers_setLocation(
               url: json_ui_garage_url(path: 'forms/generic_post_all'),
+              replace: true,
               onSet: ->(set) do
                 set.runMultiple(
                   childActions: ->(multi) do

data/app/views/json_ui/garage/test_page/dialog.json.jbuilder

@@ -4,35 +4,132 @@ json.title 'Test Page (Form)'
 
 page = json_ui_page json
 
-page.body childViews: ->(body) do
-  render 'json_ui/garage/test_page/header', view: body
-
-  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
-    res.h2 text: 'Dialog'
-    res.spacer height: 8
-    res.button text: 'Dialog updateExisting', onClick: ->(action) do
-      action.runMultiple childActions: ->(saction) do
-        saction.dialogs_show content: ->(dialog) do
-          dialog.body padding: glib_json_padding_body, childViews: ->(sbody) do
-            sbody.h1 text: 'Hello world'
-            sbody.button text: 'change dialog content', onClick: ->(ssaction) do
-              ssaction.dialogs_show updateExisting: true, disableCloseButton: true, content: ->(sdialog) do
-                sdialog.body padding: glib_json_padding_body, childViews: ->(ssbody) do
-                  ssbody.h1 text: 'Hello world (updated)'
-                  ssbody.spacer height: 8
-                  ssbody.button text: 'close', onClick: ->(xaction) do
-                    xaction.dialogs_close
+page.body(
+  childViews: ->(body) do
+    render 'json_ui/garage/test_page/header', view: body
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Dialog'
+        res.spacer height: 8
+        res.button(
+          text: 'Dialog updateExisting',
+          onClick: ->(action) do
+            action.runMultiple(
+              childActions: ->(saction) do
+                saction.dialogs_show(
+                  content: ->(dialog) do
+                    dialog.body(
+                      padding: glib_json_padding_body,
+                      childViews: ->(sbody) do
+                        sbody.h1 text: 'Hello world'
+                        sbody.button(
+                          text: 'change dialog content',
+                          onClick: ->(ssaction) do
+                            ssaction.dialogs_show(
+                              updateExisting: true,
+                              disableCloseButton: true,
+                              content: ->(sdialog) do
+                                sdialog.body(
+                                  padding: glib_json_padding_body,
+                                  childViews: ->(ssbody) do
+                                    ssbody.h1 text: 'Hello world (updated)'
+                                    ssbody.spacer height: 8
+                                    ssbody.button(
+                                      text: 'close',
+                                      onClick: ->(xaction) do
+                                        xaction.dialogs_close
+                                      end
+                                    )
+                                  end
+                                )
+                              end
+                            )
+                          end
+                        )
+                      end
+                    )
                   end
-                end
+                )
               end
+            )
+          end
+        )
+        res.spacer height: 4
+        res.button(
+          text: 'Dialog open',
+          onClick: ->(action) do
+            action.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
+          end
+        )
+        res.spacer height: 4
+        res.button(
+          text: 'Dialog closeAll',
+          onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
+              saction.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
+              saction.timeouts_set interval: 800, onTimeout: ->(ssaction) do
+                ssaction.dialogs_closeAll
+              end
+            end
+          end
+        )
+        res.spacer height: 4
+        res.button(
+          text: 'Dialog reload',
+          onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
+              saction.timeouts_set interval: 800, onTimeout: ->(ssaction) do
+                ssaction.dialogs_reload
+              end
+            end
+          end
+        )
+        res.spacer height: 4
+        res.button(
+          text: 'Dialog notification',
+          onClick: ->(action) do
+            action.dialogs_notification(
+              title: 'Hello World',
+              message: 'This is a notification',
+              onClick: ->(subaction) do
+                subaction.dialogs_alert message: 'Perform action'
+              end
+            )
+          end
+        )
+        res.spacer height: 4
+        res.button(
+          text: 'Dialog oauth',
+          onClick: ->(action) do
+            if respond_to?(:user_facebook_omniauth_authorize_url)
+              provider = {
+                name: 'facebook',
+                webRequestUrl: user_facebook_omniauth_authorize_url(format: nil, _render: nil),
+                requestUrl: user_facebook_omniauth_authorize_url(format: nil),
+                clientId: Devise.omniauth_configs[:facebook].strategy[:client_id],
+                permissions: Devise.omniauth_configs[:facebook].strategy[:scope],
+                redirectUrl: user_facebook_omniauth_callback_url(format: nil)
+              }
+              action.dialogs_oauth(
+                provider: provider,
+                providerParamName: 'session[oauth_provider]',
+                callbackUrlParamName: 'session[[oauth_callback_url]',
+                onSuccess: ->(subaction) do
+                  subaction.http_post(
+                    url: json_ui_garage_url(path: 'actions/dialogs_oauth_post'),
+                    formData: { authenticity_token: form_authenticity_token }
+                  )
+                end
+              )
+            else
+              action.dialogs_alert message: 'To enable this, set up omniauth using devise'
             end
           end
-        end
+        )
       end
-    end
-    res.spacer height: 4
-    res.button text: 'Dialog open', onClick: ->(action) do
-      action.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
-    end
+    )
   end
-end
+)

data/app/views/json_ui/garage/test_page/dirty_state.json.jbuilder

@@ -28,11 +28,6 @@ page.body childViews: ->(body) do
     form.fields_check name: 'user[check][]', checkValue: 'choice2', label: 'choice2'
     form.fields_check name: 'user[check][]', checkValue: 'choice2', label: 'choice3', value: 'choice2'
 
-    form.spacer height: 14
-    form.button text: 'navigate', onClick: ->(action) do
-      action.windows_open updateExisting: true, url: json_ui_garage_url(path: 'test_page/multiupload')
-    end
-
     form.spacer height: 24
     form.panels_split width: 'matchParent', content: ->(split) do
       split.left childViews: ->(left) do

data/app/views/json_ui/garage/test_page/fields_creditCard.json.jbuilder

@@ -0,0 +1,118 @@
+json.title 'Test Page (Fields Credit Card)'
+
+page = json_ui_page json
+
+page.body(
+  childViews: ->(body) do
+    render 'json_ui/garage/test_page/header', view: body
+
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Fields Credit Card'
+        res.spacer height: 8
+        res.label text: 'Credit card entry with tokenization for payment flows.'
+        res.spacer height: 12
+
+        res.panels_form(
+          url: json_ui_garage_url(path: 'forms/generic_post'),
+          method: 'post',
+          childViews: ->(form) do
+            form.h2 text: 'Overview'
+            form.spacer height: 8
+            form.label text: 'Use fields_creditCard to capture card number, expiry, and CVC securely.'
+            form.spacer height: 12
+            form.hr width: 'matchParent'
+            form.spacer height: 12
+
+            form.h2 text: 'Basic example'
+            form.spacer height: 8
+            form.fields_creditCard(
+              id: 'credit_card_basic',
+              name: 'user[credit_card_token]',
+              width: 'matchParent',
+              label: 'Card details',
+              publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
+              onChange: ->(action) do
+                action.logics_set targetId: 'credit_card_status', data: { text: 'Status: card updated' }
+              end
+            )
+            # form.spacer height: 8
+            # form.label id: 'credit_card_status', text: 'Status: idle'
+
+            # form.spacer height: 12
+            # form.hr width: 'matchParent'
+            # form.spacer height: 12
+
+            # form.h2 text: 'Variants/props'
+            # form.spacer height: 8
+            # form.label text: 'Swap between style variants on the same component.'
+            # form.spacer height: 8
+            # form.panels_flow(
+            #   innerPadding: { bottom: 0 },
+            #   width: 'matchParent',
+            #   childViews: ->(flow) do
+            #     flow.button(
+            #       text: 'Default',
+            #       onClick: ->(action) do
+            #         action.components_set targetId: 'credit_card_basic', data: { styleClass: nil, label: 'Card details', hint: nil }
+            #       end
+            #     )
+            #     flow.spacer width: 8
+            #     flow.button(
+            #       text: 'Outlined',
+            #       onClick: ->(action) do
+            #         action.components_set targetId: 'credit_card_basic', data: { styleClass: 'outlined', label: 'Outlined card' }
+            #       end
+            #     )
+            #     flow.spacer width: 8
+            #     flow.button(
+            #       text: 'Individual',
+            #       onClick: ->(action) do
+            #         action.components_set targetId: 'credit_card_basic', data: { styleClass: 'individual', label: 'Personal card', hint: 'Use a personal card' }
+            #       end
+            #     )
+            #   end
+            # )
+
+            # form.spacer height: 12
+            # form.hr width: 'matchParent'
+            # form.spacer height: 12
+
+            # form.h2 text: 'Edge/advanced'
+            # form.spacer height: 8
+            # form.panels_flow(
+            #   innerPadding: { bottom: 0 },
+            #   width: 'matchParent',
+            #   childViews: ->(flow) do
+            #     flow.button(
+            #       text: 'Disable field',
+            #       onClick: ->(action) do
+            #         action.components_set targetId: 'credit_card_basic', data: { disabled: true }
+            #       end
+            #     )
+            #     flow.spacer width: 8
+            #     flow.button(
+            #       text: 'Enable field',
+            #       onClick: ->(action) do
+            #         action.components_set targetId: 'credit_card_basic', data: { disabled: nil }
+            #       end
+            #     )
+            #     flow.spacer width: 8
+            #     flow.button(
+            #       text: 'Clear hint',
+            #       onClick: ->(action) do
+            #         action.components_set targetId: 'credit_card_basic', data: { hint: nil }
+            #       end
+            #     )
+            #   end
+            # )
+
+            form.spacer height: 12
+            form.fields_submit text: 'Submit'
+          end
+        )
+      end
+    )
+  end
+)