Merge pull request #6 from alfhen/feature-cookie-domain

Feature cookie domain
alfhen · Nov 7, 2016 · 8fc012e · 8fc012e
2 parents 8dbe9cc + c42a24f
commit 8fc012e
Show file tree

Hide file tree

Showing 11 changed files with 832 additions and 183 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
-# vue-cookie
-A Vue.js plugin for manipulating cookies
+# vue-cookie [![CircleCI](https://circleci.com/gh/alfhen/vue-cookie.svg?style=svg)](https://circleci.com/gh/alfhen/vue-cookie)
+A Vue.js plugin for manipulating cookies tested up to ```Vue v2.0.5```
 
 ## Installation
 
@@ -13,7 +13,7 @@ npm install vue-cookie --save
 Include in ```<body>``` after loading Vue and it will automatically hook into Vue
 
 ``` html
-<script src="/node_modules/vue-cookie/src/vue-cookie.js'"></script>
+<script src="/node_modules/vue-cookie/build/vue-cookie.js'"></script>
 
  ```
 
@@ -29,7 +29,10 @@ Vue.use(VueCookie);
 ```
 
 ### Usage
-The plugin is available through ```this.$cookie``` in components
+The plugin is available through ```this.$cookie``` in components or ```Vue.cookie```
+
+Rather than implementing my own Cookie handling logic the plugin now wraps the awesome
+[tiny-cookie](https://github.com/Alex1990/tiny-cookie "Tiny cookie documentation") package
 
 ###### Example
 ``` javascript
@@ -45,18 +48,43 @@ this.$cookie.delete('test');
 
 ```
 
+###### Advanced examples
+``` javascript
+
+// Setting the cookie Domain
+this.$cookie.set('test', 'Random value', {expires: 1, domain: 'localhost'});
+
+// As this cookie is set with a domain then if you wish to delete it you have to provide the domain when calling delete
+this.$cookie.delete('test', {domain: 'localhost'});
+
+// Customizing expires
+var date = new Date;
+date.setDate(date.getDate() + 21);
+
+Cookie.set('dateObject', 'A date object', { expires: date });
+Cookie.set('dateString', 'A parsable date string', { expires: date.toGMTString() });
+Cookie.set('integer', 'Seven days later', { expires: 7 });
+Cookie.set('stringSuffixY', 'One year later', { expires: '1Y' });
+Cookie.set('stringSuffixM', 'One month later', { expires: '1M' });
+Cookie.set('stringSuffixD', 'One day later', { expires: '1D' });
+Cookie.set('stringSuffixh', 'One hour later', { expires: '1h' });
+Cookie.set('stringSuffixm', 'Ten minutes later', { expires: '10m' });
+Cookie.set('stringSuffixs', 'Thirty seconds later', { expires: '30s' });
+
+```
+
 Thanks for using the plugin, I am happy to accept feedback/pull requests, do not forget to star if you like it!
 
 Happy Coding! :D
 
 ### Tests
-This packacge uses the ´´´testem``` framework and jasmine assertion library
+This packacge uses the ´´´testem``` framework and ```jasmine``` assertion library
 
 ``` bash
 # Run npm install to fetch dependencies
 npm install
 
 # Then you may run the tests from
-npm run test
+npm run test-dev
 
 ```
diff --git a/build/vue-cookie.js b/build/vue-cookie.js
diff --git a/dev.testem.json b/dev.testem.json
@@ -0,0 +1,12 @@
+{
+  "framework": "jasmine",
+  "src_files": [
+    "src/vue-cookie.js",
+    "test/spec/vue-cookie-spec.js"
+  ],
+  "serve_files": [
+    "test/bundle.js"
+  ],
+  "before_tests" : "gulp --gulpfile test.gulpfile.js",
+  "launch_in_dev" : ["Chrome"]
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -3,19 +3,9 @@ var elixir = require('laravel-elixir');
 require('laravel-elixir-webpack-official');
 
 require('laravel-elixir-vue');
-/*
- |--------------------------------------------------------------------------
- | Elixir Asset Management
- |--------------------------------------------------------------------------
- |
- | Elixir provides a clean, fluent API for defining some basic Gulp tasks
- | for your Laravel application. By default, we are compiling the Sass
- | file for our application, as well as publishing vendor resources.
- |
- */
 
 elixir(function(mix) {
 
-    mix.webpack('vue-cookie-spec.js', 'test/bundle.js', 'test/spec');
+    mix.webpack('vue-cookie.js', 'build', 'src');
 
 });
diff --git a/package.json b/package.json
@@ -4,10 +4,13 @@
   "description": "A Vue.js plugin for manipulating cookies",
   "author": "Alf Henderson <alfhenderson@gmail.com>",
   "private": false,
-  "main": "src/vue-cookie.js",
+  "main": "build/vue-cookie.js",
   "license": "MIT",
   "scripts": {
-    "test": "./node_modules/testem/testem.js ci"
+    "test": "./node_modules/testem/testem.js ci",
+    "test-dev": "./node_modules/testem/testem.js -f dev.testem.json",
+    "build": "gulp --production",
+    "build-test": "gulp --gulpfile test.gulpfile.js"
   },
   "repository": {
     "type": "git",
@@ -18,7 +21,8 @@
     "laravel-elixir": "^6.0.0-13",
     "laravel-elixir-vue": "^0.1.8",
     "laravel-elixir-webpack-official": "^1.0.9",
-    "testem": "^1.13.0",
+    "testem": "~1.8",
+    "tiny-cookie": "^1.0",
     "vue": "^2.0.5"
   },
   "devDependencies": {}

diff --git a/src/vue-cookie.js b/src/vue-cookie.js
@@ -1,25 +1,31 @@
 (function () {
 
+    var Cookie = require('tiny-cookie');
+
     var VueCookie = {
 
         install: function (Vue) {
             Vue.prototype.$cookie = this;
             Vue.cookie = this;
         },
-
-        set: function (name, value, days) {
-            let d = new Date;
-            d.setTime(d.getTime() + 24*60*60*1000*days);
-            window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
+        set: function (name, value, daysOrOptions) {
+            let opts = daysOrOptions;
+            if(Number.isInteger(daysOrOptions)) {
+                opts = {expires: daysOrOptions};
+            }
+            return Cookie.set(name, value, opts);
         },
 
         get: function (name) {
-            var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
-            return v ? v[2] : null;
+            return Cookie.get(name);
         },
 
-        delete: function (name) {
-            this.set(name, '', -1);
+        delete: function (name, options) {
+            let opts = {expires: -1};
+            if(options !== undefined) {
+                opts = Object.assign(options, opts);
+            }
+            this.set(name, '', opts);
         }
     };
 

diff --git a/test.gulpfile.js b/test.gulpfile.js
@@ -0,0 +1,11 @@
+var elixir = require('laravel-elixir');
+
+require('laravel-elixir-webpack-official');
+
+require('laravel-elixir-vue');
+
+elixir(function(mix) {
+
+    mix.webpack('vue-cookie-spec.js', 'test/bundle.js', 'test/spec');
+
+});