vue-spaces

    1.2.1 • Public • Published

    Vue Spaces

    Spaces - a Vue component and/or directive used to define variables and functions directly in your markup, without adding creating a component. The spaces are fully reactive, so they can be used in computed attributes and templates.

    If you have ever needed some javascript to hide/show elements or store a local state, but didn't want to create an entire component, this will do the trick.

    This was largely inspired by alpine.js.

    Project setup

    npm install --save vue-spaces
    

    Usage

    Install the plugin:

    import Vue from 'vue';
    import Space from 'vue-spaces';
     
    Vue.use(Space);

    The installation provides you with a component and directive that can be used interchangeably.

    Using the directive, define a space and its data and methods. The space ID is required to identify the space.

    <div
        v-space:messageSpace="{
            message: 'hello world',
            updateMessage(newMessage) {
                this.message = newMessage;
            },
        }"
    >
        {{ $space('messageSpace').message }}
        
        <button @click="$space('messageSpace').updateMessage('Foo Bar')">Update message</button>
    </div>

    The same functionality with the component. When using the component, you can use v-slot to get the space without the $space helper.

    <space 
        id="messageSpace"
        :data="{
            message: 'hello world',
            updateMessage(newMessage) {
                this.message = newMessage;
            },
        }"
        v-slot="space"
    >
        {{ space.message }}
        <button @click="space.updateMessage('Foo Bar')">Update message</button>
    </space>

    Both component and directive have "init" methods that trigger when the component or directive is mounted. For example:

    Component

    <space 
        :data="{
            updateMessage(){...}
        }" 
        // call a function defined in your space
        init="updateMessage('Foo Bar')"
        // or
        init="this.updateMessage('Foo Bar')"
        // or initiate any other code
        init="this.popper = new Popper()"
    >
        ...
    </space>

    Directive - when using a directive, you must pass a string or the expression will be evaluated immediately.

    <div
        v-space:mySpace="{
            updateMessage(){...}
        }" 
        // call a function defined in your space
        v-space:mySpace.init="'updateMessage(\'Foo Bar\')'"
        // or
        v-space:mySpace.init="'this.updateMessage(\'Foo Bar\')'"
        // or initiate any other code
        v-space:mySpace.init="'this.popper = new Popper()'"
    >
        ...
    </space>

    The "$space" helper function can be used to access your spaces anywhere in your app.

    export default {
        computed: {
            someProperty(){
                return this.$space('spaceId').someProperty;
            }   
        },
        template: `
        <div>
            {{ someProperty }}
            is the same as
            {{ $space('spaceId').someProperty }}
        </div>
       `
    };

    Spaces have some built in helpers to make them easier to work with.

    // Get - get with dot notation
    $space('spaceId').$get('foo.bar')
     
    // Set - set with dot notation
    $space('spaceId').$set('foo.bar', 'baz')
     
    // Has - has with dot notation.
    $space('spaceId').$has('foo.bar')
     
    // Toggle (boolean) - toggle a boolean.
    $space('spaceId').$toggle('show')
     
    // Toggle (array) - toggle an item in an array.
    // Space: { selection: ['foo', 'bar', 'baz'] }
    $space('spaceId').$toggle('selection', 'foo') // { selection: ['bar', 'baz'] }
    $space('spaceId').$toggle('selection', 'foo') // and back: { selection: ['foo', 'bar', 'baz'] }
     
    // Includes (array) - check if item in array.
    // Space: { selection: ['foo', 'bar'] }
    $space('spaceId').$includes('selection', 'foo') // true
    $space('spaceId').$includes('selection', 'baz') // false
     
    // Includes (string) - check if string has substring
    // Space: { someString: 'abcde' }
    $space('spaceId').$includes('someString', 'abc') // true
    $space('spaceId').$includes('selection', 'ace') // false
     
    // Call - call function defined in your space.
    // someFunction(prop, propTwo)
    $space('spaceId').$call('someFunction', propertyOne, propertyTwo)

    Run unit tests

    npm run test:unit
    

    Lints and fixes files

    npm run lint
    

    Changelog

    Please see CHANGELOG for more information what has changed recently.

    Security

    If you discover any security related issues, please contact John Gile.

    Credits

    Install

    npm i vue-spaces

    DownloadsWeekly Downloads

    29

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    1.44 MB

    Total Files

    31

    Last publish

    Collaborators

    • jgile