feat(v-alert): new slots (x-icon and x-button)

gitsindonesia · Mar 13, 2022 · d44cd3e · d44cd3e
1 parent d903e83
commit d44cd3e
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 4 deletions.
diff --git a/apps/playground/src/views/components/Alerts.vue b/apps/playground/src/views/components/Alerts.vue
@@ -1,7 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import {ref} from 'vue';
 import Docs from './Docs.vue';
 import DocsTitle from './DocsTitle.vue';
+import {RiInformationFill, RiCloseCircleFill} from 'vue-remix-icons';
 
 const breadcrumbs = ref([
   {
@@ -81,6 +82,58 @@ const breadcrumbs = ref([
       <v-alert dismissable color="dark">dark</v-alert>
     </template>
   </Docs>
+
+  <Docs
+    title="Icon Slots"
+    :code="`<v-alert color=&quot;primary&quot; dismissable>
+  <template #icon>
+    <RiInformationFill class=&quot;fill-current w-6 h-6 mr-2&quot; />
+  </template>
+  <template #x-icon>
+    <RiCloseCircleFill class=&quot;fill-current w-6 h-6 text-error-500&quot; />
+  </template>
+
+  Change a few things up and try submitting again.
+</v-alert>`"
+  >
+    <template #preview>
+      <v-alert color="primary" dismissable>
+        <template #icon>
+          <RiInformationFill class="fill-current w-6 h-6 mr-2" />
+        </template>
+        <template #x-icon>
+          <RiCloseCircleFill class="fill-current w-6 h-6 text-error-500" />
+        </template>
+
+        Change a few things up and try submitting again.
+      </v-alert>
+    </template>
+  </Docs>
+
+  <Docs
+    title="Custom Close Button"
+    :code="`<v-alert icon=&quot;error&quot; color=&quot;error&quot; dismissable>
+  <template #x-button=&quot;{dismiss}&quot;>
+    <v-btn text class=&quot;px-2&quot; @click=&quot;dismiss&quot;>
+      <RiCloseCircleFill class=&quot;fill-current w-6 h-6 text-error-500&quot; />
+    </v-btn>
+  </template>
+
+  Change a few things up and try submitting again.
+</v-alert>`"
+  >
+    <template #preview>
+      <v-alert icon="error" color="error" dismissable>
+        <template #x-button="{dismiss}">
+          <v-btn text class="px-2" @click="dismiss">
+            <RiCloseCircleFill class="fill-current w-6 h-6 text-error-500" />
+          </v-btn>
+        </template>
+
+        Change a few things up and try submitting again.
+      </v-alert>
+    </template>
+  </Docs>
 </template>
 
 <style scoped></style>
diff --git a/packages/alert/src/VAlert.vue b/packages/alert/src/VAlert.vue
@@ -102,9 +102,13 @@ const dismiss = () => {
       </div>
       <div class="flex-grow"></div>
       <div v-if="props.dismissable" class="pl-4 flex items-center">
-        <button class="focus:outline-none" @click="dismiss">
-          <XIcon class="w-5 h-5" />
-        </button>
+        <slot name="x-button" :dismiss="dismiss">
+          <button class="focus:outline-none" @click="dismiss">
+            <slot name="x-icon">
+              <XIcon class="w-5 h-5" />
+            </slot>
+          </button>
+        </slot>
       </div>
     </div>
   </transition>