Packages

kino

0.11.2
0.19.0 0.18.0 0.17.0 0.16.1 0.16.0 0.15.3 0.15.2 0.15.1 0.15.0 0.14.2 0.14.1 0.14.0 0.13.2 0.13.1 0.13.0 0.12.3 0.12.2 0.12.1 0.12.0 0.11.3 0.11.2 0.11.1 0.11.0 0.10.0 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.1 0.8.0 0.7.0 0.6.2 0.6.1 0.6.0 retired 0.5.2 0.5.1 0.5.0 0.4.1 0.4.0 0.3.1 0.3.0 0.2.3 0.2.2 0.2.1 0.2.0 0.1.3 0.1.2 0.1.1 0.1.0

Interactive widgets for Livebook

HexDocs

Current section

Files

Jump to
Readme
50 Versions
3 Dependencies
Dependants
Files
Activity
kino lib assets tree main.js
Raw

lib/assets/tree/main.js 

import * as Vue from "https://cdn.jsdelivr.net/npm/vue@3.2.26/dist/vue.esm-browser.prod.js";



export function init(ctx, tree) {

  ctx.importCSS("main.css");

  ctx.importCSS(

    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"

  );

  ctx.importCSS(

    "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.min.css"

  );



  const app = Vue.createApp({

    template: `

      <div class="app">

        <div class="tree">

          <TreeNode :node="tree" :level="1" />

        </div>

      </div>

    `,

    data() {

      return { tree };

    },

    methods: {},

    components: {

      TreeNode: {

        // Need an explicit name for recursive components.

        name: "TreeNode",

        props: ["node", "level"],

        data() {

          return { expanded: this.level === 1 };

        },

        methods: {

          style(span) {

            return span.color == null ? {} : { color: span.color };

          },

        },

        template: `

          <div class="item" @click="expanded = !expanded" :class="{clickable: node.children != null}">

            <div class="icon-container">

              <i class="ri ri-arrow-right-s-fill" v-if="node.children != null && !expanded"></i>

              <i class="ri ri-arrow-down-s-fill" v-if="node.children != null && expanded"></i>

            </div>

            <div>

              <span v-if="node.children == null || !expanded" v-for="span in node.content" class="code" :style="style(span)">{{ span.text }}</span>

              <span v-if="node.children != null && expanded" v-for="span in node.expanded.prefix" class="code" :style="style(span)">{{ span.text }}</span>

            </div>

          </div>

          <ol v-if="node.children != null" :class="{show: expanded}">

            <li v-for="(child, index) in node.children">

              <TreeNode :node="child" :level="level + 1" />

            </li>

          </ol>

          <div class="suffix" v-if="node.children != null && expanded">

            <span v-for="span in node.expanded.suffix" class="code" :style="style(span)">{{ span.text }}</span>

          </div>

        `,

      },

    },

  }).mount(ctx.root);

}