refactor: rename directives & affix use setup

Author: wxsms

src/components/affix/Affix.vue

@@ -1,77 +1,62 @@
 <template>
-  <div class="hidden-print">
+  <div ref="el" class="hidden-print">
     <div v-scroll="onScroll" :class="classes" :style="styles">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<script>
-import scroll from './../../directives/scroll';
+<script setup>
+import vScroll from './../../directives/scroll';
+import { computed, defineProps, ref, nextTick } from 'vue';
 
-export default {
-  directives: {
-    scroll,
+const props = defineProps({
+  offset: {
+    type: Number,
+    default: 0,
   },
-  props: {
-    offset: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      affixed: false,
-    };
-  },
-  computed: {
-    classes() {
-      return {
-        affix: this.affixed,
-      };
-    },
-    styles() {
-      return {
-        top: this.affixed ? this.offset + 'px' : null,
-      };
-    },
-  },
-  methods: {
-    // from https://github.com/ant-design/ant-design/blob/master/components/affix/index.jsx#L20
-    onScroll() {
-      // if is hidden don't calculate anything
-      if (
-        !(
-          this.$el.offsetWidth ||
-          this.$el.offsetHeight ||
-          this.$el.getClientRects().length
-        )
-      ) {
-        return;
-      }
-      // get window scroll and element position to detect if have to be normal or affixed
-      const scroll = {};
-      const element = {};
-      const rect = this.$el.getBoundingClientRect();
-      const body = document.body;
-      const types = ['Top', 'Left'];
-      types.forEach((type) => {
-        const t = type.toLowerCase();
-        scroll[t] = window['page' + (type === 'Top' ? 'Y' : 'X') + 'Offset'];
-        element[t] =
-          scroll[t] +
-          rect[t] -
-          (this.$el['client' + type] || body['client' + type] || 0);
-      });
-      const fix = scroll.top > element.top - this.offset;
-      if (this.affixed !== fix) {
-        this.affixed = fix;
-        this.$emit(this.affixed ? 'affix' : 'unfix');
-        this.$nextTick(() => {
-          this.$emit(this.affixed ? 'affixed' : 'unfixed');
-        });
-      }
-    },
-  },
-};
+});
+
+const emit = defineEmits(['affix', 'affixed', 'unfix', 'unfixed']);
+
+const el = ref(null);
+const affixed = ref(false);
+const classes = computed(() => ({ affix: affixed.value }));
+const styles = computed(() => ({
+  top: affixed.value ? props.offset + 'px' : null,
+}));
+
+function onScroll() {
+  if (
+    !(
+      el.value?.offsetWidth ||
+      el.value?.offsetHeight ||
+      el.value?.getClientRects().length
+    )
+  ) {
+    return;
+  }
+  // get window scroll and element position to detect if have to be normal or affixed
+  const scroll = {};
+  const element = {};
+  const rect = el.value.getBoundingClientRect();
+  const body = document.body;
+  const types = ['Top', 'Left'];
+  types.forEach((type) => {
+    const t = type.toLowerCase();
+    scroll[t] = window['page' + (type === 'Top' ? 'Y' : 'X') + 'Offset'];
+    element[t] =
+      scroll[t] +
+      rect[t] -
+      (el.value['client' + type] || body['client' + type] || 0);
+  });
+  const fix = scroll.top > element.top - props.offset;
+  if (affixed.value !== fix) {
+    affixed.value = fix;
+    emit(affixed.value ? 'affix' : 'unfix');
+    nextTick(() => {
+      emit(affixed.value ? 'affixed' : 'unfixed');
+    });
+  }
+}
 </script>

src/directives/popover/popover.js

@@ -4,9 +4,9 @@ import { hasOwnProperty } from '../../utils/object.utils';
 
 const INSTANCE = '_uiv_popover_instance';
 
