From 379740dfa704e4e4223eb27cc17f1279ee126710 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 15 Dec 2023 16:36:16 +0600
Subject: [PATCH 1/2] chips

---
 src/App.vue                              | 24 +++++++--
 src/components/DxhChips.vue              | 64 ++++++++++++++++++++++++
 src/components/__tests__/DxhChip.spec.ts | 48 ++++++++++++++++++
 3 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DxhChips.vue
 create mode 100644 src/components/__tests__/DxhChip.spec.ts

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..221dc41 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,23 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div class="m-8">
+    <closable-chip
+      :text="chipText"
+      :closeable="true"
+      classes="border border-red-400"
+      draggable
+      @close="console.log('cls')"
+      @drop="dropped"
+    >
+      <template #close="{ onClick }"><div @click="onClick">x</div></template>
+    </closable-chip>
+  </div>
 </template>
+
+<script setup lang="ts">
+import ClosableChip from './components/DxhChips.vue'
+
+const chipText = 'Chip'
+const dropped = (dd) => {
+  console.log(dd)
+}
+</script>
diff --git a/src/components/DxhChips.vue b/src/components/DxhChips.vue
new file mode 100644
index 0000000..e32e3fb
--- /dev/null
+++ b/src/components/DxhChips.vue
@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="inline-block"
+    :class="{ 'cursor-grab': draggable }"
+    :draggable="draggable"
+    @dragstart="handleDragStart"
+    @dragover="handleDragOver"
+    @dragend="handleDragEnd"
+  >
+    <div :class="['flex items-center py-2 px-3 border bg-gray-300 rounded-lg', classes]">
+      <slot :text="text">
+        <span class="text mr-2">{{ text }}</span>
+      </slot>
+      <span v-if="closeable" class="cursor-pointer">
+        <slot name="close" @click="close">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+            @click="close"
+          >
+            <path
+              d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
+            />
+          </svg>
+        </slot>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+
+const { classes, text, closeable, draggable } = defineProps<{
+  classes?: string
+  text: string
+  closeable?: boolean
+  draggable?: boolean
+}>()
+
+const emit = defineEmits(['close', 'drop'])
+
+const close = () => {
+  emit('close')
+}
+
+const handleDragStart = (event: DragEvent) => {
+  if (draggable) {
+    event.dataTransfer?.setData('text/plain', text)
+  }
+}
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault()
+}
+
+const handleDragEnd = () => {
+  if (draggable) {
+    emit('drop', text)
+  }
+}
+</script>
diff --git a/src/components/__tests__/DxhChip.spec.ts b/src/components/__tests__/DxhChip.spec.ts
new file mode 100644
index 0000000..f11b417
--- /dev/null
+++ b/src/components/__tests__/DxhChip.spec.ts
@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhChips from '../DxhChips.vue'
+
+describe('DxhChips.vue', () => {
+  it('renders draggable item with close button', () => {
+    const wrapper = mount(DxhChips, {
+      props: {
+        text: 'Sample Text',
+        closeable: true,
+        draggable: true
+      }
+    })
+    expect(wrapper.classes()).toContain('inline-block')
+    expect(wrapper.classes()).toContain('cursor-grab')
+
+    expect(
+      wrapper.find('.flex.items-center.py-2.px-3.border.bg-gray-300.rounded-lg').exists()
+    ).toBe(true)
+
+    expect(wrapper.find('.text').text()).toBe('Sample Text')
+
+    const closeButton = wrapper.find('span.cursor-pointer')
+    expect(closeButton.exists()).toBe(true)
+
+    expect(wrapper.attributes('draggable')).toBe('true')
+    expect(wrapper.emitted('close')).toBeFalsy()
+
+    wrapper.trigger('dragstart')
+    expect(wrapper.emitted('drop')).toBeFalsy()
+
+    wrapper.trigger('dragend')
+    expect(wrapper.emitted('drop')).toBeTruthy()
+  })
+
+  it('renders draggable item without close button', () => {
+    const wrapper = mount(DxhChips, {
+      props: {
+        text: 'Sample Text',
+        closeable: false,
+        draggable: true
+      }
+    })
+
+    const closeButton = wrapper.find('span.cursor-pointer')
+    expect(closeButton.exists()).toBe(false)
+  })
+})

From 2708e0ee6dfc0e41d6c5ddf5dbc8e845b6f86bfd Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 15 Dec 2023 16:38:26 +0600
Subject: [PATCH 2/2] chips

---
 src/App.vue  | 22 +---------------------
 src/index.ts |  7 ++++---
 2 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 221dc41..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,3 @@
 <template>
-  <div class="m-8">
-    <closable-chip
-      :text="chipText"
-      :closeable="true"
-      classes="border border-red-400"
-      draggable
-      @close="console.log('cls')"
-      @drop="dropped"
-    >
-      <template #close="{ onClick }"><div @click="onClick">x</div></template>
-    </closable-chip>
-  </div>
+  <main>Vue-Tailwind</main>
 </template>
-
-<script setup lang="ts">
-import ClosableChip from './components/DxhChips.vue'
-
-const chipText = 'Chip'
-const dropped = (dd) => {
-  console.log(dd)
-}
-</script>
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..33e3346 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
-import DButton from "./components/DButton.vue"
-import DInput from "./components/DInput.vue"
+import DButton from './components/DButton.vue'
+import DInput from './components/DInput.vue'
+import DxhChips from './components/DxhChips.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhChips }