@dejwcake/craftable 2.2.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dejwcake/craftable",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "This is a frontend dependency for Craftable. Craftable is a Laravel-based open-source toolkit for building administration interfaces.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/listing/BulkOperationsBar.vue

@@ -13,9 +13,20 @@
 
     <span class="float-end pe-2">
         <slot>
-            <button class="btn btn-sm btn-danger px-4" @click="onBulkDelete()">
-                {{ translations.delete_btn }}
-            </button>
+            <span class="d-inline-flex gap-2">
+                <button v-if="onBulkDelete" class="btn btn-sm btn-danger px-4" @click="onBulkDelete()">
+                    <i class="fa fa-trash me-1"></i>
+                    {{ translations.delete_btn }}
+                </button>
+                <button v-if="onBulkForceDelete" class="btn btn-sm btn-dark px-4" @click="onBulkForceDelete()">
+                    <i class="fa fa-eraser me-1"></i>
+                    {{ translations.force_delete_btn }}
+                </button>
+                <button v-if="onBulkRestore" class="btn btn-sm btn-success text-white px-4" @click="onBulkRestore()">
+                    <i class="fa fa-trash-arrow-up me-1"></i>
+                    {{ translations.restore_btn }}
+                </button>
+            </span>
         </slot>
     </span>
 </template>
@@ -27,7 +38,9 @@ defineProps({
     loading: { type: Boolean, default: false },
     onCheckAll: { type: Function, required: true },
     onUncheckAll: { type: Function, required: true },
-    onBulkDelete: { type: Function, required: true },
+    onBulkDelete: { type: Function, default: null },
+    onBulkForceDelete: { type: Function, default: null },
+    onBulkRestore: { type: Function, default: null },
     translations: {
         type: Object,
         default: () => ({
@@ -35,6 +48,8 @@ defineProps({
             check_all_items: 'Check all items',
             uncheck_all_items: 'Uncheck all items',
             delete_btn: 'Delete',
+            force_delete_btn: 'Delete permanently',
+            restore_btn: 'Restore',
         }),
     },
 });

package/src/components/listing/ForceDeleteButton.vue

@@ -0,0 +1,57 @@
+<template>
+    <button
+        type="button"
+        class="btn btn-sm btn-dark"
+        :title="translations.force_delete_btn"
+        @click="showConfirm = true"
+    >
+        <i class="fa fa-eraser"></i>
+    </button>
+
+    <ConfirmModal
+        :show="showConfirm"
+        variant="danger"
+        :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: () => ({
+            force_delete_btn: 'Delete permanently',
+            confirm_title: 'Deletion',
+            confirm_text: 'Delete this item permanently? This cannot be undone.',
+            confirm_btn: 'Delete permanently',
+            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/RestoreButton.vue

@@ -0,0 +1,62 @@
+<template>
+    <span :title="disabled ? translations.not_restorable : translations.restore_btn">
+        <button
+            type="button"
+            class="btn btn-sm btn-success text-white"
+            :aria-label="disabled ? translations.not_restorable : translations.restore_btn"
+            :disabled="disabled"
+            @click="showConfirm = true"
+        >
+            <i class="fa fa-trash-arrow-up"></i>
+        </button>
+    </span>
+
+    <ConfirmModal
+        :show="showConfirm"
+        variant="success"
+        :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 },
+    disabled: { type: Boolean, default: false },
+    translations: {
+        type: Object,
+        default: () => ({
+            restore_btn: 'Restore',
+            not_restorable: 'This item cannot be restored, an item it belongs to is deleted.',
+            confirm_title: 'Restore',
+            confirm_text: 'Do you really want to restore this item?',
+            confirm_btn: 'Restore',
+            cancel_btn: 'Cancel',
+        }),
+    },
+});
+
+const emit = defineEmits(['restored']);
+
+const showConfirm = ref(false);
+
+function onConfirm() {
+    showConfirm.value = false;
+
+    axios.post(props.url).then(
+        (response) => {
+            notifySuccess(response.data.message);
+            emit('restored');
+        },
+        (error) => {
+            notifyError(error.response?.data?.message);
+        },
+    );
+}
+</script>

package/src/components/listing/ShowDeleted.vue

@@ -0,0 +1,28 @@
+<template>
+    <label class="d-inline-flex align-items-center gap-2 mb-0 text-nowrap text-reset">
+        <span class="form-check form-switch form-switch-inline mb-0">
+            <input
+                class="form-check-input"
+                type="checkbox"
+                role="switch"
+                :checked="modelValue"
+                @change="$emit('update:modelValue', $event.target.checked)"
+            />
+        </span>
+        {{ translations.show_deleted }}
+    </label>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: { type: Boolean, default: false },
+    translations: {
+        type: Object,
+        default: () => ({
+            show_deleted: 'Show deleted',
+        }),
+    },
+});
+
+defineEmits(['update:modelValue']);
+</script>

