Skip to content
This repository was archived by the owner on Jan 18, 2025. It is now read-only.

Commit 0d5244b

Browse files
author
Ernest
committed
feat: be able to unmount
1 parent 1af3d85 commit 0d5244b

19 files changed

+103
-69
lines changed

Diff for: ‎cypress/integration/array/index.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/// <reference types="cypress" />
22

33
import path from 'path'
4-
import { mount } from '../../../dist/object-visualizer.esm'
4+
import { mount } from '../../utils/index'
55
import {
66
primitiveInArray,
77
arrayInArray,

Diff for: ‎cypress/integration/object/index.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/// <reference types="cypress" />
22

33
import path from 'path'
4-
import { mount } from '../../../dist/object-visualizer.esm'
4+
import { mount } from '../../utils/index'
55
import {
66
primitiveInObject,
77
arrayInObject,

Diff for: ‎cypress/integration/primitive/index.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/// <reference types="cypress" />
22

33
import path from 'path'
4-
import { mount } from '../../../dist/object-visualizer.esm'
4+
import { mount } from '../../utils/index'
55

66
const options = {
77
rootName: '$',

Diff for: ‎cypress/plugins/index.js renamed to ‎cypress/plugins/index.cjs

File renamed without changes.

Diff for: ‎cypress/utils/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { createApp } from 'vue'
2+
import { ObjectVisualizer } from '../../dist/object-visualizer.js'
3+
4+
export const mount = (data, el, options) => {
5+
const app = createApp(ObjectVisualizer, {
6+
data,
7+
...options,
8+
})
9+
app.mount(el)
10+
}

Diff for: ‎lib/ObjectVisualizer.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup lang="ts">
2+
import { getCurrentInstance } from 'vue'
3+
import Wrapper from './components/Wrapper.vue'
4+
5+
withDefaults(
6+
defineProps<{
7+
data: any
8+
rootName?: string
9+
expandOnCreatedAndUpdated?: (path: string[]) => boolean
10+
getKeys?: (object: Record<string, any>, path: string[]) => string[]
11+
uid?: number
12+
}>(),
13+
{
14+
rootName: '',
15+
expandOnCreatedAndUpdated: () => false,
16+
getKeys: (object: Record<string, any>, path: string[]) =>
17+
Object.keys(object),
18+
uid: getCurrentInstance()?.uid,
19+
},
20+
)
21+
</script>
22+
23+
<template>
24+
<section class="object-visualizer">
25+
<Wrapper
26+
:data="data"
27+
:name="rootName"
28+
:expand-on-created-and-updated="expandOnCreatedAndUpdated"
29+
:get-keys="getKeys"
30+
:object-visualizer-uid="0"
31+
:path="[]"
32+
:aria-level="0"
33+
>
34+
</Wrapper>
35+
</section>
36+
</template>

Diff for: ‎lib/components/BooleanWrapper.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<span class="boolean" role="treeitem" :aria-level="ariaLevel" :id="id">
2+
<span class="boolean" :role="role" :aria-level="ariaLevel" :id="id">
33
<span class="key">{{ name }}</span>
44
<span v-if="name !== ''" class="separator">:&nbsp;</span>
55
<span class="value">{{ data }}</span>
@@ -25,6 +25,10 @@ export default defineComponent({
2525
required: true,
2626
type: String,
2727
},
28+
role: {
29+
required: true,
30+
type: String,
31+
},
2832
ariaLevel: {
2933
required: true,
3034
type: Number,

Diff for: ‎lib/components/NullWrapper.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<span class="null" role="treeitem" :aria-level="ariaLevel" :id="id">
2+
<span class="null" :role="role" :aria-level="ariaLevel" :id="id">
33
<span class="key">{{ name }}</span>
44
<span v-if="name !== ''" class="separator">:&nbsp;</span>
55
<span class="value">null</span>
@@ -25,6 +25,10 @@ export default defineComponent({
2525
required: true,
2626
type: String,
2727
},
28+
role: {
29+
required: true,
30+
type: String,
31+
},
2832
ariaLevel: {
2933
required: true,
3034
type: Number,

Diff for: ‎lib/components/NumberWrapper.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<span class="number" role="treeitem" :aria-level="ariaLevel" :id="id">
2+
<span class="number" :role="role" :aria-level="ariaLevel" :id="id">
33
<span class="key">{{ name }}</span>
44
<span v-if="name !== ''" class="separator">:&nbsp;</span>
55
<span class="value">{{ data }}</span>
@@ -25,6 +25,10 @@ export default defineComponent({
2525
required: true,
2626
type: String,
2727
},
28+
role: {
29+
required: true,
30+
type: String,
31+
},
2832
ariaLevel: {
2933
required: true,
3034
type: Number,

Diff for: ‎lib/components/ObjectWrapper.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default defineComponent({
7272
return (
7373
objectToString(path) === 'Array' &&
7474
(path as unknown[]).every(
75-
(key) =>
75+
(key: unknown) =>
7676
objectToString(key) === 'String' ||
7777
objectToString(key) === 'Number',
7878
)

Diff for: ‎lib/components/StringWrapper.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<span class="string" role="treeitem" :aria-level="ariaLevel" :id="id">
2+
<span class="string" :role="role" :aria-level="ariaLevel" :id="id">
33
<span class="key">{{ name }}</span>
44
<span v-if="name !== ''" class="separator">:&nbsp;</span>
55
<span class="quotes">"</span>
@@ -27,6 +27,10 @@ export default defineComponent({
2727
required: true,
2828
type: String,
2929
},
30+
role: {
31+
required: true,
32+
type: String,
33+
},
3034
ariaLevel: {
3135
required: true,
3236
type: Number,

Diff for: ‎lib/components/Wrapper.vue

+25-13
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
path.length === 0 ? 'root' : path.join('-')
1414
}`"
1515
:role="role"
16-
:aria-level="ariaLevel + 1"
16+
:aria-level="role ? ariaLevel + 1 : void 0"
17+
:class="ariaLevel === 0 ? 'object-visualizer' : void 0"
1718
/>
1819
</template>
1920

@@ -25,7 +26,7 @@ import StringWrapper from './StringWrapper.vue'
2526
import ArrayWrapper from './ArrayWrapper.vue'
2627
import ObjectWrapper from './ObjectWrapper.vue'
2728
import { objectToString } from '../util'
28-
import { computed, defineComponent } from 'vue'
29+
import { computed, defineComponent, PropType } from 'vue'
2930
3031
const TYPE_TO_COMPONENT = {
3132
Null: 'null-wrapper',
@@ -40,13 +41,13 @@ const Wrapper = defineComponent({
4041
inheritAttrs: false,
4142
props: {
4243
path: {
43-
type: Array,
4444
required: true,
45+
type: Array as PropType<string[]>,
4546
validator(path: unknown) {
4647
return (
4748
objectToString(path) === 'Array' &&
4849
(path as unknown[]).every(
49-
(key) =>
50+
(key: unknown) =>
5051
objectToString(key) === 'String' ||
5152
objectToString(key) === 'Number',
5253
)
@@ -91,24 +92,35 @@ const Wrapper = defineComponent({
9192
required: true,
9293
type: Number,
9394
},
94-
role: {
95-
default: 'group',
96-
type: String,
97-
},
9895
ariaLevel: {
9996
required: true,
10097
type: Number,
10198
},
10299
},
103100
setup(props) {
104-
const is = computed(
105-
() =>
106-
TYPE_TO_COMPONENT[
107-
objectToString(props.data) as keyof typeof TYPE_TO_COMPONENT
108-
],
101+
const type = computed(
102+
() => objectToString(props.data) as keyof typeof TYPE_TO_COMPONENT,
109103
)
104+
const is = computed(() => TYPE_TO_COMPONENT[type.value])
105+
const role = computed(() => {
106+
if (props.ariaLevel === 0) {
107+
if (type.value === 'Array' || type.value === 'Object') {
108+
return 'tree'
109+
} else {
110+
return void 0
111+
}
112+
} else {
113+
if (type.value === 'Array' || type.value === 'Object') {
114+
return 'group'
115+
} else {
116+
return 'treeitem'
117+
}
118+
}
119+
})
120+
110121
return {
111122
is,
123+
role,
112124
objectToString,
113125
TYPE_TO_COMPONENT,
114126
}

Diff for: ‎lib/config.ts

-5
This file was deleted.

Diff for: ‎lib/index.ts

-1
This file was deleted.

Diff for: ‎lib/main.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as ObjectVisualizer } from './ObjectVisualizer.vue'

Diff for: ‎lib/mount.ts

-31
This file was deleted.

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"@types/node": "^18.7.16",
4949
"@vitejs/plugin-vue": "^3.1.0",
5050
"csso": "^5.0.5",
51-
"cypress": "^10.7.0",
51+
"cypress": "^9",
5252
"husky": "^8.0.1",
5353
"lint-staged": "^13.0.3",
5454
"npm-run-all": "^4.1.5",

Diff for: ‎pnpm-lock.yaml

+5-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎vite.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { minify } from 'csso'
88
export default defineConfig({
99
build: {
1010
lib: {
11-
entry: path.resolve(__dirname, 'lib/index.ts'),
11+
entry: path.resolve(__dirname, 'lib/main.ts'),
1212
name: 'ObjectVisualizer',
1313
fileName: 'object-visualizer',
1414
},

0 commit comments

Comments
 (0)