@omnitend/dashboard-for-laravel 0.33.0 → 0.34.0

package/resources/js/components/charts/DXBarChart.vue

@@ -14,57 +14,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import { Bar } from "vue-chartjs";
-import {
-  registerCharts,
-  baseOptions,
-  applyPalette,
-  mergeOptions,
-  type ChartValueFormat,
-} from "./chartTheme";
+import { registerCharts } from "./chartTheme";
+import { useThemedChart, type ThemedChartProps } from "./useThemedChart";
 
 registerCharts();
 
-interface Props {
-  /** X-axis category labels. */
-  labels: string[];
-  /** Chart.js datasets. Colours are themed when a dataset omits them. */
-  datasets: any[];
-  /** Chart.js options; deep-merged over the themed defaults. */
-  options?: Record<string, any>;
-  /** Format value-axis ticks and tooltips. */
-  valueFormat?: ChartValueFormat;
-  /** Currency symbol for valueFormat: "currency" (default "£"). */
-  currencySymbol?: string;
-  /** Locale for number formatting. */
-  locale?: string;
-  /** Show the legend (default: only when there is more than one dataset). */
-  showLegend?: boolean;
-}
-
 // `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the
 // `?? datasets.length > 1` default can actually fire when it isn't passed.
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ThemedChartProps<"bar">>(), {
   currencySymbol: "£",
   showLegend: undefined,
 });
 
-const chartData = computed(() => ({
-  labels: props.labels,
-  datasets: applyPalette(props.datasets, "bar", props.labels.length),
-}));
-
-const mergedOptions = computed(() =>
-  mergeOptions(
-    baseOptions({
-      valueFormat: props.valueFormat,
-      currencySymbol: props.currencySymbol,
-      locale: props.locale,
-      showLegend: props.showLegend ?? props.datasets.length > 1,
-      hasValueAxis: true,
-    }),
-    props.options ?? {},
-  ),
-);
+const { chartData, mergedOptions } = useThemedChart("bar", props);
 </script>

package/resources/js/components/charts/DXLineChart.vue

@@ -14,57 +14,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import { Line } from "vue-chartjs";
-import {
-  registerCharts,
-  baseOptions,
-  applyPalette,
-  mergeOptions,
-  type ChartValueFormat,
-} from "./chartTheme";
+import { registerCharts } from "./chartTheme";
+import { useThemedChart, type ThemedChartProps } from "./useThemedChart";
 
 registerCharts();
 
-interface Props {
-  /** X-axis category labels. */
-  labels: string[];
-  /** Chart.js datasets. Colours are themed when a dataset omits them. */
-  datasets: any[];
-  /** Chart.js options; deep-merged over the themed defaults. */
-  options?: Record<string, any>;
-  /** Format value-axis ticks and tooltips. */
-  valueFormat?: ChartValueFormat;
-  /** Currency symbol for valueFormat: "currency" (default "£"). */
-  currencySymbol?: string;
-  /** Locale for number formatting. */
-  locale?: string;
-  /** Show the legend (default: only when there is more than one dataset). */
-  showLegend?: boolean;
-}
-
 // `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the
 // `?? datasets.length > 1` default can actually fire when it isn't passed.
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ThemedChartProps<"line">>(), {
   currencySymbol: "£",
   showLegend: undefined,
 });
 
-const chartData = computed(() => ({
-  labels: props.labels,
-  datasets: applyPalette(props.datasets, "line", props.labels.length),
-}));
-
-const mergedOptions = computed(() =>
-  mergeOptions(
-    baseOptions({
-      valueFormat: props.valueFormat,
-      currencySymbol: props.currencySymbol,
-      locale: props.locale,
-      showLegend: props.showLegend ?? props.datasets.length > 1,
-      hasValueAxis: true,
-    }),
-    props.options ?? {},
-  ),
-);
+const { chartData, mergedOptions } = useThemedChart("line", props);
 </script>

package/resources/js/components/charts/useThemedChart.ts

@@ -0,0 +1,69 @@
+import { computed, type ComputedRef } from "vue";
+import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
+import {
+    baseOptions,
+    applyPalette,
+    mergeOptions,
+    type ChartValueFormat,
+} from "./chartTheme";
+
+/**
+ * Shared props for the value-axis chart wrappers (`DXBarChart`, `DXLineChart`).
+ * `DXBarChart` and `DXLineChart` differ ONLY in the chart.js component they
+ * render and the palette kind — everything else (theming, option-merge,
+ * legend-default) is identical, and lived duplicated in both SFCs (#135).
+ */
+export interface ThemedChartProps<TType extends "bar" | "line"> {
+    /** X-axis category labels. */
+    labels: string[];
+    /** Chart.js datasets. Colours are themed when a dataset omits them. */
+    datasets: ChartDataset<TType>[];
+    /** Chart.js options; deep-merged over the themed defaults. */
+    options?: ChartOptions<TType>;
+    /** Format value-axis ticks and tooltips. */
+    valueFormat?: ChartValueFormat;
+    /** Currency symbol for valueFormat: "currency" (default "£"). */
+    currencySymbol?: string;
+    /** Locale for number formatting. */
+    locale?: string;
+    /** Show the legend (default: only when there is more than one dataset). */
+    showLegend?: boolean;
+}
+
+/**
+ * The themed-chart body shared by `DXBarChart` and `DXLineChart`: applies the
+ * data-viz palette to un-coloured datasets and deep-merges the consumer's
+ * `options` over the dashboard-friendly defaults. Pass the reactive `props`
+ * object (property access stays reactive inside the computeds).
+ */
+export function useThemedChart<TType extends "bar" | "line">(
+    type: TType,
+    props: ThemedChartProps<TType>,
+): {
+    chartData: ComputedRef<ChartData<TType>>;
+    mergedOptions: ComputedRef<ChartOptions<TType>>;
+} {
+    const chartData = computed(
+        () =>
+            ({
+                labels: props.labels,
+                datasets: applyPalette(props.datasets, type, props.labels.length),
+            }) as ChartData<TType>,
+    );
+
+    const mergedOptions = computed(
+        () =>
+            mergeOptions(
+                baseOptions({
+                    valueFormat: props.valueFormat,
+                    currencySymbol: props.currencySymbol,
+                    locale: props.locale,
+                    showLegend: props.showLegend ?? props.datasets.length > 1,
+                    hasValueAxis: true,
+                }),
+                props.options ?? {},
+            ) as ChartOptions<TType>,
+    );
+
+    return { chartData, mergedOptions };
+}

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

