inertia-bootstrap-forms 2.1.20 → 3.0.0

package/src/PasswordInput.vue

@@ -1,23 +1,157 @@
 <script>
-import TextInput from "./TextInput.vue";
-import {defineComponent} from "vue";
+import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
+import TextInput from './TextInput.vue';
+import FormAdornInput from './FormAdornInput.vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useBsInstance } from './composables/useBsInstance.js';
+import { useI18n } from './i18n.js';
 
+const STRENGTH_MESSAGES = {
+  en: { weak: 'Weak', fair: 'Fair', good: 'Good', strong: 'Strong' },
+  fa: { weak: 'ضعیف', fair: 'متوسط', good: 'خوب', strong: 'قوی' },
+};
+
+/**
+ * Password field.
+ *  - `toggle`   adds a show / hide button (Bootstrap 6 form-adorn)
+ *  - `strength` adds the Bootstrap 6 strength meter under the field (optional)
+ *
+ * Every other prop / listener (placeholder, size, autocomplete, @change, …) is forwarded to the input.
+ */
 export default defineComponent({
-    components: {
-        TextInput
-    },
-    props: {
-        name: {
-            type: String,
-            default: 'password',
-            required: true,
+  name: 'PasswordInput',
+  components: { TextInput, FormAdornInput },
+  inheritAttrs: false,
+  emits: ['toggle', 'strength'],
+  props: {
+    ...fieldProps,
+    name: { type: String, default: 'password' },
+    placeholder: { type: String, default: null },
+    /** Show a "reveal password" button. */
+    toggle: { type: Boolean, default: false },
+    /** Show the password strength meter. */
+    strength: { type: Boolean, default: false },
+    /** Show the text feedback ("Weak", "Strong", …) under the meter. */
+    strengthText: { type: Boolean, default: true },
+    /** Override the labels: { weak, fair, good, strong }. */
+    strengthMessages: { type: Object, default: null },
+    /** Bootstrap Strength options: { minLength, thresholds: [2, 4, 6], weights, scorer(password) => number }. */
+    strengthOptions: { type: Object, default: () => ({}) },
+    size: { type: String, default: null },
+    locale: { type: String, default: null },
+  },
+  setup(props, { emit, expose }) {
+    const { t, locale } = useI18n(() => props.locale);
+    // read-only access to the value (so the meter follows form resets / external changes)
+    const field = useField(props, () => {});
+
+    const root = ref(null);
+    const meter = ref(null);
+    const visible = ref(false);
+
+    const messages = computed(() => ({
+      ...(STRENGTH_MESSAGES[locale.value] || STRENGTH_MESSAGES.en),
+      ...(props.strengthMessages || {}),
+    }));
+
+    function toggleVisible() {
+      visible.value = !visible.value;
+      emit('toggle', visible.value);
+    }
+
+    let offs = [];
+    const { instance, create } = useBsInstance(
+        'Strength',
+        () => (props.strength ? meter.value : null),
+        () => ({
+          ...props.strengthOptions,
+          input: root.value?.querySelector('input'),
+          messages: messages.value,
+        }),
+        {
+          onCreate(inst, el) {
+            const handler = (e) => emit('strength', e.strength ?? null, e.score ?? 0);
+            el.addEventListener('strengthChange.bs.strength', handler);
+            offs.push(() => el.removeEventListener('strengthChange.bs.strength', handler));
+          },
+          onDestroy() {
+            offs.forEach((off) => off());
+            offs = [];
+          },
+        }
+    );
+
+    // the plugin only listens to typing: re-evaluate when the value changes from the outside (reset, server data)
+    watch(
+        () => field.model.value,
+        () => nextTick(() => instance.value?.evaluate())
+    );
+
+    // things the plugin reads when it is created
+    watch(
+        () => [props.strength, props.toggle, props.strengthText, messages.value, props.strengthOptions],
+        async () => {
+          await nextTick();
+          if (props.strength) create();
         },
-    },
-})
+        { deep: true }
+    );
+
+    expose({ strength: () => instance.value?.getStrength?.() ?? null });
+
+    // props that are forwarded to the real input component
+    const forwarded = computed(() => ({
+      name: props.name,
+      modelValue: props.modelValue,
+      id: props.id,
+      disabled: props.disabled,
+      readonly: props.readonly,
+      required: props.required,
+      invalid: props.invalid,
+      size: props.size,
+      placeholder: props.placeholder ?? t('password.placeholder'),
+    }));
+
+    return { t, root, meter, visible, toggleVisible, forwarded };
+  },
+});
 </script>
