@depict-ai/ui 4.0.18 → 4.0.19
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/ES10/index.cjs +143 -119
- package/ES10/index.d.ts +3 -3
- package/ES10/index.js +143 -119
- package/latest/index.cjs +141 -117
- package/latest/index.d.ts +3 -3
- package/latest/index.js +141 -117
- package/package.json +2 -2
- package/server/ES10/index.cjs +97 -77
- package/server/ES10/index.d.ts +3 -3
- package/server/ES10/index.js +97 -77
- package/server/latest/index.cjs +95 -75
- package/server/latest/index.d.ts +3 -3
- package/server/latest/index.js +95 -75
package/latest/index.cjs
CHANGED
|
@@ -89,7 +89,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
|
|
|
89
89
|
$parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
|
|
90
90
|
$parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
|
|
91
91
|
/*! Depict.ai search and product listing SDK */
|
|
92
|
-
const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.
|
|
92
|
+
const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.19";
|
|
93
93
|
|
|
94
94
|
/**
|
|
95
95
|
* Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
|
|
@@ -2705,8 +2705,8 @@ function $3a1c4fee88fb8672$export$9ca09caa9c849d9c() {
|
|
|
2705
2705
|
var $1f3b5fa875714dea$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a>`),
|
|
2706
2706
|
$1f3b5fa875714dea$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=listing-card><div class=image-part></div><!$><!/><h3 class=title>`),
|
|
2707
2707
|
$1f3b5fa875714dea$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=empty-image>`);
|
|
2708
|
-
const $1f3b5fa875714dea$var$aspectRatioWidthComponent =
|
|
2709
|
-
const $1f3b5fa875714dea$var$aspectRatioHeightComponent =
|
|
2708
|
+
const $1f3b5fa875714dea$var$aspectRatioWidthComponent = 400;
|
|
2709
|
+
const $1f3b5fa875714dea$var$aspectRatioHeightComponent = 200;
|
|
2710
2710
|
const $1f3b5fa875714dea$var$listingSuggestionCollageAspectRatio = $1f3b5fa875714dea$var$aspectRatioWidthComponent / $1f3b5fa875714dea$var$aspectRatioHeightComponent;
|
|
2711
2711
|
function $1f3b5fa875714dea$export$67152d26d4f56ee8({
|
|
2712
2712
|
listing_: listing_,
|
|
@@ -2852,7 +2852,7 @@ function $1f3b5fa875714dea$export$ea41102db9bd68c3({
|
|
|
2852
2852
|
function $1f3b5fa875714dea$var$EmptyImage() {
|
|
2853
2853
|
return (() => {
|
|
2854
2854
|
var _el$7 = $gVhhF$solidjsweb.getNextElement($1f3b5fa875714dea$var$_tmpl$3);
|
|
2855
|
-
_el$7.style.setProperty("aspect-ratio", "
|
|
2855
|
+
_el$7.style.setProperty("aspect-ratio", "2");
|
|
2856
2856
|
$gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $3a1c4fee88fb8672$export$9ca09caa9c849d9c), {}));
|
|
2857
2857
|
return _el$7;
|
|
2858
2858
|
})();
|
|
@@ -3448,11 +3448,12 @@ function $3b9f2020814c7876$export$66d1697a0f27069c(modalLayoutStacked) {
|
|
|
3448
3448
|
var $11597ae03e703a47$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=instant-results-wrapper><h2></h2><!$><!/>`),
|
|
3449
3449
|
$11597ae03e703a47$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
|
|
3450
3450
|
$11597ae03e703a47$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<dialog>`),
|
|
3451
|
-
$11597ae03e703a47$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=
|
|
3452
|
-
$11597ae03e703a47$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<
|
|
3453
|
-
$11597ae03e703a47$var$_tmpl$6 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=
|
|
3454
|
-
$11597ae03e703a47$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=
|
|
3455
|
-
$11597ae03e703a47$var$_tmpl$8 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<
|
|
3451
|
+
$11597ae03e703a47$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
|
|
3452
|
+
$11597ae03e703a47$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<b>`),
|
|
3453
|
+
$11597ae03e703a47$var$_tmpl$6 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
|
|
3454
|
+
$11597ae03e703a47$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div></div><!$><!/>`),
|
|
3455
|
+
$11597ae03e703a47$var$_tmpl$8 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=left>`),
|
|
3456
|
+
$11597ae03e703a47$var$_tmpl$9 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right>`);
|
|
3456
3457
|
/**
|
|
3457
3458
|
* Second generation search modal - the solid component that gets added to <body> when the search modal is opened
|
|
3458
3459
|
*/
|
|
@@ -3746,6 +3747,21 @@ function $11597ae03e703a47$var$RawSearchModalV2({
|
|
|
3746
3747
|
return _el$6;
|
|
3747
3748
|
})();
|
|
3748
3749
|
};
|
|
3750
|
+
const discoverMoreSection = (() => {
|
|
3751
|
+
var _el$7 = $gVhhF$solidjsweb.getNextElement($11597ae03e703a47$var$_tmpl$4),
|
|
3752
|
+
_el$8 = _el$7.firstChild;
|
|
3753
|
+
$gVhhF$solidjsweb.addEventListener(_el$8, "click", $gVhhF$depictaiutilishared.catchify(() => submit_query_()), true);
|
|
3754
|
+
$gVhhF$solidjsweb.insert(_el$8, (() => {
|
|
3755
|
+
var _c$ = $gVhhF$solidjsweb.memo(() => !!get_search_field_value_());
|
|
3756
|
+
return () => _c$() ? i18n_.modal_view_all_results_()((() => {
|
|
3757
|
+
var _el$9 = $gVhhF$solidjsweb.getNextElement($11597ae03e703a47$var$_tmpl$5);
|
|
3758
|
+
$gVhhF$solidjsweb.insert(_el$9, formattedTotalNumberResults);
|
|
3759
|
+
return _el$9;
|
|
3760
|
+
})()) : i18n_.modal_discover_more_();
|
|
3761
|
+
})());
|
|
3762
|
+
$gVhhF$solidjsweb.runHydrationEvents();
|
|
3763
|
+
return _el$7;
|
|
3764
|
+
})();
|
|
3749
3765
|
const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
|
|
3750
3766
|
BackIcon_: () => $gVhhF$solidjsweb.createComponent((0, $b8660a70353e03cf$export$11e9f390c90a537f), {}),
|
|
3751
3767
|
input_field_ref_: element => set_input_field(element),
|
|
@@ -3791,24 +3807,22 @@ function $11597ae03e703a47$var$RawSearchModalV2({
|
|
|
3791
3807
|
},
|
|
3792
3808
|
get children() {
|
|
3793
3809
|
return [(() => {
|
|
3794
|
-
var _el$
|
|
3795
|
-
$gVhhF$solidjsweb.addEventListener(_el$
|
|
3796
|
-
$gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.classList(_el$
|
|
3810
|
+
var _el$10 = $gVhhF$solidjsweb.getNextElement($11597ae03e703a47$var$_tmpl$6);
|
|
3811
|
+
$gVhhF$solidjsweb.addEventListener(_el$10, "click", close_modal_, true);
|
|
3812
|
+
$gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.classList(_el$10, {
|
|
3797
3813
|
[backdropRandomClassname]: true
|
|
3798
3814
|
}, _$p));
|
|
3799
3815
|
$gVhhF$solidjsweb.runHydrationEvents();
|
|
3800
|
-
return _el$
|
|
3816
|
+
return _el$10;
|
|
3801
3817
|
})(), (() => {
|
|
3802
|
-
var _el$
|
|
3803
|
-
_el$9 = _el$8.firstChild,
|
|
3804
|
-
_el$13 = _el$9.firstChild,
|
|
3805
|
-
[_el$14, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$13.nextSibling),
|
|
3806
|
-
_el$10 = _el$14.nextSibling,
|
|
3807
|
-
_el$11 = _el$10.nextSibling,
|
|
3818
|
+
var _el$11 = $gVhhF$solidjsweb.getNextElement($11597ae03e703a47$var$_tmpl$7),
|
|
3808
3819
|
_el$12 = _el$11.firstChild,
|
|
3809
|
-
_el$
|
|
3810
|
-
[_el$
|
|
3811
|
-
|
|
3820
|
+
_el$14 = _el$12.firstChild,
|
|
3821
|
+
[_el$15, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$14.nextSibling),
|
|
3822
|
+
_el$13 = _el$15.nextSibling,
|
|
3823
|
+
_el$16 = _el$12.nextSibling,
|
|
3824
|
+
[_el$17, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$16.nextSibling);
|
|
3825
|
+
$gVhhF$solidjsweb.addEventListener(_el$11, "click", $gVhhF$depictaiutilishared.catchify(({
|
|
3812
3826
|
target: target,
|
|
3813
3827
|
currentTarget: currentTarget
|
|
3814
3828
|
}) => {
|
|
@@ -3819,10 +3833,11 @@ function $11597ae03e703a47$var$RawSearchModalV2({
|
|
|
3819
3833
|
const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setModalBodyWidth(records.at(-1).contentRect.width)));
|
|
3820
3834
|
resizeObserver.observe(element);
|
|
3821
3835
|
$gVhhF$solidjs.onCleanup(() => resizeObserver.disconnect());
|
|
3822
|
-
}, _el$
|
|
3823
|
-
$gVhhF$solidjsweb.insert(_el$
|
|
3836
|
+
}, _el$12);
|
|
3837
|
+
$gVhhF$solidjsweb.insert(_el$12, search_field, _el$15, _co$2);
|
|
3824
3838
|
$gVhhF$solidjsweb.use(el => {
|
|
3825
|
-
$gVhhF$depictaiutilishared.catchify((0, $7b98f0cf558884f7$export$50b90be27d8502d9))(el, bodyAlignmentSignal, bottom_distance_under_modal_)
|
|
3839
|
+
$gVhhF$depictaiutilishared.catchify((0, $7b98f0cf558884f7$export$50b90be27d8502d9))(el, bodyAlignmentSignal, bottom_distance_under_modal_ || (() => 0.03 // 3% under SearchModalV2 by default
|
|
3840
|
+
));
|
|
3826
3841
|
// Workaround part 2 of https://github.com/solidjs/solid/issues/2030
|
|
3827
3842
|
// We can't just re-render the components in the two different <Show> branches because <Show> would infinite loop because it depends on the resource created by the components
|
|
3828
3843
|
// We could also lift out the createResource from InstantResults into this component, but this component is already huge.
|
|
@@ -3830,41 +3845,32 @@ function $11597ae03e703a47$var$RawSearchModalV2({
|
|
|
3830
3845
|
const showStackedDOM = $gVhhF$solidjs.createMemo(() => modalLayoutStacked_() || noResults());
|
|
3831
3846
|
$gVhhF$solidjs.createEffect(() => {
|
|
3832
3847
|
if (showStackedDOM()) {
|
|
3833
|
-
el.replaceChildren(...renderedTextSuggestions(), ...renderedVisualSuggestions());
|
|
3848
|
+
el.replaceChildren(...renderedTextSuggestions(), ...renderedVisualSuggestions(), discoverMoreSection);
|
|
3834
3849
|
return;
|
|
3835
3850
|
}
|
|
3836
3851
|
el.replaceChildren(...[(() => {
|
|
3837
|
-
var _el$
|
|
3838
|
-
$gVhhF$solidjsweb.insert(_el$
|
|
3839
|
-
return _el$17;
|
|
3840
|
-
})(), (() => {
|
|
3841
|
-
var _el$18 = $gVhhF$solidjsweb.getNextElement($11597ae03e703a47$var$_tmpl$7);
|
|
3842
|
-
$gVhhF$solidjsweb.insert(_el$18, renderedVisualSuggestions);
|
|
3852
|
+
var _el$18 = $gVhhF$solidjsweb.getNextElement($11597ae03e703a47$var$_tmpl$8);
|
|
3853
|
+
$gVhhF$solidjsweb.insert(_el$18, renderedTextSuggestions);
|
|
3843
3854
|
return _el$18;
|
|
3844
|
-
})()
|
|
3855
|
+
})(), (() => {
|
|
3856
|
+
var _el$19 = $gVhhF$solidjsweb.getNextElement($11597ae03e703a47$var$_tmpl$9);
|
|
3857
|
+
$gVhhF$solidjsweb.insert(_el$19, renderedVisualSuggestions);
|
|
3858
|
+
return _el$19;
|
|
3859
|
+
})(), discoverMoreSection]);
|
|
3845
3860
|
});
|
|
3846
|
-
}, _el$
|
|
3847
|
-
$gVhhF$solidjsweb.
|
|
3848
|
-
$gVhhF$solidjsweb.insert(_el$12, (() => {
|
|
3849
|
-
var _c$ = $gVhhF$solidjsweb.memo(() => !!get_search_field_value_());
|
|
3850
|
-
return () => _c$() ? i18n_.modal_view_all_results_()((() => {
|
|
3851
|
-
var _el$19 = $gVhhF$solidjsweb.getNextElement($11597ae03e703a47$var$_tmpl$8);
|
|
3852
|
-
$gVhhF$solidjsweb.insert(_el$19, formattedTotalNumberResults);
|
|
3853
|
-
return _el$19;
|
|
3854
|
-
})()) : i18n_.modal_discover_more_();
|
|
3855
|
-
})());
|
|
3856
|
-
$gVhhF$solidjsweb.insert(_el$8, $gVhhF$solidjsweb.createComponent((0, $b776f25acdda22eb$export$f021bdedd3ec901a), {
|
|
3861
|
+
}, _el$13);
|
|
3862
|
+
$gVhhF$solidjsweb.insert(_el$11, $gVhhF$solidjsweb.createComponent((0, $b776f25acdda22eb$export$f021bdedd3ec901a), {
|
|
3857
3863
|
styles: mergedCssObject
|
|
3858
|
-
}), _el$
|
|
3864
|
+
}), _el$17, _co$3);
|
|
3859
3865
|
$gVhhF$solidjsweb.effect(_p$ => {
|
|
3860
3866
|
var _v$ = !!modalLayoutStacked_(),
|
|
3861
3867
|
_v$2 = {
|
|
3862
3868
|
[random_classname_body]: true
|
|
3863
3869
|
},
|
|
3864
3870
|
_v$3 = !!noResults();
|
|
3865
|
-
_v$ !== _p$.e && _el$
|
|
3866
|
-
_p$.t = $gVhhF$solidjsweb.classList(_el$
|
|
3867
|
-
_v$3 !== _p$.a && _el$
|
|
3871
|
+
_v$ !== _p$.e && _el$11.classList.toggle("stacked", _p$.e = _v$);
|
|
3872
|
+
_p$.t = $gVhhF$solidjsweb.classList(_el$12, _v$2, _p$.t);
|
|
3873
|
+
_v$3 !== _p$.a && _el$13.classList.toggle("no-results", _p$.a = _v$3);
|
|
3868
3874
|
return _p$;
|
|
3869
3875
|
}, {
|
|
3870
3876
|
e: undefined,
|
|
@@ -3872,7 +3878,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
|
|
|
3872
3878
|
a: undefined
|
|
3873
3879
|
});
|
|
3874
3880
|
$gVhhF$solidjsweb.runHydrationEvents();
|
|
3875
|
-
return _el$
|
|
3881
|
+
return _el$11;
|
|
3876
3882
|
})()];
|
|
3877
3883
|
}
|
|
3878
3884
|
})];
|
|
@@ -12791,6 +12797,67 @@ function $3716b8caf7f959e2$var$make_state_saved_rows(
|
|
|
12791
12797
|
}));
|
|
12792
12798
|
return rows;
|
|
12793
12799
|
}
|
|
12800
|
+
function $6892e0748f94faa6$export$e06dee46ebe7faa9({
|
|
12801
|
+
setBackdropStyle_: setBackdropStyle_,
|
|
12802
|
+
setBodyAlignment_: setBodyAlignment_,
|
|
12803
|
+
openDuration_: openDuration_
|
|
12804
|
+
}) {
|
|
12805
|
+
setBackdropStyle_(prev => ({
|
|
12806
|
+
...prev,
|
|
12807
|
+
opacity: 0,
|
|
12808
|
+
transition: `opacity ${openDuration_}ms ease-in`
|
|
12809
|
+
}));
|
|
12810
|
+
requestAnimationFrame(() => setBackdropStyle_(prev => ({
|
|
12811
|
+
...prev,
|
|
12812
|
+
opacity: 1
|
|
12813
|
+
})));
|
|
12814
|
+
setBodyAlignment_(prev => ({
|
|
12815
|
+
...prev,
|
|
12816
|
+
opacity: 0,
|
|
12817
|
+
transition: `opacity ${openDuration_}ms ease-in ${openDuration_ / 5}ms`,
|
|
12818
|
+
// Add a slight delay so the brightness of the modal isn't so jarring before the background has gotten darkened
|
|
12819
|
+
"--js-animation-duration": `${openDuration_}ms`
|
|
12820
|
+
}));
|
|
12821
|
+
requestAnimationFrame(() => setBodyAlignment_(prev => ({
|
|
12822
|
+
...prev,
|
|
12823
|
+
opacity: 1
|
|
12824
|
+
})));
|
|
12825
|
+
}
|
|
12826
|
+
function $6892e0748f94faa6$export$23d40cc5971c3acd({
|
|
12827
|
+
setBackdropStyle_: setBackdropStyle_,
|
|
12828
|
+
setBodyAlignment_: setBodyAlignment_,
|
|
12829
|
+
closeDuration_: closeDuration_
|
|
12830
|
+
}) {
|
|
12831
|
+
setBackdropStyle_(prev => ({
|
|
12832
|
+
...prev,
|
|
12833
|
+
opacity: 0,
|
|
12834
|
+
transition: `opacity ${closeDuration_}ms ease-out`
|
|
12835
|
+
}));
|
|
12836
|
+
setBodyAlignment_(prev => ({
|
|
12837
|
+
...prev,
|
|
12838
|
+
opacity: 0,
|
|
12839
|
+
transition: `opacity ${closeDuration_}ms ease-out`
|
|
12840
|
+
}));
|
|
12841
|
+
}
|
|
12842
|
+
function $6892e0748f94faa6$export$dab9321f3c157061(alignmentSignals, modalVersion) {
|
|
12843
|
+
const [, setBodyAlignment_] = alignmentSignals.body_;
|
|
12844
|
+
const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $gVhhF$solidjs.createSignal({});
|
|
12845
|
+
// For default centered modal, also run our fading animations if search modal v2
|
|
12846
|
+
modalVersion === 2 && $6892e0748f94faa6$export$e06dee46ebe7faa9({
|
|
12847
|
+
openDuration_: 125,
|
|
12848
|
+
setBodyAlignment_: setBodyAlignment_,
|
|
12849
|
+
setBackdropStyle_: setBackdropStyle_
|
|
12850
|
+
});
|
|
12851
|
+
const closingAnimation = modalVersion === 2 ? async () => {
|
|
12852
|
+
$6892e0748f94faa6$export$23d40cc5971c3acd({
|
|
12853
|
+
closeDuration_: 100,
|
|
12854
|
+
setBodyAlignment_: setBodyAlignment_,
|
|
12855
|
+
setBackdropStyle_: setBackdropStyle_
|
|
12856
|
+
});
|
|
12857
|
+
await new Promise(r => setTimeout(r, 100));
|
|
12858
|
+
} : undefined;
|
|
12859
|
+
return closingAnimation;
|
|
12860
|
+
}
|
|
12794
12861
|
var $5cbaffcb5602e671$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp search">`);
|
|
12795
12862
|
function $5cbaffcb5602e671$export$44f738469d5570cf({
|
|
12796
12863
|
actualField_: actualField_,
|
|
@@ -12804,7 +12871,15 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
|
|
|
12804
12871
|
}) {
|
|
12805
12872
|
return $gVhhF$solidjs.createRoot(dispose => {
|
|
12806
12873
|
const [innerWidthReactive, setInnerWidthReactive] = $gVhhF$solidjs.createSignal(innerWidth);
|
|
12807
|
-
const
|
|
12874
|
+
const [innerHeightReactive, setInnerHeightReactive] = $gVhhF$solidjs.createSignal(innerHeight);
|
|
12875
|
+
const resizeObserver = new ResizeObserver(records => {
|
|
12876
|
+
const {
|
|
12877
|
+
width: width,
|
|
12878
|
+
height: height
|
|
12879
|
+
} = records.at(-1).contentRect;
|
|
12880
|
+
setInnerWidthReactive(width);
|
|
12881
|
+
setInnerHeightReactive(height);
|
|
12882
|
+
});
|
|
12808
12883
|
const {
|
|
12809
12884
|
left: left,
|
|
12810
12885
|
top: top,
|
|
@@ -12837,6 +12912,13 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
|
|
|
12837
12912
|
zIndex: +zIndexOfFake + 1
|
|
12838
12913
|
} : {})
|
|
12839
12914
|
});
|
|
12915
|
+
const absoluteFieldTop = $gVhhF$solidjs.createMemo(() => {
|
|
12916
|
+
innerHeightReactive();
|
|
12917
|
+
innerWidthReactive();
|
|
12918
|
+
// This is very semi-scientific but I hope it works (seems to, albeit laggy see comment where this value gets used)
|
|
12919
|
+
return fakeField.getBoundingClientRect().top;
|
|
12920
|
+
});
|
|
12921
|
+
$gVhhF$solidjs.createEffect(() => console.log("absoluteFieldTop", fakeField, absoluteFieldTop(), "changing", addedToBody));
|
|
12840
12922
|
const pxOffCenter = Math.abs($gVhhF$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2));
|
|
12841
12923
|
const openDuration_ = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
|
|
12842
12924
|
const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
|
|
@@ -12870,7 +12952,10 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
|
|
|
12870
12952
|
Object.assign(addedToBody.style, {
|
|
12871
12953
|
// This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
|
|
12872
12954
|
left: `${innerWidthReactive() / 2 - inModalFieldWidth() / 2}px`,
|
|
12873
|
-
width: inModalFieldWidthPx()
|
|
12955
|
+
width: inModalFieldWidthPx(),
|
|
12956
|
+
// Lord forgive me for this is laggy. Example: on preview browser when resizing the screen in both x and y direction at the sam time. But it's too hard to change the code now, so that it doesn't happen.
|
|
12957
|
+
// Basically we'd want one align_field running in only the y-axis on the field that's still in the DOM and another one in the x-axis on the fake field. Or something…
|
|
12958
|
+
top: absoluteFieldTop() + "px"
|
|
12874
12959
|
});
|
|
12875
12960
|
// We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
|
|
12876
12961
|
setPollAlignment_(true);
|
|
@@ -12888,7 +12973,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
|
|
|
12888
12973
|
clearTimeout(disableResizePollingTimeout);
|
|
12889
12974
|
setPollAlignment_(false);
|
|
12890
12975
|
});
|
|
12891
|
-
$
|
|
12976
|
+
$6892e0748f94faa6$export$e06dee46ebe7faa9({
|
|
12892
12977
|
setBackdropStyle_: setBackdropStyle_,
|
|
12893
12978
|
setBodyAlignment_: setBodyAlignment_,
|
|
12894
12979
|
openDuration_: openDuration_
|
|
@@ -12902,7 +12987,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
|
|
|
12902
12987
|
width: width,
|
|
12903
12988
|
left: left
|
|
12904
12989
|
} = fakeField.getBoundingClientRect();
|
|
12905
|
-
$
|
|
12990
|
+
$6892e0748f94faa6$export$23d40cc5971c3acd({
|
|
12906
12991
|
setBackdropStyle_: setBackdropStyle_,
|
|
12907
12992
|
setBodyAlignment_: setBodyAlignment_,
|
|
12908
12993
|
closeDuration_: closeDuration_
|
|
@@ -12931,67 +13016,6 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
|
|
|
12931
13016
|
};
|
|
12932
13017
|
});
|
|
12933
13018
|
}
|
|
12934
|
-
function $5cbaffcb5602e671$export$e06dee46ebe7faa9({
|
|
12935
|
-
setBackdropStyle_: setBackdropStyle_,
|
|
12936
|
-
setBodyAlignment_: setBodyAlignment_,
|
|
12937
|
-
openDuration_: openDuration_
|
|
12938
|
-
}) {
|
|
12939
|
-
setBackdropStyle_(prev => ({
|
|
12940
|
-
...prev,
|
|
12941
|
-
opacity: 0,
|
|
12942
|
-
transition: `opacity ${openDuration_}ms ease-in`
|
|
12943
|
-
}));
|
|
12944
|
-
requestAnimationFrame(() => setBackdropStyle_(prev => ({
|
|
12945
|
-
...prev,
|
|
12946
|
-
opacity: 1
|
|
12947
|
-
})));
|
|
12948
|
-
setBodyAlignment_(prev => ({
|
|
12949
|
-
...prev,
|
|
12950
|
-
opacity: 0,
|
|
12951
|
-
transition: `opacity ${openDuration_}ms ease-in ${openDuration_ / 5}ms`,
|
|
12952
|
-
// Add a slight delay so the brightness of the modal isn't so jarring before the background has gotten darkened
|
|
12953
|
-
"--js-animation-duration": `${openDuration_}ms`
|
|
12954
|
-
}));
|
|
12955
|
-
requestAnimationFrame(() => setBodyAlignment_(prev => ({
|
|
12956
|
-
...prev,
|
|
12957
|
-
opacity: 1
|
|
12958
|
-
})));
|
|
12959
|
-
}
|
|
12960
|
-
function $5cbaffcb5602e671$export$23d40cc5971c3acd({
|
|
12961
|
-
setBackdropStyle_: setBackdropStyle_,
|
|
12962
|
-
setBodyAlignment_: setBodyAlignment_,
|
|
12963
|
-
closeDuration_: closeDuration_
|
|
12964
|
-
}) {
|
|
12965
|
-
setBackdropStyle_(prev => ({
|
|
12966
|
-
...prev,
|
|
12967
|
-
opacity: 0,
|
|
12968
|
-
transition: `opacity ${closeDuration_}ms ease-out`
|
|
12969
|
-
}));
|
|
12970
|
-
setBodyAlignment_(prev => ({
|
|
12971
|
-
...prev,
|
|
12972
|
-
opacity: 0,
|
|
12973
|
-
transition: `opacity ${closeDuration_}ms ease-out`
|
|
12974
|
-
}));
|
|
12975
|
-
}
|
|
12976
|
-
function $5cbaffcb5602e671$export$dab9321f3c157061(alignmentSignals, modalVersion) {
|
|
12977
|
-
const [, setBodyAlignment_] = alignmentSignals.body_;
|
|
12978
|
-
const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $gVhhF$solidjs.createSignal({});
|
|
12979
|
-
// For default centered modal, also run our fading animations if search modal v2
|
|
12980
|
-
modalVersion === 2 && $5cbaffcb5602e671$export$e06dee46ebe7faa9({
|
|
12981
|
-
openDuration_: 125,
|
|
12982
|
-
setBodyAlignment_: setBodyAlignment_,
|
|
12983
|
-
setBackdropStyle_: setBackdropStyle_
|
|
12984
|
-
});
|
|
12985
|
-
const closingAnimation = modalVersion === 2 ? async () => {
|
|
12986
|
-
$5cbaffcb5602e671$export$23d40cc5971c3acd({
|
|
12987
|
-
closeDuration_: 100,
|
|
12988
|
-
setBodyAlignment_: setBodyAlignment_,
|
|
12989
|
-
setBackdropStyle_: setBackdropStyle_
|
|
12990
|
-
});
|
|
12991
|
-
await new Promise(r => setTimeout(r, 100));
|
|
12992
|
-
} : undefined;
|
|
12993
|
-
return closingAnimation;
|
|
12994
|
-
}
|
|
12995
13019
|
var $f1d7cb69f839a526$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
|
|
12996
13020
|
$f1d7cb69f839a526$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp search"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
|
|
12997
13021
|
function $f1d7cb69f839a526$export$a54ec244c8863715({
|
|
@@ -13622,7 +13646,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
|
|
|
13622
13646
|
if (!open_signal_value[0]?.alignmentSignals_ && search_page_aligned_modal_alignment_signals_) {
|
|
13623
13647
|
// Open modal aligned with search page if no alignment specified and possible to align with search page
|
|
13624
13648
|
const [options_arg, ...rest] = open_signal_value === true ? [{}] : open_signal_value;
|
|
13625
|
-
const closingAnimation = $
|
|
13649
|
+
const closingAnimation = $6892e0748f94faa6$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
|
|
13626
13650
|
open_modal_({
|
|
13627
13651
|
closing_animation_: closingAnimation,
|
|
13628
13652
|
...options_arg,
|
|
@@ -13632,7 +13656,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
|
|
|
13632
13656
|
}
|
|
13633
13657
|
// Open centered modal
|
|
13634
13658
|
const centeredModalAlignmentSignals = $2005eec80e40088f$export$41b4894022a3580f();
|
|
13635
|
-
const closingAnimation = $
|
|
13659
|
+
const closingAnimation = $6892e0748f94faa6$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
|
|
13636
13660
|
if (signal_value_is_options) {
|
|
13637
13661
|
const [options_arg, ...rest] = open_signal_value;
|
|
13638
13662
|
open_modal_({
|
|
@@ -13869,7 +13893,7 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = openModalParams => {
|
|
|
13869
13893
|
field_: $gVhhF$solidjs.createSignal({}),
|
|
13870
13894
|
backdrop_: $gVhhF$solidjs.createSignal({})
|
|
13871
13895
|
};
|
|
13872
|
-
const closingAnimation = $
|
|
13896
|
+
const closingAnimation = $6892e0748f94faa6$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
|
|
13873
13897
|
$gVhhF$solidjs.createRoot(dispose => {
|
|
13874
13898
|
dispose_aligner = () => {
|
|
13875
13899
|
cleanup?.();
|
package/latest/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
|
|
|
10
10
|
import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
|
|
11
11
|
import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
|
|
12
12
|
import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
|
|
13
|
-
export const version = "4.0.
|
|
13
|
+
export const version = "4.0.19";
|
|
14
14
|
/**
|
|
15
15
|
* Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
|
|
16
16
|
*/
|
|
@@ -1211,7 +1211,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
|
|
|
1211
1211
|
on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
|
|
1212
1212
|
content_blocks_by_row?: ContentBlocksByRow;
|
|
1213
1213
|
layout?: PossibleLayout;
|
|
1214
|
-
}): import("@depict-ai/utilishared").Node_Array;
|
|
1214
|
+
}): import("@depict-ai/utilishared/latest").Node_Array;
|
|
1215
1215
|
export function BreadCrumbs<T extends Display>({
|
|
1216
1216
|
depict_category
|
|
1217
1217
|
}: {
|
|
@@ -1351,7 +1351,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
|
|
|
1351
1351
|
* Open the modal with support for alignment.
|
|
1352
1352
|
* @returns {void}
|
|
1353
1353
|
*/
|
|
1354
|
-
export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends
|
|
1354
|
+
export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
|
|
1355
1355
|
export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
|
|
1356
1356
|
export interface PageReplacer {
|
|
1357
1357
|
readonly render_: () => Node_Array;
|