Modal

<div>
  <nly-button variant="primary" v-nly-modal.no-close-on-esc.modal-1
    >点击弹出Modal</nly-button
  >

  <nly-modal id="modal-1" title="NlyAdminlteVue">
    <p class="my-4">Hello NlyAdminlteVue</p>
  </nly-modal>
</div>

<!-- 总览.name -->
<!-- nly-modal.vue -->

<div>
  <!-- 使用 modifiers -->
  <nly-button variant="primary" v-nly-modal.my-modal>点击显示</nly-button>

  <!-- 使用 value -->
  <nly-button variant="primary" v-nly-modal="'my-modal'">点击显示</nly-button>

  <nly-modal id="my-modal">Hello NlyAdminlteVue</nly-modal>
</div>

<!-- v-nly-modal 指令显示隐藏.name -->
<!-- v-nly-modal.vue -->

<div>
  <nly-button
    variant="primary"
    id="show-btn"
    @click="$nlyaModal.show('nly-modal-example')"
    >显示</nly-button
  >

  <nly-modal id="nly-modal-example" hide-footer>
    <template v-slot:modal-title> 使用 <code>$nlyaModal</code> 方法 </template>
    <div class="d-block text-center">
      <h3>Hello NlyAdminlteVue!</h3>
    </div>
    <nly-button
      variant="primary"
      class="mt-3"
      block
      @click="$nlyaModal.hide('nly-modal-example')"
      >关闭</nly-button
    >
  </nly-modal>
</div>

<!-- $nlyaModal 显示隐藏.name -->
<!-- nly-modal-hide-show.vue -->

<template>
  <div>
    <nly-button variant="primary" id="show-btn" @click="showModal"
      >show</nly-button
    >
    <nly-button variant="primary" id="toggle-btn" @click="toggleModal"
      >Toggle
    </nly-button>

    <nly-modal ref="my-modal" hide-footer title="Using Component Methods">
      <div class="d-block text-center">
        <h3>Hello NlyAdminlteVue</h3>
      </div>
      <nly-button class="mt-3" variant="outlineDanger" block @click="hideModal"
        >hide</nly-button
      >
      <nly-button
        class="mt-2"
        variant="outlineWarning"
        block
        @click="toggleModal"
        >Toggle</nly-button
      >
    </nly-modal>
  </div>
</template>

<script>
  export default {
    methods: {
      showModal() {
        this.$refs["my-modal"].show();
      },
      hideModal() {
        this.$refs["my-modal"].hide();
      },
      toggleModal() {
        this.$refs["my-modal"].toggle("#toggle-btn");
      },
    },
  };
</script>

<!-- show,hide,toggle 显示隐藏.name -->
<!-- nly-modal-modal-hide-show.vue -->

<template>
  <div>
    <nly-button variant="outlineDanger" @click="modalShow = !modalShow"
      >显示</nly-button
    >

    <nly-modal v-model="modalShow">Hello NlyAdminlteVue</nly-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalShow: false,
      };
    },
  };
</script>

<!-- v-model 显示隐藏.name -->
<!-- nly--modal-hide-show.vue -->

<template>
  <div>
    <nly-button @click="showModal" variant="outlineDanger" ref="btnShowRoot"
      >show</nly-button
    >
    <nly-button @click="toggleModal" variant="outlineDanger" ref="btnToggleRoot"
      >Toggle</nly-button
    >

    <nly-modal id="modal-root">
      <div class="d-block">Hello NlyAdminlteVue</div>
      <nly-button @click="hideModal" variant="outlineDanger">hide</nly-button>
      <nly-button @click="toggleModal" variant="outlineDanger"
        >Toggle</nly-button
      >
    </nly-modal>
  </div>
</template>

<script>
  export default {
    methods: {
      showModal() {
        this.$root.$emit("nlya::show::modal", "modal-root", "#btnShowRoot");
      },
      hideModal() {
        this.$root.$emit("nlya::hide::modal", "modal-root", "#btnShowRoot");
      },
      toggleModal() {
        this.$root.$emit("nlya::toggle::modal", "modal-root", "#btnToggleRoot");
      },
    },
  };
