@dejwcake/craftable 0.1.10 → 2.0.0

package/src/components/form/TiptapEditor.vue

@@ -0,0 +1,238 @@
+<template>
+    <div class="tiptap-editor">
+        <div v-if="editor" class="tiptap-toolbar">
+            <select class="tiptap-heading-select" @change="setHeading($event)">
+                <option value="0" :selected="!editor.isActive('heading')">Paragraph</option>
+                <option
+                    v-for="level in [1, 2, 3, 4, 5, 6]"
+                    :key="level"
+                    :value="level"
+                    :selected="editor.isActive('heading', { level })"
+                >
+                    H{{ level }}
+                </option>
+            </select>
+
+            <button
+                type="button"
+                :class="{ 'is-active': editor.isActive('bold') }"
+                title="Bold"
+                @click="editor.chain().focus().toggleBold().run()"
+            >
+                <strong>B</strong>
+            </button>
+            <button
+                type="button"
+                :class="{ 'is-active': editor.isActive('italic') }"
+                title="Italic"
+                @click="editor.chain().focus().toggleItalic().run()"
+            >
+                <em>I</em>
+            </button>
+            <button
+                type="button"
+                :class="{ 'is-active': editor.isActive('strike') }"
+                title="Strikethrough"
+                @click="editor.chain().focus().toggleStrike().run()"
+            >
+                <s>S</s>
+            </button>
+
+            <span class="tiptap-toolbar-divider"></span>
+
+            <button
+                type="button"
+                :class="{ 'is-active': editor.isActive('bulletList') }"
+                title="Bullet List"
+                @click="editor.chain().focus().toggleBulletList().run()"
+            >
+                &#8226;
+            </button>
+            <button
+                type="button"
+                :class="{ 'is-active': editor.isActive('orderedList') }"
+                title="Ordered List"
+                @click="editor.chain().focus().toggleOrderedList().run()"
+            >
+                1.
+            </button>
+
+            <span class="tiptap-toolbar-divider"></span>
+
+            <button type="button" title="Link" @click="setLink">&#128279;</button>
+            <button type="button" title="Upload Image" @click="uploadImage">&#128228;</button>
+            <button type="button" title="Image URL" @click="addImageByUrl">&#128247;</button>
+            <input ref="fileInput" type="file" accept="image/*" style="display: none" @change="onFileSelected" />
+
+            <span v-if="showTableControls" class="tiptap-toolbar-divider"></span>
+
+            <button
+                v-if="showTableControls"
+                type="button"
+                title="Insert Table"
+                @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()"
+            >
+                &#9638;
+            </button>
+
+            <span class="tiptap-toolbar-divider"></span>
+
+            <button
+                type="button"
+                :disabled="!editor.can().undo()"
+                title="Undo"
+                @click="editor.chain().focus().undo().run()"
+            >
+                &#8617;
+            </button>
+            <button
+                type="button"
+                :disabled="!editor.can().redo()"
+                title="Redo"
+                @click="editor.chain().focus().redo().run()"
+            >
+                &#8618;
+            </button>
+        </div>
+
+        <editor-content :editor="editor" class="tiptap-content" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount, watch } from 'vue';
+const axios = window.axios;
+import { notifyError } from '../../utils/notify.js';
+import { useEditor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Image from '@tiptap/extension-image';
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    config: {
+        type: Object,
+        default: () => ({}),
+    },
+    showTableControls: {
+        type: Boolean,
+        default: true,
+    },
+    uploadUrl: {
+        type: String,
+        default: '/admin/wysiwyg-media',
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'media-uploaded']);
+
+const extensions = [
+    StarterKit.configure({
+        link: { openOnClick: false },
+    }),
+    Image.configure({
+        HTMLAttributes: {
+            class: 'tiptap-image',
+        },
+    }),
+    Table.configure({
+        resizable: true,
+    }),
+    TableRow,
+    TableCell,
+    TableHeader,
+    ...(props.config.extensions || []),
+];
+
+const editor = useEditor({
+    content: props.modelValue,
+    extensions,
+    onUpdate: ({ editor: ed }) => {
+        emit('update:modelValue', ed.getHTML());
+    },
+});
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (editor.value && editor.value.getHTML() !== value) {
+            editor.value.commands.setContent(value, { emitUpdate: false });
+        }
+    },
+);
+
+onBeforeUnmount(() => {
+    if (editor.value) {
+        editor.value.destroy();
+    }
+});
+
+function setHeading(event) {
+    const level = parseInt(event.target.value);
+    if (level === 0) {
+        editor.value.chain().focus().setParagraph().run();
+    } else {
+        editor.value.chain().focus().toggleHeading({ level }).run();
+    }
+}
+
+function setLink() {
+    const previousUrl = editor.value.getAttributes('link').href;
+    const url = window.prompt('URL', previousUrl);
+
+    if (url === null) return;
+
+    if (url === '') {
+        editor.value.chain().focus().extendMarkRange('link').unsetLink().run();
+        return;
+    }
+
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+}
+
+const fileInput = ref(null);
+
+function addImageByUrl() {
+    const url = window.prompt('Image URL');
+    if (url) {
+        editor.value.chain().focus().setImage({ src: url }).run();
+    }
+}
+
+function uploadImage() {
+    fileInput.value.click();
+}
+
+function onFileSelected(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append('fileToUpload', file);
+
+    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+    axios
+        .post(props.uploadUrl, formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+                ...(token ? { 'X-CSRF-TOKEN': token } : {}),
+            },
+        })
+        .then(
+            (response) => {
+                editor.value.chain().focus().setImage({ src: response.data.file }).run();
+                emit('media-uploaded', response.data);
+            },
+            (error) => {
+                notifyError(error.response?.data?.error);
+            },
+        )
+        .finally(() => {
+            fileInput.value.value = '';
+        });
+}
+</script>

