From 4c3281f545946b314183ba1225c5a256a337f5dc Mon Sep 17 00:00:00 2001 From: eidng8 Date: Mon, 27 Apr 2020 16:12:31 +0800 Subject: [PATCH 01/22] disable prettier on tables --- README.md | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 0e61081..1134f3b 100644 --- a/README.md +++ b/README.md @@ -61,19 +61,21 @@ This is the entry's tag content slot. Defaults to `{{ tag[tagLabel] }}`. The cur Below is a list of presumable fields, all of them are optional. You can place whatever data you want to a tree item, then use the [props](#props) mentioned above to specify content you want to display. -| Field name | Type | Description | -| --- | :-: | --- | -| name | string | Item name, serves as label, will be rendered as node label. | -| checked | boolean | Whether the node is checked. | -| intermediate | boolean | Intermediate check box state. Active while some children were checked. | -| rendered | boolean | Whether the sub-tree of this node has been rendered. | -| tags | [G8TreeItemTag](#g8treeitemtag)\[] | List of tags. | -| children | [G8TreeItem](#g8treeitem)\[] | List of child nodes. | + +| Field name | Type | Description | +| ------------ | :--------------------------------: | ---------------------------------------------------------------------- | +| name | string | Item name, serves as label, will be rendered as node label. | +| checked | boolean | Whether the node is checked. | +| intermediate | boolean | Intermediate check box state. Active while some children were checked. | +| rendered | boolean | Whether the sub-tree of this node has been rendered. | +| tags | [G8TreeItemTag](#g8treeitemtag)\[] | List of tags. | +| children | [G8TreeItem](#g8treeitem)\[] | List of child nodes. | #### G8TreeItemTag Below is a list of presumable fields, all of them are optional. You can place whatever data you want to tags, then use the [props](#props) mentioned above to specify content you want to display. + | Field name | Type | Description | | ---------- | :----: | -------------------------------------------------- | | label | string | Tag label. | @@ -83,18 +85,20 @@ Below is a list of presumable fields, all of them are optional. You can place wh extends `MouseEvent` -| Field name | Type | Description | -| --- | :-: | --- | -| data | { expanded: boolean, item: [G8TreeItem](#g8treeitem)} | The item triggered the event and if it were expanded (`true`). | + +| Field name | Type | Description | +| ---------- | :---------------------------------------------------: | -------------------------------------------------------------- | +| data | { expanded: boolean, item: [G8TreeItem](#g8treeitem)} | The item triggered the event and if it were expanded (`true`). | ## Events This component defines only two events, for expanding/collapsing nodes, and checkbox state changes. -| Event name | Type | Description | -| --- | :-: | --- | -| click | [G8ClickEvent](#g8clickevent) | A tree node has been clicked. Use the `data.expanded` to determine if the node were expanded (`true`). | -| state-changed | [G8TreeItem](#g8treeitem) | Checkbox state of the node has changed. | + +| Event name | Type | Description | +| ------------- | :---------------------------: | ------------------------------------------------------------------------------------------------------ | +| click | [G8ClickEvent](#g8clickevent) | A tree node has been clicked. Use the `data.expanded` to determine if the node were expanded (`true`). | +| state-changed | [G8TreeItem](#g8treeitem) | Checkbox state of the node has changed. | #### Other events From 9449509f37c9a23f01355bbf12ae8f98fa379c7e Mon Sep 17 00:00:00 2001 From: eidng8 Date: Mon, 27 Apr 2020 16:18:52 +0800 Subject: [PATCH 02/22] disable prettier on tables --- README.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 1134f3b..cdcf6ea 100644 --- a/README.md +++ b/README.md @@ -15,17 +15,18 @@ There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Chec ## Props -| Prop name | Description | Type | Default | -| --- | --- | :-: | :-: | -| item-id | Key of the field in `item` to be used as element's `id` attribute. | string | 'id' | -| item-label | Key of the field in `item` that holds node label. | string | 'name' | -| tags-key | Key of the field in `item` that holds tags array. | string | 'tags' | -| children-key | Key of the field in `item` that holds child nodes array. | string | 'children' | -| tag-id | Key of the field in tags list of `item` to be used as tag element's `id` attribute. | string | 'id' | -| tag-label | Key of the field in tags list of `item` that holds tag label. | string | 'label' | -| tag-hint | Key of the field in tags list of `item` that holds tag tooltip. | string | 'hint' | -| checker | Whether to add a checkbox before each item,
allowing multiple nodes tobe checked. | boolean | false | -| item | The tree data to be rendered.
Please note that data passed **_may_** be mutated by this
component to reflect various states of tree nodes.
Mutated fields include:
- checked
- intermediate
- rendered | [G8TreeItem](#g8treeitem) | | + +| Prop name | Description | Type | Default | +| ------------ | ------------------------------------------------------------------------------------ | :-----: | :--------: | +| item-id | Key of the field in `item` to be used as element's `id` attribute. | string | 'id' | +| item-label | Key of the field in `item` that holds node label. | string | 'name' | +| tags-key | Key of the field in `item` that holds tags array. | string | 'tags' | +| children-key | Key of the field in `item` that holds child nodes array. | string | 'children' | +| tag-id | Key of the field in tags list of `item` to be used as tag element's `id` attribute. | string | 'id' | +| tag-label | Key of the field in tags list of `item` that holds tag label. | string | 'label' | +| tag-hint | Key of the field in tags list of `item` that holds tag tooltip. | string | 'hint' | +| checker | Whether to add a checkbox before each item,
allowing multiple nodes tobe checked. | boolean | false | +| item | The tree data to be rendered.
Please note that data passed **_may_** be mutated by this
component to reflect various states of tree nodes.
Mutated fields include:
- checked
- intermediate
- rendered | [G8TreeItem](#g8treeitem) | | ## Scoped slots From 7aa8a6df05bb41aca0e5687256b5bc478982abab Mon Sep 17 00:00:00 2001 From: eidng8 Date: Mon, 27 Apr 2020 17:42:31 +0800 Subject: [PATCH 03/22] note about font family --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index cdcf6ea..e641d04 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,8 @@ This component defines only two events, for expanding/collapsing nodes, and chec ## Theming +#### Colors + The bundled style sheet can be imported from `'g8-vue-tree/dist/g8-vue-tree.css'`. This component provides a dark theme out of box. To use it, just add the `g8-tree__dark` class to the element. ```html @@ -124,3 +126,13 @@ $g8-tree-fg: #333; @import '~vue-tree/src/components/tree-view.scss'; ``` + +#### Fonts + +This component deliberately left out `font-family` from CSS. You can use whatever font you like, just add something like below to you styles: + +```css +.g8-tree-view { + font-family: 'you favorite font'; +} +``` From 01b7414f11e3404118f218e7124c4823a97d526c Mon Sep 17 00:00:00 2001 From: eidng8 Date: Mon, 27 Apr 2020 20:36:36 +0800 Subject: [PATCH 04/22] remove unused scripts --- scripts/build.sh | 15 --------------- scripts/test.sh | 46 ---------------------------------------------- 2 files changed, 61 deletions(-) delete mode 100644 scripts/build.sh delete mode 100644 scripts/test.sh diff --git a/scripts/build.sh b/scripts/build.sh deleted file mode 100644 index c12ae9a..0000000 --- a/scripts/build.sh +++ /dev/null @@ -1,15 +0,0 @@ -#!/usr/bin/env bash - -# we have multiple deployment jobs -# we just need to build the package only once -[[ "${PACKAGE}" != '' ]] && exit 0 - -# setup bundle-analyzer -npm install --no-save @bundle-analyzer/webpack-plugin - -npm run build || exit 1 - -# set's the environment variable to indicate the package has been built -# this variable is also used by github deployment -export PACKAGE=$(npm pack --silent) - diff --git a/scripts/test.sh b/scripts/test.sh deleted file mode 100644 index a91ded5..0000000 --- a/scripts/test.sh +++ /dev/null @@ -1,46 +0,0 @@ -#!/usr/bin/env bash - -# setup code climate -setup_cc() { - # use only linux for analysis - [[ "${TRAVIS_OS_NAME}" != 'linux' ]] && return 0 - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter - chmod +x ./cc-test-reporter - ./cc-test-reporter before-build -} - -# submit to code climate -submit_cc() { - # use only linux for analysis - [[ "${TRAVIS_OS_NAME}" != 'linux' ]] && return 0 - ./cc-test-reporter after-build --exit-code "${RES}" - # cc-test-reporter may report error, just ignore it - return 0 -} - -# setup coveralls -setup_ca() { - # use only linux for analysis - [[ "${TRAVIS_OS_NAME}" != 'linux' ]] && return 0 - npm install --no-save coveralls -} - -# submit to coveralls -submit_ca() { - # use only linux for analysis - [[ "${TRAVIS_OS_NAME}" != 'linux' ]] && return 0 - cat ./coverage/lcov.info | coveralls -} - -RES=0 -# unit test -setup_ca -setup_cc -npm run test:unit -- --coverage -RES=$? -submit_cc -submit_ca -[[ ${RES} != '0' ]] && exit 1 - -# e2e test -npm run test:e2e From 2b50782d6d8b7961cce0ff9cc4347b061f34d8a4 Mon Sep 17 00:00:00 2001 From: eidng8 Date: Thu, 30 Apr 2020 10:17:52 +0800 Subject: [PATCH 05/22] fix #48 --- README.md | 10 +-- src/App.vue | 2 +- src/components/G8TreeView.vue | 14 ++-- src/components/tree-view.scss | 44 +++++----- tests/e2e/custom-assertions/checkerChecked.js | 2 +- .../custom-assertions/checkerIntermediate.js | 2 +- tests/e2e/custom-commands/open.js | 2 +- tests/e2e/helpers.js | 9 +- tests/e2e/specs/test.js | 2 +- tests/unit/G8TreeView-basics.spec.ts | 16 ++-- tests/unit/G8TreeView-events.spec.ts | 20 ++--- tests/unit/G8TreeView-interactions.spec.ts | 82 ++++++++----------- 12 files changed, 93 insertions(+), 112 deletions(-) diff --git a/README.md b/README.md index e641d04..a86f94b 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Chec #### Default slot ```vue - + {{ item[itemLabel] }} ``` @@ -44,7 +44,7 @@ This is the entry's main content slot. Defaults to `{{ item[itemLabel] }}`. The ```vue