`\n\nCreates and fades in an image. Adds a placeholder for the image with a given background-color to prevent content jumping when the image loads.\n\n| Standalone | Enhanced by Vuehaus | SSR Capable |\n| ---------- | ------------------- | ----------- |\n| ✅ | ✅ | ❌ |\n\n**Props**\n\n| Name | Type | Default | Description |\n| ------------- | ---------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `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. |\n| `color` | String | `'transparent'` | Background placeholder color. Any CSS-compatible color is valid. |\n| `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. |\n| `fit` | String | `'cover'` | Object-fit value for the image - `cover` or `contain`. |\n| `height` | [String, Number] | `''` | Natural image height in pixels. |\n| `html` | String | `''` | Desired \n \n \n```\n\nA component that reveals the section at the bottom of a page. Like the footer on the [Funkhaus site](http://funkhaus.us/).\n\n| Standalone | Enhanced by Vuehaus | SSR Capable |\n| ---------- | ------------------- | ----------- |\n| ✅ | ❌ | ❌ |\n\n**Slots**\n\n| Name | Location |\n| ------- | -------- |\n| Default | |\n\n**Classes**\n\n| Name | Conditions | Notes |\n| --------------- | ---------- | ----- |\n| `reveal-footer` | Always | |\n| `footer-wrap` | Always | |\n\n**Notes**\n\n- 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.\n\n## `scroll-to`\n\n`Scroll to Target `\n\nWrap 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.\n\n| Standalone | Enhanced by Vuehaus | SSR Capable |\n| ---------- | ------------------- | ----------- |\n| ✅ | ❌ | ❌ |\n\n**Props**\n\n| Name | Type | Default | Description |\n| ---------- | ------------- | --------------- | ------------------------------------------------------------------------------------------------- |\n| `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. |\n| `duration` | Number | `1000` | The duration of the scroll animation in ms. |\n| `easing` | String | `inOutQuad` | The animation easing to use. See [ease](https://github.com/component/ease) for all valid options. |\n| `offset` | Number | `0` | Number of pixels to offset the scroll target by. Can be positive or negative. |\n| `debug` | Boolean | `false` | Whether or not to display debug information on click. |\n\n**Slots**\n\n| Name | Location |\n| ------- | ------------------------------------------- |\n| Default | Content to be wrapped by `scroll-to` button |\n\n**Events**\n\n| Name | Signature | Description |\n| ---------- | --------- | ----------------------------------------------------------------------------------------------------- |\n| `complete` | `()` | Fires when the page has finished scrolling to the target. Fired immediately if `target` is not found. |\n\n**Classes**\n\n| Name | Conditions | Notes |\n| ----------- | ---------- | ----- |\n| `scroll-to` | Always | |\n\n## `slide-show`\n\n```\n\n \n {{ args }}\n
\n \n```\n\nThis component creates a basic slideshow element that will cycle through a list of items that you provide.\n\nRequires:\n\n- An array of `slides` that will serve as the source for the individual slides\n- A `slide` slot describing the format of an individual slide\n\n| Standalone | Enhanced by Vuehaus | SSR Capable |\n| ---------- | ------------------- | ----------- |\n| ✅ | ❌ | ✅ |\n\nThe simplest possible `slide-show` looks like this:\n\n```html\n\n\n \n\n \n {{ slide }}\n\n
\n\n \n```\n\nSee the [slots](https://github.com/funkhaus/fh-components#slots) section for more information.\n\n### Props\n\n| Name | Type | Default | Description |\n| ------------------ | :--------------------------------: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `slides` | Array | `[]` | Array of items to be iterated over and turned into slides. |\n| `auto` | Boolean | `true` | Controls if slideshow should auto-advance. |\n| `swipe` | Boolean | `true` | Controls if left/right swipe should be enabled |\n| `loop` | Boolean | `true` | If true, slideshow will loop from last item back to first on automatic playthroughs |\n| `manual-loop` | Boolean | `false` | If true, slideshow will loop from last item back to first on automatic and manual slide changes |\n| `infinite` | Boolean | `true` | If true, slideshow will do a `next` style transition when looping from last to first and vice versa. |\n| `interval` | Number | `4000` | Time between auto slide transitions. |\n| `delay` | Number | `500` | Time to delay before initiating auto slide interval. |\n| `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 - `` 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. |\n| `pagination` | Boolean | `true` | Controls if pagination elements should be rendered or not. |\n| `localKeyboard` | Boolean | `false` | If true, slideshow will bind keyboard listeners to the slideshow DOM element. If false, keyboard events will be bound to window. |\n| `nextKey` | Number | `39` | Keycode for which key will trigger the next action. Default is the right arrow. |\n| `prevKey` | Number | `37` | Keycode for which key will trigger the prev action. Default is the left arrow. |\n| `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. |\n| `can-control` | Boolean | `true` | Controls whether or not the user has any manual control over this slideshow progression. |\n| `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. |\n| `slide-wrap` | String | `div` | The element to wrap each individual slide in. Required to use the transition correctly. |\n| `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. |\n| `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. |\n| `startingSlide` | Number | `0` | Zero-based index of starting slide. |\n\n### Classes\n\n- `fh-slideshow`\n- `transitioning`: Active when slideshow is mid transition\n- `first-slide`: Active when the current index is the first slide\n- `last-slide`: Active when the current index is the last slide\n\n### Common Tasks\n\nTo use a transition other than the built-in one (for example, a fade transition):\n\n```html\n\n ...\n \n```\n\n### Slots\n\nIn order to use this component, you'll have to utilize the [Scoped Slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) feature of vue components. This component has 4 available slots, and 2 of them are scoped.\n\n**slide:** Template for a single slide element\n\nThis 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:\n\n```vue\n\n \n
\n \n```\n\nIn 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.\n\n**pagination-item:** Template for a single pagination item in the slideshow\n\nThis 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:\n\n```vue\n\n \n {{ args.slide.title }} \n \n```\n\nThis 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`.\n\n**nav-next:** Element to be used as the next trigger\n\nThis 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:\n\n```vue\n\n \n \n```\n\n**nav-prev:** Element to be used as the prev trigger\n\nThis non-scoped slot functions exactly the same as `nav-next`, but triggers the previous action.\n\n**before:** Element(s) to go within the slideshow just before the slide slot\n\nThis non-scoped slot allows you to add extra content into the slideshow that does not affect the functionality of the core elements.\n\n**default:** Element(s) to go within the slideshow, after all other slots.\n\nThis 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.\n\n### Transitions\n\nBy 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:\n\n```css\n.fh-slideshow.fh-slide-next-enter-active,\n.fh-slideshow.fh-slide-next-leave-active,\n.fh-slideshow.fh-slide-prev-enter-active,\n.fh-slideshow.fh-slide-prev-leave-active {\n transition-duration: 3s;\n}\n```\n\nIf 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](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks) 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.\n\n## `split-text`\n\n**Props**\n\n- `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.\n- `separator`: String or Array, default `' – '`. Splits text by this separator. If set to an array, find the first separator that results in a split string and use that one.\n- `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.\n- `text`: String, default empty. Text to split.\n- `wrapper`: String, default `span`. Element wrapping rendered lines.\n\n**Notes**\n\n- Splits given text according to a given separator. Useful for formatting titles, for example - `Title - More Title Information` will render as `Title More Title Information `.\n- Contains two slots, named `before` and `after`, that render their content before and after the split text.\n\n## `sticky-wrap`\n\n```html\n\n I'm stuck content \n I'll be stuck too
\n \n```\n\nMimics `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\n\n| Standalone | Enhanced by Vuehaus | SSR Capable |\n| ---------- | ------------------- | ----------- |\n| ✅ | ❌ | ❌ |\n\n**Props**\n\n| Name | Type | Default | Description |\n| --------- | ------------- | ------- | ------------------------------------------------------------ |\n| `wrapper` | String | `div` | Element that wraps the entire component. |\n| `margin` | Number/String | `0` | Distance in pixels to pad the top of the sticky element. |\n| `max` | Number/String | `-1` | The maximum distance this element will be able to translate. |\n\n**Classes**\n\n| Name | Conditions | Notes |\n| ------------- | ---------- | ----- |\n| `sticky-wrap` | Always | |\n\n## `text-typer`\n\n**Props**\n\n- `wrapper`: String, default `span`. Wrapper element for the typed text.\n- `html`: String, default `''`. HTML to be typed out.\n- `minTime`: Number, default `2`. Minimum number of ms to pass between keystrokes.\n- `maxtime`: Number, default `5`. Maximum number of ms to pass between keystrokes.\n\n**Classes**\n\n- `text-typer`\n\n**Notes**\n\n- Element to create a text typing effect that preserves HTML tags.\n- Uses a naive tag splitter that just detects for the presence of `<` or `>` characters.\n\n## `transition-fade`\n\n**Classes**\n\n- [Transition classes](https://vuejs.org/v2/guide/transitions.html#Transition-Classes) applied to a transition called `fade`.\n\n**Notes**\n\n- Fades the contained element over 0.4 seconds.\n\n## `transition-slide-toggle`\n\n**Notes**\n\n- Velocity.js match of jQuery's [slideToggle](http://api.jquery.com/slidetoggle/) method, wrapped in a Vue transition.\n\n## `velocity-animate`\n\n**Props**\n\n- `reset`: Boolean, default `true`. Whether or not the changed elements should have their inline styles reset after the animation complete.\n- `sequence`: Array, default `[]`. Sequence to run on appear.\n- `wrapper`: String, default `div`. Element in which to wrap the enclosed content.\n\n**Classes**\n\n- `velocity-animate`\n\n**Notes**\n\n- A component to ease creating multi-step Velocity transitions. The `sequence` refers to a Velocity [sequence](http://velocityjs.org/#uiPack), first introduced in the UI pack. Instead of raw elements, the `e` property should contain the ref of the desired element. For example:\n\n```\n\n \n I'm here! \n\n So am I! \n\n I'm the body
\n \n \n\n\n```\n\nThis will make the h2 fade in, then the h3 fade in and p tag slide in from the left.\n\n- `velocity-animate` also allows you to set initial states of elements by forcefeeding starting values. See [this section](http://velocityjs.org/#forcefeeding) 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.\n\n## `video-stage`\n\n**Props**\n\n- `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.\n- `autoplay`: Boolean, default `true`. Controls whether the component should attempt to autoplay the video. Only vimeo videos support autoplay at the moment.\n- `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.\n- `paused`: Boolean, default `false`. If set to true, the player will pause; if false, the player will play.\n- `muted`: Boolean, default `false`. If set to true, Vimeo player will start muted.\n- `is-responsive`: Boolean, default `false`. If set to true the video will behave like [fitVids](http://fitvidsjs.com/), pushing down content on the page according to its natural aspect ratio rather than filling the available space.\n\n**Slots**\n\n- `before`: Renders directly before the element that holds the iframe.\n- `after`: Renders directly after the element that holds the iframe.\n\n**Notes**\n\n- This component uses [`fitToParent`](https://github.com/funkhaus/fitToParent) to automatically scale and center the iframe within the dimensions of the nearest positioned parent element. Example usage:\n `` tags, so this is a useful feature to remove standalone media from those `
` tags.)\n- `fitvids`: Boolean, default `true`. When set to true, the component will run fitvids on all content inside.\n- `replace`: Array, default `[]`. Array of objects containing:\n\n - `selector` - String with CSS selector for elements to replace\n - `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.\n\n This feature lets you replace items in `wp-content`. For example:\n\n ```\n `Image with source ${ el.src }
` } ]\"\n ```\n\n 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.\n\n**Classes**\n\n- `wp-content-placeholder`: only present when no html template is provided\n- `wp-content-rendered`: only present when an html template was provided and successfully rendered\n\n**Notes**\n\n- 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.\n\n## wp-menu\n\n[Vuehaus](https://github.com/funkhaus/vuehaus)-specific component to build WordPress menus. Uses the `wp-menu-item` component internally.\n\n### Props\n\n| Name | Type | Default | Description |\n| ----------------- | :-----: | :-----------: | --------------------------------------------------------------------------------------- |\n| `slug` | String | `''` | The WordPress slug of the menu to use. |\n| `name` | String | `'Main Menu'` | The WordPress name of the menu to use. |\n| `forceRouterLink` | Boolean | false | Whether or not this wp-menu should force the use of `router-link`s instead of `a` tags. |\n\n### Classes\n\n- `menu`\n- `${ slug }`: Either the `slug` prop or a kebab-cased version of the `name` prop, whichever is available.\n\n### Slots\n\nThis component comes with an optional [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) that will allow you to override the default markup for a single menu item.\n\n**menu-item:** Template for single menu item within component\n\nThis 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:\n\n```vue\n\n \n \n {{ index }}. \n \n \n \n```\n\n# Directives\n\nDirectives are declared as attributes. Remember to prefix `v-` to the directive name (so `full-height` becomes `v-full-height`)!\n\nTo use fh-components directives in your Vue app:\n\n```js\nimport directiveName from 'fh-components/v-directive-name'\nVue.directive('directive-name', directiveName)\n```\n\nTo pass arguments to directives:\n\n```\n\n I'll animate!\n \n\n\n```\n\n## `coverup`\n\n**Not supported!** Note that the `v-coverup` directive is very buggy on Safari and Firefox and probably won't be fixed any time soon.\n\n**Notes**:\n\n- Sticks the bottom edge of an element to the bottom edge of the screen. Like position: sticky, but keeps the element stuck.\n- Jittery in Firefox and Safari. Works in Chrome.\n\n## `draggable`\n\n**Notes**\n\n- Gives the user access to mousedowm/move/up events and deltas.\n- User needs to full functionality in arguments - directive just handles communicating data to those events.\n\n**Arguments**\n\n- `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`.\n- `drag`: Function, default null. Called when the user clicks on an element. Takes two arguments, the event itself and an object with:\n - `lastPos`: the clientX and clientY properties in `x` and `y`\n - `delta`: the change in pixels between this frame and the previous in `x` and `y`.\n - `totalDelta`: the change in pixels of the drag from start to the current frame, in `x` and `y`.\n- `dragStop`: Function, default null. Called when the user releases a click on an element. Takes two arguments, the event itself and an object with:\n - `lastPos`: the clientX and clientY properties in `x` and `y`\n - `totalDelta`: the change in pixels of the drag from start to finish, in `x` and `y`.\n\n## `full-height`\n\n**Notes**:\n\n- Sizes the element to 100% of the window height. Replacement for the occasionally buggy 100vh css value.\n\n**Modifiers**\n\n- `min`: If provided, directive will use the `min-height` css property rather than `height`.\n\n## `in-view`\n\n**Arguments**\n\n- `above`: String, default `above-view`. Class when element is above the viewport.\n- `below`: String, default `below-view`. Class when element is below the viewport.\n- `left`: String, default `left-of-view`. Class when element is left of viewport.\n- `right`: String, default `right-of-view`. Class when element is right of viewport.\n- `inView`: String, default `in-view`. Class when element is within the viewport.\n- `onEnter`: Function, default `null`. Method to call when an element enters view from anywhere. Accepts one argument, the element that has entered the viewport.\n- `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.\n- `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.\n- `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.\n- `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.\n- `onLeave`: Function, default `null`. Method to call when an element leaves view from anywhere. Accepts one argument, the element that has ;eft the viewport.\n- `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.\n- `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.\n- `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.\n- `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.\n\n**Modifiers**\n\n- `appear`: If set, events and classes will be calculated on insertion.\n\n**Notes**\n\n- Applies classes to an element based on its viewport visibility.\n- Can also fire callbacks when an element has entered or left the viewport.\n\n## `interact`\n\n**Arguments**\n\nYou 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.\n\nIf you pass an object, your available parameters are:\n\n- `callback`: Function, default `() => {}`. Callback to fire when any event triggers.\n- `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.\n\n**Modifiers**\n\n- `end` - Consolidates `mouseleave` and `blur` instead of `mouseenter` and `focus`.\n\n**Notes**\n\n- Event consolidator that handles both `mouseenter`/`focus` and `mouseleave`/`blur`.\n- `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.\n- Example:\n\n ```\n \n \n\n \n startInteract(evt, i)\">\n\n \n \n\n \n \n ```\n\n## `keydown`\n\n**Modifiers**\n\n- `esc` - Only run callback on `esc` keydown.\n- `up` - Only run callback on `up arrow` keydown.\n- `right` - Only run callback on `right arrow` keydown.\n- `down` - Only run callback on `down arrow` keydown.\n- `left` - Only run callback on `left arrow` keydown.\n\n**Notes**\n\nBind 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:\n\n```html\n $store.commit('TOGGLE_MENU')\"/>\n```\n\nNote that the value must be an arrow function or a reference to a method in the Vue instance. These should work:\n\n```html\n\n toggleMenu(false)\"/>\n```\n\nBut this won't:\n\n```html\n\n```\n\n## `reverse-hover`\n\n**Arguments**\n\n- `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.\n- `elActivatedClass`: String, default `rh-active`. A triggering component that is hovered over or focused will have this class added to it.\n- `processedClass`: String, default `rh-processed`. Triggering components will have this class added to them. (Usually left alone - mainly for internal directive use.)\n- `selectors`: Array or String, default `['a']`. All children of the target element that match this selector will become triggering components, reverse-hover listeners attached.\n\n**Notes**\n\n- Allows for a \"reverse hover\" effect, where hovering over one element of a set affects all elements of a set. For example:\n\n```html\n\n```\n\n```css\n.container.rh-active-within {\n background-color: #ccc;\n}\n.rh-active-within .link:not(.rh-active) {\n opacity: 0.5;\n}\n.link.rh-active {\n font-weight: 700;\n}\n```\n\nWhen 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 `.link`s 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.\n\n- You can set the class names yourself by passing an object:\n\n```html\n\n```\n\n- You can also choose which selectors will act as triggers:\n\n```html\n and tags will trigger the reverse-hover */ }\">\n```\n\n# Mixins\n\nTo use an fh-component mixin:\n\n```js\nimport mixin from 'fh-components/mixins/mixin-name'\n\nexport default {\n mixins: [mixin]\n}\n```\n\nMixins define component properties, lifecycle hooks, data, and more to save you time when writing new components.\n\n## `idle`\n\n### Adds\n\n| Name | Type | Description |\n| ----------- | ------- | ----------------------------------------------- |\n| `idle` | Boolean | Whether or not the component is idle. |\n| `idleDelay` | Number | How long, in ms, to wait before marking as idle |\n\n### Notes\n\nFires an event after a given number of ms. For example:\n\n```html\n\n \n\n\n```\n\nThis will hide the image after 5 seconds of inactivity and show it again when the user scrolls or moves the mouse.\n\n## `infiniteScroll`\n\nA very easy-to-use infinite scroll mixin for Vuehaus.\n\n### Adds\n\n| Name | Type | Description |\n| --------- | ------ | ------------------------------------------------------------------------------------ |\n| `nextUrl` | string | URL containing next batch of posts. |\n| `grid` | Array | Array of Rest-Easy serialized posts, representing the full list of posts to display. |\n\n### Notes\n\nRequires `load-on-view`. Use like this:\n\n```html\n\n \n\n \n\n \n\n \n \n\n\n```\n\n`nextUrl` will update as long as there are more pages to display, and `grid` will stay populated with all posts loaded so far.\n\n## `rect`\n\n### Adds\n\n| Name | Type | Description |\n| -------------- | -------- | ---------------------------------------------------------------------------------- |\n| `clientRect` | Object | Object describing element dimensions. |\n| `setRect` | Function | Update `clientRect`. Called internally. Can be called manually to force an update. |\n| `rectThrottle` | Number | ms throttle before firing scroll and resize events. Default 150. |\n\n## `pack`\n\nLike [Masonry](https://masonry.desandro.com/) but more lightweight and based on CSS grid.\n\n### Adds\n\n| Name | Type | Description |\n| ----------------- | ---------------- | ----------------------------------------------------------------------------- |\n| `transforms` | Array of strings | Array of pixel lengths to offset each packed block. |\n| `containerHeight` | String | Height of the container element in pixels. |\n| `pack` | Function | Recalculate the packing values. Requires one argument, the container element. |\n\n### Notes\n\n- Best used with [waitFor](#waitFor) so that content is rendered before sizes are calculated.\n- Set each block to translate up by its corresponding `transforms` value to create a Masonry-style, tightly-packed grid.\n- It's a good idea to watch the window width in a debounce function and rerun `pack` when it changes.\n- **Known bugs**:\n - Sometimes, child content wrapped in a flexbox won't calculate height correctly. To solve, wrap the flexbox in a container div.\n - Sometimes when watching the `window.innerWidth` directly, the sizes and transforms don't calculate correctly. To solve, debounce or throttle the window width watcher.\n\nExample:\n\n```html\n\n\n \n\n \n\n\n\n\n```\n\n## `sequence`\n\nIncrement a number over a time period. Useful for [sequential fading on work grids](http://carbonvfx.com/), for example.\n\n### Adds\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `sequenceStep` | Number, default 0 | Current step of the sequence. |\n| `sequenceMax` | Number, default 100 | Maximum number for the sequence to count to. |\n| `sequenceStepLength` | Number, default 300 | ms between each `sequenceStep` increment |\n| `sequenceInitialDelay` | Number, default 0 | ms to ","maintainers":[{"email":"sandermoolin@gmail.com","name":"sandermoolin"},{"email":"john@funkhaus.us","name":"jrobson153"}],"time":{"modified":"2022-05-02T08:30:33.383Z","created":"2017-11-03T22:20:43.810Z","1.0.0":"2017-11-03T22:20:43.810Z","1.1.0":"2017-11-29T18:35:46.126Z","1.1.1":"2017-11-29T18:40:48.493Z","1.1.2":"2017-11-29T19:04:43.618Z","1.1.3":"2017-11-29T19:23:36.991Z","1.1.4":"2017-11-29T21:10:32.009Z","1.1.5":"2017-11-30T18:20:43.034Z","1.1.6":"2017-12-05T16:51:33.412Z","1.1.7":"2017-12-05T17:10:52.466Z","1.1.8":"2017-12-05T17:17:20.811Z","1.2.0":"2017-12-08T15:38:36.984Z","1.2.1":"2017-12-08T16:11:19.379Z","1.2.11":"2017-12-08T17:06:26.295Z","1.2.12":"2017-12-11T19:03:09.960Z","1.2.13":"2017-12-12T18:08:54.046Z","1.2.14":"2017-12-12T20:22:11.056Z","1.2.15":"2017-12-13T23:33:25.802Z","1.2.16":"2017-12-15T00:58:29.028Z","1.2.17":"2017-12-20T21:35:47.653Z","1.2.18":"2017-12-21T20:24:44.754Z","1.2.19":"2018-01-09T16:16:44.149Z","1.2.20":"2018-01-09T16:26:22.172Z","1.2.21":"2018-01-10T15:18:29.481Z","1.2.22":"2018-01-10T19:50:36.255Z","1.2.23":"2018-01-17T02:46:15.541Z","1.2.24":"2018-02-01T03:25:58.450Z","1.2.25":"2018-02-08T18:35:34.502Z","1.2.26":"2018-02-14T19:49:16.978Z","1.2.27":"2018-02-14T21:29:39.113Z","1.2.28":"2018-02-15T19:55:42.423Z","1.2.29":"2018-02-15T21:47:14.429Z","1.2.30":"2018-02-16T19:19:09.946Z","1.2.31":"2018-02-27T20:49:44.269Z","1.2.32":"2018-03-02T16:36:27.184Z","1.2.33":"2018-03-02T17:49:42.091Z","1.2.34":"2018-03-05T22:41:14.720Z","1.2.35":"2018-03-13T18:52:43.165Z","1.2.36":"2018-03-15T15:59:28.674Z","1.2.37":"2018-03-15T20:02:55.765Z","1.2.38":"2018-03-16T21:11:03.497Z","1.2.39":"2018-03-20T15:15:41.345Z","1.2.40":"2018-03-28T19:34:04.234Z","1.2.41":"2018-03-29T15:31:04.736Z","1.2.42":"2018-04-02T17:12:28.014Z","1.2.43":"2018-04-06T19:48:24.002Z","1.2.44":"2018-04-06T20:37:08.685Z","1.2.45":"2018-04-08T01:20:10.055Z","1.2.46":"2018-04-11T15:44:09.777Z","1.2.47":"2018-04-11T17:53:47.662Z","1.2.48":"2018-04-11T21:52:19.991Z","1.2.49":"2018-04-12T14:31:54.531Z","1.2.50":"2018-04-12T15:37:25.546Z","1.2.51":"2018-04-13T16:11:37.174Z","1.2.52":"2018-04-14T22:04:23.682Z","1.2.53":"2018-04-16T19:41:52.470Z","1.2.54":"2018-04-19T22:00:00.290Z","1.2.55":"2018-04-25T20:56:19.412Z","1.2.56":"2018-05-01T15:10:06.874Z","1.2.57":"2018-05-03T19:50:34.344Z","1.2.58":"2018-05-03T21:37:00.007Z","1.2.59":"2018-05-03T22:00:56.761Z","1.2.61":"2018-05-17T19:01:01.763Z","1.2.62":"2018-05-21T19:12:56.087Z","1.2.63":"2018-05-21T19:26:18.368Z","1.2.64":"2018-05-21T19:44:36.233Z","1.2.65":"2018-05-25T16:59:10.976Z","1.2.66":"2018-06-05T21:01:26.322Z","1.2.67":"2018-06-07T19:08:32.803Z","1.2.69":"2018-06-12T20:56:24.744Z","1.2.70":"2018-06-12T21:10:02.696Z","1.2.71":"2018-06-13T19:11:32.710Z","1.2.72":"2018-06-14T14:31:18.101Z","1.2.73":"2018-06-20T12:16:10.917Z","1.2.74":"2018-06-20T12:25:51.920Z","1.2.75":"2018-06-21T14:44:34.972Z","1.2.76":"2018-06-21T15:07:08.330Z","1.2.77":"2018-06-22T18:33:04.590Z","1.2.78":"2018-06-27T17:32:32.791Z","1.2.79":"2018-06-27T19:33:02.289Z","1.2.80":"2018-07-09T21:02:51.512Z","1.2.81":"2018-07-11T01:04:29.694Z","1.2.82":"2018-07-11T01:36:40.704Z","1.2.83":"2018-07-12T14:28:35.609Z","1.2.84":"2018-07-12T20:01:17.701Z","1.2.85":"2018-07-12T23:22:35.963Z","1.2.86":"2018-07-13T15:48:43.318Z","1.2.87":"2018-07-17T20:35:38.944Z","1.2.88":"2018-07-19T20:39:05.604Z","1.2.89":"2018-07-25T14:52:03.945Z","1.2.90":"2018-07-25T18:48:40.790Z","1.2.91":"2018-07-26T22:05:44.507Z","1.2.92":"2018-07-27T14:45:46.624Z","1.2.93":"2018-08-02T15:32:50.890Z","1.2.94":"2018-08-02T21:35:15.454Z","1.2.95":"2018-08-03T15:10:39.965Z","1.2.96":"2018-08-07T20:34:32.149Z","1.2.97":"2018-08-15T18:03:43.891Z","1.2.98":"2018-08-22T17:48:32.338Z","1.2.99":"2018-08-22T18:28:14.202Z","1.3.0":"2018-08-22T20:11:45.614Z","1.3.1":"2018-08-29T17:48:28.205Z","1.3.2":"2018-08-29T19:27:51.730Z","1.3.3":"2018-08-30T17:54:42.919Z","1.3.4":"2018-08-30T17:58:43.655Z","1.3.5":"2018-09-05T17:51:40.236Z","1.3.6":"2018-09-12T14:35:22.274Z","1.3.7":"2018-09-19T19:33:05.655Z","1.3.8":"2018-09-20T18:45:57.319Z","1.3.9":"2018-09-24T18:36:57.786Z","1.3.10":"2018-09-25T17:37:15.687Z","1.3.11":"2018-09-26T15:40:42.214Z","1.3.12":"2018-09-28T15:36:14.302Z","1.4.1":"2018-10-02T18:36:31.991Z","1.4.2":"2018-10-24T14:32:09.893Z","1.4.3":"2018-10-30T20:16:27.831Z","1.4.5":"2018-10-30T20:52:23.195Z","1.4.7":"2018-11-05T23:03:10.930Z","1.4.8":"2018-11-13T20:06:22.862Z","1.4.9":"2018-11-13T21:11:16.939Z","1.4.10":"2018-11-13T21:20:12.930Z","1.4.11":"2018-11-13T21:27:20.186Z","1.4.12":"2018-11-15T13:49:59.116Z","1.4.13":"2018-12-06T21:35:53.162Z","1.4.14":"2018-12-07T19:14:18.260Z","1.4.15":"2018-12-17T21:51:22.666Z"},"homepage":"https://github.com/funkhaus/fh-components#readme","keywords":["Vue","vuepress","Funkhaus"],"repository":{"type":"git","url":"git+https://github.com/funkhaus/fh-components.git"},"author":{"name":"Funkhaus"},"bugs":{"url":"https://github.com/funkhaus/fh-components/issues"},"license":"ISC","readmeFilename":"README.md"}