Fh components

Reusable Vuepress components.

Version: 1.4.15 Updated: 05/02/2019

By: funkhaus License: ISC

Downloads Last 30 Days: 887

Reusable components and directives for Vue. Designed for Vuehaus, but most components work in regular Vue apps.

fh-components saves you the trouble of rewriting common components like images, video players, svgs, and several other elements. If you're looking at writing a custom component in Vuehaus, check if one already exists here first - and if it doesn't, feel free to contribute!

Table of Contents

  1. Installation
  2. Components
    1. a-div
    2. count-up
    3. flex-text
    4. hamburger-button
    5. image-loader
    6. load-on-view
    7. mailing-list
    8. responsive-image
    9. reveal-footer
    10. scroll-to
    11. slide-show
    12. split-text
    13. sticky-wrap
    14. text-typer
    15. transition-fade
    16. transition-slide-toggle
    17. video-stage
    18. velocity-animate
    19. wp-content
    20. wp-menu
  3. Directives
    1. animated
    2. draggable
    3. full-height
    4. in-view
    5. interact
    6. keydown
    7. reverse-hover
  4. Mixins
    1. Idle
    2. Infinite Scroll
    3. Pack
    4. Rect
    5. Sequence
    6. WaitFor
  5. Plugins
  6. Animations
    1. Sequential Fade
  7. Transitions
    1. Slide-Toggle
  8. Testing
  9. Contributing
    1. Prep
    2. New Components
    3. Documentation
    4. Tests

Installation

npm install fh-components --save

When you register components:

import ComponentName from 'fh-components/component-name'

// Global in main.js...
Vue.component('component-name', ComponentName)

// ...or local to a .vue file...
export default {
    components: {
        'component-name': ComponentName
    }
}

// ...or a global component one-liner (no `import` statement needed)
Vue.component('component-name', require('fh-components/component-name'))

Components

a-div

<a-div :href="myString">Link text</a-div>

Safe way to render internal, external, or missing links.

Standalone Enhanced by Vuehaus SSR Capable

Props

Name Type Default Description
force-new Boolean false Whether the link should always open in a new window.
href String empty URL to link to. Handles same-origin URLs with router-link, external URLs with a, and falsey values with the replace-with tag.
new-window Boolean true If component renders as an <a> tag, open in a new window.
replace-with String 'div' If the href isn't a link, render contents inside this tag instead.

Classes

Name Conditions Notes
anchor-div Always
a-${ replace-with } Always Substitutes with the replace-with tag name.

Notes

  • Renders content in a <router-to> tag if href starts with / or includes the same location.origin.
  • Renders content in an <a> tag if href is a truthy value not starting with /.
  • Renders content in a given tag (replace-with, default div) if href is falsey.

count-up

<count-up :to="1000" :duration="1000" ref="count"/>

<button @click="$refs.count.running = true">Start Counting</button>

Count up to a specified number over a period of time. Requires Popmotion (npm install popmotion if this component throws errors).

Standalone Enhanced by Vuehaus SSR Capable

Props

Name Type Default Description
appear Boolean false Whether or not to start counting on mounted.
delay Number 0 How long to delay before starting the count.
duration Number 700 How long, in ms, to count up to to.
from [String, Number] 0 Number to start at.
to [String, Number] 100 Number to count up to.

Classes

Name Conditions Notes
count-up Always

Notes

  • Set running to true to start counting. running will automatically be set back to false when complete.

flex-text

hamburger-button

<hamburger-button/>

<hamburger-button>
    <svg-image src="custom-hamburger.svg" />
</hamburger-button>

Lightweight hamburger SVG with open and closed states. Requires Vuehaus.

Standalone Enhanced by Vuehaus SSR Capable

Classes

Name Conditions Notes
hamburger Always
activated when $store.state.menuOpened is true

Notes

  • Calls Vuehaus's 'OPEN_MENU' or 'CLOSE_MENU' when clicked, depending on current activated state. Will also update correctly when menu is opened or closed elsewhere.
  • Default slot is a three-line hamburger icon that changes to an "X" when activated. The user can replace this with their own svg using the svg-image component.

image-loader

<image-loader :images="arrayOfImagesToLoad"/>

This component will, given a list of serialized images, preload those images. Will handle Vuehaus image objects or image URL strings. All images are set to display: none.

Standalone Enhanced by Vuehaus SSR Capable

Props

Name Type Default Description
images Array [] Array of serialized images or URL strings to load.
size String full WordPress name for image size to load.

load-on-view

<load-on-view
    :url="urlToFetchWhenInView"
    @data="handleAnyData"
    @text="handleTextResponse"
    @json="handleJsonResponse"
    @error="handleError"/>

