@studiometa/ui 0.2.1 → 0.2.4

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 (136) hide show
  1. package/atoms/AnchorScrollTo/AnchorScrollTo.cjs +47 -0
  2. package/atoms/AnchorScrollTo/AnchorScrollTo.d.ts +31 -0
  3. package/atoms/AnchorScrollTo/AnchorScrollTo.js +1 -0
  4. package/atoms/Cursor/Cursor.cjs +14 -22
  5. package/atoms/Cursor/Cursor.d.ts +2 -2
  6. package/atoms/Cursor/Cursor.js +1 -103
  7. package/atoms/Figure/Figure.cjs +9 -14
  8. package/atoms/Figure/Figure.d.ts +1 -1
  9. package/atoms/Figure/Figure.js +1 -27
  10. package/atoms/LargeText/LargeText.cjs +82 -0
  11. package/atoms/LargeText/LargeText.d.ts +94 -0
  12. package/atoms/LargeText/LargeText.js +1 -0
  13. package/atoms/LazyInclude/LazyInclude.cjs +67 -0
  14. package/atoms/LazyInclude/LazyInclude.d.ts +64 -0
  15. package/atoms/LazyInclude/LazyInclude.js +1 -0
  16. package/atoms/Prefetch/AbstractPrefetch.cjs +79 -0
  17. package/atoms/Prefetch/AbstractPrefetch.d.ts +52 -0
  18. package/atoms/Prefetch/AbstractPrefetch.js +1 -0
  19. package/atoms/Prefetch/PrefetchWhenOver.cjs +43 -0
  20. package/atoms/Prefetch/PrefetchWhenOver.d.ts +21 -0
  21. package/atoms/Prefetch/PrefetchWhenOver.js +1 -0
  22. package/atoms/Prefetch/PrefetchWhenVisible.cjs +44 -0
  23. package/atoms/Prefetch/PrefetchWhenVisible.d.ts +21 -0
  24. package/atoms/Prefetch/PrefetchWhenVisible.js +1 -0
  25. package/atoms/Prefetch/index.cjs +33 -0
  26. package/atoms/Prefetch/index.d.ts +3 -0
  27. package/atoms/Prefetch/index.js +1 -0
  28. package/atoms/index.cjs +19 -18
  29. package/atoms/index.d.ts +5 -1
  30. package/atoms/index.js +1 -6
  31. package/index.cjs +11 -15
  32. package/index.js +1 -3
  33. package/molecules/Accordion/Accordion.cjs +12 -34
  34. package/molecules/Accordion/Accordion.js +1 -35
  35. package/molecules/Accordion/AccordionCore.cjs +8 -13
  36. package/molecules/Accordion/AccordionCore.d.ts +2 -2
  37. package/molecules/Accordion/AccordionCore.js +1 -34
  38. package/molecules/Accordion/AccordionItem.cjs +70 -114
  39. package/molecules/Accordion/AccordionItem.d.ts +15 -16
  40. package/molecules/Accordion/AccordionItem.js +1 -178
  41. package/molecules/Menu/Menu.cjs +148 -0
  42. package/molecules/Menu/Menu.d.ts +140 -0
  43. package/molecules/Menu/Menu.js +1 -0
  44. package/molecules/Menu/MenuBtn.cjs +53 -0
  45. package/molecules/Menu/MenuBtn.d.ts +39 -0
  46. package/molecules/Menu/MenuBtn.js +1 -0
  47. package/molecules/Menu/MenuList.cjs +134 -0
  48. package/molecules/Menu/MenuList.d.ts +101 -0
  49. package/molecules/Menu/MenuList.js +1 -0
  50. package/molecules/Menu/index.cjs +33 -0
  51. package/molecules/Menu/index.d.ts +3 -0
  52. package/molecules/Menu/index.js +1 -0
  53. package/molecules/Modal/Modal.cjs +42 -72
  54. package/molecules/Modal/Modal.d.ts +11 -11
  55. package/molecules/Modal/Modal.js +1 -151
  56. package/molecules/Modal/ModalWithTransition.cjs +70 -0
  57. package/molecules/Modal/ModalWithTransition.d.ts +29 -0
  58. package/molecules/Modal/ModalWithTransition.js +1 -0
  59. package/molecules/Panel/Panel.cjs +114 -0
  60. package/molecules/Panel/Panel.d.ts +42 -0
  61. package/molecules/Panel/Panel.js +1 -0
  62. package/molecules/Slider/AbstractSliderChild.cjs +64 -0
  63. package/molecules/Slider/AbstractSliderChild.d.ts +59 -0
  64. package/molecules/Slider/AbstractSliderChild.js +1 -0
  65. package/molecules/Slider/Slider.cjs +230 -0
  66. package/molecules/Slider/Slider.d.ts +245 -0
  67. package/molecules/Slider/Slider.js +1 -0
  68. package/molecules/Slider/SliderBtn.cjs +58 -0
  69. package/molecules/Slider/SliderBtn.d.ts +31 -0
  70. package/molecules/Slider/SliderBtn.js +1 -0
  71. package/molecules/Slider/SliderCount.cjs +43 -0
  72. package/molecules/Slider/SliderCount.d.ts +21 -0
  73. package/molecules/Slider/SliderCount.js +1 -0
  74. package/molecules/Slider/SliderDots.cjs +48 -0
  75. package/molecules/Slider/SliderDots.d.ts +33 -0
  76. package/molecules/Slider/SliderDots.js +1 -0
  77. package/molecules/Slider/SliderDrag.cjs +40 -0
  78. package/molecules/Slider/SliderDrag.d.ts +16 -0
  79. package/molecules/Slider/SliderDrag.js +1 -0
  80. package/molecules/Slider/SliderItem.cjs +107 -0
  81. package/molecules/Slider/SliderItem.d.ts +106 -0
  82. package/molecules/Slider/SliderItem.js +1 -0
  83. package/molecules/Slider/SliderProgress.cjs +47 -0
  84. package/molecules/Slider/SliderProgress.d.ts +27 -0
  85. package/molecules/Slider/SliderProgress.js +1 -0
  86. package/molecules/Slider/index.cjs +43 -0
  87. package/molecules/Slider/index.d.ts +8 -0
  88. package/molecules/Slider/index.js +1 -0
  89. package/molecules/Sticky/Sticky.cjs +11 -19
  90. package/molecules/Sticky/Sticky.d.ts +8 -8
  91. package/molecules/Sticky/Sticky.js +1 -107
  92. package/molecules/TableOfContent/TableOfContent.cjs +66 -0
  93. package/molecules/TableOfContent/TableOfContent.d.ts +59 -0
  94. package/molecules/TableOfContent/TableOfContent.js +1 -0
  95. package/molecules/TableOfContent/TableOfContentAnchor.cjs +60 -0
  96. package/molecules/TableOfContent/TableOfContentAnchor.d.ts +36 -0
  97. package/molecules/TableOfContent/TableOfContentAnchor.js +1 -0
  98. package/molecules/TableOfContent/index.cjs +31 -0
  99. package/molecules/TableOfContent/index.d.ts +2 -0
  100. package/molecules/TableOfContent/index.js +1 -0
  101. package/molecules/Tabs/Tabs.cjs +54 -82
  102. package/molecules/Tabs/Tabs.d.ts +7 -8
  103. package/molecules/Tabs/Tabs.js +1 -126
  104. package/molecules/index.cjs +18 -17
  105. package/molecules/index.d.ts +6 -1
  106. package/molecules/index.js +1 -12
  107. package/organisms/Frame/Frame.cjs +171 -0
  108. package/organisms/Frame/Frame.d.ts +119 -0
  109. package/organisms/Frame/Frame.js +1 -0
  110. package/organisms/Frame/FrameAnchor.cjs +43 -0
  111. package/organisms/Frame/FrameAnchor.d.ts +35 -0
  112. package/organisms/Frame/FrameAnchor.js +1 -0
  113. package/organisms/Frame/FrameForm.cjs +43 -0
  114. package/organisms/Frame/FrameForm.d.ts +32 -0
  115. package/organisms/Frame/FrameForm.js +1 -0
  116. package/organisms/Frame/FrameTarget.cjs +92 -0
  117. package/organisms/Frame/FrameTarget.d.ts +47 -0
  118. package/organisms/Frame/FrameTarget.js +1 -0
  119. package/organisms/Frame/index.cjs +35 -0
  120. package/organisms/Frame/index.d.ts +4 -0
  121. package/organisms/Frame/index.js +1 -0
  122. package/organisms/index.cjs +9 -12
  123. package/organisms/index.d.ts +1 -1
  124. package/organisms/index.js +1 -0
  125. package/package.json +3 -4
  126. package/primitives/Draggable/Draggable.cjs +15 -28
  127. package/primitives/Draggable/Draggable.d.ts +0 -5
  128. package/primitives/Draggable/Draggable.js +1 -38
  129. package/primitives/Sentinel/Sentinel.cjs +8 -13
  130. package/primitives/Sentinel/Sentinel.js +1 -15
  131. package/primitives/Transition/Transition.cjs +66 -0
  132. package/primitives/Transition/Transition.d.ts +67 -0
  133. package/primitives/Transition/Transition.js +1 -0
  134. package/primitives/index.cjs +12 -17
  135. package/primitives/index.d.ts +1 -0
  136. package/primitives/index.js +1 -6
