@useinsider/guido 3.0.0 → 3.1.0

package/dist/src/stores/template.d.ts

@@ -0,0 +1,29 @@
+import type { BlockId } from '@@/Types/extensions/block';
+export declare const useTemplateStore: import("pinia").StoreDefinition<"guidoTemplate", {
+    migrations: Partial<Record<BlockId, number>>;
+}, {
+    hasMigrations: (state: {
+        migrations: {
+            "recommendation-block"?: number | undefined;
+            "items-block"?: number | undefined;
+        };
+    } & import("pinia").PiniaCustomStateProperties<{
+        migrations: Partial<Record<BlockId, number>>;
+    }>) => boolean;
+    hasRecommendationMigrations: (state: {
+        migrations: {
+            "recommendation-block"?: number | undefined;
+            "items-block"?: number | undefined;
+        };
+    } & import("pinia").PiniaCustomStateProperties<{
+        migrations: Partial<Record<BlockId, number>>;
+    }>) => boolean;
+    hasItemsMigrations: (state: {
+        migrations: {
+            "recommendation-block"?: number | undefined;
+            "items-block"?: number | undefined;
+        };
+    } & import("pinia").PiniaCustomStateProperties<{
+        migrations: Partial<Record<BlockId, number>>;
+    }>) => boolean;
+}, {}>;

package/dist/src/utils/migrationBannerHtml.d.ts

@@ -0,0 +1,2 @@
+import type { BlockId } from '@@/Types/extensions/block';
+export declare function getMigrationBannerHtml(blockId: BlockId, blockName: string, infoText: string): string;

package/dist/static/assets/info.svg.js

@@ -0,0 +1,5 @@
+const a = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g transform="translate(3, 2.5)"><path fill="#258DDE" d="M6.878.142c3.91-.723 7.802 1.369 9.323 5.022 1.533 3.683.231 7.927-3.11 10.138a8.47 8.47 0 0 1-10.563-.983l-.067-.065A8.318 8.318 0 0 1 0 8.343V8.25C.05 4.305 2.878.927 6.787.16l.092-.018Zm7.713 5.682c-1.216-2.92-4.342-4.582-7.467-3.97-3.125.614-5.378 3.331-5.382 6.491a6.597 6.597 0 0 0 1.952 4.688 6.718 6.718 0 0 0 8.43.83 6.595 6.595 0 0 0 2.467-8.039Z"/><path fill="#258DDE" d="M12.52 13.58a.876.876 0 0 1 1.215-.017l.016.015 3.993 3.946a.86.86 0 0 1 .002 1.222.876.876 0 0 1-1.232.002l-3.992-3.946-.016-.015a.86.86 0 0 1 .014-1.206ZM6.713 5.43a.876.876 0 0 0-1.232 0 .86.86 0 0 0 0 1.221l1.232-1.222Zm1.09 3.525a.876.876 0 0 0 1.232 0 .86.86 0 0 0 0-1.222L7.804 8.955Zm1.232-1.222a.876.876 0 0 0-1.231 0 .86.86 0 0 0 0 1.222l1.231-1.222Zm1.091 3.526a.876.876 0 0 0 1.232 0 .86.86 0 0 0 0-1.222l-1.232 1.222Zm-1.09-2.304a.86.86 0 0 0 0-1.222.876.876 0 0 0-1.232 0l1.231 1.222ZM5.48 10.037a.86.86 0 0 0 0 1.222.876.876 0 0 0 1.232 0L5.48 10.037Zm2.323-2.304a.86.86 0 0 0 0 1.222.876.876 0 0 0 1.231 0L7.804 7.733Zm3.554-1.082a.86.86 0 0 0 0-1.222.876.876 0 0 0-1.232 0l1.232 1.222Zm-5.877 0 2.323 2.304 1.231-1.222L6.713 5.43 5.48 6.651Zm2.323 2.304 2.322 2.304 1.232-1.222-2.323-2.304-1.231 1.222Zm0-1.222L5.48 10.037l1.232 1.222 2.322-2.304-1.231-1.222Zm1.231 1.222 2.323-2.304-1.232-1.222-2.322 2.304 1.231 1.222Z"/></g></svg>
+`;
+export {
+  a as default
+};

package/dist/static/styles/components/wide-panel.css.js

@@ -18,6 +18,7 @@ ue-description a {
 
 .stacked-panel {
     overflow: auto;
+    padding-bottom: 16px;
 }
 
 .stacked-panel-title {

package/dist/static/styles/customEditorStyle.css.js

@@ -87,6 +87,15 @@ const n = `.esd-x,
 .ue-mobile-mode .ins-recommendation-list-layout .product-info-cell {
     padding: 5px 8px !important;
 }
