9 widget positions

based on Vue 0.11

Makefile

@@ -1,24 +1,23 @@
 BIN=node_modules/.bin
 
-serve: examples/example.js src/style.css $(BIN)/wach
-	($(BIN)/wach -o src/**.scss, $(MAKE) src/style.css) & ($(BIN)/duo-serve $<)
+serve: examples/example.js src/index.css
+	(wach -o src/**.scss, $(MAKE) src/index.css) & ($(BIN)/duo-serve $<)
 
-build/duo-test.js: test/test.js src/* src/languages/*.json node_modules
+build/duo-test.js: test/test.js src/*.js src/*.html src/index.css src/languages/*.json node_modules
 	@mkdir -p $(@D)
 	$(BIN)/duo -d $< > $@
 
-src/style.css: src/style.scss src/button.scss
-	sass $< | $(BIN)/autoprefixer > $@
+src/index.css: src/*.scss
+	sass src/index.scss | $(BIN)/autoprefixer > $@
 
 test-ci: node_modules test
 	$(BIN)/zuul test/test.js
 
-test: build/duo-test.js node_modules
-	$(BIN)/duo-test -B $< -R spec phantomjs
+test: node_modules
 	$(BIN)/zuul --phantom test/test.js
 
 test-chrome: build/duo-test.js node_modules
-	$(BIN)/duo-test -B $< -c "make build/duo-test.js src/style.css" -R spec browser chrome
+	$(BIN)/duo-test -B $< -c "make build/duo-test.js" -R spec browser chrome
 
 node_modules: package.json
 	npm i
@@ -30,7 +29,4 @@ clean:
 clean-all: clean
 	rm -rf components node_modules
 
-$(BIN)/wach:
-	npm i wach
-
 .PHONY: serve test test-ci test-chrome clean clean-all

component.json

@@ -9,8 +9,9 @@
     "widget"
   ],
   "dependencies": {
-    "yyx990803/vue": "v0.10.6",
-    "component/load-styles": "1.0.1"
+    "yyx990803/vue": "0.11",
+    "component/load-styles": "1.0.1",
+    "component/bind": "1.0.0"
   },
   "development": {
     "chaijs/chai": "^1.9.1",

examples/example.js

@@ -1,5 +1,5 @@
 var View = require('../src/index.js');
-var view = new View();
+var view = new View({skin: 'dialog', position: 'mc'});
 view.on('submit', function() {
   console.log('submit', view.rating, view.feedback);
 });

package.json

@@ -12,18 +12,21 @@
     "widget"
   ],
   "dependencies": {
+    "component-bind": "^1.0.0",
     "load-styles": "^1.0.1",
     "partialify": "^3.1.1",
-    "vue": "^0.10.6"
+    "vue": "^0.11"
   },
   "devDependencies": {
     "autoprefixer": "^3.1.0",
+    "bowser": "^0.7.2",
     "browserify": "^6.2.0",
     "chai": "^1.9.2",
     "duo": "^0.8.8",
     "duo-serve": "^0.5.0",
     "duo-test": "^0.3.11",
     "happen": "^0.1.3",
+    "is": "^2.1.0",
     "jquery": "^2.1.1",
     "mocha": "^2.0.1",
     "phantomjs": "^1.9.12",

src/animations.scss

@@ -0,0 +1,18 @@
+.nps-fade {
+  opacity: 1;
+  transition: opacity 500ms;
+}
+.nps-fade-enter,
+.nps-fade-leave {
+  opacity: 0;
+}
+
+.nps-expand {
+  max-height: 400px;
+  overflow: hidden;
+  transition: max-height 500ms;
+}
+.nps-expand-enter,
+.nps-expand-leave {
+  max-height: 0px;
+}

src/dialog.html

@@ -0,0 +1,16 @@
+<div
+  class="nps-Dialog
+    nps-Dialog--{{vertical}}
+    nps-Dialog--{{horizontal}}"
+  v-show="visible"
+  >
+
+  <button
+    class="nps-Dialog-close nps-fade"
+    v-if="showCloseIcon"
+    v-on="click: close"
+  >&#x2715;</button>
+
+  <content>
+
+</div>

src/dialog.scss

@@ -0,0 +1,116 @@
+.nps-Dialog {
+  border-width: 2px;
+  border-style: solid;
+}
+
+@each $theme, $base in $themes {
+  .nps-Survey--#{$theme} .nps-Dialog {
+    border-color: $base;
+    box-shadow: rgba($base, 0.4) 0 1px 4px 0;
+  }
+}
+
+.nps-Dialog {
+  width: 417px;
+  position: fixed;
+  z-index: 2147483646;
+
+  padding: 20px;
+  margin: auto;
+
+  font-size: 14px;
+}
+.nps-Dialog.nps-Dialog--top {
+  top: 20px;
+}
+
+.nps-Dialog.nps-Dialog--middle {
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.nps-Dialog.nps-Dialog--bottom {
+  bottom: 20px;
+}
+
+.nps-Dialog.nps-Dialog--left {
+  transition: left 500ms;
+  left: 20px;
+}
+.nps-Dialog.nps-Dialog--left.nps-show-enter,
+.nps-Dialog.nps-Dialog--left.nps-show-leave {
+  left: -500px;
+}
+
+.nps-Dialog.nps-Dialog--center {
+  left: 0;
+  right: 0;
+}
+
+.nps-Dialog.nps-Dialog--center.nps-Dialog--top {
+  transition: top 500ms;
+}
+.nps-Dialog.nps-Dialog--center.nps-Dialog--top.nps-show-enter,
+.nps-Dialog.nps-Dialog--center.nps-Dialog--top.nps-show-leave {
+  top: -500px;
+}
+
+.nps-Dialog.nps-Dialog--center.nps-Dialog--middle {
+  transform: translate(0, -50%) scale(1);
+  transition: all 500ms;
+}
+.nps-Dialog.nps-Dialog--center.nps-Dialog--middle.nps-show-enter,
+.nps-Dialog.nps-Dialog--center.nps-Dialog--middle.nps-show-leave {
+  transform: translate(0, -50%) scale(0);
+}
+
+.nps-Dialog.nps-Dialog--center.nps-Dialog--bottom {
+  transition: bottom 500ms;
+  bottom: 20px;
+}
+.nps-Dialog.nps-Dialog--center.nps-Dialog--bottom.nps-show-enter,
+.nps-Dialog.nps-Dialog--center.nps-Dialog--bottom.nps-show-leave {
+  bottom: -500px;
+}
+
+.nps-Dialog.nps-Dialog--right {
+  transition: right 500ms;
+  right: 20px;
+}
+.nps-Dialog.nps-Dialog--right.nps-show-enter,
+.nps-Dialog.nps-Dialog--right.nps-show-leave {
+  right: -500px;
+}
+
+.nps-Dialog .nps-Title {
+  margin-right: 20px;
+  font-size: 16px;
+}
+
+.nps-Dialog-close {
+  float: right;
+  font-weight: bold;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+
+  font-size: 16px;
+  width: 30px;
+  height: 30px;
+  color: white;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.nps-Dialog-close:focus {
+  outline: 0;
+}
+@each $theme, $base in $themes {
+  .nps-Survey--#{$theme} .nps-Dialog-close {
+    background-color: $base;
+    &:hover {
+      background-color: mix($base, white, 90%);
+    }
+  }
+}

src/feedback.html

@@ -1,22 +1,23 @@
 <div
   class="nps-Feedback nps-expand"
-  v-transition
+  v-transition="nps-expand"
   >
   <div class="nps-Title">
     {{t('HOW_LIKELY', us || t('US'))}}
   </div>
 
-  <div v-component="scale"></div>
+  <div v-partial="scale"></div>
 
   <div
-    class="nps-Feedback-textContainer"
-    v-if="showFeedbackText"
-    v-transition
+    class="nps-Feedback-textContainer nps-expand"
+    v-show="showFeedbackText"
+    v-transition="nps-expand"
     >
     <textarea
+      v-component="text"
+      v-with="placeholder: t('IMPROVE')"
       v-model="feedback"
       class="nps-Feedback-text"
-      placeholder="{{t('IMPROVE')}}"
       ></textarea>
   </div>
 

src/feedback.scss

@@ -0,0 +1,34 @@
+.nps-Feedback-textContainer {
+  height: 80px;
+  margin-top: 14px;
+  overflow: hidden;
+  transition: height 500ms;
+}
+.nps-Feedback-textContainer.nps-enter,
+.nps-Feedback-textContainer.nps-leave {
+  height: 0px;
+}
+
+.nps-Feedback-text {
+  border-width: 2px;
+  border-style: solid;
+  font-size: 14px;
+  padding: 7px 10px;
+  width: 100%;
+  height: 100%;
+  resize: none;
+}
+.nps-Feedback-text:focus {
+  outline: 0;
+}
+@each $theme, $base in $themes {
+  .nps-Survey--#{$theme} {
+    .nps-Feedback-text {
+      border-color: mix($base, white, 20%);
+    }
+    .nps-Feedback-text:focus {
+      border-color: mix($base, white, 80%);
+      background-color: mix($base, white, 4%);
+    }
+  }
+}