@@ -1,34 +1 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => {
4
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- return value;
6
- };
7
- import { Base } from "@studiometa/js-toolkit";
8
- class Accordion extends Base {
9
- onAccordionItemOpen(index) {
10
- const accordionItem = this.$children.AccordionItem[index];
11
- this.$emit("open", accordionItem, index);
12
- if (this.$options.autoclose) {
13
- this.$children.AccordionItem.filter((el, i) => index !== i).forEach((item) => item.close());
14
- }
15
- }
16
- onAccordionItemClose(index) {
17
- const accordionItem = this.$children.AccordionItem[index];
18
- this.$emit("close", accordionItem, index);
19
- }
20
- }
21
- __publicField(Accordion, "config", {
22
- name: "Accordion",
23
- emits: ["open", "close"],
24
- options: {
25
- autoclose: Boolean,
26
- item: {
27
- type: Object,
28
- default: () => ({})
29
- }
30
- }
31
- });
32
- export {
33
- Accordion as default
34
- };
1
+ import{Base as i}from"@studiometa/js-toolkit";class n extends i{static config={name:"Accordion",emits:["open","close"],options:{autoclose:Boolean,item:{type:Object,default:()=>({})}}};onAccordionItemOpen(o){const c=this.$children.AccordionItem[o];this.$emit("open",c,o),this.$options.autoclose&&this.$children.AccordionItem.filter((t,e)=>o!==e).forEach(t=>t.close())}onAccordionItemClose(o){const c=this.$children.AccordionItem[o];this.$emit("close",c,o)}}export{n as default};
@@ -2,74 +2,34 @@ var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
5
  var __getProtoOf = Object.getPrototypeOf;
