@dejwcake/craftable 0.1.9 → 2.0.0

package/src/components/form/CkeditorEditor.vue

@@ -0,0 +1,205 @@
+<template>
+    <div class="ck-editor-wrapper">
+        <ckeditor v-model="content" :editor="ClassicEditor" :config="editorConfig" />
+    </div>
+</template>
+
+<script setup>
+import { computed, toRaw } from 'vue';
+import {
+    ClassicEditor,
+    Essentials,
+    Bold,
+    Italic,
+    Underline,
+    Strikethrough,
+    Heading,
+    Paragraph,
+    Alignment,
+    List,
+    Link,
+    AutoLink,
+    Image,
+    ImageToolbar,
+    ImageCaption,
+    ImageStyle,
+    ImageResize,
+    ImageInsert,
+    ImageInsertViaUrl,
+    ImageUpload,
+    Table,
+    TableToolbar,
+    CodeBlock,
+    Code,
+    SourceEditing,
+    BlockQuote,
+    HorizontalLine,
+    Indent,
+    GeneralHtmlSupport,
+    Undo,
+    FileRepository,
+} from 'ckeditor5';
+import { Ckeditor } from '@ckeditor/ckeditor5-vue';
+import { propagateImageWidths, deepMerge } from '../../utils/ckeditorHelpers.js';
+const axios = window.axios;
+
+import 'ckeditor5/ckeditor5.css';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+    config: { type: Object, default: null },
+    uploadUrl: { type: String, default: '/admin/wysiwyg-media' },
+});
+
+const emit = defineEmits(['update:modelValue', 'media-uploaded']);
+
+const content = computed({
+    get: () => props.modelValue ?? '',
+    set: (val) => emit('update:modelValue', propagateImageWidths(val)),
+});
+
+function createUploadAdapterPlugin(editor) {
+    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+        return new CsrfUploadAdapter(loader, props.uploadUrl);
+    };
+}
+
+class CsrfUploadAdapter {
+    constructor(loader, url) {
+        this.loader = loader;
+        this.url = url;
+    }
+
+    upload() {
+        return this.loader.file.then((file) => {
+            const formData = new FormData();
+            formData.append('fileToUpload', file);
+
+            return axios
+                .post(this.url, formData, {
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                    onUploadProgress: (evt) => {
+                        if (evt.total) {
+                            this.loader.uploadTotal = evt.total;
+                            this.loader.uploaded = evt.loaded;
+                        }
+                    },
+                })
+                .then((response) => {
+                    const url = response.data.file || response.data.url || response.data;
+                    emit('media-uploaded', response.data);
+                    return { default: url };
+                });
+        });
+    }
+
+    abort() {}
+}
+
+const defaultConfig = {
+    licenseKey: 'GPL',
+    plugins: [
+        Essentials,
+        Bold,
+        Italic,
+        Underline,
+        Strikethrough,
+        Heading,
+        Paragraph,
+        Alignment,
+        List,
+        Link,
+        AutoLink,
+        Image,
+        ImageToolbar,
+        ImageCaption,
+        ImageStyle,
+        ImageResize,
+        ImageInsert,
+        ImageInsertViaUrl,
+        ImageUpload,
+        Table,
+        TableToolbar,
+        CodeBlock,
+        Code,
+        SourceEditing,
+        BlockQuote,
+        HorizontalLine,
+        Indent,
+        GeneralHtmlSupport,
+        Undo,
+        FileRepository,
+    ],
+    extraPlugins: [createUploadAdapterPlugin],
+    toolbar: {
+        items: [
+            'heading',
+            '|',
+            'bold',
+            'italic',
+            'underline',
+            'strikethrough',
+            '|',
+            'alignment',
+            '|',
+            'bulletedList',
+            'numberedList',
+            '|',
+            'blockQuote',
+            'horizontalLine',
+            '|',
+            'link',
+            'insertImage',
+            'insertTable',
+            '|',
+            'code',
+            'codeBlock',
+            '|',
+            'undo',
+            'redo',
+            '|',
+            'sourceEditing',
+        ],
+        shouldNotGroupWhenFull: true,
+    },
+    image: {
+        toolbar: [
+            'imageStyle:inline',
+            'imageStyle:block',
+            'imageStyle:side',
+            '|',
+            'toggleImageCaption',
+            'imageTextAlternative',
+            '|',
+            'resizeImage',
+        ],
+        resizeUnit: 'px',
+        resizeOptions: [
+            { name: 'resizeImage:original', value: null, label: 'Original' },
+            { name: 'resizeImage:200', value: '200', label: '200px' },
+            { name: 'resizeImage:400', value: '400', label: '400px' },
+            { name: 'resizeImage:600', value: '600', label: '600px' },
+        ],
+    },
+    table: {
+        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
+    },
+    htmlSupport: {
+        allow: [{ name: /.*/, attributes: true, classes: true, styles: true }],
+    },
+    heading: {
+        options: [
+            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+            { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+            { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
+        ],
+    },
+};
+
+const editorConfig = computed(() => {
+    if (!props.config) return defaultConfig;
+    return deepMerge(defaultConfig, toRaw(props.config));
+});
+</script>

package/src/components/form/FormCheckbox.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <div class="col-md-9 col-xl-8 offset-md-3">
+            <div class="form-check">
+                <input
+                    :id="name"
+                    class="form-check-input"
+                    type="checkbox"
+                    :checked="modelValue"
+                    :name="name"
+                    @change="$emit('update:modelValue', $event.target.checked)"
+                />
+                <label class="form-check-label" :for="name">{{ label }}</label>
+            </div>
+            <div v-if="error" class="invalid-feedback d-block form-text">{{ error }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: { type: Boolean, default: false },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    error: { type: String, default: '' },
+});
+
+defineEmits(['update:modelValue']);
+</script>

package/src/components/form/FormDatePicker.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <div class="input-group flex-nowrap">
+                <span class="input-group-text"><i class="fa" :class="icon"></i></span>
+                <VueDatePicker
+                    v-bind="config"
+                    :id="name"
+                    :model-value="modelValue"
+                    class="datepicker-input"
+                    :class="{ 'is-invalid': error }"
+                    :name="name"
+                    :placeholder="placeholder || label"
+                    :time-config="{
+                        enableTimePicker: config.enableTimePicker ?? true,
+                        enableSeconds: config.enableSeconds ?? false,
+                    }"
+                    :formats="{ input: config.format }"
+                    auto-apply
+                    :locale="config.locale"
+                    :input-attrs="{ hideInputIcon: true, clearable: false }"
+                    @update:model-value="$emit('update:modelValue', $event)"
+                ></VueDatePicker>
+            </div>
+            <div v-if="error" class="invalid-feedback d-block form-text">{{ error }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { VueDatePicker } from '@vuepic/vue-datepicker';
+
+defineProps({
+    modelValue: { type: [String, Date, Object], default: '' },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    error: { type: String, default: '' },
+    config: { type: Object, required: true },
+    icon: { type: String, default: 'fa-calendar' },
+    placeholder: { type: String, default: '' },
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<style scoped>
+.datepicker-input {
+    flex: 1 1 0;
+    min-width: 0;
+}
+</style>

package/src/components/form/FormEmail.vue

@@ -0,0 +1,17 @@
+<template>
+    <FormInput v-bind="$props" type="email" @update:model-value="$emit('update:modelValue', $event)" />
+</template>
+
+<script setup>
+import FormInput from './FormInput.vue';
+
+defineProps({
+    modelValue: { type: [String, Number], default: '' },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    error: { type: String, default: '' },
+    placeholder: { type: String, default: '' },
+});
+
+defineEmits(['update:modelValue']);
+</script>

package/src/components/form/FormInput.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <input
+                :id="name"
+                :type="type"
+                :value="modelValue"
+                class="form-control"
+                :class="{ 'is-invalid': error }"
+                :name="name"
+                :placeholder="placeholder || label"
+                @input="$emit('update:modelValue', $event.target.value)"
+            />
+            <div v-if="error" class="invalid-feedback form-text">{{ error }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: { type: [String, Number], default: '' },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    error: { type: String, default: '' },
+    type: { type: String, default: 'text' },
+    placeholder: { type: String, default: '' },
+});
+
+defineEmits(['update:modelValue']);
+</script>

package/src/components/form/FormLocalizedInput.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name + '_' + locales[0]" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <div :class="{ 'd-flex gap-2': isFormLocalized }">
+                <div
+                    v-for="locale in locales"
+                    v-show="shouldShowLangGroup(locale)"
+                    :key="locale"
+                    :class="{ 'flex-fill': isFormLocalized }"
+                >
+                    <input
+                        :id="name + '_' + locale"
+                        type="text"
+                        :value="modelValue[locale]"
+                        class="form-control"
+                        :class="{ 'is-invalid': errors[name + '_' + locale] }"
+                        :name="name + '_' + locale"
+                        :placeholder="isFormLocalized ? locale.toUpperCase() : label"
+                        @input="onInput(locale, $event.target.value)"
+                    />
+                    <div v-if="errors[name + '_' + locale]" class="invalid-feedback d-block form-text">
+                        {{ errors[name + '_' + locale] }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    modelValue: { type: Object, required: true },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    errors: { type: Object, default: () => ({}) },
+    locales: { type: Array, required: true },
+    shouldShowLangGroup: { type: Function, required: true },
+    isFormLocalized: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function onInput(locale, value) {
+    emit('update:modelValue', { ...props.modelValue, [locale]: value });
+}
+</script>

package/src/components/form/FormLocalizedWysiwyg.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name + '_' + locales[0]" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <div :class="{ 'd-flex gap-2': isFormLocalized }">
+                <div
+                    v-for="locale in locales"
+                    v-show="shouldShowLangGroup(locale)"
+                    :key="locale"
+                    :class="{ 'flex-fill localized-editor': isFormLocalized }"
+                >
+                    <CkeditorEditor
+                        :id="name + '_' + locale"
+                        :model-value="modelValue[locale]"
+                        :name="name + '_' + locale"
+                        :upload-url="uploadUrl"
+                        v-bind="config ? { config } : {}"
+                        @update:model-value="onInput(locale, $event)"
+                    ></CkeditorEditor>
+                    <div v-if="errors[name + '_' + locale]" class="invalid-feedback d-block form-text">
+                        {{ errors[name + '_' + locale] }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import CkeditorEditor from './CkeditorEditor.vue';
+
+const props = defineProps({
+    modelValue: { type: Object, required: true },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    errors: { type: Object, default: () => ({}) },
+    locales: { type: Array, required: true },
+    shouldShowLangGroup: { type: Function, required: true },
+    isFormLocalized: { type: Boolean, default: false },
+    config: { type: Object, default: null },
+    uploadUrl: { type: String, default: '/admin/wysiwyg-media' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function onInput(locale, value) {
+    emit('update:modelValue', { ...props.modelValue, [locale]: value });
+}
+</script>
+
+<style scoped>
+.localized-editor {
+    min-width: 0;
+}
+</style>

package/src/components/form/FormLocalizedWysiwygSimple.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name + '_' + locales[0]" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <div :class="{ 'd-flex gap-2': isFormLocalized }">
+                <div
+                    v-for="locale in locales"
+                    v-show="shouldShowLangGroup(locale)"
+                    :key="locale"
+                    :class="{ 'flex-fill localized-editor': isFormLocalized }"
+                >
+                    <TiptapEditor
+                        :id="name + '_' + locale"
+                        :model-value="modelValue[locale]"
+                        :name="name + '_' + locale"
+                        :upload-url="uploadUrl"
+                        v-bind="config ? { config } : {}"
+                        @update:model-value="onInput(locale, $event)"
+                    ></TiptapEditor>
+                    <div v-if="errors[name + '_' + locale]" class="invalid-feedback d-block form-text">
+                        {{ errors[name + '_' + locale] }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import TiptapEditor from './TiptapEditor.vue';
+
+const props = defineProps({
+    modelValue: { type: Object, required: true },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    errors: { type: Object, default: () => ({}) },
+    locales: { type: Array, required: true },
+    shouldShowLangGroup: { type: Function, required: true },
+    isFormLocalized: { type: Boolean, default: false },
+    config: { type: Object, default: null },
+    uploadUrl: { type: String, default: '/admin/wysiwyg-media' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function onInput(locale, value) {
+    emit('update:modelValue', { ...props.modelValue, [locale]: value });
+}
+</script>
+
+<style scoped>
+.localized-editor {
+    min-width: 0;
+}
+</style>

package/src/components/form/FormMultiSelect.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <Multiselect
+                :model-value="modelValue"
+                :class="{ 'is-invalid': error }"
+                :placeholder="placeholder"
+                :options="options"
+                :multiple="true"
+                :label="optionLabel"
+                :track-by="trackBy"
+                open-direction="bottom"
+                @update:model-value="$emit('update:modelValue', $event)"
+            ></Multiselect>
+            <div v-if="error" class="invalid-feedback d-block form-text">{{ error }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Multiselect from 'vue-multiselect';
+
+defineProps({
+    modelValue: { type: Array, default: () => [] },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    error: { type: String, default: '' },
+    options: { type: Array, required: true },
+    placeholder: { type: String, default: '' },
+    trackBy: { type: String, default: 'id' },
+    optionLabel: { type: String, default: 'name' },
+});
+
+defineEmits(['update:modelValue']);
+</script>

package/src/components/form/FormPasswordConfirm.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label for="password" class="col-md-3 col-form-label text-md-end">{{ translations.password }}</label>
+        <div class="col-md-9 col-xl-8">
+            <input
+                id="password"
+                type="password"
+                :value="password"
+                class="form-control"
+                :class="{ 'is-invalid': passwordError }"
+                name="password"
+                :placeholder="translations.password"
+                @input="$emit('update:password', $event.target.value)"
+            />
+            <div v-if="passwordError" class="invalid-feedback form-text">{{ passwordError }}</div>
+        </div>
+    </div>
+
+    <div class="mb-3 row align-items-center">
+        <label for="password_confirmation" class="col-md-3 col-form-label text-md-end">{{
+            translations.password_repeat
+        }}</label>
+        <div class="col-md-9 col-xl-8">
+            <input
+                id="password_confirmation"
+                type="password"
+                :value="passwordConfirmation"
+                class="form-control"
+                :class="{ 'is-invalid': confirmationError }"
+                name="password_confirmation"
+                :placeholder="translations.password"
+                @input="$emit('update:passwordConfirmation', $event.target.value)"
+            />
+            <div v-if="confirmationError" class="invalid-feedback form-text">{{ confirmationError }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    password: { type: String, default: '' },
+    passwordConfirmation: { type: String, default: '' },
+    passwordError: { type: String, default: '' },
+    confirmationError: { type: String, default: '' },
+    translations: { type: Object, required: true },
+});
+
+defineEmits(['update:password', 'update:passwordConfirmation']);
+</script>

package/src/components/form/FormSelect.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <Multiselect
+                :model-value="modelValue"
+                :class="{ 'is-invalid': error }"
+                :placeholder="placeholder"
+                :options="options"
+                :label="optionLabel || undefined"
+                :track-by="trackBy || undefined"
+                open-direction="bottom"
+                @update:model-value="$emit('update:modelValue', $event)"
+            ></Multiselect>
+            <div v-if="error" class="invalid-feedback d-block form-text">{{ error }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Multiselect from 'vue-multiselect';
+
+defineProps({
+    modelValue: { type: [String, Number, Array, Object], default: '' },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    error: { type: String, default: '' },
+    options: { type: Array, required: true },
+    placeholder: { type: String, default: '' },
+    trackBy: { type: String, default: '' },
+    optionLabel: { type: String, default: '' },
+});
+
+defineEmits(['update:modelValue']);
+</script>

package/src/components/form/FormSubmit.vue

@@ -0,0 +1,13 @@
+<template>
+    <button type="submit" class="btn btn-primary submit-btn" :disabled="submitting">
+        <i class="fa" :class="submitting ? 'fa-spinner' : 'fa-download'"></i>
+        {{ label }}
+    </button>
+</template>
+
+<script setup>
+defineProps({
+    submitting: { type: Boolean, default: false },
+    label: { type: String, default: 'Save' },
+});
+</script>

package/src/components/form/FormTextarea.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <textarea
+                :id="name"
+                :value="modelValue"
+                class="form-control"
+                :class="{ 'is-invalid': error }"
+                :name="name"
+                :placeholder="placeholder || label"
+                :rows="rows"
+                @input="$emit('update:modelValue', $event.target.value)"
+            ></textarea>
+            <div v-if="error" class="invalid-feedback form-text">{{ error }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: { type: String, default: '' },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    error: { type: String, default: '' },
+    placeholder: { type: String, default: '' },
+    rows: { type: [Number, String], default: 3 },
+});
+
+defineEmits(['update:modelValue']);
+</script>