</script>

<!-- $root 显示隐藏.name -->
<!-- nly-modal-modal-hide-show.vue -->

<template>
  <div>
    <nly-button v-nly-modal.modal-prevent-closing>Open Modal</nly-button>

    <div class="mt-3">
      提交的姓名:
      <div v-if="submittedNames.length === 0">--</div>
      <ul v-else class="mb-0 pl-3">
        <li v-for="name in submittedNames">{{ name }}</li>
      </ul>
    </div>

    <nly-modal
      id="modal-prevent-closing"
      ref="modal"
      title="提交您的姓名"
      @show="resetModal"
      @hidden="resetModal"
      @ok="handleOk"
    >
      <form ref="form" @submit.stop.prevent="handleSubmit">
        <nly-form-group
          :valid="nameState"
          label="Name"
          label-for="name-input"
          invalid-feedback="姓名必填"
        >
          <nly-form-input
            id="name-input"
            v-model="name"
            :valid="nameState"
            required
          ></nly-form-input>
        </nly-form-group>
      </form>
    </nly-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "",
        nameState: "novalid",
        submittedNames: [],
      };
    },
    methods: {
      checkFormValidity() {
        const valid = this.$refs.form.checkValidity() ? "valid" : "invalid";
        this.nameState = valid;
        return valid;
      },
      resetModal() {
        this.name = "";
        this.nameState = "novalid";
      },
      handleOk(nlyaModalEvt) {
        nlyaModalEvt.preventDefault();
        this.handleSubmit();
      },
      handleSubmit() {
        if (this.checkFormValidity() === "invalid") {
          return;
        }
        this.submittedNames.push(this.name);
        this.$nextTick(() => {
          this.$nlyaModal.hide("modal-prevent-closing");
        });
      },
    },
  };
</script>

<!-- 阻止关闭.name -->
<!-- nly-modal-modal-hide-show.vue -->

hide(trigger = "") {
    if (!this.isVisible || this.isClosing) {
        /* istanbul ignore next */
        return;
    }
    this.isClosing = true;
    const hideEvt = this.buildEvent("hide", {
        cancelable: trigger !== "FORCE",
        trigger: trigger || null
    });
    // We emit specific event for one of the three built-in buttons
    if (trigger === "ok") {
        this.$emit("ok", hideEvt);
    } else if (trigger === "cancel") {
        this.$emit("cancel", hideEvt);
    } else if (trigger === "headerclose") {
        this.$emit("close", hideEvt);
    }
    this.emitEvent(hideEvt);
    // Hide if not canceled
    if (hideEvt.defaultPrevented || !this.isVisible) {
        this.isClosing = false;
        // Ensure v-model reflects current state
        this.updateModel(true);
        return;
    }
    // Stop observing for content changes
    if (this._observer) {
        this._observer.disconnect();
        this._observer = null;
    }
    // Trigger the hide transition
    this.isVisible = false;
    // Update the v-model
    this.updateModel(false);
}

<div>
  <nly-button v-nly-modal.modalPopover>弹出modal</nly-button>

  <nly-modal id="modalPopover" title="带 popovers 的 modal" ok-only>
    <p>
      这个
      <nly-button v-nly-popover="'modal 中的 popovers!'" title="Popover"
        >按钮</nly-button
      >
      点击弹出 popovers
    </p>
    <p>
      这个
      <a href="#" v-nly-tooltip title="modal 中的tooltip">链接</a>
      鼠标悬浮会弹出 toolptips
    </p>
  </nly-modal>
</div>

<!-- Tooltips 和 popovers.name -->
<!-- Tooltips and popovers.vue -->

