[update] style changes

Author: serhiipylypchuk1991

docs/api/config/booking-cardshape.md

@@ -31,7 +31,7 @@ To configure the card appearance, in the **cardShape** object you can specify th
 - `category` - (optional) shows/hides a card's name
 - `details` - (optional) shows/hides details
 - `preview` - (optional) shows/hides a preview image
-- `price` - (optional) shows/hides price 
+- `price` - (optional) shows/hides price
 - `review` - (optional) shows/hides rating information
 - `subtitle` - (optional) shows/hides a card's subtitle
 - `title` - (optional) shows/hides a card's title
@@ -40,28 +40,28 @@ To configure the card appearance, in the **cardShape** object you can specify th
 
 ~~~jsx {}
 const defaultCardShape = {
-	category: true,
-	details: true,
-	preview: true,
-	price: true,
-	review: true,
-	subtitle: false,
-	title: true,
+    category: true,
+    details: true,
+    preview: true,
+    price: true,
+    review: true,
+    subtitle: false,
+    title: true
 };
 ~~~
 
 ### Example
 
 ~~~jsx {}
 const cardShape = {
-	review: false,
-	subtitle: false,
-	price: false,
+    review: false,
+    subtitle: false,
+    price: false
 };
 
 new booking.Booking("#root", {
-	cardShape,
-	// other parameters
+    cardShape,
+    // other parameters
 });
 ~~~
 

docs/api/config/booking-data.md

@@ -14,39 +14,38 @@ description: You can learn about the cards config in the documentation of the DH
 
 ~~~jsx {}
 data: [
-	{
-		id: string | number,
-		title: string,
-		category?: string,
-		subtitle?: string,
-		details?: string,
-		preview?: string, // link to image
-		price?: string,
-		review?: {
-			stars: number,
-			count: number,
-		},
-		slots: [
-			{
-				from: number | string, // hours from 0 to 24
-				to: number | string, // hours from 0 to 24
-				size?: number, // length of slot in minutes
-				gap?: number, // gap between slots in minutes
-				days?: array, // days of week for which rule can be applied from 0 to 6
-				dates?: array, // exact dates for which rule can be applied, timestamps
-			}, 
-		],
-
-		availableSlots?: [
-			{
-				id: string|number,
-				time:[number, number] //timestamp, length in minutes
-			},
-		],
-		usedSlots?: number[], //timestamps
-		slotSize?: number, //minutes
-		slotGap?: number, //minutes
-	}, 
+    {
+        id: string | number,
+        title: string,
+        category?: string,
+        subtitle?: string,
+        details?: string,
+        preview?: string, // link to image
+        price?: string,
+        review?: {
+            stars: number,
+            count: number
+        },
+        slots: [
+            {
+                from: number | string, // hours from 0 to 24
+                to: number | string, // hours from 0 to 24
+                size?: number, // length of slot in minutes
+                gap?: number, // gap between slots in minutes
+                days?: array, // days of week for which rule can be applied from 0 to 6
+                dates?: array, // exact dates for which rule can be applied, timestamps
+            }
+        ],
+        availableSlots?: [
+            {
+                id: string|number,
+                time:[number, number] //timestamp, length in minutes
+            },
+        ],
+        usedSlots?: number[], //timestamps
+        slotSize?: number, //minutes
+        slotGap?: number //minutes
+    }
 ];
 ~~~
 
@@ -67,14 +66,15 @@ For each card object you can specify the following parameters:
 - `slots` - (required) an array of objects with the following parameters for each slot object:
   - `from` - (required) a slot start time in hours from 0 to 24
   - `to` - (required) a slot end time in hours from 0 to 24
-  - `size` - (optional) the duration of one slot in minutes 
+  - `size` - (optional) the duration of one slot in minutes
   - `gap` - (optional) the gap between slots in minutes; 0 is set by default
   - `days` - (optional) days of the week when a slot is available for booking; possible values: from 0 to 6 where 0 is Sunday and 6 is Saturday; if no days are specified, all days are applied by default; if days are specified, the slot parameters (**to**, **from**, **size**, **gap**) defined for these days will be applied
-  - `dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (**to**, **from**, **size**, **gap**) for these specified dates will be applied 
+  - `dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (**to**, **from**, **size**, **gap**) for these specified dates will be applied
+
 :::note
-Slot parameters specified for days will override common parameters defined for all days. 
-Slot parameters specified for dates will override parameters defined for specific days and all days. 
-If several slots objects are created for the same day, make sure that slots time ranges (from and to) with **different** size and gap do not overlap, otherwise all slots data for these days will not be applied. 
+Slot parameters specified for days will override common parameters defined for all days.
+Slot parameters specified for dates will override parameters defined for specific days and all days.
+If several slots objects are created for the same day, make sure that slots time ranges (from and to) with **different** size and gap do not overlap, otherwise all slots data for these days will not be applied.
 :::
 
 - `availableSlots` - (optional) an array of timestamps of available slots in milliseconds; if available slots are specified here, all slots from the `slots` array are ignored (i.e., become unavailable); each object in the array has the next parameters:
