# Mobil Geliştirmede Kullanılabilir Komponentler ve Kullanımda Dikkat Edilmesi Gerekenler

## VAutocomplete

The **VAutocomplete component** is a versatile input field that provides users with dynamic suggestions as they type, enhancing the user experience by offering a predictive text feature. This component is ideal for forms or search functionalities where users need to select from a list of predefined options.

**For mobile usage:**

When assigning an object array to the **items prop** of VAutocomplete component, each item in the array must have **text** and **value** keys.

* Assign **text** to the **itemText** prop of the component.
* Assign **value** to the **itemValue** prop of the component.
* If only one value will be displayed (i.e., there are no two different fields like text and value), you can assign the same value to both keys.

## VAppbar

**The VAppBar component** is commonly used to accommodate menu icons, search bars, or images.

You can use the default slot of the VAppBar to incorporate rows, columns, icons, or other assorted components, as illustrated below.

### Props

| Attribute | Description | Type | Default |
| --------- | ------------------------------------------------------------ | ------- | :-----------: |
| absolute | Helps being sized to function as an application layout | Boolean | false |
| app | Allows the selection of date range | | |
| class | Allows custom properties to take effect | String | undefined |
| clippedLeft | | | |
| clippedRight | | | |
| collapse | Controls the state of toolbar that the user interacts with | | |
| dark | Applies dark theme | Boolean | false |
| extended | Extends the size of the toolbar | | |
| fadeImgOnScroll | The background image of a v-app-bar can fade on scroll | | |
| fixed | Applies position:fixed | Boolean | false |
| prominent | Displays a larger vertically centered icon to draw more attention | Boolean | false |
| src | | | |
| visible | | | |
| tabIndex | Determines the order of switching from one component to another with the tab key | String | |

### Mobile Usage

You need to place your components **within the slot of the VAppBar** component. This ensures proper rendering and functionality on mobile devices.

On mobile, the VAppBar component serves as the **top menu** similar to the **nav tag in HTM**L for web usage.

### Usage Scenarios

* When the **app** prop is set to **true**, the VAppBar component can be sized to function as an application layout. This automatically applies the **CSS position:fixed** property to the component, ensuring it remains fixed at the top of the viewport as the user scrolls through the application.

EKRAN 1

* Add a child named **default** of type **slot** in the **Children** section. After adding the **Children**, you should use the **VRow-VCol** structure inside it.
* The VAppbar component must be within a **VContainer**, and you should assign a **value of 0** to the **padding** areas of the **VContainer**.

## VBottomSheet (Web - Mobil Ortak Kullanım)

The **VBottomSheet component**, derived from the VDialog, serves as a versatile element that slides up from the bottom of the screen, providing additional functionality and options within an application. This component's usage is valid for **both mobile and web platforms**, ensuring consistent functionality across different devices.

While bottom navigation components typically house buttons and specific application-level actions, the bottom sheet offers a broader range of content and functionalities.

For more detailed information and examples, you can refer to the VBottomSheet component page LINK EKLENECEK https://v2.vuetifyjs.com/en/components/bottom-sheets/.

### Props

| Attribute | Description | Type | Default |
| --------- | ------------------------------------------------------------ | ------- | :-----------: |
| qValue | Statically display components within the component |String | undefined |
| class | Allows custom properties to take effect | String | undefined |
| dark | Applies dark theme | Boolean | false |
| eager | Ensures that the content of the component is rendered immediately upon mounting | Boolean | false |
| scrollable | It expects a vCard and a vCardText component with a designated height | Boolean | false |
| visible | | | |
| hideOverlay | Prevents the overlay from being displayed along with the bottom sheet | Boolean | false |
| persistent | Helps no being closed by clicking outside them | Boolean | false |

### Usage Scenarios

