@plaidev/karte-action-sdk 1.1.264-29046374.a006e69f → 1.1.264-29052187.465265af

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

@@ -5181,6 +5181,27 @@ const ICON_SIZE_STYLES = {
     },
 };
 
+const IMAGE_ROUND_STYLES = {
+    square: {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+    },
+    rounded: {
+        borderTopLeftRadius: '0.4em',
+        borderTopRightRadius: '0.4em',
+        borderBottomLeftRadius: '0.4em',
+        borderBottomRightRadius: '0.4em',
+    },
+    circle: {
+        borderTopLeftRadius: '0.8em',
+        borderTopRightRadius: '0.8em',
+        borderBottomLeftRadius: '0.8em',
+        borderBottomRightRadius: '0.8em',
+    },
+};
+
 var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
 
 const $$css$g = {
@@ -5199,15 +5220,6 @@ function Image($$anchor, $$props) {
 	useInjectCustomizeCss(props());
 
 	const { attributes, element, handleClick } = useClickable(props());
-
-	const VARIANTS = {
-		shape: {
-			circle: { borderRadius: '0.8em' },
-			square: { borderRadius: 'none' },
-			rounded: { borderRadius: '0.4em' }
-		}
-	};
-
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
 
 	$.legacy_pre_effect(
@@ -5217,8 +5229,9 @@ function Image($$anchor, $$props) {
 		),
 		() => {
 			$.set(style, objToStyle({
-				...VARIANTS.shape[props().shape ?? 'square'],
+				...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
 				width: props().width ?? '100%',
+				height: props().height ?? 'auto',
 				aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
 				...toCssCommon(props()),
 				...toCssBorder(props())
@@ -5264,9 +5277,9 @@ function Image($$anchor, $$props) {
 }
 
 const IMAGE_ROUND_SHAPE = {
-    circle: 'サークル',
+    circle: 'ラウンド / ミディアム',
+    rounded: 'ラウンド / スモール',
     square: 'スクエア',
-    rounded: 'ラウンド',
 };
 const IMAGE_ASPECT_VARIANTS = {
     '1/1': '1 : 1',
@@ -5444,8 +5457,6 @@ function Slider($$anchor, $$props) {
 	};
 
 	const handleClick = (e) => {
-		console.log('handleClick', isDragging);
-
 		if (isDragging) {
 			e.preventDefault();
 			e.stopPropagation();
@@ -5470,6 +5481,7 @@ function Slider($$anchor, $$props) {
 		$.set(movedX, null);
 		document.removeEventListener('touchmove', handleTouchmove);
 		document.removeEventListener('touchend', handleTouchend);
+		document.removeEventListener('click', handleClick);
 	};
 
 	const handleTouchstart = (e) => {
@@ -5489,8 +5501,6 @@ function Slider($$anchor, $$props) {
 	};
 
 	const handleMouseup = (e) => {
-		console.log('handleMouseup');
-
 		if ($.get(movedX) >= 32) {
 			toNext();
 		} else if ($.get(movedX) <= -32) {
@@ -6286,11 +6296,13 @@ 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);
 	let elasticity = $.prop($$props, 'elasticity', 8);
 	let animation = $.prop($$props, 'animation', 8, 'none');
+	let props = $.prop($$props, 'props', 24, () => ({}));
 	let closeEventName = $.prop($$props, 'closeEventName', 8, '');
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
@@ -6570,6 +6582,24 @@ 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();
 
@@ -6668,7 +6698,10 @@ function Modal($$anchor, $$props) {
 						'modal',
 						useBreakPoint() ? 'modal-bp' : ''
 					].join(' ')),
-					() => Array.from(modalStyles).join(';')
+					() => [
+						Array.from(modalStyles).join(';'),
+						$.get(style)
+					].join(' ')
 				],
 				$.derived_safe_equal
 			);
@@ -6757,95 +6790,23 @@ function Code($$anchor, $$props) {
 
 const LIST_ITEM_CONTEXT_KEY = 'ListItemContext';
 
-var root$7 = $.template(`<ul class="list svelte-v2vy6p"><!></ul>`);
+var root$7 = $.template(`<li class="list-item svelte-1223veg"><!></li>`);
 
 const $$css$6 = {
-	hash: 'svelte-v2vy6p',
-	code: '.list.svelte-v2vy6p {padding:0;margin:0;list-style:none;display:flex;flex-direction:column;--border-width: 0;--border-style: solit;--border-color: rgba(255, 255, 255, 0);border-top-width:var(--border-width);border-top-style:var(--border-style);border-top-color:var(--border-color);border-bottom-width:var(--border-width);border-bottom-style:var(--border-style);border-bottom-color:var(--border-color);}'
-};
-
-function List($$anchor, $$props) {
-	$.push($$props, false);
-	$.append_styles($$anchor, $$css$6);
-
-	const variables = $.mutable_state();
-	const style = $.mutable_state();
-	let layerId = $.prop($$props, 'layerId', 8);
-	let props = $.prop($$props, 'props', 8);
-
-	useInjectCustomizeCss(props());
-
-	setContext(LIST_ITEM_CONTEXT_KEY, {
-		paddingTop: props().itemPaddingTop,
-		paddingLeft: props().itemPaddingLeft,
-		paddingRight: props().itemPaddingRight,
-		paddingBottom: props().itemPaddingBottom,
-		height: props().itemHeight,
-		borderTopWidth: props().borderWidth,
-		borderTopColor: props().borderColor,
-		borderTopStyle: props().borderStyle,
-		gap: props().itemGap
-	});
-
-	$.legacy_pre_effect(() => ($.deep_read_state(props())), () => {
-		$.set(variables, {
-			...props().borderWidth
-				? {
-					'--border-width': props().borderWidth,
-					'--border-color': props().borderColor,
-					'--border-style': props().borderStyle ?? 'solid'
-				}
-				: {}
-		});
-	});
-
-	$.legacy_pre_effect(
-		() => (
-			$.deep_read_state(props()),
-			$.get(variables)
-		),
-		() => {
-			$.set(style, objToStyle({
-				width: props().width ?? '100%',
-				...$.get(variables)
-			}));
-		}
-	);
-
-	$.legacy_pre_effect_reset();
-	$.init();
-
-	var ul = root$7();
-	var node = $.child(ul);
-
-	$.slot(node, $$props, 'default', {}, null);
-	$.reset(ul);
-
-	$.template_effect(() => {
-		$.set_attribute(ul, 'data-layer-id', layerId());
-		$.set_style(ul, $.get(style));
-	});
-
-	$.append($$anchor, ul);
-	$.pop();
-}
-
-var root$6 = $.template(`<li class="list-item svelte-1223veg"><!></li>`);
-
-const $$css$5 = {
 	hash: 'svelte-1223veg',
 	code: '.list-item.svelte-1223veg {margin:0;padding:0;}.list-item-inner.svelte-1223veg {display:flex;align-items:center;width:100%;text-decoration:none;color:inherit;}.list-item-inner.svelte-1223veg:hover {opacity:0.8;}.list-item.svelte-1223veg:not(:first-child) {border-top-width:var(--list-item-border-width);border-top-style:var(--list-item-border-style);border-top-color:var(--list-item-border-color);}'
 };
 
 function ListItem($$anchor, $$props) {
 	$.push($$props, false);
-	$.append_styles($$anchor, $$css$5);
+	$.append_styles($$anchor, $$css$6);
 
 	const variables = $.mutable_state();
 	const style = $.mutable_state();
 	const innerStyle = $.mutable_state();
 	let layerId = $.prop($$props, 'layerId', 8);
 	let props = $.prop($$props, 'props', 8);
+	$.prop($$props, 'item', 8);
 
 	useInjectCustomizeCss(props());
 
@@ -6881,7 +6842,7 @@ function ListItem($$anchor, $$props) {
 	$.legacy_pre_effect_reset();
 	$.init();
 
-	var li = root$6();
+	var li = root$7();
 	var node = $.child(li);
 
 	$.element(node, () => element, false, ($$element, $$anchor) => {
@@ -6918,6 +6879,95 @@ function ListItem($$anchor, $$props) {
 	$.pop();
 }
 
+var root$6 = $.template(`<ul class="list svelte-v2vy6p"><!></ul>`);
+
+const $$css$5 = {
+	hash: 'svelte-v2vy6p',
+	code: '.list.svelte-v2vy6p {padding:0;margin:0;list-style:none;display:flex;flex-direction:column;--border-width: 0;--border-style: solit;--border-color: rgba(255, 255, 255, 0);border-top-width:var(--border-width);border-top-style:var(--border-style);border-top-color:var(--border-color);border-bottom-width:var(--border-width);border-bottom-style:var(--border-style);border-bottom-color:var(--border-color);}'
+};
+
+function List($$anchor, $$props) {
+	$.push($$props, false);
+	$.append_styles($$anchor, $$css$5);
+
+	const variables = $.mutable_state();
+	const actionTableData = $.mutable_state();
+	const items = $.mutable_state();
+	const style = $.mutable_state();
+	let layerId = $.prop($$props, 'layerId', 8);
+	let props = $.prop($$props, 'props', 8);
+
+	useInjectCustomizeCss(props());
+
+	const vars = getVariables();
+
+	console.log(vars);
+	console.log(props().actionTableKey);
+	console.log(vars[props().actionTableKey]);
+
+	setContext(LIST_ITEM_CONTEXT_KEY, {
+		paddingTop: props().itemPaddingTop,
+		paddingLeft: props().itemPaddingLeft,
+		paddingRight: props().itemPaddingRight,
+		paddingBottom: props().itemPaddingBottom,
+		height: props().itemHeight,
+		borderTopWidth: props().borderWidth,
+		borderTopColor: props().borderColor,
+		borderTopStyle: props().borderStyle,
+		gap: props().itemGap
+	});
+
+	$.legacy_pre_effect(() => ($.deep_read_state(props())), () => {
+		$.set(variables, {
+			...props().borderWidth
+				? {
+					'--border-width': props().borderWidth,
+					'--border-color': props().borderColor,
+					'--border-style': props().borderStyle ?? 'solid'
+				}
+				: {}
+		});
+	});
+
+	$.legacy_pre_effect(() => ($.deep_read_state(props())), () => {
+		$.set(actionTableData, vars[props().actionTableKey]);
+	});
+
+	$.legacy_pre_effect(() => ($.get(actionTableData)), () => {
+		$.set(items, Array.isArray($.get(actionTableData)) ? $.get(actionTableData) : null);
+	});
+
+	$.legacy_pre_effect(
+		() => (
+			$.deep_read_state(props()),
+			$.get(variables)
+		),
+		() => {
+			$.set(style, objToStyle({
+				width: props().width ?? '100%',
+				...$.get(variables)
+			}));
+		}
+	);
+
+	$.legacy_pre_effect_reset();
+	$.init();
+
+	var ul = root$6();
+	var node = $.child(ul);
+
+	$.slot(node, $$props, 'default', {}, null);
+	$.reset(ul);
+
+	$.template_effect(() => {
+		$.set_attribute(ul, 'data-layer-id', layerId());
+		$.set_style(ul, $.get(style));
+	});
+
+	$.append($$anchor, ul);
+	$.pop();
+}
+
 const MULTI_COLUMN_ITEM_CONTEXT_KEY = 'MultiColumnItemContext';
 
 function splitNumberAndUnit(value) {
@@ -7039,8 +7089,6 @@ function MultiColumnItem($$anchor, $$props) {
 	const { attributes, element, handleClick } = useClickable(props());
 	const context = getContext(MULTI_COLUMN_ITEM_CONTEXT_KEY) || {};
 
-	console.log(context);
-
 	$.legacy_pre_effect(() => {}, () => {
 		$.set(variables, {
 			'--multi-column-item-padding-top': context.paddingTop ?? '0',
@@ -7274,12 +7322,6 @@ function CountDown($$anchor, $$props) {
 	}
 
 	function onEachSecond() {
-		console.log({
-			timeLimit: timeLimit.getTime(),
-			now: new Date().getTime(),
-			calced: calcRemainingTime(timeLimit.getTime())
-		});
-
 		const _remainingTime = calcRemainingTime(timeLimit.getTime());
 
 		if (_remainingTime > 0) {
@@ -7291,8 +7333,6 @@ function CountDown($$anchor, $$props) {
 				execOnClickOperation(props().onEnd);
 			}
 		}
-
-		console.log($.get(remainingTime));
 	}
 
 	onMount$1(() => {
@@ -7443,13 +7483,8 @@ function CountDownValue($$anchor, $$props) {
 	let props = $.prop($$props, 'props', 24, () => ({}));
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	let countdownStore = getContext('countdownStore');
-
-	console.log(countdownStore);
-
 	let { style } = useText(props());
 
-	console.log($.get(value));
-
 	$.legacy_pre_effect(
 		() => (
 			$countdownStore(),
@@ -7524,7 +7559,6 @@ function ClipCopy($$anchor, $$props) {
 
 		const targetText = props().content ?? $.get(buttonElement)?.innerText ?? '';
 
-		console.log(targetText);
 		navigator.clipboard.writeText(targetText);
 		send_event('_click_copy', { text: targetText });
 
@@ -7692,6 +7726,7 @@ var sdk = /*#__PURE__*/Object.freeze({
   ICON_VARIANTS: ICON_VARIANTS,
   IMAGE_ASPECT_VARIANTS: IMAGE_ASPECT_VARIANTS,
   IMAGE_ROUND_SHAPE: IMAGE_ROUND_SHAPE,
+  IMAGE_ROUND_STYLES: IMAGE_ROUND_STYLES,
   Justifies: Justifies,
   KARTE_MODAL_ROOT: KARTE_MODAL_ROOT,
   LAYER_TEXT_SIZE: LAYER_TEXT_SIZE,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.264-29046374.a006e69f",
+  "version": "1.1.264-29052187.465265af",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",