inertia-bootstrap-forms 1.0.0 → 1.0.3

package/README.md

@@ -0,0 +1,46 @@
+# InertiaJS Form Components for Laravel
+
+If you're using InertiaJS in Laravel and are tired of creating repetitive forms and numerous components, we've created this package for ourselves and decided to share it with you. Everything is easily usable through Vue.
+
+## Example:
+
+```vue
+<FormContainer v-model="formData">
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <FormLabel>Name</FormLabel>
+            <TextInput name="name" />
+        </div>
+        <div class="col-12 col-sm-3">
+            <FormLabel>Alias</FormLabel>
+            <TextInput name="slug"/>
+        </div>
+        <div class="col-12 col-sm-3">
+            <FormLabel>Status</FormLabel>
+            <Select2Input name="status" :options="[
+                { id: 'active', name: 'Active' },
+                { id: 'disable', name: 'Disabled' },
+                { id: 'draft', name: 'Draft' }
+            ]"/>
+        </div>
+        <div class="col-12 col-sm-6">
+            <FormLabel>New Image</FormLabel>
+            <FileInput name="new_thumbnail" />
+        </div>
+        <div class="col-12">
+            <FormLabel>Description</FormLabel>
+            <EditorInput name="description" />
+        </div>
+        <div class="col-12 text-end">
+            <SubmitButton />
+        </div>
+    </div>
+</FormContainer>
+```
+
+This package simplifies form creation and management in your InertiaJS and Laravel applications, reducing redundancy and improving development efficiency.
+
+If you need to upload files using the `FileInput` component in Laravel and manage them server-side, use our prepared package:
+
+**novinvision/simple-uploader**
+

package/dist/css/from-select.scss

