@agnos-ui/core-bootstrap 0.9.3 → 0.10.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.
@@ -19,7 +19,7 @@ function getCollapseDefaultConfig() {
19
19
  const createCollapse = createWidgetFactory("collapse", (config) => {
20
20
  const [{ horizontal$, className$ }, patch] = writablesForProps(defaultConfigExtraProps, config, configValidator);
21
21
  const transitionFn$ = asWritable(computed(() => horizontal$() ? collapseHorizontalTransition : collapseVerticalTransition));
22
- const widget = createCollapse$1({ ...config ?? {}, props: { ...(config == null ? void 0 : config.props) ?? {}, transition: transitionFn$ } });
22
+ const widget = createCollapse$1({ ...config ?? {}, props: { ...config?.props ?? {}, transition: transitionFn$ } });
23
23
  return {
24
24
  ...widget,
25
25
  patch: (storesValues) => batch(() => {
@@ -20,7 +20,7 @@ function getCollapseDefaultConfig() {
20
20
  const createCollapse = widget.createWidgetFactory("collapse", (config) => {
21
21
  const [{ horizontal$, className$ }, patch] = stores.writablesForProps(defaultConfigExtraProps, config, configValidator);
22
22
  const transitionFn$ = tansu.asWritable(tansu.computed(() => horizontal$() ? collapse$1.collapseHorizontalTransition : collapse$1.collapseVerticalTransition));
23
- const widget2 = collapse.createCollapse({ ...config ?? {}, props: { ...(config == null ? void 0 : config.props) ?? {}, transition: transitionFn$ } });
23
+ const widget2 = collapse.createCollapse({ ...config ?? {}, props: { ...config?.props ?? {}, transition: transitionFn$ } });
24
24
  return {
25
25
  ...widget2,
26
26
  patch: (storesValues) => tansu.batch(() => {
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const collapse = require("../../collapse-CVbEdyy9.cjs");
3
+ const collapse = require("../../collapse-Dy-3cJym.cjs");
4
4
  const collapse$1 = require("@agnos-ui/core/components/collapse");
5
5
  exports.createCollapse = collapse.createCollapse;
6
6
  exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
@@ -1,4 +1,4 @@
1
- import { c, g } from "../../collapse-Bngag_Xi.js";
1
+ import { c, g } from "../../collapse-BxmbNhX5.js";
2
2
  export * from "@agnos-ui/core/components/collapse";
3
3
  export {
4
4
  c as createCollapse,
@@ -0,0 +1,71 @@
1
+ import type { DrawerProps as CoreProps, DrawerState as CoreState, DrawerApi, DrawerDirectives as DrawerCoreDirectives } from '@agnos-ui/core/components/drawer';
2
+ import type { Directive, SlotContent, Widget, WidgetFactory, WidgetSlotContext } from '@agnos-ui/core/types';
3
+ export * from '@agnos-ui/core/components/drawer';
4
+ /**
5
+ * Represents the context for a Drawer widget.
6
+ * This interface is an alias for `WidgetSlotContext<DrawerWidget>`.
7
+ */
8
+ export type DrawerContext = WidgetSlotContext<DrawerWidget>;
9
+ /**
10
+ * Represents additional properties for the Drawer widget like slots etc.
11
+ */
12
+ interface DrawerExtraProps {
13
+ /**
14
+ * Global template for the drawer component
15
+ */
16
+ structure: SlotContent<DrawerContext>;
17
+ /**
18
+ * Template for the drawer header
19
+ */
20
+ header: SlotContent<DrawerContext>;
21
+ /**
22
+ * Template for the drawer body
23
+ */
24
+ children: SlotContent<DrawerContext>;
25
+ }
26
+ /**
27
+ * Represents the state of a Drawer component.
28
+ */
29
+ export interface DrawerState extends CoreState, DrawerExtraProps {
30
+ }
31
+ /**
32
+ * Represents the properties for the Drawer component.
33
+ */
34
+ export interface DrawerProps extends CoreProps, DrawerExtraProps {
35
+ }
36
+ /**
37
+ * Represents the directives for the Drawer component.
38
+ */
39
+ export interface DrawerDirectives extends DrawerCoreDirectives {
40
+ /**
41
+ * Directive to put on the drawer DOM element.
42
+ */
43
+ drawerDirective: Directive;
44
+ /**
45
+ * Directive to put on the backdrop DOM element.
46
+ */
47
+ backdropDirective: Directive;
48
+ /**
49
+ * Directive to put on the splitter DOM element.
50
+ */
51
+ splitterDirective: Directive;
52
+ /**
53
+ * Directive to put on the container DOM element in order for the drawer to size correctly.
54
+ */
55
+ containerDirective: Directive;
56
+ }
57
+ /**
58
+ * Represents a Drawer widget component.
59
+ */
60
+ export type DrawerWidget = Widget<DrawerProps, DrawerState, DrawerApi, DrawerDirectives>;
61
+ /**
62
+ * Retrieve a shallow copy of the default Drawer config
63
+ * @returns the default Drawer config
64
+ */
65
+ export declare function getDrawerDefaultConfig(): DrawerProps;
66
+ /**
67
+ * Create a Drawer with given config props
68
+ * @param config - an optional Drawer config
69
+ * @returns a DrawerWidget
70
+ */
71
+ export declare const createDrawer: WidgetFactory<DrawerWidget>;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const drawer = require("../../drawer-Dv6lMUKE.cjs");
4
+ const drawer$1 = require("@agnos-ui/core/components/drawer");
5
+ exports.createDrawer = drawer.createDrawer;
6
+ exports.getDrawerDefaultConfig = drawer.getDrawerDefaultConfig;
7
+ Object.keys(drawer$1).forEach((k) => {
8
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
9
+ enumerable: true,
10
+ get: () => drawer$1[k]
11
+ });
12
+ });
@@ -0,0 +1 @@
1
+ export * from './drawer';
@@ -0,0 +1,6 @@
1
+ import { c, g } from "../../drawer-ByOWziyU.js";
2
+ export * from "@agnos-ui/core/components/drawer";
3
+ export {
4
+ c as createDrawer,
5
+ g as getDrawerDefaultConfig
6
+ };
package/config.d.ts CHANGED
@@ -10,6 +10,7 @@ import type { SelectProps } from './components/select';
10
10
  import type { SliderProps } from './components/slider';
11
11
  import type { ToastProps } from './components/toast';
12
12
  import type { TreeProps } from './components/tree';
13
+ import type { DrawerProps } from './components/drawer';
13
14
  /**
14
15
  * Configuration interface for various Bootstrap widgets.
15
16
  */
@@ -62,4 +63,8 @@ export interface BootstrapWidgetsConfig {
62
63
  * carousel widget config
63
64
  */
64
65
  carousel: CarouselProps<any>;
66
+ /**
67
+ * drawer widget config
68
+ */
69
+ drawer: DrawerProps;
65
70
  }
package/css/agnosui.css CHANGED
@@ -410,4 +410,73 @@
410
410
  padding: 1rem;
411
411
  }
412
412
 
413
+ .au-drawer {
414
+ --bs-drawer-z-index: 2010;
415
+ display: flex;
416
+ flex-direction: column;
417
+ background: #fff;
418
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
419
+ z-index: var(--bs-drawer-z-index);
420
+ }
421
+ .au-drawer.inline-start {
422
+ inset-block: 0;
423
+ inset-inline-start: 0;
424
+ }
425
+ .au-drawer.inline-end {
426
+ inset-block: 0;
427
+ inset-inline-end: 0;
428
+ }
429
+ .au-drawer.inline-end .au-splitter {
430
+ inset-inline-end: auto;
431
+ }
432
+ .au-drawer.block-start {
433
+ inset-inline: 0;
434
+ inset-block-start: 0;
435
+ }
436
+ .au-drawer.block-start .au-splitter {
437
+ inset-block-start: auto;
438
+ }
439
+ .au-drawer.block-end {
440
+ inset-inline: 0;
441
+ inset-block-end: 0;
442
+ }
443
+ .au-drawer .au-drawer-header {
444
+ padding: 0.75rem 1rem;
445
+ font-weight: 600;
446
+ border-bottom: 1px solid #e2e2e2;
447
+ }
448
+ .au-drawer .au-drawer-body {
449
+ padding: 1rem;
450
+ overflow-y: auto;
451
+ flex: 1;
452
+ }
453
+ .au-drawer .au-splitter {
454
+ position: absolute;
455
+ inset-block: 0;
456
+ inset-inline-end: -4px;
457
+ width: 8px;
458
+ cursor: ew-resize;
459
+ background: transparent;
460
+ }
461
+ .au-drawer.block-start .au-splitter, .au-drawer.block-end .au-splitter {
462
+ inset-inline: 0;
463
+ width: auto;
464
+ height: 8px;
465
+ cursor: ns-resize;
466
+ }
467
+
468
+ .au-drawer-backdrop {
469
+ --bs-drawer-backdrop-z-index: 2000;
470
+ --bs-drawer-backdrop-color: #1a1a1a;
471
+ --bs-drawer-backdrop-opacity: 0.75;
472
+ position: fixed;
473
+ inset: 0;
474
+ background: var(--bs-drawer-backdrop-color);
475
+ z-index: var(--bs-drawer-backdrop-z-index);
476
+ }
477
+ .au-drawer-backdrop.show {
478
+ opacity: var(--bs-drawer-backdrop-opacity);
479
+ pointer-events: auto;
480
+ }
481
+
413
482
  /*# sourceMappingURL=agnosui.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss","../scss/carousel.scss","../scss/toaster.scss"],"names":[],"mappings":"AAEA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;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;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAKD;EACC;;;ACzEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACiBD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;EApGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AA6FA;EA/GA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAwGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;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;;AAGD;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;AC7WH;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACZD;EACC;;;AAGD;EACC","file":"agnosui.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss","../scss/carousel.scss","../scss/toaster.scss","../scss/drawer.scss"],"names":[],"mappings":"AAEA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;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;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAKD;EACC;;;ACzEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACiBD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;EApGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AA6FA;EA/GA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAwGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;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;;AAGD;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;AC7WH;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACZD;EACC;;;AAGD;EACC;;;ACHD;EAEC;EAGA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAKF;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAID;EAEC;EACA;EACA;EACA;;;AAIF;EAEC;EACA;EACA;EAGA;EACA;EACA;EACA;;AAEA;EACC;EACA","file":"agnosui.css"}
package/css/drawer.css ADDED
@@ -0,0 +1,70 @@
1
+ .au-drawer {
2
+ --bs-drawer-z-index: 2010;
3
+ display: flex;
4
+ flex-direction: column;
5
+ background: #fff;
6
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
7
+ z-index: var(--bs-drawer-z-index);
8
+ }
9
+ .au-drawer.inline-start {
10
+ inset-block: 0;
11
+ inset-inline-start: 0;
12
+ }
13
+ .au-drawer.inline-end {
14
+ inset-block: 0;
15
+ inset-inline-end: 0;
16
+ }
17
+ .au-drawer.inline-end .au-splitter {
18
+ inset-inline-end: auto;
19
+ }
20
+ .au-drawer.block-start {
21
+ inset-inline: 0;
22
+ inset-block-start: 0;
23
+ }
24
+ .au-drawer.block-start .au-splitter {
25
+ inset-block-start: auto;
26
+ }
27
+ .au-drawer.block-end {
28
+ inset-inline: 0;
29
+ inset-block-end: 0;
30
+ }
31
+ .au-drawer .au-drawer-header {
32
+ padding: 0.75rem 1rem;
33
+ font-weight: 600;
34
+ border-bottom: 1px solid #e2e2e2;
35
+ }
36
+ .au-drawer .au-drawer-body {
37
+ padding: 1rem;
38
+ overflow-y: auto;
39
+ flex: 1;
40
+ }
41
+ .au-drawer .au-splitter {
42
+ position: absolute;
43
+ inset-block: 0;
44
+ inset-inline-end: -4px;
45
+ width: 8px;
46
+ cursor: ew-resize;
47
+ background: transparent;
48
+ }
49
+ .au-drawer.block-start .au-splitter, .au-drawer.block-end .au-splitter {
50
+ inset-inline: 0;
51
+ width: auto;
52
+ height: 8px;
53
+ cursor: ns-resize;
54
+ }
55
+
56
+ .au-drawer-backdrop {
57
+ --bs-drawer-backdrop-z-index: 2000;
58
+ --bs-drawer-backdrop-color: #1a1a1a;
59
+ --bs-drawer-backdrop-opacity: 0.75;
60
+ position: fixed;
61
+ inset: 0;
62
+ background: var(--bs-drawer-backdrop-color);
63
+ z-index: var(--bs-drawer-backdrop-z-index);
64
+ }
65
+ .au-drawer-backdrop.show {
66
+ opacity: var(--bs-drawer-backdrop-opacity);
67
+ pointer-events: auto;
68
+ }
69
+
70
+ /*# sourceMappingURL=drawer.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../scss/drawer.scss"],"names":[],"mappings":"AAEA;EAEC;EAGA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAKF;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAID;EAEC;EACA;EACA;EACA;;;AAIF;EAEC;EACA;EACA;EAGA;EACA;EACA;EACA;;AAEA;EACC;EACA","file":"drawer.css"}
@@ -0,0 +1,72 @@
1
+ import { getDrawerDefaultConfig as getDrawerDefaultConfig$1, createDrawer as createDrawer$1 } from "@agnos-ui/core/components/drawer";
2
+ import { extendWidgetProps } from "@agnos-ui/core/services/extendWidget";
3
+ import { c as collapseVerticalTransition, a as collapseHorizontalTransition } from "./collapse-CVjUhnIz.js";
4
+ import { f as fadeTransition } from "./fade-uOobJKgw.js";
5
+ import { createWidgetFactory } from "@agnos-ui/core/utils/widget";
6
+ import { mergeDirectives, createAttributesDirective } from "@agnos-ui/core/utils/directive";
7
+ import { true$ } from "@agnos-ui/core/utils/stores";
8
+ const defaultConfigExtraProps = {
9
+ structure: void 0,
10
+ header: void 0,
11
+ children: void 0
12
+ };
13
+ const configValidator = {
14
+ structure: void 0,
15
+ header: void 0,
16
+ children: void 0
17
+ };
18
+ function getDrawerDefaultConfig() {
19
+ return { ...getDrawerDefaultConfig$1(), ...defaultConfigExtraProps, ...coreOverride };
20
+ }
21
+ const coreOverride = {
22
+ backdropTransition: fadeTransition,
23
+ transition: collapseHorizontalTransition,
24
+ verticalTransition: collapseVerticalTransition
25
+ };
26
+ const createDrawer = createWidgetFactory("drawer", (config) => {
27
+ const widget = extendWidgetProps(createDrawer$1, defaultConfigExtraProps, configValidator, coreOverride)(config);
28
+ return {
29
+ ...widget,
30
+ directives: {
31
+ ...widget.directives,
32
+ drawerDirective: mergeDirectives(
33
+ widget.directives.drawerDirective,
34
+ createAttributesDirective(() => ({
35
+ classNames: {
36
+ "au-drawer": true$,
37
+ show: widget.stores.visible$
38
+ }
39
+ }))
40
+ ),
41
+ backdropDirective: mergeDirectives(
42
+ widget.directives.backdropDirective,
43
+ createAttributesDirective(() => ({
44
+ classNames: {
45
+ "au-drawer-backdrop": true$,
46
+ show: widget.stores.visible$
47
+ }
48
+ }))
49
+ ),
50
+ splitterDirective: mergeDirectives(
51
+ widget.directives.splitterDirective,
52
+ createAttributesDirective(() => ({
53
+ classNames: {
54
+ "au-splitter": true$
55
+ }
56
+ }))
57
+ ),
58
+ containerDirective: mergeDirectives(
59
+ widget.directives.containerDirective,
60
+ createAttributesDirective(() => ({
61
+ classNames: {
62
+ "au-drawer-container": true$
63
+ }
64
+ }))
65
+ )
66
+ }
67
+ };
68
+ });
69
+ export {
70
+ createDrawer as c,
71
+ getDrawerDefaultConfig as g
72
+ };
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+ const drawer = require("@agnos-ui/core/components/drawer");
3
+ const extendWidget = require("@agnos-ui/core/services/extendWidget");
4
+ const collapse = require("./collapse-sUYbZqEx.cjs");
5
+ const fade = require("./fade-CJ0jXGio.cjs");
6
+ const widget = require("@agnos-ui/core/utils/widget");
7
+ const directive = require("@agnos-ui/core/utils/directive");
8
+ const stores = require("@agnos-ui/core/utils/stores");
9
+ const defaultConfigExtraProps = {
10
+ structure: void 0,
11
+ header: void 0,
12
+ children: void 0
13
+ };
14
+ const configValidator = {
15
+ structure: void 0,
16
+ header: void 0,
17
+ children: void 0
18
+ };
19
+ function getDrawerDefaultConfig() {
20
+ return { ...drawer.getDrawerDefaultConfig(), ...defaultConfigExtraProps, ...coreOverride };
21
+ }
22
+ const coreOverride = {
23
+ backdropTransition: fade.fadeTransition,
24
+ transition: collapse.collapseHorizontalTransition,
25
+ verticalTransition: collapse.collapseVerticalTransition
26
+ };
27
+ const createDrawer = widget.createWidgetFactory("drawer", (config) => {
28
+ const widget2 = extendWidget.extendWidgetProps(drawer.createDrawer, defaultConfigExtraProps, configValidator, coreOverride)(config);
29
+ return {
30
+ ...widget2,
31
+ directives: {
32
+ ...widget2.directives,
33
+ drawerDirective: directive.mergeDirectives(
34
+ widget2.directives.drawerDirective,
35
+ directive.createAttributesDirective(() => ({
36
+ classNames: {
37
+ "au-drawer": stores.true$,
38
+ show: widget2.stores.visible$
39
+ }
40
+ }))
41
+ ),
42
+ backdropDirective: directive.mergeDirectives(
43
+ widget2.directives.backdropDirective,
44
+ directive.createAttributesDirective(() => ({
45
+ classNames: {
46
+ "au-drawer-backdrop": stores.true$,
47
+ show: widget2.stores.visible$
48
+ }
49
+ }))
50
+ ),
51
+ splitterDirective: directive.mergeDirectives(
52
+ widget2.directives.splitterDirective,
53
+ directive.createAttributesDirective(() => ({
54
+ classNames: {
55
+ "au-splitter": stores.true$
56
+ }
57
+ }))
58
+ ),
59
+ containerDirective: directive.mergeDirectives(
60
+ widget2.directives.containerDirective,
61
+ directive.createAttributesDirective(() => ({
62
+ classNames: {
63
+ "au-drawer-container": stores.true$
64
+ }
65
+ }))
66
+ )
67
+ }
68
+ };
69
+ });
70
+ exports.createDrawer = createDrawer;
71
+ exports.getDrawerDefaultConfig = getDrawerDefaultConfig;
package/index.cjs CHANGED
@@ -9,9 +9,10 @@ const rating = require("./rating-C5NZjIRx.cjs");
9
9
  const select = require("./select-AtIM2x7x.cjs");
10
10
  const slider = require("./slider-CosrWCnn.cjs");
11
11
  const toast = require("./toast-C4gj0rX-.cjs");
12
- const collapse = require("./collapse-CVbEdyy9.cjs");
12
+ const collapse = require("./collapse-Dy-3cJym.cjs");
13
13
  const tree = require("./tree-DuY7bsYo.cjs");
14
14
  const carousel = require("./carousel-C-vSnTTq.cjs");
15
+ const drawer = require("./drawer-Dv6lMUKE.cjs");
15
16
  const collapse$2 = require("./collapse-sUYbZqEx.cjs");
16
17
  const fade = require("./fade-CJ0jXGio.cjs");
17
18
  const types = require("./types.cjs");
@@ -27,6 +28,7 @@ const toast$1 = require("@agnos-ui/core/components/toast");
27
28
  const collapse$1 = require("@agnos-ui/core/components/collapse");
28
29
  const tree$1 = require("@agnos-ui/core/components/tree");
29
30
  const carousel$1 = require("@agnos-ui/core/components/carousel");
31
+ const drawer$1 = require("@agnos-ui/core/components/drawer");
30
32
  exports.createAccordion = accordion.createAccordion;
31
33
  exports.createAccordionItem = accordion.createAccordionItem;
32
34
  exports.getAccordionDefaultConfig = accordion.getAccordionDefaultConfig;
@@ -54,6 +56,8 @@ exports.createTree = tree.createTree;
54
56
  exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;
55
57
  exports.createCarousel = carousel.createCarousel;
56
58
  exports.getCarouselDefaultConfig = carousel.getCarouselDefaultConfig;
59
+ exports.createDrawer = drawer.createDrawer;
60
+ exports.getDrawerDefaultConfig = drawer.getDrawerDefaultConfig;
57
61
  exports.collapseHorizontalTransition = collapse$2.collapseHorizontalTransition;
58
62
  exports.collapseVerticalTransition = collapse$2.collapseVerticalTransition;
59
63
  exports.fadeTransition = fade.fadeTransition;
@@ -130,3 +134,9 @@ Object.keys(carousel$1).forEach((k) => {
130
134
  get: () => carousel$1[k]
131
135
  });
132
136
  });
137
+ Object.keys(drawer$1).forEach((k) => {
138
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
139
+ enumerable: true,
140
+ get: () => drawer$1[k]
141
+ });
142
+ });
package/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export * from './components/toast';
10
10
  export * from './components/collapse';
11
11
  export * from './components/tree';
12
12
  export * from './components/carousel';
13
+ export * from './components/drawer';
13
14
  export * from './services/transitions';
14
15
  export * from './config';
15
16
  export * from './types';
package/index.js CHANGED
@@ -7,10 +7,11 @@ import { c as c6, g as g6 } from "./rating-hovacUx0.js";
7
7
  import { c as c7, g as g7 } from "./select-CLjBDJ3a.js";
8
8
  import { c as c8, g as g8 } from "./slider-Bj081WdM.js";
9
9
  import { c as c9, g as g9, t } from "./toast-Dggjpjqk.js";
10
- import { c as c10, g as g10 } from "./collapse-Bngag_Xi.js";
10
+ import { c as c10, g as g10 } from "./collapse-BxmbNhX5.js";
11
11
  import { c as c11, g as g11 } from "./tree-Be8WJS8u.js";
12
12
  import { c as c12, g as g12 } from "./carousel-CY0kDaVK.js";
13
- import { a as a2, c as c13 } from "./collapse-CVjUhnIz.js";
13
+ import { c as c13, g as g13 } from "./drawer-ByOWziyU.js";
14
+ import { a as a2, c as c14 } from "./collapse-CVjUhnIz.js";
14
15
  import { f } from "./fade-uOobJKgw.js";
15
16
  import { BS_CONTEXTUAL_CLASSES } from "./types.js";
16
17
  export * from "@agnos-ui/core/components/accordion";
@@ -25,15 +26,17 @@ export * from "@agnos-ui/core/components/toast";
25
26
  export * from "@agnos-ui/core/components/collapse";
26
27
  export * from "@agnos-ui/core/components/tree";
27
28
  export * from "@agnos-ui/core/components/carousel";
29
+ export * from "@agnos-ui/core/components/drawer";
28
30
  export {
29
31
  BS_CONTEXTUAL_CLASSES,
30
32
  a2 as collapseHorizontalTransition,
31
- c13 as collapseVerticalTransition,
33
+ c14 as collapseVerticalTransition,
32
34
  a as createAccordion,
33
35
  c as createAccordionItem,
34
36
  c2 as createAlert,
35
37
  c12 as createCarousel,
36
38
  c10 as createCollapse,
39
+ c13 as createDrawer,
37
40
  c3 as createModal,
38
41
  c4 as createPagination,
39
42
  c5 as createProgressbar,
@@ -47,6 +50,7 @@ export {
47
50
  g2 as getAlertDefaultConfig,
48
51
  g12 as getCarouselDefaultConfig,
49
52
  g10 as getCollapseDefaultConfig,
53
+ g13 as getDrawerDefaultConfig,
50
54
  g3 as getModalDefaultConfig,
51
55
  g4 as getPaginationDefaultConfig,
52
56
  g5 as getProgressbarDefaultConfig,
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.9.3",
4
+ "version": "0.10.0-next.0",
5
5
  "keywords": [
6
6
  "bootstrap",
7
7
  "css",
@@ -62,7 +62,7 @@
62
62
  }
63
63
  },
64
64
  "dependencies": {
65
- "@agnos-ui/core": "0.9.3"
65
+ "@agnos-ui/core": "0.10.0-next.0"
66
66
  },
67
67
  "peerDependencies": {
68
68
  "@amadeus-it-group/tansu": "^2.0.0"
@@ -101,3 +101,12 @@ $au-tree-expand-icon-height: 2.25rem;
101
101
  $au-tree-expand-icon-color: #0d6efd !default;
102
102
  $au-tree-expand-icon-color-hover: #052c65 !default;
103
103
  // scss-docs-end tree-vars
104
+
105
+ // drawer variables
106
+ // scss-docs-start drawer-vars
107
+ $au-drawer-z-index: 2010;
108
+ $au-drawer-backdrop-z-index: 2000;
109
+ $au-drawer-backdrop-color: #1a1a1a;
110
+ $au-drawer-backdrop-opacity: 0.75;
111
+ // scss-docs-end drawer-vars
112
+ // [content-placeholder]
package/scss/agnosui.scss CHANGED
@@ -5,3 +5,5 @@
5
5
  @use 'rating';
6
6
  @use 'carousel';
7
7
  @use 'toaster';
8
+ @use 'drawer';
9
+ // [content-placeholder]
@@ -0,0 +1,92 @@
1
+ @use 'variables' as *;
2
+
3
+ .au-drawer {
4
+ // scss-docs-start drawer-css-vars
5
+ --#{$prefix}drawer-z-index: #{$au-drawer-z-index};
6
+ // scss-docs-end drawer-css-vars
7
+
8
+ display: flex;
9
+ flex-direction: column;
10
+ background: #fff;
11
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
12
+ z-index: var(--#{$prefix}drawer-z-index);
13
+
14
+ // Inline (left/right depending on writing direction)
15
+ &.inline-start {
16
+ inset-block: 0;
17
+ inset-inline-start: 0;
18
+ }
19
+
20
+ &.inline-end {
21
+ inset-block: 0;
22
+ inset-inline-end: 0;
23
+
24
+ .au-splitter {
25
+ inset-inline-end: auto;
26
+ }
27
+ }
28
+
29
+ // Block (top/bottom)
30
+ &.block-start {
31
+ inset-inline: 0;
32
+ inset-block-start: 0;
33
+
34
+ .au-splitter {
35
+ inset-block-start: auto;
36
+ }
37
+ }
38
+
39
+ &.block-end {
40
+ inset-inline: 0;
41
+ inset-block-end: 0;
42
+ }
43
+
44
+ .au-drawer-header {
45
+ padding: 0.75rem 1rem;
46
+ font-weight: 600;
47
+ border-bottom: 1px solid #e2e2e2;
48
+ }
49
+
50
+ .au-drawer-body {
51
+ padding: 1rem;
52
+ overflow-y: auto;
53
+ flex: 1;
54
+ }
55
+
56
+ // Vertical splitter (default for inline drawers)
57
+ .au-splitter {
58
+ position: absolute;
59
+ inset-block: 0;
60
+ inset-inline-end: -4px; // half outside for visual separation
61
+ width: 8px; // larger hit area
62
+ cursor: ew-resize;
63
+ background: transparent;
64
+ }
65
+
66
+ // Horizontal splitter for block drawers (height resize)
67
+ &.block-start .au-splitter,
68
+ &.block-end .au-splitter {
69
+ inset-inline: 0;
70
+ width: auto;
71
+ height: 8px;
72
+ cursor: ns-resize;
73
+ }
74
+ }
75
+
76
+ .au-drawer-backdrop {
77
+ // scss-docs-start drawer-backdrop-css-vars
78
+ --#{$prefix}drawer-backdrop-z-index: #{$au-drawer-backdrop-z-index};
79
+ --#{$prefix}drawer-backdrop-color: #{$au-drawer-backdrop-color};
80
+ --#{$prefix}drawer-backdrop-opacity: #{$au-drawer-backdrop-opacity};
81
+ // scss-docs-end drawer-backdrop-css-vars
82
+
83
+ position: fixed;
84
+ inset: 0;
85
+ background: var(--#{$prefix}drawer-backdrop-color);
86
+ z-index: var(--#{$prefix}drawer-backdrop-z-index);
87
+
88
+ &.show {
89
+ opacity: var(--#{$prefix}drawer-backdrop-opacity);
90
+ pointer-events: auto;
91
+ }
92
+ }