@mixd-id/web-scaffold 0.1.250801003 → 0.1.250801004

package/docs/components/Dashboard.md

@@ -0,0 +1,56 @@
+# Dashboard
+Dashboard components
+
+## Configs
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| params | Object | {} | | Dashboard parameters |
+| params.presetUid | String | "" | | Preset unique identifier |
+
+## Samples
+```json
+{
+  "params": {
+    "presetUid": "abc",
+    "viewUid": "def"
+  },
+  
+  "presets": [
+
+    {
+      "name": "Preset Name",
+      
+      "views": [
+        {
+          "type": "Grid",
+          "uid": ":uid"
+        }
+      ],
+      
+      "datasource": {
+        
+        ":uid": {
+          "uid": ":uid",
+          "datasourceUid": "234",
+          "filters": [],
+          "sorts": [],
+          "groups": [],
+          "pivot": []
+        },
+        
+      }
+      
+    }
+    
+  ]
+}
+```
+
+
+## Sub Components
+
+### Dashboard Configs
+Dashboard configuration panel
+
+### Dashboard Component Selector
+Component selector for adding component to preset views

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.250801003",
+  "version": "0.1.250801004",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Dashboard.vue

@@ -0,0 +1,216 @@
+<template>
+  <div :class="$style.comp">
+
+    <div :style="leftStyle" class="relative flex flex-col">
+      <DashboardConfigs :config="config" class="flex-1" />
+
+      <div :class="$style.resize1" @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+    </div>
+
+    <div class="flex-1 flex flex-col gap-4 py-4">
+
+      <div class="px-8 flex flex-row gap-6 items-center">
+        <h3>{{ preset?.name }}</h3>
+        <button type="button" class="p-3" @click="load">
+          <svg width="16" height="16" class="fill-primary hover:fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2c0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64c-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31c18.48 0 31.97 15.04 31.97 31.96c0 35.04-81.59 70.41-147 70.41c-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26l47.6-47.63C455.5 34.57 462.3 32.11 468.9 32.11z"/></svg>
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto px-8">
+        <component :is="component.type"
+                   v-for="component in components"
+                   :="component" />
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+import {computed, inject, onMounted, ref, watch} from "vue";
+import DashboardConfigs from "./DashboardConfigs.vue";
+
+const { controller, presetKey } = defineProps({
+
+  controller: {
+    type: String,
+    required: true
+  },
+
+  presetKey: { type: String },
+
+})
+
+const alert = inject('alert')
+const loadConfig = inject('loadConfig')
+const saveConfig = inject('saveConfig')
+const useSocket = inject('useSocket')
+const socket = useSocket()
+
+const config = ref(Object.assign({
+  params: {},
+  presets: []
+}, presetKey ? await loadConfig(presetKey, {}) : {}))
+
+const data = ref({})
+
+console.log('Config', config)
+
+const leftStyle = computed(() => {
+  if(!config.value.params.leftWidth)
+    config.value.params.leftWidth = 300
+
+  return {
+    width: `${config.value.params.leftWidth}px`
+  }
+})
+
+function load(){
+  if(!preset.value) return
+
+  socket.send(`${controller}.load`, preset.value.datasource)
+      .then(res => Object.assign(data.value, res))
+      .catch(err => alert(err))
+}
+
+function resize1(w){
+  if(config.value.params.leftWidth + w >= 100 && config.value.params.leftWidth + w <= 600){
+    config.value.params.leftWidth += w
+  }
+}
+
+const preset = computed(() => {
+  return (config.value.presets ?? []).find(_ => _.uid === config.value.params.presetUid)
+})
+
+const selectedPreset = computed(() => {
+  return (config.value.presets ?? []).find(_ => _.uid === config.value.params.selectedUid)
+})
+
+const compClasses = [
+  'aspectRatio', 'position', 'left', 'top', 'right', 'bottom',
+
+  'bdSize', 'bdColor', 'bdRadius', 'bdStyle',
+  'divideSize', 'divideColor', 'divideStyle',
+  'outlineWidth', 'outlineColor', 'outlineStyle',
+  'bgColors', 'bgSize', 'bgPosition', 'bgRepeat',
+  'textAlign', 'verticalAlign',
+  'gap',
+  'padding', 'margin',
+  'direction', 'columns', 'rows', 'display', 'wrap',
+  'width', 'minWidth', 'maxWidth',
+  'height', 'minHeight', 'maxHeight',
+  'fontFamily', 'fontSize', 'fontWeight', 'textColor', 'lineHeight', 'overflow',
+  'textTransform', 'whitespace', 'textOverflow', 'textDecoration',
+  'boxShadow', 'opacity',
+  'colSpan', 'rowSpan',
+  'flex', 'flexAlign', 'flexJustify', 'flexBasis', 'flexColumns', 'flexWrap',
+  'flexDirection',
+  'zIndex',
+
+  'autoFlow', 'alignItems', 'justifyContent',
+  'letterSpacing', 'lineClamp',
+
+  'animate',
+
+  'blur', 'grayscale',
+]
+const containerClasses = [
+  'containerVariant', 'containerGridColumn', 'containerGap'
+]
+const itemClasses = [
+  'itemMinWidth', 'itemRatio', 'itemVariant'
+]
+
+const components = computed(() => {
+  if(!selectedPreset.value) return
+
+  const getComponent = (component) => {
+    if (!component.uid) return
+    if (!component.props.enabled) return
+
+    const compUid = '_' + component.uid.substring(0, 4) + ' '
+
+    const instance = {
+      type: component.type,
+      uid: component.uid,
+
+      class: compUid + compClasses.map(key => {
+        return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+      })
+          .filter(_ => _)
+          .join(' '),
+
+      containerClass: containerClasses.map(key => {
+        return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+      })
+          .filter(_ => _)
+          .join(' '),
+
+      itemClass: itemClasses.map(key => {
+        return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+      })
+          .filter(_ => _)
+          .join(' ')
+    }
+
+    for (let key in component.props) {
+      if (!compClasses.includes(key) &&
+          !containerClasses.includes(key) &&
+          !itemClasses.includes(key) &&
+          !['enabled'].includes(key)) {
+        instance[key] = component.props[key]
+      }
+    }
+
+    const whitelistProps = [
+      'column', 'datasourceUid', 'rows', 'columns'
+    ]
+    whitelistProps.forEach((key) => {
+      if (component.props[key]) {
+        instance[key] = component.props[key]
+      }
+    })
+
+    if(data.value[component.uid]){
+      instance.items = data.value[component.uid].items
+    }
+    else if(Array.isArray(component.items)) {
+      instance.items = component.items.map((_) => getComponent(_)).filter(_ => _)
+    }
+
+    return instance
+  }
+
+  return selectedPreset.value.views.map(view => {
+    return getComponent(view)
+  })
+    .filter(_ => _)
+})
+
+if(presetKey){
+  console.log('Watch config changes')
+  watch(() => config, _ => saveConfig(presetKey, config.value), {
+    deep: true
+  })
+}
+
+onMounted(() => {
+  load()
+})
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-row divide-x divide-text-50;
+}
+
+.resize1{
+  @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
+}
+
+</style>