+
 <template>
-    <TextInput
-        :name="name"
-        placeholder="گذرواژه خود را وارد کنید"
-        type="password"/>
-</template>
+  <div ref="root" class="password-input">
+    <FormAdornInput
+        v-if="toggle"
+        v-bind="{ ...$attrs, ...forwarded }"
+        :type="visible ? 'text' : 'password'"
+        autocomplete="current-password"
+    >
+      <template #end>
+        <button
+            type="button"
+            class="btn-text theme-secondary btn-icon"
+            :aria-label="visible ? t('password.hide') : t('password.show')"
+            :aria-pressed="visible"
+            @click="toggleVisible"
+        >
+          <svg v-if="!visible" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M1 8s2.5-4.5 7-4.5S15 8 15 8s-2.5 4.5-7 4.5S1 8 1 8Z" /><circle cx="8" cy="8" r="2" />
+          </svg>
+          <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M2 2l12 12M6.6 3.7A7 7 0 0 1 8 3.5C12.5 3.5 15 8 15 8a11 11 0 0 1-2.2 2.6M4 5.4A11 11 0 0 0 1 8s2.5 4.5 7 4.5c1 0 1.9-.2 2.7-.6" />
+          </svg>
+        </button>
+      </template>
+    </FormAdornInput>
+    <TextInput v-else v-bind="{ ...$attrs, ...forwarded }" type="password" autocomplete="current-password" />
+
+    <template v-if="strength">
+      <div ref="meter" class="strength" aria-hidden="true">
+        <div class="strength-segment"></div>
+        <div class="strength-segment"></div>
+        <div class="strength-segment"></div>
+        <div class="strength-segment"></div>
+      </div>
+      <div v-if="strengthText" class="strength-text" aria-live="polite"></div>
+    </template>
+  </div>
+</template>

package/src/PersianDatePickerInput.vue

@@ -1,183 +1,80 @@
 <script>
