@agnos-ui/core-bootstrap 0.5.0-next.0 → 0.6.0-next.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 (19) hide show
  1. package/components/tree/index.cjs +12 -0
  2. package/components/tree/index.d.ts +1 -0
  3. package/components/tree/index.js +6 -0
  4. package/components/tree/tree.d.ts +58 -0
  5. package/config.d.ts +5 -0
  6. package/css/agnosui.css +70 -0
  7. package/css/agnosui.css.map +1 -1
  8. package/css/tree.css +71 -0
  9. package/css/tree.css.map +1 -0
  10. package/index.cjs +10 -0
  11. package/index.d.ts +1 -0
  12. package/index.js +6 -2
  13. package/package.json +2 -2
  14. package/scss/_functions.scss +34 -0
  15. package/scss/_variables.scss +15 -0
  16. package/scss/agnosui.scss +1 -0
  17. package/scss/tree.scss +76 -0
  18. package/tree-Be8WJS8u.js +21 -0
  19. package/tree-DuY7bsYo.cjs +20 -0
package/components/tree/index.cjs ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const tree = require("../../tree-DuY7bsYo.cjs");
4
+ const tree$1 = require("@agnos-ui/core/components/tree");
5
+ exports.createTree = tree.createTree;
6
+ exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;
7
+ Object.keys(tree$1).forEach((k) => {
8
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
9
+ enumerable: true,
10
+ get: () => tree$1[k]
11
+ });
12
+ });
package/components/tree/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './tree';
package/components/tree/index.js ADDED
@@ -0,0 +1,6 @@
1
+ import { c, g } from "../../tree-Be8WJS8u.js";
2
+ export * from "@agnos-ui/core/components/tree";
3
+ export {
4
+ c as createTree,
5
+ g as getTreeDefaultConfig
6
+ };
package/components/tree/tree.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ import type { TreeProps as CoreProps, TreeState as CoreState, TreeApi, TreeDirectives, NormalizedTreeItem } from '@agnos-ui/core/components/tree';
2
+ import type { SlotContent, Widget, WidgetFactory, WidgetSlotContext } from '@agnos-ui/core/types';
3
+ export * from '@agnos-ui/core/components/tree';
4
+ /**
5
+ * Represents the context for a Tree widget.
6
+ * This interface is an alias for `WidgetSlotContext<TreeWidget>`.
7
+ */
8
+ export type TreeContext = WidgetSlotContext<TreeWidget>;
9
+ /**
10
+ * Represents the context for a tree item, extending the base `TreeContext`
11
+ * with an additional `item` property.
12
+ */
13
+ export type TreeSlotItemContext = TreeContext & {
14
+ item: NormalizedTreeItem;
15
+ };
16
+ interface TreeExtraProps {
17
+ /**
18
+ * Slot to change the default display of the tree
19
+ */
20
+ structure: SlotContent<TreeContext>;
21
+ /**
22
+ * Slot to change the default tree item
23
+ */
24
+ item: SlotContent<TreeSlotItemContext>;
25
+ /**
26
+ * Slot to change the default tree item content
27
+ */
28
+ itemContent: SlotContent<TreeSlotItemContext>;
29
+ /**
30
+ * Slot to change the default tree item toggle
31
+ */
32
+ itemToggle: SlotContent<TreeSlotItemContext>;
33
+ }
34
+ /**
35
+ * Represents the state of a Tree component.
36
+ */
37
+ export interface TreeState extends CoreState, TreeExtraProps {
38
+ }
39
+ /**
40
+ * Represents the properties for the Tree component.
41
+ */
42
+ export interface TreeProps extends CoreProps, TreeExtraProps {
43
+ }
44
+ /**
45
+ * Represents a Tree widget component.
46
+ */
47
+ export type TreeWidget = Widget<TreeProps, TreeState, TreeApi, TreeDirectives>;
48
+ /**
49
+ * Retrieve a shallow copy of the default Tree config
50
+ * @returns the default Tree config
51
+ */
52
+ export declare function getTreeDefaultConfig(): TreeProps;
53
+ /**
54
+ * Create a Tree with given config props
55
+ * @param config - an optional tree config
56
+ * @returns a TreeWidget
57
+ */
58
+ export declare const createTree: WidgetFactory<TreeWidget>;
package/config.d.ts CHANGED
@@ -8,6 +8,7 @@ import type { RatingProps } from './components/rating';
8
8
  import type { SelectProps } from './components/select';
9
9
  import type { SliderProps } from './components/slider';