package/src/composables/useBaseListing.js

@@ -32,15 +32,18 @@ export function useBaseListing(props) {
     const bulkItems = reactive({});
     const bulkCheckingAllLoader = ref(false);
 
+    const defaultConfirmTranslations = {
+        confirm_title: 'Warning!',
+        confirm_text: 'Are you sure?',
+        confirm_btn: 'Yes, confirm',
+        cancel_btn: 'Cancel',
+    };
+
     const confirmModal = reactive({
         show: false,
         onConfirm: null,
-        translations: {
-            confirm_title: 'Warning!',
-            confirm_text: 'Are you sure?',
-            confirm_btn: 'Yes, confirm',
-            cancel_btn: 'Cancel',
-        },
+        variant: 'danger',
+        translations: { ...defaultConfirmTranslations },
     });
 
     // Update "now" every second
@@ -152,13 +155,14 @@ export function useBaseListing(props) {
         }
     }
 
-    function bulkDelete(url, trans = {}) {
-        const itemsToDelete = Object.keys(bulkItems).filter((key) => bulkItems[key]);
+    function bulkAction(url, trans = {}, variant = 'danger') {
+        const selectedItems = Object.keys(bulkItems).filter((key) => bulkItems[key]);
 
+        confirmModal.variant = variant;
         confirmModal.translations = {
-            ...confirmModal.translations,
+            ...defaultConfirmTranslations,
             ...trans,
-            confirm_text: (trans.confirm_text || 'Do you really want to delete :number selected items?').replace(
+            confirm_text: (trans.confirm_text || defaultConfirmTranslations.confirm_text).replace(
                 ':number',
                 clickedBulkItemsCount.value,
             ),
@@ -167,7 +171,7 @@ export function useBaseListing(props) {
             confirmModal.show = false;
             axios
                 .post(url, {
-                    ids: itemsToDelete,
+                    ids: selectedItems,
                 })
                 .then((response) => {
                     Object.keys(bulkItems).forEach((key) => delete bulkItems[key]);
@@ -181,6 +185,34 @@ export function useBaseListing(props) {
         confirmModal.show = true;
     }
 
+    function bulkDelete(url, trans = {}) {
+        bulkAction(url, {
+            ...trans,
+            confirm_text: trans.confirm_text || 'Do you really want to delete :number selected items?',
+        });
+    }
+
+    function bulkForceDelete(url, trans = {}) {
+        bulkAction(url, {
+            confirm_btn: 'Delete permanently',
+            ...trans,
+            confirm_text: trans.confirm_text || 'Delete :number selected items permanently? This cannot be undone.',
+        });
+    }
+
+    function bulkRestore(url, trans = {}) {
+        bulkAction(
+            url,
+            {
+                confirm_title: 'Restore',
+                confirm_btn: 'Restore',
+                ...trans,
+                confirm_text: trans.confirm_text || 'Do you really want to restore :number selected items?',
+            },
+            'success',
+        );
+    }
+
     function loadData(resetCurrentPage) {
         const options = {
             params: {
@@ -298,7 +330,10 @@ export function useBaseListing(props) {
         onBulkItemsClickedAll,
         onBulkItemsClickedAllWithPagination,
         onBulkItemsClickedAllUncheck,
+        bulkAction,
         bulkDelete,
+        bulkForceDelete,
+        bulkRestore,
         loadData,
         filter,
         resolveUrl,

package/src/index.js

@@ -25,6 +25,9 @@ export { default as ListingHeader } from './components/listing/ListingHeader.vue
 export { default as ShowButton } from './components/listing/ShowButton.vue';
 export { default as EditButton } from './components/listing/EditButton.vue';
 export { default as DeleteButton } from './components/listing/DeleteButton.vue';
+export { default as ForceDeleteButton } from './components/listing/ForceDeleteButton.vue';
+export { default as RestoreButton } from './components/listing/RestoreButton.vue';
+export { default as ShowDeleted } from './components/listing/ShowDeleted.vue';
 export { default as BackButton } from './components/BackButton.vue';
 export { default as ConfirmModal } from './components/ConfirmModal.vue';
 export { default as ToggleSwitch } from './components/listing/ToggleSwitch.vue';
@@ -61,7 +64,14 @@ export { default as ActivationError } from './auth/ActivationError.vue';
 export { default as TranslationListing } from './translation/TranslationListing.vue';
 
 // Utilities
-export { formatDate, formatDatetime, formatTime, nowInTimezone, dayjs } from './utils/dateFormatters.js';
+export {
+    formatDate,
+    formatDatetime,
+    formatTime,
+    formatDuration,
+    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';

package/src/utils/dateFormatters.js

@@ -23,6 +23,47 @@ export function formatTime(time, format = 'HH:mm') {
     return d.isValid() ? d.format(format) : '';
 }
 
+const SECONDS_IN_MINUTE = 60;
+const SECONDS_IN_HOUR = 3600;
+const SECONDS_IN_DAY = 86400;
+
+/**
+ * Formats a number of seconds as a compact duration, e.g. `359d 19h 1m 39s`.
+ *
+ * Zero-valued units are dropped, so an exact hour reads `2h` rather than `0d 2h 0m 0s`, and a
+ * duration of zero reads `0s`. `null`, `undefined`, negative and non-finite values (`NaN`,
+ * `Infinity`) return the placeholder, which lets a listing cell or detail row render a missing or
+ * invalid value without a guard at the call site.
+ *
+ * Deliberately plain arithmetic rather than dayjs's duration plugin: that plugin normalises a
+ * duration into years and months, so its `hours()` is the component of a year/month/day breakdown
+ * and does not line up with a total day count. Mixing the two reports 31,086,099 s as
+ * `359d 5h 1m 39s` instead of `359d 19h 1m 39s`.
+ *
+ * @param {number|null|undefined} seconds total seconds; fractions are floored.
+ * @param {string} [placeholder] returned for `null`, `undefined`, negative and non-finite values.
+ * @returns {string}
+ */
+export function formatDuration(seconds, placeholder = '—') {
+    if (seconds === null || seconds === undefined) {
+        return placeholder;
+    }
+
+    const total = Math.floor(seconds);
+    if (!Number.isFinite(total) || total < 0) {
+        return placeholder;
+    }
+
+    const parts = [
+        [Math.floor(total / SECONDS_IN_DAY), 'd'],
+        [Math.floor((total % SECONDS_IN_DAY) / SECONDS_IN_HOUR), 'h'],
+        [Math.floor((total % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE), 'm'],
+        [total % SECONDS_IN_MINUTE, 's'],
+    ].filter(([amount]) => amount > 0);
+
+    return parts.length === 0 ? '0s' : parts.map(([amount, unit]) => `${amount}${unit}`).join(' ');
+}
+
 export function nowInTimezone(tz = 'UTC', format = 'YYYY-MM-DD HH:mm:ss') {
     return dayjs().tz(tz).format(format);
 }