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

  1. Dependencies Upgrade
  2. 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
    • Before

      <aside class="sidebar sidebar-default"></aside>

      After

      <aside class="sidebar sidebar-base"></aside>
    • Only when "left-bordered" class is used at that time "sidebar-default" class will not be used.
    • 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",
      },
    • "sidebar-default" provide the background color to the selected option is the sidebar