jh-componentj 0.2.0

package/src/components/Codepane.vue

@@ -0,0 +1,260 @@
+<template>
+<div class="code-pane" :style="{
+        background: colors.back,
+        borderColor: colors.border,
+        width: width + 'px',
+        height: height + 'px',
+        top: `calc(50% - ${height/2+20}px)`,
+        left: `calc(50% - ${width/2}px)`,
+        boxShadow: `0 0 15px 1px ${colors.shadow || '#0b0e145e'}`
+    }">
+    <codemirror v-model="code" :options="options"
+       @input="on_change" ref="cm"/>
+    <span class="close thick code-close"
+        @click="$emit('close-code')"></span>
+</div>
+</template>
+
+<script>
+
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/htmlmixed/htmlmixed'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/dracula.css'
+import 'codemirror/addon/scroll/simplescrollbars.js'
+import 'codemirror/addon/scroll/simplescrollbars.css'
+
+export default {
+    name: 'Codepane',
+    components: {
+        codemirror
+    },
+    props: ['colors', 'height', 'width', 'bundle', 'src'],
+    mounted() {
+        this.reset_style()
+    },
+    computed: {
+        style() {
+            return `
+                .CodeMirror {
+                    height: ${this.$props.height}px !important;
+                }
+                .cm-s-dracula.CodeMirror,
+                .cm-s-dracula
+                .CodeMirror-gutters {
+                    background-color: ${this.$props.colors.cmBack} !important;
+                    color: ${this.$props.colors.cmCode} !important;
+                }
+                .cm-property {
+                    color: ${this.$props.colors.cmProperty} !important;
+                }
+                .cm-s-dracula .CodeMirror-linenumber {
+                    color: ${this.$props.colors.cmLineNumber};
+                }
+                .cm-comment {
+                    color: ${this.$props.colors.cmComment} !important;
+                }
+                .cm-attribute {
+                    color: ${this.$props.colors.cmAttribute} !important;
+                }
+                .cm-tag,
+                .cm-keyword {
+                    color: ${this.$props.colors.cmKeyword} !important;
+                }
+                .CodeMirror-cursor {
+                    border-left: solid thin ${this.$props.colors.text} !important;
+                }
+                .CodeMirror-selected {
+                    background: ${this.$props.colors.selection} !important;
+                }
+            `
+        }
+    },
+    methods: {
+        reset_style() {
+            var stbr = document.getElementById('code-mirror-custom')
+            if (stbr) {
+                var sheetParent = stbr.parentNode
+                sheetParent.removeChild(stbr)
+            }
+
+
+            var sheet = document.createElement('style')
+            sheet.setAttribute("id", "code-mirror-custom");
+            sheet.innerHTML = this.style
+            document.body.appendChild(sheet)
+        },
+        on_change(text) {
+            this.$emit('src-changed', text)
+        },
+    },
+    watch: {
+        width() {
+            if (!this.$refs.cm) return
+            this.$refs.cm.refresh()
+        },
+        colors() {
+            this.reset_style()
+        }
+    },
+    data() {
+        return {
+            code: this.$props.src,
+            options: {
+                mode: 'text/javascript',
+                tabSize: 4,
+                styleActiveLine: true,
+                lineNumbers: true,
+                line: true,
+                foldGutter: true,
+                styleSelectedText: true,
+                runmode: 'colorize',
+                matchBrackets: true,
+                showCursorWhenSelecting: true,
+                theme: "dracula",
+                extraKeys: {
+                    "Ctrl": "autocomplete"
+                },
+                hintOptions: {
+                    completeSingle: false
+                },
+                scrollbarStyle: 'simple'
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.code-pane {
+    position: absolute;
+    height: 100%;
+    border: 1px solid;
+    z-index: 200;
+}
+.CodeMirror {
+    font-size: 14px;
+}
+
+.cm-tag,
+.cm-keyword {
+    /*color: #dddcdc !important;*/
+    /*color: #e27777 !important;*/
+    color: #6dc59f !important;
+}
+.cm-variable,
+.cm-variable-2,
+.cm-def {
+    /*color: #50fa7b !important;*/
+    color: #3b9e64 !important;
+    /* specific keyword #d0ca95 */
+}
+
+.cm-string {
+    color: #9faabb !important;
+}
+.cm-string-2 {
+    color: #9faabb !important;
+}
+.cm-operator {
+    color: /*#e54150*/ #9a9a9a !important;
+}
+.cm-property {
+    color: #35a776 !important;
+}
+.cm-number {
+    color: #fbab66 !important;
+}
+.cm-comment {
+    color: #9098af63 !important;
+}
+.cm-s-dracula.CodeMirror,
+.cm-s-dracula
+.CodeMirror-gutters {
+    background-color: /*#121827*/ #1b202dfa !important;
+}
+
+.CodeMirror-simplescroll-vertical,
+.CodeMirror-simplescroll-horizontal {
+    background: none;
+}
+.CodeMirror-simplescroll-horizontal div,
+.CodeMirror-simplescroll-vertical div {
+    border-radius: 20px;
+    border: none;
+    background: #7b7b7b;
+    opacity: 0.35;
+    right: 1px;
+}
+.CodeMirror-simplescroll-horizontal div:hover,
+.CodeMirror-simplescroll-vertical div:hover {
+    filter: brightness(1.5);
+}
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    background: none;
+}
+.CodeMirror-simplescroll-horizontal {
+    bottom: 3px;
+}
+
+.code-close {
+    z-index: 1001;
+    right: 10px;
+    top: 10px;
+    position: absolute !important;
+    cursor: pointer;
+    opacity: 0.75;
+}
+
+.code-close:hover {
+    opacity: 1;
+}
+
+.close {
+  position: relative;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  overflow: hidden;
+}
+.close:hover::before, .close:hover::after {
+}
+.close::before, .close::after {
+  content: '';
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  top: 50%;
+  left: 0;
+  margin-top: -1px;
+  background: #88888888;
+}
+.close::before {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.close::after {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.close.big {
+  -webkit-transform: scale(3);
+  -moz-transform: scale(3);
+  -ms-transform: scale(3);
+  -o-transform: scale(3);
+  transform: scale(3);
+}
+
+.close.thick::before, .close.thick::after {
+  height: 2px;
+  margin-top: -2px;
+}
+
+</style>

package/src/components/Multiselect.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id="list1" class="dropdown-check-list" tabindex="100">
+    <span class="anchor">Extensions</span>
+    <ul class="items">
+      <li v-for="name of list">
+        <input type="checkbox" v-model="checks[name]" @input="on_switch" />
+        {{ name }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "Multiselect",
+  props: ["list"],
+  mounted() {
+    var checkList = document.getElementById("list1");
+    checkList.getElementsByClassName("anchor")[0].onclick = () => {
+      if (checkList.classList.contains("visible"))
+        checkList.classList.remove("visible");
+      else checkList.classList.add("visible");
+    };
+    for (var n of this.$props.list) {
+      this.$set(this.checks, n, true);
+    }
+  },
+  methods: {
+    on_switch() {
+      setTimeout(() => {
+        this.$emit("onstate", this.checks);
+      });
+    },
+  },
+  data() {
+    return {
+      checks: {},
+    };
+  },
+};
+</script>
+<style>
+.dropdown-check-list {
+  display: inline-block;
+  position: absolute;
+  top: 12px;
+  right: 100px;
+  z-index: 1000;
+  background: inherit;
+  outline: none;
+  user-select: none;
+}
+
+.dropdown-check-list .anchor {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  padding: 5px 50px 5px 10px;
+  border: 1px dotted #a5a5a554;
+  width: 150px;
+  border-radius: 3px;
+}
+
+.dropdown-check-list .anchor:after {
+  position: absolute;
+  content: "";
+  border-left: 1px solid #fff;
+  border-top: 1px solid #fff;
+  padding: 3px;
+  right: 10px;
+  top: 25%;
+  -moz-transform: rotate(-135deg);
+  -ms-transform: rotate(-135deg);
+  -o-transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+  transform: rotate(-135deg);
+}
+
+.dropdown-check-list .anchor:active:after {
+  right: 9px;
+}
+
+.dropdown-check-list ul.items {
+  padding: 2px;
+  display: none;
+  margin: 0;
+  border: 1px dotted #a5a5a554;
+  border-top: none;
+}
+
+.dropdown-check-list ul.items li {
+  list-style: none;
+}
+
+.dropdown-check-list ul.items li input {
+  vertical-align: sub;
+  margin-right: 5px;
+}
+.dropdown-check-list.visible .anchor {
+  color: #0094ff;
+}
+
+.dropdown-check-list.visible .items {
+  display: block;
+  padding: 5px;
+}
+</style>

package/src/components/MyVueComponent.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h2>{{ message }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: "Hello from Vue!",
+    };
+  },
+  mounted() {
+    if (window.vueData) {
+      this.message = window.vueData.message; // Use data passed from React
+    }
+  },
+};
+</script>
+
+<style scoped>
+h2 {
+  color: blue;
+}
+</style>

package/src/components/StdInput.vue

@@ -0,0 +1,70 @@
+<template>
+  <span>
+    <input
+      v-if="type === 'text' || !type"
+      :value="value"
+      class="tvjs-std-input"
+      :style="style"
+      :placeholder="name"
+      @change="$emit('change', $event.target.value)"
+      @input="$emit('input', $event.target.value)"
+    />
+    <select
+      v-else-if="type === 'select'"
+      class="tvjs-std-input"
+      :style="style"
+      :value="value"
+      @input="$emit('input', $event.target.value)"
+    >
+      <option v-for="opt in list">{{ opt }}</option>
+    </select>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "StdInput",
+  props: ["value", "name", "type", "list", "colors"],
+  methods: {},
+  computed: {
+    style() {
+      return {
+        //background: this.$props.colors.back,
+        //color: this.$props.colors.text
+      };
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+.tvjs-std-input {
+  margin: 5px;
+  background-color: #161b27;
+  border: 1px dotted #353940;
+  height: 22px;
+  border-radius: 3px;
+  padding: 2px 0px 3px 10px;
+  color: whitesmoke;
+  font-size: 1.2em;
+  outline: none;
+  width: 100px;
+}
+
+select.tvjs-std-input {
+  height: 29px;
+  -moz-appearance: none;
+}
+
+select.tvjs-std-input {
+  display: none; /*hide original SELECT element: */
+}
+
+.tvjs-std-input::placeholder {
+  color: #8e909a;
+  opacity: 0.25;
+}
+</style>

package/src/components/Window.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="tvjs-x-window" :style="style" ref="win">
+        <div class="tvjs-x-window-head">
+            <div class="tvjs-x-window-title"
+                @mousedown="onMouseDown">
+                {{title}}
+            </div>
+            <div class="tvjs-x-window-close"
+                @click="$emit('close')">
+                ╳
+            </div>
+        </div>
+        <div class="tvjs-x-window-body">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+
+import Dragg from './dragg.js'
+
+export default {
+    name: 'Window',
+    mixins: [Dragg],
+    props: ['title', 'tv'],
+    mounted() {
+        this.ww = this.$refs.win.clientWidth
+        this.wh = this.$refs.win.clientHeight
+        this.x = this.tvw * 0.5 - this.ww * 0.5
+        this.y = this.tvh * 0.5 - this.wh * 0.5
+    },
+    computed: {
+        style() {
+            return {
+                top: `${this.y}px`,
+                left: `${this.x}px`
+            }
+        },
+        tvw() {
+            return this.$props.tv.width
+        },
+        tvh() {
+            return this.$props.tv.height
+        }
+    },
+    data() {
+        return {
+            ww: 0,
+            wh: 0,
+            x: 0,
+            y: 0
+        }
+    }
+}
+</script>
+<style>
+.tvjs-x-window {
+    position: absolute;
+    background: #1b202def;
+    border-radius: 3px;
+    pointer-events: all;
+    padding-left: 7px;
+    z-index: 100;
+    color: #dedddd;
+}
+.tvjs-x-window-head {
+    font-size: 2em;
+    user-select: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+    height: 36px;
+    padding: 10px;
+    cursor: grab;
+}
+
+.tvjs-x-window-body {
+    padding: 10px;
+    font-size: 1.1em;
+}
+.tvjs-x-window-title {
+    width: 300px;
+    user-select: none;
+}
+.tvjs-x-window-close {
+    width: 26px;
+    cursor: pointer;
+    margin: -1em;
+    padding: 1em;
+    font-size: 0.75em;
+}
+</style>

package/src/components/dragg.js

@@ -0,0 +1,32 @@
+export default  {
+    methods: {
+        onMouseDown(e) {
+            e = e || window.event
+            e.preventDefault()
+            this.drag.offset_x = e.clientX - this.x
+            this.drag.offset_y = e.clientY - this.y
+            document.onmouseup = this.stopdrag
+            document.onmousemove = this.ondrag
+        },
+
+        ondrag(e) {
+            e = e || window.event
+            e.preventDefault()
+            this.x = e.clientX - this.drag.offset_x
+            this.y =  e.clientY - this.drag.offset_y
+        },
+
+        stopdrag() {
+            document.onmouseup = null
+            document.onmousemove = null
+        }
+    },
+    data() {
+        return {
+            drag: {
+                offset_x: 0,
+                offset_y: 0
+            }
+        }
+    }
+}