OneRepl.vue

<template>
<article
  class="repl"
  :class="{
    standalone
  }"
>
  <header class="header">
    <h1>{{ t("liveEdit") }}</h1>
    <section
      key="standalone"
      class="actions"
    >
      <one-theme-toggle/>
      <one-locale-link
        v-if="standalone"
        toggle
        :hash="hash"
      />
      <one-locale-link
        v-if="standalone"
        to="/"
      >
        {{ t("docs") }}
      </one-locale-link>
      <veui-button
        v-if="!standalone"
        v-tooltip="t(expanded ? 'shrinkEditor' : 'expandEditor')"
        ui="strong icon xl"
        @click="handleToggle"
      >
        <veui-icon :name="expanded ? 'one-repl-shrink' : 'one-repl-expand'"/>
      </veui-button>
      <veui-button
        v-if="!standalone"
        ui="strong text"
        @click="handleClose"
      >
        {{ t("exit") }}
      </veui-button>
    </section>
  </header>
  <client-only>
    <one-live
      class="editor"
      :code="code"
      :browser="browser"
      :path="path"
      :standalone="standalone"
      @codechange="handleCodeChange"
    />
    <template #placeholder>
      <veui-loading
        loading
        ui="strong"
        class="loading"
      />
    </template>
  </client-only>
</article>
</template>

<script>
import { Button, Loading, Icon } from 'veui'
import tooltip from 'veui/directives/tooltip'
import i18n from 'veui/mixins/i18n'
import OneLocaleLink from './OneLocaleLink'
import OneThemeToggle from './OneThemeToggle'
import oneI18n from '../common/i18n'

export default {
  name: 'one-repl',
  directives: {
    tooltip
  },
  components: {
    'veui-button': Button,
    'veui-icon': Icon,
    'veui-loading': Loading,
    OneLocaleLink,
    OneThemeToggle,
    'one-live': () => ({
      component: import('./OneLive'),
      loading: {
        inheritAttrs: false,
        render (h) {
          return h(Loading, {
            props: {
              loading: true,
              ui: 'strong'
            },
            class: 'loading'
          })
        }
      }
    })
  },
  mixins: [i18n, oneI18n],
  props: {
    code: {
      type: String,
      default: ''
    },
    standalone: Boolean,
    expanded: Boolean,
    browser: Boolean,
    path: String
  },
  data () {
    return {
      hash: ''
    }
  },
  mounted () {
    this.hash = location.hash
  },
  methods: {
    handleClose () {
      this.$emit('close')
    },
    handleToggle () {
      this.$emit('toggle', !this.expanded)
    },
    handleCodeChange (code) {
      this.$emit('codechange', code)
      this.hash = location.hash
    }
  }
}

Icon.register({
  'one-repl-shrink': {
    width: 24,
    height: 24,
    d:
      'M7.41 18.59L8.83 20L12 16.83L15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4L12 7.17L8.83 4L7.41 5.41L12 10l4.59-4.59z'
  },
  'one-repl-expand': {
    width: 24,
    height: 24,
    d:
      'M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z'
  }
})
</script>

<style lang="stylus" scoped>
.repl
  display flex
  flex-direction column

  &.standalone
    position fixed
    top 0
    right 0
    bottom 0
    left 0

.header
  display flex
  align-items center
  flex none
  height 48px
  padding 0 24px
  box-shadow 0 0 4px #0006
  position relative
  z-index 1

  h1
    flex none
    margin 0
    font-size 16px

  .actions
    display flex
    justify-content flex-end
    align-items center
    flex 1 1 auto
    gap 24px

.standalone
  .actions
    gap 12px

.editor
  &:not(.loading)
    position relative
    flex 1 1 auto
    height calc(100% - 48px)

  & >>> .live-preview
    padding 24px 36px

.loading
  position absolute
  top 40vh
  left 50%
  transform translateX(-50%)
  font-size 40px
</style>