Draggable

The Draggable component is an dragging component that allows user to display list of items that can be reordered.

Usage

Use v-model to pass array of sortable list to component. Every list element should have unique id. To display elements item slot should be used.

<template>
  <ci-draggable v-model="fruitList">
    <template #item="{ item }">
       {{ item.name }}
    </template>
  </ci-draggable>
</template>

<script>
export default {
  data() {
    return {
      fruitList: [
        {id: '0', name: 'Apple'},
        {id: '1', name: 'Banana'},
        {id: '2', name: 'Pineapple'},
        {id: '3', name: 'Lemon'}
      ],
    }
  }
}
</script>

Variants

Use variant="sleek" to hide the borders and only show drag handles on hover.

<template>
  <ci-draggable v-model="employees" variant="sleek">
    <template #item="{ item }">
      <div class="employee">
        <img class="employee__pic" :src="item.pic" />
        <div class="employee__details">
          <div class="employee__name">{{ item.name }}</div>
          <div class="employee__team">{{ item.team }}</div>
        </div>
      </div>
    </template>
  </ci-draggable>
</template>

<script>
export default {
  data() {
    return {
      employees: [
        {id: '0', name: 'Jane Doe', team: 'Marketing', pic: 'https://userstock.io/data/wp-content/uploads/2020/06/women-s-white-and-black-button-up-collared-shirt-774909-2-300x300.jpg'},
        {id: '1', name: 'Darian Brown', team: 'Design', pic: 'https://userstock.io/data/wp-content/uploads/2020/06/tyler-nix-PQeoQdkU9jQ-300x300.jpg'},
        {id: '2', name: 'John Smith', team: 'Engineering', pic: 'https://userstock.io/data/wp-content/uploads/2017/07/pexels-photo-26939-1-300x300.jpg'},
        {id: '3', name: 'Emma Johnson', team: 'Social Media', pic: 'https://userstock.io/data/wp-content/uploads/2017/06/pexels-photo-195825-300x300.jpeg'}
      ],
    }
  }
}
</script>

<style>
.employee {
  display: flex;
  align-items :center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 0;
}
.employee__pic {
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
.employee__details {
  flex: 1;
}
.employee__name {
  font-weight: 700;
}
.employee__team {
  font-weight: 400;
}
</style>

Disabled State

Use disabled to disable or enable sorting of the draggable element items.

<template>
<div>
  <ci-draggable 
    v-model="fruitList" 
    :disabled="disabled"
  >
    <template #item="{ item }">
       {{ item.name }}
    </template>
  </ci-draggable>
  <ci-toggle 
    v-model="disabled"
    class="top"
    label="Enable or disable draggable" 
  />
</div>
</template>

<script>
export default {
  data() {
    return {
      disabled: true,
      fruitList: [
        {id: '0', name: 'One'},
        {id: '1', name: 'Two'},
        {id: '2', name: 'Three'},
        {id: '3', name: 'Four'}
      ],
    }
  }
}
</script>

<style>
.top {
  margin-top: 10px;
}
</style>

Errors

Use the error prop to give your draggable an error state. Pass in a string to show a message.

<template>
  <ci-draggable v-model="fruitList" error="Some error message">
    <template #item="{ item }">
       {{ item.name }}
    </template>
  </ci-draggable>
</template>

<script>
export default {
  data() {
    return {
      fruitList: [
        {id: '0', name: 'Apple'},
        {id: '1', name: 'Banana'},
        {id: '2', name: 'Pineapple'},
        {id: '3', name: 'Lemon'}
      ],
    }
  }
}
</script>

Alignment

Use alignment to change alignment of draggable items. Available options are ['center', 'start', 'end']

<template>
  <DemoGrid>
    <ci-draggable 
      v-model="fruitList"
      valign="center"
    >
      <template #item="{ item }">
        {{ item.name }}
        <div>
          Lorem ipsum
        </div>
        <div>
          Lorem ipsum
        </div>
      </template>
    </ci-draggable>
    <ci-draggable 
      v-model="fruitListTwo"
      valign="start"
    >
      <template #item="{ item }">
        {{ item.name }}
        <div>
          Lorem ipsum
        </div>
        <div>
          Lorem ipsum
        </div>
      </template>
    </ci-draggable>
    <ci-draggable 
      v-model="fruitListThree"
      valign="end"
    >
      <template #item="{ item }">
        {{ item.name }}
        <div>
          Lorem ipsum
        </div>
        <div>
          Lorem ipsum
        </div>
      </template>
    </ci-draggable>
  </DemoGrid>
</template>

<script>
export default {
  data() {
    return {
      fruitList: [
        {id: '0', name: 'One'},
        {id: '1', name: 'Two'},
        {id: '2', name: 'Three'},
      ],
      fruitListTwo: [
        {id: '0', name: 'One'},
        {id: '1', name: 'Two'},
        {id: '2', name: 'Three'},
      ],
      fruitListThree: [
        {id: '0', name: 'One'},
        {id: '1', name: 'Two'},
        {id: '2', name: 'Three'},
      ],
    }
  }
}
</script>

Slots

Use item slot to pass item template that will be used for all items in list.

If actions are needed for item actions slot should be used.

If a footer is needed, use the footer slot which will render at the bottom of the list but before error messages.

<template>
  <ci-draggable v-model="languageList">
    <template #item="{ item }">
       {{ item.name }} 
       <ci-badge 
        :variant="'notification'"
        :number="item.number"
       />
    </template>
    <template #actions="{ item }">
      <ci-icon 
        @click="removeItem(item.id)"
        icon="trash"
      />
    </template>
    <template #footer>
      <span class="ci-text-sm">Some footer...</span>
    </template>
  </ci-draggable>
</template>

<script>
export default {
  data() {
    return {
      languageList: [
        {id: '0', name: 'Latvian', number: 30},
        {id: '1', name: 'English', number: 4},
        {id: '2', name: 'Spanish', number: 199},
        {id: '3', name: 'German', number: 10}
      ],
    }
  },
  methods: {
    removeItem(id) {
      this.languageList = this.languageList.filter(u => u.id !== id)
    }
  }
}
</script>

Events

Event	Args	Emitted when...
@update	Sorted list	Sorting order is changed