1.0.0-beta2

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 MDBootstrap
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.txt

@@ -1,6 +1,6 @@
 MDB 5 Vue
 
-Version: FREE 1.0.0-beta1
+Version: FREE 1.0.0-beta2
 
 Documentation:
 https://mdbootstrap.com/docs/b5/vue/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-vue-ui-kit",
-  "version": "1.0.0-beta1",
+  "version": "1.0.0-beta2",
   "main": "js/mdb.umd.min.js",
   "repository": "https://github.com/mdbootstrap/mdb-vue-ui-kit.git",
   "author": "MDBootstrap",

src/components/free/components/MDBBtn.vue

@@ -48,7 +48,8 @@ export default {
         props.outline || props.color === "light" || props.color === "link"
           ? { color: "dark" }
           : true
-    }
+    },
+    picker: Boolean
   },
   directives: { mdbRipple },
   inheritAttrs: false,
@@ -58,7 +59,7 @@ export default {
 
     const className = computed(() => {
       return [
-        "btn",
+        !props.picker && "btn",
         props.color && `btn-${props.color}`,
         props.size && `btn-${props.size}`,
         props.outline && `btn-outline-${props.outline}`,

src/components/free/components/MDBDropdownToggle.vue

@@ -3,7 +3,6 @@
     :is="tag"
     type="button"
     :class="className"
-    data-mdb-toggle="dropdown"
     :aria-expanded="expanded"
     aria-haspopup="true"
     v-bind="attrs"

src/components/free/forms/MDBInput.vue

@@ -23,6 +23,17 @@
   <div v-if="!wrap && customInvalidFeedback" :class="invalidFeedbackClassName">
     {{ customInvalidFeedback }}
   </div>
+  <div v-if="!wrap && formOutline" class="form-notch">
+    <div
+      class="form-notch-leading"
+      :style="{ width: `${notchLeadingWidth}px` }"
+    ></div>
+    <div
+      class="form-notch-middle"
+      :style="{ width: `${notchMiddleWidth}px` }"
+    ></div>
+    <div class="form-notch-trailing"></div>
+  </div>
   <component
     v-if="wrap"
     :is="tag"
@@ -82,7 +93,7 @@ export default {
     id: String,
     label: String,
     labelClass: String,
-    modelValue: [String, Number],
+    modelValue: [String, Number, Date],
     size: String,
     formOutline: {
       type: Boolean,
@@ -233,7 +244,9 @@ export default {
       off(inputRef.value, props.validationEvent, handleValidation);
     });
 
-    watchEffect(() => (inputValue.value = props.modelValue));
+    watchEffect(() => {
+      inputValue.value = props.modelValue;
+    });
 
     watch(
       () => props.isValidated,

src/components/free/navigation/MDBNavbarToggler.vue

@@ -3,8 +3,6 @@
     :is="tag"
     :class="navTogglerClass"
     type="button"
-    data-mdb-toggle="collapse"
-    :data-mdb-target="target"
     :aria-controls="target"
     :aria-expanded="isExpanded"
     aria-label="Toggle navigation"

src/components/utils/MDBEventHandlers.js

@@ -1,15 +1,135 @@
-export const on = function(element, event, handler) {
-  if (element && event && handler) {
-    document.addEventListener
-      ? element.addEventListener(event, handler, false)
-      : element.attachEvent("on" + event, handler);
+const stripNameRegex = /\..*/;
+const customEvents = {
+  mouseenter: "mouseover",
+  mouseleave: "mouseout"
+};
+const nativeEvents = [
+  "click",
+  "dblclick",
+  "mouseup",
+  "mousedown",
+  "contextmenu",
+  "mousewheel",
+  "DOMMouseScroll",
+  "mouseover",
+  "mouseout",
+  "mousemove",
+  "selectstart",
+  "selectend",
+  "keydown",
+  "keypress",
+  "keyup",
+  "orientationchange",
+  "touchstart",
+  "touchmove",
+  "touchend",
+  "touchcancel",
+  "pointerdown",
+  "pointermove",
+  "pointerup",
+  "pointerleave",
+  "pointercancel",
+  "gesturestart",
+  "gesturechange",
+  "gestureend",
+  "focus",
+  "blur",
+  "change",
+  "reset",
+  "select",
+  "submit",
+  "focusin",
+  "focusout",
+  "load",
+  "unload",
+  "beforeunload",
+  "resize",
+  "move",
+  "DOMContentLoaded",
+  "readystatechange",
+  "error",
+  "abort",
+  "scroll"
+];
+
+function normalizeParams(originalTypeEvent, handler, delegationFn) {
+  const delegation = typeof handler === "string";
+  const originalHandler = delegation ? delegationFn : handler;
+
+  // allow to get the native events from namespaced events ('click.bs.button' --> 'click')
+  let typeEvent = originalTypeEvent.replace(stripNameRegex, "");
+  const custom = customEvents[typeEvent];
+
+  if (custom) {
+    typeEvent = custom;
+  }
+
+  const isNative = nativeEvents.indexOf(typeEvent) > -1;
+
+  if (!isNative) {
+    typeEvent = originalTypeEvent;
+  }
+
+  return [delegation, originalHandler, typeEvent];
+}
+
+function addHandler(element, originalTypeEvent, handler, delegationFn) {
+  if (typeof originalTypeEvent !== "string" || !element) {
+    return;
+  }
+
+  if (!handler) {
+    handler = delegationFn;
+    delegationFn = null;
+  }
+
+  const [delegation, originalHandler, typeEvent] = normalizeParams(
+    originalTypeEvent,
+    handler,
+    delegationFn
+  );
+  element.addEventListener(typeEvent, originalHandler, delegation);
+}
+
+function removeHandler(element, typeEvent, handler, delegationSelector) {
+  element.removeEventListener(typeEvent, handler, !!delegationSelector);
+}
+
+export const on = function(element, event, handler, delegationFn) {
+  addHandler(element, event, handler, delegationFn);
+};
+
+export const off = function(element, event, handler, delegationFn) {
+  if (typeof event !== "string" || !element) {
+    return;
+  }
+
+  const [delegation, originalHandler, typeEvent] = normalizeParams(
+    event,
+    handler,
+    delegationFn
+  );
+
+  removeHandler(
+    element,
+    typeEvent,
+    originalHandler,
+    delegation ? handler : null
+  );
+};
+
+export const onMulti = function(element, eventArray, handler, delegationFn) {
+  const events = eventArray.split(" ");
+
+  for (let i = 0; i < events.length; i++) {
+    on(element, events[i], handler, delegationFn);
   }
 };
 
-export const off = function(element, event, handler) {
-  if (element && event) {
-    document.removeEventListener
-      ? element.removeEventListener(event, handler, false)
-      : element.detachEvent("on" + event, handler);
+export const offMulti = function(element, eventArray, handler, delegationFn) {
+  const events = eventArray.split(" ");
+
+  for (let i = 0; i < events.length; i++) {
+    off(element, events[i], handler, delegationFn);
   }
 };

src/components/utils/MDBFocusTrap.js

@@ -0,0 +1,74 @@
+import { ref } from "vue";
+import { on, off } from "./MDBEventHandlers";
+
+function MDBFocusTrap() {
+  const trapElement = ref(null);
+  const firstFocusableElement = ref(null);
+  const lastFocusableElement = ref(null);
+
+  function initFocusTrap(element) {
+    trapElement.value = element;
+
+    calculateFocusTrap();
+
+    on(window, "keydown", focusFirstElement);
+
+    return true;
+  }
+
+  function calculateFocusTrap() {
+    const focusable = Array.from(
+      trapElement.value.querySelectorAll(
+        'button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter(el => {
+      return (
+        !el.classList.contains("ps__thumb-x") &&
+        !el.classList.contains("ps__thumb-y") &&
+        !el.disabled
+      );
+    });
+
+    if (focusable.length === 0) return;
+
+    firstFocusableElement.value = focusable[0];
+
+    lastFocusableElement.value = focusable[focusable.length - 1];
+    on(lastFocusableElement.value, "keydown", e =>
+      handleLastElementKeydown(e, true)
+    );
+  }
+
+  function handleLastElementKeydown(e) {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      focusTrap();
+    }
+  }
+
+  function focusTrap() {
+    if (!firstFocusableElement.value) return;
+
+    firstFocusableElement.value.focus();
+  }
+
+  function focusFirstElement(e, trap = false) {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      focusTrap();
+    }
+    if (trap) return;
+    off(window, "keydown", focusFirstElement);
+  }
+
+  function removeFocusTrap() {
+    off(lastFocusableElement.value, "keydown", handleLastElementKeydown);
+  }
+
+  return {
+    initFocusTrap,
+    removeFocusTrap
+  };
+}
+
+export default MDBFocusTrap;

src/directives/free/mdbFocusTrap.js

@@ -0,0 +1,63 @@
+import { on, off } from "@/components/utils/MDBEventHandlers";
+
+export default {
+  mounted(el) {
+    if (!el) return;
+
+    let firstFocusableElement;
+    let lastFocusableElement;
+
+    el.initFocusTrap = () => {
+      el.calculateFocusTrap();
+
+      on(window, "keydown", el.focusFirstElement);
+    };
+
+    el.calculateFocusTrap = () => {
+      const focusable = Array.from(
+        el.querySelectorAll(
+          'button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        )
+      ).filter(item => {
+        return (
+          !item.classList.contains("ps__thumb-x") &&
+          !item.classList.contains("ps__thumb-y") &&
+          !item.disabled
+        );
+      });
+
+      if (focusable.length === 0) return;
+
+      firstFocusableElement = focusable[0];
+
+      lastFocusableElement = focusable[focusable.length - 1];
+      on(lastFocusableElement, "keydown", e => el.focusFirstElement(e, true));
+    };
+
+    el.focusTrap = () => {
+      if (!firstFocusableElement) return;
+
+      firstFocusableElement.focus();
+    };
+
+    el.focusFirstElement = (e, trap = false) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        el.focusTrap();
+      }
+      if (trap) return;
+      off(window, "keydown", el.focusFirstElement);
+    };
+
+    el.removeFocusTrap = () => {
+      off(lastFocusableElement, "keydown", el.handleLastElementKeydown);
+    };
+
+    el.initFocusTrap();
+  },
+  unmounted(el) {
+    if (!el) return;
+
+    el.removeFocusTrap();
+  }
+};