+
+/* Mobile layout opt-out: when toggle is OFF, keep desktop container visible in mobile mode */
+.ue-mobile-mode .ins-recommendation-no-mobile-layout .ins-recommendation-desktop-container {
+    display: table !important;
+}
+
+.ue-mobile-mode .ins-recommendation-no-mobile-layout .ins-recommendation-mobile-container {
+    display: none !important;
+}
 `;
 export {
   n as default

package/dist/static/styles/variables.css.js

@@ -3,10 +3,13 @@ const o = `:host {
     --guido-color-primary-500: #0A2ECC;
     --guido-color-primary-200: #B5C1F1;
     --guido-color-primary-100: #DAE1FB;
+    --guido-color-primary-0: #F1F3FE;
     --guido-color-gray-800: #292929;
     --guido-color-gray-700: #989898;
     --guido-color-gray-600: #666666;
+    --guido-color-gray-500: #989898;
     --guido-color-gray-300: #E1E1E1;
+    --guido-color-gray-100: #F5F5F5;
     --guido-color-gray-1: #F0F0F0;
     --guido-color-gray-0: #F9F9F9;
     --guido-color-neutral-800: #222938;

package/dist/stores/template.js

@@ -0,0 +1,15 @@
+import { BlockId as e } from "../enums/block.js";
+import { defineStore as i } from "pinia";
+const a = i("guidoTemplate", {
+  state: () => ({
+    migrations: {}
+  }),
+  getters: {
+    hasMigrations: (t) => Object.values(t.migrations).some((o) => (o ?? 0) > 0),
+    hasRecommendationMigrations: (t) => (t.migrations[e.Recommendation] ?? 0) > 0,
+    hasItemsMigrations: (t) => (t.migrations[e.Items] ?? 0) > 0
+  }
+});
+export {
+  a as useTemplateStore
+};

package/dist/utils/migrationBannerHtml.js

@@ -0,0 +1,21 @@
+import { useTemplateStore as o } from "../stores/template.js";
+import { UIElementType as i, UEAttr as r } from "../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+function g(t, n, e) {
+  return (o().migrations[t] ?? 0) <= 0 ? "" : `<div>
+                <div style="display: flex; align-items: center;">
+                    <span>${n}</span>
+                </div>
+                <div class="${t}-migration-info">
+                    <${i.ICON}
+                        ${r.ICON.src}="migration-info-icon"
+                        class="${t}-migration-info__icon">
+                    </${i.ICON}>
+                    <p class="${t}-migration-info__text">
+                        ${e}
+                    </p>
+                </div>
+            </div>`;
+}
+export {
+  g as getMigrationBannerHtml
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -25,7 +25,8 @@
     "lint:fix": "NODE_OPTIONS=--max-old-space-size=2048 eslint --fix ./",
     "type-check": "vue-tsc --noEmit --project tsconfig.config.json && vue-tsc --noEmit --project tsconfig.app.json",
     "test:visual-update": "npx playwright test --update-snapshots --reporter html",
-    "prepare": "husky"
+    "prepare": "husky",
+    "preinstall": "rm -rf ./node_modules/.vite"
   },
   "keywords": [],
   "author": "",

package/dist/src/extensions/Blocks/Recommendation/controls/cardBackgroundColorControl.d.ts

@@ -1,25 +0,0 @@
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../../common-control';
-export declare const CARD_BACKGROUND_COLOR_CONTROL_ID = "recommendation-card-background-color-control";
-/**
- * Control for managing recommendation card background color
- * This control is displayed in the Styles tab
- */
-export declare class CardBackgroundColorControl extends CommonControl {
-    getId(): string;
-    getTemplate(): string;
-    onRender(): void;
-    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    _setFormValues(): void;
-    /**
-     * Reads the current background color from the first product card wrapper
-     * @returns The background color value or 'transparent' if not found
-     */
-    _getCurrentCardBackgroundColor(): string;
-    /**
-     * Handles card background color changes
-     * Applies the color to all product card wrapper elements
-     */
-    _onCardBackgroundColorChange(color: string): void;
-    _listenToFormUpdates(): void;
-}