<div>
  <nly-button v-nly-modal.modal-xl variant="primary">xl modal</nly-button>
  <nly-button v-nly-modal.modal-lg variant="primary">lg modal</nly-button>
  <nly-button v-nly-modal.modal-sm variant="primary">sm modal</nly-button>

  <nly-modal id="modal-xl" size="xl" title="Extra Large Modal"
    >Hello Extra Large Modal!</nly-modal
  >
  <nly-modal id="modal-lg" size="lg" title="Large Modal"
    >Hello Large Modal!</nly-modal
  >
  <nly-modal id="modal-sm" size="sm" title="Small Modal"
    >Hello Small Modal!</nly-modal
  >
</div>

<!-- 大小.name -->
<!-- size.vue -->

<div>
  <nly-button v-nly-modal.modal-tall>滚动加载内容</nly-button>

  <nly-modal id="modal-tall" title="Overflowing Content">
    <p class="my-4" v-for="i in 20" :key="i">
      作者又高又帅，作者大帅比，帅的世界地震
    </p>
  </nly-modal>
</div>

<!-- 滚动条.name -->
<!-- scrolling.vue -->

<div>
  <nly-button v-nly-modal.modal-scrollable>Launch scrolling modal</nly-button>

  <nly-modal id="modal-scrollable" scrollable title="滚动条加载内容">
    <p class="my-4" v-for="i in 20" :key="i">
      作者又高又帅，作者大帅比，帅的世界地震
    </p>
  </nly-modal>
</div>

<!-- 滚动条.name -->
<!-- scrollable.vue -->

<div>
  <nly-button v-nly-modal.modal-center>垂直居中 modal</nly-button>

  <nly-modal id="modal-center" centered title="BootstrapVue">
    <p class="my-4">垂直居中 modal</p>
  </nly-modal>
</div>

<!-- 垂直居中.name -->
<!-- centered.vue -->

<template>
  <div>
    <nly-button @click="show=true" variant="primary">Show Modal</nly-button>

    <nly-modal
      v-model="show"
      title="Modal Variants"
      :header-bg-variant="headerBgVariant"
      :header-text-variant="headerTextVariant"
      :body-bg-variant="bodyBgVariant"
      :body-text-variant="bodyTextVariant"
      :footer-bg-variant="footerBgVariant"
      :footer-text-variant="footerTextVariant"
    >
      <nly-container fluid>
        <nly-row class="mb-1 text-center">
          <nly-col cols="3"></nly-col>
          <nly-col>Background</nly-col>
          <nly-col>Text</nly-col>
        </nly-row>

        <nly-row class="mb-1">
          <nly-col cols="3">Header</nly-col>
          <nly-col>
            <nly-form-select
              v-model="headerBgVariant"
              :options="variants"
            ></nly-form-select>
          </nly-col>
          <nly-col>
            <nly-form-select
              v-model="headerTextVariant"
              :options="variants"
            ></nly-form-select>
          </nly-col>
        </nly-row>

        <nly-row class="mb-1">
          <nly-col cols="3">Body</nly-col>
          <nly-col>
            <nly-form-select
              v-model="bodyBgVariant"
              :options="variants"
            ></nly-form-select>
          </nly-col>
          <nly-col>
            <nly-form-select
              v-model="bodyTextVariant"
              :options="variants"
            ></nly-form-select>
          </nly-col>
        </nly-row>

        <nly-row>
          <nly-col cols="3">Footer</nly-col>
          <nly-col>
            <nly-form-select
              v-model="footerBgVariant"
              :options="variants"
            ></nly-form-select>
          </nly-col>
          <nly-col>
            <nly-form-select
              v-model="footerTextVariant"
              :options="variants"
            ></nly-form-select>
          </nly-col>
        </nly-row>
      </nly-container>

      <template v-slot:modal-footer>
        <div class="w-100">
          <p class="float-left">Modal Footer Content</p>
          <nly-button
            variant="primary"
            size="sm"
            class="float-right"
            @click="show=false"
          >
            Close
          </nly-button>
        </div>
      </template>
    </nly-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        variants: [
          "primary",
          "secondary",
          "success",
          "warning",
          "danger",
          "info",
          "light",
          "dark",
        ],
        headerBgVariant: "dark",
        headerTextVariant: "light",
        bodyBgVariant: "light",
        bodyTextVariant: "dark",
        footerBgVariant: "warning",
        footerTextVariant: "dark",
      };
    },
  };
