@aitronos/freddy-plugins 0.4.57 → 0.4.58

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.4.58 (2025-11-24)
+
+**Updating vite.config, exports to improve the feature**
+
+### Commit Details
+- **Commit Message:** Updating vite.config, exports to improve the feature
+- **Branch:** `improvisation-pack` (Other)
+- **Commit Hash:** `73c95b3`
+- **Author:** asif-mn-aitronos
+- **Date:** 2025-11-24
+- **Version Type:** patch
+
+### Changes
+- Updating vite.config, exports to improve the feature
+
 ## 0.4.57 (2025-11-24)
 
 **emoving services, fix component usage and commenting assistants export to check all working or not.**

package/README.md

@@ -473,67 +473,264 @@ The Storybook provides:
 - Animation showcases
 - Utility function documentation
 
-## 🟢 Vue Usage
+## 🟢 Usage in Vue 3 and Nuxt 3
 
-### **Security Features**
-
-- ✅ **HTTPS only** - All traffic encrypted
-- ✅ **Security headers** - XSS, CSRF protection
-- ✅ **Content Security Policy** - Resource restrictions
-- ✅ **No sensitive data** - Public component library
 ### Installation
 
-### **Performance Optimizations**
-
-- ✅ **Gzip compression** - Reduced transfer size
-- ✅ **Static asset caching** - 1-year cache headers
-- ✅ **CDN distribution** - Global edge locations
-- ✅ **Auto-scaling** - Handles traffic spikes
 ```bash
 npm install @aitronos/freddy-plugins
+# or
+yarn add @aitronos/freddy-plugins
+# or
+pnpm add @aitronos/freddy-plugins
+```
+
+### Vue 3 Usage
+
+#### Basic Setup
+
+1. **Import CSS** - Always import the CSS file first:
+```typescript
+import "@aitronos/freddy-plugins/freddy-plugins.css";
 ```
 
-### Using in Vue 3
+2. **Register Plugin** - In your `main.ts`:
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import FreddyPlugin from '@aitronos/freddy-plugins';
+import '@aitronos/freddy-plugins/freddy-plugins.css';
+
+const app = createApp(App);
+app.use(FreddyPlugin);
+app.mount('#app');
+```
+
+#### Using Components
 
-### **DNS Configuration**
+After registering the plugin, all components and icons are available globally:
 
-Add these CNAME records in Hostpoint.ch:
 ```vue
-<!-- App.vue -->
+<!-- MyComponent.vue -->
 <template>
   <div>
-    <h1>My Vue App</h1>
-    <freddy-button @click="handleClick">Click me!</freddy-button>
-    <icon-search></icon-search>
+    <!-- Use components directly -->
+    <BaseButton @click="handleClick">Click Me</BaseButton>
+    <InputField v-model="inputValue" placeholder="Enter text" />
+    
+    <!-- Use icons directly -->
+    <IconSearch />
+    <IconUser />
+    <IconSettings />
+    
+    <!-- Use other components -->
+    <ModalBox v-model="showModal">
+      <p>Modal content</p>
+    </ModalBox>
   </div>
 </template>
 
 <script setup lang="ts">
-import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
+import { ref } from 'vue';
 
-const handleClick = (event: CustomEvent) => {
-  console.log("Button clicked:", event.detail);
+const inputValue = ref('');
+const showModal = ref(false);
+
+const handleClick = (): void => {
+  console.log('Button clicked');
 };
 </script>
 ```
 
-### Using Vue Components (Alternative)
+#### Importing Individual Components (Tree-shaking)
+
+If you prefer to import components individually for better tree-shaking:
 
 ```vue
 <!-- MyComponent.vue -->
 <template>
   <div>
-    <Button>Vue Component</Button>
+    <BaseButton>Click Me</BaseButton>
     <IconSearch />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Button, IconSearch } from "@aitronos/freddy-plugins";
