@plaidev/karte-action-sdk 1.1.221 → 1.1.222
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 +70 -1
- package/dist/hydrate/index.es.js +242 -129
- package/dist/index.es.d.ts +70 -1
- package/dist/index.es.js +242 -129
- package/package.json +1 -1
|
@@ -1515,6 +1515,75 @@ declare function createFog({ color, opacity, zIndex, onclick }: {
|
|
|
1515
1515
|
fog: HTMLDivElement;
|
|
1516
1516
|
close: () => void;
|
|
1517
1517
|
};
|
|
1518
|
+
type AnswerValue = {
|
|
1519
|
+
choices: string[];
|
|
1520
|
+
} | {
|
|
1521
|
+
free_answer: string;
|
|
1522
|
+
};
|
|
1523
|
+
/**
|
|
1524
|
+
* 選択式のアンケート回答を追加する
|
|
1525
|
+
*
|
|
1526
|
+
* @param questionId - 質問ID
|
|
1527
|
+
* @param choices - 回答内容
|
|
1528
|
+
*
|
|
1529
|
+
* @public
|
|
1530
|
+
*/
|
|
1531
|
+
declare function addChoiceAnswer(questionId: string, choices: string[], validation?: {
|
|
1532
|
+
isValid: boolean;
|
|
1533
|
+
statePath: string;
|
|
1534
|
+
}): void;
|
|
1535
|
+
/**
|
|
1536
|
+
* 自由記述式のアンケート回答を追加する
|
|
1537
|
+
*
|
|
1538
|
+
* @param questionId - 質問ID
|
|
1539
|
+
* @param freeAnswer - 回答内容
|
|
1540
|
+
*
|
|
1541
|
+
* @public
|
|
1542
|
+
*/
|
|
1543
|
+
declare function addFreeAnswer(questionId: string, freeAnswer: string, validation?: {
|
|
1544
|
+
isValid: boolean;
|
|
1545
|
+
statePath: string;
|
|
1546
|
+
}): void;
|
|
1547
|
+
/**
|
|
1548
|
+
* 回答済の回答を削除
|
|
1549
|
+
*
|
|
1550
|
+
* @param questionId - 質問ID
|
|
1551
|
+
*
|
|
1552
|
+
* @public
|
|
1553
|
+
*/
|
|
1554
|
+
declare function removeAnswer(questionId: string): void;
|
|
1555
|
+
/**
|
|
1556
|
+
* 回答済の回答内容を取得する
|
|
1557
|
+
*
|
|
1558
|
+
* @param questionId - 質問ID
|
|
1559
|
+
*
|
|
1560
|
+
* @returns 回答データ
|
|
1561
|
+
*
|
|
1562
|
+
* @public
|
|
1563
|
+
*/
|
|
1564
|
+
declare function getAnsweredQuestion(questionId: string): AnswerValue | undefined;
|
|
1565
|
+
/**
|
|
1566
|
+
* 回答済の回答IDのリストを取得
|
|
1567
|
+
*
|
|
1568
|
+
* @returns 回答済の質問の質問IDの配列
|
|
1569
|
+
*
|
|
1570
|
+
* @public
|
|
1571
|
+
*/
|
|
1572
|
+
declare function getAnsweredQuestionIds(): string[];
|
|
1573
|
+
/**
|
|
1574
|
+
* `sendAnswers`のエイリアス
|
|
1575
|
+
*
|
|
1576
|
+
* @public
|
|
1577
|
+
*/
|
|
1578
|
+
declare function sendAnswer(): boolean;
|
|
1579
|
+
/**
|
|
1580
|
+
* 回答済の回答をまとめてイベントとして送信する
|
|
1581
|
+
*
|
|
1582
|
+
* @returns イベント送信の成功/失敗
|
|
1583
|
+
*
|
|
1584
|
+
* @public
|
|
1585
|
+
*/
|
|
1586
|
+
declare function sendAnswers(): boolean;
|
|
1518
1587
|
declare namespace widget {
|
|
1519
1588
|
/**
|
|
1520
1589
|
* アクションの汎用的なタイプを定義する
|
|
@@ -2277,7 +2346,7 @@ declare const afterUpdate: typeof afterUpdateSvelte;
|
|
|
2277
2346
|
declare const tick: typeof tickSvelte;
|
|
2278
2347
|
// @internal
|
|
2279
2348
|
declare const LAYOUT_COMPONENT_NAMES: string[];
|
|
2280
|
-
export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES };
|
|
2349
|
+
export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES };
|
|
2281
2350
|
export type { SystemConfig, ActionVariables, ActionEventHandler, ActionProps, ActionOptions, ActionHook, ActionHookLog, ActionChangeStateHook, SendFunction, PublishFunction, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionCloseHook, ShowTrigger, CloseTrigger, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
|
|
2282
2351
|
export { default as State } from './components/State.svelte';
|
|
2283
2352
|
export { default as StateItem } from './components/StateItem.svelte';
|
package/dist/hydrate/index.es.js
CHANGED
|
@@ -2255,6 +2255,247 @@ function destroy() {
|
|
|
2255
2255
|
dispatchDestroyEvent();
|
|
2256
2256
|
}
|
|
2257
2257
|
|
|
2258
|
+
const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
|
|
2259
|
+
const MAX_LENGTH_FREE_ANSWER = 2000;
|
|
2260
|
+
function isEmpty(value) {
|
|
2261
|
+
if (Array.isArray(value)) {
|
|
2262
|
+
return value.length === 0;
|
|
2263
|
+
}
|
|
2264
|
+
else {
|
|
2265
|
+
return !value;
|
|
2266
|
+
}
|
|
2267
|
+
}
|
|
2268
|
+
/** @internal */
|
|
2269
|
+
function createInputRegisterer(formData) {
|
|
2270
|
+
const registerInput = ({ name, statePath, validator = () => true, initialValue, }) => {
|
|
2271
|
+
const writableValue = {
|
|
2272
|
+
subscribe(run) {
|
|
2273
|
+
return formData.subscribe(formData => {
|
|
2274
|
+
run(formData[name]?.value);
|
|
2275
|
+
});
|
|
2276
|
+
},
|
|
2277
|
+
set(value) {
|
|
2278
|
+
formData.update(prev => ({
|
|
2279
|
+
...prev,
|
|
2280
|
+
[name]: {
|
|
2281
|
+
statePath,
|
|
2282
|
+
value,
|
|
2283
|
+
isValid: validator(value),
|
|
2284
|
+
},
|
|
2285
|
+
}));
|
|
2286
|
+
},
|
|
2287
|
+
update(updater) {
|
|
2288
|
+
formData.update(prev => {
|
|
2289
|
+
const prevValue = prev[name]?.value;
|
|
2290
|
+
if (prevValue === undefined)
|
|
2291
|
+
return prev;
|
|
2292
|
+
const value = updater(prevValue);
|
|
2293
|
+
return {
|
|
2294
|
+
...prev,
|
|
2295
|
+
[name]: {
|
|
2296
|
+
statePath,
|
|
2297
|
+
value,
|
|
2298
|
+
isValid: validator(value),
|
|
2299
|
+
},
|
|
2300
|
+
};
|
|
2301
|
+
});
|
|
2302
|
+
},
|
|
2303
|
+
};
|
|
2304
|
+
const readableIsValid = {
|
|
2305
|
+
subscribe(run) {
|
|
2306
|
+
return formData.subscribe(formData => {
|
|
2307
|
+
run(formData[name]?.isValid);
|
|
2308
|
+
});
|
|
2309
|
+
},
|
|
2310
|
+
};
|
|
2311
|
+
if (isEmpty(get(writableValue))) {
|
|
2312
|
+
writableValue.set(initialValue);
|
|
2313
|
+
}
|
|
2314
|
+
return {
|
|
2315
|
+
value: writableValue,
|
|
2316
|
+
isValid: readableIsValid,
|
|
2317
|
+
};
|
|
2318
|
+
};
|
|
2319
|
+
return registerInput;
|
|
2320
|
+
}
|
|
2321
|
+
/** @internal */
|
|
2322
|
+
const registerInput = createInputRegisterer(formData);
|
|
2323
|
+
/** @internal */
|
|
2324
|
+
const registerIdentifyInput = createInputRegisterer(identifyFormData);
|
|
2325
|
+
function validateFormData(formData, statePath) {
|
|
2326
|
+
return Object.entries(formData)
|
|
2327
|
+
.filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
2328
|
+
.every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
2329
|
+
}
|
|
2330
|
+
/** @internal */
|
|
2331
|
+
const getValuesAreValidReadable = statePath => ({
|
|
2332
|
+
subscribe(callback) {
|
|
2333
|
+
return formData.subscribe(formData => identifyFormData.subscribe(identifyFormData => {
|
|
2334
|
+
const valuesAreValid = validateFormData(formData, statePath) && validateFormData(identifyFormData, statePath);
|
|
2335
|
+
callback(valuesAreValid);
|
|
2336
|
+
}));
|
|
2337
|
+
},
|
|
2338
|
+
});
|
|
2339
|
+
function createAnswerValue(value) {
|
|
2340
|
+
if (Array.isArray(value)) {
|
|
2341
|
+
return {
|
|
2342
|
+
choices: value,
|
|
2343
|
+
};
|
|
2344
|
+
}
|
|
2345
|
+
else if (typeof value === 'string') {
|
|
2346
|
+
return {
|
|
2347
|
+
free_answer: value,
|
|
2348
|
+
};
|
|
2349
|
+
}
|
|
2350
|
+
}
|
|
2351
|
+
function formDataToEventValues(campaignId, formData) {
|
|
2352
|
+
const questions = [];
|
|
2353
|
+
const answersMap = {};
|
|
2354
|
+
Object.entries(formData).forEach(([name, dataItem]) => {
|
|
2355
|
+
questions.push(name);
|
|
2356
|
+
const value = dataItem.value;
|
|
2357
|
+
const answerKey = `question_${name}`;
|
|
2358
|
+
const answerValue = createAnswerValue(value);
|
|
2359
|
+
answersMap[answerKey] = answerValue;
|
|
2360
|
+
});
|
|
2361
|
+
return {
|
|
2362
|
+
[campaignId]: {
|
|
2363
|
+
questions,
|
|
2364
|
+
...answersMap,
|
|
2365
|
+
},
|
|
2366
|
+
};
|
|
2367
|
+
}
|
|
2368
|
+
function formDataToIdentifyEventValues(formData) {
|
|
2369
|
+
return Object.fromEntries(Object.entries(formData).map(([name, dataItem]) => {
|
|
2370
|
+
const value = dataItem.value;
|
|
2371
|
+
return [name, value];
|
|
2372
|
+
}));
|
|
2373
|
+
}
|
|
2374
|
+
/** @internal */
|
|
2375
|
+
function submit() {
|
|
2376
|
+
const systemConfig = getSystem();
|
|
2377
|
+
const campaignId = systemConfig.campaignId;
|
|
2378
|
+
if (campaignId) {
|
|
2379
|
+
const formData$1 = get(formData);
|
|
2380
|
+
const identifyFormData$1 = get(identifyFormData);
|
|
2381
|
+
const values = formDataToEventValues(campaignId, formData$1);
|
|
2382
|
+
const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
|
|
2383
|
+
if (Object.keys(identifyValues).length > 0) {
|
|
2384
|
+
identifyValues['user_id'] = getVariables()?.[USER_ID_VARIABLE_NAME];
|
|
2385
|
+
}
|
|
2386
|
+
return { values, identifyValues };
|
|
2387
|
+
}
|
|
2388
|
+
return {};
|
|
2389
|
+
}
|
|
2390
|
+
/**
|
|
2391
|
+
* 選択式のアンケート回答を追加する
|
|
2392
|
+
*
|
|
2393
|
+
* @param questionId - 質問ID
|
|
2394
|
+
* @param choices - 回答内容
|
|
2395
|
+
*
|
|
2396
|
+
* @public
|
|
2397
|
+
*/
|
|
2398
|
+
function addChoiceAnswer(questionId, choices, validation) {
|
|
2399
|
+
formData.update(prev => ({
|
|
2400
|
+
...prev,
|
|
2401
|
+
[questionId]: {
|
|
2402
|
+
value: choices,
|
|
2403
|
+
statePath: validation?.statePath ?? '',
|
|
2404
|
+
isValid: validation?.isValid ?? true,
|
|
2405
|
+
},
|
|
2406
|
+
}));
|
|
2407
|
+
}
|
|
2408
|
+
/**
|
|
2409
|
+
* 自由記述式のアンケート回答を追加する
|
|
2410
|
+
*
|
|
2411
|
+
* @param questionId - 質問ID
|
|
2412
|
+
* @param freeAnswer - 回答内容
|
|
2413
|
+
*
|
|
2414
|
+
* @public
|
|
2415
|
+
*/
|
|
2416
|
+
function addFreeAnswer(questionId, freeAnswer, validation) {
|
|
2417
|
+
formData.update(prev => ({
|
|
2418
|
+
...prev,
|
|
2419
|
+
[questionId]: {
|
|
2420
|
+
value: freeAnswer.slice(0, MAX_LENGTH_FREE_ANSWER),
|
|
2421
|
+
statePath: validation?.statePath ?? '',
|
|
2422
|
+
isValid: validation?.isValid ?? true,
|
|
2423
|
+
},
|
|
2424
|
+
}));
|
|
2425
|
+
}
|
|
2426
|
+
/**
|
|
2427
|
+
* 回答済の回答を削除
|
|
2428
|
+
*
|
|
2429
|
+
* @param questionId - 質問ID
|
|
2430
|
+
*
|
|
2431
|
+
* @public
|
|
2432
|
+
*/
|
|
2433
|
+
function removeAnswer(questionId) {
|
|
2434
|
+
formData.update(prev => {
|
|
2435
|
+
const next = { ...prev };
|
|
2436
|
+
delete next[questionId];
|
|
2437
|
+
return next;
|
|
2438
|
+
});
|
|
2439
|
+
}
|
|
2440
|
+
/**
|
|
2441
|
+
* 回答済の回答内容を取得する
|
|
2442
|
+
*
|
|
2443
|
+
* @param questionId - 質問ID
|
|
2444
|
+
*
|
|
2445
|
+
* @returns 回答データ
|
|
2446
|
+
*
|
|
2447
|
+
* @public
|
|
2448
|
+
*/
|
|
2449
|
+
function getAnsweredQuestion(questionId) {
|
|
2450
|
+
const formData$1 = get(formData);
|
|
2451
|
+
const valueState = formData$1[questionId];
|
|
2452
|
+
if (valueState) {
|
|
2453
|
+
return createAnswerValue(valueState.value);
|
|
2454
|
+
}
|
|
2455
|
+
}
|
|
2456
|
+
/**
|
|
2457
|
+
* 回答済の回答IDのリストを取得
|
|
2458
|
+
*
|
|
2459
|
+
* @returns 回答済の質問の質問IDの配列
|
|
2460
|
+
*
|
|
2461
|
+
* @public
|
|
2462
|
+
*/
|
|
2463
|
+
function getAnsweredQuestionIds() {
|
|
2464
|
+
const formData$1 = get(formData);
|
|
2465
|
+
return Object.keys(formData$1);
|
|
2466
|
+
}
|
|
2467
|
+
/**
|
|
2468
|
+
* `sendAnswers`のエイリアス
|
|
2469
|
+
*
|
|
2470
|
+
* @public
|
|
2471
|
+
*/
|
|
2472
|
+
function sendAnswer() {
|
|
2473
|
+
return sendAnswers();
|
|
2474
|
+
}
|
|
2475
|
+
// NOTE: sendAnswers用
|
|
2476
|
+
let isSent = false;
|
|
2477
|
+
/**
|
|
2478
|
+
* 回答済の回答をまとめてイベントとして送信する
|
|
2479
|
+
*
|
|
2480
|
+
* @returns イベント送信の成功/失敗
|
|
2481
|
+
*
|
|
2482
|
+
* @public
|
|
2483
|
+
*/
|
|
2484
|
+
function sendAnswers() {
|
|
2485
|
+
const { values, identifyValues } = submit();
|
|
2486
|
+
if (isSent)
|
|
2487
|
+
return false;
|
|
2488
|
+
if (Object.keys(values ?? {}).length === 0 && Object.keys(identifyValues ?? {}).length === 0) {
|
|
2489
|
+
return false;
|
|
2490
|
+
}
|
|
2491
|
+
send_event('_answer_question', values);
|
|
2492
|
+
if (Object.keys(identifyValues ?? {}).length > 0) {
|
|
2493
|
+
send_event('identify', identifyValues);
|
|
2494
|
+
}
|
|
2495
|
+
isSent = true;
|
|
2496
|
+
return true;
|
|
2497
|
+
}
|
|
2498
|
+
|
|
2258
2499
|
/**
|
|
2259
2500
|
* エディタv1のWidget API 互換のインターフェース
|
|
2260
2501
|
*/
|
|
@@ -2913,134 +3154,6 @@ class StateItem extends SvelteComponent {
|
|
|
2913
3154
|
}
|
|
2914
3155
|
}
|
|
2915
3156
|
|
|
2916
|
-
const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
|
|
2917
|
-
function isEmpty(value) {
|
|
2918
|
-
if (Array.isArray(value)) {
|
|
2919
|
-
return value.length === 0;
|
|
2920
|
-
}
|
|
2921
|
-
else {
|
|
2922
|
-
return !value;
|
|
2923
|
-
}
|
|
2924
|
-
}
|
|
2925
|
-
/** @internal */
|
|
2926
|
-
function createInputRegisterer(formData) {
|
|
2927
|
-
const registerInput = ({ name, statePath, validator = () => true, initialValue, }) => {
|
|
2928
|
-
const writableValue = {
|
|
2929
|
-
subscribe(run) {
|
|
2930
|
-
return formData.subscribe(formData => {
|
|
2931
|
-
run(formData[name]?.value);
|
|
2932
|
-
});
|
|
2933
|
-
},
|
|
2934
|
-
set(value) {
|
|
2935
|
-
formData.update(prev => ({
|
|
2936
|
-
...prev,
|
|
2937
|
-
[name]: {
|
|
2938
|
-
statePath,
|
|
2939
|
-
value,
|
|
2940
|
-
isValid: validator(value),
|
|
2941
|
-
},
|
|
2942
|
-
}));
|
|
2943
|
-
},
|
|
2944
|
-
update(updater) {
|
|
2945
|
-
formData.update(prev => {
|
|
2946
|
-
const prevValue = prev[name]?.value;
|
|
2947
|
-
if (prevValue === undefined)
|
|
2948
|
-
return prev;
|
|
2949
|
-
const value = updater(prevValue);
|
|
2950
|
-
return {
|
|
2951
|
-
...prev,
|
|
2952
|
-
[name]: {
|
|
2953
|
-
statePath,
|
|
2954
|
-
value,
|
|
2955
|
-
isValid: validator(value),
|
|
2956
|
-
},
|
|
2957
|
-
};
|
|
2958
|
-
});
|
|
2959
|
-
},
|
|
2960
|
-
};
|
|
2961
|
-
const readableIsValid = {
|
|
2962
|
-
subscribe(run) {
|
|
2963
|
-
return formData.subscribe(formData => {
|
|
2964
|
-
run(formData[name]?.isValid);
|
|
2965
|
-
});
|
|
2966
|
-
},
|
|
2967
|
-
};
|
|
2968
|
-
if (isEmpty(get(writableValue))) {
|
|
2969
|
-
writableValue.set(initialValue);
|
|
2970
|
-
}
|
|
2971
|
-
return {
|
|
2972
|
-
value: writableValue,
|
|
2973
|
-
isValid: readableIsValid,
|
|
2974
|
-
};
|
|
2975
|
-
};
|
|
2976
|
-
return registerInput;
|
|
2977
|
-
}
|
|
2978
|
-
/** @internal */
|
|
2979
|
-
const registerInput = createInputRegisterer(formData);
|
|
2980
|
-
/** @internal */
|
|
2981
|
-
const registerIdentifyInput = createInputRegisterer(identifyFormData);
|
|
2982
|
-
function validateFormData(formData, statePath) {
|
|
2983
|
-
return Object.entries(formData)
|
|
2984
|
-
.filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
2985
|
-
.every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
2986
|
-
}
|
|
2987
|
-
/** @internal */
|
|
2988
|
-
const getValuesAreValidReadable = statePath => ({
|
|
2989
|
-
subscribe(callback) {
|
|
2990
|
-
return formData.subscribe(formData => identifyFormData.subscribe(identifyFormData => {
|
|
2991
|
-
const valuesAreValid = validateFormData(formData, statePath) && validateFormData(identifyFormData, statePath);
|
|
2992
|
-
callback(valuesAreValid);
|
|
2993
|
-
}));
|
|
2994
|
-
},
|
|
2995
|
-
});
|
|
2996
|
-
function formDataToEventValues(campaignId, formData) {
|
|
2997
|
-
const questions = [];
|
|
2998
|
-
const answersMap = {};
|
|
2999
|
-
Object.entries(formData).forEach(([name, dataItem]) => {
|
|
3000
|
-
questions.push(name);
|
|
3001
|
-
const value = dataItem.value;
|
|
3002
|
-
const answerKey = `question_${name}`;
|
|
3003
|
-
if (Array.isArray(value)) {
|
|
3004
|
-
answersMap[answerKey] = {
|
|
3005
|
-
choices: value,
|
|
3006
|
-
};
|
|
3007
|
-
}
|
|
3008
|
-
else if (typeof value === 'string') {
|
|
3009
|
-
answersMap[answerKey] = {
|
|
3010
|
-
free_answer: value,
|
|
3011
|
-
};
|
|
3012
|
-
}
|
|
3013
|
-
});
|
|
3014
|
-
return {
|
|
3015
|
-
[campaignId]: {
|
|
3016
|
-
questions,
|
|
3017
|
-
...answersMap,
|
|
3018
|
-
},
|
|
3019
|
-
};
|
|
3020
|
-
}
|
|
3021
|
-
function formDataToIdentifyEventValues(formData) {
|
|
3022
|
-
return Object.fromEntries(Object.entries(formData).map(([name, dataItem]) => {
|
|
3023
|
-
const value = dataItem.value;
|
|
3024
|
-
return [name, value];
|
|
3025
|
-
}));
|
|
3026
|
-
}
|
|
3027
|
-
/** @internal */
|
|
3028
|
-
function submit() {
|
|
3029
|
-
const systemConfig = getSystem();
|
|
3030
|
-
const campaignId = systemConfig.campaignId;
|
|
3031
|
-
if (campaignId) {
|
|
3032
|
-
const formData$1 = get(formData);
|
|
3033
|
-
const identifyFormData$1 = get(identifyFormData);
|
|
3034
|
-
const values = formDataToEventValues(campaignId, formData$1);
|
|
3035
|
-
const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
|
|
3036
|
-
if (Object.keys(identifyValues).length > 0) {
|
|
3037
|
-
identifyValues['user_id'] = getVariables()?.[USER_ID_VARIABLE_NAME];
|
|
3038
|
-
}
|
|
3039
|
-
return { values, identifyValues };
|
|
3040
|
-
}
|
|
3041
|
-
return {};
|
|
3042
|
-
}
|
|
3043
|
-
|
|
3044
3157
|
/**
|
|
3045
3158
|
* モーダル(ポップアップ)のコンポーネントが利用するコードの管理
|
|
3046
3159
|
*/
|
|
@@ -11751,4 +11864,4 @@ class ImageBlock extends SvelteComponent {
|
|
|
11751
11864
|
}
|
|
11752
11865
|
}
|
|
11753
11866
|
|
|
11754
|
-
export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, resetEventHandlers, resetVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
|
|
11867
|
+
export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
|
package/dist/index.es.d.ts
CHANGED
|
@@ -1515,6 +1515,75 @@ declare function createFog({ color, opacity, zIndex, onclick }: {
|
|
|
1515
1515
|
fog: HTMLDivElement;
|
|
1516
1516
|
close: () => void;
|
|
1517
1517
|
};
|
|
1518
|
+
type AnswerValue = {
|
|
1519
|
+
choices: string[];
|
|
1520
|
+
} | {
|
|
1521
|
+
free_answer: string;
|
|
1522
|
+
};
|
|
1523
|
+
/**
|
|
1524
|
+
* 選択式のアンケート回答を追加する
|
|
1525
|
+
*
|
|
1526
|
+
* @param questionId - 質問ID
|
|
1527
|
+
* @param choices - 回答内容
|
|
1528
|
+
*
|
|
1529
|
+
* @public
|
|
1530
|
+
*/
|
|
1531
|
+
declare function addChoiceAnswer(questionId: string, choices: string[], validation?: {
|
|
1532
|
+
isValid: boolean;
|
|
1533
|
+
statePath: string;
|
|
1534
|
+
}): void;
|
|
1535
|
+
/**
|
|
1536
|
+
* 自由記述式のアンケート回答を追加する
|
|
1537
|
+
*
|
|
1538
|
+
* @param questionId - 質問ID
|
|
1539
|
+
* @param freeAnswer - 回答内容
|
|
1540
|
+
*
|
|
1541
|
+
* @public
|
|
1542
|
+
*/
|
|
1543
|
+
declare function addFreeAnswer(questionId: string, freeAnswer: string, validation?: {
|
|
1544
|
+
isValid: boolean;
|
|
1545
|
+
statePath: string;
|
|
1546
|
+
}): void;
|
|
1547
|
+
/**
|
|
1548
|
+
* 回答済の回答を削除
|
|
1549
|
+
*
|
|
1550
|
+
* @param questionId - 質問ID
|
|
1551
|
+
*
|
|
1552
|
+
* @public
|
|
1553
|
+
*/
|
|
1554
|
+
declare function removeAnswer(questionId: string): void;
|
|
1555
|
+
/**
|
|
1556
|
+
* 回答済の回答内容を取得する
|
|
1557
|
+
*
|
|
1558
|
+
* @param questionId - 質問ID
|
|
1559
|
+
*
|
|
1560
|
+
* @returns 回答データ
|
|
1561
|
+
*
|
|
1562
|
+
* @public
|
|
1563
|
+
*/
|
|
1564
|
+
declare function getAnsweredQuestion(questionId: string): AnswerValue | undefined;
|
|
1565
|
+
/**
|
|
1566
|
+
* 回答済の回答IDのリストを取得
|
|
1567
|
+
*
|
|
1568
|
+
* @returns 回答済の質問の質問IDの配列
|
|
1569
|
+
*
|
|
1570
|
+
* @public
|
|
1571
|
+
*/
|
|
1572
|
+
declare function getAnsweredQuestionIds(): string[];
|
|
1573
|
+
/**
|
|
1574
|
+
* `sendAnswers`のエイリアス
|
|
1575
|
+
*
|
|
1576
|
+
* @public
|
|
1577
|
+
*/
|
|
1578
|
+
declare function sendAnswer(): boolean;
|
|
1579
|
+
/**
|
|
1580
|
+
* 回答済の回答をまとめてイベントとして送信する
|
|
1581
|
+
*
|
|
1582
|
+
* @returns イベント送信の成功/失敗
|
|
1583
|
+
*
|
|
1584
|
+
* @public
|
|
1585
|
+
*/
|
|
1586
|
+
declare function sendAnswers(): boolean;
|
|
1518
1587
|
declare namespace widget {
|
|
1519
1588
|
/**
|
|
1520
1589
|
* アクションの汎用的なタイプを定義する
|
|
@@ -2277,7 +2346,7 @@ declare const afterUpdate: typeof afterUpdateSvelte;
|
|
|
2277
2346
|
declare const tick: typeof tickSvelte;
|
|
2278
2347
|
// @internal
|
|
2279
2348
|
declare const LAYOUT_COMPONENT_NAMES: string[];
|
|
2280
|
-
export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES };
|
|
2349
|
+
export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES };
|
|
2281
2350
|
export type { SystemConfig, ActionVariables, ActionEventHandler, ActionProps, ActionOptions, ActionHook, ActionHookLog, ActionChangeStateHook, SendFunction, PublishFunction, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionCloseHook, ShowTrigger, CloseTrigger, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
|
|
2282
2351
|
export { default as State } from './components/State.svelte';
|
|
2283
2352
|
export { default as StateItem } from './components/StateItem.svelte';
|
package/dist/index.es.js
CHANGED
|
@@ -2312,6 +2312,247 @@ function destroy() {
|
|
|
2312
2312
|
dispatchDestroyEvent();
|
|
2313
2313
|
}
|
|
2314
2314
|
|
|
2315
|
+
const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
|
|
2316
|
+
const MAX_LENGTH_FREE_ANSWER = 2000;
|
|
2317
|
+
function isEmpty(value) {
|
|
2318
|
+
if (Array.isArray(value)) {
|
|
2319
|
+
return value.length === 0;
|
|
2320
|
+
}
|
|
2321
|
+
else {
|
|
2322
|
+
return !value;
|
|
2323
|
+
}
|
|
2324
|
+
}
|
|
2325
|
+
/** @internal */
|
|
2326
|
+
function createInputRegisterer(formData) {
|
|
2327
|
+
const registerInput = ({ name, statePath, validator = () => true, initialValue, }) => {
|
|
2328
|
+
const writableValue = {
|
|
2329
|
+
subscribe(run) {
|
|
2330
|
+
return formData.subscribe(formData => {
|
|
2331
|
+
run(formData[name]?.value);
|
|
2332
|
+
});
|
|
2333
|
+
},
|
|
2334
|
+
set(value) {
|
|
2335
|
+
formData.update(prev => ({
|
|
2336
|
+
...prev,
|
|
2337
|
+
[name]: {
|
|
2338
|
+
statePath,
|
|
2339
|
+
value,
|
|
2340
|
+
isValid: validator(value),
|
|
2341
|
+
},
|
|
2342
|
+
}));
|
|
2343
|
+
},
|
|
2344
|
+
update(updater) {
|
|
2345
|
+
formData.update(prev => {
|
|
2346
|
+
const prevValue = prev[name]?.value;
|
|
2347
|
+
if (prevValue === undefined)
|
|
2348
|
+
return prev;
|
|
2349
|
+
const value = updater(prevValue);
|
|
2350
|
+
return {
|
|
2351
|
+
...prev,
|
|
2352
|
+
[name]: {
|
|
2353
|
+
statePath,
|
|
2354
|
+
value,
|
|
2355
|
+
isValid: validator(value),
|
|
2356
|
+
},
|
|
2357
|
+
};
|
|
2358
|
+
});
|
|
2359
|
+
},
|
|
2360
|
+
};
|
|
2361
|
+
const readableIsValid = {
|
|
2362
|
+
subscribe(run) {
|
|
2363
|
+
return formData.subscribe(formData => {
|
|
2364
|
+
run(formData[name]?.isValid);
|
|
2365
|
+
});
|
|
2366
|
+
},
|
|
2367
|
+
};
|
|
2368
|
+
if (isEmpty(get(writableValue))) {
|
|
2369
|
+
writableValue.set(initialValue);
|
|
2370
|
+
}
|
|
2371
|
+
return {
|
|
2372
|
+
value: writableValue,
|
|
2373
|
+
isValid: readableIsValid,
|
|
2374
|
+
};
|
|
2375
|
+
};
|
|
2376
|
+
return registerInput;
|
|
2377
|
+
}
|
|
2378
|
+
/** @internal */
|
|
2379
|
+
const registerInput = createInputRegisterer(formData);
|
|
2380
|
+
/** @internal */
|
|
2381
|
+
const registerIdentifyInput = createInputRegisterer(identifyFormData);
|
|
2382
|
+
function validateFormData(formData, statePath) {
|
|
2383
|
+
return Object.entries(formData)
|
|
2384
|
+
.filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
2385
|
+
.every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
2386
|
+
}
|
|
2387
|
+
/** @internal */
|
|
2388
|
+
const getValuesAreValidReadable = statePath => ({
|
|
2389
|
+
subscribe(callback) {
|
|
2390
|
+
return formData.subscribe(formData => identifyFormData.subscribe(identifyFormData => {
|
|
2391
|
+
const valuesAreValid = validateFormData(formData, statePath) && validateFormData(identifyFormData, statePath);
|
|
2392
|
+
callback(valuesAreValid);
|
|
2393
|
+
}));
|
|
2394
|
+
},
|
|
2395
|
+
});
|
|
2396
|
+
function createAnswerValue(value) {
|
|
2397
|
+
if (Array.isArray(value)) {
|
|
2398
|
+
return {
|
|
2399
|
+
choices: value,
|
|
2400
|
+
};
|
|
2401
|
+
}
|
|
2402
|
+
else if (typeof value === 'string') {
|
|
2403
|
+
return {
|
|
2404
|
+
free_answer: value,
|
|
2405
|
+
};
|
|
2406
|
+
}
|
|
2407
|
+
}
|
|
2408
|
+
function formDataToEventValues(campaignId, formData) {
|
|
2409
|
+
const questions = [];
|
|
2410
|
+
const answersMap = {};
|
|
2411
|
+
Object.entries(formData).forEach(([name, dataItem]) => {
|
|
2412
|
+
questions.push(name);
|
|
2413
|
+
const value = dataItem.value;
|
|
2414
|
+
const answerKey = `question_${name}`;
|
|
2415
|
+
const answerValue = createAnswerValue(value);
|
|
2416
|
+
answersMap[answerKey] = answerValue;
|
|
2417
|
+
});
|
|
2418
|
+
return {
|
|
2419
|
+
[campaignId]: {
|
|
2420
|
+
questions,
|
|
2421
|
+
...answersMap,
|
|
2422
|
+
},
|
|
2423
|
+
};
|
|
2424
|
+
}
|
|
2425
|
+
function formDataToIdentifyEventValues(formData) {
|
|
2426
|
+
return Object.fromEntries(Object.entries(formData).map(([name, dataItem]) => {
|
|
2427
|
+
const value = dataItem.value;
|
|
2428
|
+
return [name, value];
|
|
2429
|
+
}));
|
|
2430
|
+
}
|
|
2431
|
+
/** @internal */
|
|
2432
|
+
function submit() {
|
|
2433
|
+
const systemConfig = getSystem();
|
|
2434
|
+
const campaignId = systemConfig.campaignId;
|
|
2435
|
+
if (campaignId) {
|
|
2436
|
+
const formData$1 = get(formData);
|
|
2437
|
+
const identifyFormData$1 = get(identifyFormData);
|
|
2438
|
+
const values = formDataToEventValues(campaignId, formData$1);
|
|
2439
|
+
const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
|
|
2440
|
+
if (Object.keys(identifyValues).length > 0) {
|
|
2441
|
+
identifyValues['user_id'] = getVariables()?.[USER_ID_VARIABLE_NAME];
|
|
2442
|
+
}
|
|
2443
|
+
return { values, identifyValues };
|
|
2444
|
+
}
|
|
2445
|
+
return {};
|
|
2446
|
+
}
|
|
2447
|
+
/**
|
|
2448
|
+
* 選択式のアンケート回答を追加する
|
|
2449
|
+
*
|
|
2450
|
+
* @param questionId - 質問ID
|
|
2451
|
+
* @param choices - 回答内容
|
|
2452
|
+
*
|
|
2453
|
+
* @public
|
|
2454
|
+
*/
|
|
2455
|
+
function addChoiceAnswer(questionId, choices, validation) {
|
|
2456
|
+
formData.update(prev => ({
|
|
2457
|
+
...prev,
|
|
2458
|
+
[questionId]: {
|
|
2459
|
+
value: choices,
|
|
2460
|
+
statePath: validation?.statePath ?? '',
|
|
2461
|
+
isValid: validation?.isValid ?? true,
|
|
2462
|
+
},
|
|
2463
|
+
}));
|
|
2464
|
+
}
|
|
2465
|
+
/**
|
|
2466
|
+
* 自由記述式のアンケート回答を追加する
|
|
2467
|
+
*
|
|
2468
|
+
* @param questionId - 質問ID
|
|
2469
|
+
* @param freeAnswer - 回答内容
|
|
2470
|
+
*
|
|
2471
|
+
* @public
|
|
2472
|
+
*/
|
|
2473
|
+
function addFreeAnswer(questionId, freeAnswer, validation) {
|
|
2474
|
+
formData.update(prev => ({
|
|
2475
|
+
...prev,
|
|
2476
|
+
[questionId]: {
|
|
2477
|
+
value: freeAnswer.slice(0, MAX_LENGTH_FREE_ANSWER),
|
|
2478
|
+
statePath: validation?.statePath ?? '',
|
|
2479
|
+
isValid: validation?.isValid ?? true,
|
|
2480
|
+
},
|
|
2481
|
+
}));
|
|
2482
|
+
}
|
|
2483
|
+
/**
|
|
2484
|
+
* 回答済の回答を削除
|
|
2485
|
+
*
|
|
2486
|
+
* @param questionId - 質問ID
|
|
2487
|
+
*
|
|
2488
|
+
* @public
|
|
2489
|
+
*/
|
|
2490
|
+
function removeAnswer(questionId) {
|
|
2491
|
+
formData.update(prev => {
|
|
2492
|
+
const next = { ...prev };
|
|
2493
|
+
delete next[questionId];
|
|
2494
|
+
return next;
|
|
2495
|
+
});
|
|
2496
|
+
}
|
|
2497
|
+
/**
|
|
2498
|
+
* 回答済の回答内容を取得する
|
|
2499
|
+
*
|
|
2500
|
+
* @param questionId - 質問ID
|
|
2501
|
+
*
|
|
2502
|
+
* @returns 回答データ
|
|
2503
|
+
*
|
|
2504
|
+
* @public
|
|
2505
|
+
*/
|
|
2506
|
+
function getAnsweredQuestion(questionId) {
|
|
2507
|
+
const formData$1 = get(formData);
|
|
2508
|
+
const valueState = formData$1[questionId];
|
|
2509
|
+
if (valueState) {
|
|
2510
|
+
return createAnswerValue(valueState.value);
|
|
2511
|
+
}
|
|
2512
|
+
}
|
|
2513
|
+
/**
|
|
2514
|
+
* 回答済の回答IDのリストを取得
|
|
2515
|
+
*
|
|
2516
|
+
* @returns 回答済の質問の質問IDの配列
|
|
2517
|
+
*
|
|
2518
|
+
* @public
|
|
2519
|
+
*/
|
|
2520
|
+
function getAnsweredQuestionIds() {
|
|
2521
|
+
const formData$1 = get(formData);
|
|
2522
|
+
return Object.keys(formData$1);
|
|
2523
|
+
}
|
|
2524
|
+
/**
|
|
2525
|
+
* `sendAnswers`のエイリアス
|
|
2526
|
+
*
|
|
2527
|
+
* @public
|
|
2528
|
+
*/
|
|
2529
|
+
function sendAnswer() {
|
|
2530
|
+
return sendAnswers();
|
|
2531
|
+
}
|
|
2532
|
+
// NOTE: sendAnswers用
|
|
2533
|
+
let isSent = false;
|
|
2534
|
+
/**
|
|
2535
|
+
* 回答済の回答をまとめてイベントとして送信する
|
|
2536
|
+
*
|
|
2537
|
+
* @returns イベント送信の成功/失敗
|
|
2538
|
+
*
|
|
2539
|
+
* @public
|
|
2540
|
+
*/
|
|
2541
|
+
function sendAnswers() {
|
|
2542
|
+
const { values, identifyValues } = submit();
|
|
2543
|
+
if (isSent)
|
|
2544
|
+
return false;
|
|
2545
|
+
if (Object.keys(values ?? {}).length === 0 && Object.keys(identifyValues ?? {}).length === 0) {
|
|
2546
|
+
return false;
|
|
2547
|
+
}
|
|
2548
|
+
send_event('_answer_question', values);
|
|
2549
|
+
if (Object.keys(identifyValues ?? {}).length > 0) {
|
|
2550
|
+
send_event('identify', identifyValues);
|
|
2551
|
+
}
|
|
2552
|
+
isSent = true;
|
|
2553
|
+
return true;
|
|
2554
|
+
}
|
|
2555
|
+
|
|
2315
2556
|
/**
|
|
2316
2557
|
* エディタv1のWidget API 互換のインターフェース
|
|
2317
2558
|
*/
|
|
@@ -2937,134 +3178,6 @@ class StateItem extends SvelteComponent {
|
|
|
2937
3178
|
}
|
|
2938
3179
|
}
|
|
2939
3180
|
|
|
2940
|
-
const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
|
|
2941
|
-
function isEmpty(value) {
|
|
2942
|
-
if (Array.isArray(value)) {
|
|
2943
|
-
return value.length === 0;
|
|
2944
|
-
}
|
|
2945
|
-
else {
|
|
2946
|
-
return !value;
|
|
2947
|
-
}
|
|
2948
|
-
}
|
|
2949
|
-
/** @internal */
|
|
2950
|
-
function createInputRegisterer(formData) {
|
|
2951
|
-
const registerInput = ({ name, statePath, validator = () => true, initialValue, }) => {
|
|
2952
|
-
const writableValue = {
|
|
2953
|
-
subscribe(run) {
|
|
2954
|
-
return formData.subscribe(formData => {
|
|
2955
|
-
run(formData[name]?.value);
|
|
2956
|
-
});
|
|
2957
|
-
},
|
|
2958
|
-
set(value) {
|
|
2959
|
-
formData.update(prev => ({
|
|
2960
|
-
...prev,
|
|
2961
|
-
[name]: {
|
|
2962
|
-
statePath,
|
|
2963
|
-
value,
|
|
2964
|
-
isValid: validator(value),
|
|
2965
|
-
},
|
|
2966
|
-
}));
|
|
2967
|
-
},
|
|
2968
|
-
update(updater) {
|
|
2969
|
-
formData.update(prev => {
|
|
2970
|
-
const prevValue = prev[name]?.value;
|
|
2971
|
-
if (prevValue === undefined)
|
|
2972
|
-
return prev;
|
|
2973
|
-
const value = updater(prevValue);
|
|
2974
|
-
return {
|
|
2975
|
-
...prev,
|
|
2976
|
-
[name]: {
|
|
2977
|
-
statePath,
|
|
2978
|
-
value,
|
|
2979
|
-
isValid: validator(value),
|
|
2980
|
-
},
|
|
2981
|
-
};
|
|
2982
|
-
});
|
|
2983
|
-
},
|
|
2984
|
-
};
|
|
2985
|
-
const readableIsValid = {
|
|
2986
|
-
subscribe(run) {
|
|
2987
|
-
return formData.subscribe(formData => {
|
|
2988
|
-
run(formData[name]?.isValid);
|
|
2989
|
-
});
|
|
2990
|
-
},
|
|
2991
|
-
};
|
|
2992
|
-
if (isEmpty(get(writableValue))) {
|
|
2993
|
-
writableValue.set(initialValue);
|
|
2994
|
-
}
|
|
2995
|
-
return {
|
|
2996
|
-
value: writableValue,
|
|
2997
|
-
isValid: readableIsValid,
|
|
2998
|
-
};
|
|
2999
|
-
};
|
|
3000
|
-
return registerInput;
|
|
3001
|
-
}
|
|
3002
|
-
/** @internal */
|
|
3003
|
-
const registerInput = createInputRegisterer(formData);
|
|
3004
|
-
/** @internal */
|
|
3005
|
-
const registerIdentifyInput = createInputRegisterer(identifyFormData);
|
|
3006
|
-
function validateFormData(formData, statePath) {
|
|
3007
|
-
return Object.entries(formData)
|
|
3008
|
-
.filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
3009
|
-
.every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
3010
|
-
}
|
|
3011
|
-
/** @internal */
|
|
3012
|
-
const getValuesAreValidReadable = statePath => ({
|
|
3013
|
-
subscribe(callback) {
|
|
3014
|
-
return formData.subscribe(formData => identifyFormData.subscribe(identifyFormData => {
|
|
3015
|
-
const valuesAreValid = validateFormData(formData, statePath) && validateFormData(identifyFormData, statePath);
|
|
3016
|
-
callback(valuesAreValid);
|
|
3017
|
-
}));
|
|
3018
|
-
},
|
|
3019
|
-
});
|
|
3020
|
-
function formDataToEventValues(campaignId, formData) {
|
|
3021
|
-
const questions = [];
|
|
3022
|
-
const answersMap = {};
|
|
3023
|
-
Object.entries(formData).forEach(([name, dataItem]) => {
|
|
3024
|
-
questions.push(name);
|
|
3025
|
-
const value = dataItem.value;
|
|
3026
|
-
const answerKey = `question_${name}`;
|
|
3027
|
-
if (Array.isArray(value)) {
|
|
3028
|
-
answersMap[answerKey] = {
|
|
3029
|
-
choices: value,
|
|
3030
|
-
};
|
|
3031
|
-
}
|
|
3032
|
-
else if (typeof value === 'string') {
|
|
3033
|
-
answersMap[answerKey] = {
|
|
3034
|
-
free_answer: value,
|
|
3035
|
-
};
|
|
3036
|
-
}
|
|
3037
|
-
});
|
|
3038
|
-
return {
|
|
3039
|
-
[campaignId]: {
|
|
3040
|
-
questions,
|
|
3041
|
-
...answersMap,
|
|
3042
|
-
},
|
|
3043
|
-
};
|
|
3044
|
-
}
|
|
3045
|
-
function formDataToIdentifyEventValues(formData) {
|
|
3046
|
-
return Object.fromEntries(Object.entries(formData).map(([name, dataItem]) => {
|
|
3047
|
-
const value = dataItem.value;
|
|
3048
|
-
return [name, value];
|
|
3049
|
-
}));
|
|
3050
|
-
}
|
|
3051
|
-
/** @internal */
|
|
3052
|
-
function submit() {
|
|
3053
|
-
const systemConfig = getSystem();
|
|
3054
|
-
const campaignId = systemConfig.campaignId;
|
|
3055
|
-
if (campaignId) {
|
|
3056
|
-
const formData$1 = get(formData);
|
|
3057
|
-
const identifyFormData$1 = get(identifyFormData);
|
|
3058
|
-
const values = formDataToEventValues(campaignId, formData$1);
|
|
3059
|
-
const identifyValues = formDataToIdentifyEventValues(identifyFormData$1);
|
|
3060
|
-
if (Object.keys(identifyValues).length > 0) {
|
|
3061
|
-
identifyValues['user_id'] = getVariables()?.[USER_ID_VARIABLE_NAME];
|
|
3062
|
-
}
|
|
3063
|
-
return { values, identifyValues };
|
|
3064
|
-
}
|
|
3065
|
-
return {};
|
|
3066
|
-
}
|
|
3067
|
-
|
|
3068
3181
|
/**
|
|
3069
3182
|
* モーダル(ポップアップ)のコンポーネントが利用するコードの管理
|
|
3070
3183
|
*/
|
|
@@ -11079,4 +11192,4 @@ class ImageBlock extends SvelteComponent {
|
|
|
11079
11192
|
}
|
|
11080
11193
|
}
|
|
11081
11194
|
|
|
11082
|
-
export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, resetEventHandlers, resetVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
|
|
11195
|
+
export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
|