hongluan-business-ui/es/components/modeless-dialog/src/modeless-dialog.mjs.map

Hongluan Business Component Library for Vue 3

{"version":3,"file":"modeless-dialog.mjs","sources":["../../../../../../packages/components/modeless-dialog/src/modeless-dialog.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\">\n    <transition\n      :name=\"animationName\"\n      @after-enter=\"afterEnter\"\n      @after-leave=\"afterLeave\"\n      @before-leave=\"beforeLeave\"\n    >\n      <div\n        v-if=\"visible\"\n        v-show=\"shown\"\n        v-bind=\"$attrs\"\n        :id=\"id\"\n        ref=\"dialogRef\"\n        v-trap-focus\n        v-dragger=\"{ boundings, drag }\"\n        v-resizer=\"resize\"\n        :class=\"[prefix + '-modeless-dialog', hlPrefix + '-panel', customClass, panelClass, innerClass]\"\n        :style=\"getDialogStyle()\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        aria-label=\"dialog\"\n        @click.stop\n      >\n        <div :class=\"['panel-header', panelHeaderClass]\">\n          <slot v-if=\"$slots.header\" name=\"header\"></slot>\n          <template v-else-if=\"title || showClose\">\n            <h4 class=\"panel-title\">{{ title }}</h4>\n            <div class=\"panel-header-right\">\n              <button v-if=\"showCollapse\" class=\"panel-close\" @click=\"handleCollapse\">\n                <hl-icon>\n                  <system-arrow-down v-if=\"collapse\" />\n                  <system-arrow-up v-else />\n                </hl-icon>\n              </button>\n              <button v-if=\"showMaximize\" class=\"panel-close\" @click=\"handleMaximize\">\n                <hl-icon>\n                  <system-minimize v-if=\"maximize\" />\n                  <system-maximize v-else />\n                </hl-icon>\n              </button>\n              <button v-if=\"showClose\" class=\"panel-close\" @click=\"handleClose\">\n                <hl-icon><system-close /></hl-icon>\n              </button>\n            </div>\n          </template>\n        </div>\n        <div :class=\"['panel-body', panelBodyClass]\">\n          <slot></slot>\n        </div>\n        <div v-if=\"$slots.footer\" :class=\"['panel-footer', panelFooterClass]\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue'\nimport { HlIcon, SystemClose, SystemMaximize, SystemMinimize, SystemArrowUp, SystemArrowDown, TrapFocus, PREFIX as HlPrefix, usePanelProps } from 'hongluan-ui'\nimport { usePrefix } from '@hongluan-business-ui/utils/util'\nimport { modelessDialogProps, modelessDialogEmits } from './modeless-dialog'\nimport { ModelessDialogDragger } from './dragger'\nimport { ModelessDialogResizer } from './resizer'\nimport { useDialog } from './use-modeless-dialog'\n\nexport default defineComponent({\n  name: 'ModelessDialog',\n  components: {\n    HlIcon,\n    SystemClose,\n    SystemMaximize,\n    SystemMinimize,\n    SystemArrowUp,\n    SystemArrowDown,\n  },\n  directives: {\n    TrapFocus,\n    'dragger': ModelessDialogDragger,\n    'resizer': ModelessDialogResizer,\n  },\n  inheritAttrs: false,\n  props: modelessDialogProps,\n  emits: modelessDialogEmits,\n  setup(props) {\n    const { prefix } = usePrefix()\n    const dialogRef = ref<HTMLDivElement>()\n\n    const dialog = useDialog(props, dialogRef)\n    const {\n      panelStyle,\n      panelClass,\n      headerClass: panelHeaderClass,\n      bodyClass: panelBodyClass,\n      footerClass: panelFooterClass,\n    } = usePanelProps(props)\n\n    const getDialogStyle = () => {\n      let width = props.width, height = props.height, top = props.top, zIndex = props.zIndex\n      const style = dialogRef.value?.style\n      if (style) {\n        width = dialogRef.value?.style.width\n        height = dialogRef.value?.style.height\n        top = dialogRef.value?.style.top\n        zIndex = dialogRef.value?.style.zIndex\n      }\n      return [\n        {\n          width,\n          height,\n          top,\n          zIndex,\n        },\n        panelStyle,\n      ]\n    }\n\n    return {\n      prefix,\n      hlPrefix: HlPrefix.toLowerCase(),\n      dialogRef,\n      panelStyle,\n      getDialogStyle,\n      panelClass,\n      panelHeaderClass,\n      panelBodyClass,\n      panelFooterClass,\n      ...dialog,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;;;;AAmEA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,YAAY;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA;AAAA,EAEb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,EAAE,WAAW;AACnB,UAAM,YAAY;AAElB,UAAM,SAAS,UAAU,OAAO;AAChC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,WAAW;AAAA,MACX,aAAa;AAAA,QACX,cAAc;AAElB,UAAM,iBAAiB,MAAM;AAC3B,UAAI,QAAQ,MAAM;AAClB,qCAA+B;AAC/B,iBAAW;AACT;AACA,iBAAS;AACT,cAAM;AACN,iBAAS,uBAAuB;AAAA;AAElC;AAAO;AACL;AACE,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA;AAEF;AAAA;AAIJ;AAAO;AACL,MACA;AAAmB,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACG;AAAA;AAAA;;;qBApGQ,OAAM;;;;;;;;;;;;AA3BF;AAqDJ;AAnDJ,MACN;AAAa,MACb,cAAa;AAAA,MACb;AAAc;;AA+CT;AA1CU;AACT,UACL;AAAI,UAIH;AAAmF,UACnF,OAAO;AAAA,UACR;AAAW,UACX;AAAK,UACL,cAAW;AAAA,UACV;AAAD;AAAW;UAEX;AAsBM;AAtBwB;;AAqBjB,iFAlBuB;AAAA,cAChCA,mBAgBM;AAAA,kDAfJ;AAKS;kBALmB;AAAM,kBAAe;AAAO;;AAI5C;AAF6B;AACX;AAAA;;;;AAQrB;kBALmB;AAAM,kBAAe;AAAO;;AAI5C;AAF2B;AACT;AAAA;;;+CAG9B;AAES;kBAFgB;AAAM,kBAAe;AAAO;;AAChB;AAAV;AAAA;AAAA;;;;;;;AAO3B;AAFsB;;AACb;;AAIT;YAFqB;AAAwB;;AACtB;;;AAzCrB;;AAKgB,+BACb;AAAA;;;;;;;;;;;"}