@mirai/core 0.4.72 → 0.4.73

package/README.md

@@ -92,7 +92,6 @@ Additionally, the bracket binding system provides two different functionalities:
 - **Single brackets**: Used for binding component state variables, allowing dynamic values to be inserted into UI elements.
 - **Double brackets**: Used to bind dictionary keys, making it easy to inject structured data, such as predefined text, into templates or UI components.
 
-
 This system is useful for separating presentation logic from data and allows for more flexibility when developing components.
 
 Example of bracket binding:
@@ -218,7 +217,6 @@ Here’s an example of the CSS variables available for customization:
 
 These CSS variables offer a wide range of customization options, from changing colors and borders to adjusting text and layout. By using them, you can tailor the `<Chat>` component to fit perfectly within the design of your website.
 
-
 ## 2.5 `<Checkout>`
 
 The `<Checkout>` component is the main reservation window, where users can enter their personal details, choose payment methods, and set notifications for the hotel. It also provides a summary of the reservation before the user proceeds with the booking process.
@@ -250,7 +248,6 @@ Additionally, like other components, the `<Deals>` component offers some light v
 
 ## 2.7 `<Environment>`
 
-
 The `<Environment>` component allows you to modify the environment in which the other Mirai components are running. The environment is defined as the combination of language and currency. This component lets you adjust three properties:
 
 - `data-currency:bool`: Controls the visibility of the currency selector (true/false).
@@ -274,7 +271,7 @@ The `<Finder>` component displays the general accommodation search interface. He
 You can customize specific properties using HTML data attributes:
 
 - `data-icon="true"`: Displays an icon on the button instead of the localized search text.
--	`data-inline="false"`: Displays each input in the same format as an `<InputField>`.
+- `data-inline="false"`: Displays each input in the same format as an `<InputField>`.
 - `data-layout="column"`: Displays the component in a column layout (automatically applies on mobile devices).
 
 You can also adjust various visual properties using the CSS variables exposed by the component:
@@ -321,6 +318,36 @@ The following CSS variables are available for customization:
 
 These variables allow you to control the padding, dimensions, and other styling aspects of the calendar, occupation selector, and places fields, offering greater flexibility to align the component with your website’s design.
 
+### Events
+
+The component has in and out events. For change the state you need to publish the event `setStore`. And for know the state changes you need to subscribe the event `finderChange`.
+
+Use of `setStore` event:
+
+```javascript
+window.Mirai.Event.publish('setStore', {
+  chainSelectorValue: 111222,
+  calendar: [new Date(), new Date()],
+  hsri: '02080',
+  //type 1: guest,type 2: adult, type 3: children
+  occupation: [
+    { ages: [null, null], amount: 2, type: 2 },
+    { ages: [3], amount: 1, type: 3 },
+  ],
+  promocode: 'TEST',
+});
+```
+
+You can send one or all values
+
+Use of `finderChange` event:
+
+```javascript
+window.Mirai.Event.subscribe('finderChange', ({ field, previousValue, value } = {}) => {
+  //field can be: place, calendar, occupation, promocode
+});
+```
+
 ## 2.9 `<Header>`
 
 The `<Header>` component is another new addition to the Mirai component suite. It allows you to create a header for your pages that can include:
@@ -447,7 +474,6 @@ The `<Signup>` component displays the registration form for the Mirai platform.
 <div data-mirai-component="signup"></div>
 ```
 
-
 # 3. Development
 
 You have to follow the next steps:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/core",
-  "version": "0.4.72",
+  "version": "0.4.73",
   "source": "src/index.js",
   "repository": "https://gitlab.com/miraicorp/dev/frontend/core",
   "author": "JΛVI <hello@soyjavi.com>",