This component will keep track of its own scroll position, and when it enters the viewport will send a fetch request to a provided URL, emitting any resulting error or data through events. This is most useful for "infinite-scroll" functionality, where you feed pagination URLs into this component and use the resulting request data.

Standalone Enhanced by Vuehaus SSR Capable

Props

Name Type Default Description
url String '' Target URL to send a fetch request to once the component is in view.
repeatUrl Boolean false If set to false, load-on-view will not send the next request until the provided URL changes.
fetchConfig Object { credentials: 'same-origin' } An configuration object to be used with the fetch request.

Events

Name Signature Description
data (response) Fired whenever a fetch request is completed and returns a 2xx status code
error (err) Fired whenever an error occurs during the fetch request, or when the request returns a non-2xx status
on-text (textData) Fired when a fetch is completed and the contentType of the response is text
on-json (jsonData) Fired when a fetch is completed and the contentType of the response is json
on-buffer (arrayBuffer) Fired when a fetch is completed and the contentType of the response is neither text nor json

Classes

Name Conditions Notes
load-on-view Always

mailing-list

<mailing-list
    submit-text="Sign Up"
    placeholder="Your email address"
    :action-url="actionUrl"
    :token="token"/>

Flexible newsletter signup component. Supports Mailchimp and Madmimi.

Standalone Enhanced by Vuehaus SSR Capable

Props

Name Type Default Description
provider String mailchimp Newsletter service provider. Either mailchimp or madmimi.
actionUrl String none (required) Action URL for signup form.
token String none (required) API token.
successMessage String Thank You! Message to show to user on successful signup
submitText String Subscribe Text on 'submit signup' button
placeholder String Email Address Placeholder text for email address input
transitionName String newsletter-submit Name for transition wrapping mailing-list element
delay Number 5000 Time in ms to wait before firing cookieCreated event
cookieLength Number 30 Time in days until cookie expires

Slots

Name Location
top First element in mailing list wrapper, before any inputs
label Label for email input element. Default: <label for="mailing_list_email">Email</label>
before-form Wrapped by transition, appears before input form (hidden after form submitted successfully)
after-form Wrapped by transition, appears after input form (hidden after form submitted successfully)
success Appears after successful submission and successMessage prop
error Appears after form if error detected. Not wrapper by transition element.
bottom Last element in mailing list wrapper. After all inputs and transition wrap.

Events

Name Signature Description
addressSubmitted { success: Boolean, errorMessage: String } Fires when an email address is submitted
cookieCreated null Fired when a cookie is created. (Designed to trigger overlay activation)

Classes

Name Conditions Notes
fh-mailing-list Always
loading If mailing list request has been submitted
state-${ state } Always Either state-success, state-error, or state-none, depending on submission state
provider-${ provider } Always Either provider-mailchimp or provider-madmimi
empty If the email input field is empty

Notes

  • Element to build out common mailing list signups.
  • Requires an action URL and an API token.
    • Mailchimp: The action URL is the value of the action attribute on the form element in the form builder, and the API token is the value of the name attribute on the input wrapped by the left: -5000px div.
  • Waits delay ms, then fires the cookieCreated event and creates a cookie that prevents firing that event again for cookieLength days.

responsive-image

<responsive-image :src="sourceUrl" :object="serializedRestEasyObject"/>

Creates and fades in an image. Adds a placeholder for the image with a given background-color to prevent content jumping when the image loads.

Standalone Enhanced by Vuehaus SSR Capable

Props

Name Type Default Description
aspect [String, Number] '' Aspect ratio of desired image, as a percentage. aspect="56.25" would evaluate to a 56.25% aspect ratio. Calculated from height and width if not explicitly stated.
color String 'transparent' Background placeholder color. Any CSS-compatible color is valid.
fill-space Boolean false When true, position absolutely and force the image to take up all available space; when false, use the image's natural aspect ratio.
fit String 'cover' Object-fit value for the image - cover or contain.
height [String, Number] '' Natural image height in pixels.
html String '' Desired element as an HTML string. Provides all the sizing, fade-in, etc. benefits of a regular responsive-image.
object Object {} Serialized Rest-Easy attachment. Fills out the rest of these props automatically except fit.
poster String '' URL to poster for video. If false, no poster used; if blank, defaults to the parsed image source.
respect-max Boolean false Whether the image will have a max-width and max-height based on its natural dimensions.
size String 'full' WordPress image size.
src String '' Same functionality as <img src="...">.
video-src String '' An optional video URL if the component should display a looping video rather than an image.
volume Number 0 Controls the volume when rendering a video. If set to 0 (or not set) the video will be muted and will be able to autoplay.
width [String, Number] '' Natural image width in pixels.