@@ -0,0 +1,114 @@
+<!--
+  @component (internal — not exported)
+  The choice control family for DXField: `select` (plain or `searchable`),
+  `radio`, and `checkbox-group`. Extracted from DXField (#135) unchanged. These
+  share the "no native readonly" convention (read-only is expressed as
+  `disabled`, hence the pre-merged `disabled` + `controlProps`). The parent
+  DXField still owns the value/options/guards and the `setValue` coercion; this
+  component only renders the control and emits the edited value up.
+
+  Plain-text `autocomplete` (a text input + datalist) stays in DXField itself,
+  with the text-family controls, because it uses the native-readonly guard path
+  rather than this disabled-only convention.
+-->
+<template>
+    <!-- Searchable select: type to filter a long option list, while the model
+         keeps the option's VALUE (an id), not the typed text. -->
+    <template v-if="field.type === 'select' && field.searchable">
+        <DAutocomplete
+            v-if="optionsReady"
+            :model-value="modelValue"
+            :options="options"
+            :placeholder="field.placeholder"
+            :required="field.required"
+            :state="state"
+            :disabled="disabled"
+            open-on-focus
+            v-bind="controlProps"
+            @update:model-value="emit('update:modelValue', $event)"
+        />
+        <!-- BAutocomplete resolves the input's display text from the model AT
+             MOUNT and doesn't re-derive it when `options` arrive later, so an
+             async list would leave the raw id showing ("51" instead of
+             "Waitrose") — and a long list is exactly the case that loads async.
+             Hold the control until the options are in. -->
+        <DFormInput v-else placeholder="Loading…" disabled />
+    </template>
+
+    <!-- Select (sync or async options) -->
+    <DFormSelect
+        v-else-if="field.type === 'select'"
+        :model-value="modelValue"
+        :required="field.required"
+        :options="options"
+        :state="state"
+        :disabled="disabled"
+        v-bind="controlProps"
+        @update:model-value="emit('update:modelValue', $event)"
+    />
+
+    <!-- Radio group -->
+    <DFormRadioGroup
+        v-else-if="field.type === 'radio'"
+        :model-value="modelValue"
+        :options="options"
+        :required="field.required"
+        :state="state"
+        :disabled="disabled"
+        v-bind="controlProps"
+        @update:model-value="emit('update:modelValue', $event)"
+    />
+
+    <!-- Checkbox group: "pick any of N" — the model is an ARRAY of the checked
+         option values (default the field to []). -->
+    <DFormCheckboxGroup
+        v-else
+        :model-value="modelValue"
+        :options="options"
+        :state="state"
+        :disabled="disabled"
+        v-bind="controlProps"
+        @update:model-value="emit('update:modelValue', $event)"
+    />
+</template>
+
+<script setup lang="ts">
+import DFormSelect from "../base/DFormSelect.vue";
+import DFormRadioGroup from "../base/DFormRadioGroup.vue";
+import DFormCheckboxGroup from "../base/DFormCheckboxGroup.vue";
+import DFormInput from "../base/DFormInput.vue";
+import DAutocomplete from "../base/DAutocomplete.vue";
+import type { FieldDefinition, FieldOption } from "../../types";
+
+interface Props {
+    /** Field definition (type select/radio/checkbox-group + `searchable`). */
+    field: FieldDefinition;
+
+    /** Current model value. */
+    modelValue: any;
+
+    /** Resolved options (async-loaded or static). */
+    options?: FieldOption[];
+
+    /** Validation state passed to the control. */
+    state?: boolean | null;
+
+    /** Pre-merged disabled state (`isDisabled || isReadonly || isPlaintext`). */
+    disabled?: boolean;
+
+    /** Escape-hatch control props, already guard-merged by DXField. */
+    controlProps?: Record<string, any>;
+
+    /**
+     * Whether async options have resolved (a searchable select must not render
+     * before its options load, or it shows the raw id instead of the label).
+     */
+    optionsReady?: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    (event: "update:modelValue", value: any): void;
+}>();
+</script>