hit-package v1.0.3

Hit Package Documentation

Features

• Seamless integration with SweetAlert.
• Ready-to-use HTTP methods tailored for Inertia.js.
• Simplified image upload functionality.

Basic Function Usages

Template Example

<template>
    <!-- Search Input Example -->
    <div class="my-3">
        <form class="relative flex flex-1">
            <MagnifyingGlassIcon class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400" aria-hidden="true" />
            <input v-model="q" class="input w-full py-0 pl-8 pr-0" placeholder="Search..." type="search" />
        </form>
    </div>
</template>

<script setup>
// Import functions from the hit-package
import { 
    useForm,
    sweetAlert,
    toastSwal,
    confirmAlert,
    generateShortUniqueKey,
    search,
    get,
    post,
    update,
    updateWithFile 
} from 'hit-package';

// SweetAlert Example
sweetAlert('Hello, world!', 'This is a SweetAlert example.', 'success');

// Toast Notification Example
toastSwal('This is a toast notification.');

// Confirmation Alert Example
confirmAlert(() => {
    console.log('Confirmed!');
}, 'Confirm Action', 'Are you sure you want to proceed?', 'Yes, confirm');

// Unique Key Generation Example
const uniqueKey = generateShortUniqueKey();
console.log('Generated unique key:', uniqueKey);

// Search Function Example
const q = ref('');
search('q', q, route('users.index'));

// GET Request Example
get(useForm({}), route('users.index'));

// POST Request Example
const form = useForm({
    name: 'John',
    age: '20'
});
post(form, route('users.store'), 'User');

// Update Request Example (No File Upload)
const props = defineProps({
    user: Object
});
update(form, route('users.update', props.user.id), 'User');

// Update Request Example (With File Upload)
const formWithFile = useForm({
    name: 'John',
    age: '20',
    image: // image file
});
updateWithFile('put', formWithFile, route('users.update', props.user.id), 'User');
</script>

Image upload Function

You can also ready to use image upload function in our package

<template>

    <div class="mb-4">
        <input type="file" class="hidden" ref="fileInput"
            @input="form.image = $event.target.files[0]" @change="handleFileSelect">
        <div v-if="!imageUrl" @click="triggerFileInput"
            class="cursor-pointer border-dashed border-2 border-teal-700 py-10 rounded-md flex flex-col items-center">
            <PhotoIcon class="w-6 mb-3" />
            <p>Upload your image here</p>
        </div>

        <div v-show="imageUrl" class="flex items-end justify-center">
            <img :src="imageUrl" class="w-60" />
            <button class="btn btn-error btn-sm text-white ms-10"
                @click.prevent="deleteImage(form)">Delete</button>
        </div>
        <div class="text-error mt-2">
            <p v-if="form.errors.image">
                {{ form.errors.image }}
            </p>
        </div>
    </div>

</template>

<script setup>
import { 
    ref,
    useForm,
    uploadImage
 } from 'hit-package';

const form = useForm({
    name : ref(''),
    image : ref('')
})
const { fileInput, imageUrl, triggerFileInput, handleFileSelect, deleteImage } = uploadImage();
post(form,route('users.index'),'User')

</script>