@htlkg/components 0.0.2 → 0.0.4

package/src/overlays/overlays.md

@@ -0,0 +1,86 @@
+# Overlays Module
+
+Modal dialogs, notifications, alerts, and drawers.
+
+## Components
+
+### Alert
+
+Visual alerts for information, success, warnings, and errors.
+
+```vue
+<script setup>
+import { Alert } from '@htlkg/components/overlays';
+</script>
+
+<template>
+  <Alert 
+    type="success" 
+    title="Success!" 
+    message="Operation completed."
+    dismissible
+    @dismiss="handleDismiss"
+  />
+</template>
+```
+
+### Modal
+
+Dialog overlays for confirmations, forms, and content.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components/overlays';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Modal v-model:open="isOpen" title="Confirm Action">
+    <p>Are you sure?</p>
+    <template #footer>
+      <button @click="isOpen = false">Cancel</button>
+      <button @click="confirm">Confirm</button>
+    </template>
+  </Modal>
+</template>
+```
+
+### Notification
+
+Toast-style notifications for temporary messages.
+
+```vue
+<script setup>
+import { Notification } from '@htlkg/components/overlays';
+</script>
+
+<template>
+  <Notification 
+    type="info"
+    message="Changes saved"
+    :duration="3000"
+    position="top-right"
+  />
+</template>
+```
+
+### Drawer
+
+Side panel overlays for additional content.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Drawer } from '@htlkg/components/overlays';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Drawer v-model:open="isOpen" position="right" title="Details">
+    <DetailContent />
+  </Drawer>
+</template>
+```

package/src/stores/stores.md

@@ -0,0 +1,82 @@
+# Stores Module
+
+Pinia stores for global component state.
+
+## Available Stores
+
+### useNotificationStore
+
+Global notification state.
+
+```vue
+<script setup>
+import { useNotificationStore } from '@htlkg/components/stores';
+
+const notifications = useNotificationStore();
+
+notifications.add({
+  type: 'success',
+  message: 'Operation completed',
+  duration: 3000,
+});
+
+notifications.remove(id);
+notifications.clear();
+</script>
+```
+
+### useModalStore
+
+Global modal state for managing multiple modals.
+
+```vue
+<script setup>
+import { useModalStore } from '@htlkg/components/stores';
+
+const modals = useModalStore();
+
+modals.open('confirm', { title: 'Confirm', message: 'Are you sure?' });
+modals.close('confirm');
+modals.isOpen('confirm'); // boolean
+</script>
+```
+
+### useLoadingStore
+
+Global loading state.
+
+```vue
+<script setup>
+import { useLoadingStore } from '@htlkg/components/stores';
+
+const loading = useLoadingStore();
+
+loading.start('fetchUsers');
+loading.stop('fetchUsers');
+loading.isLoading('fetchUsers'); // boolean
+loading.anyLoading; // boolean - true if any loading
+</script>
+```
+
+## Store Setup
+
+Register stores in your app:
+
+```typescript
+// main.ts
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+app.use(pinia);
+```
+
+## Astro Integration
+
+Use with nanostores for Astro SSR:
+
+```typescript
+import { useStore } from '@nanostores/vue';
+import { notificationStore } from '@htlkg/components/stores';
+
+const notifications = useStore(notificationStore);
+```