7
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
7
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
11
- var __objRest = (source, exclude) => {
12
- var target = {};
13
- for (var prop in source)
14
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
15
- target[prop] = source[prop];
16
- if (source != null && __getOwnPropSymbols)
17
- for (var prop of __getOwnPropSymbols(source)) {
18
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
19
- target[prop] = source[prop];
20
- }
21
- return target;
22
- };
23
8
  var __export = (target, all) => {
24
9
  for (var name in all)
25
10
  __defProp(target, name, { get: all[name], enumerable: true });
26
11
  };
27
- var __reExport = (target, module2, copyDefault, desc) => {
28
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
29
- for (let key of __getOwnPropNames(module2))
30
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
31
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
32
17
  }
33
- return target;
34
- };
35
- var __toESM = (module2, isNodeMode) => {
36
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
18
+ return to;
37
19
  };
38
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
39
- return (module2, temp) => {
40
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
41
- };
42
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
21
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
43
22
  var __publicField = (obj, key, value) => {
44
23
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
45
24
  return value;
46
25
  };
47
- var __async = (__this, __arguments, generator) => {
48
- return new Promise((resolve, reject) => {
49
- var fulfilled = (value) => {
50
- try {
51
- step(generator.next(value));
52
- } catch (e) {
53
- reject(e);
54
- }
55
- };
56
- var rejected = (value) => {
57
- try {
58
- step(generator.throw(value));
59
- } catch (e) {
60
- reject(e);
61
- }
62
- };
63
- var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
64
- step((generator = generator.apply(__this, __arguments)).next());
65
- });
66
- };
67
26
 
68
27
  // packages/ui/molecules/Accordion/AccordionItem.js
69
28
  var AccordionItem_exports = {};
70
29
  __export(AccordionItem_exports, {
71
30
  default: () => AccordionItem
72
31
  });
32
+ module.exports = __toCommonJS(AccordionItem_exports);
73
33
  var import_deepmerge = __toESM(require("deepmerge"), 1);
74
34
  var import_js_toolkit = require("@studiometa/js-toolkit");
