bootstrap-vue-wrapper 1.11.2 → 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,83 @@
+# Changelog
+
+## [2.0.0] - 2024-02-01
+
+Version 2.0 Changelog
+Major Changes:
+- Codebase Rewrite: The entire codebase has been rewritten in TypeScript, providing stronger type guarantees, improved maintainability, and enhanced developer experience.
+- `BsTable` template `item` property renamed to `value`
+- `hideValidationMessage` property has been removed. Instead, use the `validatorEnabled` property to disable validation.
+
+New Features:
+- Development Support Enhancements: Introduced a dedicated examples directory within the development (dev) folder, offering a comprehensive suite of examples to assist developers in understanding and utilizing the library's capabilities more effectively.
+
+Improvements:
+- Validator Component Overhaul: Rethought and redesigned the validator component. It is no longer implemented as a mixin. Instead, it is now a standalone component utilizing the Composition API, aligning with modern Vue.js best practices and improving its reusability and composability in applications.
+
+Fixes:
+- Bug Fixes: Addressed various bugs and issues identified in the previous versions, enhancing the stability and reliability of the library.
+
+Migrate from 1.x to 2.x:
+
+If you want to display the validation message elsewhere, not directly below the input, this could previously be achieved as follows:
+```
+<div class="input-group">
+  <bs-input
+    id="customerNameInput"
+    ref="customerNameInputRef"
+    v-model="customerName"
+    type="text"
+    :hide-validation-message="true"
+    minlength="3"
+    @invalid="onCustomerNameInvalid"
+  />
+  <button
+    class="btn btn-primary rounded-end"
+    type="submit"
+  >
+    Search
+  </button>
+  <div v-if="customerNameInvalidMessage !== null" class="invalid-feedback">
+    {{ customerNameInvalidMessage }}
+  </div>
+</div>
+
+...
+
+/**
+ * @param invalidMessage
+ */
+onCustomerNameInvalid(invalidMessage) {
+  this.customerNameInvalidMessage = invalidMessage
+},
+```
+
+In version 2.x, it can be done like this:
+```
+<div class="input-group">
+  <bs-input
+    id="customerNameInput"
+    ref="customerNameInputRef"
+    v-model="customerName"
+    type="text"
+    minlength="3"
+    :validator-enabled="false"
+    @invalid="customerNameValidator.onInvalid"
+  />
+  <button
+    class="btn btn-primary rounded-end"
+    type="submit"
+  >
+    Search
+  </button>
+  <div v-if="customerNameValidator.getInvalidMessage() !== null" class="invalid-feedback">
+    {{ customerNameValidator.getInvalidMessage() }}
+  </div>
+</div>
+
+...
+  
+setup() {
+  const customerNameValidator = useValidator(customerNameInputRef)
+}
+```

package/README.md

@@ -2,10 +2,9 @@
 
 [![NPM version](https://img.shields.io/npm/v/bootstrap-vue-wrapper.svg)](https://www.npmjs.com/package/bootstrap-vue-wrapper)
 
-
 ## Requirements:
-- bootstrap 5
-- bootstrap icons
+- Bootstrap 5
+- Bootstrap icons
 - Vue i18n (for custom validation messages)
 - Vue router (for `<router-link>`)
 - Vue 3
@@ -15,45 +14,3 @@
 ```bash
 npm install bootstrap-vue-wrapper
 ```
-## Examples:
-
-
-### Table:
-
-```html
-<bs-table
-  class="table-striped table-hover"
-  :fields="fields"
-  :items="items"
-  :order-by="orderBy"
-  :is-loading="isLoading"
-  @orderChanged="onOrderChanged"
-/>
-
-...
-
-<script>
-  import { BsTable } from 'bootstrap-vue-wrapper'
-</script>
-```
-
-### Custom validation message:
-
-```html
-<bs-input
-  id="emailInput"
-  ref="emailInputRef"
-  v-model="email"
-  type="email"
-  label="Email"
-  required
-/>
-
-...
-
-<script>
-  errorFromServer() {
-    this.$refs.emailInputRef.setCustomError('Email is already taken.')
-  }
-</script>
-```