Does not work, may be because of Vue3?

[suterma]

Unfortunately I was not able to make it work at all. I have a vue3 app, maybe this may be the reason. In this case, I would ask to please upgrade or state so in the docs.

Here's my code, slightly modified from your example:

<template>
    <div id="app" class="app">
        <ul id="features" v-show-slide="featuresOpen" class="features">
            <li>Aliquam lorem</li>
            <li>Praesent porttitor nulla vitae posuere</li>
            <li>Suspendisse nisl elit rhoncus</li>
            <li>Donec mi odio faucibus</li>
            <li>Curabitur suscipit suscipit</li>
        </ul>
        <button
            @click="toggleFeatures"
            class="toggle-features"
            aria-controls="features"
            :aria-expanded="featuresOpen ? 'true' : 'false'"
        >
            {{ featuresOpen ? 'Hide Features' : 'View Features' }}
        </button>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'Slider',
    data() {
        return {
            featuresOpen: false,
        };
    },
    methods: {
        toggleFeatures() {
            this.featuresOpen = !this.featuresOpen;
        },
    },
});
</script>

It does toggle the button text, but does not slide at all, just plainly show the ul list.

[suterma]

Here, of course the docs about the vue3 changes on directives. I would like it, if you decide to go that path.

https://v3.vuejs.org/guide/migration/custom-directives.html

[a-kriya]

For anyone looking for a Vue 3 version, here's something I ported. I stripped out the custom easing option to simplify things a bit. Save the files, import VShowSlide and app.use(VShowSlide) will do the job.

@phegman If you're able to publish this, I can put up a PR. This will not support Vue 2, so it'll be a major bump.

/// file: v-show-slide.interface.d.ts
import type { DirectiveBinding, ObjectDirective, ObjectPlugin } from 'vue'

interface EasingOptions {
  builtIn: string[]
}

interface Target {
  el: HTMLElement
  duration: number
  durationInSeconds: string
  easing: string
  isAnimating: boolean
  timeout?: number
}

export default interface VShowSlide extends ObjectPlugin, ObjectDirective<HTMLElement, boolean> {
  targets: Target[]
  easingOptions: EasingOptions
  getTargetByEl: (el: HTMLElement) => Target
  setTargetPropertyByEl: <T>(
    el: HTMLElement,
    property: string,
    value: T
  ) => void
  parseArgs: (el: HTMLElement, binding: DirectiveBinding) => void
  fireEvent: (el: HTMLElement, eventName: string) => void
  validateEasing: (argsArray: string[]) => string
  validateDuration: (argsArray: string[]) => number
  initializeTarget: (el: HTMLElement, open: boolean) => void
  toggleSlide: (el: HTMLElement, binding: DirectiveBinding) => void
  slideOpen: (el: HTMLElement) => void
  slideClosed: (el: HTMLElement) => void
}

/// file: v-show-slide.ts
import type VShowSlideInterface from './v-show-slide.interface'

