first commit

resources/js/views/demos/components/chip/DemoChipClosable.vue

@@ -0,0 +1,75 @@
+<script setup>
+const isDefaultChipVisible = ref(true)
+const isPrimaryChipVisible = ref(true)
+const isSecondaryChipVisible = ref(true)
+const isSuccessChipVisible = ref(true)
+const isInfoChipVisible = ref(true)
+const isWarningChipVisible = ref(true)
+const isErrorChipVisible = ref(true)
+</script>
+
+<template>
+  <div class="demo-space-x">
+    <VChip
+      v-if="isDefaultChipVisible"
+      closable
+      @click:close="isDefaultChipVisible = !isDefaultChipVisible"
+    >
+      Default
+    </VChip>
+
+    <VChip
+      v-if="isPrimaryChipVisible"
+      closable
+      color="primary"
+      @click:close="isPrimaryChipVisible = !isPrimaryChipVisible"
+    >
+      Primary
+    </VChip>
+
+    <VChip
+      v-if="isSecondaryChipVisible"
+      closable
+      color="secondary"
+      @click:close="isSecondaryChipVisible = !isSecondaryChipVisible"
+    >
+      Secondary
+    </VChip>
+
+    <VChip
+      v-if="isSuccessChipVisible"
+      closable
+      color="success"
+      @click:close="isSuccessChipVisible = !isSuccessChipVisible"
+    >
+      Success
+    </VChip>
+
+    <VChip
+      v-if="isInfoChipVisible"
+      closable
+      color="info"
+      @click:close="isInfoChipVisible = !isInfoChipVisible"
+    >
+      Info
+    </VChip>
+
+    <VChip
+      v-if="isWarningChipVisible"
+      closable
+      color="warning"
+      @click:close="isWarningChipVisible = !isWarningChipVisible"
+    >
+      Warning
+    </VChip>
+
+    <VChip
+      v-if="isErrorChipVisible"
+      closable
+      color="error"
+      @click:close="isErrorChipVisible = !isErrorChipVisible"
+    >
+      Error
+    </VChip>
+  </div>
+</template>