-import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
+import { BaseButton, IconSearch } from '@aitronos/freddy-plugins';
+import '@aitronos/freddy-plugins/freddy-plugins.css';
 </script>
 ```
 
+#### Using Directives
+
+```vue
+<template>
+  <div>
+    <!-- Use fr-sanitize directive -->
+    <div v-fr-sanitize="htmlContent"></div>
+    
+    <!-- Use icon-style directive -->
+    <IconSearch v-icon-style="{ color: 'blue', size: '24px' }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import '@aitronos/freddy-plugins/freddy-plugins.css';
+
+const htmlContent = ref('<p>Safe HTML content</p>');
+</script>
+```
+
+### Nuxt 3 Usage
+
+#### Basic Setup
+
+1. **Install the package** (if not already installed):
+```bash
+npm install @aitronos/freddy-plugins
+```
+
+2. **Add CSS to `nuxt.config.ts`**:
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: [
+    '@aitronos/freddy-plugins/freddy-plugins.css'
+  ],
+  // ... other config
+});
+```
+
+3. **Create a plugin file** - Create `plugins/freddy-plugins.client.ts`:
+```typescript
+// plugins/freddy-plugins.client.ts
+export default defineNuxtPlugin(async (nuxtApp) => {
+  // Import and register the plugin on client side
+  const { default: FreddyPlugin } = await import('@aitronos/freddy-plugins');
+  nuxtApp.vueApp.use(FreddyPlugin);
+});
+```
+
+**Note**: The `.client.ts` suffix ensures the plugin only runs on the client side, which is recommended for SSR compatibility.
+
+#### Using Components in Nuxt 3
+
+After setting up the plugin, components are available globally:
+
+```vue
+<!-- pages/index.vue -->
+<template>
+  <div>
+    <BaseButton @click="handleClick">Click Me</BaseButton>
+    <InputField v-model="inputValue" placeholder="Enter text" />
+    <IconSearch />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const inputValue = ref('');
+
+const handleClick = (): void => {
+  console.log('Button clicked');
+};
+</script>
+```
+
+#### Alternative: Import Individual Components
+
+For better tree-shaking and explicit imports:
+
+```vue
+<!-- pages/about.vue -->
+<template>
+  <div>
+    <BaseButton>Click Me</BaseButton>
+    <IconUser />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BaseButton, IconUser } from '@aitronos/freddy-plugins';
+</script>
+```
+
+#### Using Directives in Nuxt 3
+
+```vue
+<!-- components/MyComponent.vue -->
+<template>
+  <div>
+    <!-- fr-sanitize directive -->
+    <div v-fr-sanitize="sanitizedHtml"></div>
+    
+    <!-- icon-style directive -->
+    <IconSearch v-icon-style="{ color: 'blue' }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const sanitizedHtml = ref('<p>Safe HTML</p>');
+</script>
+```
+
+#### SSR-Safe Plugin Registration
+
+If you need SSR support, you can register the plugin conditionally:
+
+```typescript
+// plugins/freddy-plugins.ts
+export default defineNuxtPlugin(async (nuxtApp) => {
+  // Only load on client side for SSR compatibility
+  if (process.client) {
+    const { default: FreddyPlugin } = await import('@aitronos/freddy-plugins');
+    nuxtApp.vueApp.use(FreddyPlugin);
+  }
+});
+```
+
+### TypeScript Support
+
+The library includes full TypeScript definitions. Make sure your `tsconfig.json` includes:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@aitronos/freddy-plugins"]
+  }
+}
+```
+
+### Available Exports
+
+```typescript
+// Main plugin (default export)
+import FreddyPlugin from '@aitronos/freddy-plugins';
+
+// Individual plugins
+import { frSanitizePlugin, iconStylePlugin } from '@aitronos/freddy-plugins';
+
+// Directives
+import { IconStyleDirective, vFrSanitize } from '@aitronos/freddy-plugins';
+
+// Components
+import { BaseButton, InputField, ModalBox } from '@aitronos/freddy-plugins';
+
+// Icons
+import { IconSearch, IconUser, IconSettings } from '@aitronos/freddy-plugins';
+
+// Composables
+import { useErrorHandler, usePerformance } from '@aitronos/freddy-plugins';
+
+// Helpers
+import { sanitizeHTML, formatDate } from '@aitronos/freddy-plugins';
+```
+
 ### **SSL Certificates**
 
 - Automatically managed by Google Cloud