Slots

Name Location
Default Content inside of image-padding, after image.

Classes

Name Conditions Notes
fill-space if fill-space prop is set to true
fit-${fit} Always Either fit-cover or fit-contain, depending on the fit prop.
has-video if videoSrc is truthy
loading Image hasn't finished loading
responsive-image Always
rsp-image-module Always

Notes

  • If you add a link to an .mp4 video in the "Alt" field in WordPress, this element will create and render a video, using the provided image as the poster (see "Poster" under "Attributes" here).
  • Also works when object is set to an Advanced Custom Fields image array. Only provides fullscreen size and image alt in this case.
  • Works with Focushaus, if installed, to set a custom focal point for an image. Defaults to standard browser behavior, focal point in the center of the image.
<reveal-footer>
    <footer>I'm the footer content.</footer>
</reveal-footer>

A component that reveals the section at the bottom of a page. Like the footer on the Funkhaus site.

Standalone Enhanced by Vuehaus SSR Capable

Slots

Name Location
Default

Classes

Name Conditions Notes
reveal-footer Always
footer-wrap Always

Notes

  • Adds a slot wrapped with an empty div footer-wrap, preceded by an empty div that expands to match the footer-wrap height. footer-wrap is position: fixed and has right, bottom, and left set to 0.

scroll-to

<scroll-to target=".scroll-target">Scroll to Target</scroll-to>

Wrap this component around any element to add "scroll-to" functionality, where the window is scrolled to a target element when the wrapped element is clicked.

Standalone Enhanced by Vuehaus SSR Capable

Props

Name Type Default Description
target String/Object scroll-target Target element to scroll to. This can be the name of a $ref, a CSS selector, or a DOM element.
duration Number 1000 The duration of the scroll animation in ms.
easing String inOutQuad The animation easing to use. See ease for all valid options.
offset Number 0 Number of pixels to offset the scroll target by. Can be positive or negative.
debug Boolean false Whether or not to display debug information on click.

Slots

Name Location
Default Content to be wrapped by scroll-to button

Events

Name Signature Description
complete () Fires when the page has finished scrolling to the target. Fired immediately if target is not found.

Classes

Name Conditions Notes
scroll-to Always

slide-show

<slide-show :slides="[1, 2, 3, 4]">
    <div class="slide" slot="slide" slot-scope="args">
        {{ args }}
    </div>
</slide-show>

This component creates a basic slideshow element that will cycle through a list of items that you provide.

Requires:

  • An array of slides that will serve as the source for the individual slides
  • A slide slot describing the format of an individual slide
Standalone Enhanced by Vuehaus SSR Capable

The simplest possible slide-show looks like this:

<slide-show :slides="[1, 2, 3]">

    <div slot="slide" slot-scope="{ slide }">

        <!-- This will create a slideshow of the numbers 1, 2, and 3, as specified in the "slides" prop-->
        {{ slide }}

    </div>

</slide-show>

See the slots section for more information.

Props

Name Type Default Description
slides Array [] Array of items to be iterated over and turned into slides.
auto Boolean true Controls if slideshow should auto-advance.
swipe Boolean true Controls if left/right swipe should be enabled
loop Boolean true If true, slideshow will loop from last item back to first on automatic playthroughs
manual-loop Boolean false If true, slideshow will loop from last item back to first on automatic and manual slide changes
infinite Boolean true If true, slideshow will do a next style transition when looping from last to first and vice versa.
interval Number 4000 Time between auto slide transitions.
delay Number 500 Time to delay before initiating auto slide interval.
index Number/Object null Used to manually control the current active slide of the slideshow. This prop can be bidirectionally bound using the sync modifier - <slide-show :index.sync="myLocalIndex"/> will keep myLocalIndex up to date and reflect updates immediately if changed. Note that the value will also wrap correctly if under 0 or over the total slide number.
pagination Boolean true Controls if pagination elements should be rendered or not.
localKeyboard Boolean false If true, slideshow will bind keyboard listeners to the slideshow DOM element. If false, keyboard events will be bound to window.
nextKey Number 39 Keycode for which key will trigger the next action. Default is the right arrow.
prevKey Number 37 Keycode for which key will trigger the prev action. Default is the left arrow.
css Boolean true Controls if the transition should use CSS classes or not. Use this when overriding the default transition using the provided javascript hooks.
can-control Boolean true Controls whether or not the user has any manual control over this slideshow progression.
force-transition String '' Tell the slideshow to use this transition name instead of the default next and prev classes. Useful if the transition will not change depending on slideshow direction.
slide-wrap String div The element to wrap each individual slide in. Required to use the transition correctly.
enter Function(element, done, direction) null The enter function for the JS transition. Only runs if css is set to false. done is a function that must be called when transition completes; direction will either be prev or next depending on the slideshow direction.
leave Function(element, done, direction) null The leave function for the JS transition. Only runs if css is set to false. done is a function that must be called when transition completes; direction will either be prev or next depending on the slideshow direction.
startingSlide Number 0 Zero-based index of starting slide.

