mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-31 02:57:57 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			42 lines
		
	
	
		
			900 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			42 lines
		
	
	
		
			900 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <script setup>
 | |
| import ConfirmButton from './ConfirmButton.vue';
 | |
| import { ref } from 'vue';
 | |
| 
 | |
| const count = ref(0);
 | |
| 
 | |
| const incrementCount = () => {
 | |
|   count.value += 1;
 | |
| };
 | |
| </script>
 | |
| 
 | |
| <template>
 | |
|   <Story
 | |
|     title="Components/ConfirmButton"
 | |
|     :layout="{ type: 'grid', width: '400px' }"
 | |
|   >
 | |
|     <Variant title="Basic">
 | |
|       <div class="grid gap-2 p-4 bg-n-background">
 | |
|         <p>{{ count }}</p>
 | |
|         <ConfirmButton
 | |
|           label="Delete"
 | |
|           confirm-label="Confirm?"
 | |
|           @click="incrementCount"
 | |
|         />
 | |
|       </div>
 | |
|     </Variant>
 | |
| 
 | |
|     <Variant title="Color Change">
 | |
|       <div class="grid gap-2 p-4 bg-n-background">
 | |
|         <p>{{ count }}</p>
 | |
|         <ConfirmButton
 | |
|           label="Archive"
 | |
|           confirm-label="Confirm?"
 | |
|           color="slate"
 | |
|           confirm-color="amber"
 | |
|           @click="incrementCount"
 | |
|         />
 | |
|       </div>
 | |
|     </Variant>
 | |
|   </Story>
 | |
| </template>
 | 
