@studiometa/ui 0.2.3 → 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.
- package/atoms/AnchorScrollTo/AnchorScrollTo.cjs +8 -13
- package/atoms/AnchorScrollTo/AnchorScrollTo.js +1 -26
- package/atoms/Cursor/Cursor.cjs +14 -22
- package/atoms/Cursor/Cursor.d.ts +2 -2
- package/atoms/Cursor/Cursor.js +1 -103
- package/atoms/Figure/Figure.cjs +9 -14
- package/atoms/Figure/Figure.d.ts +1 -1
- package/atoms/Figure/Figure.js +1 -27
- package/atoms/LargeText/LargeText.cjs +15 -23
- package/atoms/LargeText/LargeText.d.ts +3 -3
- package/atoms/LargeText/LargeText.js +1 -64
- package/atoms/LazyInclude/LazyInclude.cjs +8 -13
- package/atoms/LazyInclude/LazyInclude.d.ts +4 -4
- package/atoms/LazyInclude/LazyInclude.js +1 -46
- package/atoms/Prefetch/AbstractPrefetch.cjs +8 -13
- package/atoms/Prefetch/AbstractPrefetch.d.ts +1 -1
- package/atoms/Prefetch/AbstractPrefetch.js +1 -58
- package/atoms/Prefetch/PrefetchWhenOver.cjs +12 -34
- package/atoms/Prefetch/PrefetchWhenOver.d.ts +1 -1
- package/atoms/Prefetch/PrefetchWhenOver.js +1 -35
- package/atoms/Prefetch/PrefetchWhenVisible.cjs +12 -34
- package/atoms/Prefetch/PrefetchWhenVisible.d.ts +1 -1
- package/atoms/Prefetch/PrefetchWhenVisible.js +1 -36
- package/atoms/Prefetch/index.cjs +9 -16
- package/atoms/Prefetch/index.js +1 -8
- package/atoms/index.cjs +11 -17
- package/atoms/index.js +1 -13
- package/index.cjs +11 -15
- package/index.js +1 -3
- package/molecules/Accordion/Accordion.cjs +12 -34
- package/molecules/Accordion/Accordion.js +1 -35
- package/molecules/Accordion/AccordionCore.cjs +8 -13
- package/molecules/Accordion/AccordionCore.d.ts +2 -2
- package/molecules/Accordion/AccordionCore.js +1 -34
- package/molecules/Accordion/AccordionItem.cjs +70 -114
- package/molecules/Accordion/AccordionItem.d.ts +7 -6
- package/molecules/Accordion/AccordionItem.js +1 -178
- package/molecules/Menu/Menu.cjs +148 -0
- package/molecules/Menu/Menu.d.ts +140 -0
- package/molecules/Menu/Menu.js +1 -0
- package/molecules/Menu/MenuBtn.cjs +53 -0
- package/molecules/Menu/MenuBtn.d.ts +39 -0
- package/molecules/Menu/MenuBtn.js +1 -0
- package/molecules/Menu/MenuList.cjs +134 -0
- package/molecules/Menu/MenuList.d.ts +101 -0
- package/molecules/Menu/MenuList.js +1 -0
- package/molecules/Menu/index.cjs +33 -0
- package/molecules/Menu/index.d.ts +3 -0
- package/molecules/Menu/index.js +1 -0
- package/molecules/Modal/Modal.cjs +42 -71
- package/molecules/Modal/Modal.d.ts +5 -5
- package/molecules/Modal/Modal.js +1 -150
- package/molecules/Modal/ModalWithTransition.cjs +13 -43
- package/molecules/Modal/ModalWithTransition.js +1 -69
- package/molecules/Panel/Panel.cjs +42 -76
- package/molecules/Panel/Panel.js +1 -117
- package/molecules/Slider/AbstractSliderChild.cjs +10 -20
- package/molecules/Slider/AbstractSliderChild.d.ts +6 -2
- package/molecules/Slider/AbstractSliderChild.js +1 -43
- package/molecules/Slider/Slider.cjs +14 -24
- package/molecules/Slider/Slider.d.ts +6 -6
- package/molecules/Slider/Slider.js +1 -209
- package/molecules/Slider/SliderBtn.cjs +9 -16
- package/molecules/Slider/SliderBtn.d.ts +1 -1
- package/molecules/Slider/SliderBtn.js +1 -34
- package/molecules/Slider/SliderCount.cjs +9 -16
- package/molecules/Slider/SliderCount.js +1 -19
- package/molecules/Slider/SliderDots.cjs +9 -16
- package/molecules/Slider/SliderDots.js +1 -24
- package/molecules/Slider/SliderDrag.cjs +8 -13
- package/molecules/Slider/SliderDrag.js +1 -19
- package/molecules/Slider/SliderItem.cjs +14 -37
- package/molecules/Slider/SliderItem.js +1 -105
- package/molecules/Slider/SliderProgress.cjs +9 -16
- package/molecules/Slider/SliderProgress.js +1 -23
- package/molecules/Slider/index.cjs +9 -16
- package/molecules/Slider/index.js +1 -18
- package/molecules/Sticky/Sticky.cjs +11 -19
- package/molecules/Sticky/Sticky.d.ts +8 -8
- package/molecules/Sticky/Sticky.js +1 -107
- package/molecules/TableOfContent/TableOfContent.cjs +9 -16
- package/molecules/TableOfContent/TableOfContent.d.ts +1 -1
- package/molecules/TableOfContent/TableOfContent.js +1 -42
- package/molecules/TableOfContent/TableOfContentAnchor.cjs +8 -13
- package/molecules/TableOfContent/TableOfContentAnchor.js +1 -39
- package/molecules/TableOfContent/index.cjs +9 -16
- package/molecules/TableOfContent/index.js +1 -6
- package/molecules/Tabs/Tabs.cjs +54 -82
- package/molecules/Tabs/Tabs.d.ts +5 -4
- package/molecules/Tabs/Tabs.js +1 -126
- package/molecules/index.cjs +13 -18
- package/molecules/index.d.ts +1 -0
- package/molecules/index.js +1 -18
- package/organisms/Frame/Frame.cjs +67 -98
- package/organisms/Frame/Frame.d.ts +3 -3
- package/organisms/Frame/Frame.js +1 -171
- package/organisms/Frame/FrameAnchor.cjs +8 -13
- package/organisms/Frame/FrameAnchor.js +1 -22
- package/organisms/Frame/FrameForm.cjs +8 -13
- package/organisms/Frame/FrameForm.js +1 -22
- package/organisms/Frame/FrameTarget.cjs +31 -73
- package/organisms/Frame/FrameTarget.js +1 -109
- package/organisms/Frame/index.cjs +9 -16
- package/organisms/Frame/index.js +1 -10
- package/organisms/index.cjs +9 -13
- package/organisms/index.js +1 -1
- package/package.json +3 -4
- package/primitives/Draggable/Draggable.cjs +15 -28
- package/primitives/Draggable/Draggable.d.ts +0 -5
- package/primitives/Draggable/Draggable.js +1 -38
- package/primitives/Sentinel/Sentinel.cjs +8 -13
- package/primitives/Sentinel/Sentinel.js +1 -15
- package/primitives/Transition/Transition.cjs +12 -17
- package/primitives/Transition/Transition.d.ts +2 -4
- package/primitives/Transition/Transition.js +1 -45
- package/primitives/index.cjs +9 -16
- package/primitives/index.js +1 -8
|
@@ -1,35 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __publicField = (obj, key, value) => {
|
|
21
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
22
|
-
return value;
|
|
23
|
-
};
|
|
24
|
-
import AccordionCore from "./AccordionCore.js";
|
|
25
|
-
import AccordionItem from "./AccordionItem.js";
|
|
26
|
-
class Accordion extends AccordionCore {
|
|
27
|
-
}
|
|
28
|
-
__publicField(Accordion, "config", __spreadProps(__spreadValues({}, AccordionCore.config), {
|
|
29
|
-
components: {
|
|
30
|
-
AccordionItem
|
|
31
|
-
}
|
|
32
|
-
}));
|
|
33
|
-
export {
|
|
34
|
-
Accordion as default
|
|
35
|
-
};
|
|
1
|
+
import o from"./AccordionCore.js";import c from"./AccordionItem.js";class r extends o{static config={...o.config,components:{AccordionItem:c}}}export{r as default};
|
|
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
5
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
9
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
9
|
};
|
|
11
|
-
var
|
|
12
|
-
if (
|
|
13
|
-
for (let key of __getOwnPropNames(
|
|
14
|
-
if (!__hasOwnProp.call(
|
|
15
|
-
__defProp(
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
15
|
}
|
|
17
|
-
return
|
|
16
|
+
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toCommonJS =
|
|
20
|
-
return (module2, temp) => {
|
|
21
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
-
};
|
|
23
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
24
19
|
var __publicField = (obj, key, value) => {
|
|
25
20
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
26
21
|
return value;
|
|
@@ -31,6 +26,7 @@ var AccordionCore_exports = {};
|
|
|
31
26
|
__export(AccordionCore_exports, {
|
|
32
27
|
default: () => Accordion
|
|
33
28
|
});
|
|
29
|
+
module.exports = __toCommonJS(AccordionCore_exports);
|
|
34
30
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
35
31
|
var Accordion = class extends import_js_toolkit.Base {
|
|
36
32
|
onAccordionItemOpen(index) {
|
|
@@ -56,5 +52,4 @@ __publicField(Accordion, "config", {
|
|
|
56
52
|
}
|
|
57
53
|
}
|
|
58
54
|
});
|
|
59
|
-
module.exports = __toCommonJS(AccordionCore_exports);
|
|
60
55
|
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -51,13 +51,13 @@ export default class Accordion extends Base {
|
|
|
51
51
|
* @param {number} index
|
|
52
52
|
* @return {void}
|
|
53
53
|
*/
|
|
54
|
-
onAccordionItemOpen(index: number): void;
|
|
54
|
+
onAccordionItemOpen(this: AccordionInterface, index: number): void;
|
|
55
55
|
/**
|
|
56
56
|
* @this {AccordionInterface}
|
|
57
57
|
* @param {number} index
|
|
58
58
|
* @return {void}
|
|
59
59
|
*/
|
|
60
|
-
onAccordionItemClose(index: number): void;
|
|
60
|
+
onAccordionItemClose(this: AccordionInterface, index: number): void;
|
|
61
61
|
}
|
|
62
62
|
export type AccordionItem = import('./AccordionItem').default;
|
|
63
63
|
export type AccordionItemOptions = import('./AccordionItem').AccordionItemOptions;
|
|
@@ -1,34 +1 @@
|
|
|
1
|
-
|
|
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
|
|
28
|
-
if (
|
|
29
|
-
for (let key of __getOwnPropNames(
|
|
30
|
-
if (!__hasOwnProp.call(
|
|
31
|
-
__defProp(
|
|
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
|
|
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
|
|
39
|
-
|
|
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
|
|
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
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
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
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
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;
|
|
@@ -52,6 +52,7 @@ export default class AccordionItem extends Base {
|
|
|
52
52
|
* @return {AccordionItemStylesOption}
|
|
53
53
|
*/
|
|
54
54
|
default: () => AccordionItemStylesOption;
|
|
55
|
+
merge: boolean;
|
|
55
56
|
};
|
|
56
57
|
};
|
|
57
58
|
};
|
|
@@ -59,17 +60,17 @@ export default class AccordionItem extends Base {
|
|
|
59
60
|
* Add aria-attributes on mounted.
|
|
60
61
|
* @this {AccordionItemInterface}
|
|
61
62
|
*/
|
|
62
|
-
mounted(): void;
|
|
63
|
+
mounted(this: AccordionItemInterface): void;
|
|
63
64
|
/**
|
|
64
65
|
* Remove styles on destroy.
|
|
65
66
|
* @this {AccordionItemInterface}
|
|
66
67
|
*/
|
|
67
|
-
destroyed(): void;
|
|
68
|
+
destroyed(this: AccordionItemInterface): void;
|
|
68
69
|
/**
|
|
69
70
|
* Handler for the click event on the `btn` ref.
|
|
70
71
|
* @this {AccordionItemInterface}
|
|
71
72
|
*/
|
|
72
|
-
onBtnClick(): void;
|
|
73
|
+
onBtnClick(this: AccordionItemInterface): void;
|
|
73
74
|
/**
|
|
74
75
|
* Get the content ID.
|
|
75
76
|
* @return {String}
|
|
@@ -81,17 +82,17 @@ export default class AccordionItem extends Base {
|
|
|
81
82
|
* @this {AccordionItemInterface}
|
|
82
83
|
* @param {Boolean} isOpen The state of the item.
|
|
83
84
|
*/
|
|
84
|
-
updateAttributes(isOpen: boolean): void;
|
|
85
|
+
updateAttributes(this: AccordionItemInterface, isOpen: boolean): void;
|
|
85
86
|
/**
|
|
86
87
|
* Open an item.
|
|
87
88
|
* @this {AccordionItemInterface}
|
|
88
89
|
*/
|
|
89
|
-
open(): Promise<void>;
|
|
90
|
+
open(this: AccordionItemInterface): Promise<void>;
|
|
90
91
|
/**
|
|
91
92
|
* Close an item.
|
|
92
93
|
* @this {AccordionItemInterface}
|
|
93
94
|
*/
|
|
94
|
-
close(): Promise<void>;
|
|
95
|
+
close(this: AccordionItemInterface): Promise<void>;
|
|
95
96
|
}
|
|
96
97
|
export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
|
|
97
98
|
export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;
|
|
@@ -1,178 +1 @@
|
|
|
1
|
-
|
|
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};
|