* Update component DemoBlock

* Update demo BsChip, BsCombobox, BsToggleButton
* Update package.json

Author: ahmadfajar

package.json

@@ -1,13 +1,13 @@
 {
   "name": "vue3-mdb-example",
   "description": "Vue MDBootstrap v2.0 components demo",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "author": {
     "name": "Ahmad Fajar",
     "email": "ahmad.fajar234@hotmail.com"
   },
-  "license": "BSD-3-Clause", 
+  "license": "BSD-3-Clause",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -20,13 +20,13 @@
   },
   "dependencies": {
     "vue": "^3.3.4",
-    "vue-mdbootstrap": "^2.0.1",
-    "vue-router": "^4.2.2"
+    "vue-mdbootstrap": "^2.0.2",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node20": "^1.0.2",
-    "@types/node": "^20.3.3",
+    "@types/node": "^20.4.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
@@ -36,8 +36,8 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9",
-    "vue-tsc": "^1.8.3"
+    "vite": "^4.4.2",
+    "vue-tsc": "^1.8.4"
   },
   "browserslist": [
     "> 5%",

src/components/DemoBlock.vue

@@ -61,11 +61,11 @@ watch(
     styles['--md-field-button-color'] = textColor;
 
     if (textColor.startsWith('#fff')) {
-      styles['--md-field-active-indicator'] = 'var(--md-field-accent-indicator)';
+      styles['--md-field-active-indicator'] = 'var(--md-field-accent-indicator-rgb)';
       styles['--md-field-button-active-bg'] = 'rgba(250,250,250,.25)';
       styles['--md-field-button-hover-bg'] = 'rgba(180,180,180,.15)';
     } else {
-      styles['--md-field-active-indicator'] = 'var(--md-field-primary-indicator)';
+      styles['--md-field-active-indicator'] = 'var(--md-field-primary-indicator-rgb)';
       styles['--md-field-button-active-bg'] = 'rgba(12,12,12,.25)';
       styles['--md-field-button-hover-bg'] = 'rgba(80,80,80,.2)';
     }

src/views/Components/DemoChip.vue

@@ -149,11 +149,11 @@
           </template>
           Custom Icon
         </BsChip>
-        <BsChip color="success">
-          Custom Icon
+        <BsChip color="success" icon-position="right">
           <template #icon>
             <icon-bullhorn height="18" width="18" />
           </template>
+          Custom Icon
         </BsChip>
       </div>
     </DemoBlock>

src/views/Components/DemoCombobox.vue

@@ -174,8 +174,9 @@
             v-model="states11"
             :data-source="statesUS11"
             multiple
+            chip-color="primary"
             chip-enabled
-            chip-color="mdb-color"
+            chip-outlined
             floating-label
             outlined
           >
@@ -187,10 +188,10 @@
             v-model="states12"
             :data-source="statesUS12"
             multiple
+            chip-color="danger"
             chip-enabled
             chip-outlined
             chip-pill
-            chip-color="danger"
             floating-label
             outlined
             placeholder="Placeholder"

src/views/Components/DemoToggleButton.vue

@@ -44,7 +44,12 @@
             :pill="false"
             color="primary"
             rounded
-          />
+          >
+            <template #icon="item">
+              <icon-bullhorn v-if="item.value === 'sunny'" width="18" height="18" />
+              <BsIcon v-else :icon="item.icon" size="22" />
+            </template>
+          </BsToggleButton>
         </div>
       </div>
       <div class="row my-3">
@@ -77,6 +82,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { IconBullhorn } from '@/sharedApi';
 
 const drinks = [
   {