@onereach/ui-components 3.0.2-beta.2475.0 → 3.0.2-beta.2480.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 (60) hide show
  1. package/dist/bundled/v2/{OrSelect-0b9b27e9.js → OrSelect-33f58941.js} +6 -5
  2. package/dist/bundled/v2/components/index.d.ts +0 -1
  3. package/dist/bundled/v2/components/index.js +1 -2
  4. package/dist/bundled/v2/components/or-select-v3/index.js +1 -1
  5. package/dist/bundled/v2/index.js +2 -3
  6. package/dist/bundled/v3/components/index.d.ts +0 -1
  7. package/dist/bundled/v3/components/index.js +0 -1
  8. package/dist/bundled/v3/index.js +116 -141
  9. package/dist/esm/v2/{OrSelect-8307ad20.js → OrSelect-4b901267.js} +6 -5
  10. package/dist/esm/v2/components/index.d.ts +0 -1
  11. package/dist/esm/v2/components/index.js +1 -2
  12. package/dist/esm/v2/components/or-select-v3/index.js +1 -1
  13. package/dist/esm/v2/index.js +1 -2
  14. package/dist/esm/v3/{OrSelect-c3a50846.js → OrSelect-6ccd02ea.js} +5 -4
  15. package/dist/esm/v3/components/index.d.ts +0 -1
  16. package/dist/esm/v3/components/index.js +1 -2
  17. package/dist/esm/v3/components/or-select-v3/index.js +1 -1
  18. package/dist/esm/v3/index.js +1 -2
  19. package/package.json +1 -1
  20. package/src/components/index.ts +0 -1
  21. package/src/components/or-select-v3/OrSelect.vue +65 -64
  22. package/dist/bundled/v2/OrTree-ceaca23d.js +0 -236
  23. package/dist/bundled/v2/components/or-tree-v3/OrTree.vue.d.ts +0 -47
  24. package/dist/bundled/v2/components/or-tree-v3/TreeNode.vue.d.ts +0 -82
  25. package/dist/bundled/v2/components/or-tree-v3/index.d.ts +0 -2
  26. package/dist/bundled/v2/components/or-tree-v3/index.js +0 -17
  27. package/dist/bundled/v2/components/or-tree-v3/styles.d.ts +0 -1
  28. package/dist/bundled/v2/components/or-tree-v3/types.d.ts +0 -10
  29. package/dist/bundled/v2/components/or-tree-v3/utils.d.ts +0 -5
  30. package/dist/bundled/v3/OrTree.vue_vue_type_script_lang-d25db1c4.js +0 -146
  31. package/dist/bundled/v3/components/or-tree-v3/OrTree.vue.d.ts +0 -47
  32. package/dist/bundled/v3/components/or-tree-v3/TreeNode.vue.d.ts +0 -82
  33. package/dist/bundled/v3/components/or-tree-v3/index.d.ts +0 -2
  34. package/dist/bundled/v3/components/or-tree-v3/index.js +0 -16
  35. package/dist/bundled/v3/components/or-tree-v3/styles.d.ts +0 -1
  36. package/dist/bundled/v3/components/or-tree-v3/types.d.ts +0 -10
  37. package/dist/bundled/v3/components/or-tree-v3/utils.d.ts +0 -5
  38. package/dist/esm/v2/OrTree-8dc4a1a3.js +0 -233
  39. package/dist/esm/v2/components/or-tree-v3/OrTree.vue.d.ts +0 -47
  40. package/dist/esm/v2/components/or-tree-v3/TreeNode.vue.d.ts +0 -82
  41. package/dist/esm/v2/components/or-tree-v3/index.d.ts +0 -2
  42. package/dist/esm/v2/components/or-tree-v3/index.js +0 -15
  43. package/dist/esm/v2/components/or-tree-v3/styles.d.ts +0 -1
  44. package/dist/esm/v2/components/or-tree-v3/types.d.ts +0 -10
  45. package/dist/esm/v2/components/or-tree-v3/utils.d.ts +0 -5
  46. package/dist/esm/v3/OrTree-f4ee81ef.js +0 -170
  47. package/dist/esm/v3/components/or-tree-v3/OrTree.vue.d.ts +0 -47
  48. package/dist/esm/v3/components/or-tree-v3/TreeNode.vue.d.ts +0 -82
  49. package/dist/esm/v3/components/or-tree-v3/index.d.ts +0 -2
  50. package/dist/esm/v3/components/or-tree-v3/index.js +0 -14
  51. package/dist/esm/v3/components/or-tree-v3/styles.d.ts +0 -1
  52. package/dist/esm/v3/components/or-tree-v3/types.d.ts +0 -10
  53. package/dist/esm/v3/components/or-tree-v3/utils.d.ts +0 -5
  54. package/src/components/or-tree-v3/OrTree.stories3.ts +0 -104
  55. package/src/components/or-tree-v3/OrTree.vue +0 -85
  56. package/src/components/or-tree-v3/TreeNode.vue +0 -72
  57. package/src/components/or-tree-v3/index.ts +0 -2
  58. package/src/components/or-tree-v3/styles.ts +0 -13
  59. package/src/components/or-tree-v3/types.ts +0 -12
  60. package/src/components/or-tree-v3/utils.ts +0 -31