package/src/components/DashboardComponentSelector.vue

@@ -0,0 +1,88 @@
+<template>
+	<Modal ref="modal" width="360" height="480">
+	  <template v-slot:head>
+	    <div class="relative p-5">
+	      <h3>Select Component</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="$refs.modal.close()">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-5">
+
+	    </div>
+	  </template>
+	  <div class="flex-1 divide-y divide-text-50">
+
+      <div class="flex flex-col">
+        <button v-for="component of components"
+                class="p-3 px-6 text-left"
+                @click="add(component)">
+          {{ component.type }}
+        </button>
+      </div>
+
+
+	  </div>
+	</Modal>
+</template>
+
+<script setup>
+
+import {ref, useTemplateRef} from "vue";
+import md5 from "md5";
+
+const modal = useTemplateRef('modal')
+const callback = ref(null)
+
+function open(_, cb){
+  callback.value = cb
+  modal.value.open()
+}
+
+function add(component){
+  if(typeof callback.value === 'function'){
+    const newComponent = JSON.parse(JSON.stringify(component))
+    newComponent.uid = md5(new Date().toString())
+    callback.value(newComponent)
+  }
+  modal.value.close()
+}
+
+const components = ref([
+  {
+    type: "Grid",
+    name: "Grid",
+    props: {
+      enabled: true
+    },
+    items: []
+  },
+  {
+    type: "VirtualTable",
+    name: "Virtual Table",
+    props: {
+      enabled: true
+    },
+    items: []
+  }
+])
+
+defineExpose({
+  open
+})
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/DashboardConfigs.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="flex flex-col overflow-hidden relative">
+
+    <TransitionGroup name="openltr" tag="div" class="flex-1 flex flex-col">
+
+      <div v-if="view" class="flex-1 flex flex-col">
+
+        <div class="flex flex-row items-center gap-2 p-5">
+          <button type="button" @click="delete config.params.viewUid">
+            <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+          </button>
+          <div class="flex-1">
+            <h5>{{ view.name }}</h5>
+          </div>
+        </div>
+
+        <div class="flex-1 overflow-y-auto">
+          <component :is="`${view.type}Setting`"
+                     :item="view"
+                     :view-types="viewTypes"
+                     :view-index="viewIndex"
+                     :view-type="viewType">
+          </component>
+        </div>
+
+      </div>
+
+      <div v-else-if="preset" class="flex-1 flex flex-col">
+        <div class="flex flex-row items-center gap-2 p-5">
+          <button type="button" @click="delete config.params.presetUid">
+            <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+          </button>
+          <div class="flex-1">
+            <h5>{{ preset.name }}</h5>
+          </div>
+        </div>
+
+        <div class="flex-1 overflow-y-auto">
+          <div class="p-5">
+
+            <div class="flex flex-col gap-1">
+              <div class="flex flex-row gap-3">
+                <label class="flex-1">Views</label>
+                <button type="button"
+                        class="text-primary"
+                        @click="$refs.componentSelector.open(null, comp => views.push(comp))">
+                  Add
+                </button>
+              </div>
+              <TreeView2 :items="views">
+                <template #default="{ item, index, parent }">
+                  <div class="flex flex-row gap-2 bg-base-500 hover:bg-text-50 p-3">
+                    <div class="flex-1 flex flex-row"
+                         @click="config.params.viewUid = item.uid">
+                      <div class="text-ellipsis-nowrap flex-1">
+                        {{ item.name }}
+                      </div>
+                    </div>
+                    <button v-if="Array.isArray(item.items)" @click="$refs.componentSelector.open(null, comp => item.items.push(comp))">
+                      <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+                    </button>
+                    <button type="button" @click="parent.splice(index, 1)">
+                      <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+                    </button>
+                  </div>
+                </template>
+              </TreeView2>
+
+              <DashboardComponentSelector ref="componentSelector" />
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="config" class="flex-1 flex flex-col">
+        <div class="p-5">
+          <h5>Select Presets</h5>
+        </div>
+
+        <div class="flex-1 overflow-y-auto">
+          <div class="p-5">
+            <div class="flex flex-row gap-3">
+              <label class="text-text-300 flex-1">Presets</label>
+              <button type="button" class="text-primary" @click="addPreset">Add</button>
+            </div>
+            <ListItem :items="presets"
+                      class="mt-2"
+                      @reorder="(from, to) => { presets.splice(to, 0, presets.splice(from, 1)[0]); }">
+              <template v-slot="{ item, index }">
+                <div class="flex flex-row items-center gap-3 p-3 bg-base-500 hover:bg-text-50">
+                  <div data-reorder>
+                    <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                  </div>
+                  <Radio :value="item.uid" v-model="config.params.selectedUid" />
+                  <div class="flex-1" @click="config.params.presetUid = item.uid">
+                    {{ item.name }}
+                  </div>
+                  <div>
+                    <button type="button" @click="presets.splice(index, 1)">
+                      <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                    </button>
+                  </div>
+                </div>
+              </template>
+            </ListItem>
+          </div>
+        </div>
+      </div>
+
+    </TransitionGroup>
+
+  </div>
+</template>
+
+<script setup>
+
+import {computed, provide, ref} from "vue";
+import md5 from "md5";
+import DashboardComponentSelector from "./DashboardComponentSelector.vue";
+
+
+const { config } = defineProps({
+  config: {
+    type: Object,
+    required: true
+  }
+})
+
+const presets = computed(() => {
+  if(!Array.isArray(config.presets))
+    config.presets = []
+  return config.presets
+})
+
+const preset = computed(() => {
+  return (presets.value ?? []).find(_ => _.uid === config.params.presetUid)
+})
+
+const views = computed(() => {
+  if(!preset.value) return []
+
+  if(!Array.isArray(preset.value.views))
+    preset.value.views = []
+  return preset.value.views
+})
+
+const view = computed(() => {
+  if(config.params.viewUid && preset){
+
+    const getView = (uid, items) => {
+      for(let item of items){
+        if(item.uid === uid){
+          return item
+        }
+        else if(Array.isArray(item.items)){
+          const subItem = getView(uid, item.items)
+          if(subItem)
+            return subItem
+        }
+      }
+    }
+
+    return getView(config.params.viewUid, views.value)
+  }
+})
+
+const viewTypes = ref([
+  {text: 'Mobile', value: ''},
+  {text: 'Tablet', value: 'md:'},
+  {text: 'Desktop', value: 'xl:'},
+  {text: 'TV', value: '2xl:'},
+])
+
+const viewIndex = ref(1)
+const viewType = ref('md:')
+
+function addPreset(obj){
+
+  const preset = {
+    uid: md5(Date.now().toString() + Math.random().toString()),
+    name: "New Preset",
+    views: [],
+    datasource: {},
+    ...obj,
+  }
+
+  presets.value.push(preset)
+}
+
+function getPresetDatasource(){
+  return preset ? preset.value.datasource : {}
+}
+
+provide('getPresetDatasource', getPresetDatasource)
+
+</script>
+
+<style module>
+
+
+</style>

