@nascentdigital/funnel-editor 4.4.18 → 4.4.20

package/dist/core/components/fields/FieldCardLayout.d.ts

@@ -1,11 +1,12 @@
 import { Callback, Field, ObjectField } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
-export declare function FieldCardLayout({ className, tip, field, deletable, embedded, selecting, onDelete, onEditing, onActiveChanged, children }: FieldCardLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare function FieldCardLayout({ className, tip, field, empty, deletable, embedded, selecting, onDelete, onEditing, onActiveChanged, children }: FieldCardLayout.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace FieldCardLayout {
     type Props = {
         className?: string;
         tip?: string;
         field: Field | ObjectField;
+        empty?: boolean;
         deletable?: boolean;
         embedded?: boolean;
         selecting?: boolean;

package/dist/core/components/fields/FieldCardLayout.js

@@ -13,7 +13,7 @@ const hooks_1 = require("../../hooks");
 const factories_1 = require("./factories");
 const FieldHeader_1 = require("./FieldHeader");
 // component
-function FieldCardLayout({ className, tip, field, deletable = false, embedded = false, selecting = false, onDelete = funnel_core_1.Fn.NoOp, onEditing = funnel_core_1.Fn.NoOp, onActiveChanged = funnel_core_1.Fn.NoOp, children }) {
+function FieldCardLayout({ className, tip, field, empty, deletable = false, embedded = false, selecting = false, onDelete = funnel_core_1.Fn.NoOp, onEditing = funnel_core_1.Fn.NoOp, onActiveChanged = funnel_core_1.Fn.NoOp, children }) {
     // bind props + state
     const { schema } = field;
     const [hovering, setHovering] = (0, react_1.useState)(false);
@@ -57,7 +57,8 @@ function FieldCardLayout({ className, tip, field, deletable = false, embedded =
                         (0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { className: "w-full", label: schema.name, tip: tip !== null && tip !== void 0 ? tip : schema.description, active: active, onDelete: deletable
                                 ? () => onDelete(field)
                                 : undefined }), (0, jsx_runtime_1.jsx)("div", { ref: rootElementRef, className: (0, classnames_1.default)('FieldCard h-[170px]', {
-                            'pointer-events-none': selecting
+                            'pointer-events-none': selecting,
+                            'FieldCard-empty': empty !== null && empty !== void 0 ? empty : !field.hasValue
                         }), onClick: selecting ? undefined : onEdit, onKeyDown: selecting ? undefined : client_1.OnKey.enter(onEdit), tabIndex: selecting ? -1 : 0, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: children })] }), editing && rootElement &&
                 (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, field: field, anchor: rootElement, onCommit: onEdited, onCancel: onCancel })] }));
 }

package/dist/core/components/fields/asset/AssetPreview.js

@@ -1,15 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetPreview = AssetPreview;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
 const feedback_1 = require("../../feedback");
