# Release Notes

### Plateau Studio

####  New Features

- **Create New Account** feature added to sign up.
<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/sign-up.PNG" width="640" />

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/sign-up-verification.PNG" width="640" />

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/sign-up-create-password.PNG" width="640"/>

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/profile.PNG" width="640" />

- **Forgot Password** feature added.
<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/forgot-password.PNG" width="640" />

- Creating and managing organization features developed.

* You can create organizations by using **Create Organization** button.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/create-organization.PNG" width="640" />

* You can name your organization.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/create-organization-dialog.PNG" width="640" />

* You can invite other users to the selected organization with **Invite People** button.
* You can enter email addresses to invite other users to the selected organization.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/invite-people-dialog.PNG" width="640" />

* Users and invites can be seen by using **Manage Organizations** button.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/organization.PNG" width="640" />

* Cancelling the invitations and removing users from an organization on selected organization management page available now.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/manage-organization.PNG" width="640" />

- You can publish your applications to Azure environment in one click.

* When publish started, to see the publishing process, click **See Progress Details** button.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/publish.PNG" width="640" />

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/see-details-screen.PNG" width="640" />

* When deployment completed, to see your application click **URL** button.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/publish jobs-Azure.PNG" width="640" />

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text | Text | Text |

- You can send your feedback about Plateau Studio to us.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/give-us-feedback.PNG" width="640" />

- Check-In user experience updated.

<img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v1.8/check-in.PNG" width="640" />

- You can now create GCP publish environments application-based. Each application will have its own permanent playground environment.

<br />

#### **UI MODULE**

- A new **Style System** has been created to replace the currently used project CSS and Vuetify CSS files, which provide visual effects to the components. You can access this structure from the **Style** tab in the component feature area that opens on the right when you click the component.

- With the new system, the CSS equivalents are opened:
- ### Layout:

- **Resolution Range:** It is an area where you can select device resolutions as ranges in order to make responsive design and specify the grid, flex-layout and spacing properties in this range.
You can define new ranges with **'+'** next to Layout and define new areas specific to this range. You can also remove the added resolution range with the **'-'** button.
- **Grid Column:** It determines the width and position of a column in the page layout, ensuring that the column adapts to different sizes of the page. You can use the **grid column** by dragging it to the left or right.

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/releaseNotes/style-layout.gif" width="640" />

- **Direction:** It is a feature that determines whether a component is displayed in horizontal or vertical direction. In horizontal direction, elements are displayed on the left and right, while in vertical direction, elements are displayed on top and bottom.

- **Align:** It is a feature used to align other elements in a component horizontally or vertically. Horizontal alignment aligns elements to their left or right sides. Vertical alignment aligns elements to their top or bottom sides.

- **Justify:** It is a feature used to distribute other elements in a component evenly in the horizontal direction. Horizontal justification ensures that elements are distributed with equal distances in the horizontal direction.

- **Box:** Margin determines the space outside of a component, while padding determines the space inside of a component.

- ### Size:

- You can use this area to set the size (width, height) of the component based on the px unit size. This feature also contains link-unlink button which specifies if the corresponding height and width of the component are changed separately or simultaneously.

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/releaseNotes/style-size.gif" width="640" />

- ### Text:

- You can use this area to adjust font color, font family, font size, font style and font weight of the specific text of the component. You can also apply this feature to sub text field which includes child components.

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/releaseNotes/style-text.gif" width="640" />

- ### Appearance

- It is possible to change the color fields such as background-color, icon-color etc. with the **color picker** area.
- You can apply border CSS to fields such as border-style, border-width, border-color, border-radius and box-sizing properties to the components with the **border area**. Also, these features can be applied separately to the four sides of the component.

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/releaseNotes/style-border.gif" width="640" />

- **The box shadow** CSS feature can be applied with the offset values, blur effect radius, spread radius, and color of the shadow. It is possible to change the outer shadow to the inset shadow with the inset switch button.
- You can use **Slider component** to set the fields that are responsible from the size of the component contents.

- List of the Web components are available with the new Style System.
* Messaging
* QDocumentViewer
* QLabel
* QMenu
* QPhoneInput
* VAlert
* VAppBar
* VAutocomplete
* VAvatar
* VBottomNavigation
* VBottomSheet
* VBtn
* VCard
* VCarousel
* VCheckbox
* VChip
* VChipGroup
* VCol
* VCombobox
* VContainer
* VDataTable
* VDatePicker
* VDialog
* VDivider
* VExpansionPanel
* VExpansionPanelContent
* VExpansionPanelHeader
* VExpansionPanels
* VFileInput
* VFooter
* VIcon
* VImg
* VInlineDatePicker
* VInlineTimePicker
* VMenu
* VNavigationDrawer
* VPagination
* VRadio
* VRadioGroup
* VRow
* VSelect
* VSlideGroup
* VSlider
* VStepper
* VStepperContent
* VStepperHeader
* VStepperItems
* VStepperStep
* VSwitch
* VTab
* VTabItem
* VTabs
* VTextField
* VTextarea
* VTimePicker
* VTimeline
* VTimelineItem

