Examples - elenebelocococociapipipipipapipipaii

Data Grid Component

Interactive table implementation with sorting, filtering, and pagination

View Code

import { defineComponent } from '@elenebelo/core';

const DataGrid = defineComponent({
    template: `
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Name
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Status
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="h-10 w-10 flex-shrink-0" style="background: radial-gradient(circle at 30% 31%, #fdf6e3 0%, #f9c74f 50%, #90be6d 75%) no-repeat center center; background-size: 100% 100%;">
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">
                                        Alice
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        alice@example.com
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Active
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    `,
    methods: {
        // Implementation here
    }
});

Form Validation

Real-time validation system with customizable rules and error messages

View Code

import { useValidation } from '@elenebelo/forms';

const EmailForm = defineComponent({
    data: {
        email: '',
        errors: {}
    },
    template: `
        <form class="space-y-4">
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
                <input type="email" id="email" v-model="email" 
                       class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <span class="text-red-500 text-sm mt-1" v-text="errors.email"></span>
            </div>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-md transition duration-200">
                Submit
            </button>
        </form>
    `,
    methods: {
        submitForm() {
            const validator = useValidation({
                email: 'required|email'
            }, this);

            if (validator.isValid()) {
                this.$emit('submitted', { email: this.email });
                this.email = '';
            }
        }
    }
});

Drag & Drop

Draggable interface elements with visual feedback and containment

View Code

import { useDrag } from '@elenebelo/dnd';

const DraggableItem = defineComponent({
    data: {
        position: { x: 0, y: 0 }
    },
    template: `<div class="rounded-lg bg-gray-100 p-4 text-center cursor-move"</div>`
});

const DragDropDemo = defineComponent({
    components: { DraggableItem },
    template: `<div class="grid grid-cols-2 gap-4"<DraggableItem /><DraggableItem /></div>`
});

useDrag(DraggableItem, '.cursor-move');

State Management

Centralized store pattern for managing application state and derived data

View Code

import { createStore } from '@elenebelo/store';

const userStore = createStore({
    state: {
        users: []
    },
    mutations: {
        addUser(state, user) {
            state.users.push(user);
        },
        removeUser(state, id) {
            state.users = state.users.filter(u => u.id !== id);
        }
    },
    actions: {
        async fetchUsers() {
            const data = await fetch('/api/users');
            this.commit('setUsers', data);
        }
    },
    getters: {
        activeUsers: (state) => {
            return state.users.filter(u => u.isActive);
        },
        userCount: (state) => {
            return state.users.length;
        }
    }
});

export default userStore;

Animation Library

Keyframe and timeline animations with easing functions and sequence controls

View Code

import { animate } from '@elenebelo/anim';

const animatedButton = defineComponent({
    template: '<button class="px-6 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg shadow transition-transform"\>',
    mounted() {
        animate(this.$el, {
            scale: [1, 1.1],
            rotate: ['0deg', '360deg'],
            duration: 1000,
            easing: 'ease-out',
            repeat: Infinity
        });
    }
});

Example Gallery

Data Grid Component

Form Validation

Drag & Drop

State Management

Animation Library

Advanced Examples