@dejwcake/craftable 0.1.9 → 2.0.0

package/src/composables/useBaseForm.js

@@ -0,0 +1,265 @@
+import { ref, computed, getCurrentInstance, onBeforeUnmount } from 'vue';
+import { useForm, validate as veeValidate } from 'vee-validate';
+import { notifySuccess, notifyError } from '../utils/notify.js';
+// Use the globally configured axios instance (with CSRF token and X-Requested-With header)
+const axios = window.axios;
+import { formatDate, formatDatetime, formatTime } from '../utils/dateFormatters.js';
+import { getDateFnsLocale } from '../utils/dateFnsLocale.js';
+
+export function useBaseForm(props, options = {}) {
+    const instance = getCurrentInstance();
+    const form = ref(props.data && Object.keys(props.data).length > 0 ? { ...props.data } : {});
+    const wysiwygMedia = ref([]);
+    const mediaCollections = ref([]);
+    const isFormLocalized = ref(false);
+    const currentLocale = ref('');
+    const submitting = ref(false);
+    const onSmallScreen = ref(window.innerWidth < (props.responsiveBreakpoint || 850));
+
+    const { setErrors, errors } = useForm();
+
+    // Date picker configs
+    const datePickerConfig = ref({
+        enableTimePicker: false,
+        enableSeconds: false,
+        modelType: 'yyyy-MM-dd HH:mm:ss',
+        format: 'dd.MM.yyyy',
+        locale: getDateFnsLocale(),
+    });
+
+    const timePickerConfig = ref({
+        timePicker: true,
+        enableTimePicker: true,
+        enableSeconds: false,
+        modelType: 'HH:mm:ss',
+        format: 'HH:mm',
+        locale: getDateFnsLocale(),
+    });
+
+    const datetimePickerConfig = ref({
+        enableTimePicker: true,
+        enableSeconds: false,
+        modelType: 'yyyy-MM-dd HH:mm:ss',
+        format: 'dd.MM.yyyy HH:mm',
+        locale: getDateFnsLocale(),
+    });
+
+    // Localization
+    const locales = computed(() => props.locales || []);
+    const defaultLocale = computed(() => props.defaultLocale || (locales.value.length > 0 ? locales.value[0] : ''));
+
+    const otherLocales = computed(() => {
+        return locales.value.filter((x) => x !== defaultLocale.value);
+    });
+
+    const showLocalizedValidationError = computed(() => {
+        return otherLocales.value.some((lang) => {
+            const errorKeys = Object.keys(errors.value);
+            return errorKeys.some((field) => {
+                return field.endsWith('_' + lang) || field.startsWith(lang + '_');
+            });
+        });
+    });
+
+    // Init localization
+    if (locales.value.length > 0) {
+        currentLocale.value = defaultLocale.value;
+    }
+
+    // Resize handler
+    function onResize() {
+        onSmallScreen.value = window.innerWidth < (props.responsiveBreakpoint || 850);
+    }
+
+    window.addEventListener('resize', onResize);
+    onBeforeUnmount(() => {
+        window.removeEventListener('resize', onResize);
+    });
+
+    // Methods
+    function getPostData() {
+        const refs = instance?.proxy?.$refs || {};
+        if (mediaCollections.value) {
+            mediaCollections.value.forEach((collection) => {
+                if (form.value[collection]) {
+                    console.warn(
+                        "MediaUploader warning: Media input must have a unique name, '" +
+                            collection +
+                            "' is already defined in regular inputs.",
+                    );
+                }
+
+                const uploaderRef = refs[collection + '_uploader'];
+                if (uploaderRef) {
+                    const uploader = Array.isArray(uploaderRef) ? uploaderRef[0] : uploaderRef;
+                    if (uploader && typeof uploader.getFiles === 'function') {
+                        form.value[collection] = uploader.getFiles();
+                    }
+                }
+            });
+        }
+        form.value['wysiwygMedia'] = wysiwygMedia.value;
+
+        if (typeof options.transformData === 'function') {
+            return options.transformData({ ...form.value });
+        }
+
+        return form.value;
+    }
+
+    async function onSubmit() {
+        if (options.validationSchema) {
+            const fieldErrors = {};
+            for (const [field, rules] of Object.entries(options.validationSchema)) {
+                const result = await veeValidate(form.value[field], rules, {
+                    name: field,
+                    values: form.value,
+                });
+                if (!result.valid) {
+                    fieldErrors[field] = result.errors[0];
+                }
+            }
+
+            // Clear all schema field errors, then set only invalid ones
+            const errorState = {};
+            for (const field of Object.keys(options.validationSchema)) {
+                errorState[field] = fieldErrors[field] || undefined;
+            }
+            setErrors(errorState);
+
+            if (Object.keys(fieldErrors).length > 0) {
+                notifyError('The form contains invalid fields.');
+                return false;
+            }
+        }
+
+        submitting.value = true;
+
+        let postData = getPostData();
+        if (!props.sendEmptyLocales && props.sendEmptyLocales !== undefined) {
+            const filtered = {};
+            for (const [key, value] of Object.entries(postData)) {
+                if (!locales.value.includes(key) || (value && Object.keys(value).length > 0)) {
+                    filtered[key] = value;
+                }
+            }
+            postData = filtered;
+        }
+
+        axios
+            .post(props.action, postData)
+            .then((response) => {
+                onSuccess(response.data);
+            })
+            .catch((err) => {
+                onFail(err.response?.data || {});
+            });
+    }
+
+    function onSuccess(data) {
+        submitting.value = false;
+        if (data.message) {
+            notifySuccess(data.message);
+        }
+        if (data.redirect) {
+            if (data.message) {
+                setTimeout(() => window.location.replace(data.redirect), 2000);
+            } else {
+                window.location.replace(data.redirect);
+            }
+        }
+    }
+
+    function onFail(data) {
+        submitting.value = false;
+        if (data.errors !== undefined) {
+            const fieldErrors = {};
+            Object.keys(data.errors).forEach((key) => {
+                const splitted = key.split('.', 2);
+                if (splitted.length > 1) {
+                    fieldErrors[splitted[0] + '_' + splitted[1]] = data.errors[key][0];
+                } else {
+                    fieldErrors[key] = data.errors[key][0];
+                }
+            });
+            setErrors(fieldErrors);
+            if (data.message === undefined) {
+                notifyError('The form contains invalid fields.');
+            }
+        }
+        if (data.message !== undefined) {
+            notifyError(data.message);
+        }
+    }
+
+    function getLocalizedFormDefaults() {
+        const object = {};
+        locales.value.forEach((locale) => {
+            object[locale] = null;
+        });
+        return object;
+    }
+
+    function showLocalization() {
+        isFormLocalized.value = true;
+        currentLocale.value = otherLocales.value[0];
+        const container = document.querySelector('.container-xl');
+        if (container) container.classList.add('width-auto');
+    }
+
+    function hideLocalization() {
+        isFormLocalized.value = false;
+        const container = document.querySelector('.container-xl');
+        if (container) container.classList.remove('width-auto');
+    }
+
+    function shouldShowLangGroup(locale) {
+        if (!onSmallScreen.value) {
+            if (defaultLocale.value === locale) return true;
+            return isFormLocalized.value && currentLocale.value === locale;
+        } else {
+            return currentLocale.value === locale;
+        }
+    }
+
+    return {
+        // State
+        form,
+        wysiwygMedia,
+        mediaCollections,
+        isFormLocalized,
+        currentLocale,
+        submitting,
+        onSmallScreen,
+        errors,
+
+        // Configs
+        datePickerConfig,
+        timePickerConfig,
+        datetimePickerConfig,
+
+        // Computed
+        locales,
+        defaultLocale,
+        otherLocales,
+        showLocalizedValidationError,
+
+        // Methods
+        getPostData,
+        onSubmit,
+        onSuccess,
+        onFail,
+        getLocalizedFormDefaults,
+        showLocalization,
+        hideLocalization,
+        shouldShowLangGroup,
+
+        // Vee-validate
+        setErrors,
+
+        // Date formatters (convenience re-exports)
+        formatDate,
+        formatDatetime,
+        formatTime,
+    };
+}