Classes

  • fh-slideshow
  • transitioning: Active when slideshow is mid transition
  • first-slide: Active when the current index is the first slide
  • last-slide: Active when the current index is the last slide

Common Tasks

To use a transition other than the built-in one (for example, a fade transition):

<slide-show
    force-transition="fade">
    ...
</slide-show>

Slots

In order to use this component, you'll have to utilize the Scoped Slots feature of vue components. This component has 4 available slots, and 2 of them are scoped.

slide: Template for a single slide element

This is the most important slot. It allows you to provide a template to the component telling it how to render each slide item you provided through the slides prop. The slot accepts 2 arguments, slide and index. slide holds the data of whatever item is being iterated over, and index is the current item's index. Here's a simple example usage:

<slide-show :slides="pages">
    <div class="slide" slot="slide" slot-scope="args">
        <responsive-image :object="args.slide.featuredAttachment" />
    </div>
</slide-show>

In this example the slot is being fed all provided arguments through the args object. The single property on the args object will be slide, which carries the value of a single page. In this example an image object is being provided to a responsive-image, but you can use any data from the slide object within this slot to render your template.

pagination-item: Template for a single pagination item in the slideshow

This is the second scoped slot, it's used to define a template that the component will use when rendering the pagination. It also supports a single argument, slide. Building on the last example:

<slide-show :slides="pages">
    <!-- ... -->
    <span slot="pagination-item" slot-scope="args">{{ args.slide.title }}</span>
</slide-show>

This would render a list of pagination items, each with the title of the page inside. Pagination elements are automatically given event listeners to trigger their corresponding slides when clicked, and the currently active pagination item is given the class active.

nav-next: Element to be used as the next trigger

This is a non-scoped slot that will render an element to be used as the next trigger when clicked. The component will automatically add the click listeners to this component. Example Usage:

<slide-show :slides="pages">
    <!-- ... -->
    <svg-image src="arrow-right.svg" slot="nav-next" />
</slide-show>

nav-prev: Element to be used as the prev trigger

This non-scoped slot functions exactly the same as nav-next, but triggers the previous action.

before: Element(s) to go within the slideshow just before the slide slot

This non-scoped slot allows you to add extra content into the slideshow that does not affect the functionality of the core elements.

default: Element(s) to go within the slideshow, after all other slots.

This non-scoped slot is the default and allows you to add extra content into the slideshow that does not affect the functionality of the core elements.

Transitions

By default, there is a simple css slide transition being applied to the slideshow. It has the name fh-slide-${ direction }, with direction being either next or prev depending on which way the slideshow is going. For simple transitions it's easy to override the default. For example, if you wanted to take the existing transition but change the speed to 3s you might do this:

.fh-slideshow.fh-slide-next-enter-active,
.fh-slideshow.fh-slide-next-leave-active,
.fh-slideshow.fh-slide-prev-enter-active,
.fh-slideshow.fh-slide-prev-leave-active {
    transition-duration: 3s;
}

If css transitions alone are not enough for the effect you want, you can opt to use js hooks instead. The full set of js transition events are available to the main slide-show component, so you can pass them as props there and use javascript to create your effects. Keep in mind that when doing this you will want to set the css prop to false so that the transition element is forced into js mode.

split-text

Props

  • elements: String or Array, default span. Wrap each resulting line in this element with classes line and line-{ line number }. If elements is an array, split-text will wrap each line in its respective element, using the last element for any extra lines.
  • separator: String or Array, default ' &#8211; '. Splits text by this separator. If set to an array, find the first separator that results in a split string and use that one.
  • pieces: Number or Array, default -1. Only include these zero-indexed pieces of the split text. If set to -1 (default), include the full split text.
  • text: String, default empty. Text to split.
  • wrapper: String, default span. Element wrapping rendered lines.

Notes

  • Splits given text according to a given separator. Useful for formatting titles, for example - Title - More Title Information will render as <span>Title</span><span>More Title Information</span>.
  • Contains two slots, named before and after, that render their content before and after the split text.

sticky-wrap

<sticky-wrap>
    <h2>I'm stuck content</h2>
    <p>I'll be stuck too</p>
