@omnitend/dashboard-for-laravel 0.19.2 → 0.21.0

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

@@ -0,0 +1,153 @@
+<!--
+  @component
+  DXSwitch — a "filled box" toggle switch.
+
+  An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized
+  like a `.form-control` with the label on the left and the toggle on the right,
+  colour-coding its state (a neutral box when off, a filled primary box when on).
+  Used standalone or, internally, by `DXField`'s `switch` field type so a form
+  switch and a lone switch share one look.
+
+  Usage:
+  ```vue
+  <DXSwitch v-model="isCurrent" label="Product is current" />
+  ```
+
+  For a form field, prefer a `DXField`/`DXForm` `type: 'switch'`; reach for
+  `DXSwitch` directly when you want the styled toggle outside a form. Pass a
+  `label` prop for simple text, or the default slot for richer label content.
+-->
+<template>
+  <div class="dx-switch" :class="{ 'dx-switch--on': isOn }">
+    <DFormCheckbox v-model="model" switch v-bind="$attrs">
+      <!--
+        @slot Label content shown beside the toggle. Falls back to the contextual
+        text / `label` prop. Scoped with the current on-state so a caller can vary
+        rich content by state; DXField passes a richer label element here.
+        @binding {boolean} on Whether the switch is currently on.
+      -->
+      <slot :on="isOn"><span>{{ displayText }}</span></slot>
+    </DFormCheckbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import DFormCheckbox from "../base/DFormCheckbox.vue";
+
+interface Props {
+  /** Whether the switch is on. */
+  modelValue?: boolean;
+  /** Static text beside the toggle; the fallback when no contextual text applies. */
+  label?: string;
+  /** Text shown when on — overrides `label` in the on state (e.g. "Product is current"). */
+  textWhenTrue?: string;
+  /** Text shown when off — overrides `label` in the off state (e.g. "Product is not current"). */
+  textWhenFalse?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const isOn = computed(() => props.modelValue);
+
+// A switch (unlike a checkbox) can say what each state *means*: prefer the
+// state-specific text, falling back to the static `label`. Ignored when the
+// default slot supplies its own content.
+const displayText = computed(() => {
+  const contextual = isOn.value ? props.textWhenTrue : props.textWhenFalse;
+  return contextual ?? props.label ?? "";
+});
+
+// Proxy the v-model so the underlying bvn checkbox's update re-emits as this
+// component's `update:modelValue`. Expects a real boolean — callers that hold a
+// truthy non-boolean (e.g. a Laravel-serialised `1`) should normalise first;
+// DXField does this before binding.
+const model = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit("update:modelValue", value),
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<style scoped>
+/* A compact "filled box" toggle, sized to its content — it doesn't stretch to
+   fill the form row — but matching standard input height so it lines up with
+   sibling text/select fields. Colour-codes its state: a neutral box when off, a
+   filled primary box when on. The label sits on the left and the toggle on the
+   right. Renders the underlying `.form-check` (from the switch checkbox) as the
+   box. `justify-content: space-between` on a full-width box used to leave a wide
+   unclickable gap between the label and the toggle (only the tiny toggle itself
+   was a real click target); shrinking the box to fit its content removes that
+   dead zone entirely. Uses block-level `flex` (not `inline-flex`) so the box
+   stays shrink-to-fit yet still takes its own line: an inline-level box let a
+   following `<small class="form-text">` hint flow inline beside it instead of
+   dropping below the control like every other field type (#79).
+
+   Scoped `:deep()` anchored on the plain `.dx-switch` root, so the scope-id
+   reliably reaches the bvn-rendered `.form-check` (see the scoped-deep-styles
+   guard test and CLAUDE.md). */
+.dx-switch :deep(.form-check) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: fit-content;
+  max-width: 100%; /* wrap/ellipsize rather than overflow a narrow field */
+  min-height: var(--dx-input-height, calc(1.5em + 0.75rem + 2px)); /* match .form-control height */
+  margin: 0;
+  /* Override Bootstrap `.form-switch`'s 2.5em left padding for the floated input. */
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  background-color: var(--bs-body-bg);
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+/* Label on the left, toggle on the right (DOM order is input then label). */
+.dx-switch :deep(.form-check-label) {
+  order: 1;
+  margin: 0;
+  color: var(--bs-secondary-color);
+  cursor: pointer;
+  transition: color 0.15s ease-in-out;
+}
+
+.dx-switch :deep(.form-check-input) {
+  order: 2;
+  flex-shrink: 0;
+  /* Override `.form-switch`'s negative left margin now that we're flex-laid-out. */
+  margin: 0;
+  cursor: pointer;
+}
+
+/* On-state: filled primary. Green is reserved for success semantics, so a
+   generic "on" toggle uses the brand action colour, matching the base switch,
+   checkboxes and radios. */
+.dx-switch--on :deep(.form-check) {
+  background-color: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary);
+}
+
+.dx-switch--on :deep(.form-check-label) {
+  color: var(--bs-primary-text-emphasis);
+  font-weight: 500;
+}
+
+.dx-switch--on :deep(.form-check-input:checked) {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.dx-switch--on :deep(.form-check-input:focus) {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+}
+</style>

package/resources/js/components/extended/dxFieldContext.ts

@@ -0,0 +1,14 @@
+import type { ComputedRef, InjectionKey } from "vue";
+
+/**
+ * Lets `DXField` forward its `info-popover` slot to the `DXFieldLabel` it
+ * renders — at any of its several label sites — without repeating the forward
+ * at each one. The provided value is a render function for the popover body, or
+ * `null` when the field has no `info-popover` slot.
+ *
+ * Optional: a `DXFieldLabel` used standalone (no `DXField` ancestor) injects the
+ * default `null` and falls back to its own `popover` slot / `info` text.
+ */
+export const dxFieldInfoPopoverKey: InjectionKey<
+    ComputedRef<(() => unknown) | null>
+> = Symbol("dxFieldInfoPopover");

package/resources/js/composables/useForm.ts

@@ -293,9 +293,16 @@ export function useForm<TData extends Record<string, any>>(
                         sendPayload as Record<string, unknown>,
                         { signal: options?.signal },
                     )
-                    : await api[sendMethod]<TResponse>(url, sendPayload, {
-                        signal: options?.signal,
-                    });
+                    : sendMethod === "delete"
+                        // A record is deleted by its URL — don't submit the form
+                        // fields as a request body. Passing the payload here would
+                        // send the whole model on every delete.
+                        ? await api.delete<TResponse>(url, undefined, {
+                            signal: options?.signal,
+                        })
+                        : await api[sendMethod]<TResponse>(url, sendPayload, {
+                            signal: options?.signal,
+                        });
 
             state.recentlySuccessful = true;
             setTimeout(() => (state.recentlySuccessful = false), 1500);

package/resources/js/index.ts

@@ -9,6 +9,7 @@ export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
 export { default as DXForm } from "./components/extended/DXForm.vue";
 export { default as DXField } from "./components/extended/DXField.vue";
 export { default as DXFieldLabel } from "./components/extended/DXFieldLabel.vue";
+export { default as DXSwitch } from "./components/extended/DXSwitch.vue";
 export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
 export { default as DXBarChart } from "./components/charts/DXBarChart.vue";
 export { default as DXLineChart } from "./components/charts/DXLineChart.vue";

package/resources/js/types/index.ts

@@ -165,7 +165,10 @@ export interface FieldDefinition {
      * Longer help text revealed in a popover from a small info affordance
      * on the field's label (on hover/focus). Complements `hint` (which is
      * always-visible muted text below the control). May be a function of
-     * the model. For rich content, use the `#info` slot instead.
+     * the model. Plain text only — for a rich popover body (lists, bold,
+     * paragraphs) use the `#info-popover(<key>)` slot. Note the separate
+     * `#info(<key>)` slot renders an always-visible block below the control,
+     * not popover content.
      */
     info?: MaybeFn<string>;
 

package/resources/js/utils/api.ts

@@ -173,9 +173,26 @@ class ApiClient {
 
     async delete<T = unknown>(
         url: string,
-        options: Omit<RequestOptions, "method"> = {},
+        data: any = undefined,
+        options: Omit<RequestOptions, "method" | "body"> = {},
     ) {
-        return this.request<T>(url, { ...options, method: "DELETE" });
+        // Consistent (url, data, options) signature with post/put/patch so the
+        // third argument is always the request options (e.g. `{ signal }`) — it
+        // used to be the second, so `useForm.submit`'s uniform call spread the
+        // form payload into the fetch config and dropped the abort signal.
+        // DELETE bodies are legal but unusual: only send one when data is given
+        // (a record is deleted by its URL — `useForm.delete()` sends none).
+        const body =
+            data === undefined || data === null
+                ? undefined
+                : data instanceof FormData
+                  ? data
+                  : JSON.stringify(data);
+        return this.request<T>(url, {
+            ...options,
+            method: "DELETE",
+            ...(body !== undefined ? { body } : {}),
+        });
     }
 }