</script>

<!-- 颜色.name -->
<!-- variant.vue -->

<div>
  <nly-button v-nly-modal.modal-no-backdrop>打开</nly-button>

  <nly-modal
    id="modal-no-backdrop"
    hide-backdrop
    content-class="shadow"
    title="NlyAdminlteVue"
  >
    <p class="my-2">给modal添加了css 类 <code>'shadow'</code></p>
  </nly-modal>
</div>

<!-- 隐藏罩层.name -->
<!-- hide-backdrop.vue -->

<div>
  <nly-button v-nly-modal.modal-footer-sm>小按钮</nly-button>
  <nly-button v-nly-modal.modal-footer-lg>大按钮</nly-button>

  <nly-modal id="modal-footer-sm" title="NlyAdminlteVue" button-size="sm">
    <p class="my-2">小按钮</p>
  </nly-modal>

  <nly-modal id="modal-footer-lg" title="NlyAdminlteVue" button-size="lg">
    <p class="my-2">大按钮</p>
  </nly-modal>
</div>

<!-- 按钮大小.name -->
<!-- button-size.vue -->

<template>
  <nly-button @click="$nlyaModal.show('modal-scoped')">打开</nly-button>

  <nly-modal id="modal-scoped">
    <template v-slot:modal-header="{ close }">
      <nly-button size="sm" variant="outline-danger" @click="close()">
        关闭
      </nly-button>
      <h5>footer</h5>
    </template>

    <template v-slot:default="{ hide }">
      <p>body 按钮</p>
      <nly-button @click="hide()">关闭 modal</nly-button>
    </template>

    <template v-slot:modal-footer="{ ok, cancel, hide }">
      <b>Custom Footer</b>
      <nly-button size="sm" variant="success" @click="ok()">
        OK
      </nly-button>
      <nly-button size="sm" variant="danger" @click="cancel()">
        Cancel
      </nly-button>
      <nly-button size="sm" variant="outlineSecondary" @click="hide('forget')">
        Forget it
      </nly-button>
    </template>
  </nly-modal>
</template>

<!-- scoped slots.name -->
<!-- scoped slots.vue -->

<div>
  <nly-button v-nly-modal.modal-multi-1>打开第一个 Modal</nly-button>

  <nly-modal id="modal-multi-1" size="lg" title="Modal 1" ok-only no-stacking>
    <p class="my-2">First Modal</p>
    <nly-button v-nly-modal.modal-multi-2>打开第二个modal</nly-button>
  </nly-modal>

  <nly-modal id="modal-multi-2" title="Modal 2" ok-only>
    <p class="my-2">第二个 Modal</p>
    <nly-button v-nly-modal.modal-multi-3 size="sm"
      >打开第三个 Modal</nly-button
    >
  </nly-modal>

  <nly-modal id="modal-multi-3" size="sm" title="Third Modal" ok-only>
    <p class="my-1">第三个modal</p>
  </nly-modal>
</div>

<!-- 多个模式.name -->
<!-- modal-multi.vue -->

<template>
  <div>
    <div class="mb-2">
      <nly-button @click="showMsgBoxOne">Simple msgBoxOk</nly-button>
      Return value: {{ String(boxOne) }}
    </div>
    <div class="mb-1">
      <nly-button @click="showMsgBoxTwo">msgBoxOk with options</nly-button>
      Return value: {{ String(boxTwo) }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        boxOne: "",
        boxTwo: "",
      };
    },
    methods: {
      showMsgBoxOne() {
        this.boxOne = "";
        this.$nlyaModal
          .msgBoxOk("Action completed")
          .then((value) => {
            this.boxOne = value;
          })
          .catch((err) => {
            // An error occurred
          });
      },
      showMsgBoxTwo() {
        this.boxTwo = "";
        this.$nlyaModal
          .msgBoxOk("Data was submitted successfully", {
            title: "Confirmation",
            size: "sm",
            buttonSize: "sm",
            okVariant: "success",
            headerClass: "p-2 border-bottom-0",
            footerClass: "p-2 border-top-0",
            centered: true,
          })
          .then((value) => {
            this.boxTwo = value;
          })
          .catch((err) => {
            // An error occurred
          });
      },
    },
  };
