@citizenplane/pimp 8.5.6 → 8.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "8.5.6",
+  "version": "8.6.0",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",

package/src/components/feedback-indicators/CpAlert.vue

@@ -1,7 +1,9 @@
 <template>
   <div v-if="isDisplayed" class="cpAlert" :class="`cpAlert--${intent}`">
     <div class="cpAlert__icon">
-      <cp-icon :type="alertIcon" />
+      <slot name="icon">
+        <cp-icon :type="alertIcon" />
+      </slot>
     </div>
     <div class="cpAlert__body">
       <cp-heading v-if="title" heading-level="h4" :size="400" class="cpAlert__title">{{ title }}</cp-heading>
@@ -13,51 +15,45 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, useSlots } from 'vue'
+
 import { Intent } from '@/utils/constants'
 
-export default {
-  props: {
-    intent: {
-      type: String,
-      required: true,
-      default: Intent.INFO.value,
-      validator(value) {
-        const intentValues = Object.values(Intent).map((item) => item.value)
-        return intentValues.includes(value)
-      },
-    },
-    title: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    isClosable: {
-      type: Boolean,
-      required: false,
-      default: false,
+const props = defineProps({
+  intent: {
+    type: String,
+    required: true,
+    default: Intent.INFO.value,
+    validator(value) {
+      const intentValues = Object.values(Intent).map((item) => item.value)
+      return intentValues.includes(value)
     },
   },
-  data() {
-    return {
-      isDisplayed: true,
-    }
-  },
-  computed: {
-    alertIcon() {
-      const intentValues = Object.values(Intent)
-      return intentValues.find((intentItem) => intentItem.value === this.intent).icon
-    },
-    hasContent() {
-      return !!this.$slots['default']
-    },
+  title: {
+    type: String,
+    required: false,
+    default: '',
   },
-  methods: {
-    dismissAlert() {
-      this.isDisplayed = false
-    },
+  isClosable: {
+    type: Boolean,
+    required: false,
+    default: false,
   },
-}
+})
+
+const slots = useSlots()
+
+const isDisplayed = ref(true)
+
+const alertIcon = computed(() => {
+  const intentValues = Object.values(Intent)
+  return intentValues.find((intentItem) => intentItem.value === props.intent).icon
+})
+
+const hasContent = computed(() => !!slots.default)
+
+const dismissAlert = () => (isDisplayed.value = false)
 </script>
 
 <style lang="scss">