vueless 0.0.112 → 0.0.113

package/directive.clickOutside/index.js

@@ -0,0 +1,53 @@
+import { unref } from "vue";
+
+function clickOutside(target, handler, options) {
+  const { capture = true } = options;
+
+  let shouldListen = true;
+
+  const el = unref(target);
+
+  function onClick(event) {
+    if (!el || el === event.target || event.composedPath().includes(el)) return;
+
+    if (!shouldListen) {
+      shouldListen = true;
+
+      return;
+    }
+
+    handler(event);
+  }
+
+  function onPointerdown(event) {
+    shouldListen = !!(el && !event.composedPath().includes(el));
+  }
+
+  window.addEventListener("click", onClick, { passive: true, capture });
+  window.addEventListener("pointerdown", onPointerdown, { passive: true });
+
+  function removeEvents() {
+    window.removeEventListener("click", onClick, { capture, passive: true });
+    window.removeEventListener("pointerdown", onPointerdown, { passive: true });
+  }
+
+  return removeEvents;
+}
+
+export default {
+  mounted(el, binding) {
+    const capture = !binding.modifiers.bubble;
+
+    if (typeof binding.value === "function") {
+      el._clickOutsideRemove = clickOutside(el, binding.value, { capture });
+    } else {
+      const [handler, options] = binding.value;
+
+      el._clickOutsideRemove = clickOutside(el, handler, Object.assign({ capture }, options));
+    }
+  },
+
+  unmounted(el) {
+    el._clickOutsideRemove();
+  },
+};

package/directive.tooltip/index.js

@@ -21,11 +21,13 @@ export default {
   mounted(el, bindings) {
     tippy(el, merge(mergedSettings, bindings.value || {}));
   },
+
   updated(el, bindings) {
     if (!el._tippy) return;
 
     el._tippy.setProps(merge(mergedSettings, bindings.value || {}));
   },
+
   unmounted(el) {
     if (!el._tippy) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.112",
+  "version": "0.0.113",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.dropdown-badge/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <UBadge
       :id="id"
-      ref="badgeRef"
       :label="label"
       :size="size"
       :color="color"
@@ -10,8 +9,7 @@
       :variant="variant"
       :data-cy="`${dataCy}-badge`"
       v-bind="badgeAttrs"
-      @click.stop="onClickBadge"
-      @blur="onBlurBadge"
+      @click="onClickBadge"
     >
       <template #right>
         <UIcon
@@ -26,26 +24,32 @@
       </template>
     </UBadge>
 
-    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
+    <div
+      v-if="isShownOptions && hasSlotContent($slots['default'])"
+      v-bind="listWrapperAttrs"
+      @click="onClickList"
+    >
       <!-- @slot Use it to add dropdown list. -->
       <slot />
     </div>
 
     <UDropdownList
       v-if="isShownOptions && !hasSlotContent($slots['default'])"
-      v-model="selectValue"
+      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
       :label-key="labelKey"
       :data-cy="`${dataCy}-item`"
       v-bind="listAttrs"
+      @mousedown.stop
+      @click.stop="onClickList"
     />
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
+import { computed, provide, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UBadge from "../ui.text-badge";
@@ -53,6 +57,8 @@ import UDropdownList from "../ui.dropdown-list";
 
 import UIService, { getRandomId } from "../service.ui";
 
+import vClickOutside from "../directive.clickOutside";
+
 import defaultConfig from "./configs/default.config";
 import { UDropdownBadge } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
@@ -61,14 +67,6 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "UDropdownBadge", inheritAttrs: false });
 
 const props = defineProps({
-  /**
-   * Selected value.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-
   /**
    * Badge label.
    */
@@ -189,25 +187,16 @@ const props = defineProps({
   },
 });
 
-provide("hideDropdownOptions", () => hideOptions);
+const emit = defineEmits(["select"]);
 
-const emit = defineEmits(["update:modelValue"]);
+provide("hideDropdownOptions", () => hideOptions);
 
 const isShownOptions = ref(false);
-
-const badgeRef = ref(null);
+const selectedItem = ref("");
 
 const { config, listWrapperAttrs, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs, hasSlotContent } =
   useAttrs(props, { isShownOptions });
 
-const selectValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    isShownOptions.value = false;
-    emit("update:modelValue", value);
-  },
-});
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",
@@ -218,10 +207,9 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-watch(() => props.modelValue, hideOptions);
-
-onMounted(() => window.addEventListener("click", onClickOutside));
-onUnmounted(() => window.removeEventListener("click", onClickOutside));
+watch(selectedItem, () => {
+  emit("select", selectedItem.value);
+});
 
 function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
