@plaidev/karte-action-sdk 1.1.266 → 1.1.267-29071733.fabf64a6

package/dist/svelte5/index.front2.es.js

@@ -3467,7 +3467,7 @@ const EASING = {
     none: linear,
 };
 /**
- * The function to activate svelte animation.
+ * The function to activate svelte animation v2.
  *
  * @param node - A target node of animation. This argument is passed by svelte, by default.
  * @param customAnimationOptions - A custom animation option object
@@ -3476,7 +3476,10 @@ const EASING = {
  *
  * @internal
  */
-function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
+function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
+    if (disabled) {
+        return {};
+    }
     let [x, y] = [0, 0];
     for (const { query, x: tx, y: ty } of transforms) {
         if (query == null || window.matchMedia(query).matches) {
@@ -5251,11 +5254,11 @@ const IMAGE_ROUND_STYLES = {
     },
 };
 
-var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
+var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
 
 const $$css$g = {
-	hash: 'svelte-gzaieg',
-	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;}'
+	hash: 'svelte-rewdem',
+	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;}'
 };
 
 function Image($$anchor, $$props) {
@@ -5270,6 +5273,7 @@ function Image($$anchor, $$props) {
 
 	const { attributes, element, handleClick } = useClickable(props());
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
+	const width = props().width ?? '100%';
 
 	$.legacy_pre_effect(
 		() => (
@@ -5279,7 +5283,8 @@ function Image($$anchor, $$props) {
 		() => {
 			$.set(style, objToStyle({
 				...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
-				width: props().width ?? '100%',
+				width,
+				flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
 				height: props().height ?? 'auto',
 				aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
 				...toCssCommon(props()),
@@ -5306,7 +5311,7 @@ function Image($$anchor, $$props) {
 				style: $.get(style),
 				'data-layer-id': layerId()
 			},
-			'svelte-gzaieg'
+			'svelte-rewdem'
 		));
 
 		$.event('click', $$element, handleClick);
@@ -6345,7 +6350,6 @@ function Modal($$anchor, $$props) {
 	const backgroundClickSP = $.mutable_state();
 	const handle_keydown = $.mutable_state();
 	const visible = $.mutable_state();
-	const style = $.mutable_state();
 	let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
 	let placement = $.prop($$props, 'placement', 8);
 	let breakPoint = $.prop($$props, 'breakPoint', 8);
@@ -6356,8 +6360,11 @@ function Modal($$anchor, $$props) {
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
-	// falseが明示的に指定されている場合以外はtrueにする
-	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
+	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+
+	console.log('isOnSite', isOnSite);
+
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6403,7 +6410,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (isOnSite && isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6509,7 +6516,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (isOnSite && placement() && placement().position !== null) {
+			if (!isCanvasPreview && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6526,7 +6533,7 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (isOnSite && useBreakPoint()) {
+				if (!isCanvasPreview && useBreakPoint()) {
 					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
 
 					$.get(transforms).push({
@@ -6556,12 +6563,13 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(placement()),
 			$.deep_read_state(useBreakPoint()),
 			$.deep_read_state(breakPoint()),
-			parseStyle
+			$.deep_read_state(props()),
+			toCssBorder
 		),
 		() => {
 			let margin = DefaultModalPlacement.margin;
 
-			if (isOnSite && placement() && placement().margin !== null) {
+			if (!isCanvasPreview && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6572,7 +6580,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (isOnSite && useBreakPoint()) {
+				if (!isCanvasPreview && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6586,6 +6594,18 @@ function Modal($$anchor, $$props) {
 
 				modalStyles.add(marginVariables);
 			});
+
+			const propsStyle = objToStyle({
+				width: props().width,
+				...toCssOverflow(props()),
+				...toCssShadow(props()),
+				...toCssRadius(props()),
+				...toCssBackgroundImage(props()),
+				...toCssBackgroundColor(props()),
+				...toCssBorder(props())
+			});
+
+			modalStyles.add(propsStyle);
 		}
 	);
 
@@ -6601,24 +6621,6 @@ function Modal($$anchor, $$props) {
 		$.set(visible, false);
 	});
 
-	$.legacy_pre_effect(
-		() => (
-			$.deep_read_state(props()),
-			toCssBorder
-		),
-		() => {
-			$.set(style, objToStyle({
-				width: props().width,
-				...toCssOverflow(props()),
-				...toCssShadow(props()),
-				...toCssRadius(props()),
-				...toCssBackgroundImage(props()),
-				...toCssBackgroundColor(props()),
-				...toCssBorder(props())
-			}));
-		}
-	);
-
 	$.legacy_pre_effect_reset();
 	$.init();
 
@@ -6692,7 +6694,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			if (!isOnSite) $$render(consequent); else $$render(alternate, false);
+			if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
 		});
 	}
 
@@ -6718,17 +6720,15 @@ function Modal($$anchor, $$props) {
 						'modal',
 						useBreakPoint() ? 'modal-bp' : ''
 					].join(' ')),
-					() => [
-						Array.from(modalStyles).join(';'),
-						$.get(style)
-					].join(' ')
+					() => Array.from(modalStyles).join(';')
 				],
 				$.derived_safe_equal
 			);
 
-			$.transition(1, div, () => customAnimation, () => ({
+			$.transition(1, div, () => customAnimationV2, () => ({
 				transforms: $.get(transforms),
-				animationStyle: animation()
+				animationStyle: animation(),
+				disabled: !isOnSite
 			}));
 
 			$.append($$anchor, div);
@@ -8052,8 +8052,6 @@ function ThumbnailPreview($$anchor, $$props) {
 	let option = $.prop($$props, 'option', 24, () => ({}));
 	let customBrandKit = $.prop($$props, 'customBrandKit', 8, undefined);
 
-	console.log('option', option());
-
 	const getComponent = (key) => {
 		return key in sdk ? sdk[key] : null;
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.266",
+  "version": "1.1.267-29071733.fabf64a6",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",