* If you want to dynamically display components within the component, you should first set the **qValue** of the component to **true** at the desired location, and then call the code to create the dynamic content inside a **setTimeout** function.
* If you want to access the static or dynamic components within the component's content, you should first set the **qValue** of the component to **true**, and then access the components inside using a **setTimeout** function to perform the desired operation.

## VCarousel

The **Vcarousel component** is designed to showcase a large amount of visual content in a dynamic and engaging manner. It enables you to display images, videos, or other multimedia content in a rotating carousel format, allowing users to view multiple items in a slideshow-like fashion.

This component is particularly useful for creating interactive galleries, image sliders, or promotional banners within your application.

For more detailed information and examples, you can refer to the VCarousel component page VCarousel. LINK https://v2.vuetifyjs.com/en/components/carousels/

### VCarouselItem (CarouselItem icine birlesecek.)

The **VCarouselItem component** is used as a child element within the VCarousel component to represent individual items or slides within the carousel.

### Props

### Usage Scenarios

**Mobile: / Note:**

* In the web version, VCarouselItem has a **src prop**, which is not used in mobile. Therefore, instead of using src prop in mobile, you must place a **VImg component** within a **Row-Col structure** to display images.

* **Note:** The default value of the eager property of VCarouselItem component is now set to true. However, if there is a large amount of data, the eager property can be set to false. This can be useful for working with large datasets. **(Bu not Docs'a eklenecek ve Eager prop'u Default degeri true olarak degistirelecek)**

## VCheckbox

The **VCheckbox component** offers you the capability to select between two options. It functions similarly to a switch and is suitable for use in complex forms and checklists. For a simpler version, **v-simple-checkbox** provides a lightweight alternative primarily used in data-table components for selecting **Rows** or displaying inline **Boolean data**.

### Props

### Usage Scenarios

* When using the **VCheckbox** component to link to the terms of agreement in **OnBoarding** screens, if clicking on the label of VCheckbox is not desired, the **label** prop of VCheckbox should not be used. Instead, you should add a separate **VBtn** inside a **VCol** and set the **text** prop of the button to **true** to use it.

## VCol

### Mobile Usage

* When using the **VCol** component, you should always use within a **VRow**.

## VCombobox

### Mobile Usage

* Use **VSelect** or **VAutocomplete** on mobile.

## VContainer

### Mobile Usage

* On mobile, except for dynamic screens, you should use only one **VContainer**.

## VDatePicker

### Mobile Usage

* Use **VInlineDatePicker** on mobile.

## VDialog

The **VDialog component** is used to inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. You can use dialogs sparingly as they are interruptive in nature. For more detailed information, you can refer to the **VDialog component page**. https://v2.vuetifyjs.com/en/components/dialogs/

### Props

### Mobile Usage

* Add **items** to be displayed by adding a **VContainer** inside.
* If the Label won't fit on one line, place it inside a **VRow-VCol** and do not **center center** the **VCol** containing the **Label**.
* If necessary, place the **VRow-VCol** containing the **Label** inside another **VRow-VCol** and set the align-items and justify-content properties of the VCol to **center**.
* For **Labels** that don't fit on one line, define a **class with css** and set the **min-height** property.
* The **VDialog** component should not be placed inside another component; it should be at the top level of the component tree.

### Usage Scenarios

* When you want to display the component as **scrollable**, set the **scrollable** prop of the component to **true**. Additionally, add other components inside the **VCard-VContainer** structure within the component.

Ekran var

## DocumentViewer

The DocumentViewer component can preview **image (IMG), PDF, and HTML files**.

### Usage Scenarios

Using the DocumentViewer is straightforward as it requires only a source (src) prop and an optional height prop (default is 50px). Once you add the component to your interface, you can use it as shown in the examples below:

**PDF:**

To preview a PDF file, you can define src prop as a **byte64 code** or **a pdf path.**

EKRAN MEVCUT

**Html:**

To preview a HTML file, you can define src prop as a **raw html code** or **a full path of an HTML page**.

