Upgrade Guide
Version 4.0.0 to Version 4.1.0
-
Updated Bootstrap to latest version 5.3.2
-
Removed the files and folder in the customizer folder and added two new files
- src/assets/scss/customizer/root.scss
- src/assets/scss/customizer/_variable.scss
-
Updated src/utilities/setting.js file
Before
updateBodyClass(Choices.SchemeChoice, setting.theme_scheme.value) updateColorRootVar(setting.theme_scheme.value, setting.theme_color, Choices.ColorChoice)
After
updateHtmlAttr({ prop: 'data-bs-theme-color', value: setting.theme_color.value }) updateHtmlAttr({ prop: 'data-bs-theme', value: setting.theme_scheme.value })
-
Updated src/store/pinia/state.js file
Before
export const initialState = { "theme_color": { "value": "theme-color-default" }, } export const defaultState = { theme_scheme: { target: "body", choices: ["light", "dark", "auto"], type: "layout_design", value: "light", }, theme_color: { target: "body", choices: [ "theme-color-blue", "theme-color-gray", "theme-color-red", "theme-color-yellow", "theme-color-pink", "theme-color-default", ], type: "default", value: "theme-color-default", }, }
After
export const initialState = { "theme_color": { "colors": {}, "value": "default" }, } export const defaultState = { theme_scheme: { target: 'html', choices: ['light', 'dark', 'auto'], type: 'layout_design', value: 'light' }, theme_color: { target: 'html', choices: ['default', 'color-1', 'color-2', 'color-3', 'color-4', 'color-5'], type: 'default', colors: {}, value: 'default' }, }
-
Updated the src/store/pinia/index.js file
Before
theme_scheme(payload) { if (typeof payload !== typeof undefined) { this.setting.theme_scheme.value = payload } updateBodyClass(Choices.SchemeChoice, this.setting.theme_scheme.value) updateColorRootVar(this.setting.theme_scheme.value, this.setting.theme_color, Choices.ColorChoice) updateStorage(this.saveLocal, this.storeKey, createSettingObj(state)) }, theme_color(payload) { if (typeof payload !== typeof undefined) { _.forEach(payload.colors, (value, key) => { console.log(this.setting) this.setting.theme_color.colors[key] = value }) this.setting.theme_color.value = payload.value } updateColorRootVar(this.setting.theme_scheme.value, this.setting.theme_color, Choices.ColorChoice) updateStorage(this.saveLocal, this.storeKey, createSettingObj(state)) },
After
after :- theme_scheme(payload) { if (typeof payload !== typeof undefined) { this.setting.theme_scheme.value = payload } updateHtmlAttr({ prop: 'data-bs-theme', value: this.setting.theme_scheme.value }) updateStorage(this.saveLocal, this.storeKey, createSettingObj(this)) }, theme_color(payload) { if (typeof payload !== typeof undefined) { _.forEach(payload.colors, (value, key) => { this.setting.theme_color.colors[key] = value }) this.setting.theme_color.value = payload.value } updateHtmlAttr({ prop: 'data-bs-theme-color', value: this.setting.theme_color.value }) updateColorRootVar(this.setting.theme_color.value, this.setting.theme_color, Choices.ColorChoice) updateStorage(this.saveLocal, this.storeKey, createSettingObj(this)) },
-
Updated the src/components/setting/sections/ColorCustomizer.vue file
Version 2.3.0 to Version 3.0.0
- Dependencies Upgrade
- Major Bug fixing
Version 2.2.0 to Version 2.3.0
-
Updated Data Table
Before
<b-table-simple id="doctors-table" class="py-3" role="grid"> <b-thead> <b-th class="ps-3"> Table Heading 1</b-th> <b-th class="ps-3"> Table Heading 2</b-th> <b-th class="ps-3"> Table Heading 3</b-th> </b-thead> <b-tbody> <b-tr> <td> Table Data 1 </td> <td> Table Data 2 </td> <td> Table Data 3 </td> </b-tr> </b-tbody> </b-table-simple>
After
<table :class="'table ' + className" ref="tableRef"></table>
Version 2.1.1 to Version 2.2.0
-
Updated bootstrap to latest version 5.2.3
-
-
Updated src/assets/scss/hope-ui-design-system/layout-style/menu_style/_default_sidebar.scss file
-
Updated src/assets/scss/dark/layout-style/menu_style/_default_style.scss file
-
Updated src/assets/scss/dark/layout-style/menu_style/_default-sidebar.scss file
-
Updated src/assets/scss/hope-ui-design-system/layout-style/menu_style/_default_sidebar_responsive.scss file
-
Updated src/assets/scss/customizer/components/dropdown/_dropdown.scss file
-
Replace src/assets/scss/bootstrap folder
-
-
We have added new Variable in the dark mode src/assets/scss/dark/_dark.scss
New Variable Add
$menu-color:#d7dbdf;
-
We have added new classes in the header
-
"header-hover-menu left-border" which are used by-default
Before
<nav class="nav navbar navbar-expand-xl navbar-light iq-navbar">
After
<nav class="nav navbar navbar-expand-xl navbar-light iq-navbar header-hover-menu left-border">
-
-
We have upgrade old dropdown menu variable src/assets/scss/hope-ui-design-system/_variable.scss
-
"Dropdown Variable"
-
Upgrade Guide
Version 1.1.3 to Version 2.0.0
-
Updated bootstrap to latest version 5.2.0
-
Removed all the mixin base scss of the sidebar and converted that into a simple way.
-
In src\assets\scss\hope-ui-design-system\layout-style\ file path has all the new sidebar scss.
-
In src\assets\scss\dark\layout-style\ file path all the dark mode new sidebar scss is given.
-
In src\assets\scss\rtl\components\menu-style\ file path all the RTL mode new sidebar scss is given.
-
Updated src\assets\scss\hope-ui-design-system\layout-style\ folder.
-
-
Removed all the mixin base sidebar scss code which is given bellow :
-
In src\assets\scss\hope-ui-design-system\components\menu-style folder has been removed where all the sidebar style was given
-
In src\assets\scss\hope-ui-design-system\helper\mixins\ siderbar mixin has been removed
-
_sidebar-nav-item-varient.scss (deleted)
-
_sidebar-varients.scss (deleted)
-
-
In src\assets\scss\dark\components\menu-style\ folder has been deleted.
-
-
We have added new classes in the sidebar which are
-
"sidebar sidebar-base" which are used by-default
-
Only when "left-bordered" class is used at that time "sidebar-default" class will not be used.
-
"sidebar-default" provide the background color to the selected option is the sidebar
Before
<aside class="sidebar sidebar-default"></aside>
After
<aside class="sidebar sidebar-base"></aside>
Before
sidebar_menu_style: { target: '[data-toggle="main-sidebar"]', choices: [ "navs-rounded", "navs-rounded-all", "navs-pill", "navs-pill-all", "left-bordered", "navs-full-width", ], value: "left-bordered", },
After
sidebar_menu_style: { target: '[data-toggle="main-sidebar"]', choices: [ "sidebar-default navs-rounded", "sidebar-default navs-rounded-all", "sidebar-default navs-pill", "sidebar-default navs-pill-all", "left-bordered", "sidebar-default navs-full-width", ], value: "left-bordered", },
-