Flow/browser/vue-flow/src/components/panel.vue

<template>
  <div
    class="flow-funcs__container"
    :class="{active:active}">
    <div class="flow-funcs__control">
      <!-- make this toggle able -->
      <button
        class="item"
        @click="funcsViewBlocks=!funcsViewBlocks">
        {{ funcsViewBlocks ? 'List':'Blocks' }} view
      </button>
      <button
        class="item"
        @click="$emit('toggleResizeable')">
        Resize
      </button>
    </div>

    <div class="flow-funcs__inner">
      <hx-collapsible
        v-for="g in funcsGroups"
        :key="g">
        <div
          class="flow-funcs__header"
          slot="header">{{ g }}</div>
        <div
          class="flow-funcs__group"
          :class="{blocks:funcsViewBlocks}">
          <div
            :key="k"
            ref="src"
            class="flow-funcs__src hover-anim hover"
            draggable="true"
            v-for="k in funcsGroup(g)"
            @dragstart="fnDrag($event,k)"
            :style="{'background':registry[k].style && registry[k].style.color}">
            {{ k }}
          </div>
        </div>
      </hx-collapsible>
    </div>
  </div>

</template>
<script>
import HxCollapsible from '@/components/shared/hx-collapsible'
export default {
  name: 'FlowPanel',
  components: {HxCollapsible},
  props: {
    active: {type: Boolean, default: true},
    registry: {type: Object, default: () => {}}
  },
  data () {
    return {
      funcsViewBlocks: true
    }
  },
  computed: {
    funcsGroups () {
      let group = {}
      for (let r in this.registry) {
        group[this.registry[r].group] = true
      }
      return Object.keys(group)
    },
    funcsGroup () {
      return (g) => {
        const ret = Object.keys(this.registry).filter(v => this.registry[v].group === g)
        return ret
      }
    }
  },
  methods: {
    fnDrag (ev, src) {
      ev.dataTransfer.setData('text/plain', src)
    }
  }
}
</script>
<style>
.flow-funcs__container {
  white-space: nowrap;
  width:0px;
  transition: all .3s;
  height:100%;
  background:rgba(208,208,208,0.7);
  overflow-x:hidden;
  overflow-y:auto;
}
.flow-funcs__container.active {
  width:300px;
}
.flow-funcs__control {
  display:flex;
  flex-flow:row;
  border-bottom: solid 1px rgba(208,208,208,0.9);

}
.flow-funcs__control .item{
  font-size:14px;
  padding:13px;
  flex:1;
  height:100%;
  text-align:center;
  color:black;
  text-overflow: ellipsis;
  min-width:50px;
  height:50px;

  overflow:hidden;
}
.flow-funcs__control .item:not(:last-child){
  border-right: solid 1px rgba(208,208,208,0.9);
}

.flow-funcs__inner {
  overflow:hidden;
  margin-top:20px;
}
.flow-funcs__inner .hx-toggle-arrow {
  color: rgba(150,150,150,0.9);
}

.flow-funcs__inner .hx-collapsible {
}
.flow-funcs__inner .hx-collapsible__header {
  font-size:14px;
  padding:5px 10px;
  transition: all .3s;
}
.flow-funcs__inner .hx-collapsible__header:hover {
  background: rgba(150,150,150,0.2);
}

.flow-funcs__group{
  display:flex;
  flex-flow:column;
  padding:10px;
  background: rgba(108,108,108,0.1);
}
.flow-funcs__src {
  font-size:12px;
  padding:11px 5px;
  background: #777;
  color:#eee;

  margin-top:1px;
  text-align:center;
  transition: all .3s;
  position:relative;

  display:flex;
  justify-content: center;
  align-items: center;

  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;

}
.flow-funcs__group.blocks {
  flex-flow:row;
  flex-wrap:  wrap;

  justify-content: flex-start;
  align-content: center;
}
.flow-funcs__group.blocks .flow-funcs__src {
  text-overflow: ellipsis;
  margin:1px;
  width: 60px;
  height:60px;
  overflow:hidden;
}
.flow-funcs__toggle {
  margin:0;
  position:relative;
}

</style>