</sticky-wrap>

Mimics position: sticky using a wrapper element and translation. Sticks an element to the top of the screen without breaking page flow. Place content to be stuck inside the main slot

Standalone Enhanced by Vuehaus SSR Capable

Props

Name Type Default Description
wrapper String div Element that wraps the entire component.
margin Number/String 0 Distance in pixels to pad the top of the sticky element.
max Number/String -1 The maximum distance this element will be able to translate.

Classes

Name Conditions Notes
sticky-wrap Always

text-typer

Props

  • wrapper: String, default span. Wrapper element for the typed text.
  • html: String, default ''. HTML to be typed out.
  • minTime: Number, default 2. Minimum number of ms to pass between keystrokes.
  • maxtime: Number, default 5. Maximum number of ms to pass between keystrokes.

Classes

  • text-typer

Notes

  • Element to create a text typing effect that preserves HTML tags.
  • Uses a naive tag splitter that just detects for the presence of < or > characters.

transition-fade

Classes

Notes

  • Fades the contained element over 0.4 seconds.

transition-slide-toggle

Notes

  • Velocity.js match of jQuery's slideToggle method, wrapped in a Vue transition.

velocity-animate

Props

  • reset: Boolean, default true. Whether or not the changed elements should have their inline styles reset after the animation complete.
  • sequence: Array, default []. Sequence to run on appear.
  • wrapper: String, default div. Element in which to wrap the enclosed content.

Classes

  • velocity-animate

Notes

  • A component to ease creating multi-step Velocity transitions. The sequence refers to a Velocity sequence, first introduced in the UI pack. Instead of raw elements, the e property should contain the ref of the desired element. For example:
<template>
    <velocity-animate :sequence="sequence">
        <h2 ref="title">I'm here!</h2>

        <h3 ref="subtitle">So am I!</h3>

        <p ref="body">I'm the body</p>
    </velocity-animate>
</template>

<script>
export default {
    computed: {
        sequence(){
            return [
                { e: 'title', p: { opacity: [1, 0] } },
                { e: 'subtitle', p: { opacity: [1, 0] } },
                { e: 'body', p: { translateX: [0, '-100%'] }, o: { sequenceQueue: false } }
            ]
        }
    }
}
</script>

This will make the h2 fade in, then the h3 fade in and p tag slide in from the left.

  • velocity-animate also allows you to set initial states of elements by forcefeeding starting values. See this section of the Velocity docs for details. Instead of just animating from the second value to the first, velocity-animate sets the element's desired property to the second value from the start of the animation.

video-stage

Props

  • src: String, default ''. The source of the video to embed. This can either be a full iframe code, or for Vimeo videos can just be a permalink to the video.
  • autoplay: Boolean, default true. Controls whether the component should attempt to autoplay the video. Only vimeo videos support autoplay at the moment.
  • autoOffsets: Boolean, default true. If set to true, the components will attempt to automatically calculate a fitToParent offset based on the dimensions of any slot elements provided.
  • paused: Boolean, default false. If set to true, the player will pause; if false, the player will play.
  • muted: Boolean, default false. If set to true, Vimeo player will start muted.
  • is-responsive: Boolean, default false. If set to true the video will behave like fitVids, pushing down content on the page according to its natural aspect ratio rather than filling the available space.

Slots

  • before: Renders directly before the element that holds the iframe.
  • after: Renders directly after the element that holds the iframe.

Notes

  • This component uses fitToParent to automatically scale and center the iframe within the dimensions of the nearest positioned parent element. Example usage: <video-stage src="https://vimeo.com/123456789" @ended="goToNextPage" />.

Events

  • Events are only supported for Vimeo-based videos.
  • ended: fires once the video has reached the end.
  • play: fires any time the video begins playback
  • pause: fires any time the video is paused
  • width: fires any time the video is resized by fitToParent. Value is the new width in pixels.
  • height: fires any time the video is resized by fitToParent. Value is the new height in pixels.
  • error: fires if there is an error during calculation. Value will be the error object that was triggered.

wp-content

Props

  • html: String, default ''. HTML that can function as a Vue template. The component will dynamically compile the contents, and inject the results into the vue component tree.

  • unwrap: Array, default ['p > img', 'p > iframe']. Array of CSS selectors describing elements to unwrap from their parent nodes. (WordPress automatically wraps newlines in <p> tags, so this is a useful feature to remove standalone media from those <p> tags.)

  • fitvids: Boolean, default true. When set to true, the component will run fitvids on all content inside.

  • replace: Array, default []. Array of objects containing:

    • selector - String with CSS selector for elements to replace
    • callback - Function describing what to replace old element with. Accepts one argument referring to the old element; should return a String or Node with the element's replacement.

    This feature lets you replace items in wp-content. For example:

    <wp-content :html="contentHtml" :replace="[ { selector: 'img', callback: el => `<p>Image with source ${ el.src }</p>` } ]"

    This setting would replace all img tags with a p containing the text 'Image with source [element's source]'. Useful for modifying wp-content HTML before it is rendered on the DOM.

