@dejwcake/craftable 0.1.9 → 2.0.0

package/src/ui/index.js

@@ -0,0 +1,99 @@
+export function initUI() {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initUIHandlers);
+    } else {
+        initUIHandlers();
+    }
+}
+
+function initUIHandlers() {
+    const sidebar = document.getElementById('sidebar');
+    let backdrop = null;
+
+    // Spinner buttons
+    document.querySelectorAll('.btn-spinner').forEach((btn) => {
+        btn.addEventListener('click', (e) => {
+            if (!(e.shiftKey || e.ctrlKey || e.metaKey)) {
+                btn.style.pointerEvents = 'none';
+                const icon = btn.querySelector('i');
+                if (icon) {
+                    icon.className = 'fa-solid fa-spinner fa-spin';
+                }
+            }
+        });
+    });
+
+    // Remove empty nav titles when no children there
+    document.querySelectorAll('.nav-title').forEach((title) => {
+        const next = title.nextElementSibling;
+        if (!next || !next.classList.contains('nav-item')) {
+            title.style.display = 'none';
+        }
+    });
+
+    // Sidebar: mobile show/hide toggle
+    function closeSidebar() {
+        if (!sidebar) return;
+        sidebar.classList.add('hide');
+        if (backdrop) {
+            backdrop.remove();
+            backdrop = null;
+        }
+    }
+
+    document.querySelectorAll('[data-coreui-toggle="sidebar"]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            if (!sidebar) return;
+            const isHidden = sidebar.classList.contains('hide');
+            if (isHidden) {
+                sidebar.classList.remove('hide');
+                // Create backdrop for mobile
+                backdrop = document.createElement('div');
+                backdrop.className = 'sidebar-backdrop fade show';
+                backdrop.addEventListener('click', closeSidebar);
+                document.body.appendChild(backdrop);
+            } else {
+                closeSidebar();
+            }
+        });
+    });
+
+    // Sidebar: desktop unfoldable (narrow) toggle
+    document.querySelectorAll('[data-coreui-toggle="unfoldable"]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            if (!sidebar) return;
+            sidebar.classList.toggle('sidebar-narrow-unfoldable');
+        });
+    });
+
+    // Dropdowns
+    document.querySelectorAll('[data-coreui-toggle="dropdown"]').forEach((toggle) => {
+        toggle.addEventListener('click', (e) => {
+            e.preventDefault();
+            const dropdown = toggle.closest('.dropdown');
+            if (!dropdown) return;
+            const menu = dropdown.querySelector('.dropdown-menu');
+            if (!menu) return;
+            const isOpen = menu.classList.contains('show');
+
+            // Close all other open dropdowns
+            document.querySelectorAll('.dropdown-menu.show').forEach((m) => m.classList.remove('show'));
+
+            if (!isOpen) {
+                menu.classList.add('show');
+            }
+        });
+    });
+
+    // Close dropdowns when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.dropdown')) {
+            document.querySelectorAll('.dropdown-menu.show').forEach((m) => m.classList.remove('show'));
+        }
+    });
+
+    // On mobile, sidebar starts hidden
+    if (sidebar && window.innerWidth < 992) {
+        sidebar.classList.add('hide');
+    }
+}

package/src/utils/ckeditorHelpers.js

@@ -0,0 +1,36 @@
+export function propagateImageWidths(html) {
+    if (!html) return html;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    let changed = false;
+    doc.querySelectorAll('figure').forEach((figure) => {
+        const width = figure.style.width;
+        if (!width) return;
+        const img = figure.querySelector('img');
+        if (img) {
+            img.style.width = width;
+            img.style.height = 'auto';
+            changed = true;
+        }
+    });
+    return changed ? doc.body.innerHTML : html;
+}
+
+export function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+        if (
+            source[key] &&
+            typeof source[key] === 'object' &&
+            !Array.isArray(source[key]) &&
+            target[key] &&
+            typeof target[key] === 'object' &&
+            !Array.isArray(target[key])
+        ) {
+            result[key] = deepMerge(target[key], source[key]);
+        } else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+}

package/src/utils/dateFnsLocale.js