</script>

<!-- MsgBox.name -->
<!-- MsgBox,.vue -->

<template>
  <div>
    <div class="mb-2">
      <nly-button @click="showMsgBoxOne">Simple msgBoxConfirm</nly-button>
      Return value: {{ String(boxOne) }}
    </div>
    <div class="mb-1">
      <nly-button @click="showMsgBoxTwo">msgBoxConfirm with options</nly-button>
      Return value: {{ String(boxTwo) }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        boxOne: "",
        boxTwo: "",
      };
    },
    methods: {
      showMsgBoxOne() {
        this.boxOne = "";
        this.$nlyaModal
          .msgBoxConfirm("Are you sure?")
          .then((value) => {
            this.boxOne = value;
          })
          .catch((err) => {
            // An error occurred
          });
      },
      showMsgBoxTwo() {
        this.boxTwo = "";
        this.$nlyaModal
          .msgBoxConfirm("Please confirm that you want to delete everything.", {
            title: "Please Confirm",
            size: "sm",
            buttonSize: "sm",
            okVariant: "danger",
            okTitle: "YES",
            cancelTitle: "NO",
            footerClass: "p-2",
            hideHeaderClose: false,
            centered: true,
          })
          .then((value) => {
            this.boxTwo = value;
          })
          .catch((err) => {
            // An error occurred
          });
      },
    },
  };
</script>
<!-- MsgBox.name -->
<!-- msgBoxConfirm,.vue -->

<template>
  <div>
    <nly-button @click="showMsgOk"
      >Show OK message box with custom content</nly-button
    >
  </div>
</template>

<script>
  export default {
    methods: {
      showMsgOk() {
        const h = this.$createElement;
        const titleVNode = h("div", {
          domProps: { innerHTML: "Title from <i>HTML<i> string" },
        });
        const messageVNode = h("div", { class: ["foobar"] }, [
          h("p", { class: ["text-center"] }, [
            " Flashy ",
            h("strong", "msgBoxOk"),
            " message ",
          ]),
          h("p", { class: ["text-center"] }, [h("nly-spinner")]),
          h("img", {
            class: "img-thumbnail img-fluid rounded-circle mx-auto d-block",
            attrs: {
              src: "https://picsum.photos/id/20/250/250",
            },
          }),
        ]);
        this.$nlyaModal.msgBoxOk([messageVNode], {
          title: [titleVNode],
          buttonSize: "sm",
          centered: true,
          size: "sm",
        });
      },
    },
  };
</script>

<!-- 高级用法.name -->
<!-- advanced usage.vue -->

export default {
  mounted() {
    this.$root.$on("nlya::modal::show", (nlyaEvent, modalId) => {
      console.log("Modal is about to be shown", nlyaEvent, modalId);
    });
  },
};

<nly-modal @shown="focusMyElement">
  <div>
    <nly-button>自动聚焦</nly-button>
  </div>

  <div>
    <nly-form-input></nly-form-input>
  </div>

  <div>
    <!-- Element to gain focus when modal is opened -->
    <nly-form-input ref="focusThis"></nly-form-input>
  </div>

  <div>
    <nly-form-input></nly-form-input>
  </div>
</nly-modal>

export default {
  methods: {
    focusMyElement() {
      this.$refs.focusThis.focus();
    },
  },
};

this.$root.$emit("nly::show::modal", "modal-1", "#focusThisOnClose");