+const visuals_1 = require("../../visuals");
 const preview_1 = require("./preview");
 // component
 function AssetPreview({ className, asset, active = false }) {
     // render empty content
     if (!asset) {
-        return ((0, jsx_runtime_1.jsx)(feedback_1.Note, { className: className, variant: "error", children: "File missing" }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'h-full flex flex-col justify-center items-center gap-l5'), children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-tertiary", variant: "Image", size: "card" }), (0, jsx_runtime_1.jsx)("p", { className: "label text-content-secondary", children: "Select Asset" })] }));
     }
     // render image
     else if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {

package/dist/core/components/fields/collection/CollectionCard.js

@@ -18,6 +18,7 @@ const funnel_ui_1 = require("@nascentdigital/funnel-ui");
 const hooks_1 = require("../../../hooks");
 const feedback_1 = require("../../feedback");
 const interaction_1 = require("../../interaction");
+const visuals_1 = require("../../visuals");
 const FieldCardLayout_1 = require("../FieldCardLayout");
 const previews_1 = require("./previews");
 // component
@@ -31,10 +32,14 @@ function CollectionCard(_a) {
     const collection = (0, hooks_1.useCollectionData)({ schema: collectionSchema, value });
     // sync field
     (0, hooks_1.useField)(field);
-    // render loader
+    // render empty state
     let content;
-    if (!collection) {
-        content = ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "sm" }), (0, jsx_runtime_1.jsx)("span", { className: "body-sm text-content-secondary", children: "Loading..." })] }));
+    if (!value) {
+        content = ((0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col justify-center items-center gap-l5", children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-tertiary", variant: "LayoutTemplate", size: "card" }), (0, jsx_runtime_1.jsxs)("p", { className: "label text-content-secondary", children: ["Select ", schema.name] })] }));
+    }
+    // or loader
+    else if (!collection) {
+        content = ((0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "sm" }), (0, jsx_runtime_1.jsx)("span", { className: "body-sm text-content-secondary", children: "Loading..." })] }));
     }
     // or handle error
     else if (collection instanceof funnel_core_1.IsometricError) {

package/dist/core/components/fields/object/ObjectCard.js

@@ -15,6 +15,7 @@ exports.ObjectCard = ObjectCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const hooks_1 = require("../../../hooks");
+const visuals_1 = require("../../visuals");
 const FieldCardLayout_1 = require("../FieldCardLayout");
 // component
 function ObjectCard(_a) {
@@ -27,7 +28,7 @@ function ObjectCard(_a) {
     // render error if no value
     let content;
     if (!value) {
-        content = renderError('Missing!');
+        content = ((0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col justify-center items-center gap-l5", children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-tertiary", variant: "LayoutTemplate", size: "card" }), (0, jsx_runtime_1.jsxs)("p", { className: "label text-content-secondary", children: ["Select ", schema.name] })] }));
     }
     // or render page
     else {

package/dist/core/components/visuals/Icon.d.ts

@@ -5,7 +5,7 @@ export declare namespace Icon {
         variant: Variant;
         size?: Size;
     };
-    type Size = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'nav' | Sizing;
+    type Size = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'nav' | 'card' | Sizing;
     type Variant = 'Archive' | 'ArrowLeft' | 'Atom' | 'Blocks' | 'Bold' | 'Check' | 'ChevronDown' | 'ChevronRight' | 'ChevronUp' | 'Circle' | 'CircleAlert' | 'CircleCheck' | 'CircleCheckBig' | 'CirclePlus' | 'CircleQuestionMark' | 'CloudCheck' | 'CloudUpload' | 'CornerDownRight' | 'EllipsisVertical' | 'Eye' | 'EyeOff' | 'File' | 'FileDown' | 'FilePlusCorner' | 'FileSearchCorner' | 'Goal' | 'Globe' | 'GripVertical' | 'HatGlasses' | 'History' | 'Highlighter' | 'Image' | 'ImageDown' | 'Info' | 'Italic' | 'Layers' | 'LayoutTemplate' | 'Link' | 'Link2' | 'List' | 'ListChecks' | 'ListIndentDecrease' | 'ListIndentIncrease' | 'ListOrdered' | 'Lock' | 'LockOpen' | 'Mail' | 'MessageSquareQuote' | 'Minus' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'SearchCode' | 'Settings' | 'SquarePlay' | 'Star' | 'Strikethrough' | 'Subscript' | 'Sun' | 'Superscript' | 'TextAlignStart' | 'Trash' | 'TriangleAlert' | 'Trophy' | 'Underline' | 'Undo' | 'Upload' | 'UserRound' | 'X';
     namespace Variant {
         function filter(value: any): value is Variant;

package/dist/core/components/visuals/Icon.js

@@ -268,6 +268,8 @@ function getSizing(size) {
     switch (size) {
         case 'nav':
             return { size: 20, strokeWidth: 2 };
+        case 'card':
+            return { size: 32, strokeWidth: 2, absoluteStrokeWidth: true };
         case 'xl':
             return { size: 96, strokeWidth: 3.5, absoluteStrokeWidth: true };
         case 'lg':

package/dist/core/domain/Collection.d.ts

@@ -32,6 +32,7 @@ export declare class Collection implements IAssetStore, ICollectionStore, IPageR
     readonly createdOn: number;
     private _updatedOn;
     readonly publishedOn?: number;
+    private readonly _subscription;
     private _syncing;
     private _modifiedOn?;
     private _savingOn?;

package/dist/core/domain/Collection.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Collection = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const rxjs_1 = require("rxjs");
+const Item_1 = require("./Item");
 // model
 class Collection {
     constructor(args) {
@@ -46,6 +47,13 @@ class Collection {
         this._updatedOn = args.updatedOn;
         this.publishedOn = args.publishedOn;
         this._syncing = false;
+        // listen to block/field changes
+        this._subscription = this.eventBus.events$
+            .pipe((0, rxjs_1.filter)(e => (funnel_core_1.Field.Event.filter(e) && e.type === 'changed' && !e.field.sandboxed)
+            || (funnel_core_1.FieldList.Event.filter(e) && e.type === 'changed')
+            || (funnel_core_1.ObjectField.Event.filter(e) && e.type === 'changed')
+            || (Item_1.Item.Event.filter(e) && e.type === 'changed')))
+            .subscribe(() => this.raiseEvent('changed'));
     }
     get asRef() {
         const { template, brand, groupId, id, language, version, name, tags, state, valid, createdOn, updatedOn, publishedOn } = this;

package/dist/styles/index.css

@@ -2708,6 +2708,22 @@ video {
         transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
         transition-duration: 200ms;
 }
+.FieldCard.FieldCard-empty{
+    border-style: dashed;
+    border-color: rgb(var(--color-destructive) / .2);
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-background) / var(--tw-bg-opacity, 1));
+}
+.FieldCard.FieldCard-empty:focus-visible{
+    border-style: solid;
+    --tw-border-opacity: 1;
+    border-color: rgb(var(--color-destructive-content) / var(--tw-border-opacity, 1));
+    outline-color: rgb(var(--color-destructive-content) / 1);
+}
+.FieldCard.FieldCard-empty:not(.FieldCard-disabled):hover{
+    --tw-border-opacity: 1;
+    border-color: rgb(var(--color-destructive) / var(--tw-border-opacity, 1));
+}
 .FieldCard.FieldCard-disabled{
     cursor: default;
     opacity: .38;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "4.4.18",
+  "version": "4.4.20",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -89,5 +89,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "d1bfd4468426b7326bd9662cd169242867025f5e"
-}
+  "gitHead": "1e8d8289152d4ce68091e38773c0d766b6f289c3"
+}