package/src/components/listing/BulkCheckboxHeader.vue

@@ -0,0 +1,18 @@
+<template>
+    <input
+        id="enabled"
+        class="form-check-input"
+        type="checkbox"
+        :checked="isClickedAll"
+        name="enabled_fake_element"
+        @click="onToggleAll()"
+    />
+    <label class="form-check-label" for="enabled"> # </label>
+</template>
+
+<script setup>
+defineProps({
+    isClickedAll: { type: Boolean, required: true },
+    onToggleAll: { type: Function, required: true },
+});
+</script>

package/src/components/listing/BulkCheckboxRow.vue

@@ -0,0 +1,21 @@
+<template>
+    <input
+        :id="'enabled' + itemId"
+        class="form-check-input"
+        type="checkbox"
+        :checked="checked"
+        :name="'enabled' + itemId + '_fake_element'"
+        :disabled="disabled"
+        @click="onToggle(itemId)"
+    />
+    <label class="form-check-label" :for="'enabled' + itemId"> </label>
+</template>
+
+<script setup>
+defineProps({
+    itemId: { type: [Number, String], required: true },
+    checked: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    onToggle: { type: Function, required: true },
+});
+</script>

package/src/components/listing/BulkOperationsBar.vue

@@ -0,0 +1,41 @@
+<template>
+    <span class="align-middle fw-light text-dark">
+        {{ translations.selected_items }} {{ selectedCount }}.
+        <a v-if="selectedCount < totalCount" href="javascript:void(0)" class="text-primary" @click="onCheckAll()">
+            <i v-if="loading" class="fa fa-spinner"></i>
+            {{ translations.check_all_items }} {{ totalCount }}
+        </a>
+        <span v-if="selectedCount < totalCount" class="text-primary"> | </span>
+        <a href="javascript:void(0)" class="text-primary" @click="onUncheckAll()">
+            {{ translations.uncheck_all_items }}
+        </a>
+    </span>
+
+    <span class="float-end pe-2">
+        <slot>
+            <button class="btn btn-sm btn-danger px-4" @click="onBulkDelete()">
+                {{ translations.delete_btn }}
+            </button>
+        </slot>
+    </span>
+</template>
+
+<script setup>
+defineProps({
+    selectedCount: { type: Number, required: true },
+    totalCount: { type: Number, required: true },
+    loading: { type: Boolean, default: false },
+    onCheckAll: { type: Function, required: true },
+    onUncheckAll: { type: Function, required: true },
+    onBulkDelete: { type: Function, required: true },
+    translations: {
+        type: Object,
+        default: () => ({
+            selected_items: 'Selected items',
+            check_all_items: 'Check all items',
+            uncheck_all_items: 'Uncheck all items',
+            delete_btn: 'Delete',
+        }),
+    },
+});
+</script>

