Fix Vue warnings

bun.lock

@@ -3,6 +3,9 @@
   "workspaces": {
     "": {
       "name": "vue3.dev",
+      "dependencies": {
+        "tinycolor2": "1.6.0",
+      },
       "devDependencies": {
         "@babel/core": "^7.26.10",
         "@bulvar/bulma": "^0.11.24",
@@ -1603,6 +1606,8 @@
 
     "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
 
+    "tinycolor2": ["tinycolor2@1.6.0", "", {}, "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="],
+
     "tinyglobby": ["tinyglobby@0.2.12", "", { "dependencies": { "fdir": "^6.4.3", "picomatch": "^4.0.2" } }, "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww=="],
 
     "to-data-view": ["to-data-view@2.0.0", "", {}, "sha512-RGEM5KqlPHr+WVTPmGNAXNeFEmsBnlkxXaIfEpUYV0AST2Z5W1EGq9L/MENFrMMmL2WQr1wjkmZy/M92eKhjYA=="],

package.json

@@ -90,7 +90,8 @@
     "vue": "^3.5.13",
     "vue-composable": "^1.0.0-beta.24",
     "vue-i18n": "^9.1.10",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.0.16",
+    "tinycolor2": "1.6.0"
   },
   "engines": {
     "bun": ">=1.0.0"

rollup.config.js

@@ -145,9 +145,10 @@ const config = [
       replace({
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
         'process.env.VUE_APP_VERSION_NUMBER': JSON.stringify(env.parsed.VUE_APP_VERSION_NUMBER),
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
         __VUE_OPTIONS_API__: false,
         __VUE_PROD_DEVTOOLS__: false,
-        preventAssignment: true
+        preventAssignment: true,
       }),
       json(),
       alias({ entries: { vue: '@vue/runtime-dom' } }),
@@ -181,26 +182,26 @@ const config = [
 
       prod && terser({ format: { comments: false } }),
       prod &&
-      gzip({
-        fileName: '.br',
-        customCompression: content =>
-          zlib.brotliCompressSync(Buffer.from(content), {
-            params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 },
-          }),
-      }),
+        gzip({
+          fileName: '.br',
+          customCompression: content =>
+            zlib.brotliCompressSync(Buffer.from(content), {
+              params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 },
+            }),
+        }),
       html({
         publicPath: env.parsed.BASE_URL,
         title: 'Vue3-ui',
         template,
       }),
 
       watch &&
-      serve({
-        host: '0.0.0.0',
-        contentBase: 'dist',
-        historyApiFallback: true,
-        port: 5000,
-      }),
+        serve({
+          host: '0.0.0.0',
+          contentBase: 'dist',
+          historyApiFallback: true,
+          port: 5000,
+        }),
 
       watch && livereload({ watch: 'dist' }),
       prod && analyzer(),

src/components/ComponentShowcase.vue

@@ -0,0 +1,121 @@
+<script>
+import {
+  VField,
+  VInput,
+  VButton,
+  VCard,
+  VCardContent,
+  VCardHeader,
+  VMenu,
+  VMenuList,
+  VMenuItem,
+  VTag,
+  VTabs,
+  VTab
+} from '@pathscale/vue3-ui'
+import { ref } from 'vue'
+
+export default {
+  name: 'ComponentShowcase',
+  components: {
+    VField,
+    VInput,
+    VButton,
+    VCard,
+    VCardContent,
+    VCardHeader,
+    VMenu,
+    VMenuList,
+    VMenuItem,
+    VTag,
+    VTabs,
+    VTab
+  },
+  setup() {
+    const activeTab = ref(0)
+    return { activeTab }
+  }
+}
+</script>
+
+<template>
+  <h2 class="title mt-6">Component Showcase</h2>
+  <div class="columns mt-4">
+    <div class="column">
+      <v-field class="mb-4">
+        <v-field addons>
+          <v-input placeholder="Search..." />
+          <v-button type="is-primary">
+            Search
+          </v-button>
+        </v-field>
+      </v-field>
+
+      <v-menu class="mb-4">
+        <v-menu-list label="Navigation">
+          <v-menu-item label="Home" :active="true" />
+          <v-menu-item label="Products" expanded>
+            <v-menu-item label="Electronics" />
+            <v-menu-item label="Clothing" />
+            <v-menu-item label="Books" />
+          </v-menu-item>
+          <v-menu-item label="About">
+            <v-menu-item label="Company" />
+            <v-menu-item label="Team" />
+            <v-menu-item label="Contact" />
+          </v-menu-item>
+        </v-menu-list>
+        <v-menu-list label="Account">
+          <v-menu-item label="Settings" />
+          <v-menu-item label="Logout" />
+        </v-menu-list>
+      </v-menu>
+
+      <div class="tags">
+        <v-tag type="is-primary" class="mr-2">Primary</v-tag>
+        <v-tag type="is-success" class="mr-2">Success</v-tag>
+        <v-tag type="is-warning" class="mr-2">Warning</v-tag>
+        <v-tag type="is-danger">Danger</v-tag>
+      </div>
+    </div>
+
+    <div class="column">
+      <v-card>
+        <v-card-content>
+          <v-field label="Full Name">
+            <v-input placeholder="John Doe" />
+          </v-field>
+          <v-field label="Email">
+            <v-input type="email" placeholder="john@example.com" />
+          </v-field>
+          <v-field label="Password">
+            <v-input type="password" placeholder="••••••••" password-reveal />
+          </v-field>
+          <v-field>
+            <v-button type="is-primary" expanded>Create Account</v-button>
+          </v-field>
+        </v-card-content>
+      </v-card>
+    </div>
+
+    <div class="column">
+      <v-tabs v-model="activeTab" type="is-boxed">
+        <v-tab label="Overview">
+          <div class="p-4">
+            <p>Overview content goes here</p>
+          </div>
+        </v-tab>
+        <v-tab label="Details">
+          <div class="p-4">
+            <p>Details content goes here</p>
+          </div>
+        </v-tab>
+        <v-tab label="Settings">
+          <div class="p-4">
+            <p>Settings content goes here</p>
+          </div>
+        </v-tab>
+      </v-tabs>
+    </div>
+  </div>
+</template>

src/components/sections/Snippet.vue

@@ -22,15 +22,15 @@ export default {
           if (binding.value) {
             target.innerHTML = binding.value
           }
-          hljs.highlightBlock(target)
+          hljs.highlightElement(target)
         }
       },
       componentUpdated(el, binding) {
         const targets = el.querySelectorAll('code')
         for (const target of targets) {
           if (binding.value) {
             target.innerHTML = binding.value
-            hljs.highlightBlock(target)
+            hljs.highlightElement(target)
           }
         }
       }

src/docs/components/showcases/Checkbox.vue

@@ -22,11 +22,11 @@ export default {
       Active checkbox
     </v-checkbox>
     <br />
-    <v-checkbox indeterminate>
+    <v-checkbox indeterminate v-model="value">
       Indeterminate checkbox
     </v-checkbox>
     <br />
-    <v-checkbox disabled>
+    <v-checkbox disabled v-model="value">
       Disabled checkbox
     </v-checkbox>
   </v-field>

src/docs/components/showcases/Toast/Default.vue

@@ -49,27 +49,31 @@
             v-model="state.options.duration"
             min="1000"
             max="10000"
-            :disabled="state.options.duration === false" />
-
-          <v-checkbox @change="changeDuration">
-            Disable duration
+            :disabled="state.options.durationDisabled" />
+          <v-checkbox
+            :model-value="state.options.durationDisabled"
+            @update:model-value="(checked) => {
+              state.options.durationDisabled = checked
+              if (!checked) state.options.duration = 4000
+            }">
+          Disable duration
           </v-checkbox>
         </v-field>
         <v-field>
-          <v-checkbox checked @change="state.options.dismissible = $event.target.checked">
+          <v-checkbox checked v-model="state.options.dismissible">
             Dismissible on click
           </v-checkbox>
         </v-field>
         <v-field>
-          <v-checkbox @change="state.options.queue = $event.target.checked">
+          <v-checkbox v-model="state.options.queue">
             Enqueue
           </v-checkbox>
         </v-field>
         <v-field label="Max Toasts">
           <v-input v-model="state.options.maxToasts" type="number" placeholder="false" />
         </v-field>
         <v-field>
-          <v-checkbox checked @change="state.options.pauseOnHover = $event.target.checked">
+          <v-checkbox checked v-model="state.options.pauseOnHover">
             Pause on hover
           </v-checkbox>
         </v-field>
@@ -175,6 +179,10 @@ export default {
       message: "Bulma's notification implemented as a toast plugin.",
       options: {
         duration: 4000,
+        dismissible: true,
+        queue: false,
+        pauseOnHover: true,
+        durationDisabled: false
       },
     })
 
@@ -217,11 +225,7 @@ export default {
       })
     }
 
-    function changeDuration(e) {
-      state.options.duration = !e.target.checked ? 4000 : false
-    }
-
-    return { state, positions, hasOptions, toast, changeDuration }
+    return { state, positions, hasOptions, toast }
   },
 }
 </script>