@@ -0,0 +1,374 @@
+/* purgecss start ignore */
+.choices {
+    color: var(--bs-body-color);
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 24px;
+    font-size: var(--bs-body-font-size)
+}
+
+.choices:focus {
+    outline: 0
+}
+
+.choices:last-child {
+    margin-bottom: 0
+}
+
+.choices.is-open {
+    overflow: visible
+}
+
+.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
+    background-color: #eaeaea;
+    cursor: not-allowed;
+    -webkit-user-select: none;
+    user-select: none
+}
+
+.choices.is-disabled .choices__item {
+    cursor: not-allowed
+}
+
+.choices [hidden] {
+    display: none !important
+}
+
+.choices[data-type*=select-one] {
+    cursor: pointer
+}
+
+/**
+//.choices[data-type*=select-one] .choices__inner {
+//    padding-bottom: 7.5px
+//}*/
+
+.choices[data-type*=select-one] .choices__input {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+    background-color: #fff;
+    margin: 0
+}
+
+.choices[data-type*=select-one] .choices__button {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+    padding: 0;
+    background-size: 8px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    margin-top: -10px;
+    margin-right: 25px;
+    height: 20px;
+    width: 20px;
+    border-radius: 10em;
+    opacity: .25
+}
+
+.choices[data-type*=select-one] .choices__button:focus, .choices[data-type*=select-one] .choices__button:hover {
+    opacity: 1
+}
+
+.choices[data-type*=select-one] .choices__button:focus {
+    box-shadow: 0 0 0 2px #005f75
+}
+
+.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
+    display: none
+}
+
+.choices[data-type*=select-one]::after {
+    content: "";
+    height: 0;
+    width: 0;
+    border-style: solid;
+    border-color: #333 transparent transparent;
+    border-width: 5px;
+    position: absolute;
+    right: 11.5px;
+    top: 50%;
+    margin-top: -2.5px;
+    pointer-events: none
+}
+
+.choices[data-type*=select-one].is-open::after {
+    border-color: transparent transparent #333;
+    margin-top: -7.5px
+}
+
+.choices[data-type*=select-one][dir=rtl]::after {
+    left: 11.5px;
+    right: auto
+}
+
+.choices[data-type*=select-one][dir=rtl] .choices__button {
+    right: auto;
+    left: 0;
+    margin-left: 25px;
+    margin-right: 0
+}
+
+.choices[data-type*=select-multiple] .choices__inner, .choices[data-type*=text] .choices__inner {
+    cursor: text
+}
+
+.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
+    position: relative;
+    display: inline-block;
+    margin: 0-4px 0 8px;
+    padding-left: .8rem;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+    background-size: 8px;
+    width: 8px;
+    line-height: 1;
+    opacity: .75;
+    border-radius: 0
+}
+
+.choices[data-type*=select-multiple] .choices__button:focus, .choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=text] .choices__button:focus, .choices[data-type*=text] .choices__button:hover {
+    opacity: 1
+}
+
+.choices__inner {
+    display: inline-block;
+    vertical-align: top;
+    width: 100%;
+    background-color: var(--bs-body-bg, #ffffff);
+    padding: calc(.5rem - 4px) .75rem calc(.5rem - 4px) .75rem;
+    border: 1px solid #ddd;
+    border-radius: var(--bs-border-radius);
+    font-size: var(--bs-body-font-size);
+    min-height: 44px;
+    overflow: hidden
+}
+
+.is-focused .choices__inner, .is-open .choices__inner {
+    border-color: #b7b7b7
+}
+
+.is-open .choices__inner {
+    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0
+}
+
+.is-flipped.is-open .choices__inner {
+    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius)
+}
+
+.choices__list {
+    margin: 0;
+    padding-left: 0;
+    list-style: none
+}
+
+.choices__list--single {
+    display: inline-block;
+    padding: 4px 16px 4px 4px;
+    width: 100%
+}
+
+[dir=rtl] .choices__list--single {
+    padding-right: 4px;
+    padding-left: 16px
+}
+
+.choices__list--single .choices__item {
+    width: 100%
+}
+
+.choices__list--multiple {
+    display: inline
+}
+
+.choices__list--multiple .choices__item {
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: var(--bs-border-radius);
+    padding: 2px 10px;
+    line-height:2;
+    font-size: .8rem;
+    font-weight: 500;
+    margin-right: 3.75px;
+    margin-bottom: 3.75px;
+    background-color: #999999;
+    border: 1px solid #999999;
+    color: #fff;
+    word-break: break-all;
+    box-sizing: border-box
+}
+
+.choices__list--multiple .choices__item[data-deletable] {
+    padding-right: 5px
+}
+
+[dir=rtl] .choices__list--multiple .choices__item {
+    margin-right: 0;
+    margin-left: 3.75px
+}
+
+.choices__list--multiple .choices__item.is-highlighted {
+    background-color: #004a5c;
+    border: 1px solid #003642
+}
+
+.is-disabled .choices__list--multiple .choices__item {
+    background-color: #aaa;
+    border: 1px solid #919191
+}
+
+.choices__list--dropdown, .choices__list[aria-expanded] {
+    display: none;
+    z-index: 3;
+    position: absolute;
+    width: 100%;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    top: 100%;
+    margin-top: -1px;
+    border-bottom-left-radius: var(--bs-border-radius);
+    border-bottom-right-radius: var(--bs-border-radius);
+    overflow: hidden;
+    word-break: break-all
+}
+
+.is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] {
+    display: block
+}
+
+.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
+    border-color: #b7b7b7
+}
+
+.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: -1px;
+    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0
+}
+
+.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
+    position: relative;
+    max-height: 300px;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    will-change: scroll-position
+}
+
+.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
+    position: relative;
+    padding: 10px;
+    font-size: 14px
+}
+
+[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
+    text-align: right
+}
+
+@media (min-width: 640px) {
+    .choices__list--dropdown .choices__item--selectable[data-select-text], .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
+        padding-right: 100px
+    }
+    .choices__list--dropdown .choices__item--selectable[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
+        content: attr(data-select-text);
+        font-size: 12px;
+        opacity: 0;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%)
+    }
+    [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
+        text-align: right;
+        padding-left: 100px;
+        padding-right: 10px
+    }
+    [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
+        right: auto;
+        left: 10px
+    }
+}
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
+    background-color: #f2f2f2
+}
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
+    opacity: .5
+}
+
+.choices__item {
+    cursor: default
+}
+
+.choices__item.has-no-choices {
+    font-style: italic;
+    background-color: var(--bs-tertiary-bg, #f7f7f7);
+    color: var(--bs-secondary-color, #666666);
+}
+
+.choices__item--selectable {
+    cursor: pointer
+}
+
+.choices__item--disabled {
+    cursor: not-allowed;
+    -webkit-user-select: none;
+    user-select: none;
+    opacity: .5
+}
+
+.choices__heading {
+    font-weight: 600;
+    font-size: 12px;
+    padding: 10px;
+    border-bottom: 1px solid #f7f7f7;
+    color: gray
+}
+
+.choices__button {
+    text-indent: -9999px;
+    appearance: none;
+    border: 0;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer
+}
+
+.choices__button:focus, .choices__input:focus {
+    outline: 0
+}
+
+.choices__input {
+    display: inline-block;
+    vertical-align: baseline;
+    background-color: #f9f9f9;
+    font-size: var(--bs-body-font-size);
+    border: 0;
+    border-radius: 0;
+    max-width: 100%;
+    padding: 4px 0 4px 2px
+}
+
+.choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-decoration, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration {
+    display: none
+}
+
+.choices__input::-ms-clear, .choices__input::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0
+}
+
+[dir=rtl] .choices__input {
+    padding-right: 2px;
+    padding-left: 0
+}
+
+.choices__placeholder {
+    opacity: .5
+}
+
+/* purgecss end ignore */

package/index.js

@@ -0,0 +1,49 @@
+import AmountInput from "./src/AmountInput.vue";
+import CaptchaInput from "./src/CaptchaInput.vue";
+import CheckboxButtonInput from "./src/CheckboxButtonInput.vue";
+import CheckboxInput from "./src/CheckboxInput.vue";
+import CheckboxToggle from "./src/CheckboxToggle.vue";
+import PersianDatePickerInput from "./src/PersianDatePickerInput.vue";
+import EditorInput from "./src/EditorInput.vue";
+import FileInput from "./src/FileInput.vue";
+import EmailInput from "./src/EmailInput.vue";
+import GroupControl from "./src/GroupControl.vue";
+import FormContainer from "./src/FormContainer.vue";
+import FormLabel from "./src/FormLabel.vue";
+import locationInput from "./src/locationInput.vue";
+import MobileInput from "./src/MobileInput.vue";
+import PasswordInput from "./src/PasswordInput.vue";
+import QuantityInput from "./src/QuantityInput.vue";
+import SecondarySubmitButton from "./src/SecondarySubmitButton.vue";
+import Select2Input from "./src/Select2Input.vue";
+import StarRatingInput from "./src/StarRatingInput.vue";
+import SubmitButton from "./src/SubmitButton.vue";
+import TelInput from "./src/TelInput.vue";
+import TextAreaInput from "./src/TextAreaInput.vue";
+import TextInput from "./src/TextInput.vue";
+
+export {
+    AmountInput,
+    CaptchaInput,
+    CheckboxButtonInput,
+    CheckboxInput,
+    CheckboxToggle,
+    FileInput,
+    EmailInput,
+    PersianDatePickerInput,
+    EditorInput,
+    GroupControl,
+    FormContainer,
+    locationInput,
+    MobileInput,
+    PasswordInput,
+    QuantityInput,
+    SubmitButton,
+    SecondarySubmitButton,
+    StarRatingInput,
+    Select2Input,
+    FormLabel,
+    TelInput,
+    TextAreaInput,
+    TextInput,
+}

package/package.json

@@ -1,11 +1,17 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.0",
+    "version": "1.0.3",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "index.js",
+    "module": "index.js",
+    "type": "module",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
+    "files": [
+        "dist/*",
+        "src/*"
+    ],
     "author": "NovinVision",
     "license": "ISC",
     "repository": {
@@ -21,6 +27,14 @@
     ],
     "dependencies": {
         "vue": "^3.0.0",
+        "vue-tel-input": "^9.3.0",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
+        "choices.js": "^11.1.0",
+        "vue3-persian-datetime-picker": "^1.2.2",
+        "vue-final-modal": "^4.5.5",
+        "@inertiajs/vue3": "^2.0.3",
+        "@tinymce/tinymce-vue": "^6.1.0",
+        "vue3-bootstrap-components": "^1.0.4",
         "vue-select": "^4.0.0-beta.6"
     },
     "bugs": {

package/{Inputs → src}/AmountInput.vue

@@ -1,6 +1,5 @@
 <script>
-import InputGroup from '../Bootstrap/InputGroup.vue';
-import InputGroupText from '../Bootstrap/InputGroupText.vue';
+import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
 import {inject} from "vue";
 
 export default {

package/{Inputs → src}/CaptchaInput.vue

@@ -9,6 +9,11 @@ export default {
             default: 'captcha',
             required: false,
         },
+        url: {
+            type: String,
+            default: '/captcha/default',
+            required: false,
+        },
         modelValue: '',
         required: Boolean,
         placeholder: {
@@ -37,7 +42,7 @@ export default {
         },
         async getSrc() {
             this.loading = true;
-            this.src = '/captcha/default?t=' + Math.random();
+            this.src = this.url + '?t=' + Math.random();
 
             let _this = this;
             setTimeout(function () {
@@ -48,7 +53,7 @@ export default {
     data() {
         return {
             loading: false,
-            src: '/captcha/default?t=' + Math.random(),
+            src: this.url + Math.random(),
         };
     }
 };
@@ -84,8 +89,8 @@ export default {
     width: 82px;
     height: 43px;
     object-fit: contain;
-    border-top: 1px solid var(--bs-border-color);
-    border-bottom: 1px solid var(--bs-border-color);
+    border-top: 1px solid var(--bs-border-color, #eeeeee);
+    border-bottom: 1px solid var(--bs-border-color, #eeeeee);
 }
 
 .input-group-lg.captcha .captcha-holder {
@@ -94,7 +99,7 @@ export default {
 }
 
 .captcha .btn-refresh {
-    background-color: var(--bs-body-bg);
-    border-color: var(--bs-border-color) !important;
+    background-color: var(--bs-body-bg, #ffffff);
+    border-color: var(--bs-border-color, #eeeeee) !important;
 }
 </style>

package/{Inputs/CheckboxInput.vue → src/CheckboxButtonInput.vue}

@@ -2,6 +2,7 @@
 import {inject} from "vue";
 
 export default {
+    emits: ['change'],
     props: {
         name: {
             type: String,
@@ -19,10 +20,15 @@ export default {
         },
         type: {
             type: String,
-            default: 'checkbox',
+            default: 'radio',
             required: false,
         },
     },
+    methods:{
+        change(e){
+            this.$emit('change', e);
+        }
+    },
     setup(props) {
         let form = inject('form');
 
@@ -30,6 +36,7 @@ export default {
             form = {
                 errors: {},
                 getID(name) {
+                    return name;
                 }
             };
         }
@@ -39,18 +46,24 @@ export default {
 }
 </script>
 <template>
-    <div class="form-check">
+    <label class="btn-label" :for="form.getID(name)+(id || value)" :class="{'active': (form[name] === value || form[name] === true)}">
         <input
             :name="name"
             :id="form.getID(name)+(id || value)"
-            v-model="form[this.name]"
+            v-model="form[name]"
             :class="{'is-invalid': form?.errors[name]}"
             :disabled="form?.processing"
             :type="type"
             :value="value"
-            class="form-check-input">
-        <label class="form-check-label" :for="form.getID(name)+(id || value)">
-            <slot/>
-        </label>
-    </div>
+            @change="change"
+            autocomplete="off"
+            class="btn-check">
+        <slot/>
+    </label>
 </template>
+<style>
+.btn-label:not(.active){
+    --bs-bg-opacity: .3;
+    opacity: .6;
+}
+</style>

package/src/CheckboxInput.vue

@@ -0,0 +1,79 @@
+<script>
+import {computed, inject} from "vue";
+
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        id: {
+            type: String,
+            default: '',
+            required: false,
+        },
+        value: {
+            type: [String, Number],
+            default: 'yes',
+            required: false,
+        },
+        type: {
+            type: String,
+            default: 'checkbox',
+            required: false,
+        },
+    },
+    computed: {
+        inputID() {
+            return this.form.getID(this);
+        }
+    },
+    setup(props) {
+        let form = inject('form', {
+            errors: {},
+            getID(name) {
+                return name;
+            }
+        });
+        let group = inject('group', {});
+
+        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;
+                }
+            }
+        });
+
+        return {modelValue, form, group};
+    },
+}
+</script>
+<template>
+    <div class="form-check">
+        <input
+            :name="name + (group ? '_' + group?.name + '-'+group?.groupID : '')"
+            :id="inputID"
+            v-model="modelValue"
+            :class="{'is-invalid': form?.errors[name]}"
+            :disabled="form?.processing"
+            :type="type"
+            :value="value"
+            @change="e => $emit('change', e)"
+            class="form-check-input">
+        <label class="form-check-label" :for="inputID">
+            <slot/>
+        </label>
+    </div>
+</template>
+<style>
+.form-check,
+.form-check label {
+    cursor: pointer;
+}
+</style>