feat: Added new click-outside-directives

Feat: Added new click outside directives/mixins

Author: ChristianKienle

docs/src/pages/ClickOutside/0-default.vue

@@ -0,0 +1,70 @@
+<title>Click Outside Directive</title>
+<tip>The `on-click-outside`-directive is private and should not be used by app. It may be properly exposed at some point in the future.</tip>
+<docs>You can use the directive `v-on-click-outside` in order to detect clicks outside of a specific component/element.</docs>
+<tip>Use `v-is-inside`, in order to mark additional elements/components as being part of the inside. Anything marked with `v-is-inside` won't cause the outside-hanlder to be called.</tip>
+
+<template>
+  <div>
+    <FdAlert :dismissible="false">
+      {{ message }}
+    </FdAlert>
+    <br /><br />
+    <div class="outside">
+      <p>this is where the <strong>outside</strong> starts</p>
+      <div
+        class="inside"
+        v-on-click-outside="clickOutside"
+        @click="message = 'Click inside detected.'"
+      >
+        <p>
+          <strong>inside:</strong> Clicks will not trigger a
+          <em>clickOutside</em>-event.
+        </p>
+      </div>
+      <div
+        class="inside"
+        v-is-inside
+        @click="message = 'Click inside detected.'"
+      >
+        <p>
+          <strong>inside:</strong> even though it is not inside a
+          <code>v-on-click-outside</code>-container.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({ clickOutsideContext: "context", message: "Click somewhere." }),
+  methods: {
+    clickOutside() {
+      this.message = "Click outside detected.";
+    }
+  }
+};
+</script>
+
+<style scoped>
+.outside > * {
+  margin: 30px 0;
+}
+
+.inside {
+  border: 1px solid #aaaaaa;
+  background-color: #fefefe;
+  color: black;
+  text-align: center;
+  vertical-align: middle;
+  padding: 20px;
+}
+.outside {
+  border: 1px solid #aaaaaa;
+  background-color: #fefefe;
+  color: black;
+  text-align: center;
+  vertical-align: middle;
+  padding: 20px;
+}
+</style>

docs/src/pages/ClickOutside/index.ts

@@ -0,0 +1,5 @@
+import { ExampleCollectionFunction } from "../types";
+
+export const plugin: ExampleCollectionFunction = () => {
+  return { icon: "cursor", related: [] };
+};

docs/src/pages/pages.json

@@ -10,6 +10,15 @@
       "FdActionBar"
     ]
   },
+  {
+    "id": "./ClickOutside/index.ts",
+    "status": "inprogress",
+    "slug": "ClickOutside",
+    "key": "./ClickOutside/index.ts",
+    "title": "ClickOutside",
+    "icon": "cursor",
+    "related": []
+  },
   {
     "id": "./Alert/index.ts",
     "status": "stable",

ui/src/__tests__/vue-plugin.test.ts ui/src/__tests__/vue-plugin.test.jsui/src/__tests__/vue-plugin.test.ts renamed to ui/src/__tests__/vue-plugin.test.js

@@ -21,44 +21,38 @@
   </FdPopover>
 </template>
 
-<script lang="ts">
-import { mixins, Uid } from "@/mixins";
-import {
-  Input as FdInput,
-  InputGroup as FdInputGroup
-} from "@/components/Form";
-import FdButton from "@/components/Button/Button.vue";
+<script>
+import { Uid } from "@/mixins";
+import { InputGroup as FdInputGroup } from "@/components/Form";
 import FdPopover from "@/components/Popover/Popover.vue";
-import { PropValidator } from "vue/types/options";
 
-export default mixins(Uid).extend({
+export default {
   name: "FdComboboxBase",
+  mixins: [Uid],
   model: {
     prop: "value",
     event: "update"
   },
   components: {
-    FdButton,
     FdPopover,
-    FdInput,
     FdInputGroup
   },
-  provide(): object {
+  provide() {
     return {
-      combobox: this as any
+      combobox: this
     };
   },
   props: {
-    value: { type: String, default: null } as PropValidator<string | null>,
-    placeholder: { type: String, default: "" } as PropValidator<string>,
-    popoverVisible: { type: Boolean, default: false } as PropValidator<boolean>,
-    compact: { type: Boolean, default: false } as PropValidator<boolean>
+    value: { type: String, default: null },
+    placeholder: { type: String, default: "" },
+    popoverVisible: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false }
   },
   data() {
     return {
-      currentPopoverVisible: this.popoverVisible as boolean,
-      currentValue: this.value as string | number | null
+      currentPopoverVisible: this.popoverVisible,
+      currentValue: this.value
     };
   }
-});
+};
 </script>

ui/src/components/ClickAwayContainer.ts

@@ -2,9 +2,8 @@
   <div class="fd-shellbar"><slot /></div>
 </template>
 
-<script lang="ts">
-import Vue from "vue";
-export default Vue.extend({
+<script>
+export default {
   name: "FdShellBar"
-});
+};
 </script>