@@ -0,0 +1,24 @@
+import { enUS } from 'date-fns/locale/en-US';
+
+let resolvedLocale = enUS;
+
+export function getDateFnsLocale() {
+    return resolvedLocale;
+}
+
+export async function initDateFnsLocale() {
+    const lang = document.documentElement.lang || 'en';
+    const map = {
+        sk: () => import('date-fns/locale/sk'),
+        cs: () => import('date-fns/locale/cs'),
+        en: () => import('date-fns/locale/en-US'),
+        de: () => import('date-fns/locale/de'),
+        fr: () => import('date-fns/locale/fr'),
+        es: () => import('date-fns/locale/es'),
+        pl: () => import('date-fns/locale/pl'),
+        hu: () => import('date-fns/locale/hu'),
+    };
+    const loader = map[lang] || map['en'];
+    const mod = await loader();
+    resolvedLocale = mod.default || mod[Object.keys(mod)[0]];
+}

package/src/utils/dateFormatters.js

@@ -0,0 +1,30 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
+
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export function formatDate(date, format = 'DD.MM.YYYY') {
+    const d = dayjs(date);
+    return d.isValid() ? d.format(format) : '';
+}
+
+export function formatDatetime(datetime, format = 'DD.MM.YYYY HH:mm') {
+    const d = dayjs(datetime);
+    return d.isValid() ? d.format(format) : '';
+}
+
+export function formatTime(time, format = 'HH:mm') {
+    // '2000-01-01' is here just because dayjs needs a date
+    const d = dayjs('2000-01-01 ' + time);
+    return d.isValid() ? d.format(format) : '';
+}
+
+export function nowInTimezone(tz = 'UTC', format = 'YYYY-MM-DD HH:mm:ss') {
+    return dayjs().tz(tz).format(format);
+}
+
+export { dayjs };

package/src/utils/mediaProps.js

@@ -0,0 +1,14 @@
+export const mediaCollectionDefaults = {
+    url: '',
+    collection: '',
+    maxNumberOfFiles: 1,
+    maxFileSizeInMb: 2,
+    acceptedFileTypes: undefined,
+    thumbnailWidth: 200,
+    uploadedMedia: [],
+};
+
+export const mediaCollectionProp = {
+    type: Object,
+    default: () => ({ ...mediaCollectionDefaults }),
+};

package/src/utils/notify.js

@@ -0,0 +1,22 @@
+import { notify } from '@kyvg/vue3-notification';
+
+const DEFAULT_SUCCESS_TITLE = 'Success!';
+const DEFAULT_SUCCESS_MESSAGE = 'Operation succeeded.';
+const DEFAULT_ERROR_TITLE = 'Error!';
+const DEFAULT_ERROR_MESSAGE = 'An error has occurred.';
+
+export function notifySuccess(message) {
+    notify({
+        type: 'success',
+        title: DEFAULT_SUCCESS_TITLE,
+        text: message || DEFAULT_SUCCESS_MESSAGE,
+    });
+}
+
+export function notifyError(message) {
+    notify({
+        type: 'error',
+        title: DEFAULT_ERROR_TITLE,
+        text: message || DEFAULT_ERROR_MESSAGE,
+    });
+}

package/dist/admin/Admin.js

@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-var Admin = {
-    el: '#app',
-    data: function data() {
-        return {
-            loading: false
-        };
-    },
-    mounted: function mounted() {
-        var _this = this;
-
-        // Add a loader request interceptor
-        axios.interceptors.request.use(function (config) {
-            _this.setLoading(true);
-            return config;
-        }, function (error) {
-            _this.setLoading(false);
-            return Promise.reject(error);
-        });
-
-        // Add a loader response interceptor
-        axios.interceptors.response.use(function (response) {
-            _this.setLoading(false);
-            return response;
-        }, function (error) {
-            _this.setLoading(false);
-            return Promise.reject(error);
-        });
-    },
-
-    methods: {
-        setLoading: function setLoading(value) {
-            this.loading = !!value;
-        }
-    }
-};
-
-exports.default = Admin;

package/dist/auth/Form.js

@@ -1,15 +0,0 @@
-'use strict';
-
-var _vue = require('vue');
-
-var _vue2 = _interopRequireDefault(_vue);
-
-var _BaseForm = require('../base-components/Form/BaseForm');
-
-var _BaseForm2 = _interopRequireDefault(_BaseForm);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-_vue2.default.component('auth-form', {
-    mixins: [_BaseForm2.default]
-});