const VShowSlide: VShowSlideInterface = {
  easingOptions: {
    builtIn: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],
  },
  targets: [],

  install(app) {
    app.directive<HTMLElement, boolean>('show-slide', {
      beforeMount: this.beforeMount?.bind(this),
      mounted: this.mounted?.bind(this),
      updated: this.updated?.bind(this),
    })
  },

  beforeMount(el, binding) {
    this.parseArgs(el, binding)
  },

  mounted(el, binding) {
    this.initializeTarget(el, binding.value)
  },

  updated(el, binding) {
    this.toggleSlide(el, binding)
  },

  /**
   * Get target by element
   */
  getTargetByEl(el) {
    const target = this.targets.find(target => target.el.isSameNode(el))

    if (target === undefined)
      throw new Error('Element not found!')

    return target
  },

  /**
   * Set target property by element
   */
  setTargetPropertyByEl(el, property, value) {
    const target = this.getTargetByEl(el)
    const filteredTargets = this.targets.filter(
      target => !target.el.isSameNode(el),
    )

    this.targets = [
      ...filteredTargets,
      {
        ...target,
        [property]: value,
      },
    ]
  },

  /**
   * Fire a custom event
   */
  fireEvent(el, eventName) {
    el.dispatchEvent(new CustomEvent(eventName))
  },

  /**
   * Parse directive arguments
   */
  parseArgs(el, binding) {
    if (Object.hasOwn(binding, 'arg') && typeof binding.arg === 'string') {
      const argsArray = binding.arg.split(':')
      const easing = this.validateEasing(argsArray)
      const duration = this.validateDuration(argsArray)

      this.targets.push({
        el,
        duration,
        durationInSeconds: `${duration / 1000}s`,
        easing,
        isAnimating: false,
      })
    }
    else {
      this.targets.push({
        el,
        duration: 300,
        durationInSeconds: '0.3s',
        easing: 'ease',
        isAnimating: false,
      })
    }
  },

  /**
   * Validate easing option
   */
  validateEasing(argsArray) {
    if (Object.hasOwn(argsArray, 1)) {
      if (this.easingOptions.builtIn.includes(argsArray[1]))
        return argsArray[1]
    }
    return 'ease'
  },

  /**
   * Validate duration
   */
  validateDuration(argsArray) {
    return Object.hasOwn(argsArray, 0) ? Number.parseInt(argsArray[0]) : 300
  },

  /**
   * Initialize styles on target element
   */
  initializeTarget(el, open) {
    if (!open) {
      el.style.height = '0px'
      el.style.visibility = 'hidden'
    }

    const { easing, durationInSeconds } = this.getTargetByEl(el)
    el.style.overflow = 'hidden'
    el.style.transition = `height ${easing} ${durationInSeconds}`
  },

  /**
   * Toggle the element
   */
  toggleSlide(el, binding) {
    if (binding.value !== binding.oldValue) {
      if (binding.value) {
        this.slideOpen(el)
      }
      else {
        this.slideClosed(el)
      }
    }
  },

  /**
   * Slide element open
   */
  slideOpen(el) {
    this.fireEvent(el, 'slide-open-start')

    const { isAnimating, timeout, duration } = this.getTargetByEl(el)

    // Check if element is animating
    if (isAnimating) {
      clearTimeout(timeout)
    }

    // Set animating to true
    this.setTargetPropertyByEl(el, 'isAnimating', true)

    // Make element visible again
    el.style.visibility = 'visible'

    // Set element height to scroll height + calculated border height
    const scrollHeight = el.scrollHeight
    const computedStyle = window.getComputedStyle(el)
    const borderBottom = Number.parseFloat(
      computedStyle.getPropertyValue('border-bottom-width'),
    )
    const borderTop = Number.parseFloat(
      computedStyle.getPropertyValue('border-top-width'),
    )

    el.style.height = `${scrollHeight + borderBottom + borderTop}px`

    // Reset element height to auto after animating
    const newTimeout = setTimeout(() => {
      el.style.height = 'auto'
      this.setTargetPropertyByEl(el, 'isAnimating', false)

      this.fireEvent(el, 'slide-open-end')
    }, duration)

    this.setTargetPropertyByEl(el, 'timeout', newTimeout)
  },

  /**
   * Slide element closed
   */
  slideClosed(el) {
    this.fireEvent(el, 'slide-close-start')

    const { isAnimating, timeout, duration } = this.getTargetByEl(el)

    // Check if element is animating
    if (isAnimating) {
      clearTimeout(timeout)
    }

    // Set animating to true
    this.setTargetPropertyByEl(el, 'isAnimating', true)

    const scrollHeight = el.scrollHeight
    el.style.height = `${scrollHeight}px`
    // https://gist.github.com/paulirish/5d52fb081b3570c81e3a
    // eslint-disable-next-line unused-imports/no-unused-vars
    const forceRedraw = el.offsetLeft

    el.style.height = '0px'

    // Update isAnimating after animation is done
    // And set visibility to `hidden`
    const newTimeout = setTimeout(() => {
      this.setTargetPropertyByEl(el, 'isAnimating', false)
      el.style.visibility = 'hidden'

      this.fireEvent(el, 'slide-close-end')
    }, duration)

    this.setTargetPropertyByEl(el, 'timeout', newTimeout)
  },
}

export default VShowSlide