@keenmate/svelte-treeview 1.2.12 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +98 -98
  2. package/dist/Branch.svelte +167 -176
  3. package/dist/Branch.svelte.d.ts +4 -52
  4. package/dist/Checkbox.svelte +45 -48
  5. package/dist/Checkbox.svelte.d.ts +27 -23
  6. package/dist/TreeView.svelte +101 -202
  7. package/dist/TreeView.svelte.d.ts +125 -126
  8. package/dist/constants.d.ts +1 -1
  9. package/dist/constants.js +25 -25
  10. package/dist/helpers/tree-helper.d.ts +5 -7
  11. package/dist/helpers/tree-helper.js +44 -40
  12. package/dist/index.d.ts +6 -6
  13. package/dist/index.js +6 -6
  14. package/dist/menu/ContextMenu.svelte +15 -14
  15. package/dist/menu/ContextMenu.svelte.d.ts +8 -21
  16. package/dist/menu/Menu.svelte +50 -50
  17. package/dist/menu/Menu.svelte.d.ts +20 -30
  18. package/dist/menu/MenuDivider.svelte +10 -10
  19. package/dist/menu/MenuDivider.svelte.d.ts +22 -19
  20. package/dist/menu/MenuOption.svelte +45 -49
  21. package/dist/menu/MenuOption.svelte.d.ts +22 -30
  22. package/dist/menu/menu.js +3 -3
  23. package/dist/providers/drag-drop-provider.d.ts +2 -2
  24. package/dist/providers/drag-drop-provider.js +1 -1
  25. package/dist/providers/movement-provider.d.ts +2 -2
  26. package/dist/providers/movement-provider.js +8 -7
  27. package/dist/providers/selection-provider.d.ts +2 -2
  28. package/dist/providers/selection-provider.js +15 -13
  29. package/dist/tree-styles.sass +121 -110
  30. package/dist/types.d.ts +3 -1
  31. package/package.json +83 -76
