Compare commits
5 Commits
bootstrap5
...
46a32e3c20
| Author | SHA1 | Date | |
|---|---|---|---|
|
46a32e3c20 | ||
|
|
2981c3dd73 | ||
|
|
6ea537cd55 | ||
|
|
53bc5ef34e | ||
|
|
4e840a540e |
7
.idea/dictionaries/project.xml
generated
Executable file
7
.idea/dictionaries/project.xml
generated
Executable file
@@ -0,0 +1,7 @@
|
||||
<component name="ProjectDictionaryState">
|
||||
<dictionary name="project">
|
||||
<words>
|
||||
<w>viewformat</w>
|
||||
</words>
|
||||
</dictionary>
|
||||
</component>
|
||||
25
.npmignore
Normal file
25
.npmignore
Normal file
@@ -0,0 +1,25 @@
|
||||
# Development files
|
||||
demo/
|
||||
test/
|
||||
src/
|
||||
webpack.config.js
|
||||
Gruntfile.js
|
||||
|
||||
# IDE files
|
||||
.idea/
|
||||
.claude/
|
||||
|
||||
# Temporary files
|
||||
node_modules/
|
||||
*.log
|
||||
|
||||
# Webpack dev files
|
||||
dist/app.js
|
||||
dist/app.js.*
|
||||
dist/jquery.js
|
||||
dist/jquery.js.*
|
||||
|
||||
# Legacy files
|
||||
Package.nuspec
|
||||
bower.json
|
||||
composer.json
|
||||
15
README.md
15
README.md
@@ -33,6 +33,11 @@ The demo showcases:
|
||||
|
||||
## Installation
|
||||
|
||||
### Via npm
|
||||
```bash
|
||||
npm install x-editable-bootstrap5
|
||||
```
|
||||
|
||||
### Dependencies
|
||||
|
||||
This library requires:
|
||||
@@ -98,6 +103,16 @@ grunt build
|
||||
npx webpack --mode=development
|
||||
```
|
||||
|
||||
## Repository
|
||||
|
||||
**Main Repository:** [git.24unix.net/tracer/x-editable-bs5](https://git.24unix.net/tracer/x-editable-bs5)
|
||||
|
||||
**Mirrors:**
|
||||
- GitHub: [github.com/24unix/x-editable-bs5](https://github.com/24unix/x-editable-bs5)
|
||||
- GitLab: [gitlab.com/24unix/x-editable-bs5](https://gitlab.com/24unix/x-editable-bs5)
|
||||
|
||||
Development happens on the main repository at git.24unix.net, with mirrors automatically synced to GitHub and GitLab.
|
||||
|
||||
## License
|
||||
|
||||
This project maintains the same MIT license as the original x-editable project.
|
||||
|
||||
@@ -50,7 +50,7 @@ $(function() {
|
||||
});
|
||||
|
||||
const initialDateValue = new Date().toISOString().split('T')[0];
|
||||
|
||||
|
||||
$('#datepicker').editable({
|
||||
type: 'date',
|
||||
url: 'demo/demo.php', // URL to send the POST request
|
||||
|
||||
122
dist/README.md
vendored
122
dist/README.md
vendored
@@ -1,17 +1,123 @@
|
||||
# X-Editable (Bootstrap 5 Fork)
|
||||
|
||||
This project is a fork of [vitalets/x-editable](https://github.com/vitalets/x-editable), adapted to work with **Bootstrap 5** while maintaining compatibility with jQuery.
|
||||
A drop-in replacement for legacy Bootstrap 3 x-editable projects, modernized for **Bootstrap 5** with jQuery support.
|
||||
|
||||
## Why This Fork?
|
||||
The original **x-editable** library was designed for Bootstrap 3 and has not been actively maintained. This fork modernizes the codebase and updates it to support:
|
||||
|
||||
- **Bootstrap 5**
|
||||
- **Bootstrap Icons** (replacing Glyphicons)
|
||||
This project was created when we needed a **drop-in replacement** for x-editable in a legacy Bootstrap 3 project. The original [vitalets/x-editable](https://github.com/vitalets/x-editable) library has not been actively maintained and doesn't support Bootstrap 5.
|
||||
|
||||
NOTE: This repo has not yet been completely tested and is not available via NPM right now!
|
||||
**Key Features:**
|
||||
- **Bootstrap 5** compatibility
|
||||
- **jQuery** support maintained
|
||||
- **Select dropdowns** - fully functional
|
||||
- **Date pickers** - using bootstrap-datepicker
|
||||
- **Drop-in replacement** - minimal code changes needed
|
||||
- **Streamlined codebase** - Bootstrap 5 only, legacy code removed
|
||||
|
||||
Later:
|
||||
### Using npm:
|
||||
```sh
|
||||
## Demo
|
||||
|
||||
The `/demo` folder contains working examples of the library in action.
|
||||
|
||||
**To run the demo:**
|
||||
```bash
|
||||
# In the project root directory
|
||||
php -S 0.0.0.0:8000
|
||||
|
||||
# Then visit: http://localhost:8000/demo/
|
||||
```
|
||||
|
||||
The demo showcases:
|
||||
- Select inputs with AJAX and static data sources
|
||||
- Date picker functionality
|
||||
- Basic in-place editing
|
||||
|
||||
## Installation
|
||||
|
||||
### Via npm
|
||||
```bash
|
||||
npm install x-editable-bootstrap5
|
||||
```
|
||||
|
||||
### Dependencies
|
||||
|
||||
This library requires:
|
||||
- **Bootstrap 5** (CSS and JS)
|
||||
- **jQuery 3.x**
|
||||
- **bootstrap-datepicker** (for date inputs)
|
||||
|
||||
### Quick Start
|
||||
|
||||
1. **Include the CSS and JS files:**
|
||||
```html
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
|
||||
<!-- Bootstrap Datepicker -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
|
||||
|
||||
<!-- X-Editable Bootstrap 5 -->
|
||||
<link href="dist/bootstrap5-editable/css/bootstrap-editable.css" rel="stylesheet">
|
||||
<script src="dist/bootstrap5-editable/js/bootstrap-editable.js"></script>
|
||||
```
|
||||
|
||||
2. **Initialize editable elements:**
|
||||
```javascript
|
||||
$('#my-editable').editable({
|
||||
type: 'select',
|
||||
source: [
|
||||
{value: 1, text: 'Option 1'},
|
||||
{value: 2, text: 'Option 2'}
|
||||
],
|
||||
url: '/update-endpoint'
|
||||
});
|
||||
```
|
||||
|
||||
## Migration from Bootstrap 3
|
||||
|
||||
If you're migrating from the original x-editable:
|
||||
|
||||
1. **Update Bootstrap** to version 5
|
||||
2. **Add bootstrap-datepicker** dependency (no longer bundled)
|
||||
3. **Replace x-editable files** with this Bootstrap 5 version
|
||||
4. **Update CSS classes** if using custom styling (Bootstrap 3 → 5 changes)
|
||||
|
||||
The JavaScript API remains largely the same, making it a true drop-in replacement.
|
||||
|
||||
## Build
|
||||
|
||||
To build the library from source:
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Build with Grunt
|
||||
grunt build
|
||||
|
||||
# Or build with webpack for demo
|
||||
npx webpack --mode=development
|
||||
```
|
||||
|
||||
## Repository
|
||||
|
||||
**Main Repository:** [git.24unix.net/tracer/x-editable-bs5](https://git.24unix.net/tracer/x-editable-bs5)
|
||||
|
||||
**Mirrors:**
|
||||
- GitHub: [github.com/24unix/x-editable-bs5](https://github.com/24unix/x-editable-bs5)
|
||||
- GitLab: [gitlab.com/24unix/x-editable-bs5](https://gitlab.com/24unix/x-editable-bs5)
|
||||
|
||||
Development happens on the main repository at git.24unix.net, with mirrors automatically synced to GitHub and GitLab.
|
||||
|
||||
## License
|
||||
|
||||
This project maintains the same MIT license as the original x-editable project.
|
||||
|
||||
## Credits
|
||||
|
||||
- Original [x-editable](https://github.com/vitalets/x-editable) by [Vitaliy Potapov](https://github.com/vitalets)
|
||||
- Bootstrap 5 modernization and maintenance by this fork
|
||||
|
||||
2
dist/app.js
vendored
2
dist/app.js
vendored
File diff suppressed because one or more lines are too long
303
dist/app.js.LICENSE.txt
vendored
303
dist/app.js.LICENSE.txt
vendored
@@ -21,302 +21,7 @@
|
||||
* Date: 2023-08-28T13:37Z
|
||||
*/
|
||||
|
||||
/*!****************************!*\
|
||||
!*** ./src/inputs/list.js ***!
|
||||
\****************************/
|
||||
|
||||
/*!****************************!*\
|
||||
!*** ./src/inputs/text.js ***!
|
||||
\****************************/
|
||||
|
||||
/*!******************************!*\
|
||||
!*** ./src/inputs/select.js ***!
|
||||
\******************************/
|
||||
|
||||
/*!********************************!*\
|
||||
!*** ./src/inputs/abstract.js ***!
|
||||
\********************************/
|
||||
|
||||
/*!********************************!*\
|
||||
!*** ./src/inputs/textarea.js ***!
|
||||
\********************************/
|
||||
|
||||
/*!*********************************!*\
|
||||
!*** ./src/inputs/date/date.js ***!
|
||||
\*********************************/
|
||||
|
||||
/*!************************************!*\
|
||||
!*** ./src/bootstrap5-editable.js ***!
|
||||
\************************************/
|
||||
|
||||
/*!**************************************!*\
|
||||
!*** ./src/inputs/date/datefield.js ***!
|
||||
\**************************************/
|
||||
|
||||
/*!*****************************************!*\
|
||||
!*** ./src/element/editable-element.js ***!
|
||||
\*****************************************/
|
||||
|
||||
/*!*******************************************!*\
|
||||
!*** ./src/containers/editable-inline.js ***!
|
||||
\*******************************************/
|
||||
|
||||
/*!********************************************!*\
|
||||
!*** ./node_modules/jquery/dist/jquery.js ***!
|
||||
\********************************************/
|
||||
|
||||
/*!********************************************!*\
|
||||
!*** ./src/editable-form/editable-form.js ***!
|
||||
\********************************************/
|
||||
|
||||
/*!*********************************************!*\
|
||||
!*** ./src/containers/editable-popover5.js ***!
|
||||
\*********************************************/
|
||||
|
||||
/*!**********************************************!*\
|
||||
!*** ./src/containers/editable-container.js ***!
|
||||
\**********************************************/
|
||||
|
||||
/*!**************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/enums.js ***!
|
||||
\**************************************************/
|
||||
|
||||
/*!**************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/index.js ***!
|
||||
\**************************************************/
|
||||
|
||||
/*!**************************************************!*\
|
||||
!*** ./src/editable-form/editable-form-utils.js ***!
|
||||
\**************************************************/
|
||||
|
||||
/*!***************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/popper.js ***!
|
||||
\***************************************************/
|
||||
|
||||
/*!*******************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/math.js ***!
|
||||
\*******************************************************/
|
||||
|
||||
/*!*******************************************************!*\
|
||||
!*** ./src/editable-form/editable-form-bootstrap5.js ***!
|
||||
\*******************************************************/
|
||||
|
||||
/*!********************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/popper-lite.js ***!
|
||||
\********************************************************/
|
||||
|
||||
/*!*********************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/createPopper.js ***!
|
||||
\*********************************************************/
|
||||
|
||||
/*!*********************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/within.js ***!
|
||||
\*********************************************************/
|
||||
|
||||
/*!*********************************************************!*\
|
||||
!*** ./node_modules/bootstrap/dist/js/bootstrap.esm.js ***!
|
||||
\*********************************************************/
|
||||
|
||||
/*!***********************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/flip.js ***!
|
||||
\***********************************************************/
|
||||
|
||||
/*!***********************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/hide.js ***!
|
||||
\***********************************************************/
|
||||
|
||||
/*!***********************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/debounce.js ***!
|
||||
\***********************************************************/
|
||||
|
||||
/*!************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/arrow.js ***!
|
||||
\************************************************************/
|
||||
|
||||
/*!************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/index.js ***!
|
||||
\************************************************************/
|
||||
|
||||
/*!************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/userAgent.js ***!
|
||||
\************************************************************/
|
||||
|
||||
/*!*************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/offset.js ***!
|
||||
\*************************************************************/
|
||||
|
||||
/*!*************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/getAltAxis.js ***!
|
||||
\*************************************************************/
|
||||
|
||||
/*!**************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/mergeByName.js ***!
|
||||
\**************************************************************/
|
||||
|
||||
/*!***************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/contains.js ***!
|
||||
\***************************************************************/
|
||||
|
||||
/*!***************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/getVariation.js ***!
|
||||
\***************************************************************/
|
||||
|
||||
/*!****************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js ***!
|
||||
\****************************************************************/
|
||||
|
||||
/*!*****************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js ***!
|
||||
\*****************************************************************/
|
||||
|
||||
/*!*****************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/computeOffsets.js ***!
|
||||
\*****************************************************************/
|
||||
|
||||
/*!*****************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/detectOverflow.js ***!
|
||||
\*****************************************************************/
|
||||
|
||||
/*!*****************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/orderModifiers.js ***!
|
||||
\*****************************************************************/
|
||||
|
||||
/*!******************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js ***!
|
||||
\******************************************************************/
|
||||
|
||||
/*!******************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/applyStyles.js ***!
|
||||
\******************************************************************/
|
||||
|
||||
/*!******************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/expandToHashMap.js ***!
|
||||
\******************************************************************/
|
||||
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/getBasePlacement.js ***!
|
||||
\*******************************************************************/
|
||||
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/rectToClientRect.js ***!
|
||||
\*******************************************************************/
|
||||
|
||||
/*!********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js ***!
|
||||
\********************************************************************/
|
||||
|
||||
/*!********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js ***!
|
||||
\********************************************************************/
|
||||
|
||||
/*!********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js ***!
|
||||
\********************************************************************/
|
||||
|
||||
/*!********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/computeStyles.js ***!
|
||||
\********************************************************************/
|
||||
|
||||
/*!********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/popperOffsets.js ***!
|
||||
\********************************************************************/
|
||||
|
||||
/*!*********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js ***!
|
||||
\*********************************************************************/
|
||||
|
||||
/*!*********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js ***!
|
||||
\*********************************************************************/
|
||||
|
||||
/*!*********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/eventListeners.js ***!
|
||||
\*********************************************************************/
|
||||
|
||||
/*!*********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/getFreshSideObject.js ***!
|
||||
\*********************************************************************/
|
||||
|
||||
/*!*********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/mergePaddingObject.js ***!
|
||||
\*********************************************************************/
|
||||
|
||||
/*!**********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js ***!
|
||||
\**********************************************************************/
|
||||
|
||||
/*!**********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js ***!
|
||||
\**********************************************************************/
|
||||
|
||||
/*!**********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js ***!
|
||||
\**********************************************************************/
|
||||
|
||||
/*!**********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js ***!
|
||||
\**********************************************************************/
|
||||
|
||||
/*!**********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js ***!
|
||||
\**********************************************************************/
|
||||
|
||||
/*!**********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js ***!
|
||||
\**********************************************************************/
|
||||
|
||||
/*!**********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/modifiers/preventOverflow.js ***!
|
||||
\**********************************************************************/
|
||||
|
||||
/*!***********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js ***!
|
||||
\***********************************************************************/
|
||||
|
||||
/*!***********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js ***!
|
||||
\***********************************************************************/
|
||||
|
||||
/*!***********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js ***!
|
||||
\***********************************************************************/
|
||||
|
||||
/*!***********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js ***!
|
||||
\***********************************************************************/
|
||||
|
||||
/*!***********************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/getOppositePlacement.js ***!
|
||||
\***********************************************************************/
|
||||
|
||||
/*!************************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js ***!
|
||||
\************************************************************************/
|
||||
|
||||
/*!*************************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js ***!
|
||||
\*************************************************************************/
|
||||
|
||||
/*!**************************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js ***!
|
||||
\**************************************************************************/
|
||||
|
||||
/*!***************************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js ***!
|
||||
\***************************************************************************/
|
||||
|
||||
/*!***************************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js ***!
|
||||
\***************************************************************************/
|
||||
|
||||
/*!***************************************************************************!*\
|
||||
!*** ./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js ***!
|
||||
\***************************************************************************/
|
||||
|
||||
/*!****************************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js ***!
|
||||
\****************************************************************************/
|
||||
|
||||
/*!********************************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js ***!
|
||||
\********************************************************************************/
|
||||
/*! X-editable Bootstrap 5 - v25.0.4
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/*! X-editable - v1.5.2
|
||||
/*! X-editable Bootstrap 5 - v25.0.4
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
@@ -170,6 +170,76 @@
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
/* Bootstrap 5 inline editing fixes */
|
||||
.editable-inline .editableform {
|
||||
display: inline-flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 0.5rem !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-input {
|
||||
flex-shrink: 1 !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 200px !important; /* Prevent overly wide selects */
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-input select {
|
||||
max-width: 100% !important;
|
||||
min-width: 120px !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-buttons {
|
||||
flex-shrink: 0 !important;
|
||||
margin-left: 0.5rem !important;
|
||||
margin-top: 0 !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.25rem !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.editable-inline .control-group {
|
||||
white-space: nowrap !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* Improve button styling for Bootstrap 5 */
|
||||
.editable-buttons .btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1.2;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.editable-buttons .btn-sm {
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Hide buttons initially for datepicker inputs - using discovered DOM structure */
|
||||
/* Buttons are siblings to editable-input that contains datepicker */
|
||||
.editable-input:has(.input-group.date) + .editable-buttons,
|
||||
.editable-input:has(.input-group.datepicker-above) + .editable-buttons,
|
||||
/* Buttons might be in same container as editable-input */
|
||||
*:has(.editable-input .input-group.date) .editable-buttons,
|
||||
*:has(.editable-input .input-group.datepicker-above) .editable-buttons {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
/* Show buttons when they have the show-buttons class */
|
||||
.editable-input:has(.input-group.date) + .editable-buttons.show-buttons,
|
||||
.editable-input:has(.input-group.datepicker-above) + .editable-buttons.show-buttons,
|
||||
*:has(.editable-input .input-group.date) .editable-buttons.show-buttons,
|
||||
*:has(.editable-input .input-group.datepicker-above) .editable-buttons.show-buttons {
|
||||
display: inline-flex !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.editable-container.editable-popup {
|
||||
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
|
||||
}
|
||||
|
||||
70
dist/bootstrap5-editable/css/editable-form.css
vendored
70
dist/bootstrap5-editable/css/editable-form.css
vendored
@@ -165,3 +165,73 @@
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
/* Bootstrap 5 inline editing fixes */
|
||||
.editable-inline .editableform {
|
||||
display: inline-flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 0.5rem !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-input {
|
||||
flex-shrink: 1 !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 200px !important; /* Prevent overly wide selects */
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-input select {
|
||||
max-width: 100% !important;
|
||||
min-width: 120px !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-buttons {
|
||||
flex-shrink: 0 !important;
|
||||
margin-left: 0.5rem !important;
|
||||
margin-top: 0 !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.25rem !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.editable-inline .control-group {
|
||||
white-space: nowrap !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* Improve button styling for Bootstrap 5 */
|
||||
.editable-buttons .btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1.2;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.editable-buttons .btn-sm {
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Hide buttons initially for datepicker inputs - using discovered DOM structure */
|
||||
/* Buttons are siblings to editable-input that contains datepicker */
|
||||
.editable-input:has(.input-group.date) + .editable-buttons,
|
||||
.editable-input:has(.input-group.datepicker-above) + .editable-buttons,
|
||||
/* Buttons might be in same container as editable-input */
|
||||
*:has(.editable-input .input-group.date) .editable-buttons,
|
||||
*:has(.editable-input .input-group.datepicker-above) .editable-buttons {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
/* Show buttons when they have the show-buttons class */
|
||||
.editable-input:has(.input-group.date) + .editable-buttons.show-buttons,
|
||||
.editable-input:has(.input-group.datepicker-above) + .editable-buttons.show-buttons,
|
||||
*:has(.editable-input .input-group.date) .editable-buttons.show-buttons,
|
||||
*:has(.editable-input .input-group.datepicker-above) .editable-buttons.show-buttons {
|
||||
display: inline-flex !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
12
package.json
12
package.json
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "@24unix/x-editable",
|
||||
"title": "X-editable",
|
||||
"name": "x-editable-bootstrap5",
|
||||
"title": "X-editable Bootstrap 5",
|
||||
"description": "A maintained fork of x-editable for Bootstrap 5 support.",
|
||||
"version": "1.5.2",
|
||||
"version": "25.0.5",
|
||||
"homepage": "https://git.24unix.net/tracer/x-editable",
|
||||
"author": {
|
||||
"name": "Micha Espey",
|
||||
@@ -18,8 +18,12 @@
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.24unix.net/tracer/x-editable.git"
|
||||
"url": "https://git.24unix.net/tracer/x-editable-bs5.git"
|
||||
},
|
||||
"mirrors": [
|
||||
"https://github.com/24unix/x-editable-bs5",
|
||||
"https://gitlab.com/24unix/x-editable-bs5"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://git.24unix.net/tracer/x-editable/issues"
|
||||
},
|
||||
|
||||
@@ -165,3 +165,73 @@
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
/* Bootstrap 5 inline editing fixes */
|
||||
.editable-inline .editableform {
|
||||
display: inline-flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 0.5rem !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-input {
|
||||
flex-shrink: 1 !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 200px !important; /* Prevent overly wide selects */
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-input select {
|
||||
max-width: 100% !important;
|
||||
min-width: 120px !important;
|
||||
}
|
||||
|
||||
.editable-inline .editable-buttons {
|
||||
flex-shrink: 0 !important;
|
||||
margin-left: 0.5rem !important;
|
||||
margin-top: 0 !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.25rem !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.editable-inline .control-group {
|
||||
white-space: nowrap !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* Improve button styling for Bootstrap 5 */
|
||||
.editable-buttons .btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1.2;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.editable-buttons .btn-sm {
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Hide buttons initially for datepicker inputs - using discovered DOM structure */
|
||||
/* Buttons are siblings to editable-input that contains datepicker */
|
||||
.editable-input:has(.input-group.date) + .editable-buttons,
|
||||
.editable-input:has(.input-group.datepicker-above) + .editable-buttons,
|
||||
/* Buttons might be in same container as editable-input */
|
||||
*:has(.editable-input .input-group.date) .editable-buttons,
|
||||
*:has(.editable-input .input-group.datepicker-above) .editable-buttons {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
/* Show buttons when they have the show-buttons class */
|
||||
.editable-input:has(.input-group.date) + .editable-buttons.show-buttons,
|
||||
.editable-input:has(.input-group.datepicker-above) + .editable-buttons.show-buttons,
|
||||
*:has(.editable-input .input-group.date) .editable-buttons.show-buttons,
|
||||
*:has(.editable-input .input-group.datepicker-above) .editable-buttons.show-buttons {
|
||||
display: inline-flex !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
@@ -33,11 +33,13 @@ $(function(){
|
||||
}
|
||||
|
||||
var Date = function (options) {
|
||||
console.log('Date input constructor called');
|
||||
this.init('date', options, Date.defaults);
|
||||
this.initPicker(options, Date.defaults);
|
||||
|
||||
// Ensure type is set correctly
|
||||
this.type = 'date';
|
||||
console.log('Date input initialized');
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);
|
||||
@@ -77,23 +79,48 @@ $(function(){
|
||||
},
|
||||
|
||||
render: function () {
|
||||
console.log('Date render method called');
|
||||
// Ensure we have an input element
|
||||
if (!this.$input || !this.$input.length) {
|
||||
console.log('Date render: No input element found');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Date render: Input element found');
|
||||
|
||||
// Initialize datepicker immediately
|
||||
try {
|
||||
this.$input.datepicker(this.options.datepicker);
|
||||
console.log('Date render: Datepicker initialized');
|
||||
|
||||
// Force set the initial value if we have one
|
||||
if (this.value) {
|
||||
this.$input.datepicker('setDate', this.value);
|
||||
}
|
||||
} catch (error) {
|
||||
// Silently handle datepicker initialization errors
|
||||
console.log('Date render: Datepicker error:', error);
|
||||
}
|
||||
|
||||
// Use a more aggressive approach - hide buttons with multiple methods
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
// Try multiple selectors to find buttons
|
||||
var $buttons = self.$form ? self.$form.find('.editable-buttons') : $();
|
||||
if ($buttons.length === 0) {
|
||||
$buttons = self.$tpl.closest('.editableform').find('.editable-buttons');
|
||||
}
|
||||
if ($buttons.length === 0) {
|
||||
$buttons = self.$tpl.closest('.editable-container').find('.editable-buttons');
|
||||
}
|
||||
|
||||
console.log('Date render: Found buttons:', $buttons.length);
|
||||
if ($buttons.length > 0) {
|
||||
$buttons.hide();
|
||||
$buttons.css('display', 'none');
|
||||
console.log('Date render: Hidden buttons');
|
||||
}
|
||||
}, 100);
|
||||
|
||||
//"clear" link
|
||||
if(this.options.clear) {
|
||||
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
|
||||
@@ -178,24 +205,41 @@ $(function(){
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
// Override default autosubmit behavior for datepicker workflow
|
||||
// Show buttons only after date selection
|
||||
this.$input.on('changeDate', $.proxy(function(e) {
|
||||
console.log('Date changeDate event triggered');
|
||||
// Hide the datepicker
|
||||
this.$input.datepicker('hide');
|
||||
// Show save/cancel buttons after date selection
|
||||
setTimeout($.proxy(function() {
|
||||
if (this.options.showbuttons !== false) {
|
||||
var $buttons = this.$form ? this.$form.find('.editable-buttons') : $();
|
||||
if ($buttons.length === 0) {
|
||||
$buttons = this.$tpl.closest('.editableform').find('.editable-buttons');
|
||||
}
|
||||
if ($buttons.length === 0) {
|
||||
$buttons = this.$tpl.closest('.editable-container').find('.editable-buttons');
|
||||
}
|
||||
|
||||
console.log('Date changeDate: Found buttons to show:', $buttons.length);
|
||||
$buttons.show();
|
||||
$buttons.css('display', 'inline-block');
|
||||
}
|
||||
}, this), 100);
|
||||
}, this));
|
||||
|
||||
// Keep the original click behavior as backup
|
||||
this.$input.on('mouseup', '.day', function(e){
|
||||
if($(e.currentTarget).is('.old') || $(e.currentTarget).is('.new')) {
|
||||
return;
|
||||
}
|
||||
console.log('Date mouseup on day');
|
||||
var $form = $(this).closest('form');
|
||||
setTimeout(function() {
|
||||
$form.submit();
|
||||
$form.find('.editable-buttons').show();
|
||||
}, 200);
|
||||
});
|
||||
//changedate is not suitable as it triggered when showing datepicker. see #149
|
||||
/*
|
||||
this.$input.on('changeDate', function(e){
|
||||
var $form = $(this).closest('form');
|
||||
setTimeout(function() {
|
||||
$form.submit();
|
||||
}, 200);
|
||||
});
|
||||
*/
|
||||
},
|
||||
|
||||
/*
|
||||
|
||||
@@ -33,12 +33,36 @@ Automatically shown in inline mode.
|
||||
//need to disable original event handlers
|
||||
this.$input.off('focus keydown');
|
||||
|
||||
// Hide buttons initially for datepicker workflow
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
if (!self.$form) {
|
||||
// Find buttons in the broader DOM and hide them directly
|
||||
var $allButtons = $('.editable-buttons:visible');
|
||||
if ($allButtons.length > 0) {
|
||||
$allButtons.each(function(i, btn) {
|
||||
// Directly hide this button for datepicker
|
||||
var $btn = $(btn);
|
||||
$btn.hide();
|
||||
$btn.css('display', 'none !important');
|
||||
$btn.addClass('datepicker-hidden');
|
||||
|
||||
// Store reference for later showing
|
||||
self.$dateButtons = $btn;
|
||||
});
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
|
||||
//update value of datepicker
|
||||
this.$input.keyup($.proxy(function(){
|
||||
this.$tpl.removeData('date');
|
||||
this.$tpl.datepicker('update');
|
||||
}, this));
|
||||
|
||||
// Manually call autosubmit to set up our event handlers
|
||||
this.autosubmit();
|
||||
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
@@ -86,7 +110,61 @@ Automatically shown in inline mode.
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
//reset autosubmit to empty
|
||||
// Override default autosubmit behavior for datepicker workflow
|
||||
// We handle this manually with changeDate event
|
||||
|
||||
// Setup the manual workflow: show buttons only after date selection
|
||||
this.$tpl.on('changeDate', $.proxy(function(e) {
|
||||
// Hide the datepicker using multiple methods to ensure it closes
|
||||
setTimeout($.proxy(function() {
|
||||
// Try datepicker hide methods
|
||||
try {
|
||||
this.$tpl.datepicker('hide');
|
||||
} catch(err) {
|
||||
// Fallback to input method
|
||||
}
|
||||
|
||||
try {
|
||||
this.$input.datepicker('hide');
|
||||
} catch(err) {
|
||||
// Continue to force methods
|
||||
}
|
||||
|
||||
// Force hide all datepicker elements
|
||||
$('.datepicker').hide();
|
||||
$('.datepicker-dropdown').hide();
|
||||
|
||||
// Ensure any remaining visible datepickers are hidden
|
||||
var $visiblePicker = $('.datepicker:visible, .datepicker-dropdown:visible');
|
||||
if ($visiblePicker.length > 0) {
|
||||
$visiblePicker.css('display', 'none !important');
|
||||
$visiblePicker.css('visibility', 'hidden');
|
||||
}
|
||||
}, this), 10);
|
||||
|
||||
// Show save/cancel buttons after date selection
|
||||
setTimeout($.proxy(function() {
|
||||
if (this.options.showbuttons !== false) {
|
||||
var $buttons = this.$dateButtons || $('.editable-buttons.datepicker-hidden');
|
||||
if ($buttons.length === 0) {
|
||||
$buttons = this.$form ? this.$form.find('.editable-buttons') : $();
|
||||
}
|
||||
if ($buttons.length === 0) {
|
||||
$buttons = this.$tpl.closest('.editableform').find('.editable-buttons');
|
||||
}
|
||||
if ($buttons.length === 0) {
|
||||
$buttons = this.$tpl.closest('.editable-container').find('.editable-buttons');
|
||||
}
|
||||
|
||||
$buttons.show();
|
||||
$buttons.css('display', 'inline-flex');
|
||||
$buttons.addClass('show-buttons');
|
||||
$buttons.removeClass('datepicker-hidden');
|
||||
}
|
||||
}, this), 100);
|
||||
}, this));
|
||||
|
||||
// Do NOT call parent autosubmit to prevent immediate form submission
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user