EKRAN MEVCUT

**Img:**

DocumentViewer supports the following image types: **jpeg, jpg, gif, png, apng, svg, bmp, ico**

**For mobile usage:**
Usage Scenario olarak eklenecek.
2 kullanım için mobil ekran görüntüsü ve üzerilen qjson eklenmeli (NILAY)

* You can use the **DocumentViewer** component to display long texts such as contracts on mobile.
* When displaying inside a **VDialog**, the component layout should be as follows:

- From outermost to innermost;

- VDialog -> VContainer -> VRow -> VCol -> VCard -> DocumentViewer

## VExpansionPanels

The **VExpansionPanel component** is designed to efficiently manage vertical space, especially when dealing with extensive information. By default, it only reveals one expansion-panel body at a time. However, by setting the **multiple** property, multiple expansion-panels can remain open simultaneously **until manually closed**.

### Props

### Usage Scenarios

**Mobile: / Note:**

* When using the **VExpansionPanels** component **on mobile**, you should use **VExpansionPanelHeader** and **VExpansionPanelContent** inside **VExpansionPanel**. Note that these components come by default, and for mobile usage, **you shouldn't change the default value.**
* The components that you add inside should be within a **VRow-VCol** structure.

## VFileInput

**For mobile usage:**

* You can use **VFileInput** design by clicking on it.
* To use it in a different design, you can trigger it with components that have a **click event**, such as **VCard**.
* When you want to trigger it with different components, you can add **VFileInput** to the page and assign visible as **false**. Then, for example, you can trigger it in the click event of **VCard** as follows:

    (<any>components.fileInputId).browse();

* When you select an item, you should access the selected item in **base64** format using the value parameter in the change event of **VFileInput** or the **qValue** on the component.

* To display the selected file on mobile, you can create a **VImg** and set its **src** prop to the **value** (base64) of the **VImg** created in the change event of **VFileInput**, which is the parameter of the event.

## VFooter

**For mobile usage:**

* Set the **Fixed** prop to **true**.
* Add the components you want inside a **VRow-VCol** structure.

## VIcon

The **VIcon component** in Plateau Studio offers a wide range of glyphs, which are small, graphical symbols used to convey meaning and provide context to different elements within your application. These glyphs serve as visual cues, helping users understand the functionality, purpose, or status of specific UI elements. For more detailed information, you can refer to the **VIcon component page**.
https://v2.vuetifyjs.com/en/components/icons/

**For mobile usage:**

* **In mobile applications**, you can directly write **icon classes** into the VIcon component's **text prop** to utilize them.

## VImg

The **VImg component** in Plateau Studio enables the seamless integration of images into your application's user interface. With VImg, you can easily display images of various formats and sizes, enhancing the visual appeal of your application. For more detailed information, you can refer to the **VImg component page**.
https://v2.vuetifyjs.com/en/components/images/

**For mobile usage:**

* When defining a **VImg** component with a smaller size than the image you want to display on mobile, set the **contain** prop to **true** to scale the entire image for proper display on mobile.

## VInlineDatePicker

The **VInlineDatePicker component** is a fundamental part of the date picker suite. It provides users with the ability to select dates without the need for a separate dialog or page. Instead, the date picker is integrated directly into the page's layout, offering a more streamlined and intuitive user experience.

### Usage Scenarios

* If you want to assign a value in the beginning, you can access the component with the relevant ID in the **PostRender** event of **PageComponent** and make the assignment.
* If you intend to make changes to the rest of the page content after assigning an initial value in the **post-render phase of VInlineDatePicker**, you should handle these modifications by creating a **custom event** on the Page Component and implementing them there.

**Note:** In mobile, the format used when assigning a value to the **component's qValue should be YYYY-MM-DD**.

## Label

**The Label component** is a simple component used to display text or a label in a user interface. It is commonly used to provide a description or title for other components, such as input fields, buttons, or icons.