package/dist/tree-styles.sass CHANGED
@@ -1,110 +1,121 @@
1
-
2
- $treeview-lines: solid black 1px
3
- .treeview
4
- padding: 0
5
- //will show lines if you set show-lines to root element
6
- &.show-lines
7
- ul
8
- &:before
9
- border-left: $treeview-lines
10
- li:before
11
- border-top: $treeview-lines
12
- margin: 0
13
- padding: 0
14
- list-style: none
15
- ul, li
16
- margin: 0
17
- padding: 0
18
- list-style: none
19
- ul
20
- margin-left: 0.4em
21
- position: relative
22
- margin-left: .3em
23
- &:before
24
- content: ""
25
- display: block
26
- width: 0
27
- position: absolute
28
- top: 0
29
- bottom: 0
30
- left: 0
31
- li:before
32
- content: ""
33
- display: block
34
- width: 10px
35
- height: 0
36
- margin-top: -1px
37
- position: absolute
38
- top: 0.8em
39
- left: 0
40
- li:not(.has-children):before
41
- width: 26px
42
-
43
- li:last-child:before
44
- background: #fff
45
- height: auto
46
- top: 1em
47
- bottom: 0
48
-
49
- li
50
- margin: 0
51
- padding: 0 0.8em
52
- color: #555
53
- font-weight: 700
54
- position: relative
55
-
56
- .tree-item
57
- display: flex
58
- column-gap: 0.4em
59
- align-items: center
60
- padding: 4px 0
61
-
62
- .no-arrow
63
- padding-left: .5rem
64
-
65
- .arrow
66
- cursor: pointer
67
- display: inline-block
68
-
69
- .arrowDown
70
- transform: rotate(90deg)
71
-
72
- .invisible
73
- visibility: hidden
74
-
75
- .inserting-highlighted
76
- color: red
77
- .hover
78
- font-weight: bold
79
- .insert-line
80
- position: absolute
81
- left: 0
82
- z-index: 99
83
- height: 2px
84
- width: 200px
85
- background-color: blue
86
- display: block
87
- border-radius: 3px
88
- margin-left: 28px
89
- pointer-events: none //! this is needed to fix flickering issue
90
- // margin-bottom: -2px
91
- // margin-top: -2px
92
- .insert-line-child
93
- margin-left: calc( 28px + 5em )
94
- background-color: red
95
- height: 6px
96
-
97
- .insert-line-wrapper
98
- position: relative
99
-
100
- .currently-dragged
101
- color: LightGray
102
- .pointer-cursor
103
- cursor: grab
104
- .expansion-button
105
- all: unset
106
- .fixed-icon
107
- text-align: center
108
- width: 1.25em
109
- // fix deformation on small screens
110
- min-width: 1.25em
1
+ $treeview-lines: solid black 1px
2
+ .treeview
3
+ padding: 0
4
+ //will show lines if you set show-lines to root element
5
+ &.show-lines
6
+ ul
7
+ &:before
8
+ border-left: $treeview-lines
9
+
10
+ li:before
11
+ border-top: $treeview-lines
12
+ margin: 0
13
+ padding: 0
14
+ list-style: none
15
+
16
+ ul, li
17
+ margin: 0
18
+ padding: 0
19
+ list-style: none
20
+
21
+ ul
22
+ margin-left: 0.4em
23
+ position: relative
24
+ margin-left: .3em
25
+
26
+ &:before
27
+ content: ""
28
+ display: block
29
+ width: 0
30
+ position: absolute
31
+ top: 0
32
+ bottom: 0
33
+ left: 0
34
+
35
+ li:before
36
+ content: ""
37
+ display: block
38
+ width: 10px
39
+ height: 0
40
+ margin-top: -1px
41
+ position: absolute
42
+ top: 0.8em
43
+ left: 0
44
+
45
+ li:not(.has-children):before
46
+ width: 26px
47
+
48
+ li:last-child:before
49
+ background: #fff
50
+ height: auto
51
+ top: 1em
52
+ bottom: 0
53
+
54
+ li
55
+ margin: 0
56
+ padding: 0 0.8em
57
+ color: #555
58
+ font-weight: 700
59
+ position: relative
60
+
61
+ .tree-item
62
+ display: flex
63
+ column-gap: 0.4em
64
+ align-items: center
65
+ padding: 4px 0
66
+
67
+ .no-arrow
68
+ padding-left: .5rem
69
+
70
+ .arrow
71
+ cursor: pointer
72
+ display: inline-block
73
+
74
+ .arrowDown
75
+ transform: rotate(90deg)
76
+
77
+ .invisible
78
+ visibility: hidden
79
+
80
+ .inserting-highlighted
81
+ color: red
82
+
83
+ .hover
84
+ font-weight: bold
85
+
86
+ .insert-line
87
+ position: absolute
88
+ left: 0
89
+ z-index: 99
90
+ height: 2px
91
+ width: 200px
92
+ background-color: blue
93
+ display: block
94
+ border-radius: 3px
95
+ margin-left: 28px
96
+ pointer-events: none
97
+ //! this is needed to fix flickering issue
98
+ // margin-bottom: -2px
99
+ // margin-top: -2px
100
+ .insert-line-child
101
+ margin-left: calc(28px + 5em)
102
+ background-color: red
103
+ height: 6px
104
+
105
+ .insert-line-wrapper
106
+ position: relative
107
+
108
+ .currently-dragged
109
+ color: LightGray
110
+
111
+ .pointer-cursor
112
+ cursor: grab
113
+
114
+ .expansion-button
115
+ all: unset
116
+
117
+ .fixed-icon
118
+ text-align: center
119
+ width: 1.25em
120
+ // fix deformation on small screens
121
+ min-width: 1.25em
package/dist/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type Props = {
1
+ export type TreeProps = {
2
2
  nodeId: string;
3
3
  nodePath: string;
4
4
  hasChildren: string;
@@ -63,6 +63,7 @@ export type BeforeMovedCallback = (draggedNode: Node, oldParent: Node, newParent
63
63
  export type ExpandedCallback = (node: Node) => Promise<void>;
64
64
  export type HelperConfig = {
65
65
  separator: string;
66
+ nodeSorter?: NodeSorter | null;
66
67
  };
67
68
  export declare enum InsertionType {
68
69
  nest = "nest",
@@ -81,3 +82,4 @@ export declare enum KeyboardMovement {
81
82
  Left = "ArrowLeft",
82
83
  Right = "ArrowRight"
83
84
  }
85
+ export type NodeSorter = (left: Node, right: Node) => number;
package/package.json CHANGED
@@ -1,76 +1,83 @@
1
- {
2
- "name": "@keenmate/svelte-treeview",
3
- "version": "1.2.12",
4
- "repository": {
5
- "url": "https://github.com/keenmate/svelte-treeview"
6
- },
7
- "scripts": {
8
- "dev": "vite dev",
9
- "build": "vite build && npm run package",
10
- "preview": "vite preview",
11
- "package": "svelte-kit sync && svelte-package && publint",
12
- "prepublishOnly": "npm run package",
13
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
14
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
15
- "lint": "prettier --plugin-search-dir . --check . && eslint .",
16
- "format": "prettier --plugin-search-dir . --write .",
17
- "test": "vitest",
18
- "test:loud": "vitest --silent=false",
19
- "coverage": "vitest run --coverage"
20
- },
21
- "exports": {
22
- ".": {
23
- "types": "./dist/index.d.ts",
24
- "svelte": "./dist/index.js"
25
- }
26
- },
27
- "files": [
28
- "dist",
29
- "!dist/**/*.test.*",
30
- "!dist/**/*.spec.*"
31
- ],
32
- "peerDependencies": {
33
- "svelte": "^4.0.0"
34
- },
35
- "devDependencies": {
36
- "@keenmate/svelte-adminlte": "^1.1.3",
37
- "@sveltejs/adapter-auto": "^2.0.0",
38
- "@sveltejs/kit": "^1.20.4",
39
- "@sveltejs/package": "^2.0.0",
40
- "@types/marked": "^5.0.0",
41
- "@types/node": "^20.3.3",
42
- "@typescript-eslint/eslint-plugin": "^5.45.0",
43
- "@typescript-eslint/parser": "^5.45.0",
44
- "@vitest/coverage-v8": "^1.4.0",
45
- "eslint": "^8.28.0",
46
- "eslint-config-prettier": "^8.5.0",
47
- "eslint-plugin-svelte": "^2.30.0",
48
- "marked": "^5.1.0",
49
- "prettier": "^2.8.0",
50
- "prettier-plugin-svelte": "^2.10.1",
51
- "publint": "^0.1.9",
52
- "rollup-plugin-string": "^3.0.0",
53
- "sass": "^1.49.0",
54
- "svelte": "^4.0.0",
55
- "svelte-check": "^3.4.3",
56
- "svelte-multiselect": "github:KeenMate/svelte-multiselect",
57
- "svelte-preprocess": "^5.0.4",
58
- "tslib": "^2.4.1",
59
- "typescript": "^5.4.4",
60
- "vite": "^4.3.6",
61
- "vitest": "^1.4.0"
62
- },
63
- "svelte": "./dist/index.js",
64
- "types": "./dist/index.d.ts",
65
- "type": "module",
66
- "dependencies": {
67
- "@keenmate/js-common-helpers": "^1.2.0",
68
- "@types/lodash.unionby": "^4.8.9",
69
- "@types/lodash.uniq": "^4.5.9",
70
- "@types/lodash.uniqby": "^4.7.9",
71
- "lodash.unionby": "^4.8.0",
72
- "lodash.uniq": "^4.5.0",
73
- "lodash.uniqby": "^4.7.0",
74
- "svelte-highlight": "^7.6.1"
75
- }
76
- }
1
+ {
2
+ "name": "@keenmate/svelte-treeview",
3
+ "version": "3.0.0",
4
+ "repository": {
5
+ "url": "https://github.com/keenmate/svelte-treeview"
6
+ },
7
+ "scripts": {
8
+ "dev": "vite dev",
9
+ "build": "vite build && npm run package",
10
+ "preview": "vite preview",
11
+ "package": "svelte-kit sync && svelte-package && publint",
12
+ "prepublishOnly": "npm run package",
13
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
14
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
15
+ "lint": "prettier --plugin-search-dir . --check . && eslint .",
16
+ "format": "prettier --plugin-search-dir . --write .",
17
+ "test": "vitest",
18
+ "test:loud": "vitest --silent=false",
19
+ "coverage": "vitest run --coverage"
20
+ },
21
+ "exports": {
22
+ ".": {
23
+ "types": "./dist/index.d.ts",
24
+ "svelte": "./dist/index.js"
25
+ }
26
+ },
27
+ "files": [
28
+ "dist",
29
+ "!dist/**/*.test.*",
30
+ "!dist/**/*.spec.*"
31
+ ],
32
+ "peerDependencies": {
33
+ "svelte": "^4.0.0"
34
+ },
35
+ "devDependencies": {
36
+ "@keenmate/svelte-adminlte": "^5.0.2",
37
+ "@sveltejs/adapter-auto": "^3.0.0",
38
+ "@sveltejs/kit": "^2.5.27",
39
+ "@sveltejs/package": "^2.3.7",
40
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
41
+ "@types/marked": "^5.0.0",
42
+ "@types/node": "^20.3.3",
43
+ "@typescript-eslint/eslint-plugin": "^5.45.0",
44
+ "@typescript-eslint/parser": "^5.45.0",
45
+ "@vitest/coverage-v8": "^1.4.0",
46
+ "eslint": "^8.28.0",
47
+ "eslint-config-prettier": "^8.5.0",
48
+ "eslint-plugin-svelte": "^2.45.1",
49
+ "marked": "^5.1.0",
50
+ "prettier": "^3.1.0",
51
+ "prettier-plugin-svelte": "^3.2.6",
52
+ "publint": "^0.1.9",
53
+ "rollup-plugin-string": "^3.0.0",
54
+ "sass": "^1.49.0",
55
+ "svelte": "^5.0.0",
56
+ "svelte-check": "^4.0.0",
57
+ "svelte-multiselect": "github:KeenMate/svelte-multiselect",
58
+ "svelte-preprocess": "^6.0.0",
59
+ "tslib": "^2.4.1",
60
+ "typescript": "^5.5.0",
61
+ "vite": "^5.4.4",
62
+ "vitest": "^1.4.0"
63
+ },
64
+ "svelte": "./dist/index.js",
65
+ "types": "./dist/index.d.ts",
66
+ "type": "module",
67
+ "dependencies": {
68
+ "@keenmate/js-common-helpers": "^3.0.4",
69
+ "@types/lodash.unionby": "^4.8.9",
70
+ "@types/lodash.uniq": "^4.5.9",
71
+ "@types/lodash.uniqby": "^4.7.9",
72
+ "lodash.unionby": "^4.8.0",
73
+ "lodash.uniq": "^4.5.0",
74
+ "lodash.uniqby": "^4.7.0",
75
+ "svelte-highlight": "^7.6.1"
76
+ },
77
+ "overrides": {
78
+ "summernote": "file:./EXPLICITLY_REMOVED",
79
+ "@keenmate/svelte-adminlte": {
80
+ "@keenmate/js-common-helpers": "^3.0.4"
81
+ }
82
+ }
83
+ }