inertia-bootstrap-forms 2.1.20 → 3.0.0

package/src/FormLabel.vue

@@ -1,34 +1,34 @@
 <script>
-import {defineComponent} from "vue";
+import { computed, defineComponent, inject, onMounted, ref } from 'vue';
 
 export default defineComponent({
-  props: {
-    default: false,
-    required: false,
-  },
-  emits: ['update:modelValue'],
-  mounted() {
-    const sibling = this.$el.nextElementSibling;
-    if (sibling) {
-      this.forId = sibling.id || sibling.querySelector('[id]')?.id || null;
-    }
-  },
-  data() {
-    return {
-      forId: null,
-    };
-  },
-})
+    name: 'FormLabel',
+    props: {
+        /** id of the control. Detected automatically inside <FormField> or from the next element. */
+        for: { type: String, default: null },
+        required: { type: Boolean, default: false },
+    },
+    setup(props) {
+        const ctx = inject('formField', null);
+        const el = ref(null);
+        const detected = ref(null);
+
+        onMounted(() => {
+            if (props.for || ctx?.id) return;
+            const sibling = el.value?.nextElementSibling;
+            if (sibling) detected.value = sibling.id || sibling.querySelector('[id]')?.id || null;
+        });
+
+        const target = computed(() => props.for || ctx?.id || detected.value || undefined);
+
+        return { el, target };
+    },
+});
 </script>
 
 <template>
-  <label class="mb-2 d-block" :for="forId">
-    <slot/>
-    <span class="text-danger" v-if="required">*</span>
-  </label>
+    <label ref="el" class="form-label" :for="target">
+        <slot />
+        <span v-if="required" class="fg-danger" aria-hidden="true"> *</span>
+    </label>
 </template>
-<style scoped>
-label {
-  cursor: pointer;
-}
-</style>

package/src/GroupControl.vue

@@ -1,67 +1,69 @@
 <script>