75
35
  var import_utils = require("@studiometa/js-toolkit/utils");
@@ -94,7 +54,7 @@ var _AccordionItem = class extends import_js_toolkit.Base {
94
54
  this.$refs.content.setAttribute("id", this.contentId);
95
55
  const { isOpen } = this.$options;
96
56
  this.updateAttributes(isOpen);
97
- const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
57
+ const { container, ...otherStyles } = this.$options.styles;
98
58
  const refs = this.$refs;
99
59
  Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
100
60
  (0, import_utils.transition)(refs[refName], { to: isOpen ? open : closed }, "keep");
@@ -120,69 +80,65 @@ var _AccordionItem = class extends import_js_toolkit.Base {
120
80
  this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
121
81
  this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
122
82
  }
123
- open() {
124
- return __async(this, null, function* () {
125
- if (this.$options.isOpen) {
126
- return;
127
- }
128
- this.$log("open");
129
- this.$emit("open");
130
- this.$options.isOpen = true;
131
- this.updateAttributes(this.$options.isOpen);
132
- this.$refs.container.style.visibility = "";
133
- const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
134
- const refs = this.$refs;
135
- yield Promise.all([
136
- (0, import_utils.transition)(refs.container, {
137
- from: { height: 0 },
138
- active: container.active,
139
- to: { height: `${refs.content.offsetHeight}px` }
140
- }).then(() => {
141
- if (this.$options.isOpen) {
142
- refs.content.style.position = "";
143
- }
144
- return Promise.resolve();
145
- }),
146
- ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
147
- from: closed,
148
- active,
149
- to: open
150
- }, "keep"))
151
- ]);
152
- });
83
+ async open() {
84
+ if (this.$options.isOpen) {
85
+ return;
86
+ }
87
+ this.$log("open");
88
+ this.$emit("open");
89
+ this.$options.isOpen = true;
90
+ this.updateAttributes(this.$options.isOpen);
91
+ this.$refs.container.style.visibility = "";
92
+ const { container, ...otherStyles } = this.$options.styles;
93
+ const refs = this.$refs;
94
+ await Promise.all([
95
+ (0, import_utils.transition)(refs.container, {
96
+ from: { height: "0" },
97
+ active: container.active,
98
+ to: { height: `${refs.content.offsetHeight}px` }
99
+ }).then(() => {
100
+ if (this.$options.isOpen) {
101
+ refs.content.style.position = "";
102
+ }
103
+ return Promise.resolve();
104
+ }),
105
+ ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
106
+ from: closed,
107
+ active,
108
+ to: open
109
+ }, "keep"))
110
+ ]);
153
111
  }
154
- close() {
155
- return __async(this, null, function* () {
156
- if (!this.$options.isOpen) {
157
- return;
158
- }
159
- this.$log("close");
160
- this.$emit("close");
161
- this.$options.isOpen = false;
162
- const height = this.$refs.container.offsetHeight;
163
- this.$refs.content.style.position = "absolute";
164
- const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
165
- const refs = this.$refs;
166
- yield Promise.all([
167
- (0, import_utils.transition)(refs.container, {
168
- from: { height: `${height}px` },
169
- active: container.active,
170
- to: { height: "0" }
171
- }).then(() => {
172
- if (!this.$options.isOpen) {
173
- refs.container.style.height = "0";
174
- refs.container.style.visibility = "invisible";
175
- this.updateAttributes(this.$options.isOpen);
176
- }
177
- return Promise.resolve();
178
- }),
179
- ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
180
- from: open,
181
- active,
182
- to: closed
183
- }, "keep"))
184
- ]);
185
- });
112
+ async close() {
113
+ if (!this.$options.isOpen) {
114
+ return;
115
+ }
116
+ this.$log("close");
117
+ this.$emit("close");
118
+ this.$options.isOpen = false;
119
+ const height = this.$refs.container.offsetHeight;
120
+ this.$refs.content.style.position = "absolute";
121
+ const { container, ...otherStyles } = this.$options.styles;
122
+ const refs = this.$refs;
123
+ await Promise.all([
124
+ (0, import_utils.transition)(refs.container, {
125
+ from: { height: `${height}px` },
126
+ active: container.active,
127
+ to: { height: "0" }
128
+ }).then(() => {
129
+ if (!this.$options.isOpen) {
130
+ refs.container.style.height = "0";
131
+ refs.container.style.visibility = "invisible";
132
+ this.updateAttributes(this.$options.isOpen);
133
+ }
134
+ return Promise.resolve();
135
+ }),
136
+ ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
137
+ from: open,
138
+ active,
139
+ to: closed
140
+ }, "keep"))
141
+ ]);
186
142
  }