package/src/components/Dropdown.vue

@@ -176,7 +176,7 @@ export default {
 }
 
 .dropdown option{
-  @apply bg-base-50 text-text;
+  @apply bg-base-300 text-text;
 }
 
 .dropdown select[disabled]{

package/src/components/List.vue

@@ -288,7 +288,7 @@ export default{
 
   emits: [ 'dragover', 'after-load', 'open-preset', 'signal', 'pivot-item-click' ],
 
-  inject: [ 'socket', 'toast' ],
+  inject: [ 'useSocket', 'socket', 'toast' ],
 
   props: {
     config: Object,
@@ -390,7 +390,7 @@ export default{
         }
 
         this.readyState = 2
-        return this.socket.send(this.computedSrc, {
+        return this.useSocket().send(this.computedSrc, {
           ...this.preset,
           id: undefined,
           uid: undefined,
@@ -419,7 +419,7 @@ export default{
         const afterItem = this.dataItems[this.dataItems.length - 1]
 
         this.readyState = 4
-        this.socket.send(this.computedSrc, {
+        this.useSocket().send(this.computedSrc, {
           ...this.preset,
           id: undefined,
           uid: undefined,
@@ -442,7 +442,7 @@ export default{
     async loadPreset(){
       if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
         if(this.presetKey){
-          const config = await this.socket.send(this.presetSrc, { key:this.presetKey })
+          const config = await this.useSocket().send(this.presetSrc, { key:this.presetKey })
           if(config){
             if((config.presets ?? []).length > 0){
               Object.assign(this.cConfig, config)
@@ -504,7 +504,7 @@ export default{
           if(reqItems.length > 0 && reqItems !== this.lastEnumItems){
 
             const [ src, key, attr ] = column.enumSrc.split(':')
-            const res = await this.socket.send(src, {
+            const res = await this.useSocket().send(src, {
               columns: [
                 { key:attr, visible:true }
               ],
@@ -538,7 +538,7 @@ export default{
       if(!this.extBar.open) return
 
       this.readyState = 3
-      return this.socket.send(this.computedSrc, {
+      return this.useSocket().send(this.computedSrc, {
         ...this.preset,
         id: undefined,
         uid: undefined,
@@ -557,7 +557,7 @@ export default{
     loadExtNext(){
       if(!this.preset.filters) return
 
-      return this.socket.send(this.computedSrc, {
+      return this.useSocket().send(this.computedSrc, {
         ...this.preset,
         id: undefined,
         uid: undefined,
@@ -591,7 +591,7 @@ export default{
 
     savePreset: invokeAfterIdle(function() {
       if(this.presetKey) {
-        this.socket.send(this.presetSrc,
+        this.useSocket().send(this.presetSrc,
             {key: this.presetKey, config: this.cConfig})
       }
     }),
@@ -648,7 +648,7 @@ export default{
     loadQueued(items){
       const key = items[0] && items[0].uid ? 'uid' : 'id'
 
-      this.socket.send(this.computedSrc, {
+      this.useSocket().send(this.computedSrc, {
         ...this.preset,
         id: undefined,
         uid: undefined,
@@ -911,8 +911,8 @@ export default{
         })
 
     if(this.subscribeKey){
-      this.socket.send('user.subscribe', { name:this.subscribeKey })
-      this.socket.on(this.subscribeKey, this.onSignal)
+      this.useSocket().send('user.subscribe', { name:this.subscribeKey })
+      this.useSocket().on(this.subscribeKey, this.onSignal)
     }
 
     window.addEventListener('keydown', this.onKeyDown)
@@ -922,7 +922,7 @@ export default{
       delay: this.updateInterval
     })
 
-    this.socket.on('connect', this.onConnect)
+    this.useSocket().on('connect', this.onConnect)
   },
 
   unmounted() {
@@ -930,11 +930,11 @@ export default{
     window.removeEventListener('keydown', this.onKeyDown)
 
     if(this.subscribeKey) {
-      this.socket.send('user.unsubscribe', {name: this.subscribeKey})
-      this.socket.off(this.subscribeKey, this.onSignal)
+      this.useSocket().send('user.unsubscribe', {name: this.subscribeKey})
+      this.useSocket().off(this.subscribeKey, this.onSignal)
     }
 
-    this.socket.off('connect', this.onConnect)
+    this.useSocket().off('connect', this.onConnect)
   },
 
   computed: {