inertia-bootstrap-forms 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "2.1.2",
+    "version": "2.1.3",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",

package/src/GroupControl.vue

@@ -61,7 +61,7 @@ export default defineComponent({
 })
 </script>
 <template>
-    <div class="form-control-group" :data-group-id="groupID" ref="groupEl">
+    <div class="form-control-group" :data-name="name" :data-group-id="groupID" ref="groupEl">
         <slot/>
     </div>
 </template>

package/src/PersianDatePickerInput.vue

@@ -1,5 +1,6 @@
 <script>
 import {computed, defineAsyncComponent, defineComponent, inject} from "vue";
+
 const Vue3PersianDatetimePicker = defineAsyncComponent(() =>
     import('vue3-persian-datetime-picker')
 );
@@ -21,6 +22,7 @@ export default defineComponent({
       type: String,
       default: 'date',
     },
+    disabled: Boolean,
     min: String,
     max: String,
     range: Boolean,
@@ -29,12 +31,16 @@ export default defineComponent({
     },
     format: {
       type: String,
-      default: 'jYYYY-jMM-jDD',
+      default: 'jYYYY/jMM/jDD',
     },
     inputFormat: {
       type: String,
       default: null,
     },
+    simple: {
+      type: Boolean,
+      default: false,
+    },
     placeholder: String,
   },
   setup(props) {
@@ -76,7 +82,7 @@ export default defineComponent({
   },
   computed: {
     isSsr() {
-      return typeof window === 'undefined';
+      return !window || typeof window === 'undefined';
     },
     inputID() {
       return this.form.getID(this)
@@ -89,75 +95,63 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="input-group">
-    <input
-        :name="name"
-        :id="inputID"
-        :value="modelValue"
-        :placeholder="(placeholder || 'انتخاب تاریخ')"
-        :class="{'is-invalid': form.errors[name]}"
-        :disabled="form?.processing"
-        type="text" class="form-control form-control--datepicker text-start fanum">
-    <button
-        type="button"
-        @click="clear"
-        class="input-group-text input-group-datepicker-delete"
-        :class="{'input-group-datepicker-delete-show': modelValue}">
-      <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C20.1752 21.4816 19.3001 21.7706 18 21.8985"
-            stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
-        <path d="M7 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
-        <path d="M17 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
-        <path d="M21.5 9H16.625H10.75M2 9H5.875" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
-        <path d="M18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17Z" fill="#1C274C"/>
-        <path d="M18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13Z" fill="#1C274C"/>
-        <path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="#1C274C"/>
-        <path d="M13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13Z" fill="#1C274C"/>
-        <path d="M8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17Z" fill="#1C274C"/>
-        <path d="M8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13Z" fill="#1C274C"/>
-      </svg>
-    </button>
-  </div>
-  <Vue3PersianDatetimePicker
-      :type="calendar"
-      :view="view"
-      :min="min"
-      :max="max"
-      v-if="!isSsr"
-      jumpminute="15"
-      :range="range"
-      :locale="locale"
-      :simple="false"
-      :roundminute="true"
-      :showNowBtn="true"
-      :autoSubmit="true"
-      :format="format"
-      :inputFormat="(inputFormat ? inputFormat : format)"
-      :displayFormat="format"
-      v-model="modelValue"
-      :custom-input="'#'+inputID"/>
+  <template v-if="!isSsr">
+
+    <Vue3PersianDatetimePicker
+        v-model="modelValue"
+        :type="calendar"
+        editable
+        jumpminute="15"
+        :disabled="form?.processing || disabled"
+        :roundminute="true"
+        :showNowBtn="true"
+        :autoSubmit="true"
+        :inputFormat="(inputFormat ? inputFormat : format)"
+        input-class="form-control"
+        v-bind="$props"/>
+  </template>
+
 </template>
 <style>
-.form-control--datepicker {
-  direction: rtl;
+.vpd-main .vpd-input-group {
+  display: block !important;
 }
 
-.input-group-datepicker-delete {
-  width: 42px;
-  text-align: center;
+.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;
 }
 
-.input-group-datepicker-delete .fa-times {
-  display: none;
+.vpd-main .vpd-icon-btn svg {
+  fill: var(--bs-body-color, #000) !important;
+  transition: all ease 0.3s;
 }
 
-.input-group-datepicker-delete-show:hover .fa-times {
-  display: block;
+.vpd-main .vpd-icon-btn:hover {
+  background-color: var(--bs-secondary) !important;
+  color: var(--bs-body-color) !important;
 }
 
-.input-group-datepicker-delete-show:hover .fa-calendars {
-  display: none;
+.vpd-main .vpd-icon-btn:hover svg {
+  fill: var(--bs-body-bg, #000) !important;
 }
 
 .vpd-content {