Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

release #263

Merged
merged 7 commits into from
Dec 12, 2023
Merged

release #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
882b7d9
fix: Line numbers are included when selecting JSON content in the vie…
leezng Nov 21, 2023
fb6dc7b
feat: add collapse threshold
boukadam Nov 22, 2023
2fd950e
Merge pull request #260 from boukadam/dev
leezng Nov 23, 2023
9a1370c
ci: add version bump for v1
leezng Nov 28, 2023
f77b27e
Merge branch 'dev' of github.com:leezng/vue-json-pretty into dev
leezng Nov 28, 2023
950e3e6
ci: add version bump for v1
leezng Nov 28, 2023
33c7ed8
fix: code style
leezng Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions .github/workflows/bump-version-v1.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: Create Release for v1

on:
workflow_dispatch:

jobs:
bump-version:
runs-on: ubuntu-latest
steps:
- name: Checkout Code
uses: actions/checkout@v3

- name: Automated Version Bump
uses: phips28/gh-action-bump-version@v9.1.0
env:
GITHUB_USER: ${{ secrets.CI_NAME }}
GITHUB_EMAIL: ${{ secrets.CI_EMAIL }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
tag-prefix: 'v'

- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 16
registry-url: https://registry.npmjs.org/

- name: Publish NPM
run: |
npm ci
npm run build
npm publish --tag v1-latest
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
2 changes: 2 additions & 0 deletions .github/workflows/bump-version.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ jobs:
GITHUB_USER: ${{ secrets.CI_NAME }}
GITHUB_EMAIL: ${{ secrets.CI_EMAIL }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
tag-prefix: 'v'

- name: Set up Node.js
uses: actions/setup-node@v3
Expand Down
49 changes: 25 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,30 +106,31 @@ plugins: [

## Props

| Property | Description | Type | Default |
| ------------------------ | ----------------------------------------------- | --------------------------------- | ------- |
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
| deep | Paths greater than this depth will be collapsed | number | - |
| showLength | Show the length when collapsed | boolean | false |
| showLine | Show the line | boolean | true |
| showLineNumber | Show the line number | boolean | false |
| showIcon | Show the icon | boolean | false |
| showDoubleQuotes | Show doublequotes on key | boolean | true |
| virtual | Use virtual scroll | boolean | false |
| height | The height of list when using virtual | number | 400 |
| itemHeight | The height of node when using virtual | number | 20 |
| selectedValue(v-model) | Selected data path | string, array | - |
| rootPath | Root data path | string | `root` |
| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - |
| selectableType | Support path select, default none | `multiple` \| `single` | - |
| showSelectController | Show the select controller | boolean | false |
| selectOnClickNode | Trigger select when click node | boolean | true |
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - |
| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
| editable | Support editable | boolean | false |
| editableTrigger | Trigger | `click` \| `dblclick` | `click` |
| Property | Description | Type | Default |
|---------------------------|---------------------------------------------------------------------------------|-----------------------------------| ------- |
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - |
| deep | Paths greater than this depth will be collapsed | number | - |
| showLength | Show the length when collapsed | boolean | false |
| showLine | Show the line | boolean | true |
| showLineNumber | Show the line number | boolean | false |
| showIcon | Show the icon | boolean | false |
| showDoubleQuotes | Show doublequotes on key | boolean | true |
| virtual | Use virtual scroll | boolean | false |
| height | The height of list when using virtual | number | 400 |
| itemHeight | The height of node when using virtual | number | 20 |
| selectedValue(v-model) | Selected data path | string, array | - |
| rootPath | Root data path | string | `root` |
| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - |
| selectableType | Support path select, default none | `multiple` \| `single` | - |
| showSelectController | Show the select controller | boolean | false |
| selectOnClickNode | Trigger select when click node | boolean | true |
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - |
| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
| editable | Support editable | boolean | false |
| editableTrigger | Trigger | `click` \| `dblclick` | `click` |

## Events

Expand Down
1 change: 1 addition & 0 deletions README.zh_CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
| 属性 | 说明 | 类型 | 默认值 |
| ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
| deep | 深度，大于该深度的节点将被折叠 | number | Infinity |
| showLength | 在数据折叠的时候展示长度 | boolean | false |
| showLine | 展示标识线 | boolean | true |
Expand Down
9 changes: 9 additions & 0 deletions example/VirtualList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,19 @@
<option :value="4">4</option>
</select>
</div>
<div>
<label>collapsedNodeLength</label>
<select v-model="state.collapsedNodeLength">
<option :value="10">10</option>
<option :value="Infinity">Infinity</option>
</select>
</div>
</div>
</div>
<div class="block">
<h3>vue-json-pretty(10000+ items):</h3>
<vue-json-pretty
:collapsed-node-length="state.collapsedNodeLength"
:virtual="true"
:item-height="+state.itemHeight"
:data="state.data"
Expand Down Expand Up @@ -74,6 +82,7 @@ export default defineComponent({
showLine: true,
collapsedOnClickBrackets: true,
deep: 3,
collapsedNodeLength: Infinity,
itemHeight: 20,
});

Expand Down
21 changes: 16 additions & 5 deletions src/components/Tree/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export default defineComponent({
type: [String, Number, Boolean, Array, Object] as PropType<JSONDataType>,
default: null,
},
collapsedNodeLength: {
type: Number,
default: Infinity,
},
// Define the depth of the tree, nodes greater than this depth will not be expanded.
deep: {
type: Number,
Expand Down Expand Up @@ -84,13 +88,13 @@ export default defineComponent({

const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));

const initHiddenPaths = (deep: number) => {
const initHiddenPaths = (deep: number, collapsedNodeLength: number) => {
return originFlatData.value.reduce((acc, item) => {
const depthComparison = item.level >= deep;
const doCollapse = item.level >= deep || item.length >= collapsedNodeLength;
const pathComparison = props.pathCollapsible?.(item as NodeDataType);
if (
(item.type === 'objectStart' || item.type === 'arrayStart') &&
(depthComparison || pathComparison)
(doCollapse || pathComparison)
) {
return {
...acc,
Expand All @@ -104,7 +108,7 @@ export default defineComponent({
const state = reactive({
translateY: 0,
visibleData: null as NodeDataType[] | null,
hiddenPaths: initHiddenPaths(props.deep),
hiddenPaths: initHiddenPaths(props.deep, props.collapsedNodeLength),
});

const flatData = computed(() => {
Expand Down Expand Up @@ -255,7 +259,14 @@ export default defineComponent({
watch(
() => props.deep,
val => {
if (val) state.hiddenPaths = initHiddenPaths(val);
if (val) state.hiddenPaths = initHiddenPaths(val, props.collapsedNodeLength);
},
);

watch(
() => props.collapsedNodeLength,
val => {
if (val) state.hiddenPaths = initHiddenPaths(props.deep, val);
},
);

Expand Down
1 change: 1 addition & 0 deletions src/components/TreeNode/styles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
position: absolute;
right: 100%;
margin-right: 4px;
user-select: none;
}

.@{css-prefix}-colon {
Expand Down
Loading