webdevnerdstuff / vue-code-block

Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.
https://webdevnerdstuff.github.io/vue-code-block/
MIT License
37 stars 3 forks source link

[Bug Report]: cssPath is not reactive #49

Closed kymtwyf closed 2 months ago

kymtwyf commented 2 months ago

Vue Code Block Version

2.3.2

Vue Version

3.4.31

Bug description

the cssPath property is not reactive, changing the value would not trigger reloading of the theme

Steps to reproduce

Example code:


<script setup lang="ts">
import { VCodeBlock } from '@wdns/vue-code-block';
import { ref, watchEffect } from 'vue';

const code = `const foo = 'bar';`
const theme = ref<string>("github")
const cssPath = ref<string | undefined>()

watchEffect(() => {
  if (theme.value === "github") {
    cssPath.value = "css/github.min.css"
  } else if (theme.value === "github-dark") {
    cssPath.value = "css/github-dark.min.css"
  } else {
    cssPath.value = undefined
  }
})
</script>

<template>
  <v-app>
    <v-main>
      <v-container>
        <p>Selected Theme: {{ theme }}</p>
        <p>CSS Path: {{ cssPath }}</p>

        <v-radio-group v-model="theme">
          <v-radio label="Github" value="github"></v-radio>
          <v-radio label="Github Dark" value="github-dark"></v-radio>
        </v-radio-group>
        <VCodeBlock highlightjs :code="code" :theme="theme" :cssPath="cssPath">

        </VCodeBlock>

      </v-container></v-main></v-app>
</template>

<style scoped></style>

Relevant log output

No response

Additional context

No response

Code of Conduct

webdevnerdstuff commented 2 months ago

Good replication of issue. PR Merged.