@plaidev/karte-action-sdk 1.1.266 → 1.1.267-29071859.db1ade43

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.
@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
39
39
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
40
40
  /** @internal */
41
41
  const isPreview = () => {
42
- return false;
42
+ return !isOnSite() ;
43
43
  };
44
+ const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
45
+ const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
44
46
  /** @internal */
45
47
  const setPreviousFocus = () => {
46
48
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -758,6 +760,8 @@ const state = writable('/');
758
760
  * @public
759
761
  */
760
762
  function setState$1(stateId, options) {
763
+ if (isPreview() && options?.disableInPreview)
764
+ return;
761
765
  state.set(stateId);
762
766
  }
763
767
  /**
@@ -1168,7 +1172,9 @@ function cloneToJson(data) {
1168
1172
 
1169
1173
  // prettier-ignore
1170
1174
  /** @internal */
1171
- const actionId = typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
1175
+ const actionId = isPreview()
1176
+ ? ALL_ACTION_ID
1177
+ : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
1172
1178
  ? __FLYER_GEN_ACTION_ID_ON_BUILD__
1173
1179
  : randStr();
1174
1180
  /** @internal */
@@ -1576,7 +1582,9 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
1576
1582
  /** @internal */
1577
1583
  const loadActionTable = async (config, data, api_key, collection_endpoint) => {
1578
1584
  console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
1579
- const results = await Promise.all(config
1585
+ const results = isPreview()
1586
+ ? config.map(c => c.preview_value)
1587
+ : await Promise.all(config
1580
1588
  .filter(c => c.resolver === 'action-table-row' ||
1581
1589
  c.resolver === 'action-table-rows' ||
1582
1590
  c.resolver === 'action-table-query')
@@ -2906,7 +2914,10 @@ function Header($$anchor, $$props) {
2906
2914
  $fonts()
2907
2915
  ),
2908
2916
  () => {
2909
- if ($fonts().length > 0) {
2917
+ if (isPreview()) {
2918
+ // フォントのロードが遅れてエディタのプレビューがガタつく対策
2919
+ $.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
2920
+ } else if ($fonts().length > 0) {
2910
2921
  $.set(googleFontUrl, makeGoogleFontUrl($fonts()));
2911
2922
  }
2912
2923
  }
@@ -3477,6 +3488,9 @@ const EASING = {
3477
3488
  * @internal
3478
3489
  */
3479
3490
  function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3491
+ if (isPreview()) {
3492
+ return {};
3493
+ }
3480
3494
  let [x, y] = [0, 0];
3481
3495
  for (const { query, x: tx, y: ty } of transforms) {
3482
3496
  if (query == null || window.matchMedia(query).matches) {
@@ -5251,11 +5265,11 @@ const IMAGE_ROUND_STYLES = {
5251
5265
  },
5252
5266
  };
5253
5267
 
5254
- var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
5268
+ var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
5255
5269
 
5256
5270
  const $$css$g = {
5257
- hash: 'svelte-gzaieg',
5258
- code: '.image.svelte-gzaieg {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.image-img.svelte-gzaieg {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
5271
+ hash: 'svelte-rewdem',
5272
+ code: '.image.svelte-rewdem {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;}.image-img.svelte-rewdem {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
5259
5273
  };
5260
5274
 
5261
5275
  function Image($$anchor, $$props) {
@@ -5270,6 +5284,7 @@ function Image($$anchor, $$props) {
5270
5284
 
5271
5285
  const { attributes, element, handleClick } = useClickable(props());
5272
5286
  const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
5287
+ const width = props().width ?? '100%';
5273
5288
 
5274
5289
  $.legacy_pre_effect(
5275
5290
  () => (
@@ -5279,7 +5294,8 @@ function Image($$anchor, $$props) {
5279
5294
  () => {
5280
5295
  $.set(style, objToStyle({
5281
5296
  ...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
5282
- width: props().width ?? '100%',
5297
+ width,
5298
+ flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
5283
5299
  height: props().height ?? 'auto',
5284
5300
  aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
5285
5301
  ...toCssCommon(props()),
@@ -5306,7 +5322,7 @@ function Image($$anchor, $$props) {
5306
5322
  style: $.get(style),
5307
5323
  'data-layer-id': layerId()
5308
5324
  },
5309
- 'svelte-gzaieg'
5325
+ 'svelte-rewdem'
5310
5326
  ));
5311
5327
 
5312
5328
  $.event('click', $$element, handleClick);
@@ -6345,7 +6361,6 @@ function Modal($$anchor, $$props) {
6345
6361
  const backgroundClickSP = $.mutable_state();
6346
6362
  const handle_keydown = $.mutable_state();
6347
6363
  const visible = $.mutable_state();
6348
- const style = $.mutable_state();
6349
6364
  let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
6350
6365
  let placement = $.prop($$props, 'placement', 8);
6351
6366
  let breakPoint = $.prop($$props, 'breakPoint', 8);
@@ -6356,8 +6371,6 @@ function Modal($$anchor, $$props) {
6356
6371
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6357
6372
  let layerId = $.prop($$props, 'layerId', 8, '');
6358
6373
  const { brandKit } = useBrandKit();
6359
- // falseが明示的に指定されている場合以外はtrueにする
6360
- const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
6361
6374
  // モーダル背景の設定
6362
6375
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6363
6376
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6403,7 +6416,7 @@ function Modal($$anchor, $$props) {
6403
6416
  $.deep_read_state(breakPoint())
6404
6417
  ),
6405
6418
  () => {
6406
- if (isOnSite && isExistBackgroundOverlayValue) {
6419
+ if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
6407
6420
  $.set(backgroundOverlay, placement().backgroundOverlay);
6408
6421
  }
6409
6422
 
@@ -6509,7 +6522,7 @@ function Modal($$anchor, $$props) {
6509
6522
  // 表示位置のスタイルの設定
6510
6523
  let position = DefaultModalPlacement.position;
6511
6524
 
6512
- if (isOnSite && placement() && placement().position !== null) {
6525
+ if (!isCanvasPreview() && placement() && placement().position !== null) {
6513
6526
  position = placement().position;
6514
6527
  }
6515
6528
 
@@ -6526,7 +6539,7 @@ function Modal($$anchor, $$props) {
6526
6539
  $.set(transforms, []);
6527
6540
 
6528
6541
  DEVICE_IDS.forEach((deviceId) => {
6529
- if (isOnSite && useBreakPoint()) {
6542
+ if (!isCanvasPreview() && useBreakPoint()) {
6530
6543
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6531
6544
 
6532
6545
  $.get(transforms).push({
@@ -6556,12 +6569,13 @@ function Modal($$anchor, $$props) {
6556
6569
  $.deep_read_state(placement()),
6557
6570
  $.deep_read_state(useBreakPoint()),
6558
6571
  $.deep_read_state(breakPoint()),
6559
- parseStyle
6572
+ $.deep_read_state(props()),
6573
+ toCssBorder
6560
6574
  ),
6561
6575
  () => {
6562
6576
  let margin = DefaultModalPlacement.margin;
6563
6577
 
6564
- if (isOnSite && placement() && placement().margin !== null) {
6578
+ if (!isCanvasPreview() && placement() && placement().margin !== null) {
6565
6579
  margin = placement().margin;
6566
6580
  }
6567
6581
 
@@ -6572,7 +6586,7 @@ function Modal($$anchor, $$props) {
6572
6586
  }
6573
6587
 
6574
6588
  DEVICE_IDS.forEach((deviceId) => {
6575
- if (isOnSite && useBreakPoint()) {
6589
+ if (!isCanvasPreview() && useBreakPoint()) {
6576
6590
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6577
6591
 
6578
6592
  marginStyle = getMarginStyle(marginWithBp);
@@ -6586,6 +6600,18 @@ function Modal($$anchor, $$props) {
6586
6600
 
6587
6601
  modalStyles.add(marginVariables);
6588
6602
  });
6603
+
6604
+ const propsStyle = objToStyle({
6605
+ width: props().width,
6606
+ ...toCssOverflow(props()),
6607
+ ...toCssShadow(props()),
6608
+ ...toCssRadius(props()),
6609
+ ...toCssBackgroundImage(props()),
6610
+ ...toCssBackgroundColor(props()),
6611
+ ...toCssBorder(props())
6612
+ });
6613
+
6614
+ modalStyles.add(propsStyle);
6589
6615
  }
6590
6616
  );
6591
6617
 
@@ -6601,24 +6627,6 @@ function Modal($$anchor, $$props) {
6601
6627
  $.set(visible, false);
6602
6628
  });
6603
6629
 
6604
- $.legacy_pre_effect(
6605
- () => (
6606
- $.deep_read_state(props()),
6607
- toCssBorder
6608
- ),
6609
- () => {
6610
- $.set(style, objToStyle({
6611
- width: props().width,
6612
- ...toCssOverflow(props()),
6613
- ...toCssShadow(props()),
6614
- ...toCssRadius(props()),
6615
- ...toCssBackgroundImage(props()),
6616
- ...toCssBackgroundColor(props()),
6617
- ...toCssBorder(props())
6618
- }));
6619
- }
6620
- );
6621
-
6622
6630
  $.legacy_pre_effect_reset();
6623
6631
  $.init();
6624
6632
 
@@ -6692,7 +6700,7 @@ function Modal($$anchor, $$props) {
6692
6700
  };
6693
6701
 
6694
6702
  $.if(node, ($$render) => {
6695
- if (!isOnSite) $$render(consequent); else $$render(alternate, false);
6703
+ if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
6696
6704
  });
6697
6705
  }
6698
6706
 
@@ -6718,10 +6726,7 @@ function Modal($$anchor, $$props) {
6718
6726
  'modal',
6719
6727
  useBreakPoint() ? 'modal-bp' : ''
6720
6728
  ].join(' ')),
6721
- () => [
6722
- Array.from(modalStyles).join(';'),
6723
- $.get(style)
6724
- ].join(' ')
6729
+ () => Array.from(modalStyles).join(';')
6725
6730
  ],
6726
6731
  $.derived_safe_equal
6727
6732
  );
@@ -8052,8 +8057,6 @@ function ThumbnailPreview($$anchor, $$props) {
8052
8057
  let option = $.prop($$props, 'option', 24, () => ({}));
8053
8058
  let customBrandKit = $.prop($$props, 'customBrandKit', 8, undefined);
8054
8059
 
8055
- console.log('option', option());
8056
-
8057
8060
  const getComponent = (key) => {
8058
8061
  return key in sdk ? sdk[key] : null;
8059
8062
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.266",
3
+ "version": "1.1.267-29071859.db1ade43",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",