Merge tag 'v0.9.8-preview.0' into merge-upstream

.gitignore

@@ -20,3 +20,4 @@ electron.VC.db
 plugins/
 AGREEMENT.sjis
 patch-note.txt
+yarn-error.log

app/components/ApiSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="section">
-      <button class="button button--sm button--soft-warning" @click="restoreDefaults">
+      <button class="button button--soft-warning" @click="restoreDefaults">
         Restore Defaults
       </button>
     </div>

app/components/Login.vue

@@ -56,7 +56,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     .semibold;
-
   }
 }
 </style>

app/components/NotificationsArea.vue

@@ -20,6 +20,7 @@
   <div class="notifications__container flex--grow" ref="notificationsContainer">
     <div
       v-for="notify in notifications"
+      :key="`${notify.message}${notify.date}`"
       class="notification"
       v-show="showExtendedNotifications"
       @click="onNotificationClickHandler(notify.id)"

app/components/Selector.vue

@@ -5,10 +5,10 @@
     :options="{draggable: draggableSelector}"
     @change="handleChange">
     <li
+      v-for="(item, index) in normalizedItems"
+      :key="item.value"
       class="selector-item"
       :class="{ 'selector-item--active': activeItems.includes(item.value) }"
-      v-for="(item, index) in normalizedItems"
-      :key="item.name"
       @contextmenu.stop="(ev) => handleContextMenu(ev, index)"
       @click="(ev) => handleSelect(ev, index)"
       @dblclick="(ev) => handleDoubleClick(ev, index)">
@@ -61,7 +61,6 @@
   justify-content: space-between;
   color: @text-secondary;
   .transition;
-  margin-top: -1px;
 
   &:hover {
     color: @text-primary;

app/components/obs/inputs/GenericFormGroups.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="form-groups">
     <div
-      class="section" v-for="(formGroup, groupIndex) in value"
-      v-if="hasAnyVisibleSettings(formGroup)">
+      class="section"
+      v-for="(formGroup, groupIndex) in value"
+      :key="formGroup.nameSubCategory"
+      v-if="hasAnyVisibleSettings(formGroup)"
+    >
 
       <div class="section-title--dropdown" v-if="formGroup.nameSubCategory != 'Untitled'">
         <h4 class="section-title" @click="toggleGroup(groupIndex)">

app/components/pages/Studio.vue

@@ -27,7 +27,6 @@
 @import "../../styles/_colors";
 
 .studio-page {
-  display: flex;
   flex-direction: column;
 }
 

app/components/shared/DropdownMenu.vue

@@ -1,6 +1,8 @@
 <template>
-  <popper trigger="click" :options="{ placement: 'bottom-start' }">
-
+  <popper
+    trigger="click"
+    :options="{ placement: (placement || 'bottom-start') }"
+  >
     <div class="popper dropdown-menu">
       <slot></slot>
     </div>
@@ -30,7 +32,7 @@
   padding: 8px;
   max-height: 152px;
   overflow-y: auto;
-  transform: none!important;
+  z-index: 200000;
 }
 
 .dropdown-menu__toggle {
@@ -83,3 +85,5 @@
 }
 
 </style>
+
+

app/components/shared/DropdownMenu.vue.ts

@@ -6,7 +6,14 @@ import Popper from 'vue-popperjs';
   components: { Popper }
 })
 export default class DropdownMenu extends Vue {
+  @Prop() title: string;
 
-  @Prop()
-  title: string;
+  // placement can be:
+  // auto, top, right, bottom, left
+  // + variation -start, -end
+  // eg: top-end, right-start, auto-end
+  @Prop() placement: string;
+
+  // icon to replace the arrow-down icon
+  @Prop() icon: string;
 }

app/components/shared/inputs/BaseInput.ts