10
10
  import type { ToastProps } from './components/toast';
11
+ import type { TreeProps } from './components/tree';
11
12
  /**
12
13
  * Configuration interface for various Bootstrap widgets.
13
14
  */
@@ -52,4 +53,8 @@ export interface BootstrapWidgetsConfig {
52
53
  * collapse widget config
53
54
  */
54
55
  collapse: CollapseProps;
56
+ /**
57
+ * tree widget config
58
+ */
59
+ tree: TreeProps;
55
60
  }
package/css/agnosui.css CHANGED
@@ -1,3 +1,73 @@
1
+ /**
2
+ * Utility function to replace a substring as Sass doesn't provide the built-in method to do it
3
+ */
4
+ /**
5
+ * Method implementation taken from Bootstrap
6
+ * ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
7
+ */
8
+ .au-tree {
9
+ --bs-tree-item-padding-start: 2.25rem;
10
+ --bs-tree-expand-icon-margin-inline-end: 0.5rem;
11
+ --bs-tree-expand-icon-border-radius: 0.375rem;
12
+ --bs-tree-expand-icon-background-color: transparent;
13
+ --bs-tree-expand-icon-background-color-hover: var(--bs-blue-100, #cfe2ff);
14
+ --bs-tree-expand-icon-width: 2.25rem;
15
+ --bs-tree-expand-icon-height: 2.25rem;
16
+ --bs-tree-expand-icon-default: url('data:image/svg+xml;utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"%3e%3cpath d="M3 1 L7 5 L3 9" stroke="%230d6efd" stroke-width="1" fill="none"/%3e%3c/svg%3e');
17
+ --bs-tree-expand-icon-hover: url('data:image/svg+xml;utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"%3e%3cpath d="M3 1 L7 5 L3 9" stroke="%23052c65" stroke-width="1" fill="none"/%3e%3c/svg%3e');
18
+ list-style: none;
19
+ padding: 0;
20
+ margin: 0;
21
+ /* Expanded state */
22
+ }
23
+ .au-tree ul {
24
+ display: flex;
25
+ flex-direction: column;
26
+ list-style: none;
27
+ padding-inline-start: var(--bs-tree-item-padding-start);
28
+ margin: 0;
29
+ }
30
+ .au-tree li {
31
+ list-style: none;
32
+ padding: 0;
33
+ margin: 0;
34
+ }
35
+ .au-tree .au-tree-item {
36
+ position: relative;
37
+ display: flex;
38
+ align-items: center;
39
+ }
40
+ .au-tree .au-tree-expand-icon-placeholder {
41
+ display: flex;
42
+ width: calc(var(--bs-tree-expand-icon-width) + var(--bs-tree-expand-icon-margin-inline-end));
43
+ }
44
+ .au-tree .au-tree-expand-icon {
45
+ position: relative;
46
+ width: var(--bs-tree-expand-icon-width);
47
+ height: var(--bs-tree-expand-icon-height);
48
+ border-radius: var(--bs-tree-expand-icon-border-radius);
49
+ display: inline-flex;
50
+ border: 0;
51
+ padding-inline: 0;
52
+ margin-inline-end: var(--bs-tree-expand-icon-margin-inline-end);
53
+ background-color: var(--bs-tree-expand-icon-background-color);
54
+ }
55
+ .au-tree .au-tree-expand-icon:hover {
56
+ --bs-tree-expand-icon-default: var(--bs-tree-expand-icon-hover);
57
+ --bs-tree-expand-icon-background-color: var(--bs-tree-expand-icon-background-color-hover);
58
+ }
59
+ .au-tree .au-tree-expand-icon::after {
60
+ position: absolute;
61
+ content: var(--bs-tree-expand-icon-default);
62
+ transition: transform 0.3s;
63
+ top: 50%;
64
+ left: 50%;
65
+ transform: translate(-50%, -50%);
66
+ }
67
+ .au-tree .au-tree-expand-icon-expanded::after {
68
+ transform: translate(-55%, -50%) rotate(90deg);
69
+ }
70
+
1
71
  .au-select:focus-within {
2
72
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
3
73
  }
package/css/agnosui.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../scss/select.scss","../scss/slider.scss","../scss/rating.scss"],"names":[],"mappings":"AAEA;EACC;;;AAID;EACC;EACA;EACA;;;ACYD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAhFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AA4EA;EAzFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAqFA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;EAEC;;;ACrPF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"agnosui.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACbA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;AAqDA;;AAnDA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAID;EACC;;;ACvEF;EACC;;;AAID;EACC;EACA;EACA;;;ACYD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAhFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AA4EA;EAzFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAqFA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;EAEC;;;ACrPF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"agnosui.css"}
package/css/tree.css ADDED
@@ -0,0 +1,71 @@
1
+ /**
2
+ * Utility function to replace a substring as Sass doesn't provide the built-in method to do it
3
+ */
4
+ /**
5
+ * Method implementation taken from Bootstrap
6
+ * ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
7
+ */
8
+ .au-tree {
9
+ --bs-tree-item-padding-start: 2.25rem;
10
+ --bs-tree-expand-icon-margin-inline-end: 0.5rem;
11
+ --bs-tree-expand-icon-border-radius: 0.375rem;
12
+ --bs-tree-expand-icon-background-color: transparent;
13
+ --bs-tree-expand-icon-background-color-hover: var(--bs-blue-100, #cfe2ff);
14
+ --bs-tree-expand-icon-width: 2.25rem;
15
+ --bs-tree-expand-icon-height: 2.25rem;
16
+ --bs-tree-expand-icon-default: url('data:image/svg+xml;utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"%3e%3cpath d="M3 1 L7 5 L3 9" stroke="%230d6efd" stroke-width="1" fill="none"/%3e%3c/svg%3e');
17
+ --bs-tree-expand-icon-hover: url('data:image/svg+xml;utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"%3e%3cpath d="M3 1 L7 5 L3 9" stroke="%23052c65" stroke-width="1" fill="none"/%3e%3c/svg%3e');
18
+ list-style: none;
19
+ padding: 0;
20
+ margin: 0;
21
+ /* Expanded state */
22
+ }
23
+ .au-tree ul {
24
+ display: flex;
25
+ flex-direction: column;
26
+ list-style: none;
27
+ padding-inline-start: var(--bs-tree-item-padding-start);
28
+ margin: 0;
29
+ }
30
+ .au-tree li {
31
+ list-style: none;
32
+ padding: 0;
33
+ margin: 0;
34
+ }
35
+ .au-tree .au-tree-item {
36
+ position: relative;
37
+ display: flex;
38
+ align-items: center;
39
+ }
40
+ .au-tree .au-tree-expand-icon-placeholder {
41
+ display: flex;
42
+ width: calc(var(--bs-tree-expand-icon-width) + var(--bs-tree-expand-icon-margin-inline-end));
43
+ }
44
+ .au-tree .au-tree-expand-icon {
45
+ position: relative;
46
+ width: var(--bs-tree-expand-icon-width);
47
+ height: var(--bs-tree-expand-icon-height);
48
+ border-radius: var(--bs-tree-expand-icon-border-radius);
49
+ display: inline-flex;
50
+ border: 0;
51
+ padding-inline: 0;
52
+ margin-inline-end: var(--bs-tree-expand-icon-margin-inline-end);
53
+ background-color: var(--bs-tree-expand-icon-background-color);
54
+ }
55
+ .au-tree .au-tree-expand-icon:hover {
56
+ --bs-tree-expand-icon-default: var(--bs-tree-expand-icon-hover);
57
+ --bs-tree-expand-icon-background-color: var(--bs-tree-expand-icon-background-color-hover);
58
+ }
59
+ .au-tree .au-tree-expand-icon::after {
60
+ position: absolute;
61
+ content: var(--bs-tree-expand-icon-default);
62
+ transition: transform 0.3s;
63
+ top: 50%;
64
+ left: 50%;
65
+ transform: translate(-50%, -50%);
66
+ }
67
+ .au-tree .au-tree-expand-icon-expanded::after {
68
+ transform: translate(-55%, -50%) rotate(90deg);
69
+ }
70
+
71
+ /*# sourceMappingURL=tree.css.map */
package/css/tree.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACbA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;AAqDA;;AAnDA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAID;EACC","file":"tree.css"}
package/index.cjs CHANGED
@@ -10,6 +10,7 @@ const select = require("./select-AtIM2x7x.cjs");
10
10
  const slider = require("./slider-UHwPs1vO.cjs");
11
11
  const toast = require("./toast-BYDfN1cI.cjs");
12
12
  const collapse = require("./collapse-Ci0mVprH.cjs");
13
+ const tree = require("./tree-DuY7bsYo.cjs");
13
14
  const collapse$1 = require("./collapse-sUYbZqEx.cjs");
14
15
  const fade = require("./fade-CJ0jXGio.cjs");
15
16
  const types = require("./types.cjs");
@@ -22,6 +23,7 @@ const rating$1 = require("@agnos-ui/core/components/rating");
22
23
  const select$1 = require("@agnos-ui/core/components/select");
23
24
  const slider$1 = require("@agnos-ui/core/components/slider");
24
25
  const toast$1 = require("@agnos-ui/core/components/toast");
26
+ const tree$1 = require("@agnos-ui/core/components/tree");
25
27
  exports.createAccordion = accordion.createAccordion;
26
28
  exports.createAccordionItem = accordion.createAccordionItem;
27
29
  exports.getAccordionDefaultConfig = accordion.getAccordionDefaultConfig;
@@ -44,6 +46,8 @@ exports.createToast = toast.createToast;
44
46
  exports.getToastDefaultConfig = toast.getToastDefaultConfig;
45
47
  exports.createCollapse = collapse.createCollapse;
46
48
  exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
49
+ exports.createTree = tree.createTree;
50
+ exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;
47
51
  exports.collapseHorizontalTransition = collapse$1.collapseHorizontalTransition;
48
52
  exports.collapseVerticalTransition = collapse$1.collapseVerticalTransition;
49
53
  exports.fadeTransition = fade.fadeTransition;
@@ -102,3 +106,9 @@ Object.keys(toast$1).forEach((k) => {
102
106
  get: () => toast$1[k]
103
107
  });
104
108
  });
