import { observer } from '@formily/reactive-vue';
import { useTreeNode, useNodeIdProps } from '../../hooks';
import { NodeTitleWidget } from '../NodeTitleWidget';
import { NodeActionsWidget } from '../NodeActionsWidget';
import './styles.less';
import { defineComponent } from 'vue-demi';
import { isStr } from '@designable/shared';
export var DroppableWidget = observer(defineComponent({
    name: 'DnDroppableWidget',
    props: {
        node: { type: Object },
        height: {},
        actions: { type: Array },
        placeholder: { type: Boolean, default: true },
        hasChildren: { type: Boolean, default: undefined }
    },
    inheritAttrs: false,
    setup: function (props, _a) {
        var attrs = _a.attrs, slots = _a.slots;
        var nodeRef = useTreeNode();
        var nodeIdRef = useNodeIdProps(props.node);
        return function () {
            var _a, _b, _c, _d, _e;
            var target = (_a = props.node) !== null && _a !== void 0 ? _a : nodeRef.value;
            if (!target)
                return;
            var children = (_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots);
            var hasChildren = (_c = props.hasChildren) !== null && _c !== void 0 ? _c : (((_d = target.children) === null || _d === void 0 ? void 0 : _d.length) > 0 && children);
            return (<div {...nodeIdRef.value} {...attrs} class={attrs.class}>
            {hasChildren ? (children) : props.placeholder ? (<div style={{ height: isStr(props.height) ? props.height : props.height + 'px' }} class="dn-droppable-placeholder">
                <NodeTitleWidget node={target}/>
              </div>) : (children)}
            {((_e = props.actions) === null || _e === void 0 ? void 0 : _e.length) ? (<NodeActionsWidget>
                {props.actions.map(function (action, key) { return (<NodeActionsWidget.Action {...action} key={key}/>); })}
              </NodeActionsWidget>) : null}
          </div>);
        };
    }
}));
//# sourceMappingURL=index.jsx.map