-const bind = (el, binding) => {
+const mounted = (el, binding) => {
   // console.log('bind')
-  unbind(el);
+  unmounted(el);
   const options = [];
   for (const key in binding.modifiers) {
     if (hasOwnProperty(binding.modifiers, key) && binding.modifiers[key]) {
@@ -54,7 +54,7 @@ const bind = (el, binding) => {
   el[INSTANCE] = container;
 };
 
-const unbind = (el) => {
+const unmounted = (el) => {
   // console.log('unbind')
   const instance = el[INSTANCE];
   if (instance) {
@@ -63,11 +63,11 @@ const unbind = (el) => {
   delete el[INSTANCE];
 };
 
-const update = (el, binding) => {
+const updated = (el, binding) => {
   // console.log('update')
   if (binding.value !== binding.oldValue) {
-    bind(el, binding);
+    mounted(el, binding);
   }
 };
 
-export default { mounted: bind, unmounted: unbind, updated: update };
+export default { mounted, unmounted, updated };

src/directives/scroll.js

@@ -4,29 +4,29 @@ import { isFunction } from '../utils/object.utils';
 const HANDLER = '_uiv_scroll_handler';
 const events = [EVENTS.RESIZE, EVENTS.SCROLL];
 
-const bind = (el, binding) => {
+const mounted = (el, binding) => {
   const callback = binding.value;
   if (!isFunction(callback)) {
     return;
   }
-  unbind(el);
+  unmounted(el);
   el[HANDLER] = callback;
   events.forEach((event) => {
     on(window, event, el[HANDLER]);
   });
 };
 
-const unbind = (el) => {
+const unmounted = (el) => {
   events.forEach((event) => {
     off(window, event, el[HANDLER]);
   });
   delete el[HANDLER];
 };
 
-const update = (el, binding) => {
+const updated = (el, binding) => {
   if (binding.value !== binding.oldValue) {
-    bind(el, binding);
+    mounted(el, binding);
   }
 };
 
-export default { mounted: bind, unmounted: unbind, updated: update };
+export default { mounted, unmounted, updated };

src/directives/scrollspy/scrollspy.js

@@ -141,12 +141,12 @@ ScrollSpy.prototype.clear = function () {
 const INSTANCE = '_uiv_scrollspy_instance';
 const events = [EVENTS.RESIZE, EVENTS.SCROLL];
 
-const bind = (el, binding) => {
+const beforeMount = (el, binding) => {
   // console.log('bind')
-  unbind(el);
+  unmounted(el);
 };
 
-const inserted = (el, binding) => {
+const mounted = (el, binding) => {
   // console.log('inserted')
   const scrollSpy = new ScrollSpy(el, binding.arg, binding.value);
   if (scrollSpy.scrollElement) {
@@ -160,7 +160,7 @@ const inserted = (el, binding) => {
   el[INSTANCE] = scrollSpy;
 };
 
-const unbind = (el) => {
+const unmounted = (el) => {
   // console.log('unbind')
   const instance = el[INSTANCE];
   if (instance && instance.scrollElement) {
@@ -171,19 +171,19 @@ const unbind = (el) => {
   }
 };
 
-const update = (el, binding) => {
+const updated = (el, binding) => {
   // console.log('update')
   const isArgUpdated = binding.arg !== binding.oldArg;
   const isValueUpdated = binding.value !== binding.oldValue;
   if (isArgUpdated || isValueUpdated) {
-    bind(el, binding);
-    inserted(el, binding);
+    beforeMount(el, binding);
+    mounted(el, binding);
   }
 };
 
 export default {
-  beforeMount: bind,
-  unmounted: unbind,
-  updated: update,
-  mounted: inserted,
+  beforeMount,
+  mounted,
+  updated,
+  unmounted,
 };

src/directives/tooltip/tooltip.js

@@ -5,9 +5,9 @@ import { removeFromDom } from '../../utils/dom.utils';
 
 const INSTANCE = '_uiv_tooltip_instance';
 
-const bind = (el, binding) => {
+const mounted = (el, binding) => {
   // console.log('bind')
-  unbind(el);
+  unmounted(el);
   const options = [];
   for (const key in binding.modifiers) {
     if (hasOwnProperty(binding.modifiers, key) && binding.modifiers[key]) {
@@ -55,7 +55,7 @@ const bind = (el, binding) => {
   el[INSTANCE] = { container, vNode };
 };
 
-const unbind = (el) => {
+const unmounted = (el) => {
   // console.log('unbind', el[INSTANCE])
   const instance = el[INSTANCE];
   if (instance) {
@@ -67,11 +67,11 @@ const unbind = (el) => {
   delete el[INSTANCE];
 };
 
-const update = (el, binding) => {
+const updated = (el, binding) => {
   // console.log('update', binding.oldValue, '->', binding.value)
   if (binding.value !== binding.oldValue) {
-    bind(el, binding);
+    mounted(el, binding);
   }
 };
 
-export default { mounted: bind, unmounted: unbind, updated: update };
+export default { mounted, unmounted, updated };