187
143
  };
188
144
  var AccordionItem = _AccordionItem;
@@ -200,9 +156,9 @@ __publicField(AccordionItem, "config", {
200
156
  active: "",
201
157
  closed: ""
202
158
  }
203
- })
159
+ }),
160
+ merge: true
204
161
  }
205
162
  }
206
163
  });
207
- module.exports = __toCommonJS(AccordionItem_exports);
208
164
  if (module.exports.default) module.exports = module.exports.default;
@@ -10,13 +10,12 @@
10
10
  */
11
11
  /**
12
12
  * @typedef {Object} StylesOption
13
- * @property {String|CssStyleObject} open
14
- * @property {String|CssStyleObject} active
15
- * @property {String|CssStyleObject} closed
13
+ * @property {String|Partial<CSSStyleDeclaration>} open
14
+ * @property {String|Partial<CSSStyleDeclaration>} active
15
+ * @property {String|Partial<CSSStyleDeclaration>} closed
16
16
  */
17
17
  /**
18
- * @typedef {import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject} CssStyleObject
19
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} AccordionItemStates
18
+ * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} AccordionItemStates
20
19
  * @typedef {Partial<Record<keyof AccordionItemRefs, AccordionItemStates>>} AccordionItemStylesOption
21
20
  */
22
21
  /**
@@ -53,6 +52,7 @@ export default class AccordionItem extends Base {
53
52
  * @return {AccordionItemStylesOption}
54
53
  */
55
54
  default: () => AccordionItemStylesOption;
55
+ merge: boolean;
56
56
  };
57
57
  };
58
58
  };
@@ -60,17 +60,17 @@ export default class AccordionItem extends Base {
60
60
  * Add aria-attributes on mounted.
61
61
  * @this {AccordionItemInterface}
62
62
  */
63
- mounted(): void;
63
+ mounted(this: AccordionItemInterface): void;
64
64
  /**
65
65
  * Remove styles on destroy.
66
66
  * @this {AccordionItemInterface}
67
67
  */
68
- destroyed(): void;
68
+ destroyed(this: AccordionItemInterface): void;
69
69
  /**
70
70
  * Handler for the click event on the `btn` ref.
71
71
  * @this {AccordionItemInterface}
72
72
  */
73
- onBtnClick(): void;
73
+ onBtnClick(this: AccordionItemInterface): void;
74
74
  /**
75
75
  * Get the content ID.
76
76
  * @return {String}
@@ -82,17 +82,17 @@ export default class AccordionItem extends Base {
82
82
  * @this {AccordionItemInterface}
83
83
  * @param {Boolean} isOpen The state of the item.
84
84
  */
85
- updateAttributes(isOpen: boolean): void;
85
+ updateAttributes(this: AccordionItemInterface, isOpen: boolean): void;
86
86
  /**
87
87
  * Open an item.
88
88
  * @this {AccordionItemInterface}
89
89
  */
90
- open(): Promise<void>;
90
+ open(this: AccordionItemInterface): Promise<void>;
91
91
  /**
92
92
  * Close an item.
93
93
  * @this {AccordionItemInterface}
94
94
  */
95
- close(): Promise<void>;
95
+ close(this: AccordionItemInterface): Promise<void>;
96
96
  }
97
97
  export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
98
98
  export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;
@@ -102,12 +102,11 @@ export type AccordionItemRefs = {
102
102
  container: HTMLElement;
103
103
  };
104
104
  export type StylesOption = {
105
- open: string | CssStyleObject;
106
- active: string | CssStyleObject;
107
- closed: string | CssStyleObject;
105
+ open: string | Partial<CSSStyleDeclaration>;
106
+ active: string | Partial<CSSStyleDeclaration>;
107
+ closed: string | Partial<CSSStyleDeclaration>;
108
108
  };
109
- export type CssStyleObject = import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject;
110
- export type AccordionItemStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
109
+ export type AccordionItemStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
111
110
  export type AccordionItemStylesOption = Partial<Record<keyof AccordionItemRefs, AccordionItemStates>>;