@@ -0,0 +1,54 @@
+import Vue from 'vue';
+import { cloneDeep } from 'lodash';
+import { Prop } from 'vue-property-decorator';
+import uuid from 'uuid/v4';
+import { IInputMetadata } from './index';
+
+export abstract class BaseInput<TValueType, TMetadataType extends IInputMetadata> extends Vue {
+
+  @Prop()
+  value: TValueType;
+
+  @Prop()
+  title: string;
+
+  @Prop()
+  metadata: TMetadataType;
+
+  uuid = uuid(); // uuid serves to link input field and validator message
+
+  emitInput(eventData: TValueType) {
+    this.$emit('input', eventData);
+  }
+
+  getValidations() {
+    return { required: this.options.required };
+  }
+
+  /**
+   * object for vee validate plugin
+   */
+  get validate() {
+    const validations = this.getValidations();
+    Object.keys(validations).forEach(key => {
+      // VeeValidate recognizes undefined values as valid constraints
+      // so just remove it
+      if (validations[key] === void 0) delete validations[key];
+    });
+    return validations;
+  }
+
+  getOptions(): TMetadataType {
+    // merge props and metadata to the 'options' object
+    // override this method if you need add more props to the 'option' object
+    const metadata = this.metadata || {} as TMetadataType;
+    const options = cloneDeep(metadata);
+    options.title = this.title || metadata.title;
+    return options;
+  }
+
+  get options(): TMetadataType {
+    return this.getOptions();
+  }
+}
+

app/components/shared/inputs/BoolInput.vue

@@ -0,0 +1,15 @@
+<template>
+<div class="input-container">
+  <div class="input-wrapper">
+    <div class="checkbox" @click="handleClick">
+      <input
+        type="checkbox"
+        :checked="value"
+      />
+      <label>{{ options.title }}</label>
+    </div>
+  </div>
+</div>
+</template>
+
+<script lang="ts" src="./BoolInput.vue.ts"></script>

app/components/shared/inputs/BoolInput.vue.ts

@@ -0,0 +1,18 @@
+import { Component, Prop } from 'vue-property-decorator';
+import { BaseInput } from './BaseInput';
+
+@Component({})
+export default class BoolInput extends BaseInput<boolean, {}> {
+
+
+  @Prop()
+  value: boolean;
+
+  @Prop()
+  title: string;
+
+  handleClick() {
+    this.emitInput(!this.value);
+  }
+
+}

app/components/shared/inputs/CodeInput.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <codemirror
+        :value="value"
+        :options="editorOptions[metadata.type]"
+        @input="value => emitInput(value)"
+    />
+  </div>
+</template>
+
+<script lang="ts" src="./CodeInput.vue.ts"></script>
+
+<style lang="less">
+  @import '~codemirror/theme/material.css';
+  @import '~codemirror/lib/codemirror.css';
+  .CodeMirror {
+    font-size: 10pt;
+  }
+</style>

app/components/shared/inputs/CodeInput.vue.ts

@@ -0,0 +1,74 @@
+import { Component, Prop } from 'vue-property-decorator';
+import { codemirror } from 'vue-codemirror';
+import { BaseInput } from './BaseInput';
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/css/css.js';
+import 'codemirror/mode/htmlmixed/htmlmixed.js';
+import 'codemirror/keymap/sublime';
+import { IInputMetadata } from './index';
+
+
+@Component({
+  components: { codemirror }
+})
+export default class CodeInput extends BaseInput<string, IInputMetadata> {
+
+  @Prop({ default: '' })
+  value: string;
+
+  @Prop({ default: () => ({ type: 'html' }) })
+  metadata: IInputMetadata;
+
+  // codemirror options
+  editorOptions = {
+    html: {
+      mode: 'htmlmixed',
+      keyMap: 'sublime',
+      lineNumbers: true,
+      autofocus: true,
+      tabSize: 2,
+      theme: 'material',
+      autoRefresh: true,
+      autoCloseBrackets: true,
+      matchBrackets: true,
+      autoCloseTags: true,
+      extraKeys: {
+        Tab: 'emmetExpandAbbreviation',
+        Enter: 'emmetInsertLineBreak'
+      }
+    },
+
+    css: {
+      mode: 'text/css',
+      keyMap: 'sublime',
+      lineNumbers: true,
+      autofocus: true,
+      tabSize: 2,
+      theme: 'material',
+      autoRefresh: true,
+      autoCloseBrackets: true,
+      matchBrackets: true,
+      autoCloseTags: true,
+      extraKeys: {
+        Tab: 'emmetExpandAbbreviation',
+        Enter: 'emmetInsertLineBreak'
+      }
+    },
+
+    js: {
+      // codemirror options
+      mode: 'javascript',
+      keyMap: 'sublime',
+      lineNumbers: true,
+      autofocus: true,
+      tabSize: 2,
+      theme: 'material',
+      autoRefresh: true,
+      autoCloseBrackets: true,
+      matchBrackets: true,
+      autoCloseTags: true,
+    }
+
+  };
+
+}