Merge branch 'main' of github.com:matestack/matestack-ui-vuejs into main

Author: jonasjabari

docs/README.md

@@ -18,7 +18,7 @@ Version 3.0.0 was released on the xth of February 2022. Click here for more [det
 
 ****
 
-**If you want to see the docs for Version 2.1, click** [**here**](https://docs.matestack.io/matestack-ui-core/v/2.1/)**:**
+**If you want to see the docs for Version 2.1, click** [**here**](https://docs.matestack.io/matestack-ui-core/v/2.1/)
 {% endhint %}
 
 ## About

docs/SUMMARY.md

@@ -6,16 +6,15 @@
 ## Getting started
 
 * [Installation & Update](getting-started/installation-update.md)
+* [Hello World](getting-started/hello-world.md)
 
-## Built-in Reactivity composed in pure Ruby <a id="built-in-reactivity"></a>
+## Built-in Reactivity composed in pure Ruby <a href="#built-in-reactivity" id="built-in-reactivity"></a>
 
-* [Overview](built-in-reactivity/overview.md)
 * [Emit Client Side Events](built-in-reactivity/emit-client-side-events/README.md)
   * [Onclick Component API](built-in-reactivity/emit-client-side-events/onclick-component-api.md)
 * [Toggle UI States](built-in-reactivity/toggle-ui-states/README.md)
   * [Toggle Component API](built-in-reactivity/toggle-ui-states/toggle-component-api.md)
 * [Call Server Side Actions](built-in-reactivity/call-server-side-actions/README.md)
-  * [Overview](built-in-reactivity/call-server-side-actions/overview.md)
   * [Action Component API](built-in-reactivity/call-server-side-actions/action-component-api.md)
 * [Reactive Forms](built-in-reactivity/reactive-forms/README.md)
   * [Overview](built-in-reactivity/reactive-forms/overview.md)
@@ -32,22 +31,23 @@
   * [Cable Component API](built-in-reactivity/partial-ui-updates/cable-component-api.md)
   * [Isolated Component API](built-in-reactivity/partial-ui-updates/isolated-component-api.md)
 * [Page Transitions](built-in-reactivity/page-transitions/README.md)
-  * [Overview](built-in-reactivity/page-transitions/overview.md)
   * [Transition Component API](built-in-reactivity/page-transitions/transition-component-api.md)
 * [Reactive Collections](built-in-reactivity/reactive-collections/README.md)
-  * [Overview](built-in-reactivity/reactive-collections/overview.md)
-  * [Collection Component API \[WIP\]](built-in-reactivity/reactive-collections/collection-component-api.md)
+  * [Overview & API](built-in-reactivity/reactive-collections/overview.md)
 
-## Custom Reactivity implemented in Vue.js <a id="custom-reactivity"></a>
+## Custom Reactivity implemented in Vue.js <a href="#custom-reactivity" id="custom-reactivity"></a>
 
 * [Custom Vue.js Components](custom-reactivity/custom-vue-js-components.md)
-* [Third party Vue.js components \[WIP\]](custom-reactivity/third-party-vue.js-components-wip.md)
+* [Third party Vue.js Components \[WIP\]](custom-reactivity/third-party-vue.js-components-wip.md)
 * [Matestack's Vue.js APIs \[WIP\]](custom-reactivity/matestacks-vue.js-apis-wip.md)
 * [Matestack's Vuex API \[WIP\]](custom-reactivity/matestacks-vuex-api-wip.md)
+* [Third Party JavaScript \[WIP\]](custom-reactivity/third-party-javascript.md)
 
 ## Integrations
 
 * [Action Cable](integrations/action-cable.md)
 * [Devise](integrations/devise.md)
-* [Authorization \[WIP\]](integrations/authorization.md)
-* [Third Party JavaScript \[WIP\]](integrations/third-party-javascript.md)
+
+***
+
+* [Contribute](contribute.md)

docs/built-in-reactivity/call-server-side-actions/action-component-api.md

@@ -1,6 +1,29 @@
 # Action Component API
 
-The action component allows us to trigger async HTTP requests without Javascript!
+The `action` component can be used to trigger asynchronous requests from - for example a button click - or any other html markup. The `action` components let's us wrap content in an `a` tag which is then clickable and triggers a background request with the configured request method to the configured path and with optionally given params and let's us react to the server response. It can distinguish between a successful and failed response and emit events, transition somewhere, completely redirect and more. You only need to configure it according to your needs.
+
+```ruby
+def response
+  action action_config do
+    button 'Delete'
+  end
+end
+
+def action_config
+  {
+    path: product_path(product),
+    method: :delete,
+    sucess: {
+      transition: {
+        follow_response: true
+      }
+    },
+    failure: {
+      emit: 'deletion-failed'
+    }
+  }
+end
+```
 
 ## Parameters
 
@@ -117,9 +140,9 @@ end
 
 #### Perform redirect
 
-We can also perform a redirect \(full page load\) that only gets triggered on success and also accepts further params:
+We can also perform a redirect (full page load) that only gets triggered on success and also accepts further params:
 
-Please be aware, that emiting a event doen't have an effect when performing a redirect instead of a transition, as the whole page \(including the surrounding app\) gets reloaded!
+Please be aware, that emiting a event doen't have an effect when performing a redirect instead of a transition, as the whole page (including the surrounding app) gets reloaded!
 
 ```ruby
 success: {
@@ -341,7 +364,7 @@ class ExamplePage < Matestack::Ui::Page
 end
 ```
 
-Now, if we click the button and everything goes well \(which should be the case in this very simple example\), we can see the timestamp gets updated - nice!
+Now, if we click the button and everything goes well (which should be the case in this very simple example), we can see the timestamp gets updated - nice!
 
 #### Async request with success event emit used for notification
 
@@ -378,7 +401,7 @@ This time, after clicking our action component we should see the `good job!` mes
 
 #### Async request with failure event emit used for notification
 
-In the examples before, we always assumed \(and made sure\) that things went well. Now, it's the first time to use the `failure_action_test_path` to see how we can notify the user if things go wrong!
+In the examples before, we always assumed (and made sure) that things went well. Now, it's the first time to use the `failure_action_test_path` to see how we can notify the user if things go wrong!
 
 ```ruby
 class ExamplePage < Matestack::Ui::Page
@@ -532,6 +555,6 @@ end
 
 Now, we can visit `localhost:3000/action_test/page1` and see our first page, shown by the `This is Page 1` text.
 
-There, we can click on our button \(`Click me!`\) and get transfered to the second page. There, we see the `This is Page 2` text and, for 300ms, our `server says: good job!` success message. Neat!
+There, we can click on our button (`Click me!`) and get transfered to the second page. There, we see the `This is Page 2` text and, for 300ms, our `server says: good job!` success message. Neat!
 
-If we click the button \(`Click me!`\) on the second page, we get the failure message \(`server says: something went wrong!`\) and get sent back to page 2, just as we wanted to.
+If we click the button (`Click me!`) on the second page, we get the failure message (`server says: something went wrong!`) and get sent back to page 2, just as we wanted to.

docs/built-in-reactivity/call-server-side-actions/overview.md

@@ -1,6 +1,8 @@
 # Onclick Component API
 
-The `onclick` component renders an `a` tag that emits a client side event when the user clicks on it. The onclick component takes a block in order to define its appearance.
+The `onclick` component renders an `a` tag that emits a client side event when the user clicks on it. Other component may react to this event.
+
+The onclick component takes a block in order to define its appearance.
 
 ## Parameters
 
@@ -10,7 +12,7 @@ Takes a string or symbol. An event with this name will be emitted using the Mate
 
 **You currently cannot pass in an event payload.**
 
-### **&block - required**
+### **\&block - required**
 
 The passed in block defines the appearance of the onclick component. The while UI structure defined in this block will be wrapped with an `a` tag
 
@@ -26,10 +28,9 @@ class ExamplePage < Matestack::Ui::Page
       button "rerender something"
     end
     async rerender_on: "abc", id: "some-unique-id" do
-      plain "Render this text when the 'abc' event is emitted"
+      plain "Rerender this text when the 'abc' event is emitted #{DateTime.now}"
     end
   end
 
 end
 ```
-