112
111
  export type AccordionItemOptions = {
113
112
  isOpen: boolean;
@@ -1,178 +1 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
- var __hasOwnProp = Object.prototype.hasOwnProperty;
4
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
5
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __objRest = (source, exclude) => {
7
- var target = {};
8
- for (var prop in source)
9
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
10
- target[prop] = source[prop];
11
- if (source != null && __getOwnPropSymbols)
12
- for (var prop of __getOwnPropSymbols(source)) {
13
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
14
- target[prop] = source[prop];
15
- }
16
- return target;
17
- };
18
- var __publicField = (obj, key, value) => {
19
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
20
- return value;
21
- };
22
- var __async = (__this, __arguments, generator) => {
23
- return new Promise((resolve, reject) => {
24
- var fulfilled = (value) => {
25
- try {
26
- step(generator.next(value));
27
- } catch (e) {
28
- reject(e);
29
- }
30
- };
31
- var rejected = (value) => {
32
- try {
33
- step(generator.throw(value));
34
- } catch (e) {
35
- reject(e);
36
- }
37
- };
38
- var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
39
- step((generator = generator.apply(__this, __arguments)).next());
40
- });
41
- };
42
- import deepmerge from "deepmerge";
43
- import { Base } from "@studiometa/js-toolkit";
44
- import { transition } from "@studiometa/js-toolkit/utils";
45
- import Accordion from "./AccordionCore.js";
46
- const _AccordionItem = class extends Base {
47
- mounted() {
48
- if (this.$parent && this.$parent instanceof Accordion && this.$parent.$options.item) {
49
- Object.entries(this.$parent.$options.item).forEach(([key, value]) => {
50
- if (key in this.$options) {
51
- const type = _AccordionItem.config.options[key].type || _AccordionItem.config.options[key];
52
- if (type === Array || type === Object) {
53
- this.$options[key] = deepmerge(this.$options[key], value);
54
- } else {
55
- this.$options[key] = value;
56
- }
57
- }
58
- });
59
- }
60
- this.$refs.btn.setAttribute("id", this.$id);
61
- this.$refs.btn.setAttribute("aria-controls", this.contentId);
62
- this.$refs.content.setAttribute("aria-labelledby", this.$id);
63
- this.$refs.content.setAttribute("id", this.contentId);
64
- const { isOpen } = this.$options;
65
- this.updateAttributes(isOpen);
66
- const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
67
- const refs = this.$refs;
68
- Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
69
- transition(refs[refName], { to: isOpen ? open : closed }, "keep");
70
- });
71
- }
72
- destroyed() {
73
- this.$refs.container.style.visibility = "";
74
- this.$refs.container.style.height = "";
75
- }
76
- onBtnClick() {
77
- if (this.$options.isOpen) {
78
- this.close();
79
- } else {
80
- this.open();
81
- }
82
- }
83
- get contentId() {
84
- return `content-${this.$id}`;
85
- }
86
- updateAttributes(isOpen) {
87
- this.$refs.container.style.visibility = isOpen ? "" : "invisible";
88
- this.$refs.container.style.height = isOpen ? "" : "0";
89
- this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
90
- this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
91
- }
92
- open() {
93
- return __async(this, null, function* () {
94
- if (this.$options.isOpen) {
95
- return;
96
- }
97
- this.$log("open");
98
- this.$emit("open");
99
- this.$options.isOpen = true;
100
- this.updateAttributes(this.$options.isOpen);
101
- this.$refs.container.style.visibility = "";
102
- const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
103
- const refs = this.$refs;
104
- yield Promise.all([
105
- transition(refs.container, {
106
- from: { height: 0 },
107
- active: container.active,
108
- to: { height: `${refs.content.offsetHeight}px` }
109
- }).then(() => {
110
- if (this.$options.isOpen) {
111
- refs.content.style.position = "";
112
- }
113
- return Promise.resolve();
114
- }),
115
- ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
116
- from: closed,
117
- active,
118
- to: open
119
- }, "keep"))
120
- ]);
121
- });
122
- }
123
- close() {
124
- return __async(this, null, function* () {
125
- if (!this.$options.isOpen) {
126
- return;
127
- }
128
- this.$log("close");
129
- this.$emit("close");
130
- this.$options.isOpen = false;
131
- const height = this.$refs.container.offsetHeight;
132
- this.$refs.content.style.position = "absolute";
133
- const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
134
- const refs = this.$refs;
135
- yield Promise.all([
136
- transition(refs.container, {
137
- from: { height: `${height}px` },
138
- active: container.active,
139
- to: { height: "0" }
140
- }).then(() => {
141
- if (!this.$options.isOpen) {
142
- refs.container.style.height = "0";
143
- refs.container.style.visibility = "invisible";
144
- this.updateAttributes(this.$options.isOpen);
145
- }
146
- return Promise.resolve();
147
- }),
148
- ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
149
- from: open,
150
- active,
151
- to: closed
152
- }, "keep"))
153
- ]);
154
- });
155
- }
156
- };
157
- let AccordionItem = _AccordionItem;
158
- __publicField(AccordionItem, "config", {
159
- name: "AccordionItem",
160
- refs: ["btn", "content", "container"],
161
- emits: ["open", "close"],
162
- options: {
163
- isOpen: Boolean,
164
- styles: {
165
- type: Object,
166
- default: () => ({
167
- container: {
168
- open: "",
169
- active: "",
170
- closed: ""
171
- }
172
- })
173
- }
174
- }
175
- });
176
- export {
177
- AccordionItem as default
178
- };
1
+ import a from"deepmerge";import{Base as l}from"@studiometa/js-toolkit";import{transition as r}from"@studiometa/js-toolkit/utils";import f from"./AccordionCore.js";class c extends l{static config={name:"AccordionItem",refs:["btn","content","container"],emits:["open","close"],options:{isOpen:Boolean,styles:{type:Object,default:()=>({container:{open:"",active:"",closed:""}}),merge:!0}}};mounted(){this.$parent&&this.$parent instanceof f&&this.$parent.$options.item&&Object.entries(this.$parent.$options.item).forEach(([t,o])=>{if(t in this.$options){const n=c.config.options[t].type||c.config.options[t];n===Array||n===Object?this.$options[t]=a(this.$options[t],o):this.$options[t]=o}}),this.$refs.btn.setAttribute("id",this.$id),this.$refs.btn.setAttribute("aria-controls",this.contentId),this.$refs.content.setAttribute("aria-labelledby",this.$id),this.$refs.content.setAttribute("id",this.contentId);const{isOpen:i}=this.$options;this.updateAttributes(i);const{container:h,...s}=this.$options.styles,e=this.$refs;Object.entries(s).filter(([t])=>e[t]).forEach(([t,{open:o,closed:n}={open:"",closed:""}])=>{r(e[t],{to:i?o:n},"keep")})}destroyed(){this.$refs.container.style.visibility="",this.$refs.container.style.height=""}onBtnClick(){this.$options.isOpen?this.close():this.open()}get contentId(){return`content-${this.$id}`}updateAttributes(i){this.$refs.container.style.visibility=i?"":"invisible",this.$refs.container.style.height=i?"":"0",this.$refs.content.setAttribute("aria-hidden",i?"false":"true"),this.$refs.btn.setAttribute("aria-expanded",i?"true":"false")}async open(){if(this.$options.isOpen)return;this.$log("open"),this.$emit("open"),this.$options.isOpen=!0,this.updateAttributes(this.$options.isOpen),this.$refs.container.style.visibility="";const{container:i,...h}=this.$options.styles,s=this.$refs;await Promise.all([r(s.container,{from:{height:"0"},active:i.active,to:{height:`${s.content.offsetHeight}px`}}).then(()=>(this.$options.isOpen&&(s.content.style.position=""),Promise.resolve())),...Object.entries(h).filter(([e])=>s[e]).map(([e,{open:t,active:o,closed:n}={open:"",active:"",closed:""}])=>r(s[e],{from:n,active:o,to:t},"keep"))])}async close(){if(!this.$options.isOpen)return;this.$log("close"),this.$emit("close"),this.$options.isOpen=!1;const i=this.$refs.container.offsetHeight;this.$refs.content.style.position="absolute";const{container:h,...s}=this.$options.styles,e=this.$refs;await Promise.all([r(e.container,{from:{height:`${i}px`},active:h.active,to:{height:"0"}}).then(()=>(this.$options.isOpen||(e.container.style.height="0",e.container.style.visibility="invisible",this.updateAttributes(this.$options.isOpen)),Promise.resolve())),...Object.entries(s).filter(([t])=>e[t]).map(([t,{open:o,active:n,closed:p}={open:"",active:"",closed:""}])=>r(e[t],{from:o,active:n,to:p},"keep"))])}}export{c as default};