109
+ Object.keys(tree$1).forEach((k) => {
110
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
111
+ enumerable: true,
112
+ get: () => tree$1[k]
113
+ });
114
+ });
package/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export * from './components/select';
8
8
  export * from './components/slider';
9
9
  export * from './components/toast';
10
10
  export * from './components/collapse';
11
+ export * from './components/tree';
11
12
  export * from './services/transitions';
12
13
  export * from './config';
13
14
  export * from './types';
package/index.js CHANGED
@@ -8,7 +8,8 @@ import { c as c7, g as g7 } from "./select-CLjBDJ3a.js";
8
8
  import { c as c8, g as g8 } from "./slider-CLWQS0Ke.js";
9
9
  import { c as c9, g as g9 } from "./toast-D-by8Hwt.js";
10
10
  import { c as c10, g as g10 } from "./collapse-BBklAEOu.js";
11
- import { a as a2, c as c11 } from "./collapse-CVjUhnIz.js";
11
+ import { c as c11, g as g11 } from "./tree-Be8WJS8u.js";
12
+ import { a as a2, c as c12 } from "./collapse-CVjUhnIz.js";
12
13
  import { f } from "./fade-uOobJKgw.js";
13
14
  import { BS_CONTEXTUAL_CLASSES } from "./types.js";