Classes

  • wp-content-placeholder: only present when no html template is provided
  • wp-content-rendered: only present when an html template was provided and successfully rendered

Notes

  • This was built to allow components to be used with the the contents of a Wordpress post. It's very effective for that purpose, but more generally can be used to compile any dynamically loaded template and render it into the component tree. Be aware that this should only ever be used when the template going into the html prop is trusted.

Vuehaus-specific component to build WordPress menus. Uses the wp-menu-item component internally.

Props

Name Type Default Description
slug String '' The WordPress slug of the menu to use.
name String 'Main Menu' The WordPress name of the menu to use.
forceRouterLink Boolean false Whether or not this wp-menu should force the use of router-links instead of a tags.

Classes

  • menu
  • ${ slug }: Either the slug prop or a kebab-cased version of the name prop, whichever is available.

Slots

This component comes with an optional scoped slot that will allow you to override the default markup for a single menu item.

menu-item: Template for single menu item within component

This slot accepts 2 arguments, menuItem, which carries the serialized object of the single item that is being iterated over, and index, which carries the index of the current menu item. Here is an example of how you might use it to add an arrow icon next to the name of each element in the menu:

<wp-menu name="Main Menu">
    <li slot="menu-item" slot-scope="{ menuItem, index }">
        <router-link :to="menuItem.relativePath">
            <svg-image src="arrow.svg" />
            <span>{{ index }}. </span>
            <span v-html="menuItem.title" />
        </router-link>
    </li>
</wp-menu>

Directives

Directives are declared as attributes. Remember to prefix v- to the directive name (so full-height becomes v-full-height)!

To use fh-components directives in your Vue app:

import directiveName from 'fh-components/v-directive-name'
Vue.directive('directive-name', directiveName)

To pass arguments to directives:

<my-component v-my-directive="{ key: 'value' }"/>

Directives may also have "modifiers" to go with them. Modifiers can be used like this:

<my-component v-my-directive.example />

animated

Notes:

  • Applies a class to an element on hover or focus. Only removes that class when an animation is finished with its current iteration. See this pen for an example - the arrows will always finish their bounce animations.
  • Must be more than 1 animation iteration to remove class correctly.
  • Accepts one argument, the class name to apply. Default animating.
  • Recommended use:
<template>
    <router-link
        v-animated
        class="link"
        to="/">I'll animate!</router-link>
</template>

<style lang="scss">

.link.animating {
    // must be more than one iteration - this won't work:
    animation: my-animation 1s 1;
    // but this will:
    animation: my-animation 1s infinite;
}

@keyframes my-animation {
    // your keyframes...
}

</style>

coverup

Not supported! Note that the v-coverup directive is very buggy on Safari and Firefox and probably won't be fixed any time soon.

Notes:

  • Sticks the bottom edge of an element to the bottom edge of the screen. Like position: sticky, but keeps the element stuck.
  • Jittery in Firefox and Safari. Works in Chrome.

draggable

Notes

  • Gives the user access to mousedowm/move/up events and deltas.
  • User needs to full functionality in arguments - directive just handles communicating data to those events.

Arguments

  • dragStart: Function, default null. Called when the user clicks on an element. Takes two arguments, the event itself and an object with the clientX and clientY properties in x and y.
  • drag: Function, default null. Called when the user clicks on an element. Takes two arguments, the event itself and an object with:
    • lastPos: the clientX and clientY properties in x and y
    • delta: the change in pixels between this frame and the previous in x and y.
    • totalDelta: the change in pixels of the drag from start to the current frame, in x and y.
  • dragStop: Function, default null. Called when the user releases a click on an element. Takes two arguments, the event itself and an object with:
    • lastPos: the clientX and clientY properties in x and y
    • totalDelta: the change in pixels of the drag from start to finish, in x and y.

full-height

Notes:

  • Sizes the element to 100% of the window height. Replacement for the occasionally buggy 100vh css value.

Modifiers

  • min: If provided, directive will use the min-height css property rather than height.

in-view

