@dejwcake/craftable 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dejwcake/craftable",
-  "version": "2.1.1",
+  "version": "2.2.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/BackButton.vue

@@ -0,0 +1,17 @@
+<template>
+    <a class="btn btn-sm btn-outline-secondary" :href="url">
+        <i class="fa fa-arrow-left"></i> {{ translations.back }}
+    </a>
+</template>
+
+<script setup>
+defineProps({
+    url: { type: String, required: true },
+    translations: {
+        type: Object,
+        default: () => ({
+            back: 'Back',
+        }),
+    },
+});
+</script>

package/src/components/listing/ShowButton.vue

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

package/src/composables/useResponsiveColumns.js

@@ -1,5 +1,22 @@
 import { ref, watch, onBeforeUnmount } from 'vue';
 
+/**
+ * Container width in pixels mapped to the highest column priority still shown at that width.
+ *
+ * | container width | highest priority shown |
+ * |-----------------|------------------------|
+ * | 1800 and up     | 10                     |
+ * | 1600 - 1799     | 8                      |
+ * | 1400 - 1599     | 6                      |
+ * | 1200 - 1399     | 4                      |
+ * | 1000 - 1199     | 3                      |
+ * | 800 - 999       | 2                      |
+ * | below 800       | 0                      |
+ *
+ * The width measured is the container's `contentRect`, so padding is already excluded: a card in a
+ * 1512px window measures around 1190px and lands on the `1000 - 1199` row, where only priorities
+ * 0 to 3 are shown.
+ */
 const defaultBreakpoints = [
     { minWidth: 1800, maxPriority: 10 },
     { minWidth: 1600, maxPriority: 8 },
@@ -10,6 +27,23 @@ const defaultBreakpoints = [
     { minWidth: 0, maxPriority: 0 },
 ];
 
+/**
+ * Hides lower-importance columns as a listing's container narrows.
+ *
+ * Each column is given a **priority**, not a position: a lower number survives a narrower
+ * container, and columns sharing a number appear and disappear together. Numbering columns
+ * `0, 1, 2, …` in the order they are written therefore ties importance to layout by accident — the
+ * fifth column onwards is hidden on an ordinary laptop, because a priority above 3 needs a
+ * container wider than 1200px. Assign the numbers deliberately instead.
+ *
+ * @param {import('vue').Ref<HTMLElement|null>} containerRef element whose width drives the choice.
+ * @param {{ breakpoints?: Array<{ minWidth: number, maxPriority: number }> }} [options]
+ *   `breakpoints` replaces the defaults above; order them widest first.
+ * @returns {{
+ *   isColumnWithinPriority: (priority: number) => boolean,
+ *   isColumnVisible: (priority: number) => boolean,
+ * }}
+ */
 export function useResponsiveColumns(containerRef, options = {}) {
     const breakpoints = options.breakpoints || defaultBreakpoints;
     const currentMaxPriority = ref(10);
@@ -54,9 +88,23 @@ export function useResponsiveColumns(containerRef, options = {}) {
         }
     });
 
-    function isColumnVisible(priority) {
+    /**
+     * Whether a column of this priority is shown at the container's current width.
+     *
+     * @param {number} priority lower survives a narrower container; see the breakpoint table.
+     * @returns {boolean}
+     */
+    function isColumnWithinPriority(priority) {
         return priority <= currentMaxPriority.value;
     }
 
-    return { isColumnVisible };
+    return {
+        isColumnWithinPriority,
+        /**
+         * The original name for `isColumnWithinPriority`, and still fully supported -- every
+         * existing listing calls it, and the generator emits it. It reads like a column index,
+         * which the argument is not.
+         */
+        isColumnVisible: isColumnWithinPriority,
+    };
 }

package/src/index.js

@@ -22,8 +22,10 @@ export { default as BulkCheckboxRow } from './components/listing/BulkCheckboxRow
 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 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 BackButton } from './components/BackButton.vue';
 export { default as ConfirmModal } from './components/ConfirmModal.vue';
 export { default as ToggleSwitch } from './components/listing/ToggleSwitch.vue';
 export { default as ReadOnlySwitch } from './components/ReadOnlySwitch.vue';