@@ -1,47 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { ITreeNode, ITreeNodeMetadata } from './types';
3
- declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & {
4
- flatTree: ITreeNode[];
5
- nodeMetadataByKey: Record<string, ITreeNodeMetadata>;
6
- }, {
7
- onTriggerExpand(key: string): void;
8
- isNodeExpanded(key: string): boolean;
9
- }, {
10
- visibleItems(): ITreeNode[];
11
- }, {
12
- initialData: {
13
- type: PropType<ITreeNode[]>;
14
- default: () => never[];
15
- };
16
- identifierKey: {
17
- type: StringConstructor;
18
- default: string;
19
- };
20
- }, import("@vue/composition-api").ExtractPropTypes<{
21
- initialData: {
22
- type: PropType<ITreeNode[]>;
23
- default: () => never[];
24
- };
25
- identifierKey: {
26
- type: StringConstructor;
27
- default: string;
28
- };
29
- }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
30
- initialData: ITreeNode[];
31
- identifierKey: string;
32
- } & {}, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, {
33
- flatTree: ITreeNode[];
34
- nodeMetadataByKey: Record<string, ITreeNodeMetadata>;
35
- }, {
36
- visibleItems(): ITreeNode[];
37
- }, {
38
- onTriggerExpand(key: string): void;
39
- isNodeExpanded(key: string): boolean;
40
- }, {}, {}, {}, {
41
- initialData: ITreeNode[];
42
- identifierKey: string;
43
- } & {}, {
44
- initialData: ITreeNode[];
45
- identifierKey: string;
46
- }, true>);
47
- export default _default;
@@ -1,82 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { ITreeNode } from './types';
3
- declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
4
- rootClasses: string[];
5
- }> & import("@vue/composition-api").Data, {}, {
6
- expandIcon(): "keyboard_arrow_down" | "arrow_right";
7
- styleCSS(): {
8
- 'padding-left': string;
9
- };
10
- }, {
11
- node: {
12
- type: PropType<ITreeNode>;
13
- default: undefined;
14
- };
15
- nodeKey: {
16
- type: StringConstructor;
17
- default: string;
18
- };
19
- isExpanded: {
20
- type: BooleanConstructor;
21
- default: boolean;
22
- };
23
- isLeaf: {
24
- type: BooleanConstructor;
25
- default: boolean;
26
- };
27
- level: {
28
- type: NumberConstructor;
29
- default: number;
30
- };
31
- }, import("@vue/composition-api").ExtractPropTypes<{
32
- node: {
33
- type: PropType<ITreeNode>;
34
- default: undefined;
35
- };
36
- nodeKey: {
37
- type: StringConstructor;
38
- default: string;
39
- };
40
- isExpanded: {
41
- type: BooleanConstructor;
42
- default: boolean;
43
- };
44
- isLeaf: {
45
- type: BooleanConstructor;
46
- default: boolean;
47
- };
48
- level: {
49
- type: NumberConstructor;
50
- default: number;
51
- };
52
- }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
53
- node: ITreeNode;
54
- nodeKey: string;
55
- isExpanded: boolean;
56
- isLeaf: boolean;
57
- level: number;
58
- } & {} & {
59
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
60
- }, import("@vue/composition-api").ShallowUnwrapRef<{
61
- rootClasses: string[];
62
- }>, import("@vue/composition-api").Data, {
63
- expandIcon(): "keyboard_arrow_down" | "arrow_right";
64
- styleCSS(): {
65
- 'padding-left': string;
66
- };
67
- }, {}, {}, {}, string[], {
68
- node: ITreeNode;
69
- nodeKey: string;
70
- isExpanded: boolean;
71
- isLeaf: boolean;
72
- level: number;
73
- } & {} & {
74
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
75
- }, {
76
- node: ITreeNode;
77
- nodeKey: string;
78
- isExpanded: boolean;
79
- isLeaf: boolean;
80
- level: number;
81
- }, true>);
82
- export default _default;
@@ -1,2 +0,0 @@
1
- export { default as OrTreeV3 } from './OrTree.vue';
2
- export * from './types';
@@ -1,15 +0,0 @@
1
- export { _ as OrTreeV3 } from '../../OrTree-8dc4a1a3.js';
2
- import 'vue-demi';
3
- import '../../OrIconButton-5c4ef664.js';
4
- import '../../OrIcon-d35a84d8.js';
5
- import '../../normalize-component-6e8e3d80.js';
6
- import '../../OrTooltip-f5d1e4f0.js';
7
- import '@vueuse/core';
8
- import '../../OrPopover-aa9f4918.js';
9
- import '@floating-ui/dom';
10
- import '../../useElevation-92fce12c.js';
11
- import '../../useResponsive-a02e95b7.js';
12
- import '../../OrBottomSheet-29df8db9.js';
13
- import '../../OrOverlay-2ce3cfd7.js';
14
- import '../../OrTeleport.vue2-fb92f29f.js';
15
- import 'portal-vue';
@@ -1 +0,0 @@
1
- export declare const TreeNodeRoot: string[];
@@ -1,10 +0,0 @@
1
- export interface ITreeNode {
2
- key: string;
3
- isLeaf: boolean;
4
- children?: ITreeNode[];
5
- }
6
- export interface ITreeNodeMetadata {
7
- level: number;
8
- isExpanded: boolean;
9
- parentNodeKey: string;
10
- }
@@ -1,5 +0,0 @@
1
- import { ITreeNode, ITreeNodeMetadata } from './types';
2
- export declare const getFlatTree: (tree: ITreeNode[]) => {
3
- flatTree: ITreeNode[];
4
- nodeMetadataByKey: Record<string, ITreeNodeMetadata>;
5
- };
@@ -1,170 +0,0 @@
1
- import { defineComponent } from 'vue-demi';
2
- import { s as script$2 } from './OrIconButton-41ee266c.js';
3
- import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createBlock, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, Fragment, renderList, withCtx } from 'vue';
4
-
5
- const getFlatTree = tree => {
6
- const flatTree = [];
7
- const nodeMetadataByKey = {};
8
- const goDeeper = (treeNode, level, parentNodeKey) => {
9
- flatTree.push(treeNode);
10
- nodeMetadataByKey[treeNode.key] = {
11
- level,
12
- isExpanded: false,
13
- parentNodeKey
14
- };
15
- if (treeNode.children) {
16
- for (const child of treeNode.children) {
17
- goDeeper(child, level + 1, treeNode.key);
18
- }
19
- }
20
- };
21
- for (const node of tree) {
22
- goDeeper(node, 0, '');
23
- }
24
- return {
25
- flatTree,
26
- nodeMetadataByKey
27
- };
28
- };
29
-
30
- const TreeNodeRoot = ['flex', 'items-center', 'gap-sm', 'pt-6', 'my-sm',
31
- // Theme
32
- 'text-on-background', 'dark:text-on-background-dark', 'hover:bg-primary-opacity-0-08', 'dark:hover:bg-primary-opacity-0-08-dark'];
33
-
34
- var script$1 = defineComponent({
35
- components: {
36
- OrIconButton: script$2
37
- },
38
- props: {
39
- node: {
40
- type: Object,
41
- default: undefined
42
- },
43
- nodeKey: {
44
- type: String,
45
- default: ''
46
- },
47
- isExpanded: {
48
- type: Boolean,
49
- default: false
50
- },
51
- isLeaf: {
52
- type: Boolean,
53
- default: false
54
- },
55
- level: {
56
- type: Number,
57
- default: 0
58
- }
59
- },
60
- emits: ['trigger-expand'],
61
- setup() {
62
- return {
63
- rootClasses: TreeNodeRoot
64
- };
65
- },
66
- computed: {
67
- expandIcon() {
68
- return this.isExpanded ? 'keyboard_arrow_down' : 'arrow_right';
69
- },
70
- styleCSS() {
71
- return {
72
- // 24px -- gap-sm + tooltip width
73
- 'padding-left': this.isLeaf && this.level === 0 ? '24px' : `${this.level * 10}px`
74
- };
75
- }
76
- }
77
- });
78
-
79
- function render$1(_ctx, _cache, $props, $setup, $data, $options) {
80
- const _component_or_icon_button = resolveComponent("or-icon-button");
81
- return openBlock(), createElementBlock("div", {
82
- class: normalizeClass(["tree-node", _ctx.rootClasses]),
83
- style: normalizeStyle(_ctx.styleCSS)
84
- }, [!_ctx.isLeaf ? (openBlock(), createBlock(_component_or_icon_button, {
85
- key: 0,
86
- icon: _ctx.expandIcon,
87
- onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('trigger-expand', _ctx.nodeKey))
88
- }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.$props)), () => [createTextVNode(toDisplayString(_ctx.nodeKey), 1 /* TEXT */)])], 6 /* CLASS, STYLE */);
89
- }
90
-
91
- script$1.render = render$1;
92
- script$1.__file = "src/components/or-tree-v3/TreeNode.vue";
93
-
94
- var script = defineComponent({
95
- components: {
96
- TreeNode: script$1
97
- },
98
- props: {
99
- initialData: {
100
- type: Array,
101
- default: () => []
102
- },
103
- identifierKey: {
104
- type: String,
105
- default: 'key'
106
- }
107
- },
108
- data() {
109
- return {
110
- flatTree: [],
111
- nodeMetadataByKey: {}
112
- };
113
- },
114
- computed: {
115
- visibleItems() {
116
- return this.flatTree.filter(treeNode => {
117
- return this.isNodeExpanded(treeNode.key);
118
- });
119
- }
120
- },
121
- mounted() {
122
- const {
123
- nodeMetadataByKey,
124
- flatTree
125
- } = getFlatTree(this.initialData);
126
- this.flatTree = flatTree;
127
- this.nodeMetadataByKey = nodeMetadataByKey;
128
- },
129
- methods: {
130
- onTriggerExpand(key) {
131
- this.nodeMetadataByKey[key].isExpanded = !this.nodeMetadataByKey[key].isExpanded;
132
- },
133
- isNodeExpanded(key) {
134
- const {
135
- parentNodeKey,
136
- level
137
- } = this.nodeMetadataByKey[key];
138
- const parentMetadata = this.nodeMetadataByKey[parentNodeKey];
139
- if (level === 0) return true;
140
- if (!parentMetadata.isExpanded) return false;
141
- return this.isNodeExpanded(parentNodeKey);
142
- }
143
- }
144
- });
145
-
146
- function render(_ctx, _cache, $props, $setup, $data, $options) {
147
- const _component_tree_node = resolveComponent("tree-node");
148
- return openBlock(), createElementBlock("div", {
149
- class: "or-tree",
150
- onDrop: _cache[0] || (_cache[0] = (...args) => _ctx.onDrop && _ctx.onDrop(...args))
151
- }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleItems, node => {
152
- return openBlock(), createBlock(_component_tree_node, {
153
- key: node[_ctx.identifierKey],
154
- node: node,
155
- "node-key": node[_ctx.identifierKey],
156
- "is-expanded": _ctx.nodeMetadataByKey[node.key].isExpanded,
157
- "is-leaf": !!node.isLeaf,
158
- level: _ctx.nodeMetadataByKey[node.key].level,
159
- onTriggerExpand: _ctx.onTriggerExpand
160
- }, {
161
- default: withCtx(props => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(props)))]),
162
- _: 2 /* DYNAMIC */
163
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["node", "node-key", "is-expanded", "is-leaf", "level", "onTriggerExpand"]);
164
- }), 128 /* KEYED_FRAGMENT */))], 32 /* HYDRATE_EVENTS */);
165
- }
166
-
167
- script.render = render;
168
- script.__file = "src/components/or-tree-v3/OrTree.vue";
169
-
170
- export { script as s };
@@ -1,47 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { ITreeNode, ITreeNodeMetadata } from './types';
3
- declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & {
4
- flatTree: ITreeNode[];
5
- nodeMetadataByKey: Record<string, ITreeNodeMetadata>;
6
- }, {
7
- onTriggerExpand(key: string): void;
8
- isNodeExpanded(key: string): boolean;
9
- }, {
10
- visibleItems(): ITreeNode[];
11
- }, {
12
- initialData: {
13
- type: PropType<ITreeNode[]>;
14
- default: () => never[];
15
- };
16
- identifierKey: {
17
- type: StringConstructor;
18
- default: string;
19
- };
20
- }, import("@vue/composition-api").ExtractPropTypes<{
21
- initialData: {
22
- type: PropType<ITreeNode[]>;
23
- default: () => never[];
24
- };
25
- identifierKey: {
26
- type: StringConstructor;
27
- default: string;
28
- };
29
- }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
30
- initialData: ITreeNode[];
31
- identifierKey: string;
32
- } & {}, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, {
33
- flatTree: ITreeNode[];
34
- nodeMetadataByKey: Record<string, ITreeNodeMetadata>;
35
- }, {
36
- visibleItems(): ITreeNode[];
37
- }, {
38
- onTriggerExpand(key: string): void;
39
- isNodeExpanded(key: string): boolean;
40
- }, {}, {}, {}, {
41
- initialData: ITreeNode[];
42
- identifierKey: string;
43
- } & {}, {
44
- initialData: ITreeNode[];
45
- identifierKey: string;
46
- }, true>);
47
- export default _default;
@@ -1,82 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { ITreeNode } from './types';
3
- declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
4
- rootClasses: string[];
5
- }> & import("@vue/composition-api").Data, {}, {
6
- expandIcon(): "keyboard_arrow_down" | "arrow_right";
7
- styleCSS(): {
8
- 'padding-left': string;
9
- };
10
- }, {
11
- node: {
12
- type: PropType<ITreeNode>;
13
- default: undefined;
14
- };
15
- nodeKey: {
16
- type: StringConstructor;
17
- default: string;
18
- };
19
- isExpanded: {
20
- type: BooleanConstructor;
21
- default: boolean;
22
- };
23
- isLeaf: {
24
- type: BooleanConstructor;
25
- default: boolean;
26
- };
27
- level: {
28
- type: NumberConstructor;
29
- default: number;
30
- };
31
- }, import("@vue/composition-api").ExtractPropTypes<{
32
- node: {
33
- type: PropType<ITreeNode>;
34
- default: undefined;
35
- };
36
- nodeKey: {
37
- type: StringConstructor;
38
- default: string;
39
- };
40
- isExpanded: {
41
- type: BooleanConstructor;
42
- default: boolean;
43
- };
44
- isLeaf: {
45
- type: BooleanConstructor;
46
- default: boolean;
47
- };
48
- level: {
49
- type: NumberConstructor;
50
- default: number;
51
- };
52
- }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
53
- node: ITreeNode;
54
- nodeKey: string;
55
- isExpanded: boolean;
56
- isLeaf: boolean;
57
- level: number;
58
- } & {} & {
59
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
60
- }, import("@vue/composition-api").ShallowUnwrapRef<{
61
- rootClasses: string[];
62
- }>, import("@vue/composition-api").Data, {
63
- expandIcon(): "keyboard_arrow_down" | "arrow_right";
64
- styleCSS(): {
65
- 'padding-left': string;
66
- };
67
- }, {}, {}, {}, string[], {
68
- node: ITreeNode;
69
- nodeKey: string;
70
- isExpanded: boolean;
71
- isLeaf: boolean;
72
- level: number;
73
- } & {} & {
74
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
75
- }, {
76
- node: ITreeNode;
77
- nodeKey: string;
78
- isExpanded: boolean;
79
- isLeaf: boolean;
80
- level: number;
81
- }, true>);
82
- export default _default;
@@ -1,2 +0,0 @@
1
- export { default as OrTreeV3 } from './OrTree.vue';
2
- export * from './types';
@@ -1,14 +0,0 @@
1
- export { s as OrTreeV3 } from '../../OrTree-f4ee81ef.js';
2
- import 'vue-demi';
3
- import '../../OrIconButton-41ee266c.js';
4
- import '../../OrIcon-62793572.js';
5
- import 'vue';
6
- import '../../OrTooltip-02f07fa2.js';
7
- import '@vueuse/core';
8
- import '../../OrPopover-52250a03.js';
9
- import '@floating-ui/dom';
10
- import '../../useElevation-92fce12c.js';
11
- import '../../useResponsive-a02e95b7.js';
12
- import '../../OrBottomSheet-0f24ecae.js';
13
- import '../../OrOverlay-7cf03aea.js';
14
- import '../../OrTeleport.vue3-8099178c.js';
@@ -1 +0,0 @@
1
- export declare const TreeNodeRoot: string[];
@@ -1,10 +0,0 @@
1
- export interface ITreeNode {
2
- key: string;
3
- isLeaf: boolean;
4
- children?: ITreeNode[];
5
- }
6
- export interface ITreeNodeMetadata {
7
- level: number;
8
- isExpanded: boolean;
9
- parentNodeKey: string;
10
- }
@@ -1,5 +0,0 @@
1
- import { ITreeNode, ITreeNodeMetadata } from './types';
2
- export declare const getFlatTree: (tree: ITreeNode[]) => {
3
- flatTree: ITreeNode[];
4
- nodeMetadataByKey: Record<string, ITreeNodeMetadata>;
5
- };
@@ -1,104 +0,0 @@
1
- import { action } from '@storybook/addon-actions';
2
- import { StoryFn } from '@storybook/vue3';
3
- import OrTree from './OrTree.vue';
4
-
5
- const TREE_DATA = [
6
- {
7
- key: '0-0',
8
- children: [
9
- {
10
- key: '0-0-0',
11
- children: [
12
- {
13
- key: '0-0-0-0',
14
- },
15
- {
16
- key: '0-0-0-1',
17
- },
18
- {
19
- key: '0-0-0-2',
20
- },
21
- ],
22
- },
23
- {
24
- key: '0-0-1',
25
- children: [
26
- {
27
- key: '0-0-1-0',
28
- },
29
- {
30
- key: '0-0-1-1',
31
- },
32
- {
33
- key: '0-0-1-2',
34
- children: [
35
- {
36
- key: '0-0-1-2-0',
37
- },
38
- ],
39
- },
40
- ],
41
- },
42
- {
43
- key: '0-0-2',
44
- },
45
- ],
46
- },
47
- {
48
- key: '0-1',
49
- children: [
50
- {
51
- key: '0-1-0-0',
52
- },
53
- {
54
- key: '0-1-0-1',
55
- },
56
- {
57
- key: '0-1-0-2',
58
- },
59
- ],
60
- },
61
- {
62
- key: '0-2',
63
- isLeaf: true,
64
- },
65
- ];
66
-
67
- export default {
68
- title: 'Components/Tree',
69
- component: OrTree,
70
- argTypes: {
71
- },
72
- };
73
-
74
- const Template: StoryFn<typeof OrTree> = (args) => ({
75
- components: {
76
- OrTree,
77
- },
78
-
79
- data() {
80
- return {
81
- TREE_DATA,
82
- };
83
- },
84
-
85
- setup() {
86
- return {
87
- args,
88
- onUpdateState: action('update:state'),
89
- };
90
- },
91
-
92
- template: `
93
- <OrTree
94
- v-bind="args"
95
- />
96
- `,
97
- });
98
-
99
- export const Default = Template.bind({});
100
-
101
- Default.args = {
102
- // Props
103
- initialData: TREE_DATA,
104
- };