Arguments

  • above: String, default above-view. Class when element is above the viewport.
  • below: String, default below-view. Class when element is below the viewport.
  • left: String, default left-of-view. Class when element is left of viewport.
  • right: String, default right-of-view. Class when element is right of viewport.
  • inView: String, default in-view. Class when element is within the viewport.
  • onEnter: Function, default null. Method to call when an element enters view from anywhere. Accepts one argument, the element that has entered the viewport.
  • onEnterAbove: Function, default null. Method to call when an element enters view from the top of the screen. Accepts one argument, the element that has entered the viewport.
  • onEnterBelow: Function, default null. Method to call when an element enters view from below the screen. Accepts one argument, the element that has entered the viewport.
  • onEnterLeft: Function, default null. Method to call when an element enters view from left of the screen. Accepts one argument, the element that has entered the viewport.
  • onEnterRight: Function, default null. Method to call when an element enters view from right of the screen. Accepts one argument, the element that has entered the viewport.
  • onLeave: Function, default null. Method to call when an element leaves view from anywhere. Accepts one argument, the element that has ;eft the viewport.
  • onLeaveAbove: Function, default null. Method to call when an element leaves view, going above the screen. Accepts one argument, the element that has left the viewport.
  • onLeaveBelow: Function, default null. Method to call when an element leaves view, going below the screen. Accepts one argument, the element that has left the viewport.
  • onLeaveLeft: Function, default null. Method to call when an element leaves view, going left of the screen. Accepts one argument, the element that has left the viewport.
  • onLeaveRight: Function, default null. Method to call when an element leaves view, going right of screen. Accepts one argument, the element that has left the viewport.

Modifiers

  • appear: If set, events and classes will be calculated on insertion.

Notes

  • Applies classes to an element based on its viewport visibility.
  • Can also fire callbacks when an element has entered or left the viewport.

interact

Arguments

You can pass either a function or an object to v-interact. If you pass a function, that function will act as the callback parameter below.

If you pass an object, your available parameters are:

  • callback: Function, default () => {}. Callback to fire when any event triggers.
  • events: Array of objects, default { mouseenter: callback, focus: callback } or { mouseleave: callback, blur: callback }, depending on whether the end modifier exists (see below). The keys in this object are event types, the values are the functions to call on those events.

Modifiers

  • end - Consolidates mouseleave and blur instead of mouseenter and focus.

Notes

  • Event consolidator that handles both mouseenter/focus and mouseleave/blur.

  • v-interact funnels multiple events into one callback and/or event. It's designed to consolidate mouseenter/focus and mouseleave/blur, but it can be used with any set of events.

  • Example:

    <!-- method defined in Vue instance - receives event as argument -->
    <router-link v-interact="startInteract">
    
    <!-- method defined in Vue instance with additional argument -->
    <router-link v-for="(link, i) in links) v-interact="evt => startInteract(evt, i)">
    
    <!-- mouseleave/blur event -->
    <router-link v-interact.end="endInteract">
    
    <!-- custom events -->
    <router-link v-interact="{ events: { mousedown: clicked, mouseup: clicked } }">

keydown

Modifiers

  • esc - Only run callback on esc keydown.
  • up - Only run callback on up arrow keydown.
  • right - Only run callback on right arrow keydown.
  • down - Only run callback on down arrow keydown.
  • left - Only run callback on left arrow keydown.

Notes

Bind a global keydown listener to this component. Listener is created and destroyed with the component. For example, to implement an esc key toggle on a menu:

<menu-component v-keydown.esc="() => $store.commit('TOGGLE_MENU')"/>

Note that the value must be an arrow function or a reference to a method in the Vue instance. These should work:

<menu-component v-keydown.esc="toggleMenu"/>
<menu-component v-keydown.esc="() => toggleMenu(false)"/>

But this won't:

<menu-component v-keydown.esc="toggleMenu()"/>

reverse-hover

Arguments

  • containerActivatedClass: String, default rh-active-within. When a triggering component is hovered over or focused, the target element will have this class added to it.
  • elActivatedClass: String, default rh-active. A triggering component that is hovered over or focused will have this class added to it.
  • processedClass: String, default rh-processed. Triggering components will have this class added to them. (Usually left alone - mainly for internal directive use.)
  • selectors: Array or String, default ['a']. All children of the target element that match this selector will become triggering components, reverse-hover listeners attached.

Notes

  • Allows for a "reverse hover" effect, where hovering over one element of a set affects all elements of a set. For example:
<ul class="container" v-reverse-hover>
    <li v-for="url in links">
        <a class="link" :href="url">Link to {{ url }}</a>
    </li>
</ul>
.container.rh-active-within {
    background-color: #ccc;
}
.rh-active-within .link:not(.rh-active) {
    opacity: 0.5;
}
.link.rh-active {
    font-weight: 700;
}

