<commit_before><script>
  import draggable from 'vuedraggable'

  export default {
    components: {
      'draggable': draggable
    },

    props: {
      draggableGroup: {
        type: String,
        required: true
      },

      value: {
        type: Object,
        default: undefined
      },

      labelText: {
        type: String,
        default: ''
      },

      slotEmptyClass: {
        type: String,
        default: 'empty'
      },

      slotFilledClass: {
        type: String,
        default: 'filled'
      }
    },

    data () {
      return {
        answers: (this.value) ? [ this.value ] : []
      }
    },

    computed: {
      draggableGroupConfig () {
        return {
          name: this.draggableGroup,
          pull: true,
          put: (this.answers.length === 0)
        }
      },

      hasAnswer () {
        return this.answers.length === 1
      },

      emptyFilledClass () {
        return (this.hasAnswer) ? this.slotFilledClass : this.slotEmptyClass
      }
    },

    methods: {
      changed () {
        this.$emit(
          'input',
          this.answers[0]
        )
      }
    }
  }
</script>

<template>
  <div :class="[ 'slot-container', emptyFilledClass ]">
    <div
      class="expand slot-label"
    >
      {{ labelText }}
    </div>

    <draggable
      v-model="answers"
      tag="ul"
      :group="draggableGroupConfig"
      :sort="false"

      @change="changed"
    >
      <li
        v-for="answer of answers"
        :key="answer.id"
      >
        {{ answer.text }}
      </li><commit_msg>Update base draggable slot internal state in response to external v-model change (#91)<commit_after><script>
  import draggable from 'vuedraggable'

  export default {
    components: {
      'draggable': draggable
    },

    props: {
      draggableGroup: {
        type: String,
        required: true
      },

      value: {
        type: Object,
        default: undefined
      },

      labelText: {
        type: String,
        default: ''
      },

      slotEmptyClass: {
        type: String,
        default: 'empty'
      },

      slotFilledClass: {
        type: String,
        default: 'filled'
      }
    },

    data () {
      return {
        answers: (this.value) ? [ this.value ] : []
      }
    },

    computed: {
      draggableGroupConfig () {
        return {
          name: this.draggableGroup,
          pull: true,
          put: (this.answers.length === 0)
        }
      },

      hasAnswer () {
        return this.answers.length === 1
      },

      emptyFilledClass () {
        return (this.hasAnswer) ? this.slotFilledClass : this.slotEmptyClass
      }
    },

    methods: {
      changed () {
        this.$emit(
          'input',
          this.answers[0]
        )
      }
    },

    watch: {
      value () {
        // Update internal answers state when external value changes.
        //
        // TODO this answers state can likely be removed and replaced with a simple
        //      v-model API.  When vue-draggable integrates the swapping API this
        //      component can also be removed in favor of that API.
        this.answers = (this.value) ? [ this.value ] : []
      }
    }
  }
</script>

<template>
  <div :class="[ 'slot-container', emptyFilledClass ]">
    <div
      class="expand slot-label"
    >
      {{ labelText }}
    </div>

    <draggable
      v-model="answers"
      tag="ul"
      :group="draggableGroupConfig"
      :sort="false"

      @change="changed"
    >
      <li
        v-for="answer of answers"
        :key="answer.id"
      >
        {{ answer.text }}
      </li>
{'fraction_non_alphanumeric': 0.12602965403624383, 'fraction_numerical': 0.002196595277320154, 'mean_word_length': 1.4934976043805612, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3231541', 'n_tokens_mistral': 1150, 'n_tokens_neox': 1105, 'n_words': 232}