package/src/components/listing/DeleteButton.vue

@@ -0,0 +1,46 @@
+<template>
+    <button type="button" class="btn btn-sm btn-danger" :title="translations.delete_btn" @click="showConfirm = true">
+        <i class="fa fa-trash"></i>
+    </button>
+
+    <ConfirmModal :show="showConfirm" :translations="translations" @confirm="onConfirm" @cancel="showConfirm = false" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const axios = window.axios;
+import { notifySuccess, notifyError } from '../../utils/notify.js';
+import ConfirmModal from '../ConfirmModal.vue';
+
+const props = defineProps({
+    url: { type: String, required: true },
+    translations: {
+        type: Object,
+        default: () => ({
+            delete_btn: 'Delete',
+            confirm_title: 'Warning!',
+            confirm_text: 'Do you really want to delete this item?',
+            confirm_btn: 'Delete',
+            cancel_btn: 'Cancel',
+        }),
+    },
+});
+
+const emit = defineEmits(['deleted']);
+
+const showConfirm = ref(false);
+
+function onConfirm() {
+    showConfirm.value = false;
+
+    axios.delete(props.url).then(
+        (response) => {
+            notifySuccess(response.data.message);
+            emit('deleted');
+        },
+        (error) => {
+            notifyError(error.response?.data?.message);
+        },
+    );
+}
+</script>

package/src/components/listing/EditButton.vue

@@ -0,0 +1,17 @@
+<template>
+    <a class="btn btn-sm btn-spinner btn-info" :href="url" :title="translations.edit_btn" role="button">
+        <i class="fa fa-edit"></i>
+    </a>
+</template>
+
+<script setup>
+defineProps({
+    url: { type: String, required: true },
+    translations: {
+        type: Object,
+        default: () => ({
+            edit_btn: 'Edit',
+        }),
+    },
+});
+</script>

package/src/components/listing/EmptyState.vue

@@ -0,0 +1,25 @@
+<template>
+    <div v-if="show" class="no-items-found">
+        <i class="fa fa-magnifying-glass"></i>
+        <h3>{{ translations.no_items }}</h3>
+        <p>{{ translations.try_changing_items }}</p>
+        <a v-if="createUrl" class="btn btn-primary btn-spinner" :href="createUrl" role="button">
+            <i class="fa fa-plus"></i>&nbsp; {{ translations.create_btn }}
+        </a>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    show: { type: Boolean, default: true },
+    createUrl: { type: String, default: '' },
+    translations: {
+        type: Object,
+        default: () => ({
+            no_items: 'Could not find any items',
+            try_changing_items: 'Try changing the filters or add a new one',
+            create_btn: 'New',
+        }),
+    },
+});
+</script>

package/src/components/listing/ListingHeader.vue

@@ -0,0 +1,24 @@
+<template>
+    <i class="fa fa-align-justify"></i> {{ translations.listing_title }}
+    <a v-if="exportUrl" class="btn btn-primary btn-sm float-end mb-0 ms-2" :href="exportUrl" role="button">
+        <i class="fa fa-file-excel"></i>&nbsp; {{ translations.export_btn }}
+    </a>
+    <a v-if="createUrl" class="btn btn-primary btn-spinner btn-sm float-end mb-0" :href="createUrl" role="button">
+        <i class="fa fa-plus"></i>&nbsp; {{ translations.create_btn }}
+    </a>
+</template>
+
+<script setup>
+defineProps({
+    createUrl: { type: String, default: '' },
+    exportUrl: { type: String, default: '' },
+    translations: {
+        type: Object,
+        default: () => ({
+            listing_title: 'Listing',
+            create_btn: 'New',
+            export_btn: 'Export',
+        }),
+    },
+});
+</script>

package/src/components/listing/Pagination.vue

