@hypericon/mico 0.3.15 → 0.3.17

package/dist/components/tree/Tree.d.ts

@@ -41,6 +41,8 @@ export declare const Tree: m.Component<{
     toggleExpansionWithLabel?: boolean | undefined;
     /** Optionally override the default nesting width */
     nestingWidth?: string | undefined;
+    /** Optionally override the default toggle button width */
+    toggleButtonWidth?: string | undefined;
     /** Optional CSS classes to apply to the root div */
     class?: string | undefined;
     /** Optional CSS styles to apply to the root div */
@@ -94,6 +96,8 @@ export declare function createTree<TNodeData extends object = {}>(): m.Component
     toggleExpansionWithLabel?: boolean | undefined;
     /** Optionally override the default nesting width */
     nestingWidth?: string | undefined;
+    /** Optionally override the default toggle button width */
+    toggleButtonWidth?: string | undefined;
     /** Optional CSS classes to apply to the root div */
     class?: string | undefined;
     /** Optional CSS styles to apply to the root div */

package/dist/components/tree/Tree.js

@@ -9,6 +9,7 @@ const mithril_1 = __importDefault(require("mithril"));
 const icon_1 = require("../icon");
 const DATA_TRANSFER_TYPE = "application/tree-data";
 const DEFAULT_NESTING_WIDTH = "1.5rem";
+const DEFAULT_TOGGLE_WIDTH = "1.5rem";
 /**
  * An untyped tree component (see `createTree<T>()`)
  */
@@ -51,6 +52,7 @@ function createTree() {
                         noToggleIcon: attrs.noToggleIcon,
                         toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
                         nestingWidth: attrs.nestingWidth || DEFAULT_NESTING_WIDTH,
+                        toggleButtonWidth: attrs.toggleButtonWidth || DEFAULT_TOGGLE_WIDTH,
                     });
                 })),
             ]);
@@ -69,6 +71,8 @@ function createTree() {
                     return;
                 if (!ev.dataTransfer)
                     return;
+                if (node.draggable === false)
+                    return;
                 attrs.enableLogging && console.log(`start dragging`, node.data);
                 ev.dataTransfer.setData(DATA_TRANSFER_TYPE, JSON.stringify(node.data));
                 ev.dataTransfer.effectAllowed = "move";
@@ -135,7 +139,7 @@ function createTree() {
                     style: `display: flex; align-items: stretch; max-width: 100%; overflow-x: hidden; ${(attrs.toggleExpansionWithLabel && enableToggling) ? `cursor: pointer;` : ``}`,
                 }, [
                     expanded ? (0, mithril_1.default)("button.mico-tree-toggle", {
-                        style: `width: ${attrs.nestingWidth}; flex: none;`,
+                        style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
                         // class: enableToggling ? `hover:text-primary` : `text-view-icon`,
                         disabled: !enableToggling,
                         onclick: (ev) => {
@@ -147,7 +151,7 @@ function createTree() {
                         },
                     }, attrs.expandedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-down" })) : undefined,
                     collapsed ? (0, mithril_1.default)("button.mico-tree-toggle", {
-                        style: `width: ${attrs.nestingWidth}; flex: none;`,
+                        style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
                         // class: enableToggling ? `hover:text-primary` : `text-view-icon`,
                         disabled: !enableToggling,
                         onclick: (ev) => {
@@ -159,12 +163,12 @@ function createTree() {
                         },
                     }, attrs.collapsedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-right" })) : undefined,
                     (!canHaveChildren) ? (0, mithril_1.default)(".mico-tree-toggle", {
-                        style: `width: ${attrs.nestingWidth}; flex: none;`,
+                        style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
                     }, attrs.noToggleIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "caret-right" })) : [],
                     (0, mithril_1.default)(".mico-tree-label", {
                         class: `${targettingDragClass}`,
                         style: "position: relative; flex: 1 1 0%; overflow-x: hidden;",
-                        draggable: enableReordering,
+                        draggable: enableReordering && (node.draggable !== false),
                         onclick: (ev) => {
                             var _a;
                             this.handleClick(ev, node);
@@ -208,6 +212,7 @@ function createTree() {
                             noToggleIcon: attrs.noToggleIcon,
                             toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
                             nestingWidth: attrs.nestingWidth,
+                            toggleButtonWidth: attrs.toggleButtonWidth,
                         });
                     }),
                     (canHaveChildren && !hasChildren && emptyChildrenMessage !== undefined)

package/dist/components/tree/tree-node.interface.d.ts

@@ -2,6 +2,8 @@ import m from "mithril";
 export interface TreeNode<T extends object = {}> {
     label: string | m.Vnode<any>;
     expanded: boolean;
+    /** Optionally disable dragging where it would otherwise be enabled */
+    draggable?: boolean;
     children?: TreeNode<T>[];
     data: T;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.3.15",
+  "version": "0.3.17",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",