@omnitend/dashboard-for-laravel 0.19.0 → 0.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

package/resources/css/theme.scss

@@ -91,6 +91,19 @@ $input-focus-box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 // Gray-300) text inputs. Share the input border colour across all controls.
 $form-check-input-border: 1px solid $input-border-color;
 
+// Bigger check/radio boxes (Bootstrap's 1em default reads small next to the
+// theme's inputs and is a fiddly touch target). Drive it through Bootstrap's own
+// `$form-check-input-width` — NOT a raw `.form-check-input { width }` override —
+// so the container's `padding-left` and the input's negative `margin-left` (both
+// derived from `$form-check-padding-start`) track the larger box. Overriding just
+// the CSS width left the padding at `1em + .5em`, which the ~20px box then filled
+// almost entirely, collapsing the box↔label gap to ~1px (cramped/flush). The
+// explicit padding-start keeps a real gap and avoids a rem+em unit mix in
+// Bootstrap's default `$form-check-input-width + .5em`. Switches are unaffected
+// (they use the independent `$form-switch-*` variables).
+$form-check-input-width: 1.25rem;
+$form-check-padding-start: $form-check-input-width + 0.5rem;
+
 // ----------------------------------------------------------------------------
 // Cards
 // ----------------------------------------------------------------------------
@@ -193,13 +206,6 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   );
 }
 
