LexicalUnitEdit.js

import InfoTooltip from "./InfoTooltip.js";
import Spinner from "./Spinner.js";
import UnificationSwitchableList from "./UnificationSwitchableList.js";
import ExamplesComponent from "./frame-components/ExamplesComponent.js";
import SlowalFrameComponent from "./frame-components/SlowalFrameComponent.js";
import SemanticsSchemataComponent from "./frame-components/SemanticsSchemataComponent.js";

let LexicalUnitEdit = {};

const FramePreview = {
  props: {
    initialUnifiedFrameId: Number,
    initialLexicalUnitId: Number,
    forceRefresh: Number
  },
  data () {
    return {
      unifiedFrameId: this.initialUnifiedFrameId
    };
  },
  components: {LexicalUnitEdit, UnificationSwitchableList},
  emits: ['changeFrame', 'refreshEntriesList'],
  methods: {
    unifiedFrameSelected (unifiedFrameId) {
      this.$emit('changeFrame', unifiedFrameId);
    },
    refreshEntriesList() {
      this.$emit('refreshEntriesList')
    },
  },
  mounted () {
    Split(['#frame-preview-left-pane', '#frame-preview-right-pane'], {
      sizes: [60, 40],
      minSize: 10,
      gutterSize: 4,
      elementStyle: (dimension, size, gutterSize) => {
        return {
          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
        }
      },
    });
  },
  template: `
    <div class="row h-100 overflow-hidden">
      <div :key="unifiedFrameId" class="col h-100 pr-0 pt-0 pb-0 overflow-auto" id="frame-preview-left-pane">
        <lexical-unit-edit
          v-if="unifiedFrameId !== -1"
          :readOnly="true"
          :unifiedFrameId="unifiedFrameId"
          :forceRefresh="forceRefresh"
          @refresh-entries-list="refreshEntriesList"
        />
        <div v-else class="h-100">
          Brak ramy do wyświetlenia
        </div>
      </div>
      <div class="col h-100 pl-1 pt-0 pb-0 overflow-auto" id="frame-preview-right-pane">
        <unification-switchable-list
          @unified-frame-selected="unifiedFrameSelected"
        />
      </div>
    </div>
  `
};

Object.assign(LexicalUnitEdit, {
  props: {
    unifiedFrameId: Number,
    previewedUnifiedFrameId: Number,
    readOnly: Boolean,