When hovering/focusing over any .link element, the .container will receive the rh-active-within class (giving it a gray background) and all non-hovered/focused .links will be reduced to 0.5 opacity. The element that triggered the reverse-hover (the original hovered/focused .link) will have its font-weight set to 700.

  • You can set the class names yourself by passing an object:
<ul v-reverse-hover="{ containerActivatedClass: 'container-activated' /* etc... */ }">
  • You can also choose which selectors will act as triggers:
<ul v-reverse-hover="{ selectors: ['a', 'button'] /* <a> and <button> tags will trigger the reverse-hover */ }">

Mixins

To use an fh-component mixin:

import mixin from 'fh-components/mixins/mixin-name'

export default {
    mixins: [mixin]
}

Mixins define component properties, lifecycle hooks, data, and more to save you time when writing new components.

idle

Adds

Name Type Description
idle Boolean Whether or not the component is idle.
idleDelay Number How long, in ms, to wait before marking as idle

Notes

Fires an event after a given number of ms. For example:

<template>
    <img src="img.png" v-show="idle">
</template>

<script>
import idle from 'fh-components/mixins/idle.js'

export default {
    mixins: [idle]
}
</script>

This will hide the image after 5 seconds of inactivity and show it again when the user scrolls or moves the mouse.

infiniteScroll

A very easy-to-use infinite scroll mixin for Vuehaus.

Adds

Name Type Description
nextUrl string URL containing next batch of posts.
grid Array Array of Rest-Easy serialized posts, representing the full list of posts to display.

Notes

Requires load-on-view. Use like this:

<template>
    <main class="archive">

        <div class="post-grid">
            <div
                class="post-block"
                v-for="(post, i) in grid"
                :key="i">
                <!-- Your post-block templating here - eg: -->
                <h2 v-html="post.title"/>
            </div>

            <load-on-view
                :url="nextUrl"
                @data="loadNext"/>

    </main>
</template>

<script>
import infiniteScroll from 'fh-components/mixins/infiniteScroll'

export default {
    mixins: [infiniteScroll]
}
</script>

nextUrl will update as long as there are more pages to display, and grid will stay populated with all posts loaded so far.

rect

Adds

Name Type Description
clientRect Object Object describing element dimensions.
setRect Function Update clientRect. Called internally. Can be called manually to force an update.
rectThrottle Number ms throttle before firing scroll and resize events. Default 150.

pack

Like Masonry but more lightweight and based on CSS grid.

Adds

Name Type Description
transforms Array of strings Array of pixel lengths to offset each packed block.
containerHeight String Height of the container element in pixels.
pack Function Recalculate the packing values. Requires one argument, the container element.

Notes

  • Best used with waitFor so that content is rendered before sizes are calculated.
  • Set each block to translate up by its corresponding transforms value to create a Masonry-style, tightly-packed grid.
  • It's a good idea to watch the window width in a debounce function and rerun pack when it changes.
  • Known bugs:
    • Sometimes, child content wrapped in a flexbox won't calculate height correctly. To solve, wrap the flexbox in a container div.
    • Sometimes when watching the window.innerWidth directly, the sizes and transforms don't calculate correctly. To solve, debounce or throttle the window width watcher.

Example:

<template>

    <section :style="{ height: containerHeight }" ref="container">
        <repeated-block
            v-for="(block, i) in ..."
            :key="i"
            :style="{transform: transforms[i]}"/>
    </section>

</template>

<script>
import waitFor from 'fh-components/mixins/waitFor'
import pack from 'fh-components/mixins/pack'

export default {
    mixins: [waitFor, pack],
    mounted() {
        // pack when the grid is ready to render
        // (this.pack will receive this.$refs.container from waitFor)
        this.waitFor('$refs.container', this.pack)
    },
    watch: {
        // assuming a debounced/throttled window width value on the root element
        '$root.winWidth'() {
            // pack when the window width changes
            this.pack(this.$refs.container)
        }
    }
}

</script>

<style>
/* The container element must used display: grid! */
/* Other than that, row/column gaps, templates, and breakpoints will work correctly */

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 80px;
}

@media 'only screen and (min-width: 1800px)' {
    .container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media 'only screen and (max-width: 750px)' {
    .container {
        grid-template-columns: repeat(1, 1fr);
    }
}

</style>

sequence

Increment a number over a time period. Useful for sequential fading on work grids, for example.

Adds

Name Type Description
sequenceStep Number, default 0 Current step of the sequence.
sequenceMax Number, default 100 Maximum number for the sequence to count to.
sequenceStepLength Number, default 300 ms between each sequenceStep increment
sequenceInitialDelay Number, default 0 ms to
Categories: Vue js