14
15
  export * from "@agnos-ui/core/components/accordion";
@@ -20,10 +21,11 @@ export * from "@agnos-ui/core/components/rating";
20
21
  export * from "@agnos-ui/core/components/select";
21
22
  export * from "@agnos-ui/core/components/slider";
22
23
  export * from "@agnos-ui/core/components/toast";
24
+ export * from "@agnos-ui/core/components/tree";
23
25
  export {
24
26
  BS_CONTEXTUAL_CLASSES,
25
27
  a2 as collapseHorizontalTransition,
26
- c11 as collapseVerticalTransition,
28
+ c12 as collapseVerticalTransition,
27
29
  a as createAccordion,
28
30
  c as createAccordionItem,
29
31
  c2 as createAlert,
@@ -35,6 +37,7 @@ export {
35
37
  c7 as createSelect,
36
38
  c8 as createSlider,
37
39
  c9 as createToast,
40
+ c11 as createTree,
38
41
  f as fadeTransition,
39
42
  g as getAccordionDefaultConfig,
40
43
  g2 as getAlertDefaultConfig,
@@ -46,5 +49,6 @@ export {
46
49
  g7 as getSelectDefaultConfig,
47
50
  g8 as getSliderDefaultConfig,
48
51
  g9 as getToastDefaultConfig,
52
+ g11 as getTreeDefaultConfig,
49
53
  n as ngBootstrapPagination
50
54
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agnos-ui/core-bootstrap",
3
3
  "description": "Styles and component interface extensions necessary to use AgnosUI with Bootstrap.",
4
- "version": "0.5.0-next.0",
4
+ "version": "0.6.0-next.0",
5
5
  "keywords": [
6
6
  "bootstrap",
7
7
  "css",
@@ -60,7 +60,7 @@
60
60
  }
61
61
  },
62
62
  "dependencies": {
63
- "@agnos-ui/core": "0.5.0-next.0"
63
+ "@agnos-ui/core": "0.6.0-next.0"
64
64
  },
65
65
  "peerDependencies": {
66
66
  "@amadeus-it-group/tansu": "^1.0.0"
package/scss/_functions.scss ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Utility function to replace a substring as Sass doesn't provide the built-in method to do it
3
+ */
4
+ @function str-replace($string, $search, $replace: '') {
5
+ $index: str-index($string, $search);
6
+
7
+ @if $index {
8
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
9
+ }
10
+
11
+ @return $string;
12
+ }
13
+
14
+ // Characters which are escaped by the escape-svg function
15
+ $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
16
+
17
+ /**
18
+ * Method implementation taken from Bootstrap
19
+ * ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
20
+ */
21
+ @function escape-svg($string) {
22
+ @if str-index($string, 'data:image/svg+xml') {
23
+ @each $char, $encoded in $escaped-characters {
24
+ // Do not escape the url brackets
25
+ @if str-index($string, 'url(') == 1 {
26
+ $string: url('#{str-replace(str-slice($string, 6, -3), $char, $encoded)}');
27
+ } @else {
28
+ $string: str-replace($string, $char, $encoded);
29
+ }
30
+ }
31
+ }
32
+
33
+ @return $string;
34
+ }
package/scss/_variables.scss CHANGED
@@ -67,3 +67,18 @@ $au-slider-handle-size-lg: 1.5rem !default;
67
67
  $au-slider-font-size-lg: 1.125rem !default;
68
68
  $au-slider-offset-lg: 0rem !default;
69
69
  // scss-docs-end slider-vars
70
+
71
+ // tree variables
72
+ // scss-docs-start tree-vars
73
+ $au-tree-item-padding-start: 2.25rem !default;
74
+ $au-tree-expand-icon-margin-inline-end: 0.5rem !default;
75
+ $au-tree-expand-icon-border-radius: 0.375rem !default;
76
+ $au-tree-expand-icon-background-color: transparent !default;
77
+ $au-tree-expand-icon-background-color-hover: var(--#{$prefix}blue-100, #cfe2ff) !default;
78
+ $au-tree-expand-icon-width: 2.25rem;
79
+ $au-tree-expand-icon-height: 2.25rem;
80
+ $au-tree-expand-icon-color-default: #0d6efd !default;
81
+ $au-tree-expand-icon-color-hover: #052c65 !default;
82
+ $au-tree-expand-icon-default: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"><path d="M3 1 L7 5 L3 9" stroke="#{$au-tree-expand-icon-color-default}" stroke-width="1" fill="none"/></svg>') !default;
83
+ $au-tree-expand-icon-hover: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"><path d="M3 1 L7 5 L3 9" stroke="#{$au-tree-expand-icon-color-hover}" stroke-width="1" fill="none"/></svg>') !default;
84
+ // scss-docs-end tree-vars
package/scss/agnosui.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  //components
2
+ @use 'tree';
2
3
  @import 'select';
3
4
  @import 'slider';
4
5
  @import 'rating';
package/scss/tree.scss ADDED
@@ -0,0 +1,76 @@
1
+ @use 'variables';
2
+ @import '_functions';
3
+
4
+ .au-tree {
5
+ // scss-docs-start tree-css-vars
6
+ --#{variables.$prefix}tree-item-padding-start: #{variables.$au-tree-item-padding-start};
7
+ --#{variables.$prefix}tree-expand-icon-margin-inline-end: #{variables.$au-tree-expand-icon-margin-inline-end};
8
+ --#{variables.$prefix}tree-expand-icon-border-radius: #{variables.$au-tree-expand-icon-border-radius};
9
+ --#{variables.$prefix}tree-expand-icon-background-color: #{variables.$au-tree-expand-icon-background-color};
10
+ --#{variables.$prefix}tree-expand-icon-background-color-hover: #{variables.$au-tree-expand-icon-background-color-hover};
11
+ --#{variables.$prefix}tree-expand-icon-width: #{variables.$au-tree-expand-icon-width};
12
+ --#{variables.$prefix}tree-expand-icon-height: #{variables.$au-tree-expand-icon-height};
13
+ --#{variables.$prefix}tree-expand-icon-default: #{escape-svg(variables.$au-tree-expand-icon-default)};
14
+ --#{variables.$prefix}tree-expand-icon-hover: #{escape-svg(variables.$au-tree-expand-icon-hover)};
15
+ // scss-docs-end tree-css-vars
16
+
17
+ list-style: none;
18
+ padding: 0;
19
+ margin: 0;
20
+
21
+ ul {
22
+ display: flex;
23
+ flex-direction: column;
24
+ list-style: none;
25
+ padding-inline-start: var(--#{variables.$prefix}tree-item-padding-start);
26
+ margin: 0;
27
+ }
28
+
29
+ li {
30
+ list-style: none;
31
+ padding: 0;
32
+ margin: 0;
33
+ }
34
+
35
+ .au-tree-item {
36
+ position: relative;
37
+ display: flex;
38
+ align-items: center;
39
+ }
40
+
41
+ .au-tree-expand-icon-placeholder {
42
+ display: flex;
43
+ width: calc(var(--#{variables.$prefix}tree-expand-icon-width) + var(--#{variables.$prefix}tree-expand-icon-margin-inline-end));
44
+ }
45
+
46
+ .au-tree-expand-icon {
47
+ position: relative;
48
+ width: var(--#{variables.$prefix}tree-expand-icon-width);
49
+ height: var(--#{variables.$prefix}tree-expand-icon-height);
50
+ border-radius: var(--#{variables.$prefix}tree-expand-icon-border-radius);
51
+ display: inline-flex;
52
+ border: 0;
53
+ padding-inline: 0;
54
+ margin-inline-end: var(--#{variables.$prefix}tree-expand-icon-margin-inline-end);
55
+ background-color: var(--#{variables.$prefix}tree-expand-icon-background-color);
56
+
57
+ &:hover {
58
+ --#{variables.$prefix}tree-expand-icon-default: var(--#{variables.$prefix}tree-expand-icon-hover);
59
+ --#{variables.$prefix}tree-expand-icon-background-color: var(--#{variables.$prefix}tree-expand-icon-background-color-hover);
60
+ }
61
+ }
62
+
63
+ .au-tree-expand-icon::after {
64
+ position: absolute;
65
+ content: var(--#{variables.$prefix}tree-expand-icon-default);
66
+ transition: transform 0.3s;
67
+ top: 50%;
68
+ left: 50%;
69
+ transform: translate(-50%, -50%);
70
+ }
71
+
72
+ /* Expanded state */
73
+ .au-tree-expand-icon-expanded::after {
74
+ transform: translate(-55%, -50%) rotate(90deg);
75
+ }
76
+ }
package/tree-Be8WJS8u.js ADDED
@@ -0,0 +1,21 @@
1
+ import { getTreeDefaultConfig as getTreeDefaultConfig$1, createTree as createTree$1 } from "@agnos-ui/core/components/tree";
2
+ import { extendWidgetProps } from "@agnos-ui/core/services/extendWidget";
3
+ const defaultConfigExtraProps = {
4
+ structure: void 0,
5
+ item: void 0,
6
+ itemContent: void 0,
7
+ itemToggle: void 0
8
+ };
9
+ function getTreeDefaultConfig() {
10
+ return { ...getTreeDefaultConfig$1(), ...defaultConfigExtraProps };
11
+ }
12
+ const createTree = extendWidgetProps(createTree$1, defaultConfigExtraProps, {
13
+ structure: void 0,
14
+ item: void 0,
15
+ itemContent: void 0,
16
+ itemToggle: void 0
17
+ });
18
+ export {
19
+ createTree as c,
20
+ getTreeDefaultConfig as g
21
+ };
package/tree-DuY7bsYo.cjs ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ const tree = require("@agnos-ui/core/components/tree");
3
+ const extendWidget = require("@agnos-ui/core/services/extendWidget");
4
+ const defaultConfigExtraProps = {
5
+ structure: void 0,
6
+ item: void 0,
7
+ itemContent: void 0,
8
+ itemToggle: void 0
9
+ };
10
+ function getTreeDefaultConfig() {
11
+ return { ...tree.getTreeDefaultConfig(), ...defaultConfigExtraProps };
12
+ }
13
+ const createTree = extendWidget.extendWidgetProps(tree.createTree, defaultConfigExtraProps, {
14
+ structure: void 0,
15
+ item: void 0,
16
+ itemContent: void 0,
17
+ itemToggle: void 0
18
+ });
19
+ exports.createTree = createTree;
20
+ exports.getTreeDefaultConfig = getTreeDefaultConfig;