- List of Android components are available with the new Style System.
* QLabel
* VAlert
* VAppbar
* VAutocomplete
* VAvatar
* VCard
* VCarousel
* VCheckBox
* VDivider
* VFooter
* VIcon
* VImg
* VInlineDatePicker
* VRadio
* VSlider
* VSwitch
* VTextArea
* VTimeline
* VTimelineItem

- List of iOS components are available twith the new Style System.
* VAlert
* VAppbar
* VAutocomplete
* VAvatar
* VDivider
* VFileInput
* VFooter
* VIcon
* VImg
* VInlineDatePicker
* VSelect
* VSlider
* VSwitch
* VTab
* VTabItem
* VTabs
* VTextArea

- When you select **VExpansionPanels**, **VCarousel**, **VStepper**, **VSlideGroup** components, templates will be automatically created with the related sub-components for easy-to-use.

* VCarousel template

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/VCarousel/VCarouselTemplate.png" width="640" />

* VExpansionPanels template

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/VExpansionPanels/VExpansionPanelsTemplate.png" width="640" />

* VSlideGroup template

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/VSlideGroup/VSlideGroupTemplate.png" width="640" />

* VStepper template

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/VStepper/VStepperTemplate.png" width="640" />

- Added events to **VRangeSlider** component

| Name | Description |
| --------- | ----------------------------- |
| change(value: any[]) | Emitted when the input is changed by user interaction |
| input(value: any[]) | The updated bound model |

- Added events to **VSlider** component

| Name | Description |
| --------- | ----------------------------- |
| change(value: number) | Emitted when the input is changed by user interaction |
| input(value: number) | The updated bound model |

- Added props to **VTextField** component

| Name | Type | Default | Description |
| --------- | ------- | ------- | ----------------- |
| color | string | undefined | Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)) |

- **dateFromNow()** data formatting method has been added. It is used to get the difference in time between one time and the present time.
> dateFromNow(dateString: string, formatType?: string) : string
> UI settings.yaml param: displayDateFormat
> Default formatType : "DDMMYYYY"
> > ```js
> > let fromNow = quick.Quick.dateFromNow("01032023"); // present time 08/03/2023
> > output for language TR : "7 gün önce"
> > output for language EN : "7 days ago"
> > ```
> > ```js
> > let fromNow = quick.Quick.dateFromNow("02/03/2023","DD/MM/YYYY"); // present time 08/03/2023
> > output for language TR : "6 gün önce"
> > output for language EN : "6 days ago"
> > ```

- **store.deleteAll()** method has been added.

> quick.store.deleteAll(name: string)
>
> > ```js
> > quick.store.deleteAll('&') --> Delete All SharedStore
> > quick.store.deleteAll('$') --> Delete All GlobalStore
> > quick.store.deleteAll('#') --> Delete All BagStore
> > quick.store.deleteAll('default') --> Delete All PageStore
> > ```

- **VAppBar** component has been restricted to being at the top of the page when used in the editor for mobile design.

- **VFooter** component has been restricted to being at the bottom of the page when used in the editor for mobile design.

<br />

####  **Bug Fixes**

- Fixed various bugs to maintain seemless Plateau Studio experience.

<br />

##### **UI Module Web**

- **QRichText** component ToolBarcolor prop fixed. ( https://jira.softtech.com.tr/browse/PLT-15040 )

>ToolBarcolor = 'blue'

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/releaseNotes/QRichText_ToolBarcolor.PNG" width="640" />

- **QPhoneInput** component formatting the phone number fixed according to the selected country.

<img src="https://cdn.softtech.com.tr/ngsp-quick/nemo/dev/mdImages/releaseNotes/QPhoneInput_FormatPhoneByCountryCode.PNG" width="640" />

- A bug in the dynamic menu feature of the VNavigationDrawer component fixed.

- A bug in the dialog inline date picker feature of the VDatePicker component fixed.

- Removed the inline date picker feature of the VDatePicker component.

- Vuetify v2.6 links updated on components info button. When you click component info, Vuetify version comes selected by default on Vuetify website.