package/src/composables/useBaseListing.js

@@ -0,0 +1,316 @@
+import { ref, reactive, computed, onBeforeUnmount } from 'vue';
+import { useCookies } from 'vue3-cookies';
+const axios = window.axios;
+import { formatDate, formatDatetime, formatTime, nowInTimezone } from '../utils/dateFormatters.js';
+import { notifySuccess, notifyError } from '../utils/notify.js';
+
+export function useBaseListing(props) {
+    const { cookies } = useCookies();
+
+    const pagination = reactive({
+        state: {
+            per_page: cookies.get('per_page') || 10,
+            current_page: 1,
+            last_page: 1,
+            from: 1,
+            to: 10,
+        },
+        options: {
+            alwaysShowPrevNext: true,
+        },
+    });
+
+    const orderBy = reactive({
+        column: 'id',
+        direction: 'asc',
+    });
+
+    const filters = reactive({});
+    const search = ref('');
+    const collection = ref(null);
+    const now = ref(nowInTimezone(props.timezone || 'UTC'));
+    const bulkItems = reactive({});
+    const bulkCheckingAllLoader = ref(false);
+
+    const confirmModal = reactive({
+        show: false,
+        onConfirm: null,
+        translations: {
+            confirm_title: 'Warning!',
+            confirm_text: 'Are you sure?',
+            confirm_btn: 'Yes, confirm',
+            cancel_btn: 'Cancel',
+        },
+    });
+
+    // Update "now" every second
+    const nowInterval = setInterval(() => {
+        now.value = nowInTimezone(props.timezone || 'UTC');
+    }, 1000);
+
+    onBeforeUnmount(() => {
+        clearInterval(nowInterval);
+    });
+
+    // Computed
+    const clickedBulkItemsCount = computed(() => {
+        return Object.values(bulkItems).filter((item) => item === true).length;
+    });
+
+    const isClickedAll = computed({
+        get() {
+            return (
+                clickedBulkItemsCount.value >= pagination.state.to - pagination.state.from + 1 &&
+                clickedBulkItemsCount.value > 0 &&
+                allClickedItemsAreSame()
+            );
+        },
+        set() {},
+    });
+
+    // Init
+    if (props.data != null) {
+        populateCurrentStateAndData(props.data);
+    } else {
+        loadData();
+    }
+
+    // Methods
+    function allClickedItemsAreSame() {
+        if (!collection.value) return false;
+        const itemsInPaginationIds = Object.values(collection.value).map(({ id }) => id);
+
+        for (let i = 0; i < itemsInPaginationIds.length; i++) {
+            const itemInPaginationId = itemsInPaginationIds[i];
+            if (bulkItems[itemInPaginationId] === undefined || bulkItems[itemInPaginationId] === false) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    function onBulkItemClicked(id) {
+        if (bulkItems[id] === undefined) {
+            bulkItems[id] = true;
+        } else {
+            bulkItems[id] = !bulkItems[id];
+        }
+    }
+
+    function onBulkItemsClickedAll(url) {
+        const options = {
+            params: {
+                bulk: true,
+            },
+        };
+
+        bulkCheckingAllLoader.value = true;
+        Object.assign(options.params, filters);
+
+        axios
+            .get(url, options)
+            .then((response) => {
+                checkAllItems(response.data.bulkItems);
+            })
+            .catch((error) => {
+                notifyError(error.response?.data?.message);
+            })
+            .finally(() => {
+                bulkCheckingAllLoader.value = false;
+            });
+    }
+
+    function onBulkItemsClickedAllWithPagination() {
+        if (!collection.value) return;
+        const itemsInPagination = Object.values(collection.value).map(({ id }) => id);
+        if (!isClickedAll.value) {
+            bulkCheckingAllLoader.value = true;
+            checkAllItems(itemsInPagination);
+            bulkCheckingAllLoader.value = false;
+        } else {
+            onBulkItemsClickedAllUncheck(itemsInPagination);
+        }
+    }
+
+    function checkAllItems(itemsToCheck) {
+        itemsToCheck.forEach((itemId) => {
+            bulkItems[itemId] = true;
+        });
+    }
+
+    function onBulkItemsClickedAllUncheck(bulkItemsToUncheck = null) {
+        if (bulkItemsToUncheck === null) {
+            Object.keys(bulkItems).forEach((key) => delete bulkItems[key]);
+        } else {
+            if (!collection.value) return;
+            Object.values(collection.value)
+                .map(({ id }) => id)
+                .forEach((itemId) => {
+                    bulkItems[itemId] = false;
+                });
+        }
+    }
+
+    function bulkDelete(url, trans = {}) {
+        const itemsToDelete = Object.keys(bulkItems).filter((key) => bulkItems[key]);
+
+        confirmModal.translations = {
+            ...confirmModal.translations,
+            ...trans,
+            confirm_text: (trans.confirm_text || 'Do you really want to delete :number selected items?').replace(
+                ':number',
+                clickedBulkItemsCount.value,
+            ),
+        };
+        confirmModal.onConfirm = () => {
+            confirmModal.show = false;
+            axios
+                .post(url, {
+                    ids: itemsToDelete,
+                })
+                .then((response) => {
+                    Object.keys(bulkItems).forEach((key) => delete bulkItems[key]);
+                    loadData();
+                    notifySuccess(response.data.message);
+                })
+                .catch((error) => {
+                    notifyError(error.response?.data?.message);
+                });
+        };
+        confirmModal.show = true;
+    }
+
+    function loadData(resetCurrentPage) {
+        const options = {
+            params: {
+                per_page: pagination.state.per_page,
+                page: pagination.state.current_page,
+                orderBy: orderBy.column,
+                orderDirection: orderBy.direction,
+            },
+        };
+
+        if (resetCurrentPage === true) {
+            options.params.page = 1;
+        }
+
+        Object.assign(options.params, filters);
+
+        axios
+            .get(props.url, options)
+            .then((response) => {
+                populateCurrentStateAndData(response.data.data);
+            })
+            .catch((error) => {
+                notifyError(error.response?.data?.message);
+            });
+    }
+
+    function filter(column, value) {
+        if (value === '') {
+            delete filters[column];
+        } else {
+            filters[column] = value;
+        }
+        loadData(true);
+    }
+
+    function populateCurrentStateAndData(object) {
+        if (object.current_page > object.last_page && object.total > 0) {
+            pagination.state.current_page = object.last_page;
+            loadData();
+            return;
+        }
+
+        collection.value = object.data;
+        pagination.state.current_page = object.current_page;
+        pagination.state.last_page = object.last_page;
+        pagination.state.total = object.total;
+        pagination.state.per_page = object.per_page;
+        pagination.state.to = object.to;
+        pagination.state.from = object.from;
+    }
+
+    function getAction(url) {
+        return axios
+            .get(url)
+            .then((response) => {
+                if (response.data.message) {
+                    notifySuccess(response.data.message);
+                } else if (response.data.redirect) {
+                    window.location.replace(response.data.redirect);
+                } else if (response.data.data?.path) {
+                    window.location.replace(response.data.data.path);
+                }
+            })
+            .catch((error) => {
+                notifyError(error.response?.data?.message);
+            });
+    }
+
+    function resolveUrl(template, item) {
+        return template.replace(':id', item.id);
+    }
+
+    function onSort({ column, direction }) {
+        orderBy.column = column;
+        orderBy.direction = direction;
+        loadData();
+    }
+
+    function onPageChange(page) {
+        pagination.state.current_page = page;
+        loadData();
+    }
+
+    function onPerPageChange() {
+        pagination.state.current_page = 1;
+        loadData(true);
+    }
+
+    function onUpdateItem(updatedItem) {
+        if (!collection.value) return;
+        const index = collection.value.findIndex((item) => item.id === updatedItem.id);
+        if (index !== -1) {
+            collection.value[index] = updatedItem;
+        }
+    }
+
+    return {
+        // State
+        pagination,
+        orderBy,
+        filters,
+        search,
+        collection,
+        now,
+        bulkItems,
+        bulkCheckingAllLoader,
+        confirmModal,
+
+        // Computed
+        isClickedAll,
+        clickedBulkItemsCount,
+
+        // Methods
+        onBulkItemClicked,
+        onBulkItemsClickedAll,
+        onBulkItemsClickedAllWithPagination,
+        onBulkItemsClickedAllUncheck,
+        bulkDelete,
+        loadData,
+        filter,
+        resolveUrl,
+        getAction,
+        onSort,
+        onPageChange,
+        onPerPageChange,
+        onUpdateItem,
+
+        // Date formatters (convenience re-exports)
+        formatDate,
+        formatDatetime,
+        formatTime,
+    };
+}

package/src/composables/useResponsiveColumns.js

@@ -0,0 +1,62 @@
+import { ref, watch, onBeforeUnmount } from 'vue';
+
+const defaultBreakpoints = [
+    { minWidth: 1800, maxPriority: 10 },
+    { minWidth: 1600, maxPriority: 8 },
+    { minWidth: 1400, maxPriority: 6 },
+    { minWidth: 1200, maxPriority: 4 },
+    { minWidth: 1000, maxPriority: 3 },
+    { minWidth: 800, maxPriority: 2 },
+    { minWidth: 0, maxPriority: 0 },
+];
+
+export function useResponsiveColumns(containerRef, options = {}) {
+    const breakpoints = options.breakpoints || defaultBreakpoints;
+    const currentMaxPriority = ref(10);
+    let observer = null;
+
+    function updatePriority(width) {
+        for (const bp of breakpoints) {
+            if (width >= bp.minWidth) {
+                currentMaxPriority.value = bp.maxPriority;
+                return;
+            }
+        }
+        currentMaxPriority.value = 0;
+    }
+
+    function setupObserver(el) {
+        if (observer) {
+            observer.disconnect();
+        }
+        if (!el) return;
+
+        observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                updatePriority(entry.contentRect.width);
+            }
+        });
+        observer.observe(el);
+    }
+
+    watch(
+        containerRef,
+        (el) => {
+            setupObserver(el);
+        },
+        { immediate: true },
+    );
+
+    onBeforeUnmount(() => {
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+    });
+
+    function isColumnVisible(priority) {
+        return priority <= currentMaxPriority.value;
+    }
+
+    return { isColumnVisible };
+}

