<commit_before><!-- GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html -->

<docs>
  # VC-MODALDIALOG
  A dialog component that disables and dims everything else for exclusive dialog use.
  Using *vc-modaldialog* with *v-if* enables a modal dialog that dims all other
  elements while it is visible and constrains the focus chain. A *close* event is
  emitted on clicks outside of the dialog area, if *Escape* is pressed or the default
  *Close* button is actiavted.
  ## Events:
  *close*
  : A *close* event is emitted once the "Close" button activated.
  ## Slots:
  *header*
  : The *header* slot can be used to hold the modal dialog title.
  *default*
  : The *default* slot holds the main content.
  *footer*
  : By default, the *footer* slot holds a *Close* button which emits the *close* event.
  ## CSS Classes:
  *vc-modaldialog-mask*
  : The *vc-modaldialog-mask* CSS class is used as backdrop beneath the dialog contents to mask non-modal contents.
  *vc-modaldialog-container*
  : The *vc-modaldialog-container* CSS class contains styling for the actual dialog contents.
</docs>

<style lang="scss">
  @import 'styles.scss';
  .vc-modaldialog * { flex-shrink: 0; }
  @mixin vc-flex-vbox() {
      display: flex; flex-basis: auto; align-items: center; justify-content: center;
      flex-shrink: 0; flex-flow: column; height: auto;
  }
  @mixin vc-flex-hbox() {
      display: flex; flex-basis: auto; align-items: center; justify-content: center;
      flex-shrink: 0; flex-flow: row; width: auto;
  }
  .vc-modaldialog-mask {
      @include vc-flex-vbox;
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      z-index: 99998;
      background-color: fadeout(darken($vc-theme-background, 15%), 15%); /* backdrop */
  }
  .vc-modaldialog-wrapper {
      @include vc-flex-vbox;
      max-height: 100%; max-width: 100%;
      padding: 1em;
  }
  .vc-modaldialog-container {
      @include vc-flex-vbox; flex-shrink: 1;
      min-width: 25em; padding: 0;
      background-color: $vc-theme-background;
      border-radius: $vc-theme-border-radius;
      border-top: 3px solid $vc-panel-background-light; border-left: 3px solid $vc-panel-background-light;
      border-bottom: 3px solid $vc-panel-background-dark; border-right: 3px solid $vc-panel-background-dark;
      @include vc-popup-box-shadow;
      /* fix vscrolling: https://stackoverflow.com/a/33455342 */
      justify-content: space-between;
      margin: auto;
      overflow: auto;
  }
  .vc-modaldialog-header {
      font-size: 1.5em; font-weight: bold;
      padding: 1rem 0 1.1rem;
  }
  .vc-modaldialog-header, .vc-modaldialog-footer {
      display: block; width: 100%; align-items: center; text-align: center;
      background-color: darken($vc-theme-background, 8%);
  }
  .vc-modaldialog-footer {
      padding: 1.2rem 0 1rem;
  }
  .vc-modaldialog-body {
      padding: 1.5em 2em;
  }
  .vc-modaldialog-mask {
      transition: all .4s ease;
  }
  .vc-modaldialog-container {
      transition: all .4s ease-out;
  }
  .vc-modaldialog-transition-enter {
      opacity: 0;
  }
  .vc-modaldialog-transition-leave-active {
      opacity: 0;
  }
  .vc-modaldialog-transition-enter .vc-modaldialog-container
  { transform: translateY(-100%) scale(.5); }
  .vc-modaldialog-transition-leave-active .vc-modaldialog-container
  { transform: translateY(-100%) scale(.5); }
</style>

<template>
  <transition name="vc-modaldialog-transition">
    <div class="vc-modaldialog vc-modaldialog-mask" @click="close">
      <div class="vc-modaldialog-wrapper">
	<div class="vc-modaldialog-container" @click.stop>

	  <div class="vc-modaldialog-header">
	    <slot name="header">
	      Modal Dialog
	    </slot>
	  </div>
	  <div class="vc-modaldialog-body">
	    <slot name="default"></slot>
	  </div>
	  <div class="vc-modaldialog-footer">
	    <slot name="footer">
	      <vc-button class="vc-modaldialog-button" ref="bclose" @click="close">
		Close
	      </vc-button>
	    </slot>
	  </div>

	</div>
      </div>
    </div>
  </transition>
</template>

