bootstrap-vue-wrapper 1.11.2 → 2.0.0

package/src/components/bs-table/BsTable.vue

@@ -1,202 +0,0 @@
-<template>
-  <table class="table">
-    <thead>
-      <tr>
-        <template v-for="field in fields" :key="field.key">
-          <th
-            :class="{
-              'cursor-pointer': isSortableField(field),
-              'text-decoration-underline': isActiveOrderBy(field.key),
-              thClass,
-            }"
-            @click="onHeadClick(field)"
-          >
-            <slot name="tr">
-              {{ field.label }}
-              <i v-if="isActiveOrderBy(field.key) && this.sortDesc !== null" :class="getSortIconClass()" />
-            </slot>
-          </th>
-        </template>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-if="isLoading">
-        <td :colspan="fields.length">
-          <slot name="loading">
-            <div class="d-flex justify-content-center p-2">
-              <div class="spinner-border spinner-border-sm" />
-            </div>
-          </slot>
-        </td>
-      </tr>
-      <tr v-else-if="items.length === 0">
-        <td :colspan="fields.length">
-          <slot name="empty">
-            <div v-t="'table.empty_text'" class="text-center text-muted small" />
-          </slot>
-        </td>
-      </tr>
-      <tr
-        v-for="(item, key) in items"
-        v-else
-        :key="key"
-        :class="item.trClass"
-      >
-        <template v-for="field in fields" :key="field.key">
-          <td
-            :class="tdClass"
-          >
-            <!-- "item" prop deprecated, its name is too general, "value" should be used instead -->
-            <slot
-              :key="key"
-              name="td"
-              :field="field.key"
-              :row="item"
-              :item="field.key in item ? item[field.key] : null"
-              :value="field.key in item ? item[field.key] : null"
-            >
-              {{ item[field.key] }}
-            </slot>
-          </td>
-        </template>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-/**
- * @typedef {{
- *   key: String,
- *   label: String,
- *   ?sort: Boolean,
- *   }[],
- * }} Field
- */
-export default {
-  name: 'TableList',
-  props: {
-    /**
-     * Field list
-     */
-    fields: {
-      /** @type {{ new(): Field[] }} */
-      type: Array,
-      required: true,
-    },
-    /**
-     * Item list
-     */
-    items: {
-      type: Array,
-      required: true,
-    },
-    /**
-     * Items is loading
-     */
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Order by field name
-     */
-    orderBy: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Sort is descending or ascending
-     */
-    sortDesc: {
-      type: Boolean,
-      default: null,
-    },
-    /**
-     * th element css lass
-     */
-    thClass: {
-      type: String,
-      default: null,
-    },
-    /**
-     * td element css class
-     */
-    tdClass: {
-      type: String,
-      default: null,
-    },
-  },
-  emits: ['orderChanged'],
-  methods: {
-    /**
-     * Is order by active by field?
-     *
-     * @param field
-     * @returns {boolean}
-     */
-    isActiveOrderBy(field) {
-      return field === this.orderBy
-    },
-    /**
-     * Is field sortable?
-     *
-     * @param field
-     * @returns {boolean}
-     */
-    isSortableField(field) {
-      return field.sort === undefined || field.sort
-    },
-    /**
-     * Sort icon class.
-     *
-     * @returns {string}
-     */
-    getSortIconClass() {
-      if (this.sortDesc === null) {
-        throw new Error('Sort desc value is null, cannot calculate the sort icon!')
-      }
-
-      return this.sortDesc ? 'bi bi-caret-up-fill' : 'bi bi-caret-down-fill'
-    },
-    /**
-     * Calcuate sort desc value on click
-     * Returns null if there is no sortDesc value.
-     */
-    calcSortDesc(field) {
-      if (this.sortDesc === null) {
-        return null
-      }
-
-      if (!this.isOrderByChanged(field)) {
-        // if the given order is already active, the sort will be the opposite
-        return !this.sortDesc
-      }
-
-      return false // default (first click) sort is ASC
-    },
-    /**
-     * Is order by changed?
-     */
-    isOrderByChanged(field) {
-      return this.orderBy !== field
-    },
-    /**
-     * Table head clicked.
-     */
-    onHeadClick(field) {
-      if (!this.isSortableField(field)) {
-        return
-      }
-
-      this.$emit('orderChanged', { sortDesc: this.calcSortDesc(field.key), orderBy: field.key })
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.cursor-pointer {
-  cursor: pointer;
-}
-</style>

package/src/components/bs-textarea/BsTextarea.vue

@@ -1,92 +0,0 @@
-<template>
-  <label
-    v-if="label !== null"
-    :for="id"
-    class="form-label"
-    v-text="label"
-  />
-  <textarea
-    :id="id"
-    ref="inputRef"
-    :value="modelValue"
-    v-bind="$attrs"
-    class="form-control"
-    :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: 'BsTextarea',
-  mixins: [validator],
-  props: {
-    /**
-     * Value for v-model
-     */
-    modelValue: {
-      type: [String, Number],
-      default: null,
-    },
-    /**
-     * Html id
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Label for textarea
-     */
-    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-toast/BsToast.vue

@@ -1,23 +0,0 @@
-<template>
-  <div
-    ref="toastRef"
-    class="toast hide"
-    role="alert"
-    aria-live="assertive"
-    aria-atomic="true"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import { Toast } from 'bootstrap'
-
-export default {
-  name: 'BsToast',
-  mounted() {
-    const toastElement = this.$refs.toastRef
-    Toast.getOrCreateInstance(toastElement).show()
-  },
-}
-</script>

package/src/index.js

@@ -1,29 +0,0 @@
-import BsBreadcrumb from './components/bs-breadcrumb/BsBreadcrumb.vue'
-import BsForm from './components/bs-form/BsForm.vue'
-import BsInput from './components/bs-input/BsInput.vue'
-import BsCheckbox from './components/bs-checkbox/BsCheckbox.vue'
-import BsTextarea from './components/bs-textarea/BsTextarea.vue'
-import BsPaginator from './components/bs-paginator/BsPaginator.vue'
-import BsTable from './components/bs-table/BsTable.vue'
-import BsToast from './components/bs-toast/BsToast.vue'
-import BsModal from './components/bs-modal/BsModal.vue'
-import BsSelect from './components/bs-select/BsSelect.vue'
-import BsRadio from './components/bs-radio/BsRadio.vue'
-import BsOffcanvas from './components/bs-offcanvas/BsOffcanvas.vue'
-import Validator from './mixins/validator.js'
-
-export {
-  BsBreadcrumb,
-  BsForm,
-  BsInput,
-  BsCheckbox,
-  BsTextarea,
-  BsPaginator,
-  BsTable,
-  BsToast,
-  BsModal,
-  BsSelect,
-  BsRadio,
-  Validator,
-  BsOffcanvas,
-}

package/src/mixins/validator.js

@@ -1,107 +0,0 @@
-export default {
-  name: 'Validator',
-  data() {
-    return {
-      /**
-       * Invalid message
-       */
-      invalidMessage: null,
-    }
-  },
-  emits: ['invalid'],
-  methods: {
-    /**
-     * On invalid event.
-     *
-     * @param event
-     */
-    onInvalid(event) {
-      this.invalidMessage = this.getInvalidMessage(event.target)
-      this.$emit('invalid', this.invalidMessage)
-    },
-    /**
-     * Set custom error
-     *
-     * Use in parent component, e.g.: this.$refs.emailInputRef.setCustomError('Email is already taken.')
-     *
-     * @param data
-     */
-    setCustomError(data) {
-      const validationTarget = this.$refs.inputRef
-
-      if (data !== null) {
-        validationTarget.setCustomValidity(data)
-        validationTarget.classList.add('is-invalid')
-      } else {
-        validationTarget.setCustomValidity('')
-        validationTarget.classList.remove('is-invalid')
-      }
-
-      this.invalidMessage = this.getInvalidMessage(validationTarget)
-      this.$emit('invalid', this.invalidMessage)
-    },
-    /**
-     * Return invalid message.
-     *
-     * @param input
-     * @returns {string|null}
-     */
-    getInvalidMessage(input) {
-      if (input.validity.valueMissing) {
-        return this.$t('validator.error.value_missing')
-      }
-
-      if (input.validity.tooShort) {
-        return this.$t('validator.error.too_short', [input.minLength])
-      }
-
-      if (input.validity.tooLong) {
-        return this.$t('validator.error.too_long', [input.maxLength])
-      }
-
-      if (input.validity.rangeUnderflow) {
-        return this.$t('validator.error.range_underflow', [input.min])
-      }
-
-      if (input.validity.rangeOverflow) {
-        return this.$t('validator.error.range_overflow', [input.max])
-      }
-
-      if (input.validity.typeMismatch) {
-        if (input.type === 'email') {
-          return this.$t('validator.error.type_mismatch.email')
-        }
-
-        if (input.type === 'url') {
-          return this.$t('validator.error.type_mismatch.url')
-        }
-      }
-
-      if (input.validity.badInput) {
-        if (input.type === 'number') {
-          return this.$t('validator.error.bad_input.number')
-        }
-        if (input.type === 'date') {
-          return this.$t('validator.error.bad_input.date')
-        }
-      }
-
-      if (input.validity.patternMismatch) {
-        return this.$t('validator.error.pattern_mismatch')
-      }
-
-      if (input.validity.stepMismatch) {
-        const nearestMin = Math.floor(input.value / input.step) * input.step
-        const nearestMax = Math.ceil(input.value / input.step) * input.step
-
-        return this.$t('validator.error.step_mismatch', [nearestMin, nearestMax])
-      }
-
-      if (input.validity.customError) {
-        return input.validationMessage
-      }
-
-      return null
-    },
-  },
-}