### Props

### Mobile Usage

* If you want a Label to **wrap to the next line**, define a **custom CSS class** for the respective label and give it a **min-height** value.

### Usage Scenarios

* If you intend to use **HTML tags within Label** on mobile, set the **processHtml** prop to **true**.
* If you want to display Labels **side by side**, you can add as many Labels as you want inside a **single VCol** within a **VRow-VCol** structure, and set the direction of **VCol to Row**.
* If you want to display Labels **stacked vertically**, place each label in a **separate VCol** within a **VRow-VCol** structure, and set the direction of **VCol to Col**.

## VNavigationDrawer

**For mobile usage:**

* On mobile, the design you want to display using a **VRow-VCol** structure should be created inside a **VContainer**.

## PageComponent

**For mobile usage:**

* Use the **PreRender** event for operations you want to perform before the screen is loaded.
* Use the **EndRender** event for operations you want to perform after the screen starts loading.
* Use the **PostRender** event for operations you want to perform after the screen loading is complete.

**Note:** Before the screen is fully loaded (PreRender), components within the screen and their props **should not be assigned**.

* For service calls, you should create **Custom Events** and make service calls **within these custom events**.
* Additionally, if you want to trigger service calls from one of the 3 events of **PageComponent (PreRender, EndRender, PostRender)**, you should also add the **onSuccess** and **onFail** events of the service calls as **custom events**.

**Note:** You **should not assign null to onSuccess** and **onFail** events.

## VRadio

The **VRadio component** serves as a basic radio button, enabling users to select a single option from a set of predefined choices.

When used in conjunction with the VRadioGroup component, it allows for **groupable functionality**, presenting a cohesive set of radio buttons that facilitate user selection from multiple options.

### VRadioGroup:

The **VRadioGroup component** organizes multiple VRadio buttons into a single, manageable group, ensuring that only one selection can be made at a time from the provided options.

:::success

It should not be used independently; it should be within a **VRadioGroup**.

:::

## VSelect

The **VSelect component** is designed for gathering user input from a predefined list of options. This component streamlines the process of data collection.

**Usage Scenario**

* Each item in the array assigned to the **items** prop of the component should have keys named **text** and **value**.
* Assign **text** to the **itemText** prop of the component.
* Assign **value** to the **itemValue** prop of the component.
* If only one value is to be displayed (no separate fields for text and value), **the same value** can be assigned to both keys.

## VStepper

The **VStepper component** displays progress through a series of numbered steps, providing a clear indication of the current step in a process.

**Note for mobile usage:** Remember that the component has different sub-component layouts for **horizontal** and **vertical** usage.

* If you want to start from a specific step initially, this should be done within the **PostRender** event of the **PageComponent** inside a **setTimeout** function. You should provide the function's **delay** parameter in milliseconds, and if this is done, **no qValue should be assigned** to the component.
* If you want to assign values to components in the invisible steps of **VStepper**, this should be done after the **qValue** assignment of **VStepper** where the code for changing the **qValue** is written.

### VStepperContent

The **VStepperContent component** represents the content associated with each step in the stepper. It typically contains the main content or form fields related to each step.

**Note for mobile usage:** You should not use VStepperContent component alone on mobile, it should be within **VStepperItems**.

### VStepperStep

The **VStepperStep component** defines each individual step within the stepper. It includes options to **customize the appearance and behavior of** each step, such as labels, icons, and validation states.

**Note for mobile usage:** You should not use VStepperStep component alone on mobile, it should be within **VStepperHeader**.

### VStepperHeader

The **VStepperHeader component** is responsible for displaying the **header section** of the stepper, which typically contains the step numbers and labels. It allows for customization of the header's appearance and behavior.

**Note for mobile usage:** You should not use VStepperHeader component alone, it should be within **VStepper**.

### VStepperItems