package/dist/base-components/Form/BaseForm.js

@@ -1,392 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-require('./bootstrap');
-
-var _moment = require('moment');
-
-var _moment2 = _interopRequireDefault(_moment);
-
-var _vueTrumbowyg = require('vue-trumbowyg');
-
-var _vueTrumbowyg2 = _interopRequireDefault(_vueTrumbowyg);
-
-require('trumbowyg/dist/ui/trumbowyg.css');
-
-require('trumbowyg/dist/plugins/colors/trumbowyg.colors');
-
-require('trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.css');
-
-require('trumbowyg/dist/plugins/base64/trumbowyg.base64.min.js');
-
-require('trumbowyg/dist/plugins/upload/trumbowyg.upload.js');
-
-require('trumbowyg/dist/plugins/noembed/trumbowyg.noembed.js');
-
-require('trumbowyg/dist/plugins/pasteembed/trumbowyg.pasteembed.js');
-
-require('trumbowyg/dist/plugins/table/ui/trumbowyg.table.css');
-
-require('trumbowyg/dist/plugins/table/trumbowyg.table.js');
-
-require('../../overrides/trumbowyg.template');
-
-require('../../overrides/trumbowyg.reupload');
-
-require('../../overrides/trumbowyg.edit-embed-template');
-
-var _UserDetailTooltip = require('../Listing/components/UserDetailTooltip');
-
-var _UserDetailTooltip2 = _interopRequireDefault(_UserDetailTooltip);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-Vue.component('wysiwyg', _vueTrumbowyg2.default);
-
-var BaseForm = {
-  props: {
-    action: {
-      type: String,
-      required: true
-    },
-    locales: {
-      type: Array
-    },
-    defaultLocale: {
-      type: String,
-      default: function _default() {
-        return this.locales instanceof Array && this.locales.length > 0 ? this.locales[0] : '';
-      }
-    },
-    sendEmptyLocales: {
-      type: Boolean,
-      default: function _default() {
-        return true;
-      }
-    },
-    data: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    },
-    responsiveBreakpoint: {
-      type: Number,
-      default: 850
-    }
-  },
-  components: {
-    'user-detail-tooltip': _UserDetailTooltip2.default
-  },
-
-  created: function created() {
-    if (!!this.locales && this.locales.length > 0) {
-      var form = this.form;
-      // this.locales.map(function(l) {
-      //     if (!_.has(form, l)) {
-      //         _.set(form, l, {})
-      //     }
-      // })
-      this.currentLocale = this.defaultLocale;
-    }
-
-    //FIXME: now we can't add dynamic input in update type of form
-    if (!_.isEmpty(this.data)) {
-      this.form = this.data;
-    }
-
-    window.addEventListener('resize', this.onResize);
-  },
-
-  data: function data() {
-    var that = this;
-
-    return {
-      form: {},
-      wysiwygMedia: [],
-      mediaCollections: [],
-      isFormLocalized: false,
-      currentLocale: '',
-      submiting: false,
-      onSmallScreen: window.innerWidth < this.responsiveBreakpoint,
-      datePickerConfig: {
-        dateFormat: 'Y-m-d H:i:S',
-        altInput: true,
-        altFormat: 'd.m.Y',
-        locale: null
-      },
-      timePickerConfig: {
-        enableTime: true,
-        noCalendar: true,
-        time_24hr: true,
-        enableSeconds: true,
-        dateFormat: 'H:i:S',
-        altInput: true,
-        altFormat: 'H:i:S',
-        locale: null
-      },
-      datetimePickerConfig: {
-        enableTime: true,
-        time_24hr: true,
-        enableSeconds: true,
-        dateFormat: 'Y-m-d H:i:S',
-        altInput: true,
-        altFormat: 'd.m.Y H:i:S',
-        locale: null
-      },
-      wysiwygConfig: {
-        placeholder: 'Type a text here',
-        modules: {
-          toolbar: {
-            container: [[{ header: [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ color: [] }, { background: [] }], [{ align: [] }], ['link', 'image'], ['clean']]
-          }
-        }
-      },
-      mediaWysiwygConfig: {
-        autogrow: true,
-        imageWidthModalEdit: true,
-        btnsDef: {
-          image: {
-            dropdown: ['insertImage', 'upload', 'base64'],
-            ico: 'insertImage'
-          },
-          align: {
-            dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
-            ico: 'justifyLeft'
-          }
-        },
-        btns: [['formatting'], ['strong', 'em', 'del'], ['align'], ['unorderedList', 'orderedList', 'table'], ['foreColor', 'backColor'], ['link', 'noembed', 'image'], ['template'], ['fullscreen', 'viewHTML']],
-        plugins: {
-          upload: {
-            // https://alex-d.github.io/Trumbowyg/documentation/plugins/#plugin-upload
-            serverPath: '/admin/wysiwyg-media',
-            imageWidthModalEdit: true,
-            success: function success(data, trumbowyg, $modal, values) {
-              that.wysiwygMedia.push(data.mediaId);
-
-              function getDeep(object, propertyParts) {
-                var mainProperty = propertyParts.shift(),
-                    otherProperties = propertyParts;
-
-                if (object !== null) {
-                  if (otherProperties.length === 0) {
-                    return object[mainProperty];
-                  }
-
-                  if ((typeof object === 'undefined' ? 'undefined' : _typeof(object)) === 'object') {
-                    return getDeep(object[mainProperty], otherProperties);
-                  }
-                }
-                return object;
-              }
-
-              if (!!getDeep(data, trumbowyg.o.plugins.upload.statusPropertyName.split('.'))) {
-                var url = getDeep(data, trumbowyg.o.plugins.upload.urlPropertyName.split('.'));
-                trumbowyg.execCmd('insertImage', url, false, true);
-                var $img = $('img[src="' + url + '"]:not([alt])', trumbowyg.$box);
-                $img.attr('alt', values.alt);
-                if (trumbowyg.o.imageWidthModalEdit && parseInt(values.width) > 0) {
-                  $img.attr({
-                    width: values.width
-                  });
-                }
-                setTimeout(function () {
-                  trumbowyg.closeModal();
-                }, 250);
-                trumbowyg.$c.trigger('tbwuploadsuccess', [trumbowyg, data, url]);
-              } else {
-                trumbowyg.addErrorOnModalField($('input[type=file]', $modal), trumbowyg.lang[data.message]);
-                trumbowyg.$c.trigger('tbwuploaderror', [trumbowyg, data]);
-              }
-            }
-          },
-          reupload: {
-            success: function success(data, trumbowyg, $modal, values, $img) {
-              that.wysiwygMedia.push(data.mediaId);
-
-              $img.attr({
-                src: data.file
-              });
-              trumbowyg.execCmd('insertHTML');
-              setTimeout(function () {
-                trumbowyg.closeModal();
-              }, 250);
-              var url = getDeep(data, trumbowyg.o.plugins.upload.urlPropertyName.split('.'));
-              trumbowyg.$c.trigger('tbwuploadsuccess', [trumbowyg, data, url]);
-            }
-          }
-        }
-      }
-    };
-  },
-
-  computed: {
-    otherLocales: function otherLocales() {
-      var _this = this;
-
-      return this.locales.filter(function (x) {
-        return x != _this.defaultLocale;
-      });
-    },
-    showLocalizedValidationError: function showLocalizedValidationError() {
-      var _this2 = this;
-
-      // TODO ked sme neni na mobile, tak pozerat zo vsetkych
-      return this.otherLocales.some(function (lang) {
-        return _this2.errors.items.some(function (item) {
-          return item.field.endsWith('_' + lang) || item.field.startsWith(lang + '_');
-        });
-      });
-    }
-  },
-  filters: {
-    date: function date(date) {
-      var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD';
-
-      var date = (0, _moment2.default)(date);
-      return date.isValid() ? date.format(format) : "";
-    },
-    datetime: function datetime(_datetime) {
-      var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD HH:mm:ss';
-
-      var date = (0, _moment2.default)(_datetime);
-      return date.isValid() ? date.format(format) : "";
-    },
-    time: function time(_time) {
-      var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'HH:mm:ss';
-
-      // '2000-01-01' is here just because momentjs needs a date
-      var date = (0, _moment2.default)('2000-01-01 ' + _time);
-      return date.isValid() ? date.format(format) : "";
-    }
-  },
-  methods: {
-    getPostData: function getPostData() {
-      var _this3 = this;
-
-      if (this.mediaCollections) {
-        this.mediaCollections.forEach(function (collection, index, arr) {
-          if (_this3.form[collection]) {
-            console.warn("MediaUploader warning: Media input must have a unique name, '" + collection + "' is already defined in regular inputs.");
-          }
-
-          if (_this3.$refs[collection + '_uploader']) {
-            _this3.form[collection] = _this3.$refs[collection + '_uploader'].getFiles();
-          }
-        });
-      }
-      this.form['wysiwygMedia'] = this.wysiwygMedia;
-
-      return this.form;
-    },
-    onSubmit: function onSubmit() {
-      var _this4 = this;
-
-      return this.$validator.validateAll().then(function (result) {
-        if (!result) {
-          _this4.$notify({
-            type: 'error',
-            title: 'Error!',
-            text: 'The form contains invalid fields.'
-          });
-          return false;
-        }
-
-        var data = _this4.form;
-        if (!_this4.sendEmptyLocales) {
-          data = _.omit(_this4.form, _this4.locales.filter(function (locale) {
-            return _.isEmpty(_this4.form[locale]);
-          }));
-        }
-
-        _this4.submiting = true;
-
-        axios.post(_this4.action, _this4.getPostData()).then(function (response) {
-          return _this4.onSuccess(response.data);
-        }).catch(function (errors) {
-          return _this4.onFail(errors.response.data);
-        });
-      });
-    },
-    onSuccess: function onSuccess(data) {
-      this.submiting = false;
-      if (data.redirect) {
-        window.location.replace(data.redirect);
-      }
-    },
-    onFail: function onFail(data) {
-      this.submiting = false;
-      if (_typeof(data.errors) !== (typeof undefined === 'undefined' ? 'undefined' : _typeof(undefined))) {
-        var bag = this.$validator.errors;
-        bag.clear();
-        Object.keys(data.errors).map(function (key) {
-          var splitted = key.split('.', 2);
-          // we assume that first dot divides column and locale (TODO maybe refactor this and make it more general)
-          if (splitted.length > 1) {
-            bag.add({
-              field: splitted[0] + '_' + splitted[1],
-              msg: data.errors[key][0]
-            });
-          } else {
-            bag.add({
-              field: key,
-              msg: data.errors[key][0]
-            });
-          }
-        });
-        if (_typeof(data.message) === (typeof undefined === 'undefined' ? 'undefined' : _typeof(undefined))) {
-          this.$notify({
-            type: 'error',
-            title: 'Error!',
-            text: 'The form contains invalid fields.'
-          });
-        }
-      }
-      if (_typeof(data.message) !== (typeof undefined === 'undefined' ? 'undefined' : _typeof(undefined))) {
-        this.$notify({
-          type: 'error',
-          title: 'Error!',
-          text: data.message
-        });
-      }
-    },
-    getLocalizedFormDefaults: function getLocalizedFormDefaults() {
-      var object = {};
-      this.locales.forEach(function (currentValue, index, arr) {
-        object[currentValue] = null;
-      });
-      return object;
-    },
-    showLocalization: function showLocalization() {
-      this.isFormLocalized = true;
-      this.currentLocale = this.otherLocales[0];
-      $('.container-xl').addClass('width-auto');
-    },
-    hideLocalization: function hideLocalization() {
-      this.isFormLocalized = false;
-      $('.container-xl').removeClass('width-auto');
-    },
-    validate: function validate(event) {
-      this.$validator.errors.remove(event.target.name);
-    },
-    shouldShowLangGroup: function shouldShowLangGroup(locale) {
-      if (!this.onSmallScreen) {
-        if (this.defaultLocale == locale) return true;
-
-        return this.isFormLocalized && this.currentLocale == locale;
-      } else {
-        return this.currentLocale == locale;
-      }
-    },
-    onResize: function onResize() {
-      this.onSmallScreen = window.innerWidth < this.responsiveBreakpoint;
-    }
-  }
-};
-
-exports.default = BaseForm;