package/src/index.js

@@ -0,0 +1,62 @@
+// Composables
+export { useBaseForm } from './composables/useBaseForm.js';
+export { useBaseAuth } from './composables/useBaseAuth.js';
+export { useBaseListing } from './composables/useBaseListing.js';
+export { useAdmin } from './composables/useAdmin.js';
+export { useResponsiveColumns } from './composables/useResponsiveColumns.js';
+
+// Components
+export { default as MediaUpload } from './components/form/MediaUpload.vue';
+export { default as TiptapEditor } from './components/form/TiptapEditor.vue';
+export { default as CkeditorEditor } from './components/form/CkeditorEditor.vue';
+export { default as UserDetailTooltip } from './components/UserDetailTooltip.vue';
+
+// Listing components
+export { default as Pagination } from './components/listing/Pagination.vue';
+export { default as Sortable } from './components/listing/Sortable.vue';
+export { default as Search } from './components/listing/Search.vue';
+export { default as PerPage } from './components/listing/PerPage.vue';
+export { default as EmptyState } from './components/listing/EmptyState.vue';
+export { default as BulkCheckboxHeader } from './components/listing/BulkCheckboxHeader.vue';
+export { default as BulkCheckboxRow } from './components/listing/BulkCheckboxRow.vue';
+export { default as BulkOperationsBar } from './components/listing/BulkOperationsBar.vue';
+export { default as PublishedAtColumn } from './components/listing/PublishedAtColumn.vue';
+export { default as ListingHeader } from './components/listing/ListingHeader.vue';
+export { default as EditButton } from './components/listing/EditButton.vue';
+export { default as DeleteButton } from './components/listing/DeleteButton.vue';
+export { default as ConfirmModal } from './components/ConfirmModal.vue';
+export { default as ToggleSwitch } from './components/listing/ToggleSwitch.vue';
+
+// Form components
+export { default as FormInput } from './components/form/FormInput.vue';
+export { default as FormEmail } from './components/form/FormEmail.vue';
+export { default as FormTextarea } from './components/form/FormTextarea.vue';
+export { default as FormCheckbox } from './components/form/FormCheckbox.vue';
+export { default as FormDatePicker } from './components/form/FormDatePicker.vue';
+export { default as FormWysiwyg } from './components/form/FormWysiwyg.vue';
+export { default as FormMultiSelect } from './components/form/FormMultiSelect.vue';
+export { default as FormLocalizedInput } from './components/form/FormLocalizedInput.vue';
+export { default as FormLocalizedWysiwyg } from './components/form/FormLocalizedWysiwyg.vue';
+export { default as FormWysiwygSimple } from './components/form/FormWysiwygSimple.vue';
+export { default as FormLocalizedWysiwygSimple } from './components/form/FormLocalizedWysiwygSimple.vue';
+export { default as FormSelect } from './components/form/FormSelect.vue';
+export { default as FormPasswordConfirm } from './components/form/FormPasswordConfirm.vue';
+export { default as FormSubmit } from './components/form/FormSubmit.vue';
+export { default as LocalizationBar } from './components/form/LocalizationBar.vue';
+
+// Auth components
+export { default as LoginForm } from './auth/LoginForm.vue';
+export { default as ForgotPasswordForm } from './auth/ForgotPasswordForm.vue';
+export { default as ResetPasswordForm } from './auth/ResetPasswordForm.vue';
+export { default as ActivationForm } from './auth/ActivationForm.vue';
+export { default as ActivationError } from './auth/ActivationError.vue';
+
+// Page components
+export { default as TranslationListing } from './translation/TranslationListing.vue';
+
+// Utilities
+export { formatDate, formatDatetime, formatTime, nowInTimezone, dayjs } from './utils/dateFormatters.js';
+export { mediaCollectionProp, mediaCollectionDefaults } from './utils/mediaProps.js';
+export { notifySuccess, notifyError } from './utils/notify.js';
+export { getDateFnsLocale, initDateFnsLocale } from './utils/dateFnsLocale.js';
+export { initUI } from './ui/index.js';