The **VStepperItems component** provides a way to display a list of items associated with each step in the stepper. It allows for the inclusion of additional information or actions related to each step.

**Note for mobile usage:** You should not use VStepperItems component alone on mobile, it should be within **VStepper**.

## VTabs

The **VTabs component** serves as a versatile tool for organizing and presenting content within a tabbed interface. It allows you to toggle between different sections of content. You can also use VTabs component as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.

**Note for mobile usage:** You should not use **VTab component** alone on mobile, it should be within **VTabs**. ????

## VTabItem

The **VTabItem component** represents individual tabs within the tabbed interface. Each VTabItem corresponds to a specific section of content and serves as a clickable element that you can interact with to navigate between tabs.

**Note for mobile usage:** You should not use **VTabItem component** alone on mobile, it should be within **VTabs**.

## VTabsSlider

The **VTabsSlider component** is responsible for visually indicating the active tab within the tabbed interface. It provides a visual cue to you, highlighting the currently selected tab.

**Note for mobile usage:** You should not use **VTabsSlider component** alone on mobile, it should be within **VTabs**.

## Mobile User Permission

**For mobile usage:**

The following events are triggered **only once when the user grants/denies permission**:

### **Map**

* If the user **grants location permission:**
- Add a **custom event** named **locationPermissionGranted** to the Map component. It should contain the business logic to be executed when the user **grants location permission**.

* If the user **denies location permission:**
- Add a **custom event** named **locationPermissionDenied** to the Map component. It should contain the business logic to be executed when the user **denies location permission**.

### **VFileInput**

* If the user **grants file access permission:**
- Add a **custom event** named **galleryPermissionGranted** to the VFileInput component. It should contain the business logic to be executed when the user **grants file access permission**.

* If the user **denies file access permission**:
- Add a **custom event** named **galleryPermissionDenied** to the VFileInput component. It should contain the business logic to be executed when the user **denies file access permission**.

### **QRReader**

* If the user **grants camera permission**:
- Add a **custom event** named **cameraPermissionGranted** to the QRReader component. It should contain the business logic to be executed when the **user grants camera permission**.

* If the user **denies camera permission**:
- Add a **custom event** named **cameraPermissionDenied** to the QRReader component. It should contain the business logic to be executed when the user **denies camera permission**.

## Request Data

**For mobile usage:**

* When making a service request, the data property of the created **IRequest** object must always be **an object**.

## OpenMap

**For mobile usage:**

* By obtaining permission from the user, it allows the user to use the **map application** on their mobile device to get directions.
* When executed at the desired location as shown below, the user will encounter a **permission dialog** the first time they attempt to use it, and upon approval, they will be redirected to the device's map application.
* The key point when running the method is that the latitude and longitude values provided must be of **type Number**.

async function hostTrigger() {
    quick.Quick.host.trigger('OpenMap', { latitude: lat, longitude: long })
        .then(response => {
            quick.EM.trace('map worked');
        }).catch(err => {
            quick.EM.trace("errorPhoneNumber" + err);
        })
};

hostTrigger();

## CreateComponent

**For mobile usage:**

* You should set the **Render** prop of the structure intended for duplication to **false**.
* If items within group components are intended to be duplicated, you should set the **Render** prop of the sub-component to be added inside to **false**, while the main component should remain in its **default state.**
* You should not use he **createComp** structure in **PreRender**.
* You can access the events on duplicated components in the **dataSource** section defined in the **createComponent** method as follows within the relevant event:

    declare var data;

**When using the createComponent method in the Editor, here are some important considerations:**

* You should provide the **ID of the selected structure** to the method as the template.
* You should define the **ID of the newly created component** uniquely.
* You should provide the **ID of the component to be created** in the **placeQID** section to determine where the new components should be created.
* You should specify the **positioning** of the newly created components relative to the element with the specified **placeQID** in the place section.
* You should specify the data value that can be used in the events of the newly created components in the **dataSource** section.