From e90a2e6af1466f7956dbd2b4d4e33a745289b933 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Mon, 16 Sep 2024 11:11:05 +1000
Subject: [PATCH] feat(#149): update input type chip (#150)

---
 src/components/Chip.vue | 72 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 66 insertions(+), 6 deletions(-)

diff --git a/src/components/Chip.vue b/src/components/Chip.vue
index 1af3a97..50e8604 100644
--- a/src/components/Chip.vue
+++ b/src/components/Chip.vue
@@ -4,17 +4,28 @@
     class="ct-chip"
     :class="{
       [themeClass]: true,
+      'active': model,
+      'ct-chip--multiple': isMultiple,
       [`ct-chip--${kind}`]: kind,
       [`ct-chip--${size}`]: size
     }"
     data-component-name="chip"
-    data-chip="true"
+    :data-chip-dismiss="isMultiple"
   >
     <input
       v-if="kind === 'input'"
-      type="radio"
-    >
+      ref="ct-chip-input"
+      class="ct-chip__input"
+      :type="inputType"
+      v-model="model"
+    />
     <slot>{{ label }}</slot>
+    <CTIcon
+      v-if="isMultiple"
+      class="ct-chip__dismiss"
+      symbol="cancel"
+      @click.native="$emit('dismiss')"
+    />
   </component>
 </template>
 
@@ -24,6 +35,10 @@ import ThemeMixin from '../mixins/theme'
 export default {
   mixins: [ThemeMixin],
 
+  data: ({ value }) => ({
+    model: value,
+  }),
+
   props: {
     kind: {
       type: String,
@@ -37,12 +52,57 @@ export default {
       type: String,
       default: 'regular'
     },
-    // @TODO - isMultiple
-    // @TODO - isSelected
+    isMultiple: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
   },
 
   computed: {
-    element: ({ kind }) => kind === 'input' ? 'label' : 'span'
+    element: ({ kind }) => kind === 'input' ? 'label' : 'span',
+    inputType: ({ isMultiple }) => isMultiple ? 'checkbox' : 'radio',
+  },
+
+  mounted() {
+    try {
+      // If the component has been mounted and $el is available
+      if (this.$el) {
+        // Delete the cached module for chip
+        delete require.cache[require.resolve('@civictheme/uikit/components/01-atoms/chip/chip')]
+
+        // Require the chip module again
+        require('@civictheme/uikit/components/01-atoms/chip/chip')
+
+        // Set the checked attribute on the input as expected by chip.js
+        if (this.model || this.value) {
+          this.$refs['ct-chip-input'].setAttribute('checked', 'checked')
+        }
+      }
+    }
+    catch(e) {
+      // Output an error message to the console if there is an issue
+      // eslint-disable-next-line
+      console.error(e)
+    }
+  },
+
+  // Delete require cache for chip component
+  beforeDestroy() {
+    delete require.cache[require.resolve('@civictheme/uikit/components/01-atoms/chip/chip')]
+  },
+
+  watch: {
+    model() {
+      this.$emit('input', this.model)
+    },
+
+    value() {
+      this.model = this.value
+    }
   }
 }
 </script>