@@ -0,0 +1,158 @@
+<template>
+    <div v-if="pagination.total > 0" class="row">
+        <div class="col-sm">
+            <span class="pagination-caption">{{ overview }}</span>
+        </div>
+        <div class="col-sm-auto">
+            <nav>
+                <ul v-if="pagination.last_page > 1" :class="['pagination', sizeClass]">
+                    <li v-if="showPrevious()" :class="{ disabled: pagination.current_page <= 1, 'page-item': true }">
+                        <span v-if="pagination.current_page <= 1" class="page-link">
+                            <span aria-hidden="true">{{ translations.previous }}</span>
+                        </span>
+
+                        <a
+                            v-if="pagination.current_page > 1"
+                            href="#"
+                            :aria-label="translations.previous"
+                            class="page-link"
+                            @click.prevent="changePage(pagination.current_page - 1)"
+                        >
+                            <span aria-hidden="true">{{ translations.previous }}</span>
+                        </a>
+                    </li>
+
+                    <li
+                        v-for="num in array"
+                        :key="num"
+                        :class="{ active: num === pagination.current_page, 'page-item': true }"
+                    >
+                        <a href="#" class="page-link" @click.prevent="changePage(num)">{{ num }}</a>
+                    </li>
+
+                    <li
+                        v-if="showNext()"
+                        :class="{
+                            disabled: pagination.current_page === pagination.last_page || pagination.last_page === 0,
+                            'page-item': true,
+                        }"
+                    >
+                        <span
+                            v-if="pagination.current_page === pagination.last_page || pagination.last_page === 0"
+                            class="page-link"
+                        >
+                            <span aria-hidden="true">{{ translations.next }}</span>
+                        </span>
+
+                        <a
+                            v-if="pagination.current_page < pagination.last_page"
+                            href="#"
+                            :aria-label="translations.next"
+                            class="page-link"
+                            @click.prevent="changePage(pagination.current_page + 1)"
+                        >
+                            <span aria-hidden="true">{{ translations.next }}</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, watch } from 'vue';
+import { useCookies } from 'vue3-cookies';
+
+const props = defineProps({
+    pagination: { type: Object, required: true },
+    options: { type: Object, default: () => ({}) },
+    size: { type: String, default: '' },
+    translations: {
+        type: Object,
+        default: () => ({
+            previous: 'Previous',
+            next: 'Next',
+            overview: 'Displaying items from :from to :to of total :total items.',
+        }),
+    },
+});
+
+const emit = defineEmits(['page-change', 'per-page-change']);
+const { cookies } = useCookies();
+
+const overview = computed(() => {
+    return (props.translations.overview || '')
+        .replace(':from', props.pagination.from)
+        .replace(':to', props.pagination.to)
+        .replace(':total', props.pagination.total);
+});
+
+const config = computed(() => {
+    return Object.assign(
+        {
+            offset: 3,
+            alwaysShowPrevNext: false,
+        },
+        props.options,
+    );
+});
+
+const array = computed(() => {
+    if (props.pagination.last_page <= 0) {
+        return [];
+    }
+
+    let from = props.pagination.current_page - config.value.offset;
+    if (from < 1) {
+        from = 1;
+    }
+
+    let to = from + config.value.offset * 2;
+    if (to >= props.pagination.last_page) {
+        to = props.pagination.last_page;
+    }
+
+    const arr = [];
+    while (from <= to) {
+        arr.push(from);
+        from++;
+    }
+
+    return arr;
+});
+
+const sizeClass = computed(() => {
+    if (props.size === 'large') {
+        return 'pagination-lg';
+    } else if (props.size === 'small') {
+        return 'pagination-sm';
+    }
+    return '';
+});
+
+watch(
+    () => props.pagination.per_page,
+    (newVal, oldVal) => {
+        if (+newVal !== +oldVal) {
+            cookies.set('per_page', newVal);
+            emit('per-page-change');
+        }
+    },
+);
+
+function showPrevious() {
+    return config.value.alwaysShowPrevNext || props.pagination.current_page > 1;
+}
+
+function showNext() {
+    return config.value.alwaysShowPrevNext || props.pagination.current_page < props.pagination.last_page;
+}
+
+function changePage(page) {
+    if (props.pagination.current_page === page) {
+        return;
+    }
+    emit('page-change', page);
+}
+</script>

package/src/components/listing/PerPage.vue

@@ -0,0 +1,15 @@
+<template>
+    <select class="form-select" :value="modelValue" @change="$emit('update:modelValue', +$event.target.value)">
+        <option value="10">10</option>
+        <option value="25">25</option>
+        <option value="100">100</option>
+    </select>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: { type: [Number, String], default: 10 },
+});
+
+defineEmits(['update:modelValue']);
+</script>