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
            ref="src"
            :key="k"
            class="flow-funcs__src hover"
            draggable="true"
            v-for="k in funcsGroup(g)"
            @dragstart="fnDrag($event,k)"
            :style="{ 'background': registry[k].style && registry[k].style.color, }"
            :title="k"
          >
            {{ 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 () {
      // Set
      let group = new Set()
      for (let r in this.registry) {
        for (let c of this.registry[r].categories) {
          group.add(c)
        }
      }
      return [...group]
    },
    funcsGroup () {
      return (g) => {
        const ret = Object.keys(this.registry).filter(v => this.registry[v].categories.includes(g))
        return ret
      }
    }
  },
  methods: {
    fnDrag (ev, src) {
      ev.dataTransfer.setData('text/plain', src)
    }
  }
}
</script>
<style>
.flow-funcs__container {
  white-space: nowrap;
  width:0;
  transition: all 0.3s;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

.flow-funcs__container.active {
  width:300px;
}

.flow-funcs__control {
  display:flex;
  flex-flow:row;

}

.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__inner {
  overflow:hidden;
  margin-top:20px;
}

.flow-funcs__inner .hx-collapsible__header {
  font-size:14px;
  padding:5px 10px;
  transition: all 0.3s;
}

.flow-funcs__group{
  display:flex;
  flex-flow:column;
  padding:10px;
}

.flow-funcs__src {
  font-size:14px;
  padding:12px 4px;
  margin-top:1px;
  text-align:center;
  transition: all 0.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;
  align-content: center;
}

.flow-funcs__group.blocks .flow-funcs__src {
  display:block;
  font-size:10px;
  width: calc(25% - 2px);
  padding:18px 4px;
  text-overflow: ellipsis;
  margin:1px;
  word-wrap: break-all;
  overflow:hidden;
}

.flow-funcs__toggle {
  margin:0;
  position:relative;
}

</style>