vue-cookie-toggler - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

package.json

 {
   "name": "vue-cookie-toggler",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "GDPR cookies consent modal.",
@@ -19,3 +19,3 @@ "author": "Daniel Negoita <[e-mail]>",
     "categorize",
-    "block",
+    "consent",
     "cookie"
@@ -42,3 +42,3 @@ ],
     "postscribe": "^2.0.8",
-    "vue-js-modal": "^2.0.0-rc.6",
+    "vue-js-modal": "^1.3.34",
     "vue-switches": "^2.0.1",
@@ -45,0 +45,0 @@ "vue2-collapse": "^1.0.15"

README.md

@@ -22,4 +22,135 @@ ## # vue-cookie-toggler
 
+##
+
+### Usage
+
+Import the component like this:
+```js
+import VueCookieToggler from 'vue-cookie-toggler';
+```
+
+Then you can use it in your app like this (see a complete example below):
+```html
+<vue-cookie-toggler :cookies-groups="cookiesGroups" title="Cookie policy title">
+    Cookie policy message
+</vue-cookie-toggler>
+```
+
+`cookiesGroups` example:
+```json
+[
+  {
+    category: 'essential',
+    name: 'Essential website cookies',
+    description:'Lorem ipsum dolor sit amet <a href="#">cookie policy</a>.',
+    active: true,
+    required: true,
+  },
+  {
+    category: 'analytics',
+    name: 'Analytics and customization',
+    description:'Lorem ipsum dolor sit amet.',
+    active: false,
+  },
+  {
+    category: 'social_networking',
+    name: 'Social networking',
+    description:'Lorem ipsum dolor sit amet.',
+    active: false,
+  },
+]
+```
+
+Then in your HTML the `iframes` and `scripts` tags should be written like this:
+
+`script` tag examples:
+```html
+Example 1:
+<script type="text/plain" data-cookie data-category="analytics" src="/path/to/file"></script>
+
+Example 2:
+<script type="text/plain" data-cookie data-category="essential">
+    // .. your awesome code here
+</script>
+```
+
+`iframe` tag example:
+```html
+<iframe
+  data-cookie
+  data-category="analytics"
+  data-placeholder="true"
+  alt="Please accept the cookie policy to see the content"
+  data-src="/path/to/file"
+></iframe>
+
+```
+
+##
+
+### `cookiesGroups` options:
+
+| Name    | Type | Default value | Description     | |
+| :------------- |:-------------:|:-------------: |:-------------|:-------------:|
+| category | string |  | This will be used in `data-category` | `required` |
+| name    | string |  | The cookie title used in Cookie Settings |`required` |
+| description | string |  | The cookie description used in Cookie Settings |`required` |
+| active | boolean | | Whether to set the cookie ON or OFF by default  | `required` |
+| required | boolean | false | Disable the option to toggle cookie ON/OFF from the Cookie Settings |`optional`|
+
+##
+
+## Example with all the options:
+```html
+<vue-cookie-toggler
+    :cookies-groups="cookiesGroups"
+    title="Cookie policy title"
+    settings-title="Cookie settings title"
+    settings-label="Settings button label"
+    accept-label="Accept button label"
+    save-label="Save button label"
+    cancel-label="Cancel button label"
+>
+    <!-- This content will show up the main view (1st view) -->
+    Cookie policy message
+
+    <!-- (optional) use '#settingsContent' slot if you what to add content in Cookie Settings view (2nd view) -->
+    <template #settingsContent> Cookie settings message </template>
+
+    <!-- (optional) use '#mainButtons' slot if you what to change the buttons in the main view (1st view) -->
+    <template #mainButtons="{ accept, settings, save, cancel }">
+      <button class="vct__btn vct__btn--default" @click="settings">
+        Customize settings
+      </button>
+      <button class="vct__btn vct__btn--primary" @click="accept">
+        Accept all cookies
+      </button>
+    </template>
+
+    <!-- (optional) use '#settingsButtons' slot if you what to change the buttons in Cookie Settings view (2nd view) -->
+    <template #settingsButtons="{ accept, save, save, cancel }">
+      <button class="vct__btn vct__btn--default" @click="accept">
+        Accept all cookies
+      </button>
+      <button class="vct__btn vct__btn--primary" @click="save">
+        Save settings
+      </button>
+    </template>
+</vue-cookie-toggler>
+```
+
+##
+
+### How it works
+
+Becase we have defined the `script` tags with `type="text/plain"` and the `iframes` with `data-src`, the browser will not load them.
+
+At first load the parsers will scan the DOM for `data-cookie` tagged elements and categorize them.
+
+After the visitor accepts the cookie policy, the parsers will enable all `script` tags and `iframes` categorized in the previous step.
+
+##
+
 TODO:
-- [ ] make the component more flexible (props & slots)
+- [x] make the component more flexible (props & slots)
 - [ ] improve variables names
@@ -26,0 +157,0 @@ - [ ] move CSS to an `assets` folder

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1538567

7.39%

Lines of code

38740

1.05%

Number of lines in readme file

161

436.67%

Worsened metrics

Number of low supply chain risk alerts

9

Infinity%

Number of medium supply chain risk alerts

4

Infinity%

Dependency changes

• + Added

  vue-js-modal@1.3.35
  (transitive)

• - Removed

  resize-observer-polyfill@1.5.1
  (transitive)

• - Removed

  vue-js-modal@2.0.1
  (transitive)

• Updated

  vue-js-modal@^1.3.34