Move src to dashboard (#152)

app/javascript/dashboard/components/ui/Switch.vue

@@ -0,0 +1,49 @@
+
+<template>
+  <label class="switch" :class="classObject">
+    <input class="switch-input" :name="name" :id="id" :disabled="disabled" v-model="value" type="checkbox">
+    <div class="switch-paddle" :for="name">
+      <span class="show-for-sr">on off</span>
+    </div>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: Boolean,
+    isFullwidth: Boolean,
+    type: String,
+    size: String,
+    checked: Boolean,
+    name: String,
+    id: String,
+  },
+  data() {
+    return {
+      value: null,
+    };
+  },
+  beforeMount() {
+    this.value = this.checked;
+  },
+  mounted() {
+    this.$emit('input', this.value = !!this.checked);
+  },
+  computed: {
+    classObject() {
+      const { type, size, value } = this;
+      return {
+        [`is-${type}`]: type,
+        [`${size}`]: size,
+        checked: value,
+      };
+    },
+  },
+  watch: {
+    value(val) {
+      this.$emit('input', val);
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/ui/Tabs/Tabs.js

@@ -0,0 +1,33 @@
+/* eslint no-unused-vars: ["error", { "args": "none" }] */
+
+export default {
+  name: 'WootTabs',
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
+  render(h) {
+    const Tabs = this.$slots.default
+      .filter(
+        node =>
+          node.componentOptions &&
+          node.componentOptions.tag === 'woot-tabs-item'
+      )
+      .map((node, index) => {
+        const data = node.componentOptions.propsData;
+        data.index = index;
+        return node;
+      });
+    return (
+      <ul
+        class={{
+          tabs: true,
+        }}
+      >
+        {Tabs}
+      </ul>
+    );
+  },
+};

app/javascript/dashboard/components/ui/Tabs/TabsItem.js

@@ -0,0 +1,88 @@
+/* eslint no-unused-vars: ["error", { "args": "none" }] */
+/* eslint prefer-template: 0 */
+/* eslint no-console: 0 */
+/* eslint func-names: 0 */
+import TWEEN from 'tween.js';
+
+export default {
+  name: 'WootTabsItem',
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  data() {
+    return {
+      animatedNumber: 0,
+    };
+  },
+
+  computed: {
+    active() {
+      return this.index === this.$parent.index;
+    },
+
+    getItemCount() {
+      return this.animatedNumber || this.count;
+    },
+  },
+
+  watch: {
+    count(newValue, oldValue) {
+      let animationFrame;
+      const animate = time => {
+        TWEEN.update(time);
+        animationFrame = window.requestAnimationFrame(animate);
+      };
+      const that = this;
+      new TWEEN.Tween({ tweeningNumber: oldValue })
+        .easing(TWEEN.Easing.Quadratic.Out)
+        .to({ tweeningNumber: newValue }, 500)
+        .onUpdate(function() {
+          that.animatedNumber = this.tweeningNumber.toFixed(0);
+        })
+        .onComplete(() => {
+          window.cancelAnimationFrame(animationFrame);
+        })
+        .start();
+      animationFrame = window.requestAnimationFrame(animate);
+    },
+  },
+
+  render(h) {
+    return (
+      <li
+        class={{
+          'tabs-title': true,
+          'is-active': this.active,
+          'uk-disabled': this.disabled,
+        }}
+      >
+        <a
+          on-click={event => {
+            event.preventDefault();
+            if (!this.disabled) {
+              this.$parent.$emit('change', this.index);
+            }
+          }}
+        >
+          {`${this.name}  (${this.getItemCount})`}
+        </a>
+      </li>
+    );
+  },
+};

app/javascript/dashboard/components/ui/Wizard.vue

@@ -0,0 +1,58 @@
+<template>
+  <transition-group
+    name="wizard-items"
+    tag="div"
+    class="wizard-box flex-child-shrink"
+    :class="classObject"
+  >
+    <div
+      v-for="item in items"
+      :key="item.route"
+      class="item"
+      :class="{ active: isActive(item), over: isOver(item) }"
+    >
+      <h3>
+        {{ item.title }}
+        <span v-if="isOver(item)" class="completed">
+          <i class="ion-checkmark"></i>
+        </span>
+      </h3>
+      <span class="step">
+        {{ items.indexOf(item) + 1 }}
+      </span>
+      <p>{{ item.body }}</p>
+    </div>
+  </transition-group>
+</template>
+
+<script>
+/* eslint no-console: 0 */
+export default {
+  props: {
+    items: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    isFullwidth: Boolean,
+  },
+
+  computed: {
+    classObject() {
+      return 'full-width';
+    },
+    activeIndex() {
+      return this.items.findIndex(i => i.route === this.$route.name);
+    },
+  },
+  methods: {
+    isActive(item) {
+      return this.items.indexOf(item) === this.activeIndex;
+    },
+    isOver(item) {
+      return this.items.indexOf(item) < this.activeIndex;
+    },
+  },
+};
+</script>