1.0.0-beta1

Author: unknown

Diff for: README.txt

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

Diff for: css/mdb.min.css

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

Diff for: css/mdb.min.css.map

@@ -86,8 +86,10 @@ export default {
     // controls if DropdownMenu has been mounted into DOM and its element
     // can be targeted by the Popper setup function
     const isMenuMounted = ref(false);
-    const setMenuMountedState = boolean => {
+    const dropdownMenu = ref(null);
+    const setMenuMountedState = (boolean, menuRef) => {
       isMenuMounted.value = boolean;
+      dropdownMenu.value = menuRef;
     };
     provide("setMenuMountedState", setMenuMountedState);
 
@@ -124,6 +126,7 @@ export default {
     });
 
     provide("isPopperActive", isPopperActive);
+    provide("externalTarget", props.target);
 
     // ------------------- handleEscAndOutsideClick -------------------
     // mimics toggling modelValue when user click outside the toggle button
@@ -147,7 +150,7 @@ export default {
       triggerEl.value = props.target
         ? document.querySelector(props.target)
         : root.value.querySelector("[data-trigger]");
-      popperEl.value = root.value.querySelector("[data-popper]");
+      popperEl.value = dropdownMenu.value;
 
       if (typeof props.align === "string") {
         menuAlignClasses.value = `dropdown-menu-${props.align}`;
@@ -174,7 +177,9 @@ export default {
         modifiers: {
           offset: {
             offset: props.offset || "0"
-          }
+          },
+          preventOverflow: { enabled: true },
+          flip: { enabled: true }
         }
       };
 

Diff for: js/mdb.common.js

@@ -1,5 +1,5 @@
 <template>
-  <transition>
+  <transition v-if="!shouldTeleport">
     <component
       v-if="isMounted"
       :is="tag"
@@ -12,10 +12,25 @@
       <slot />
     </component>
   </transition>
+  <teleport v-else :to="externalTarget">
+    <transition>
+      <component
+        v-if="isMounted"
+        :is="tag"
+        :class="className"
+        :style="staticStyle"
+        v-bind="attrs"
+        :data-popper="externalTarget"
+        ref="root"
+      >
+        <slot />
+      </component>
+    </transition>
+  </teleport>
 </template>
 
 <script>
-import { computed, inject, ref, watch } from "vue";
+import { computed, inject, onMounted, ref, watch } from "vue";
 import { on, off } from "../../utils/MDBEventHandlers.js";
 
 export default {
@@ -86,8 +101,8 @@ export default {
       cur => {
         if (cur) {
           setTimeout(() => {
-            setMenuMountedState(true);
-          }, 10);
+            setMenuMountedState(true, root.value);
+          }, 100);
         } else if (!cur && isPopperActive) {
           setInactive();
 
@@ -123,6 +138,18 @@ export default {
       }
     });
 
+    const externalTarget = inject("externalTarget", false);
+    const shouldTeleport = ref(false);
+
+    onMounted(() => {
+      if (externalTarget) {
+        const target = document.body.querySelector(externalTarget);
+        if (target) {
+          shouldTeleport.value = true;
+        }
+      }
+    });
+
     // ------------------- isPopperActive -------------------
     // controls if DropdownMenu is visible for user or not
     // controls show class and animation
@@ -205,6 +232,8 @@ export default {
       showClass,
       className,
       isMounted,
+      shouldTeleport,
+      externalTarget,
       root,
       attrs,
       props

Diff for: js/mdb.common.js.map

@@ -23,7 +23,6 @@ import mdbClickOutside from "@/directives/free/mdbClickOutside.js";
 
 export default {
   name: "MDBDropdownToggle",
-
   components: { MDBBtn },
   inheritAttrs: false,
   emits: ["toggle-dropdown"],
@@ -33,10 +32,6 @@ export default {
       type: String,
       default: "button"
     },
-    color: {
-      type: String,
-      default: "primary"
-    },
     href: [String, null],
     split: {
       type: Boolean,
@@ -52,15 +47,20 @@ export default {
         btnClass.value,
         "dropdown-toggle",
         props.split && "dropdown-toggle-split",
-        props.size && `btn-${props.size}`
+        props.size && `btn-${props.size}`,
+        props.outline && `btn-outline-${props.outline}`
       ];
     });
 
     const btnClass = computed(() => {
-      if (props.tag === "button") {
-        const color = props.color ? `btn-${props.color}` : "";
-        return `btn ${color}`;
-      }
+      if (props.tag !== "button") return;
+      const color =
+        props.color && !props.outline
+          ? `btn-${props.color}`
+          : props.outline
+          ? ""
+          : "btn-primary";
+      return `btn ${color}`;
     });
 
     const expanded = ref(false);

Diff for: js/mdb.umd.min.js

@@ -14,10 +14,10 @@
     <label v-if="label" :class="labelClassName" :for="uid">
       {{ label }}
     </label>
-    <div :class="validFeedbackClassName">
+    <div v-if="validFeedback" :class="validFeedbackClassName">
       {{ validFeedback }}
     </div>
-    <div :class="invalidFeedbackClassName">
+    <div v-if="invalidFeedback" :class="invalidFeedbackClassName">
       {{ invalidFeedback }}
     </div>
   </component>
@@ -36,10 +36,10 @@
   <label v-if="!wrap && label" :class="labelClassName" :for="uid">
     {{ label }}
   </label>
-  <div v-if="!wrap" :class="validFeedbackClassName">
+  <div v-if="!wrap && validFeedback" :class="validFeedbackClassName">
     {{ validFeedback }}
   </div>
-  <div v-if="!wrap" :class="invalidFeedbackClassName">
+  <div v-if="!wrap && invalidFeedback" :class="invalidFeedbackClassName">
     {{ invalidFeedback }}
   </div>
 </template>
@@ -64,7 +64,6 @@ export default {
     validateOnChange: Boolean,
     isValidated: Boolean,
     isValid: Boolean,
-    isInvalid: Boolean,
     validFeedback: String,
     invalidFeedback: String,
     tooltipFeedback: {
@@ -101,10 +100,8 @@ export default {
       return [
         props.btnCheck ? "btn-check" : "form-check-input",
         props.inputClass && props.inputClass,
-        ((isInputValidated.value && isInputValid.value) || props.isValid) &&
-          "is-valid",
-        ((isInputValidated.value && !isInputValid.value) || props.isInvalid) &&
-          "is-invalid"
+        isInputValidated.value && isInputValid.value && "is-valid",
+        isInputValidated.value && !isInputValid.value && "is-invalid"
       ];
     });
     const labelClassName = computed(() => {

Diff for: js/mdb.umd.min.js.map

@@ -0,0 +1,112 @@
+<template>
+  <label v-if="label" :class="labelClassName" :for="uid">{{ label }}</label>
+  <input
+    type="file"
+    :class="inputClassName"
+    v-bind="attrs"
+    :id="uid"
+    @change="handleChange"
+  />
+  <div v-if="validFeedback" :class="validFeedbackClassName">
+    {{ validFeedback }}
+  </div>
+  <div v-if="invalidFeedback" :class="invalidFeedbackClassName">
+    {{ invalidFeedback }}
+  </div>
+</template>
+
+<script>
+import { computed, ref, watch } from "vue";
+import { getUID } from "../../utils/getUID";
+
+export default {
+  name: "MDBFile",
+  props: {
+    id: String,
+    inputClass: String,
+    invalidFeedback: String,
+    isInvalid: Boolean,
+    isValid: Boolean,
+    isValidated: Boolean,
+    label: String,
+    labelClass: String,
+    modelValue: {
+      type: [FileList, Array],
+      default: () => []
+    },
+    size: String,
+    tooltipFeedback: Boolean,
+    validFeedback: String,
+    validateOnChange: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(props, { attrs, emit }) {
+    const uid = props.id || getUID("MDBFile-");
+    const inputValue = ref(props.modelValue);
+
+    const inputClassName = computed(() => {
+      return [
+        "form-control",
+        props.size && `form-control-${props.size}`,
+        isInputValidated.value && isInputValid.value && "is-valid",
+        isInputValidated.value && !isInputValid.value && "is-invalid",
+        props.inputClass
+      ];
+    });
+    const labelClassName = computed(() => {
+      return ["form-label", props.labelClass];
+    });
+    const validFeedbackClassName = computed(() => {
+      return props.tooltipFeedback ? "valid-tooltip" : "valid-feedback";
+    });
+    const invalidFeedbackClassName = computed(() => {
+      return props.tooltipFeedback ? "invalid-tooltip" : "invalid-feedback";
+    });
+
+    // Validation ------------------------
+    const isInputValidated = ref(props.isValidated);
+    const isInputValid = ref(props.isValid);
+
+    const handleValidation = event => {
+      isInputValid.value = event.target.files.length > 0;
+      isInputValidated.value = true;
+    };
+
+    const handleChange = event => {
+      inputValue.value = event.target.files;
+      emit("update:modelValue", inputValue.value);
+
+      if (props.validateOnChange) {
+        handleValidation(event);
+      }
+    };
+
+    watch(
+      () => props.modelValue,
+      value => (inputValue.value = value)
+    );
+
+    watch(
+      () => props.isValidated,
+      value => (isInputValidated.value = value)
+    );
+
+    watch(
+      () => props.isValid,
+      value => {
+        isInputValid.value = value;
+      }
+    );
+
+    return {
+      attrs,
+      uid,
+      inputClassName,
+      labelClassName,
+      validFeedbackClassName,
+      invalidFeedbackClassName,
+      handleChange
+    };
+  }
+};
+</script>