feat: Updated stories

src/components/BuiAlert/BuiAlert.story.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import BuiAlert from './BuiAlert.vue'
+
+const state = reactive({
+  icon: true,
+  type: 'error',
+  message: 'Node pools must have unique name prefixes'
+})
+</script>
+
+<template>
+  <Story title="BuiAlert" autoPropsDisabled :layout="{ type: 'grid', width: '100%' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiAlert :icon="state.icon" :type="state.type">
+          {{ state.message }}
+        </BuiAlert>
+      </div>
+      <template #controls>
+        <HstCheckbox v-model="state.icon" title="Icon" />
+        <HstText v-model="state.message" title="Text" />
+      </template>
+    </Variant>
+  </Story>
+</template>

src/components/BuiAvatar/BuiAvatar.story.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import BuiAvatar from '@/components/BuiAvatar/BuiAvatar.vue'
+import { reactive } from 'vue'
+
+const state = reactive({
+  image: 'https://dummyimage.com/300x300/000/fff'
+})
+</script>
+
+<template>
+  <Story title="BuiAvatar" autoPropsDisabled :layout="{ type: 'grid', width: '100%' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiAvatar :img="state.image" />
+      </div>
+      <template #controls>
+        <HstText v-model="state.image" title="Image" />
+      </template>
+    </Variant>
+    <Variant title="Placeholder">
+      <div class="p-2">
+        <BuiAvatar />
+      </div>
+    </Variant>
+  </Story>
+</template>

src/components/BuiInput/BuiInput.vue

@@ -32,14 +32,13 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useVModel } from '@vueuse/core'
 import { twMerge } from 'tailwind-merge'
 
 type ValidationStatus = 'success' | 'error'
 interface InputProps {
   disabled?: boolean
   label?: string
-  modelValue?: string
+  value?: string
   required?: boolean
   validationStatus?: ValidationStatus | null
   placeholder?: string | undefined
@@ -48,14 +47,21 @@ interface InputProps {
 const props = withDefaults(defineProps<InputProps>(), {
   disabled: false,
   label: '',
-  modelValue: '',
+  value: '',
   required: false,
   validationStatus: null,
   placeholder: ''
 })
-const emit = defineEmits(['focus', 'blur', 'update:modelValue'])
+const emit = defineEmits(['focus', 'blur', 'input'])
 
-const model = useVModel(props, 'modelValue')
+const model = computed({
+  get() {
+    return props.value
+  },
+  set(event) {
+    emit('input', event)
+  }
+})
 
 const inputClasses = twMerge(
   'py-2 px-3 border border-slate-300 dark:border-gray-500 dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500',

src/components/BuiModal/BuiModal.story.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import BuiModal from '@/components/BuiModal/BuiModal.vue'
+import { reactive } from 'vue'
+import { logEvent } from 'histoire/client'
+
+const state = reactive({
+  message: 'My content of the modal'
+})
+</script>
+
+<template>
+  <Story title="BuiModal" autoPropsDisabled>
+    <Variant title="Default" responsive-disabled>
+      <div class="p-2">
+        <BuiModal
+          class="w-full h-full"
+          @close="logEvent('close', $event)"
+          @click:outside="logEvent('click:outside', $event)"
+        >
+          {{ state.message }}
+        </BuiModal>
+      </div>
+      <template #controls>
+        <HstText v-model="state.message" title="Text" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped></style>

src/components/BuiModal/BuiModal.vue

@@ -26,12 +26,12 @@ function closeWithEsc() {
   <div class="flex items-center justify-center absolute left-0 top-0 w-screen h-screen">
     <div
       class="bg-primary-610 bg-opacity-50 dark:bg-opacity-80 absolute left-0 top-0 z-40 w-screen h-screen"
+      @click.self="clickOutside"
     />
     <div
       ref="modalRef"
       class="shadow-my min-w-30 min-h-30 overflow-y-auto w-max h-max overflow-x-hidden z-50 md:inset-0 justify-center items-center flex p-8 bg-white rounded-lg"
       tabindex="0"
-      @click.self="clickOutside"
       @keyup.esc="closeWithEsc"
     >
       <slot :close="closeWithEsc"> Modal content </slot>