@@ -231,17 +219,7 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickOutside(event) {
-  if (!badgeRef.value?.wrapperRef?.contains(event.target)) {
-    hideOptions();
-  }
-}
-
-function onBlurBadge(event) {
-  setTimeout(() => {
-    if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
-      hideOptions();
-    }
-  }, 100);
+function onClickList() {
+  hideOptions();
 }
 </script>

package/ui.dropdown-button/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <UButton
       :id="id"
-      ref="buttonRef"
       :label="label"
       :size="size"
       :variant="variant"
@@ -13,8 +12,7 @@
       :disabled="disabled"
       :data-cy="`${dataCy}-button`"
       v-bind="buttonAttrs"
-      @click.stop="onClickButton"
-      @blur="onBlurButton"
+      @click="onClickButton"
     >
       <template #right>
         <UIcon
@@ -29,14 +27,18 @@
       </template>
     </UButton>
 
-    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
+    <div
+      v-if="isShownOptions && hasSlotContent($slots['default'])"
+      v-bind="listWrapperAttrs"
+      @click="onClickList"
+    >
       <!-- @slot Use it to add dropdown list. -->
       <slot />
     </div>
 
     <UDropdownList
       v-if="isShownOptions && !hasSlotContent($slots['default'])"
-      v-model="selectValue"
+      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
@@ -45,13 +47,13 @@
       tabindex="-1"
       v-bind="listAttrs"
       @mousedown.stop
-      @click.stop
+      @click.stop="onClickList"
     />
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
+import { computed, provide, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
@@ -59,6 +61,8 @@ import UDropdownList from "../ui.dropdown-list";
 
 import UIService, { getRandomId } from "../service.ui";
 
+import vClickOutside from "../directive.clickOutside";
+
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 import { UDropdownButton, BUTTON_VARIANT } from "./constants";
@@ -218,12 +222,12 @@ const props = defineProps({
   },
 });
 
-provide("hideDropdownOptions", () => hideOptions);
+const emit = defineEmits(["select"]);
 
-const emit = defineEmits(["update:modelValue"]);
+provide("hideDropdownOptions", () => hideOptions);
 
 const isShownOptions = ref(false);
-const buttonRef = ref(null);
+const selectedItem = ref("");
 
 const {
   config,
@@ -235,14 +239,6 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isShownOptions });
 
-const selectValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    isShownOptions.value = false;
-    emit("update:modelValue", value);
-  },
-});
-
 const iconColor = computed(() => {
   return props.variant === BUTTON_VARIANT.primary ? "white" : props.color;
 });
