@plaidev/karte-action-sdk 1.1.63 → 1.1.64
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/hydrate/index.es.d.ts +52 -23
- package/dist/hydrate/index.es.js +85 -35
- package/dist/index.es.d.ts +52 -23
- package/dist/index.es.js +90 -34
- package/package.json +1 -1
|
@@ -390,24 +390,24 @@ declare function hideOnScroll<Props extends {
|
|
|
390
390
|
hide_on_scroll: boolean;
|
|
391
391
|
hide_on_scroll_rate: number;
|
|
392
392
|
show_on_scroll_reenter: boolean;
|
|
393
|
-
}>(props: Props, fn?: () => void): () => void;
|
|
393
|
+
}>(props: Props, fn?: () => void): (() => void) | null;
|
|
394
394
|
declare function hideOnTime<Props extends {
|
|
395
395
|
hide_on_time: boolean;
|
|
396
396
|
hide_on_time_count: number;
|
|
397
|
-
}>(props: Props, fn?: () => void): () => void;
|
|
397
|
+
}>(props: Props, fn?: () => void): (() => void) | null;
|
|
398
398
|
declare function showOnScroll<Props extends {
|
|
399
399
|
show_on_scroll: boolean;
|
|
400
400
|
show_on_scroll_rate: number;
|
|
401
401
|
show_on_scroll_reenter: boolean;
|
|
402
|
-
}>(props: Props, fn?: Function): () => void;
|
|
402
|
+
}>(props: Props, fn?: Function): (() => void) | null;
|
|
403
403
|
declare function showOnTime<Props extends {
|
|
404
404
|
show_on_time: boolean;
|
|
405
405
|
show_on_time_count: number;
|
|
406
|
-
}>(props: Props, fn?: Function): () => void;
|
|
406
|
+
}>(props: Props, fn?: Function): (() => void) | null;
|
|
407
407
|
/**
|
|
408
|
-
* An options for {@link
|
|
408
|
+
* An options for {@link showModal}
|
|
409
409
|
*/
|
|
410
|
-
interface
|
|
410
|
+
interface ModalOptions<Props, Variables> {
|
|
411
411
|
/**
|
|
412
412
|
* {@link Send} function to receive events triggered in Karte action.
|
|
413
413
|
*
|
|
@@ -427,8 +427,48 @@ interface AppOptions<Props, Variables> {
|
|
|
427
427
|
*/
|
|
428
428
|
variables?: Variables;
|
|
429
429
|
}
|
|
430
|
+
// types of props to reference for internaly
|
|
431
|
+
interface _Props {
|
|
432
|
+
hide_on_scroll: boolean;
|
|
433
|
+
hide_on_scroll_rate: number;
|
|
434
|
+
show_on_scroll_reenter: boolean;
|
|
435
|
+
hide_on_time: boolean;
|
|
436
|
+
hide_on_time_count: number;
|
|
437
|
+
show_on_scroll: boolean;
|
|
438
|
+
show_on_scroll_rate: number;
|
|
439
|
+
show_on_time: boolean;
|
|
440
|
+
show_on_time_count: number;
|
|
441
|
+
}
|
|
442
|
+
/**
|
|
443
|
+
* Show the modal
|
|
444
|
+
*
|
|
445
|
+
* @param App - An entry point of svelte component.
|
|
446
|
+
* @param options - A {@link ModalOptions | options}
|
|
447
|
+
*
|
|
448
|
+
* @return A function to close the modal
|
|
449
|
+
*/
|
|
450
|
+
declare function showModal<Props extends _Props, Variables>(App: typeof SvelteComponentDev, options?: ModalOptions<Props, Variables>): () => void;
|
|
451
|
+
declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
|
|
452
|
+
declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
|
|
453
|
+
declare function createFog({ color, opacity, zIndex, onclick }: {
|
|
454
|
+
color?: string;
|
|
455
|
+
opacity?: string;
|
|
456
|
+
zIndex?: number;
|
|
457
|
+
onclick: () => void;
|
|
458
|
+
}): {
|
|
459
|
+
fog: HTMLDivElement;
|
|
460
|
+
close: () => void;
|
|
461
|
+
};
|
|
462
|
+
type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
|
|
463
|
+
declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
|
|
464
|
+
/**
|
|
465
|
+
* An options for {@link createApp}
|
|
466
|
+
* @deprecated
|
|
467
|
+
*/
|
|
468
|
+
type AppOptions<Props, Variables> = ModalOptions<Props, Variables>;
|
|
430
469
|
/**
|
|
431
470
|
* App application instance that is with {@link createApp}
|
|
471
|
+
* @deprecated
|
|
432
472
|
*
|
|
433
473
|
* @description Currently, svelte component is supported only.
|
|
434
474
|
*/
|
|
@@ -443,26 +483,15 @@ interface App {
|
|
|
443
483
|
show: () => void;
|
|
444
484
|
}
|
|
445
485
|
/**
|
|
446
|
-
* Create an application instance
|
|
486
|
+
* Create an application instance
|
|
487
|
+
* @deprecated
|
|
447
488
|
*
|
|
448
489
|
* @param App - An entry point of svelte component.
|
|
449
490
|
* @param options - An {@link AppOptions | options}
|
|
450
|
-
*
|
|
491
|
+
*
|
|
492
|
+
* @return A function to close the modal
|
|
451
493
|
*/
|
|
452
|
-
declare
|
|
453
|
-
declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
|
|
454
|
-
declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
|
|
455
|
-
declare function createFog({ color, opacity, zIndex, onclick }: {
|
|
456
|
-
color?: string;
|
|
457
|
-
opacity?: string;
|
|
458
|
-
zIndex?: number;
|
|
459
|
-
onclick: () => void;
|
|
460
|
-
}): {
|
|
461
|
-
fog: HTMLDivElement;
|
|
462
|
-
close: () => void;
|
|
463
|
-
};
|
|
464
|
-
type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
|
|
465
|
-
declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
|
|
494
|
+
declare function createApp<Props, Variables>(App: typeof SvelteComponentDev, options?: AppOptions<Props, Variables>): App;
|
|
466
495
|
declare const collection: (config: {
|
|
467
496
|
api_key: string;
|
|
468
497
|
table: string;
|
|
@@ -476,7 +505,7 @@ declare const collection: (config: {
|
|
|
476
505
|
} | null | undefined, cb: (err: Error | null, items?: any) => void): void;
|
|
477
506
|
set(key: string, value: string, cb: (err: Error | null) => void): void;
|
|
478
507
|
};
|
|
479
|
-
export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime,
|
|
508
|
+
export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ModalOptions, showModal, ensureModalRoot, h, createFog, EmbedLogic, embed, AppOptions, App, createApp, collection };
|
|
480
509
|
export { default as State } from './components/State.svelte';
|
|
481
510
|
export { default as StateItem } from './components/StateItem.svelte';
|
|
482
511
|
export { default as Modal } from './components/Modal.svelte';
|
package/dist/hydrate/index.es.js
CHANGED
|
@@ -439,21 +439,20 @@ const ObjectFits = ['fill', 'contain', 'cover'];
|
|
|
439
439
|
const Repeats = ['repeat', 'space', 'round', 'no-repeat'];
|
|
440
440
|
const BackgroundSizes = ['cover', 'contain', 'auto'];
|
|
441
441
|
|
|
442
|
-
const NOOP = () => { };
|
|
443
442
|
function hideOnScroll(props, fn) {
|
|
444
443
|
return props.hide_on_scroll && props.hide_on_scroll_rate
|
|
445
444
|
? onScroll(props.hide_on_scroll_rate / 100, () => {
|
|
446
445
|
fn && fn();
|
|
447
446
|
return props.show_on_scroll_reenter;
|
|
448
447
|
})
|
|
449
|
-
:
|
|
448
|
+
: null;
|
|
450
449
|
}
|
|
451
450
|
function hideOnTime(props, fn) {
|
|
452
451
|
return props.hide_on_time && props.hide_on_time_count
|
|
453
452
|
? onTime(props.hide_on_time_count * 1000, () => {
|
|
454
453
|
fn && fn();
|
|
455
454
|
})
|
|
456
|
-
:
|
|
455
|
+
: null;
|
|
457
456
|
}
|
|
458
457
|
function showOnScroll(props, fn) {
|
|
459
458
|
return props.show_on_scroll && props.show_on_scroll_rate
|
|
@@ -461,28 +460,29 @@ function showOnScroll(props, fn) {
|
|
|
461
460
|
fn && fn();
|
|
462
461
|
return props.show_on_scroll_reenter;
|
|
463
462
|
})
|
|
464
|
-
:
|
|
463
|
+
: null;
|
|
465
464
|
}
|
|
466
465
|
function showOnTime(props, fn) {
|
|
467
466
|
return props.show_on_time && props.show_on_time_count
|
|
468
467
|
? onTime(props.show_on_time_count * 1000, () => {
|
|
469
468
|
fn && fn();
|
|
470
469
|
})
|
|
471
|
-
:
|
|
470
|
+
: null;
|
|
472
471
|
}
|
|
473
472
|
|
|
474
473
|
/**
|
|
475
|
-
*
|
|
474
|
+
* Show the modal
|
|
476
475
|
*
|
|
477
476
|
* @param App - An entry point of svelte component.
|
|
478
|
-
* @param options -
|
|
479
|
-
*
|
|
477
|
+
* @param options - A {@link ModalOptions | options}
|
|
478
|
+
*
|
|
479
|
+
* @return A function to close the modal
|
|
480
480
|
*/
|
|
481
|
-
|
|
481
|
+
function showModal(App, options = {
|
|
482
482
|
send: () => { },
|
|
483
483
|
props: {},
|
|
484
484
|
variables: {},
|
|
485
|
-
})
|
|
485
|
+
}) {
|
|
486
486
|
let app = null;
|
|
487
487
|
const close = () => {
|
|
488
488
|
if (app) {
|
|
@@ -490,33 +490,35 @@ const createApp = (App, options = {
|
|
|
490
490
|
app = null;
|
|
491
491
|
}
|
|
492
492
|
};
|
|
493
|
-
const
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
493
|
+
const show = () => {
|
|
494
|
+
if (app) {
|
|
495
|
+
return;
|
|
496
|
+
}
|
|
497
|
+
options.send('message_open');
|
|
498
|
+
app = new App({
|
|
499
|
+
target: ensureModalRoot(!true),
|
|
500
|
+
hydrate: true,
|
|
501
|
+
props: {
|
|
502
|
+
send: options.send,
|
|
503
|
+
close,
|
|
504
|
+
data: {
|
|
505
|
+
...options.props,
|
|
506
|
+
...options.variables,
|
|
507
|
+
},
|
|
501
508
|
},
|
|
502
|
-
}
|
|
509
|
+
});
|
|
503
510
|
};
|
|
504
|
-
{
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
appArgs.hydrate = true;
|
|
508
|
-
}
|
|
509
|
-
return {
|
|
510
|
-
close,
|
|
511
|
-
show: () => {
|
|
512
|
-
if (app) {
|
|
513
|
-
return;
|
|
514
|
-
}
|
|
515
|
-
options.send('message_open');
|
|
516
|
-
app = new App(appArgs);
|
|
517
|
-
},
|
|
511
|
+
const _show = () => {
|
|
512
|
+
show();
|
|
513
|
+
return close;
|
|
518
514
|
};
|
|
519
|
-
|
|
515
|
+
// if in hydrate mode (preview), always show modal
|
|
516
|
+
const showCleanup = _show();
|
|
517
|
+
return () => {
|
|
518
|
+
close();
|
|
519
|
+
showCleanup();
|
|
520
|
+
};
|
|
521
|
+
}
|
|
520
522
|
const KARTE_MODAL_ROOT = 'karte-modal-root';
|
|
521
523
|
function ensureModalRoot(useShadow = true) {
|
|
522
524
|
let el = document.getElementById(KARTE_MODAL_ROOT);
|
|
@@ -593,6 +595,54 @@ function embed(target, replace, embed_method) {
|
|
|
593
595
|
target.before(replace);
|
|
594
596
|
}
|
|
595
597
|
}
|
|
598
|
+
/**
|
|
599
|
+
* Create an application instance
|
|
600
|
+
* @deprecated
|
|
601
|
+
*
|
|
602
|
+
* @param App - An entry point of svelte component.
|
|
603
|
+
* @param options - An {@link AppOptions | options}
|
|
604
|
+
*
|
|
605
|
+
* @return A function to close the modal
|
|
606
|
+
*/
|
|
607
|
+
function createApp(App, options = {
|
|
608
|
+
send: () => { },
|
|
609
|
+
props: {},
|
|
610
|
+
variables: {},
|
|
611
|
+
}) {
|
|
612
|
+
let app = null;
|
|
613
|
+
const close = () => {
|
|
614
|
+
if (app) {
|
|
615
|
+
app.$destroy();
|
|
616
|
+
app = null;
|
|
617
|
+
}
|
|
618
|
+
};
|
|
619
|
+
const appArgs = {
|
|
620
|
+
target: null,
|
|
621
|
+
props: {
|
|
622
|
+
send: options.send,
|
|
623
|
+
close,
|
|
624
|
+
data: {
|
|
625
|
+
...options.props,
|
|
626
|
+
...options.variables,
|
|
627
|
+
},
|
|
628
|
+
},
|
|
629
|
+
};
|
|
630
|
+
{
|
|
631
|
+
const win = ensureModalRoot(false);
|
|
632
|
+
appArgs.target = win;
|
|
633
|
+
appArgs.hydrate = true;
|
|
634
|
+
}
|
|
635
|
+
return {
|
|
636
|
+
close,
|
|
637
|
+
show: () => {
|
|
638
|
+
if (app) {
|
|
639
|
+
return;
|
|
640
|
+
}
|
|
641
|
+
options.send('message_open');
|
|
642
|
+
app = new App(appArgs);
|
|
643
|
+
},
|
|
644
|
+
};
|
|
645
|
+
}
|
|
596
646
|
|
|
597
647
|
const ENDPOINT = 'https://t.karte.io/collection';
|
|
598
648
|
const collection = (config) => {
|
|
@@ -3227,4 +3277,4 @@ class ImageBlock extends SvelteComponent {
|
|
|
3227
3277
|
}
|
|
3228
3278
|
}
|
|
3229
3279
|
|
|
3230
|
-
export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, closeApp, closed, collection, createApp, createFog, customAnimation, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getTransform, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };
|
|
3280
|
+
export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, closeApp, closed, collection, createApp, createFog, customAnimation, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getTransform, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showModal, showOnScroll, showOnTime, state, toBr };
|
package/dist/index.es.d.ts
CHANGED
|
@@ -390,24 +390,24 @@ declare function hideOnScroll<Props extends {
|
|
|
390
390
|
hide_on_scroll: boolean;
|
|
391
391
|
hide_on_scroll_rate: number;
|
|
392
392
|
show_on_scroll_reenter: boolean;
|
|
393
|
-
}>(props: Props, fn?: () => void): () => void;
|
|
393
|
+
}>(props: Props, fn?: () => void): (() => void) | null;
|
|
394
394
|
declare function hideOnTime<Props extends {
|
|
395
395
|
hide_on_time: boolean;
|
|
396
396
|
hide_on_time_count: number;
|
|
397
|
-
}>(props: Props, fn?: () => void): () => void;
|
|
397
|
+
}>(props: Props, fn?: () => void): (() => void) | null;
|
|
398
398
|
declare function showOnScroll<Props extends {
|
|
399
399
|
show_on_scroll: boolean;
|
|
400
400
|
show_on_scroll_rate: number;
|
|
401
401
|
show_on_scroll_reenter: boolean;
|
|
402
|
-
}>(props: Props, fn?: Function): () => void;
|
|
402
|
+
}>(props: Props, fn?: Function): (() => void) | null;
|
|
403
403
|
declare function showOnTime<Props extends {
|
|
404
404
|
show_on_time: boolean;
|
|
405
405
|
show_on_time_count: number;
|
|
406
|
-
}>(props: Props, fn?: Function): () => void;
|
|
406
|
+
}>(props: Props, fn?: Function): (() => void) | null;
|
|
407
407
|
/**
|
|
408
|
-
* An options for {@link
|
|
408
|
+
* An options for {@link showModal}
|
|
409
409
|
*/
|
|
410
|
-
interface
|
|
410
|
+
interface ModalOptions<Props, Variables> {
|
|
411
411
|
/**
|
|
412
412
|
* {@link Send} function to receive events triggered in Karte action.
|
|
413
413
|
*
|
|
@@ -427,8 +427,48 @@ interface AppOptions<Props, Variables> {
|
|
|
427
427
|
*/
|
|
428
428
|
variables?: Variables;
|
|
429
429
|
}
|
|
430
|
+
// types of props to reference for internaly
|
|
431
|
+
interface _Props {
|
|
432
|
+
hide_on_scroll: boolean;
|
|
433
|
+
hide_on_scroll_rate: number;
|
|
434
|
+
show_on_scroll_reenter: boolean;
|
|
435
|
+
hide_on_time: boolean;
|
|
436
|
+
hide_on_time_count: number;
|
|
437
|
+
show_on_scroll: boolean;
|
|
438
|
+
show_on_scroll_rate: number;
|
|
439
|
+
show_on_time: boolean;
|
|
440
|
+
show_on_time_count: number;
|
|
441
|
+
}
|
|
442
|
+
/**
|
|
443
|
+
* Show the modal
|
|
444
|
+
*
|
|
445
|
+
* @param App - An entry point of svelte component.
|
|
446
|
+
* @param options - A {@link ModalOptions | options}
|
|
447
|
+
*
|
|
448
|
+
* @return A function to close the modal
|
|
449
|
+
*/
|
|
450
|
+
declare function showModal<Props extends _Props, Variables>(App: typeof SvelteComponentDev, options?: ModalOptions<Props, Variables>): () => void;
|
|
451
|
+
declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
|
|
452
|
+
declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
|
|
453
|
+
declare function createFog({ color, opacity, zIndex, onclick }: {
|
|
454
|
+
color?: string;
|
|
455
|
+
opacity?: string;
|
|
456
|
+
zIndex?: number;
|
|
457
|
+
onclick: () => void;
|
|
458
|
+
}): {
|
|
459
|
+
fog: HTMLDivElement;
|
|
460
|
+
close: () => void;
|
|
461
|
+
};
|
|
462
|
+
type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
|
|
463
|
+
declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
|
|
464
|
+
/**
|
|
465
|
+
* An options for {@link createApp}
|
|
466
|
+
* @deprecated
|
|
467
|
+
*/
|
|
468
|
+
type AppOptions<Props, Variables> = ModalOptions<Props, Variables>;
|
|
430
469
|
/**
|
|
431
470
|
* App application instance that is with {@link createApp}
|
|
471
|
+
* @deprecated
|
|
432
472
|
*
|
|
433
473
|
* @description Currently, svelte component is supported only.
|
|
434
474
|
*/
|
|
@@ -443,26 +483,15 @@ interface App {
|
|
|
443
483
|
show: () => void;
|
|
444
484
|
}
|
|
445
485
|
/**
|
|
446
|
-
* Create an application instance
|
|
486
|
+
* Create an application instance
|
|
487
|
+
* @deprecated
|
|
447
488
|
*
|
|
448
489
|
* @param App - An entry point of svelte component.
|
|
449
490
|
* @param options - An {@link AppOptions | options}
|
|
450
|
-
*
|
|
491
|
+
*
|
|
492
|
+
* @return A function to close the modal
|
|
451
493
|
*/
|
|
452
|
-
declare
|
|
453
|
-
declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
|
|
454
|
-
declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
|
|
455
|
-
declare function createFog({ color, opacity, zIndex, onclick }: {
|
|
456
|
-
color?: string;
|
|
457
|
-
opacity?: string;
|
|
458
|
-
zIndex?: number;
|
|
459
|
-
onclick: () => void;
|
|
460
|
-
}): {
|
|
461
|
-
fog: HTMLDivElement;
|
|
462
|
-
close: () => void;
|
|
463
|
-
};
|
|
464
|
-
type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
|
|
465
|
-
declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
|
|
494
|
+
declare function createApp<Props, Variables>(App: typeof SvelteComponentDev, options?: AppOptions<Props, Variables>): App;
|
|
466
495
|
declare const collection: (config: {
|
|
467
496
|
api_key: string;
|
|
468
497
|
table: string;
|
|
@@ -476,7 +505,7 @@ declare const collection: (config: {
|
|
|
476
505
|
} | null | undefined, cb: (err: Error | null, items?: any) => void): void;
|
|
477
506
|
set(key: string, value: string, cb: (err: Error | null) => void): void;
|
|
478
507
|
};
|
|
479
|
-
export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime,
|
|
508
|
+
export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ModalOptions, showModal, ensureModalRoot, h, createFog, EmbedLogic, embed, AppOptions, App, createApp, collection };
|
|
480
509
|
export { default as State } from './components/State.svelte';
|
|
481
510
|
export { default as StateItem } from './components/StateItem.svelte';
|
|
482
511
|
export { default as Modal } from './components/Modal.svelte';
|
package/dist/index.es.js
CHANGED
|
@@ -439,21 +439,20 @@ const ObjectFits = ['fill', 'contain', 'cover'];
|
|
|
439
439
|
const Repeats = ['repeat', 'space', 'round', 'no-repeat'];
|
|
440
440
|
const BackgroundSizes = ['cover', 'contain', 'auto'];
|
|
441
441
|
|
|
442
|
-
const NOOP = () => { };
|
|
443
442
|
function hideOnScroll(props, fn) {
|
|
444
443
|
return props.hide_on_scroll && props.hide_on_scroll_rate
|
|
445
444
|
? onScroll(props.hide_on_scroll_rate / 100, () => {
|
|
446
445
|
fn && fn();
|
|
447
446
|
return props.show_on_scroll_reenter;
|
|
448
447
|
})
|
|
449
|
-
:
|
|
448
|
+
: null;
|
|
450
449
|
}
|
|
451
450
|
function hideOnTime(props, fn) {
|
|
452
451
|
return props.hide_on_time && props.hide_on_time_count
|
|
453
452
|
? onTime(props.hide_on_time_count * 1000, () => {
|
|
454
453
|
fn && fn();
|
|
455
454
|
})
|
|
456
|
-
:
|
|
455
|
+
: null;
|
|
457
456
|
}
|
|
458
457
|
function showOnScroll(props, fn) {
|
|
459
458
|
return props.show_on_scroll && props.show_on_scroll_rate
|
|
@@ -461,28 +460,30 @@ function showOnScroll(props, fn) {
|
|
|
461
460
|
fn && fn();
|
|
462
461
|
return props.show_on_scroll_reenter;
|
|
463
462
|
})
|
|
464
|
-
:
|
|
463
|
+
: null;
|
|
465
464
|
}
|
|
466
465
|
function showOnTime(props, fn) {
|
|
467
466
|
return props.show_on_time && props.show_on_time_count
|
|
468
467
|
? onTime(props.show_on_time_count * 1000, () => {
|
|
469
468
|
fn && fn();
|
|
470
469
|
})
|
|
471
|
-
:
|
|
470
|
+
: null;
|
|
472
471
|
}
|
|
473
472
|
|
|
473
|
+
const NOOP = () => { };
|
|
474
474
|
/**
|
|
475
|
-
*
|
|
475
|
+
* Show the modal
|
|
476
476
|
*
|
|
477
477
|
* @param App - An entry point of svelte component.
|
|
478
|
-
* @param options -
|
|
479
|
-
*
|
|
478
|
+
* @param options - A {@link ModalOptions | options}
|
|
479
|
+
*
|
|
480
|
+
* @return A function to close the modal
|
|
480
481
|
*/
|
|
481
|
-
|
|
482
|
+
function showModal(App, options = {
|
|
482
483
|
send: () => { },
|
|
483
484
|
props: {},
|
|
484
485
|
variables: {},
|
|
485
|
-
})
|
|
486
|
+
}) {
|
|
486
487
|
let app = null;
|
|
487
488
|
const close = () => {
|
|
488
489
|
if (app) {
|
|
@@ -490,32 +491,40 @@ const createApp = (App, options = {
|
|
|
490
491
|
app = null;
|
|
491
492
|
}
|
|
492
493
|
};
|
|
493
|
-
const
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
494
|
+
const show = () => {
|
|
495
|
+
if (app) {
|
|
496
|
+
return;
|
|
497
|
+
}
|
|
498
|
+
options.send('message_open');
|
|
499
|
+
app = new App({
|
|
500
|
+
target: ensureModalRoot(!false),
|
|
501
|
+
hydrate: false,
|
|
502
|
+
props: {
|
|
503
|
+
send: options.send,
|
|
504
|
+
close,
|
|
505
|
+
data: {
|
|
506
|
+
...options.props,
|
|
507
|
+
...options.variables,
|
|
508
|
+
},
|
|
501
509
|
},
|
|
502
|
-
}
|
|
510
|
+
});
|
|
503
511
|
};
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
close
|
|
510
|
-
show: () => {
|
|
511
|
-
if (app) {
|
|
512
|
-
return;
|
|
513
|
-
}
|
|
514
|
-
options.send('message_open');
|
|
515
|
-
app = new App(appArgs);
|
|
516
|
-
},
|
|
512
|
+
// if in hydrate mode (preview), nothing is done, since modal will be disposed and closed in the preview module
|
|
513
|
+
const hideCleanup = hideOnScroll(options.props, close) || hideOnTime(options.props, close) || NOOP
|
|
514
|
+
;
|
|
515
|
+
const _show = () => {
|
|
516
|
+
show();
|
|
517
|
+
return close;
|
|
517
518
|
};
|
|
518
|
-
|
|
519
|
+
// if in hydrate mode (preview), always show modal
|
|
520
|
+
const showCleanup = showOnScroll(options.props, show) || showOnTime(options.props, show) || _show()
|
|
521
|
+
;
|
|
522
|
+
return () => {
|
|
523
|
+
close();
|
|
524
|
+
showCleanup();
|
|
525
|
+
hideCleanup();
|
|
526
|
+
};
|
|
527
|
+
}
|
|
519
528
|
const KARTE_MODAL_ROOT = 'karte-modal-root';
|
|
520
529
|
function ensureModalRoot(useShadow = true) {
|
|
521
530
|
let el = document.getElementById(KARTE_MODAL_ROOT);
|
|
@@ -592,6 +601,53 @@ function embed(target, replace, embed_method) {
|
|
|
592
601
|
target.before(replace);
|
|
593
602
|
}
|
|
594
603
|
}
|
|
604
|
+
/**
|
|
605
|
+
* Create an application instance
|
|
606
|
+
* @deprecated
|
|
607
|
+
*
|
|
608
|
+
* @param App - An entry point of svelte component.
|
|
609
|
+
* @param options - An {@link AppOptions | options}
|
|
610
|
+
*
|
|
611
|
+
* @return A function to close the modal
|
|
612
|
+
*/
|
|
613
|
+
function createApp(App, options = {
|
|
614
|
+
send: () => { },
|
|
615
|
+
props: {},
|
|
616
|
+
variables: {},
|
|
617
|
+
}) {
|
|
618
|
+
let app = null;
|
|
619
|
+
const close = () => {
|
|
620
|
+
if (app) {
|
|
621
|
+
app.$destroy();
|
|
622
|
+
app = null;
|
|
623
|
+
}
|
|
624
|
+
};
|
|
625
|
+
const appArgs = {
|
|
626
|
+
target: null,
|
|
627
|
+
props: {
|
|
628
|
+
send: options.send,
|
|
629
|
+
close,
|
|
630
|
+
data: {
|
|
631
|
+
...options.props,
|
|
632
|
+
...options.variables,
|
|
633
|
+
},
|
|
634
|
+
},
|
|
635
|
+
};
|
|
636
|
+
{
|
|
637
|
+
const win = ensureModalRoot(true);
|
|
638
|
+
appArgs.target = win;
|
|
639
|
+
}
|
|
640
|
+
return {
|
|
641
|
+
close,
|
|
642
|
+
show: () => {
|
|
643
|
+
if (app) {
|
|
644
|
+
return;
|
|
645
|
+
}
|
|
646
|
+
options.send('message_open');
|
|
647
|
+
app = new App(appArgs);
|
|
648
|
+
},
|
|
649
|
+
};
|
|
650
|
+
}
|
|
595
651
|
|
|
596
652
|
const ENDPOINT = 'https://t.karte.io/collection';
|
|
597
653
|
const collection = (config) => {
|
|
@@ -2986,4 +3042,4 @@ class ImageBlock extends SvelteComponent {
|
|
|
2986
3042
|
}
|
|
2987
3043
|
}
|
|
2988
3044
|
|
|
2989
|
-
export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, closeApp, closed, collection, createApp, createFog, customAnimation, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getTransform, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };
|
|
3045
|
+
export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, closeApp, closed, collection, createApp, createFog, customAnimation, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getTransform, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showModal, showOnScroll, showOnTime, state, toBr };
|