Nonsense Placement Mandatory

    vue-gdpr-guard
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.2 • Public • Published

    vue-gdpr-guard

    Logo

    vue-gdpr-guard is the Vue binding for the library gdpr-guard. It exposes components as well as a plugin that allows to use gdpr-guard without the hassle of knowing how to wire you components. It uses almost renderless components and scoped-slots in order to provide maximum customization.

    You can have a look at the guide. You can also have a look at this code sandbox to see a minimal example.

    Example

    MyComponent.vue

    <template>
    	<GdprManager>
    		<template #default="{ groups, enable, disable }">
    			<div class="gdpr-container">
    				<button @click="enable">Enable all</button>
    				<button @click="disable">Disable all</button>
    
    				<GdprGroup v-for="group in groups" :key="group.name">
    					<template #default="{ guards, toggle }">
    						<div class="gdpr-container group">
    						   <label>Group {{ group.name }}</label>
    						   <MyAwesomeSwitch
    								:label="`Toggle ${group.name}`"
    								 :value="group.enabled"
    								 @switch="toggle"/>
    
    							<GdprGuard v-for="guard in guards" :key="guard.name">
    								<template #default="{ toggle }">
    									<!--
    									By default, it will reuse the group slot above if there are
    									groups inside groups
    							  		-->
    									<div class="gdpr-item">
    										<label>{{ guard.name }}</label>
    										<MyAwesomeSwitch
    											:label="`Toggle ${guard.name}`"
    											:value="guard.enabled"
    											@switch="toggle"/>
    									</div>
    								</template>
    						   </GdprGuard>
    						</div>
    					</template>
    				</GdprGroup>
    			</div>
    		</template>
        </GdprManager>
    </template>
    
    <script>
    	import { GdprManager, GdprGroup, GdprGuard } from "vue-gdpr-guard"
    
        export default {
            components: {
                GdprManager,
                GdprGroup,
                GdprGuard,
            },
        }
    </script>

    index.js

    import { VueGdprGuard } from "vue-gdpr-guard"
    import { GdprManagerBuilder } from "gdpr-guard"
    import Vue from "vue"
    
    const factory = () => GdprManagerBuilder.make()
    	// [...]
    .build();
    
    const savior = /* get/create a GdprSavior */;
    
    Vue.use(VueGdprGuard, {
        factory,
        savior,
    });
    
    // mount app

    What is available?

    Components

    GdprManager, GdprGroup and GdprGuard are renderless vue components that are available to you to compose your UI. Note that these are not the classes from gdpr-guard, you can import these directly from that package (vue-gdpr-guard has it in its dependencies).

    Helpers

    VueGdprGuard is the vue plugin to register in order to use the library. Note that it requires a factory as well as a savior in its installation options.

    Mixin

    gdprMixin gives access to logic to handle the "options screen" in your app:

    // interface that describes the mixin
    interface gdprMixin{
        components: {
            GdprManager: typeof GdprManager,
            GdprGroup: typeof GdprGroup,
            GdprGuard: typeof GdprGuard,
        },
        props: {
            opened?: bool, // defaults to false
        },
        methods: {
            enableAll: () => any,
            disableAll: () => any,
            close: () => any,
            discard: () => Promise<boolean>,
            save: () => Promise<boolean>,
        },
    }

    Install

    npm i vue-gdpr-guard

    DownloadsWeekly Downloads

    27

    Version

    2.2.2

    License

    MIT

    Unpacked Size

    1.8 MB

    Total Files

    39

    Last publish

    Collaborators

    • voltra