-import {computed, defineAsyncComponent, defineComponent, inject} from "vue";
+import { defineAsyncComponent, defineComponent, onMounted, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
 
-const Vue3PersianDatetimePicker = defineAsyncComponent(() =>
-    import('vue3-persian-datetime-picker')
-);
+const Vue3PersianDatetimePicker = defineAsyncComponent(() => import('vue3-persian-datetime-picker'));
 
-let _this;
+/**
+ * Jalali (Persian) date / time picker based on vue3-persian-datetime-picker.
+ * Bootstrap 6's own Datepicker does not support the Jalali calendar, so this library is kept on purpose.
+ */
 export default defineComponent({
-  components: {Vue3PersianDatetimePicker},
-  emits: ['update:modelValue', 'change'],
-  props: {
-    name: {
-      type: String,
-      required: true,
+    name: 'PersianDatePickerInput',
+    components: { Vue3PersianDatetimePicker },
+    emits: ['update:modelValue', 'change', 'open', 'close'],
+    props: {
+        ...fieldProps,
+        /** date | datetime | time | year-month | month */
+        calendar: { type: String, default: 'date' },
+        view: { type: String, default: 'date' },
+        min: { type: String, default: null },
+        max: { type: String, default: null },
+        range: { type: Boolean, default: false },
+        locale: { type: String, default: 'fa' },
+        /** Format of the stored value. */
+        format: { type: String, default: 'jYYYY/jMM/jDD' },
+        /** Format shown in the input (defaults to `format`). */
+        inputFormat: { type: String, default: null },
+        placeholder: { type: String, default: null },
+        inputClass: { type: String, default: 'form-control fanum' },
+        /** Extra props forwarded to vue3-persian-datetime-picker. */
+        pickerOptions: { type: Object, default: () => ({}) },
     },
-    calendar: {
-      type: String,
-      default: 'date',
-    },
-    view: {
-      type: String,
-      default: 'date',
-    },
-    disabled: Boolean,
-    min: String,
-    max: String,
-    range: Boolean,
-    locale: {
-      default: 'fa',
-    },
-    format: {
-      type: String,
-      default: 'jYYYY/jMM/jDD',
-    },
-    inputFormat: {
-      type: String,
-      default: null,
-    },
-    simple: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: String,
-  },
-  setup(props) {
-    let form = inject('form', {
-      errors: {},
-      getID(name) {
-        return name;
-      }
-    });
-    let group = inject('group', {});
+    setup(props, { emit, expose }) {
+        const field = useField(props, emit);
+        const ready = ref(false);
 
-    const modelValue = computed({
-      get() {
-        return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
-      },
-      set(value) {
-        if (group?.value?.name) {
-          group.value.setData(props.name, value);
-        } else {
-          form.value[props.name] = value;
-        }
-      }
-    });
+        onMounted(() => {
+            ready.value = true; // the picker needs the DOM, so it is never rendered during SSR
+        });
 
-    return {modelValue, form, group};
-  },
-  watch: {
-    modelValue: (newVal, oldVal) => {
-      _this?.$emit('change', newVal, oldVal);
-    }
-  },
-  methods: {
-    clear() {
-      this.modelValue = null;
-    },
-  },
-  mounted() {
-    _this = this;
-  },
-  computed: {
-    isSsr() {
-      return !window || typeof window === 'undefined';
+        watch(
+            () => field.model.value,
+            (now, before) => emit('change', now, before)
+        );
+
+        expose({ clear: () => (field.model.value = null) });
+
+        return { ...field, ready };
     },
-    inputID() {
-      return this.form.getID(this)
-    }
-  },
-  data() {
-    return {}
-  }
-})
+});
 </script>
 
 <template>
-  <template v-if="!isSsr">
-
     <Vue3PersianDatetimePicker
-        v-model="modelValue"
+        v-if="ready"
+        v-model="model"
+        :name="name"
+        :id="inputId"
         :type="calendar"
+        :view="view"
+        :min="min"
+        :max="max"
+        :range="range"
+        :locale="locale"
+        :format="format"
+        :input-format="inputFormat || format"
+        :placeholder="placeholder"
+        :disabled="isDisabled || readonly"
+        :input-class="[inputClass, { 'is-invalid': isInvalid }]"
         editable
         jumpminute="15"
-        :disabled="form?.processing || disabled"
         :roundminute="true"
-        :showNowBtn="true"
-        :autoSubmit="true"
-        :inputFormat="(inputFormat ? inputFormat : format)"
-        input-class="form-control fanum"
-        v-bind="$props"/>
-  </template>
-
+        :show-now-btn="true"
+        :auto-submit="true"
+        v-bind="pickerOptions"
+        @open="$emit('open')"
+        @close="$emit('close')"
+    />
+    <input v-else type="text" class="form-control" :class="{ 'is-invalid': isInvalid }" :placeholder="placeholder" disabled />
 </template>
-<style>
-.vpd-main .vpd-input-group {
-  display: block !important;
-}
-
-.vpd-main .vpd-input-group input {
-  padding: 0.375rem 0.75rem !important;
-  border-radius: var(--bs-border-radius, .5rem) !important;
-  line-height: var(--bs-body-line-height, 1.5) !important;
-  border: 1px solid var(--bs-border-color, #dadada) !important
-}
-
-.vpd-main .vpd-icon-btn {
-  position: absolute;
-  right: 5px;
-  left: auto;
-  top: 0;
-  bottom: 0;
-  height: 30px;
-  min-width: 40px;
-  border: 1px solid var(--bs-secondary) !important;
-  background-color: var(--bs-secondary-bg) !important;
-  color: var(--bs-body-color, #000) !important;
-  border-radius: var(--bs-border-radius, .5rem);
-  margin: auto;
-  transition: all ease 0.3s;
-}
-
-.vpd-main .vpd-icon-btn svg {
-  fill: var(--bs-body-color, #000) !important;
-  transition: all ease 0.3s;
-}
-
-.vpd-main .vpd-icon-btn:hover {
-  background-color: var(--bs-secondary) !important;
-  color: var(--bs-body-color) !important;
-}
-
-.vpd-main .vpd-icon-btn:hover svg {
-  fill: var(--bs-body-bg, #000) !important;
-}
-
-.vpd-content {
-  color: var(--bs-body-color) !important;
-  background-color: var(--bs-body-bg) !important;
-  -moz-font-feature-settings: "ss01";
-  -webkit-font-feature-settings: "ss01";
-  font-feature-settings: "ss01";
-}
-
-.vpd-time .vpd-down-arrow-btn, .vpd-time .vpd-up-arrow-btn {
-  text-align: center;
-}
-
-.vpd-time .vpd-down-arrow-btn svg,
-.vpd-time .vpd-up-arrow-btn svg {
-  margin: 0 auto;
-}
-
-.vpd-controls button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vpd-month-label {
-  width: 110px;
-}
-</style>

package/src/QuantityInput.vue

@@ -1,133 +1,114 @@
 <script>
-import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {computed, defineComponent, inject} from "vue";
+import { computed, defineComponent, onMounted } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useI18n } from './i18n.js';
+import { formatNumber, parseDigits } from './utils/digits.js';
 
+/** Numeric stepper: [ − ] [ value ] [ + ] unit. */
 export default defineComponent({
-  components: {InputGroup, InputGroupText},
-  props: {
-    name: {
-      type: String,
-      required: true,
+    name: 'QuantityInput',
+    emits: ['update:modelValue', 'change', 'input', 'increment', 'decrement', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        min: { type: Number, default: 0 },
+        max: { type: Number, default: null },
+        step: { type: Number, default: 1 },
+        unit: { type: String, default: null },
+        size: { type: String, default: null },
+        locale: { type: String, default: null },
     },
-    required: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
-    unit: {
-      type: String,
-      default: 'عدد'
-    },
-    min: {
-      type: Number,
-      default: 0
-    },
-    max: {
-      type: Number,
-      default: null
-    },
-  },
-  setup(props) {
-    let form = inject('form');
-    let group = inject('group', {});
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const { t } = useI18n(() => props.locale);
 
-    if (form === undefined) {
-      form = {
-        errors: {},
-        getID(name) {
-        }
-      };
-    }
+        const current = computed(() => {
+            const n = Number(field.model.value);
+            return Number.isFinite(n) ? n : props.min;
+        });
 
-    if (!form[props.name]) {
-      form[props.name] = props.min;
-    }
+        const unitText = computed(() => props.unit ?? t('quantity.unit'));
+        const display = computed(() => formatNumber(current.value));
+        const lock = computed(() => props.readonly || field.isDisabled.value);
+        const canIncrement = computed(() => !lock.value && (props.max === null || current.value + props.step <= props.max));
+        const canDecrement = computed(() => !lock.value && current.value - props.step >= props.min);
 
-    const modelValue = computed({
-      get() {
-        return ((group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name]);
-      },
-      set(value) {
-        if (group?.value?.name) {
-          group.value.setData(props.name, value);
-        } else {
-          form.value[props.name] = value;
+        function set(next, event, kind) {
+            let n = next;
+            if (props.max !== null) n = Math.min(n, props.max);
+            n = Math.max(n, props.min);
+            field.model.value = n;
+            if (kind) emit(kind, n);
+            field.emitChange(n, event);
         }
-      }
-    });
 
-    if (!modelValue.value) {
-      modelValue.value = props.min;
-    }
+        function onInput(event) {
+            const parsed = parseDigits(event.target.value);
+            field.model.value = parsed === null ? props.min : parsed;
+            event.target.value = formatNumber(field.model.value);
+            emit('input', field.model.value, event);
+        }
 
-    return {modelValue, group, form};
-  },
-  methods: {
-    onChange(event) {
-      let value = parseFloat(this.$number.toEnglish(event.detail?.unmasked)) || 1;
-      this.$emit('update:modelValue', value);
-      this.modelValue = value;
-    },
-    increment() {
-      if (!this.max || (this.max < this.modelValue)) {
-        this.modelValue = this.modelValue + 1;
-      }
+        onMounted(() => {
+            // A quantity is never empty: initialise it with the minimum
+            const v = field.model.value;
+            if (v === null || v === undefined || v === '') field.model.value = props.min;
+        });
+
+        return {
+            ...field,
+            t,
+            unitText,
+            display,
+            canIncrement,
+            canDecrement,
+            lock,
+            increment: (e) => canIncrement.value && set(current.value + props.step, e, 'increment'),
+            decrement: (e) => canDecrement.value && set(current.value - props.step, e, 'decrement'),
+            onInput,
+            clampOnBlur: (e) => set(current.value, e),
+        };
     },
-    decrement() {
-      if ((!this.min || (this.min < this.modelValue)) && this.modelValue > 1) {
-        this.modelValue = this.modelValue - 1;
-      }
-    }
-  },
-  data() {
-    return {}
-  }
-})
+});
 </script>
+
 <template>
-  <InputGroup class="input-group-quantity">
-    <button @click="increment" type="button" class="btn">
-      <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H11V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V13H21C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H13V3Z"
-            fill="#0F0F0F"/>
-      </svg>
-    </button>
-    <input
-        :name="name"
-        :value="this.modelValue"
-        v-maska
-        data-maska="###,###,###,###,###,###,###"
-        data-maska-reversed
-        @maska="onChange"
-        :class="{'is-invalid': form.errors[name]}"
-        :disabled="disabled || form.processing"
-        :readonly="readonly"
-        type="tel"
-        class="form-control fanum text-center">
-    <button @click="decrement" type="button" class="btn">
-      <svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none">
-        <path fill="#000000" fill-rule="evenodd" d="M18 10a1 1 0 01-1 1H3a1 1 0 110-2h14a1 1 0 011 1z"/>
-      </svg>
-    </button>
-    <InputGroupText class="fanum">{{ unit }}</InputGroupText>
-    <slot name="suffix"/>
-  </InputGroup>
+    <div class="input-group input-group-quantity" :class="{ 'is-invalid': isInvalid }">
+        <button
+            type="button"
+            class="btn-outline theme-secondary btn-icon"
+            :disabled="!canIncrement"
+            :aria-label="t('quantity.increase')"
+            @click="increment"
+        >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M8 3v10M3 8h10" /></svg>
+        </button>
+        <input
+            :name="name"
+            :id="inputId"
+            :value="display"
+            :readonly="readonly"
+            :disabled="isDisabled"
+            :aria-invalid="isInvalid || undefined"
+            type="tel"
+            inputmode="numeric"
+            autocomplete="off"
+            class="form-control fanum text-center"
+            :class="{ 'is-invalid': isInvalid }"
+            @input="onInput"
+            @change="clampOnBlur"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+        <button
+            type="button"
+            class="btn-outline theme-secondary btn-icon"
+            :disabled="!canDecrement"
+            :aria-label="t('quantity.decrease')"
+            @click="decrement"
+        >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 8h10" /></svg>
+        </button>
+        <span v-if="unitText" class="input-group-text fanum">{{ unitText }}</span>
+        <slot name="suffix" />
+    </div>
 </template>
-<style>
-
-.input-group-quantity .input-group-text,
-.input-group-quantity .btn {
-  background-color: var(--bs-body-bg);
-  --bs-btn-hover-bg: var(--bs-secondary-bg);
-  --bs-btn-active-bg: var(--bs-secondary-bg);
-}
-
-.input-group-quantity input.form-control {
-  border: 0 !important;
-  box-shadow: none !important;
-}
-
-.input-group-quantity .btn svg {
-  width: 14px;
-  height: 14px;
-}
-</style>