<script>
module.exports = {
  name: 'vc-modaldialog',
  mounted () {
    this.shield = Util.modal_shield (this.close);<commit_msg>EBEAST: vc/modaldialog.vue: fix tabindex for modal widget children<commit_after><!-- GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html -->

<docs>
  # VC-MODALDIALOG
  A dialog component that disables and dims everything else for exclusive dialog use.
  Using *vc-modaldialog* with *v-if* enables a modal dialog that dims all other
  elements while it is visible and constrains the focus chain. A *close* event is
  emitted on clicks outside of the dialog area, if *Escape* is pressed or the default
  *Close* button is actiavted.
  ## Events:
  *close*
  : A *close* event is emitted once the "Close" button activated.
  ## Slots:
  *header*
  : The *header* slot can be used to hold the modal dialog title.
  *default*
  : The *default* slot holds the main content.
  *footer*
  : By default, the *footer* slot holds a *Close* button which emits the *close* event.
  ## CSS Classes:
  *vc-modaldialog-mask*
  : The *vc-modaldialog-mask* CSS class is used as backdrop beneath the dialog contents to mask non-modal contents.
  *vc-modaldialog-container*
  : The *vc-modaldialog-container* CSS class contains styling for the actual dialog contents.
</docs>

<style lang="scss">
  @import 'styles.scss';
  .vc-modaldialog * { flex-shrink: 0; }
  @mixin vc-flex-vbox() {
      display: flex; flex-basis: auto; align-items: center; justify-content: center;
      flex-shrink: 0; flex-flow: column; height: auto;
  }
  @mixin vc-flex-hbox() {
      display: flex; flex-basis: auto; align-items: center; justify-content: center;
      flex-shrink: 0; flex-flow: row; width: auto;
  }
  .vc-modaldialog-mask {
      @include vc-flex-vbox;
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      z-index: 99998;
      background-color: fadeout(darken($vc-theme-background, 15%), 15%); /* backdrop */
  }
  .vc-modaldialog-wrapper {
      @include vc-flex-vbox;
      max-height: 100%; max-width: 100%;
      padding: 1em;
  }
  .vc-modaldialog-container {
      @include vc-flex-vbox; flex-shrink: 1;
      min-width: 25em; padding: 0;
      background-color: $vc-theme-background;
      border-radius: $vc-theme-border-radius;
      border-top: 3px solid $vc-panel-background-light; border-left: 3px solid $vc-panel-background-light;
      border-bottom: 3px solid $vc-panel-background-dark; border-right: 3px solid $vc-panel-background-dark;
      @include vc-popup-box-shadow;
      /* fix vscrolling: https://stackoverflow.com/a/33455342 */
      justify-content: space-between;
      margin: auto;
      overflow: auto;
  }
  .vc-modaldialog-header {
      font-size: 1.5em; font-weight: bold;
      padding: 1rem 0 1.1rem;
  }
  .vc-modaldialog-header, .vc-modaldialog-footer {
      display: block; width: 100%; align-items: center; text-align: center;
      background-color: darken($vc-theme-background, 8%);
  }
  .vc-modaldialog-footer {
      padding: 1.2rem 0 1rem;
  }
  .vc-modaldialog-body {
      padding: 1.5em 2em;
  }
  .vc-modaldialog-mask {
      transition: all .4s ease;
  }
  .vc-modaldialog-container {
      transition: all .4s ease-out;
  }
  .vc-modaldialog-transition-enter {
      opacity: 0;
  }
  .vc-modaldialog-transition-leave-active {
      opacity: 0;
  }
  .vc-modaldialog-transition-enter .vc-modaldialog-container
  { transform: translateY(-100%) scale(.5); }
  .vc-modaldialog-transition-leave-active .vc-modaldialog-container
  { transform: translateY(-100%) scale(.5); }
</style>

<template>
  <transition name="vc-modaldialog-transition">
    <div class="vc-modaldialog vc-modaldialog-mask" @click="close">
      <div class="vc-modaldialog-wrapper">
	<div class="vc-modaldialog-container" @click.stop ref="container">

	  <div class="vc-modaldialog-header">
	    <slot name="header">
	      Modal Dialog
	    </slot>
	  </div>
	  <div class="vc-modaldialog-body">
	    <slot name="default"></slot>
	  </div>
	  <div class="vc-modaldialog-footer">
	    <slot name="footer">
	      <vc-button class="vc-modaldialog-button" ref="bclose" @click="close">
		Close
	      </vc-button>
	    </slot>
	  </div>

	</div>
      </div>
    </div>
  </transition>
</template>

<script>
module.exports = {
  name: 'vc-modaldialog',
  mounted () {
    this.shield = Util.modal_shield (this.close, this.$refs['container']);
{'fraction_non_alphanumeric': 0.14319639040607932, 'fraction_numerical': 0.016623129897886488, 'mean_word_length': 3.059277108433735, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7428353', 'n_tokens_mistral': 3062, 'n_tokens_neox': 2878, 'n_words': 732}