@brytdesigns/web-component-drawer 1.0.0 → 1.0.2
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/dist/main/components/drawer-backdrop.js +1 -1
- package/dist/main/components/drawer-backdrop.js.map +1 -1
- package/dist/main/hooks/useDrawer.js +6 -3
- package/dist/main/hooks/useDrawer.js.map +1 -1
- package/dist/main/utils.js +32 -26
- package/dist/main/utils.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/drawer-backdrop.ts"],"names":["element"],"mappings":";;;;;AAUO,MAAM,cAA4D,GAAA,CACvE,CACA,EAAA,EAAE,SACC,KAAA;AACH,EAAM,MAAA,CAAC,OAAO,EAAE,oBAAA,EAAsB,OAAO,CAAA,GAAI,UAAU,OAAO,CAAA;AAElE,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,CAAC,MAAQ,EAAA;AACb,QAAM,MAAA,SAAA,GAAY,MAAM,OAAO,CAAA;AAC/B,QAAqB,oBAAA,CAAA,cAAA,CAAe,SAAS,CAAC,CAAA;AAC9C,QAAO,OAAA,SAAA,CAAU,UAAU,QAAQ,CAAA;AAAA;AACrC;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,MAAQ,EAAA;AACZ,QAAM,MAAA,SAAA,GAAY,KAAK,OAAO,CAAA;AAC9B,QAAqB,oBAAA,CAAA,cAAA,CAAe,SAAS,CAAC,CAAA;AAC9C,QAAO,OAAA,SAAA,CAAU,UAAU,QAAQ,CAAA;AAAA;AACrC;AACF,GACF;AAEA,EAAA,SAAS,MAAMA,QAAsB,EAAA;AACnC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,oBAAoB,KAAK,CAAA;AACzC,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE,OAAA,EAAS,CAAC,CAAA,mBAAA,CAAA,EAAuB,CAAmB,iBAAA,CAAA;AAAA,OACtD;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAA,SAAS,KAAKA,QAAsB,EAAA;AAClC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,oBAAoB,KAAK,CAAA;AACzC,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE,OAAA,EAAS,CAAC,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/drawer-backdrop.ts"],"names":["element"],"mappings":";;;;;AAUO,MAAM,cAA4D,GAAA,CACvE,CACA,EAAA,EAAE,SACC,KAAA;AACH,EAAM,MAAA,CAAC,OAAO,EAAE,oBAAA,EAAsB,OAAO,CAAA,GAAI,UAAU,OAAO,CAAA;AAElE,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,CAAC,MAAQ,EAAA;AACb,QAAM,MAAA,SAAA,GAAY,MAAM,OAAO,CAAA;AAC/B,QAAqB,oBAAA,CAAA,cAAA,CAAe,SAAS,CAAC,CAAA;AAC9C,QAAO,OAAA,SAAA,CAAU,UAAU,QAAQ,CAAA;AAAA;AACrC;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,MAAQ,EAAA;AACZ,QAAM,MAAA,SAAA,GAAY,KAAK,OAAO,CAAA;AAC9B,QAAqB,oBAAA,CAAA,cAAA,CAAe,SAAS,CAAC,CAAA;AAC9C,QAAO,OAAA,SAAA,CAAU,UAAU,QAAQ,CAAA;AAAA;AACrC;AACF,GACF;AAEA,EAAA,SAAS,MAAMA,QAAsB,EAAA;AACnC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,oBAAoB,KAAK,CAAA;AACzC,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE,OAAA,EAAS,CAAC,CAAA,mBAAA,CAAA,EAAuB,CAAmB,iBAAA,CAAA;AAAA,OACtD;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAA,SAAS,KAAKA,QAAsB,EAAA;AAClC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,oBAAoB,KAAK,CAAA;AACzC,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE,OAAA,EAAS,CAAC,CAAA,yBAAA,CAAA,EAA6B,CAA6B,2BAAA,CAAA;AAAA,OACtE;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAQ,OAAA,CAAA,gBAAA,CAAiB,SAAS,KAAK,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAQ,OAAA,CAAA,mBAAA,CAAoB,SAAS,KAAK,CAAA;AAAA,GAC3C,CAAA;AACH","file":"drawer-backdrop.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, on, onCleanup } from \"solid-js\";\nimport { animate } from \"motion\";\n\nimport { useDrawer } from \"../hooks/index.js\";\nimport { controlPromise, getTransitionConfig } from \"../utils.js\";\n\ntype DrawerBackdropProps = {};\n\nexport const DrawerBackdrop: CorrectComponentType<DrawerBackdropProps> = (\n _,\n { element }\n) => {\n const [state, { updateAnimationQueue, close }] = useDrawer(element);\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (!isOpen) return;\n const animation = enter(element);\n updateAnimationQueue(controlPromise(animation));\n return onCleanup(animation.complete);\n }\n )\n );\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (isOpen) return;\n const animation = exit(element);\n updateAnimationQueue(controlPromise(animation));\n return onCleanup(animation.complete);\n }\n )\n );\n\n function enter(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const options = getTransitionConfig(style);\n return animate(\n element,\n {\n opacity: [`var(--opacity-from)`, `var(--opacity-to)`],\n },\n options\n );\n }\n\n function exit(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const options = getTransitionConfig(style);\n return animate(\n element,\n {\n opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`],\n },\n options\n );\n }\n\n element.addEventListener(\"click\", close);\n\n onCleanup(() => {\n element.removeEventListener(\"click\", close);\n });\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createContext, provide, consume } from 'component-register';
|
|
2
|
-
import { splitProps, createEffect, on, batch, mergeProps } from 'solid-js';
|
|
2
|
+
import { splitProps, createEffect, on, batch, untrack, mergeProps } from 'solid-js';
|
|
3
3
|
import { createStore } from 'solid-js/store';
|
|
4
4
|
import { toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-utils';
|
|
5
5
|
|
|
@@ -23,12 +23,15 @@ function initializeDrawerContext(props) {
|
|
|
23
23
|
)
|
|
24
24
|
);
|
|
25
25
|
function setElementState(key, value) {
|
|
26
|
+
const currentValue = untrack(() => props[key]);
|
|
26
27
|
if (typeof value === "function") {
|
|
27
|
-
const
|
|
28
|
-
const result = value(
|
|
28
|
+
const currentValue2 = untrack(() => props[key]);
|
|
29
|
+
const result = value(currentValue2 || false);
|
|
30
|
+
if (`${currentValue2}` === `${value}`) return;
|
|
29
31
|
element.root.setAttribute(toHyphenated(key), `${result}`);
|
|
30
32
|
return;
|
|
31
33
|
}
|
|
34
|
+
if (`${currentValue}` === `${value}`) return;
|
|
32
35
|
return element.root.setAttribute(toHyphenated(key), `${value}`);
|
|
33
36
|
}
|
|
34
37
|
return [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useDrawer.ts"],"names":["state","open"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useDrawer.ts"],"names":["currentValue","state","open"],"mappings":"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","file":"useDrawer.js","sourcesContent":["import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n createEffect,\n mergeProps,\n on,\n batch,\n splitProps,\n untrack,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n toHyphenated,\n getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\n\ntype StoreContext = {\n animationQueue: Promise<unknown>[];\n};\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n isOpen: boolean;\n isAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype DrawerContext = ReturnType<typeof initializeDrawerContext>;\n\nfunction initializeDrawerContext(props: CreateContextOptions) {\n const [element, stateProps] = splitProps(props, [\"root\"]);\n const [store, setStore] = createStore<StoreContext>({ animationQueue: [] });\n\n createEffect(\n on(\n () => store.animationQueue,\n (animationQueue) => {\n if (!animationQueue.length) return;\n const animations = Promise.all(store.animationQueue);\n setElementState(\"isAnimating\", true);\n animations.then(() => {\n batch(() => {\n setElementState(\"isAnimating\", false);\n setStore(\"animationQueue\", []);\n });\n });\n },\n ),\n );\n\n function setElementState(\n key: keyof Omit<CreateContextOptions, \"root\">,\n value: boolean | ((v: boolean) => boolean),\n ) {\n const currentValue = untrack(() => props[key]);\n if (typeof value === \"function\") {\n const currentValue = untrack(() => props[key]);\n const result = value(currentValue || false);\n if (`${currentValue}` === `${value}`) return;\n element.root.setAttribute(toHyphenated(key), `${result}`);\n return;\n }\n if (`${currentValue}` === `${value}`) return;\n return element.root.setAttribute(toHyphenated(key), `${value}`);\n }\n\n return [\n mergeProps(store, stateProps),\n { setElementState, setStore },\n ] as const;\n}\n\nconst DrawerContextState = createContext(initializeDrawerContext);\n\nexport const provideDrawerContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): DrawerContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(DrawerContextState, props, element);\n};\n\nexport const useDrawerContext = (context: DrawerContext) => {\n const [state, { setElementState, setStore: setState }] = context;\n\n function updateAnimationQueue(animation: Promise<unknown>) {\n setState(\"animationQueue\", (state) => [...state, animation]);\n }\n\n function close() {\n setElementState(\"isOpen\", false);\n }\n\n function open() {\n setElementState(\"isOpen\", true);\n }\n\n function toggle() {\n setElementState(\"isOpen\", (open) => !open);\n }\n\n return [state, { updateAnimationQueue, close, open, toggle }] as const;\n};\n\nexport const useDrawer = (element: HTMLElement & ICustomElement) => {\n const context: DrawerContext = consume(DrawerContextState, element);\n\n if (!context) {\n throw console.error(\n \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\n );\n }\n\n return useDrawerContext(context);\n};\n\nexport const getDrawerContext = (element: Element) => {\n const context = getContextFromProvider<DrawerContext>(\n DrawerContextState,\n element,\n );\n return useDrawerContext(context);\n};\n"]}
|
package/dist/main/utils.js
CHANGED
|
@@ -13,35 +13,41 @@ async function controlPromise(controls) {
|
|
|
13
13
|
}
|
|
14
14
|
function convertPositionToTranslate(position) {
|
|
15
15
|
if (position === POSITION.TOP || position === POSITION.BOTTOM)
|
|
16
|
-
return [
|
|
17
|
-
|
|
16
|
+
return [
|
|
17
|
+
"translateY(var(--drawer--slide-from))",
|
|
18
|
+
"translateY(var(--drawer--slide-to))"
|
|
19
|
+
];
|
|
20
|
+
return [
|
|
21
|
+
"translateX(var(--drawer--slide-from))",
|
|
22
|
+
"translateX(var(--drawer--slide-to))"
|
|
23
|
+
];
|
|
18
24
|
}
|
|
19
25
|
function getTransitionConfig(style) {
|
|
20
26
|
const properties = {
|
|
21
|
-
autoplay: style.getPropertyValue("--
|
|
22
|
-
bounce: style.getPropertyValue("--
|
|
23
|
-
bounceDamping: style.getPropertyValue("--
|
|
24
|
-
bounceStiffness: style.getPropertyValue("--
|
|
25
|
-
duration: style.getPropertyValue("--
|
|
26
|
-
damping: style.getPropertyValue("--
|
|
27
|
-
delay: style.getPropertyValue("--
|
|
28
|
-
ease: style.getPropertyValue("--
|
|
29
|
-
elapsed: style.getPropertyValue("--
|
|
30
|
-
mass: style.getPropertyValue("--
|
|
31
|
-
max: style.getPropertyValue("--
|
|
32
|
-
min: style.getPropertyValue("--
|
|
33
|
-
power: style.getPropertyValue("--
|
|
34
|
-
repeat: style.getPropertyValue("--
|
|
35
|
-
repeatDelay: style.getPropertyValue("--
|
|
36
|
-
repeatType: style.getPropertyValue("--
|
|
37
|
-
restDelta: style.getPropertyValue("--
|
|
38
|
-
restSpeed: style.getPropertyValue("--
|
|
39
|
-
startTime: style.getPropertyValue("--
|
|
40
|
-
timeConstant: style.getPropertyValue("--
|
|
41
|
-
times: style.getPropertyValue("--
|
|
42
|
-
type: style.getPropertyValue("--
|
|
43
|
-
velocity: style.getPropertyValue("--
|
|
44
|
-
visualDuration: style.getPropertyValue("--
|
|
27
|
+
autoplay: style.getPropertyValue("--motion--autoplay"),
|
|
28
|
+
bounce: style.getPropertyValue("--motion--bounce"),
|
|
29
|
+
bounceDamping: style.getPropertyValue("--motion--bounce-damping"),
|
|
30
|
+
bounceStiffness: style.getPropertyValue("--motion--bounce-stiffness"),
|
|
31
|
+
duration: style.getPropertyValue("--motion--duration"),
|
|
32
|
+
damping: style.getPropertyValue("--motion--damping"),
|
|
33
|
+
delay: style.getPropertyValue("--motion--delay"),
|
|
34
|
+
ease: style.getPropertyValue("--motion--ease"),
|
|
35
|
+
elapsed: style.getPropertyValue("--motion--elapsed"),
|
|
36
|
+
mass: style.getPropertyValue("--motion--mass"),
|
|
37
|
+
max: style.getPropertyValue("--motion--max"),
|
|
38
|
+
min: style.getPropertyValue("--motion--min"),
|
|
39
|
+
power: style.getPropertyValue("--motion--power"),
|
|
40
|
+
repeat: style.getPropertyValue("--motion--repeat"),
|
|
41
|
+
repeatDelay: style.getPropertyValue("--motion--repeat-delay"),
|
|
42
|
+
repeatType: style.getPropertyValue("--motion--repeat-type"),
|
|
43
|
+
restDelta: style.getPropertyValue("--motion--rest-delta"),
|
|
44
|
+
restSpeed: style.getPropertyValue("--motion--rest-speed"),
|
|
45
|
+
startTime: style.getPropertyValue("--motion--start-time"),
|
|
46
|
+
timeConstant: style.getPropertyValue("--motion--time-constant"),
|
|
47
|
+
times: style.getPropertyValue("--motion--times"),
|
|
48
|
+
type: style.getPropertyValue("--motion--type"),
|
|
49
|
+
velocity: style.getPropertyValue("--motion--velocity"),
|
|
50
|
+
visualDuration: style.getPropertyValue("--motion--visual-duration")
|
|
45
51
|
};
|
|
46
52
|
return {
|
|
47
53
|
autoplay: properties.autoplay === "true",
|
package/dist/main/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":";;AASO,SAAS,YAAmC,OAAY,EAAA;AAC7D,EAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,MAAA;AAC1B;AAEO,SAAS,YAAmC,OAAY,EAAA;AAC7D,EAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,OAAA;AAC1B;AAEA,eAAsB,eAAe,QAAqC,EAAA;AACxE,EAAO,OAAA,IAAI,OAAQ,CAAA,CAAC,OAAY,KAAA;AAC9B,IAAA,QAAA,CAAS,IAAK,CAAA,MAAM,OAAQ,CAAA,IAAI,CAAC,CAAA;AAAA,GAClC,CAAA;AACH;AAEO,SAAS,2BAA2B,QAAoB,EAAA;AAC7D,EAAA,IAAI,QAAa,KAAA,QAAA,CAAS,GAAO,IAAA,QAAA,KAAa,QAAS,CAAA,MAAA;AACrD,IAAO,OAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["import type {\n AnimationGeneratorType,\n AnimationPlaybackControls,\n Easing,\n RepeatType,\n Transition,\n} from \"motion\";\nimport { POSITION, type Position } from \"./consts\";\n\nexport function hideElement<T extends HTMLElement>(element: T) {\n element.style.display = \"none\";\n}\n\nexport function showElement<T extends HTMLElement>(element: T) {\n element.style.display = \"block\";\n}\n\nexport async function controlPromise(controls: AnimationPlaybackControls) {\n return new Promise((resolve) => {\n controls.then(() => resolve(null));\n });\n}\n\nexport function convertPositionToTranslate(position: Position) {\n if (position === POSITION.TOP || position === POSITION.BOTTOM)\n return [\n \"translateY(var(--drawer--slide-from))\",\n \"translateY(var(--drawer--slide-to))\",\n ];\n\n return [\n \"translateX(var(--drawer--slide-from))\",\n \"translateX(var(--drawer--slide-to))\",\n ];\n}\n\nexport function getTransitionConfig(style: CSSStyleDeclaration) {\n const properties = {\n autoplay: style.getPropertyValue(\"--motion--autoplay\"),\n bounce: style.getPropertyValue(\"--motion--bounce\"),\n bounceDamping: style.getPropertyValue(\"--motion--bounce-damping\"),\n bounceStiffness: style.getPropertyValue(\"--motion--bounce-stiffness\"),\n duration: style.getPropertyValue(\"--motion--duration\"),\n damping: style.getPropertyValue(\"--motion--damping\"),\n delay: style.getPropertyValue(\"--motion--delay\"),\n ease: style.getPropertyValue(\"--motion--ease\"),\n elapsed: style.getPropertyValue(\"--motion--elapsed\"),\n mass: style.getPropertyValue(\"--motion--mass\"),\n max: style.getPropertyValue(\"--motion--max\"),\n min: style.getPropertyValue(\"--motion--min\"),\n power: style.getPropertyValue(\"--motion--power\"),\n repeat: style.getPropertyValue(\"--motion--repeat\"),\n repeatDelay: style.getPropertyValue(\"--motion--repeat-delay\"),\n repeatType: style.getPropertyValue(\"--motion--repeat-type\"),\n restDelta: style.getPropertyValue(\"--motion--rest-delta\"),\n restSpeed: style.getPropertyValue(\"--motion--rest-speed\"),\n startTime: style.getPropertyValue(\"--motion--start-time\"),\n timeConstant: style.getPropertyValue(\"--motion--time-constant\"),\n times: style.getPropertyValue(\"--motion--times\"),\n type: style.getPropertyValue(\"--motion--type\"),\n velocity: style.getPropertyValue(\"--motion--velocity\"),\n visualDuration: style.getPropertyValue(\"--motion--visual-duration\"),\n };\n return {\n autoplay: properties.autoplay === \"true\",\n bounce: properties.bounce ? parseFloat(properties.bounce) : undefined,\n bounceDamping: properties.bounceDamping\n ? parseFloat(properties.bounceDamping)\n : undefined,\n bounceStiffness: properties.bounceStiffness\n ? parseFloat(properties.bounceStiffness)\n : undefined,\n duration: properties.duration ? parseFloat(properties.duration) : undefined,\n damping: properties.damping ? parseFloat(properties.damping) : undefined,\n delay: properties.delay ? parseFloat(properties.delay) : undefined,\n ease: properties.ease as Easing,\n elapsed: properties.elapsed ? parseFloat(properties.elapsed) : undefined,\n mass: properties.mass ? parseFloat(properties.mass) : undefined,\n max: properties.max ? parseFloat(properties.max) : undefined,\n min: properties.min ? parseFloat(properties.min) : undefined,\n power: properties.power ? parseFloat(properties.power) : undefined,\n repeat: properties.repeat ? parseInt(properties.repeat) : undefined,\n repeatDelay: properties.repeatDelay\n ? parseFloat(properties.repeatDelay)\n : undefined,\n repeatType: properties.repeatType as RepeatType,\n restDelta: properties.restDelta\n ? parseFloat(properties.restDelta)\n : undefined,\n restSpeed: properties.restSpeed\n ? parseFloat(properties.restSpeed)\n : undefined,\n startTime: properties.startTime\n ? parseFloat(properties.startTime)\n : undefined,\n timeConstant: properties.timeConstant\n ? parseFloat(properties.timeConstant)\n : undefined,\n type: properties.type as AnimationGeneratorType,\n velocity: properties.velocity ? parseFloat(properties.velocity) : undefined,\n visualDuration: properties.visualDuration\n ? parseFloat(properties.visualDuration)\n : undefined,\n } satisfies Transition;\n}\n"]}
|