hongluan-ui/lib/components/dialog/src/dialog-content.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
var index = require('../../icon/index.js');
var index$1 = require('../../button/index.js');
require('../../focus-trap/index.js');
require('../../system-icon/index.js');
var dialogContent = require('./dialog-content2.js');
var dragger = require('./dragger.js');
var resizer = require('./resizer.js');
require('../../../utils/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var close = require('../../system-icon/src/close.js');
var index$2 = require('../../../hooks/use-namespace/index.js');
var index$3 = require('../../../hooks/use-locale/index.js');
var dialog = require('../../../tokens/dialog.js');
var tokens = require('../../focus-trap/src/tokens.js');
var refs = require('../../../utils/vue/refs.js');

const _sfc_main = vue.defineComponent({
  name: "DialogContent",
  components: {
    HlIcon: index.HlIcon,
    HlButton: index$1.HlButton,
    SystemClose: close["default"]
  },
  directives: {
    "dragger": dragger.DialogDragger,
    "resizer": resizer.DialogResizer
  },
  props: dialogContent.dialogContentProps,
  setup(props) {
    const { namespace } = index$2.useNamespace();
    const { t } = index$3.useLocale();
    const canDrag = vue.computed(() => {
      return props.showAs === "drawer" || props.placement === "fullscreen" ? false : props.draggable;
    });
    const canResize = vue.computed(() => {
      return props.showAs === "drawer" || props.placement === "fullscreen" ? false : props.resizable;
    });
    const dialogContext = vue.inject(dialog.dialogInjectionKey);
    const { focusTrapRef } = vue.inject(tokens.FOCUS_TRAP_INJECTION_KEY);
    const composedDialogRef = refs.composeRefs(focusTrapRef, dialogContext.dialogRef);
    return {
      t,
      namespace,
      canDrag,
      canResize,
      focusTrapRef,
      composedDialogRef,
      ...dialogContext
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_system_close = vue.resolveComponent("system-close");
  const _component_hl_icon = vue.resolveComponent("hl-icon");
  const _component_hl_button = vue.resolveComponent("hl-button");
  const _directive_dragger = vue.resolveDirective("dragger");
  const _directive_resizer = vue.resolveDirective("resizer");
  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
    ref: _ctx.composedDialogRef,
    class: vue.normalizeClass([
      _ctx.namespace + "-panel",
      _ctx.customClass,
      _ctx.panelClass,
      _ctx.canDrag ? "is-draggable" : "",
      _ctx.canResize ? "is-resizable" : ""
    ]),
    style: vue.normalizeStyle([
      {
        width: _ctx.width,
        height: _ctx.height
      },
      _ctx.top ? `top: ${_ctx.top}` : "",
      _ctx.panelStyle
    ]),
    "show-as": _ctx.showAs,
    tabindex: "-1"
  }, [
    vue.createElementVNode("div", {
      class: vue.normalizeClass(["panel-header", _ctx.panelHeaderClass])
    }, [
      _ctx.$slots.header ? vue.renderSlot(_ctx.$slots, "header", { key: 0 }) : _ctx.title || _ctx.showClose || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
        vue.renderSlot(_ctx.$slots, "title", {}, () => [
          vue.createElementVNode("h4", {
            class: "panel-title",
            role: "heading",
            "aria-level": _ctx.ariaLevel
          }, vue.toDisplayString(_ctx.title), 9, ["aria-level"])
        ]),
        vue.createElementVNode("div", { class: "panel-header-right" }, [
          _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_hl_button, {
            key: 0,
            class: "panel-close",
            "aria-label": _ctx.t("hl.dialog.close"),
            onClick: _ctx.handleClose
          }, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_hl_icon, null, {
                default: vue.withCtx(() => [
                  vue.createVNode(_component_system_close)
                ]),
                _: 1
              })
            ]),
            _: 1
          }, 8, ["aria-label", "onClick"])) : vue.createCommentVNode("v-if", true)
        ])
      ], 64)) : vue.createCommentVNode("v-if", true)
    ], 2),
    vue.createElementVNode("div", {
      id: _ctx.bodyId,
      class: vue.normalizeClass(["panel-body", _ctx.panelBodyClass])
    }, [
      vue.renderSlot(_ctx.$slots, "default")
    ], 10, ["id"]),
    _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
      key: 0,
      class: vue.normalizeClass(["panel-footer", _ctx.panelFooterClass])
    }, [
      vue.renderSlot(_ctx.$slots, "footer")
    ], 2)) : vue.createCommentVNode("v-if", true)
  ], 14, ["show-as"])), [
    [_directive_dragger, { canDrag: _ctx.canDrag, showAs: _ctx.showAs, placement: _ctx.placement }],
    [_directive_resizer, { canResize: _ctx.canResize, showAs: _ctx.showAs, placement: _ctx.placement }]
  ]);
}
var DialogContent = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = DialogContent;
//# sourceMappingURL=dialog-content.js.map