-import {computed, defineComponent, inject} from "vue";
+import { computed, defineComponent, inject, onMounted, provide, ref } from 'vue';
 
 export default defineComponent({
+    name: 'GroupControl',
     props: {
-        name: {
-            type: String,
-            required: true,
-        },
+        /** Key of the object / array inside the form that holds the grouped values. */
+        name: { type: String, required: true },
+        /** Explicit item index (repeaters). When omitted it is detected from the DOM position. */
+        index: { type: [Number, String], default: null },
     },
-    setup(props, context) {
-        let form = inject('form', {
-            errors: {},
-            getID(name) {
-                return name;
-            }
+    setup(props) {
+        const form = inject('form', null);
+        const groupEl = ref(null);
+        const detected = ref('0');
+
+        const index = computed(() => (props.index !== null ? String(props.index) : detected.value));
+
+        onMounted(() => {
+            if (props.index !== null) return;
+            const siblings = groupEl.value?.parentNode?.parentNode?.querySelectorAll('.form-control-group');
+            siblings?.forEach((item, i) => {
+                if (item === groupEl.value) detected.value = String(i);
+            });
         });
 
-        return {form};
-    },
-    provide() {
-        return {
-            group: computed(() => this)
-        }
-    },
-    mounted() {
-        this.$refs.groupEl?.parentNode?.parentNode.querySelectorAll('.form-control-group').forEach((item, index) => {
-            if(item === this.$refs.groupEl){
-                this.groupID = (index).toString();
-            }
-        })
-    },
-    methods: {
-        setData(fieldName, value) {
-            if (!this.form[this.name]) {
-                this.form[this.name] = {};
-            }
-            if (this.groupID && this.form[this.name]?.length >= 0) {
-                if(!this.form[this.name][this.groupID]){
-                    this.form[this.name][this.groupID] = {};
+        const api = {
+            get name() {
+                return props.name;
+            },
+            get index() {
+                return index.value;
+            },
+            getData(field) {
+                const container = form?.value?.[props.name];
+                if (container === null || container === undefined) return null;
+                if (Array.isArray(container)) return container[Number(index.value)]?.[field] ?? null;
+                return container[field] ?? null;
+            },
+            setData(field, value) {
+                const f = form?.value;
+                if (!f) return;
+
+                if (f[props.name] === null || f[props.name] === undefined) {
+                    f[props.name] = props.index !== null ? [] : {};
                 }
-                this.form[this.name][this.groupID][fieldName] = value;
-            }else{
-                this.form[this.name][fieldName] = value;
-            }
 
-        },
-        getData(fieldName) {
-            if (this.groupID && this.form[this.name]?.length >= 0) {
-                return this.form[this.name][this.groupID]?.[fieldName] || null;
-            }else{
-                return this.form[this.name][fieldName];
-            }
-        }
-    },
-    data() {
-        return {
-            groupID: '0',
+                if (Array.isArray(f[props.name])) {
+                    const i = Number(index.value);
+                    if (!f[props.name][i]) f[props.name][i] = {};
+                    f[props.name][i][field] = value;
+                } else {
+                    f[props.name][field] = value;
+                }
+            },
         };
-    }
-})
+
+        provide('group', computed(() => api));
+
+        return { groupEl, index };
+    },
+});
 </script>
+
 <template>
-    <div class="form-control-group" :data-name="name" :data-group-id="groupID" ref="groupEl">
-        <slot/>
+    <div ref="groupEl" class="form-control-group" :data-name="name" :data-group-id="index">
+        <slot />
     </div>
 </template>

package/src/LocationInput.vue

@@ -1,84 +1,91 @@
 <script>
-import "leaflet/dist/leaflet.css";
-import "./css/location.scss";
-import {LMap, LTileLayer, LMarker} from "@vue-leaflet/vue-leaflet";
-import {defineComponent, inject} from "vue";
+import { computed, defineAsyncComponent, defineComponent, onMounted, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
 
+const LMap = defineAsyncComponent(() => import('@vue-leaflet/vue-leaflet').then((m) => m.LMap));
+const LTileLayer = defineAsyncComponent(() => import('@vue-leaflet/vue-leaflet').then((m) => m.LTileLayer));
+const LMarker = defineAsyncComponent(() => import('@vue-leaflet/vue-leaflet').then((m) => m.LMarker));
+
+/**
+ * Leaflet map picker. The value is `{ lat, lng }`.
+ * Import `leaflet/dist/leaflet.css` in your application.
+ */
 export default defineComponent({
-  name: 'LocationInput',
-  components: {
-    LMap, LTileLayer, LMarker
-  },
-  props: {
-    name: {
-      type: String,
-      default: 'location',
-      required: false,
-    },
-    disabled: {
-      type: [Boolean, String],
-      default: false,
-    },
-    readonly: {
-      type: [Boolean, String],
-      default: false,
+    name: 'LocationInput',
+    components: { LMap, LTileLayer, LMarker },
+    emits: ['update:modelValue', 'change', 'ready'],
+    props: {
+        ...fieldProps,
+        name: { type: String, default: 'location' },
+        /** Initial map centre when there is no value yet. */
+        center: { type: Object, default: () => ({ lat: 35.69293, lng: 51.36372 }) },
+        zoom: { type: Number, default: 13 },
+        height: { type: [Number, String], default: 300 },
+        tileUrl: { type: String, default: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
+        attribution: { type: String, default: '&copy; OpenStreetMap contributors' },
     },
-    modelValue: Object,
-  },
-  setup(props) {
-    let form = inject('form');
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const ready = ref(false);
+        const zoomLevel = ref(props.zoom);
 
-    if (form === undefined) {
-      form = {
-        errors: {},
-        zoom: 8,
-        center: [47.41322, -1.219482],
-        getID(name) {
-        }
-      };
-    }
+        onMounted(() => {
+            ready.value = true; // Leaflet touches `window`, so it is rendered on the client only
+        });
+
+        const marker = computed(() => {
+            const v = field.model.value;
+            return v?.lat !== undefined && v?.lat !== null && v?.lng !== undefined && v?.lng !== null
+                ? { lat: Number(v.lat), lng: Number(v.lng) }
+                : null;
+        });
 
-    return {form};
-  },
-  methods: {
-    setMarker(event) {
-      if(this.readonly) return;
+        const mapCenter = computed(() => marker.value ?? props.center);
+        const locked = computed(() => props.readonly || field.isDisabled.value);
 
-      this.marker = {
-        lat: event?.latlng?.lat || event?.target?._latlng?.lat,
-        lng: event?.latlng?.lng || event?.target?._latlng?.lng,
-      };
+        watch(() => props.zoom, (z) => (zoomLevel.value = z));
 
-      this.$emit('update:modelValue', this.marker);
-      this.form[this.name] = this.marker;
-    }
-  },
-  data() {
-    return {
-      zoom: 13,
-      marker: {
-        lat: this.modelValue?.lat || this.form[this.name]?.lat || null,
-        lng: this.modelValue?.lng || this.form[this.name]?.lng || null,
-      },
-      center: {
-        lat: this.modelValue?.lat || this.form[this.name]?.lat || 35.69293,
-        lng: this.modelValue?.lng || this.form[this.name]?.lng || 51.36372,
-      },
-    };
-  },
+        function setMarker(event) {
+            if (locked.value) return;
+            const latlng = event?.latlng ?? event?.target?._latlng;
+            if (!latlng) return;
 
-})
+            const next = { lat: latlng.lat, lng: latlng.lng };
+            field.model.value = next;
+            field.emitChange(next, event);
+        }
+
+        return {
+            ...field,
+            ready,
+            zoomLevel,
+            marker,
+            mapCenter,
+            locked,
+            setMarker,
+            heightCss: computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height)),
+        };
+    },
+});
 </script>