-// Bigger check/radio boxes — Bootstrap's 1em default reads small next to the
-// theme's inputs and is a fiddly touch target.
-.form-check-input {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 // Horizontal ("label-left") forms: a compact settings-form rhythm, with the
 // label + control top-aligned so a checkbox/switch sits on the label's first
 // line rather than floating above it (the label column carries a top offset to

package/resources/js/components/base/DAutocomplete.vue

@@ -68,4 +68,26 @@ defineOptions({
   --bs-btn-active-color: var(--bs-body-color);
   flex: 0 0 auto;
 }
+
+/*
+  The clear affordance renders as Bootstrap's `.btn-close` — a bold, filled ✕
+  that reads as a heavy black mark against a light field (and is noisy when
+  several autocompletes sit in a row, e.g. a table's column filters). Scale it
+  down via `font-size` (btn-close sizes both its box and its background SVG in
+  `em`, so this shrinks it proportionally without clipping) and rest it at a
+  lower opacity so it's a quiet clear affordance that only asserts on
+  hover/focus. Matches the softened trigger above.
+*/
+.d-autocomplete :deep(.b-autocomplete-clear.btn-close) {
+  font-size: 0.8em;
+  opacity: 0.4;
+}
+
+.d-autocomplete :deep(.b-autocomplete-clear.btn-close:hover) {
+  opacity: 0.7;
+}
+
+.d-autocomplete :deep(.b-autocomplete-clear.btn-close:focus) {
+  opacity: 0.9;
+}
 </style>

package/resources/js/components/base/DFormSelect.vue

@@ -1,14 +1,112 @@
-<script setup lang="ts">
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BFormSelect.
+ *
+ * Adds one behaviour BVN lacks: a `select` option whose value is `null`
+ * round-trips correctly. BVN renders each option's value as a plain HTML
+ * `value` attribute, so when that value is `null` Vue omits the attribute and
+ * the browser falls back to using the option's *text* as its DOM value — a
+ * model bound to `null` then matches no option and the select renders blank.
+ *
+ * We map a `null` option value (and a `null` model) to a private string
+ * sentinel so BVN renders a real value attribute, while keeping the consumer's
+ * model and emitted value as `null`. Legacy Bootstrap-Vue (BS4) handled this;
+ * BVN does not. (Radios likely need the same treatment — see #81.)
+ */
+<script setup lang="ts" generic="T = unknown">
 import { BFormSelect } from "bootstrap-vue-next";
-import { useSlots } from "vue";
+import { computed, useSlots } from "vue";
+
+// Mirrors the shapes BVN's BFormSelect accepts per option (primitive, object, or
+// group). Only object options can carry a `null` value.
+export type OptionItem = string | number | boolean | Record<string, unknown>;
+
+export interface Props<TValue = unknown> {
+  modelValue?: TValue | TValue[] | null;
+  options?: readonly OptionItem[];
+  /** Key on object options that holds the value (BVN default: "value"). */
+  valueField?: string;
+  /** Key on object options that holds nested options / groups (BVN default: "options"). */
+  optionsField?: string;
+}
+
+// A stable private value that stands in for a `null` option/model. Chosen to be
+// vanishingly unlikely to collide with a real option value.
+const NULL_SENTINEL = "__dfl_null_option_sentinel__";
+
+const props = withDefaults(defineProps<Props<T>>(), {
+  valueField: "value",
+  optionsField: "options",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: T | T[] | null];
+}>();
 
 const slots = useSlots();
+
+const encodeValue = (value: unknown): unknown =>
+  value === null ? NULL_SENTINEL : value;
+
+const decodeValue = (value: unknown): unknown =>
+  value === NULL_SENTINEL ? null : value;
+
+const isPlainOptionObject = (option: unknown): option is Record<string, unknown> =>
+  typeof option === "object" && option !== null && !Array.isArray(option);
+
+// Replace any option whose resolved value is `null` with the sentinel. Recurses
+// into option groups. Primitive options (string/number/boolean) can't be null.
+const encodeOptions = (options: readonly OptionItem[]): OptionItem[] =>
+  options.map((option) => {
+    if (!isPlainOptionObject(option)) {
+      return option;
+    }
+
+    const nested = option[props.optionsField];
+    if (Array.isArray(nested)) {
+      return { ...option, [props.optionsField]: encodeOptions(nested) };
+    }
+
+    if (option[props.valueField] === null) {
+      return { ...option, [props.valueField]: NULL_SENTINEL };
+    }
+
+    return option;
+  });
+
+const encodedOptions = computed<OptionItem[] | undefined>(() =>
+  props.options === undefined ? undefined : encodeOptions(props.options),
+);
+
+const encodedModel = computed<unknown>(() => {
+  const model = props.modelValue;
+  if (Array.isArray(model)) {
+    return model.map(encodeValue);
+  }
+  return encodeValue(model);
+});
+
+const onUpdateModelValue = (value: unknown): void => {
+  const decoded = Array.isArray(value) ? value.map(decodeValue) : decodeValue(value);
+  emit("update:modelValue", decoded as T | T[] | null);
+};
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <template>
-  <BFormSelect v-bind="$attrs">
-    <template v-for="(_, name) in slots" :key="name" #[name]>
-      <slot :name="name" />
+  <BFormSelect
+    v-bind="$attrs"
+    :model-value="encodedModel"
+    :options="encodedOptions"
+    :value-field="valueField"
+    :options-field="optionsField"
+    @update:model-value="onUpdateModelValue"
+  >
+    <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
     </template>
   </BFormSelect>
 </template>

package/resources/js/components/extended/DXTable.vue

@@ -1126,14 +1126,27 @@ watch(() => props.filters, (newFilters, oldFilters) => {
     }
 }, { deep: true });
 
-// Watch apiUrl changes to reset filter cache (prevents stale dropdown options)
+// Watch apiUrl changes to reset filter cache and refetch. The api-url isn't part
+// of BTable's provider context, so an api-url-only change doesn't re-invoke the
+// provider on its own — without this the table keeps showing the previous url's
+// rows until some other trigger (sort, per-page, create/edit/delete) fires.
 watch(() => props.apiUrl, (newUrl, oldUrl) => {
     if (newUrl !== oldUrl && isProviderMode.value) {
-        // Clear cached filter values and pagination when API endpoint changes
+        // Clear cached filter values and pagination when API endpoint changes.
+        // The next provider call will request fresh filter values.
         apiFilterValues.value = {};
         apiPaginationMeta.value = null;
         apiError.value = null;
-        // Next provider call will request fresh filter values
+        // A url change is a fresh dataset — go back to page 1. If we were past
+        // page 1, resetting the page re-invokes the provider on its own (so the
+        // out-of-range page can't linger); if we were already on page 1 the prop
+        // doesn't change, so refresh() forces the refetch. Exactly one fetch
+        // either way.
+        const wasOnFirstPage = apiCurrentPage.value === 1;
+        apiCurrentPage.value = 1;
+        if (wasOnFirstPage) {
+            refresh();
+        }
     }
 });
 
@@ -1382,8 +1395,14 @@ const handleBusyChange = (busy: boolean) => {
 // Debounce timer for filter changes
 let filterDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 
-const handlePerPageChange = (newPerPage: number | string) => {
-    const perPageNum = typeof newPerPage === 'string' ? parseInt(newPerPage, 10) : newPerPage;
+// DFormSelect's model can be null/array (it mirrors BVN's BFormSelect), but the
+// per-page selector only ever emits a numeric-string scalar; narrow defensively.
+const handlePerPageChange = (newPerPage: number | string | null | (number | string)[]) => {
+    const rawPerPage = Array.isArray(newPerPage) ? newPerPage[0] : newPerPage;
+    if (rawPerPage === null || rawPerPage === undefined) {
+        return;
+    }
+    const perPageNum = typeof rawPerPage === 'string' ? parseInt(rawPerPage, 10) : rawPerPage;
 
     // Update internal state if not using external perPage
     if (props.perPage === undefined) {