@@ -257,10 +253,9 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-watch(() => props.modelValue, hideOptions);
-
-onMounted(() => window.addEventListener("click", onClickOutside));
-onUnmounted(() => window.removeEventListener("click", onClickOutside));
+watch(selectedItem, () => {
+  emit("select", selectedItem.value);
+});
 
 function onClickButton() {
   isShownOptions.value = !isShownOptions.value;
@@ -270,17 +265,7 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickOutside(event) {
-  if (!buttonRef.value?.buttonRef?.contains(event.target)) {
-    hideOptions();
-  }
-}
-
-function onBlurButton(event) {
-  setTimeout(() => {
-    if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
-      hideOptions();
-    }
-  }, 100);
+function onClickList() {
+  hideOptions();
 }
 </script>

package/ui.dropdown-link/index.vue

@@ -1,9 +1,8 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <div v-bind="triggerAttrs">
       <ULink
         :id="id"
-        ref="linkRef"
         :label="label"
         :size="size"
         :color="color"
@@ -13,43 +12,50 @@
         :no-ring="noRing"
         :data-cy="`${dataCy}-link`"
         v-bind="linkAttrs"
-        @click.stop="onClickLink"
-        @blur="onBlurLink"
+        @click="onClickLink"
       >
         <template #right>
           <UIcon
             v-if="!noIcon"
             internal
+            interactive
             :name="config.iconName"
             :size="iconSize"
             :color="color"
             :data-cy="`${dataCy}-caret`"
             v-bind="iconAttrs"
+            @click.stop="onClickLink"
           />
         </template>
       </ULink>
     </div>
 
-    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
+    <div
+      v-if="isShownOptions && hasSlotContent($slots['default'])"
+      v-bind="listWrapperAttrs"
+      @click="onClickList"
+    >
       <!-- @slot Use it to add dropdown list. -->
       <slot />
     </div>
 
     <UDropdownList
       v-if="isShownOptions && !hasSlotContent($slots['default'])"
-      v-model="selectValue"
+      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
       :label-key="labelKey"
       :data-cy="`${dataCy}-item`"
       v-bind="listAttrs"
+      @mousedown.stop
+      @click.stop="onClickList"
     />
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
+import { computed, provide, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import ULink from "../ui.button-link";
@@ -57,6 +63,8 @@ import UDropdownList from "../ui.dropdown-list";
 
 import UIService, { getRandomId } from "../service.ui";
 
+import vClickOutside from "../directive.clickOutside";
+
 import { UDropdownLink } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
@@ -65,14 +73,6 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "UDropdownLink", inheritAttrs: false });
 
 const props = defineProps({
-  /**
-   * Selected value.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-
   /**
    * Link label.
    */
@@ -207,13 +207,12 @@ const props = defineProps({
   },
 });
 
-provide("hideDropdownOptions", () => hideOptions());
+const emit = defineEmits(["select"]);
 
-const emit = defineEmits(["update:modelValue"]);
+provide("hideDropdownOptions", () => hideOptions());
 
 const isShownOptions = ref(false);
-
-const linkRef = ref(null);
+const selectedItem = ref("");
 
 const {
   config,
@@ -226,14 +225,6 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isShownOptions });
 
-const selectValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    isShownOptions.value = false;
-    emit("update:modelValue", value);
-  },
-});
-
 const iconSize = computed(() => {
   const sizes = {
     xs: "2xs",
@@ -245,10 +236,9 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-watch(() => props.modelValue, hideOptions);
-
-onMounted(() => window.addEventListener("click", onClickOutside));
-onUnmounted(() => window.removeEventListener("click", onClickOutside));
+watch(selectedItem, () => {
+  emit("select", selectedItem.value);
+});
 
 function onClickLink() {
   isShownOptions.value = !isShownOptions.value;
@@ -258,17 +248,7 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickOutside(event) {
-  if (!linkRef.value?.wrapperRef?.contains(event.target)) {
-    hideOptions();
-  }
-}
-
-function onBlurLink(event) {
-  setTimeout(() => {
-    if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
-      hideOptions();
-    }
-  }, 100);
+function onClickList() {
+  hideOptions();
 }
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.112",
+  "version": "0.0.113",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1994,15 +1994,6 @@
           "name": "UDropdownBadge",
           "description": "",
           "attributes": [
-            {
-              "name": "modelValue",
-              "description": "Selected value.",
-              "value": {
-                "kind": "expression",
-                "type": "string|number"
-              },
-              "default": "\"\""
-            },
             {
               "name": "label",
               "description": "Badge label.",
@@ -2132,7 +2123,7 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "select"
             }
           ],
           "slots": [
@@ -2315,7 +2306,7 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "select"
             }
           ],
           "slots": [
@@ -2380,15 +2371,6 @@
           "name": "UDropdownLink",
           "description": "",
           "attributes": [
-            {
-              "name": "modelValue",
-              "description": "Selected value.",
-              "value": {
-                "kind": "expression",
-                "type": "string|number"
-              },
-              "default": "\"\""
-            },
             {
               "name": "label",
               "description": "Link label.",
@@ -2536,7 +2518,7 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "select"
             }
           ],
           "slots": [