+
 <template>
-  <div class="location-map-container"
-       :class="{disabled: disabled || form.processing, 'is-invalid': form?.errors[name] !== undefined}">
-    <l-map ref="map" v-model:zoom="zoom" :useGlobalLeaflet="false" :center="this.center" @click="setMarker">
-      <l-tile-layer
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          layer-type="base"
-          name="OpenStreetMap"
-      ></l-tile-layer>
-      <LMarker :lat-lng="marker" v-if="marker" :draggable="(!readonly && !disabled)" @dragend="setMarker"/>
-    </l-map>
-  </div>
+    <div
+        class="location-map-container position-relative overflow-hidden"
+        :class="{ disabled: locked, 'is-invalid': isInvalid }"
+        :id="inputId"
+        :style="{ width: '100%', height: heightCss }"
+    >
+        <l-map
+            v-if="ready"
+            v-model:zoom="zoomLevel"
+            :use-global-leaflet="false"
+            :center="mapCenter"
+            @click="setMarker"
+            @ready="$emit('ready', $event)"
+        >
+            <l-tile-layer :url="tileUrl" :attribution="attribution" layer-type="base" name="OpenStreetMap" />
+            <l-marker v-if="marker" :lat-lng="marker" :draggable="!locked" @dragend="setMarker" />
+        </l-map>
+    </div>
 </template>

package/src/MobileInput.vue

@@ -1,23 +1,31 @@
 <script>
-import TextInput from "./TextInput.vue";
-import {defineComponent} from "vue";
+import { defineComponent } from 'vue';
+import TextInput from './TextInput.vue';
+import { useI18n } from './i18n.js';
 
+/** Thin wrapper around TextInput (type="tel"). All TextInput props and events are forwarded. */
 export default defineComponent({
-    components: {
-        TextInput
-    },
+    name: 'MobileInput',
+    components: { TextInput },
     props: {
-        name: {
-            type: String,
-            default: 'mobile',
-            required: true,
-        },
+        name: { type: String, default: 'mobile' },
+        placeholder: { type: String, default: null },
+        locale: { type: String, default: null },
+    },
+    setup(props) {
+        const { t } = useI18n(() => props.locale);
+        return { t };
     },
-})
+});
 </script>
+
 <template>
     <TextInput
+        type="tel"
+        inputmode="tel"
+        autocomplete="tel"
+        class="form-control-mobile fanum"
         :name="name"
-        placeholder="موبایل خود را وارد کنید"
-        type="tel" class="form-control-mobile fanum"/>
+        :placeholder="placeholder ?? t('mobile.placeholder')"
+    />
 </template>