package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscountTextAfterControl.d.ts

@@ -1,15 +0,0 @@
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../../common-control';
-/**
- * Control for setting text after Omnibus Discount value
- */
-export declare class OmnibusDiscountTextAfterControl extends CommonControl {
-    getId(): string;
-    getTemplate(): string;
-    onRender(): void;
-    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    _setFormValues(): void;
-    _getCurrentText(): string;
-    _onTextChange(newText: string): void;
-    _listenToFormUpdates(): void;
-}

package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscountTextBeforeControl.d.ts

@@ -1,15 +0,0 @@
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../../common-control';
-/**
- * Control for setting text before Omnibus Discount value
- */
-export declare class OmnibusDiscountTextBeforeControl extends CommonControl {
-    getId(): string;
-    getTemplate(): string;
-    onRender(): void;
-    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    _setFormValues(): void;
-    _getCurrentText(): string;
-    _onTextChange(newText: string): void;
-    _listenToFormUpdates(): void;
-}

package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPriceTextAfterControl.d.ts

@@ -1,15 +0,0 @@
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../../common-control';
-/**
- * Control for setting text after Omnibus Price value
- */
-export declare class OmnibusPriceTextAfterControl extends CommonControl {
-    getId(): string;
-    getTemplate(): string;
-    onRender(): void;
-    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    _setFormValues(): void;
-    _getCurrentText(): string;
-    _onTextChange(newText: string): void;
-    _listenToFormUpdates(): void;
-}

package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPriceTextBeforeControl.d.ts

@@ -1,15 +0,0 @@
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../../common-control';
-/**
- * Control for setting text before Omnibus Price value
- */
-export declare class OmnibusPriceTextBeforeControl extends CommonControl {
-    getId(): string;
-    getTemplate(): string;
-    onRender(): void;
-    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    _setFormValues(): void;
-    _getCurrentText(): string;
-    _onTextChange(newText: string): void;
-    _listenToFormUpdates(): void;
-}

package/dist/src/extensions/Blocks/Recommendation/controls/spacingControl.d.ts

@@ -1,60 +0,0 @@
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../../common-control';
-export declare const SPACING_CONTROL_ID = "recommendation-spacing-control";
-/**
- * Control for managing spacing between product cards
- * - Column spacing: horizontal gap between cards in the same row
- * - Row spacing: vertical gap between different rows
- */
-export declare class SpacingControl extends CommonControl {
-    getId(): string;
-    getTemplate(): string;
-    onRender(): void;
-    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    /**
-     * Reads spacing values from data attributes or returns defaults
-     */
-    _setFormValues(): void;
-    /**
-     * Gets stored column spacing from the first product card wrapper's parent element's padding
-     * Reads the actual padding value instead of relying on data attributes
-     *
-     * The padding is applied as "0 {halfSpacing}px" on the parent TD element,
-     * so we need to extract the horizontal padding value and multiply by 2 to get total spacing.
-     */
-    _getStoredColumnSpacing(): number;
-    /**
-     * Gets stored row spacing from the first spacer element's height style
-     * Reads the actual height value instead of relying on data attributes
-     */
-    _getStoredRowSpacing(): number;
-    /**
-     * Handles column spacing changes
-     * Applies horizontal padding to all product card wrappers
-     */
-    _onColumnSpacingChange(spacing: number): void;
-    /**
-     * Handles row spacing changes
-     * Applies height to all spacer elements between product rows
-     */
-    _onRowSpacingChange(spacing: number): void;
-    /**
-     * Stores column spacing value in block data attribute
-     */
-    _storeColumnSpacing(spacing: number): void;
-    /**
-     * Stores row spacing value in block data attribute
-     */
-    _storeRowSpacing(spacing: number): void;
-    _listenToFormUpdates(): void;
-    /**
-     * Debounced version of _onColumnSpacingChange
-     * Prevents excessive DOM updates when user rapidly adjusts the counter
-     */
-    _debouncedOnColumnSpacingChange: import("@vueuse/shared").PromisifyFn<(spacing: number) => void>;
-    /**
-     * Debounced version of _onRowSpacingChange
-     * Prevents excessive DOM updates when user rapidly adjusts the counter
-     */
-    _debouncedOnRowSpacingChange: import("@vueuse/shared").PromisifyFn<(spacing: number) => void>;
-}