@@ -86,7 +86,7 @@ If several slots objects are created for the same day, make sure that slots time
 
 ### Example
 
-~~~jsx 
+~~~jsx {}
 const data = [
     {
         id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
@@ -99,15 +99,15 @@ const data = [
         price: "37 $",
         review: {
             star: 1,
-            count: 40,
+            count: 40
         },
         slots: [
             {
                 //a common slot rule for all days except those specified for the days and dates below
                 from: 14,
                 to: 17,
                 size: 30,
-                gap: 10,
+                gap: 10
             },
             {
                 //this rule is applied to days 2 and 5 (Tuesdays and Fridays) except
@@ -116,7 +116,7 @@ const data = [
                 to: 17,
                 size: 50,
                 gap: 20,
-                days: [2, 5],
+                days: [2, 5]
             },
             {
                 //this rule is applied to days 3 and 4 (Wednesdays and Thursdays) and exact date
@@ -126,13 +126,14 @@ const data = [
                 gap: 20,
                 days: [3, 4],
                 dates: [ 1683234000000 ] // exact upcoming date (May 5, 2023, Friday)
-            },
-        ],
-    },]
-		
+            }
+        ]
+    }
+];
+
 new booking.Booking("#root", {
-	data,
-	// other parameters
+    data,
+    // other parameters
 });
 ~~~
 

docs/api/config/booking-end.md

@@ -24,10 +24,8 @@ end?: Date;
 
 ~~~jsx {}
 new booking.Booking("#root", {
-	data,
-	end: new Date(2025, 11, 11),
-	// other parameters
+    data,
+    end: new Date(2025, 11, 11),
+    // other parameters
 });
 ~~~
-
-

docs/api/config/booking-filtershape.md

@@ -17,14 +17,14 @@ filterShape: {
     text?: boolean | [{
         id: string,
         label?: string,
-        suggest?: boolean, 
+        suggest?: boolean
     }],
     date?: boolean,
     time?: boolean | [{
         from: number | string,
         to: number | string,
-        label?: string,
-	}],
+        label?: string
+    }],
     autoApply?: boolean
 };
 ~~~
@@ -33,7 +33,7 @@ filterShape: {
 
 - `text` - (optional) if **true**, the text input field is displayed (default); if **false**, the text field is hidden
   - `id` - (required) the id of a card
-  - `suggest` - (required) if **true**, the auto-complete is enabled and the values (from the [`data`](/api/config/booking-data) object) that match a user's input text will be displayed 
+  - `suggest` - (required) if **true**, the auto-complete is enabled and the values (from the [`data`](/api/config/booking-data) object) that match a user's input text will be displayed
   - `label` - (optional) the label for the property from the `data` object. See [Default config](#default-config) below.
 - `date` - (optional) shows/hides the date field; **true** is set by default (the field is shown)
 - `time` - (optional) shows/hides the time field. If set to **true**, it takes an array of objects with default time options for a slot. For each object you can specify the following parameters:
@@ -49,18 +49,18 @@ If the `time` parameters are not set, the default values are applied: see [Defau
 const defaultTimeRanges = [
     { from: 8, to: 12, label: "Morning" },
     { from: 12, to: 17, label: "Afternoon" },
-    { from: 17, to: 20, label: "Evening" },
+    { from: 17, to: 20, label: "Evening" }
 ];
 
 const defaultFilterShape = {
     text: [
         { id: "category", label: "speciality", suggest: true },
         { id: "title", label: "specialist", suggest: true },
-        { id: "details", label: "location" },
+        { id: "details", label: "location" }
     ],
     date: true,
     time: defaultTimeRanges,
-    autoApply: false,
+    autoApply: false
 };
 ~~~
 
@@ -73,8 +73,8 @@ const filterShape = {
     time: [
         { from: 8, to: 11, label: "Morning" },
         { from: 12, to: 18, label: "Afternoon" },
-        { from: 18, to: 21, label: "Evening" },
-    ],
+        { from: 18, to: 21, label: "Evening" }
+    ]
 };
 
 new booking.Booking("#root", {
@@ -86,4 +86,4 @@ new booking.Booking("#root", {
 
 The snippet below demonstrates how to configure filter: 
 
-<iframe src="https://snippet.dhtmlx.com/b5uj78bs?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+<iframe src="https://snippet.dhtmlx.com/b5uj78bs?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>