bootstrap-vue-wrapper 1.11.2 → 2.0.0

package/src/components/bs-input/BsInput.vue

@@ -1,92 +0,0 @@
-<template>
-  <label
-    v-if="label !== null"
-    :for="id"
-    class="form-label"
-    v-text="label"
-  />
-  <input
-    :id="id"
-    ref="inputRef"
-    :value="modelValue"
-    class="form-control"
-    v-bind="$attrs"
-    :aria-describedby="hint !== null ? getHintId() : null"
-    @input="onInput"
-    @invalid="onInvalid"
-  >
-  <div
-    v-if="invalidMessage !== null && !hideValidationMessage"
-    class="invalid-feedback"
-    v-text="invalidMessage"
-  />
-  <div
-    v-if="hint !== null"
-    :id="getHintId()"
-    class="form-text"
-    v-text="hint"
-  />
-</template>
-
-<script>
-import validator from '../../mixins/validator.js'
-
-export default {
-  name: 'BsInput',
-  mixins: [validator],
-  props: {
-    /**
-     * Value for v-model
-     */
-    modelValue: {
-      type: [String, Number],
-      default: null,
-    },
-    /**
-     * Html id
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Label for input
-     */
-    label: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Attribute hint
-     */
-    hint: {
-      type: String,
-      default: null,
-    },
-    /**
-     * If this is true the validation message does not appear.
-     */
-    hideValidationMessage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  methods: {
-    /**
-     * Hint id is generated
-     */
-    getHintId() {
-      return this.id + 'Hint'
-    },
-    /**
-     * On input event
-     *
-     * @param event
-     */
-    onInput(event) {
-      this.$emit('update:modelValue', event.target.value)
-    },
-  },
-}
-</script>

package/src/components/bs-modal/BsModal.vue

@@ -1,90 +0,0 @@
-<template>
-  <div
-    ref="modalRef"
-    class="modal fade"
-    tabindex="-1"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog" :class="classDialog">
-      <div class="modal-content">
-        <div v-if="!hideHeader" class="modal-header">
-          <slot name="header">
-            <div class="h5 modal-title" v-text="title" />
-            <button
-              type="button"
-              class="btn-close"
-              data-bs-dismiss="modal"
-            />
-          </slot>
-        </div>
-        <div v-if="!hideBody" class="modal-body">
-          <slot name="body" />
-        </div>
-        <div v-if="!hideFooter" class="modal-footer">
-          <slot name="footer" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Modal } from 'bootstrap'
-
-export default {
-  name: 'BsModal',
-  props: {
-    /**
-     * Modal title
-     */
-    title: {
-      type: String,
-      required: true,
-    },
-    classDialog: {
-      type: [String, Object],
-      default: null,
-    },
-    hideHeader: {
-      type: Boolean,
-      default: false,
-    },
-    hideBody: {
-      type: Boolean,
-      default: false,
-    },
-    hideFooter: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['shown', 'hidden'],
-  mounted() {
-    const modalElement = this.$refs.modalRef
-    Modal.getOrCreateInstance(modalElement).show()
-
-    modalElement.addEventListener('shown.bs.modal', this.onShown)
-    modalElement.addEventListener('hidden.bs.modal', this.onHidden)
-  },
-  methods: {
-    /**
-     * Trigger modal hide event.
-     */
-    hide() {
-      Modal.getOrCreateInstance(this.$refs.modalRef).hide()
-    },
-    /**
-     * Hidden event.
-     */
-    onShown() {
-      this.$emit('shown')
-    },
-    /**
-     * Hidden event.
-     */
-    onHidden() {
-      this.$emit('hidden')
-    },
-  },
-}
-</script>

package/src/components/bs-offcanvas/BsOffcanvas.vue

@@ -1,67 +0,0 @@
-<template>
-  <div
-    ref="offcanvasRef"
-    class="offcanvas"
-    tabindex="-1"
-    aria-labelledby="offcanvasTitle"
-  >
-    <div class="offcanvas-header">
-      <slot name="header">
-        <div id="offcanvasTitle" class="h5 mb-0" v-text="title" />
-        <button
-          type="button"
-          class="btn-close text-reset"
-          data-bs-dismiss="offcanvas"
-        />
-      </slot>
-    </div>
-    <div class="offcanvas-body">
-      <slot name="body" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { Offcanvas } from 'bootstrap'
-
-export default {
-  name: 'BsOffcanvas',
-  props: {
-    /**
-     * Offcanvas title
-     */
-    title: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ['shown', 'hidden'],
-  mounted() {
-    const offcanvasElemet = this.$refs.offcanvasRef
-    Offcanvas.getOrCreateInstance(offcanvasElemet).show()
-
-    offcanvasElemet.addEventListener('shown.bs.offcanvas', this.onShown)
-    offcanvasElemet.addEventListener('hidden.bs.offcanvas', this.onHidden)
-  },
-  methods: {
-    /**
-     * Trigger offcanvas hide event.
-     */
-    hide() {
-      Offcanvas.getOrCreateInstance(this.$refs.offcanvasRef).hide()
-    },
-    /**
-     * Hidden event.
-     */
-    onShown() {
-      this.$emit('shown')
-    },
-    /**
-     * Hidden event.
-     */
-    onHidden() {
-      this.$emit('hidden')
-    },
-  },
-}
-</script>

package/src/components/bs-paginator/BsPaginator.vue

@@ -1,215 +0,0 @@
-<template>
-  <nav>
-    <ul class="pagination">
-      <li
-        class="page-item page-item-first"
-        :class="{ disabled: isPageActive(1) }"
-      >
-        <div
-          class="page-link"
-          @click="onPageClick(1)"
-          v-text="firstPageLabel"
-        />
-      </li>
-      <li
-        class="page-item page-item-previous"
-        :class="{ disabled: isPageActive(1) }"
-      >
-        <div
-          class="page-link"
-          @click="onPageClick(currentPage - 1)"
-          v-text="previousPageLabel"
-        />
-      </li>
-      <li
-        v-for="(page, index) in getVisiblePages()"
-        :key="index"
-        class="page-item page-item-number"
-        :class="{
-          active: isPageActive(page),
-        }"
-      >
-        <div
-          class="page-link"
-          @click="onPageClick(page)"
-          v-text="page"
-        />
-      </li>
-      <li
-        class="page-item page-item-next"
-        :class="{ disabled: isPageActive(getPageCount()) }"
-      >
-        <div
-          class="page-link"
-          @click="onPageClick(currentPage + 1)"
-          v-text="nextPageLabel"
-        />
-      </li>
-      <li
-        class="page-item page-item-last"
-        :class="{ disabled: isPageActive(getPageCount()) }"
-      >
-        <div
-          class="page-link"
-          @click="onPageClick(getPageCount())"
-          v-text="lastPageLabel"
-        />
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<script>
-export default {
-  name: 'BsPaginator',
-  props: {
-    /**
-     * Total count of items.
-     */
-    totalCount: {
-      type: Number,
-      required: true,
-    },
-    /**
-     * Page size
-     */
-    pageSize: {
-      type: Number,
-      required: true,
-    },
-    /**
-     * Current page
-     */
-    currentPage: {
-      type: Number,
-      required: true,
-    },
-    /**
-     * Max visible page
-     */
-    maxVisiblePage: {
-      type: Number,
-      default: 5,
-    },
-    /**
-     * First page label
-     */
-    firstPageLabel: {
-      type: String,
-      default: '«',
-    },
-    /**
-     * Previous page label
-     */
-    previousPageLabel: {
-      type: String,
-      default: '‹',
-    },
-    /**
-     * Next page label
-     */
-    nextPageLabel: {
-      type: String,
-      default: '›',
-    },
-    /**
-     * Last page label
-     */
-    lastPageLabel: {
-      type: String,
-      default: '»',
-    },
-  },
-  emits: ['pageChanged'],
-  methods: {
-    /**
-     * Count of pages
-     *
-     * @returns {number}
-     */
-    getPageCount() {
-      return Math.ceil(this.totalCount / this.pageSize)
-    },
-    /**
-     * Visible page list
-     *
-     * @returns {*[]}
-     */
-    getVisiblePages() {
-      const visiblePages = []
-      const pageRange = this.getPageRange()
-      for (let i = pageRange.beginPage; i <= pageRange.endPage; i += 1) {
-        visiblePages.push(i + 1)
-      }
-
-      return visiblePages
-    },
-    /**
-     * Is page active, or not
-     *
-     * @param page
-     * @returns {boolean}
-     */
-    isPageActive(page) {
-      return page === this.currentPage
-    },
-    /**
-     * On page click
-     */
-    onPageClick(page) {
-      if (this.isPageActive(page)) {
-        return
-      }
-
-      this.$emit('pageChanged', page)
-    },
-    /**
-     * Page range, example: 3 available page, current page 3, range is: [1, 3] (zero-based)
-     *
-     * @returns {{beginPage: number, endPage: number}}
-     */
-    getPageRange() {
-      let beginPage = Math.max(0, this.currentPage - (this.maxVisiblePage / 2))
-      let endPage = beginPage + this.maxVisiblePage - 1
-
-      if (endPage >= this.getPageCount()) {
-        endPage = this.getPageCount() - 1
-        beginPage = Math.max(0, endPage - this.maxVisiblePage + 1)
-      }
-
-      return {
-        beginPage: Math.floor(beginPage),
-        endPage: Math.floor(endPage),
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins/breakpoints';
-
-.page-link {
-  cursor: pointer;
-}
-.page-item-first,
-.page-item-last,
-.page-item-number:not(.active) {
-  display: none;
-}
-
-@include media-breakpoint-up(sm) {
-  .page-item-number:not(.active) {
-    display: block;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .page-item-first,
-  .page-item-last {
-    display: block;
-  }
-}
-</style>

package/src/components/bs-radio/BsRadio.vue

@@ -1,118 +0,0 @@
-<template>
-  <div class="form-check" :class="classContainer">
-    <input
-      :id="id"
-      ref="inputRef"
-      :value="modelValue"
-      v-bind="$attrs"
-      type="radio"
-      class="form-check-input"
-      :checked="isChecked"
-      :aria-describedby="hint !== null ? getHintId() : null"
-      @input="onInput"
-      @invalid="onInvalid"
-    >
-    <label
-      v-if="label !== null"
-      :for="id"
-      class="form-check-label"
-      v-text="label"
-    />
-    <div
-      v-if="invalidMessage !== null && !hideValidationMessage"
-      class="invalid-feedback"
-      v-text="invalidMessage"
-    />
-    <div
-      v-if="hint !== null"
-      :id="getHintId()"
-      class="form-text"
-      v-text="hint"
-    />
-  </div>
-</template>
-
-<script>
-import validator from '../../mixins/validator.js'
-
-export default {
-  name: 'BsRadio',
-  mixins: [validator],
-  props: {
-    /**
-     * Radio value
-     */
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-    /**
-     * Value for v-model
-     */
-    modelValue: {
-      type: [String, Number],
-      default: null,
-    },
-    /**
-     * Html id
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Label for input
-     */
-    label: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Attribute hint
-     */
-    hint: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Input container div class.
-     */
-    classContainer: {
-      type: String,
-      default: null,
-    },
-    /**
-     * If this is true the validation message does not appear.
-     */
-    hideValidationMessage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    /**
-     * Radio is checked or not.
-     */
-    isChecked() {
-      return this.modelValue === this.value
-    },
-  },
-  methods: {
-    /**
-     * Hint id is generated
-     */
-    getHintId() {
-      return this.id + 'Hint'
-    },
-    /**
-     * On input event
-     *
-     * @param event
-     */
-    onInput(event) {
-      this.$emit('update:modelValue', this.value)
-    },
-  },
-}
-</script>

package/src/components/bs-select/BsSelect.vue

@@ -1,122 +0,0 @@
-<template>
-  <label
-    v-if="label !== null"
-    :for="id"
-    class="form-label"
-    v-text="label"
-  />
-  <select
-    :id="id"
-    ref="inputRef"
-    class="form-select"
-    :value="modelValue"
-    :aria-labelledby="hint !== null ? getHintId() : null"
-    v-bind="$attrs"
-    @input="onInput"
-    @invalid="onInvalid"
-  >
-    <option
-      v-if="placeholder !== null"
-      value=""
-      disabled
-      hidden
-    >
-      {{ placeholder }}
-    </option>
-    <option
-      v-for="(option, index) in options"
-      :key="index"
-      :value="option.value"
-    >
-      {{ option.text }}
-    </option>
-  </select>
-  <div
-    v-if="invalidMessage !== null && !hideValidationMessage"
-    class="invalid-feedback"
-    v-text="invalidMessage"
-  />
-  <div
-    v-if="hint !== null"
-    :id="getHintId()"
-    class="form-text"
-    v-text="hint"
-  />
-</template>
-
-<script>
-import validator from '../../mixins/validator.js'
-
-export default {
-  name: 'BsInput',
-  mixins: [validator],
-  props: {
-    /**
-     * Value for v-model
-     */
-    modelValue: {
-      type: [String, Number, Array],
-      default: null,
-    },
-    /**
-     * Html id
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Label for input
-     */
-    label: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Attribute hint
-     */
-    hint: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Options
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    /**
-     * Placeholder
-     */
-    placeholder: {
-      type: String,
-      default: null,
-    },
-    /**
-     * If this is true the validation message does not appear.
-     */
-    hideValidationMessage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  methods: {
-    /**
-     * Hint id is generated
-     */
-    getHintId() {
-      return this.id + 'Hint'
-    },
-    /**
-     * On input event
-     *
-     * @param event
-     */
-    onInput(event) {
-      this.$emit('update:modelValue', event.target.value)
-    },
-  },
-}
-</script>