hoiheart/vue-diff

VueJS diff viewer plugin

vue-diff's Issues

How do I change font size?

How do I change font size, changing font size of parent tag doesn't have an effect, I don't see any option to change font size. Changing font size of .vue-diff-viewer also doesn't work properly as line heights stay the same.

extend language 'groovy' and language definition for 'groovy' could not be registered.

env:
vue 3.2.11
vue-diff 1.1.3
highlight.js 11.4.0

description:

import VueDiff from 'vue-diff';
import 'vue-diff/dist/index.css';
import groovy from 'highlight.js/lib/languages/groovy';
VueDiff.hljs.registerLanguage('groovy', groovy);

i want to extend language, but i fail, i get an error "Language definition for 'groovy' could not be registered.", because 'hljs.regex' is undefined.

function groovy(hljs) {
  const regex = hljs.regex; // undefined
  const IDENT_RE = '[A-Za-z0-9_$]+';
  .....
}

the highlight.js of vue-diff's dependencies is "^10.5.0", 'hljs.regex' does not exist in here.

but the highlight.js of my project's dependencies is "^11.4.0", 'hljs.regex' is defiined.

version difference of the highlight.js causes problems.

能否添加只看不同的功能？

意思就是组件diff里面多一个props，默认是全部展开的，如果我传true，代表我想看不同，组件相同的地方就收起，不同的地方就默认展开就好，就是这样的需求，不知可否添加一下

Whether it can be added depends on different functions

details：It means that there is one more props in the component diff, which is all expanded by default. If I pass true, it means that I want to see different components. The same parts of the component will be folded up, and different parts will be expanded by default. That's the requirement. I don't know if I can add it

Urgent needs, I hope you can support it as soon as possible. I hope you can go online as soon as possible. Thank you very much

The "theme" property should accept more than 'dark' | 'light' | 'custom'

For example, I may set theme to custom-dark/custom-light or something else, but now it's limited to 'dark' | 'light' | 'custom':

vue-diff/src/types.ts

Line 8 in b8258df

export type Theme = 'dark' | 'light' | 'custom';

I suggest changing it to either string or 'dark' | 'light' | `custom${string}`.

Folding is a new attribute. Why doesn't it work

Folding is a new attribute. Why doesn't it work

Support Vue2

Hi, thanks for great source

I'm using vue2.6.14 + compisition-api 1.6.2.
I've installed this package, but got 93 warnings

 warning  in ./node_modules/vue-diff/dist/index.es.js

"export 'Fragment' (imported as 'b') was not found in 'vue'

It looks like only for vue3, not working at vue2.

Is there any plan �to support vue2?

Thanks.

Can you add only different functions

The first issue I told you is that you have done well. Please synchronize the progress. Thank you very much

warning in ./node_modules/vue-diff/dist/index.es.js

Thanks in advance.

Introducing this plugin in the Vue3.0 project threw the following warning

warning in ./node_modules/vue-diff/dist/index.es.js

"export 'createElementBlock' (imported as 'd') was not found in 'vue'

warning in ./node_modules/vue-diff/dist/index.es.js

"export 'createElementVNode' (imported as 'u') was not found in 'vue'

warning in ./node_modules/vue-diff/dist/index.es.js

"export 'getCurrentScope' (imported as 't') was not found in 'vue'

warning in ./node_modules/vue-diff/dist/index.es.js

"export 'normalizeClass' (imported as 'h') was not found in 'vue'

warning in ./node_modules/vue-diff/dist/index.es.js

Can it support on-demand import in single page

I saw the document that mentioned global import, it would be better if you can support that. thank you.

It is a good program，I am already used

use vue3.0，good

Show only current text

Hi there, thx for this component :3
I could get only one part (prev or next) of component if prev and current equal or if I set only current?

[Vue warn]: Component is missing template or render function.

Thanks in advance.

I got a Vue component(suppose ComponentX.vue) and added the following code to it. It shows [Vue warn]: Component is missing template or render function. got any solution to this?

Using Vue 3 with Inertia

<template>
    <VueDiff :mode="mode" :theme="theme" :language="language" :prev="prev" :current="current"></VueDiff>
</template>
  
<script>
import VueDiff from 'vue-diff';
import 'vue-diff/dist/index.css';

export default {
    components: {
        VueDiff,
    },
    data() {
        return {
            mode: 'split',
            theme: 'dark',
            language: 'plaintext',
            prev: 'prev',
            current: 'current',
        }
    },
}
</script>